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.
-
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
-
additional diff b/w declared and undeclared vars:
(MDN)
- Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.
- Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).
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
- javascript_eg (my own examples)
- javascript_date (simple script print current date/time)
- eg-code/eg-jsajax eg, prob not working anymore
- mapbox examples. See Examples section, most have javascript in them.
- SmellyMapbox JS app for ETA collaboration about garbage/energy sites and odor dispersion simulation info
- mapbox with jQuery sliderslider that i didn't end up using, but good example of jQuery usage with Mapbox GL JS
- inet-dev-class/js (eg I tried before getting Mapbox GL JS working) ::
- helloWorld.jsvar, const, console.log()
- mapFromFile.js(better to look at smelly above)
- jQuery
(alt loc in jquery_class) ::
- jQuery class homework toc(don't seems to be working after dropbox cut off html web hosting)
- taxonomy_reporterdata table jQuery for highlight, sectioning and sorting. yet html remains very clean for even text-based viewing.
- css ::
- ho-embeded.html simple page with embeded css
- See psg2.html/psg2.css for example used for the Pocked SysAdmin Guide pages, done after taking the css class.
- psg2.html, psg1.html both have various javascript thing for g+, translate, and other stuff in it
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/
<-- This version said to work with HTML/XML, but don't seems to work no more for me.
<-- This version with embeded uri works
hoti1
bofh1
