Javascript

Basics

* JS reference is through script tag - <script src="myScript.js"></script>

• getElementById - Locate the element
• innerHTML - change the content. Ex;

document.getElementById("demo").innerHTML = "Hello JavaScript";

• Src - image src. Ex; <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
• Style - change style. Ex; document.getElementById("demo").style.fontSize = "25px"; or style.display = 'none' / 'block' (none- hide; block - show)
• Function: Block of script. JS can be in head, body or external file

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

 

• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write(). - If executed after page load then it clears all html content.
  • The document.write() method should only be used for testing.
• Writing into an alert box, using window.alert(). - Popup window. Or can also just use alert("msg")
• Arguments of function are passed by value. If a function changes an argument's value, it does not change the parameter's original value.
• Objects are pass by reference and hence mutable.
• The call() and apply() method can be used to invoke one obj's method on a 2nd object. Ex:

var person = {  firstName:"John",    lastName: "Doe",
         fullName: function() {
        return this.firstName + " " + this.lastName; }}
var myObject = { firstName:"Mary", lastName: "Doe" }
person.fullName.call(myObject);  // Will return "Mary Doe"

• Do Not Declare Strings, Numbers, and Booleans as Objects! Such as var x = new String();  (this will declare it as a string object which is not recommended
• Function Scope:
  • Local scope - Variables declared within a function, become LOCAL to the function. Local variables are created when a function starts, and deleted when the function is completed.
  • Global scope - A variable declared outside a function, becomes GLOBAL.
  • If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable. Ex;

function myFunction() {     carName = "Volvo"; } - here since carName was not declared within the function explicitly it becomes global

• Global variables are not created automatically in Strict mode. All modern browsers support running JavaScript in "Strict Mode".

• With JS, the global scope is the complete JavaScript environment while in HTML, the global scope is the window object. All global variables belong to the window object. Do NOT create global variables unless you intend to. Your global variables (or functions) can overwrite window variables (or functions).

• HTML Events:

  • Common events are onchange, onclick, onmouseover, onmouseout, onkeydown, onload
  • HTML event attributes can execute JS code directly, call functions, assign your own event handler functions to HTML elements, prevent events from being sent etc

• Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope. But initiations are not hoisted.

• "use strict"; Defines that JavaScript code should be executed in "strict mode". - Strict mode changes previously accepted "bad syntax" into real errors. Ex, in normally, mistyping a variable name creates a new global variable. In strict mode, this will throw an error.

Destructuring -

• Its used to simplify references to object & array variables. Instead of using book.publisher.name we can use as below;

  const book = {
    name: 'React book',
    author: 'Andrew Mead',
    publisher: {
      name: 'Oriley'
    }
  }   
  const {name: publisherName = 'self published'} = book.publisher; // Colon syntax is to rename the destructured object. In this case name is renamed to publisherName.
  console.log(publisherName);

• Defaults can be setup as shown above.
• Array restructuring is similar . example below... const [item1, item2, ,item4] = arrayName
• While passing objects to a function we can use destructuring like this; i.e. If a function is passed an object but it needs only a specific field of an obj, instead of receiving the whole obj and then picking the specific field we can use destructuring to take in only what we need and also set default values or rename the field as needed by the function.

  incrementCount(obj); // calling the function.

//Func definition:
  const incrementCount = ({ incrementBy = 1 }) => { //use this way instead of assigning it to an object and then referncing it
    //....
  }

We can also set defaults right here. i.e. setting it to 1.