An introduction to Javascript

Becoming a Javascript Jedi

Created by Santiago Villa Fernandez / @sdemians

Why JavaScript

Why JavaScript

History & Details

• Multi-paradigm: scripting, object-oriented (prototype-based), imperative, functional.
• Major implementation of ECMAScript.
• Designed by Brendan Eich.
• Appeared in 1995.
• Current version 1.8.5

How to install JavaScript?

It is really easy.

Download and install google chrome :-P

Datatypes

• Object.
• Function.
• Numbers.
• Strings.
• Booleans.
• null: A value that isn't anything.
• undefined: Default value for variables and parameters, etc

Objects

• It can contain data and methods.
• It can inherit (or extend) from other objects.

Object Example

						// bad
							var item = new Object();

							// good
							var item = {
								name : "myName",
								data : {var1 : 1, var2 : 2}
							};
					

Variables

						var example;
						    var pi=3.14;
							var person='John Doe';
							var lastname='Doe', age=30, job='carpenter';
					

Function

• They are first class objects.
• They can be passed, stored and returned just like any value.

Function

						// anonymous function expression
							var anonymous = function() {
							  return true;
							};

							// named function expression
							var named = function named() {
							  return true;
							};

							// immediately-invoked function expression (IIFE)
							(function() {
							  console.log('Welcome to the Internet. Please follow me.');
							})();
					

Array

• They inherits from Object.
• No need to provide length when you are creating it.

Array

Creation

						//Use the literal syntax for array creation

							// bad
							var items = new Array();

							// good
							var items = [];
					

Array

Adding new elements

						var someStack = [];

							// bad
							someStack[someStack.length] = 'abracadabra';

							// good
							someStack.push('abracadabra')
					

Prototyping

• JavaScript functions work as methods, constructors and modules.
• It has Prototypal Inheritance, instead of classical inheritance
• All objects are directly or indirectly linked to Object.prototype

Inheritance and Overriding

• Define two classes A and B.
• B must inhererit from A and B have to redefine to string method.

						/**
 							 * A base class
 							*/
							function A() {
    							this.type = "A type";
							}

							A.prototype.toString = function() {
    							return "Transform";
							}
					

						/**
							 * B class.
							 */
							function B(x, y) {
							    // Parent constructor
							    A.call(this);

							    // Public properties
							    this.x = x;
							    this.y = y;
							}
							B.prototype = Object.create(B.prototype);
						    B.prototype.toString = function() {
    							return A.prototype.toString() + this.type + " B " + this.x + ":" + this.y;
							}
					

Testing Inheritance and overriding

						// Tests
							var b = new B(10, 15);

							console.log(b instanceof A); // true
							console.log(b instanceof B); // true
					

Frameworks

• jQuery.
• underscore.

jQuery

• Fast, small Javascript Library.
• HTML document traversal and manipulation, event handling, animation, and Ajax much simpler.
• It works across a multitude of browsers.

jQuery Example

						<script type="text/javascript">
							function loadXMLDoc() {
							    var xmlhttp;

							    if (window.XMLHttpRequest) {
							        // code for IE7+, Firefox, Chrome, Opera, Safari
							        xmlhttp = new XMLHttpRequest();
							    } else {
							        // code for IE6, IE5
							        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
							    }

							    xmlhttp.onreadystatechange = function() {
							        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
							        }
							    }

							    xmlhttp.open("GET", "ajax_info.txt", true);
							    xmlhttp.send();
							}
							</script>
					

jQuery Example

						$.ajax({
					url: "/api/getWeather",
					data: {
					zipcode: 97201
					},
					success: function( data ) {
					$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
					}
					});
				

underscore

• Utility-belt library for JavaScript.
• Provides a lot of the functional programming support.
• 80+ functions.
• Some examples are forEach, map, reduce, filter, every, some and indexOf

Questions?

THE END