JavaScript

It was developed under the name Mocha, but was officially called LiveScript and renamed into JavaScript in 1995 by Brendan Eich at Netscape Communications as the scripting language for the Netscape Navigator Browser. It has been standardized by ECMA International as ECMAScript.

JavaScript + DOM/BOM + CSS + (X)HTML = DHTML.

JavaScript code in (X)HTML pages can be executed "on the fly" as the document is rendered (i.e. code outside of functions executes as the <script> element is encountered); in most cases though, JavaScript code is executed in response to document events (e.g. clicking a page element).

Versions

• JavaScript 1.5
• Jscript 5.5
• ECMAScript v3 (ECMA-262 3rd Edition)
• JavaScipt 1.8.1
• ECMAScript 5 (ECMA-262 5th Edition)

Frameworks

• script.aculo.us
• jQuery
• MooTools
• Prototype
• Dojo Toolkit
• etc

JavaScript can be linked or embedded in web pages using the <script> element.

• Linked

					 <script type="text/javascript" src="scripts.js"/></script>
				

• Embedded

				 <script type="text/javascript"> 
				 <!-- hide script from non-JavaScript browsers ..
				 /* script code here */
				 // end of script .. -->
				 </script>
				

Basic Language Features

• Paradigm
• Object-oriented (prototype-based)
• Functional
• Imperative Scripting Language
• Java/C like Syntax
• Implicit semicolon insertion for statement termination
• Identifiers are alphanumeric, _, and $ characters
• Single-line (//) or block (/**/) comments
• Type system and variable scoping rules
  • Dynamic (aka loose or weak) typing
  • Global (aka top-level) or local scopes
  • Data types:
    • Primitive types
    • Numbers (decimal, hexadecimal notation)
    • Booleans (true, false)
    • Strings (Single or Double quote delimited)
    • Undefined and Null
    • Composite(object)types
    • Core Javascript Object
    • Object, Number, Boolean, String, Date, Math, Global, RegExp, Error
    • Arrays

      
                          // array creation
                          var myArr = [];
                          var myArr = new Array();
                          // array methods
                          // Appends to the end of the array can contain any object or value
                          myArr.push('test');
                          myArr.push({name:'chris'}); // adding objects
                          myArr.push(function(){ console.log('Hello'); }) // even functions
                          // Removes and returns last item of array
                          var item = myArr.pop();
                          // Appends as first item in array
                          myArr.unshift('first item');
                          // Same as pop but with the first element instead of last
                          var firstItem = myArr.shift();
      
                          var arr = ['one', 'two', 'three'];
                          // Returns ['one', 'two']
                          var sliced = arr.slice(0, 2);
      
                          // Reversed the ordering of an array
                          arr.reverse();
                          // Sorts an array alphanumerically
                          arr.sort();
                          // This also can take a callback which will be use for sorting
                          // This sorts the array numerically
                          arr.sort(function(a, b){
                              return a - b;
                          });
      
                          // Converts an array into a string using a delimeter
                          arr.join(','); // returns the string "one,two,three"
      
                          /* Iterating an array */
                          // Array and for-each
                          for(var index in arr){
                              console.log(arr[index]);
                          }
      
                          // Or the built in forEach method
                          arr.forEach(function(value){
                           console.log(value);
                          });
      
                              

      There are also the iterator methods that are used to iterate for each of the values in array without resorting to for loops

      filter(callback)

      Filters an array using the callback

      every(callback)

      Tests all elements pass the test, returns a boolean

      map(callback)

      Does the callback to all elements

      forEach(callback)

      Same as the for-each JavaScript but as a method

      reduce(callback)

      Uses an accumulator which can be used for each iteration

    • Functions (Functions, Argument)

    
                        // Function declaration
                        function sayHello(){
                            console.log('Hello!');
                        }
                        // alternatively
                        var sayHello = function(){
                            console.log('Hello!')
                        }
                        // Both functions can be called by invoking the name
                        sayHello();
    
                        // Functions can also take arguments:
                        function sayHello(name){
                            console.log('Hello '  + name);
                        }
    
                        // invoking would be like:
                        sayHello('Cee');
    
                        // Using the arguments array
                        function usingOptionalArguments(){
                            console.log(arguments[0]);
                            console.log(arguments[1]);
                            console.log(arguments[2]);
                        }
                        usingOptionalArguments('first', 'second', 'third');
    
                        // Function with return type
                        function isGreater(a, b){
                            return a > b;
                        }
                        isGreater(3, 2); // returns true
                                    

    • Objects

    There are couple of ways of creating objects, but the common way is to use an object literal

    
                        // The best way to understand objects is by creating an object literal
                        var buddha = {
                            name: 'Siddharta',
                            sex: 'Male',
                            hometown: 'India'
                        }
                        // Now we have an object assigned to the variable buddha
                        // We can access its properties by using the dot notation
                        console.log(buddha.name); // this prints out 'Siddharta'
                        // or
                        console.log(buddha["name"]);
                        // To set another property we can either do:
                        buddha.fullName = "Siddharta Gautama";
                        // or
                        buddha['fullName'] = "Siddharta Gautama"
                        // To edit a property its going to be the same
                        buddha.fullName = "Sidhharta Gautama - The Buddha"
    
                        // The snippet below is commonly used to get properties of objects
                        for (var propertyName in buddha){
                            console.log(buddha[propertyName]);
                        }
    
                        // To delete a property from that object we can do:
                        delete buddha.fullName
    
                        // Objects can also be converted to strings and vice-versa
                        var stringRepresentation = JSON.stringify({name: 'Chris'});
                        // Converting it to an object again
                        var chris = JSON.parse(stringRepresentation);
    
                                    

    • DOM Objects
    • Anchor, Applet, Attr, Comment, DOMException, DOMImplementation, DocumentFragment, Element, Event, Form, Image, Input, Layer, Link, Node, Option, Select, Style, Text, TextArea

The DOM (Document Object Model)

There are many methods and properties available for the DOM and to demonstrate let's look at it in action

Retrieving DOM Elements

Consider the follwing snippet:

HTML

            <div>
                <p id="first-paragraph" class="odd" name="first">first</p>
                <p class="even">second</p>
                <p class="odd">third</p>
                <p class="even">fourth</p>
            </div>
            <div>
                <p name="first">first second div</p>
            </div>
        

JavaScript

            // Get Element By specified id
            var firstParagraph = document.getElementById('first-paragraph');
            // Get "Elements" by Class Name
            // Note: that this returs the array of nodes
            var oddNodes = document.getElementsByClassName('odd');
            // oddNodes contains an array, retrieving the first element
            // can look something like this
            var firstOddNode = oddNodes[0]; // first odd node
            // Getting "Elements" By name. Also returns an array
            var firstParagraphs = document.getElementsByName('first-paragraphs'); // returns an array
            // Get by tag name. Also returns an array
            var allParagraphs = document.getElementsByTagName('p'); // all <p> tags will be returned as an array

            /* Using CSS Selectors */
            /* This is a powerful selector feature that we can use to select elements using their css selectors */
            /* to demonstrate: */

            // Instead of
            var allParagraphs = document.getElementsByTagName('p');
            // We can just do this:
            var allParagraphs = document.querySelectorAll('p');
            // For single values, such as an id
            var firstParagraph = document.querySelector('#first-paragraph');
        

Creating Nodes

The DOM has multiple methods to create instances of nodes. Below are the methods used for creating nodes:

createElement(tagName)

Used for creating tags

createTextNode(nodeValue)

This creates a text node which can then be used to add text inside an element node

cloneNode(deep: boolean)

This is for creating copies of nodes, the deep argument is boolean. If it's true it copies the entire tree of the node

To demonstrate we have the snippet below:

            // creates a p element
            var p = document.createElement('p');
            // creates a text node
            var text = document.createTextNode('Hello!');
            // appends the text node inside the created p element
            p.appendChild(text);
            document.body.appendChild(p);
        

This results with the ff:

            <body>
             <p>Hello!</p>
            </body>
        

Node Properties

HTML

            <p id="para">Lorem upsum...</p>
        

JavaScript

            var paragraph = document.getElementById('para'); // gets the paragraph
            // This changes the content 'Lorem ipsum...' to 'Hello'
            paragraph.textContent = "Hello";
            // Same as textContent above
            paragraph.innerText = "Hello";
            // If placing HTML use the innerHTML property
            paragraph.innerHTML = "Hello Chris";
            // This code replaces the whole tag.
            // After execution the element will become a div tag
            paragraph.outerHTML = "<div><p>Hello</p></div>"
        

We can also set attributes and styles using JavaScript

            var paragraph = document.getElementById('para');
            // Setting attributes
            paragraph.setAttribute('class', 'text-danger');
            // or better there is built-in a className property
            paragraph.className = "text-info";
            // Getting attributes
            paragraph.getAttribute('class'); // will return 'text-danger'
            // Setting the style via the style property
            paragraph.style = 'color: red'; // The text is now red
            // Setting the style via properties
            v.style.color = 'blue'; // Text now blue
            v.style.fontSize = '3em';
            v.style.backgroundColor = 'blue';
        

Adding, Removing and Reordering Nodes

appendChild(node)

Add the node to the last child node of where the node was used

inserBefore(node, reference)

Insert node before the reference

removeChild(childNode)

Removes specified node from its parent

Consider the following snippet

            var body = document.body;
            var p = document.createElement('p');
            p.innerText = "Hello";
            // appends created p element to body
            body.appendChild(p)

            var firstP = document.createElement('p');
            firstP.innerText = "First Paragraph";
            // inserts firstP before p
            p.parentNode.insertBefore(firstP, p);

            // Removes the second paragraph with the text 'Hello'
            p.parentNode.removeChild(p);

        

ECMAScript 5 Features

• Strict mode
• Putting the following line first in a file or a function switches on the so-called strict mode that makes JavaScript a cleaner language by forbidding some features, performing more checks, and throwing more exceptions:

  
              'use strict';
  						

  
              function foo() {
              'use strict';
              }
  						

• Accessors (Getters and Setters)
• Getters and setters allow you to implement the getting and setting of a property via methods. For example, the following object obj contains a getter for the property foo:

            var obj = { get foo() { return 'abc' } };
            obj.foo
            'abc'
					

• Syntactic Changes
• You can use reserved words (such as new and function) after the dot operator and as unquoted property keys in object literals:

            var obj = { new: 'abc' };
            obj.new
            'abc'
					

• Legal trailing commas
• Trailing commas in object literals and array literals are legal.
• Multiline string literals
• String literals can span multiple lines if you escape the end of the line via a backslash.
• Array Destructuring

            // Array Destructuring
            var [a, b, c]  = [1, 2, 3]; // sets 1,2,3 to a,b and c respectively
            var [a, b, ...others] = [1,2,3,4,5]; // sets 1 and 2 to a and b then the rest to 'others'
            var [,x,,y] = [1,2,3,4,5]; // assigns 2 to x and 4 to y
            

References

• ECMAScript 5. (n.d.). Retrieved April 23, 2017, from http://speakingjs.com/es5/ch25.html
• JavaScript. (2017, April 21). Retrieved April 23, 2017, from https://en.wikipedia.org/wiki/JavaScript
• JavaScript basics. (n.d.). Retrieved April 23, 2017, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics