Refresh Types

JavaScript

101


aka Ecma Script.  
ES5?  ES6?  ES7?

may still want to move it back to psg as javascript.html
tba


JS is weakly typed.
a = 1; 
b = 1; 
( a == b )  // this works
( a === b ) // comparison operator is ===   , or at least Mozilla Dev Net use this.



https://codeburst.io/javascript-essentials-types-data-structures-3ac039f9877b

6 types of primitive data types:

typeof true   // boolean
typeof false  // boolean
logical operators:  && || 

typeof null   // object!! rtfm!

typeof undefined  // undefined

Symbols // everything are different.

typeof 1.5 // number
typeof NaN  // number  WTF?? :)
typeof Infinity // number
typeof 'a' // string


everything else is ojbect.  eg hash, function, etc.


there is a concept of strict mode, which change behavior for mixed data types


Hash:
* http://www.mojavelinux.com/articles/javascript_hashes.html
* https://stackoverflow.com/questions/1208222/how-to-do-associative-array-hashing-in-javascript

Object:
- {}
- var myObj = {};


JSON (java script object notation):
- often a list (array) of objects.
- a way to serialize list as communication encoding in API (eg REST calls).
- HOW to refer to individual elements???   D3js seems to represent things in JSON as well... 

Arrays
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Note that Array is a (?) list construct (?) and not a data type. 
so, can have an array of any of the data type.

[ 'a', 'b' ] + [ 'c' , 'd' ]  //

var fruits = ['Apple', 'Banana'];
fruits.length ; // 2

# loop over an array

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1


fruits[0]; // Apple, ie 0-index for first array element

fruits.push('Orange');   // add element to array (double check that don't have to assign to a new object)
remainingList = fruits.pop();     // remove from end   (note remainingList is a new list?  original list "fruits" stays the same?  also note that pop() isn't returning the element that was removed!
or is MDN tutorial just confusing/mixed up??



Variable & scope


y = 1; 	  // eg of undeclared variable, scope is global, even when first use is inside a function
var z = 2;   // eg of delcared variable, if inside a function, not usable outside of fn it was declared. (aka constrained)

function can create new variable scoping, if block cannot.

  1. var, let, const in ES6 (2015). Include explanation of hoisting: Digital Ocean
    Note that duplication declaration with var is allowed (and no warnings!).
    use `let` inside block or fn is recommended, reduce chance of overwritting global declaration. it also explicitly error out on duplicate `let` declaration
  2. additional diff b/w declared and undeclared vars: (MDN)

Quick Output



Quick output
- alert( "Hello World");        // this is a dialog pop up
- console.log("Hello Debugger");        // ^I in chrome opens debugger, go to console tab.  (ctrl-sh-i)    
- https://stackoverflow.com/questions/1208222/how-to-do-associative-array-hashing-in-javascript
- document.getElementById(id).innerHTML = "Hello Internet";     // id would be the id tag in a 
etc.

Input

Reading file from server



Refs/Links


Validator

Old school HTML badge icon buttons :)
HTML validator: http://validator.w3.org/
(for this page)

(see simple.html for easier test first)
Hmm for css... need new link from blue icon.
CSS validator: http://jigsaw.w3.org/css-validator/
CSS validity icon <-- This version said to work with HTML/XML, but don't seems to work no more for me.
Valid CSS! <-- This version with embeded uri works


[Doc URL: http://tin6150.github.io/psg/psg/javascript.html]
(cc) Tin Ho. See main page for copyright info.


hoti1
bofh1