#Javascript

## DOM

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

https://www.w3schools.com/js/js_htmldom.asp

## Basic

### Datatype

```
var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object
```

### Object
Create an object with 3 properties:
```javascript
var object = {
  ID: 1,
  "name": "Tom",
  grade: {
    math: 94
    physics:89
  }
  // When a function is used as an object property, it is called a method
  sum: function(a,b){
    return a+b;
  }
}
```

Use dot ```.``` or bracket ```[]``` to access or create properties
```javascript
object.ID = object.ID + 1;
object["ID"] = object["ID"] + 1;
object.grade.math = 100;
// Method can be called in the same way
object.sum(1, 2);

// Create new properties or methods in the same way
object[name + "-full"] = "Tom Hanks";
object.minus = function(a,b) {
  return a-b;
};
```

### Question Mark "?"

Three use of question mark: [[https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/|Link]]

## jQuery

Basic syntax is: ````$(selector).action()````\\
A $ sign to define/access jQuery\\
A (selector) to "query (or find)" HTML elements\\
A jQuery action() to be performed on the element(s)\\

By default, jQuery uses "\$" as a shortcut for "jQuery". Doing ````var $=function(){}```` is just defining a function called "\$", it is very same as doing ````var a=function(){}````


### Start a jQuery codeblock

```javascript
$(function() {
   // jQuery methods go here...
});
```
is a short version of
```javascript
$(document).ready(function() {
   // jQuery methods go here...
});
```
```javascript
(function ( $ ) {
   // jQuery methods go here...
})(jQuery)
```

example:
```javascript
$(document).ready(function() {        
    // Assign all list items on the page to be the  color red.  
    // This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
    $('li').css('color', 'red');   
});
```

The pseudo-code for that block is: When the document object model ````$(document) is ready .ready()````, call the following function ````function() {  }````. In that function, check for all ````<li>````'s on the page ````$('li')```` and using the jQuery method .CSS() to set the CSS property "color" to the value "red" ````.css('color', 'red')````;


### Functions in jQuery

Example: hide the current element
```javascript
$(this).hide() 
```

Example: select the element with id="#p1" and trigger an alert when mouse down event happens on them.
```javascript
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
```

Example: define a new function "publish" in jQuery, with two variables
```javascript
$.publish = function (topic, args) {
  ...
};
```

Example: use "on" method to attach multiple event handlers to <p> elements
```javascript
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});
```

#### jQuery plugins
Example: to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called greenify to ```$.fn``` and it will be available just like any other jQuery object method.

```javascript
$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;  // make your function chainable
}
$( "a" ).greenify(); // Makes all the links green.
```

[[https://learn.jquery.com/plugins/basic-plugin-creation/|Some tips on creating good plugins (Minimizing Plugin Footprint, using the each() Method) ]]

#### Callback function
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.

To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: ```$(selector).hide(speed,callback);```

Example:

```javascript
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});
```

#### Chaining functions
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

```javascript
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
```

#### Normal javascript function in jQuery?
You might want to just have a function in jQuery to use the query features. However it could not be called outside of the jQuery namespace. Here's an example:
```javascript
$(document).ready( function () {
    var MyBlah = function(blah) { alert(blah);  };
    MyBlah("Hello this works") // Inside the anonymous function we are cool.
 });

MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)
```

This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go.

Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere.

If you want to call it anywhere, use the `$.` namespace:
```javascript
$(document).ready( function () {
    $.MyBlah = function(blah) { alert(blah);  };
    MyBlah("Hello this works") // Inside the anonymous function we are cool.
 });

$.MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)
```