15-437 Javascript

Javascript Thierry Sans

Introduction

Javascript (aka Ecmascript) Scripting language (dynamically and weakly typed) Object-oriented
(prototype based) Functional (ﬁrst-class functions) Reﬂexive (eval method) ๏ It has absolutely nothing to do with Java Java is to Javascript is what a car is to carpet

Example <html> <body> <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This
is a paragraph.</p>"); </script> </body> </html>

The (from-the-past) alternatives to JavaScript Third-party plugins are were used
to palliate to the lacks of Javascript: • Java applets • Flash • Silverlight • and so on

Why Javascript is ahead in the game now? Open and
standard (multi platforms) Come for free on many browsers/platforms Javascript engines are getting “incredibly” faster HTML 5

Elements of Syntax

Comments // This is a comment /* This is another
one */

Debugging console.log(“Houston, there is a problem”);

Variables var name="Thierry"; var age=30;

IF statement if ((age <20 && name=”thierry) || (age >=
20)) { age = age + 1; } else { name = “thierry” + “sans”; } else statement is optional Look at the operator switch as well

While loop while (age<=100) { age = age + 1;
}

For loop var person={fname:"Thierry",  lname:”Sans", age:30}; for (var x in
person) { document.write(person[x] + " "); }

Functions var person={fname:"Thierry",lname:"Sans",age:30}; function getAge(){ return person[age]; }; getAge(); var
getAge = function(){ return person[age]; }; getAge(); or Anonymous functions will be very useful for object methods and callback methods

Prototype-Based Object-Oriented // defining a constructor function Person(name){ this.name =
name; } // adding a method Person.prototype.getName = function(){ return(this.name); }; // creating an object var p = new Person('Mariam'); console.log(p.getName()); console.log(p.constructor.name); console.log(p instanceof Person);

Inheritance // defining a constructor calling a super class function
Employee(name,title){ this.title = title; Person.call(this, name); } // setting up the inheritance Employee.prototype = new Person(); // fixing the constructor Employee.prototype.constructor = Employee; // creating an object var e = new Employee(‘Mariam’,’CEO’); console.log(e.getName()); console.log(e.title); console.log(e.constructor.name); console.log(e instanceof Employee); console.log(e instanceof Person);

Data Structures

Arrays var myArray = new Array(); myArray[0] = "JavaScript"; myArray[1]
= "is"; myArray[2] = "fun"; Or var myArray = new Array (“Javascript”,”is”,”fun”); Or var myArray = [“Javascript”,”is”,”fun”];

Associative Arrays (aka Hashtables or Dictionaries) var myDict = new
Object(); myDict[“First”] = "JavaScript"; myDict[“Second”] = "is"; myDict[“Third”] = "fun"; Or var myDict = {First:,“Javascript”, Second:”is”, Third:”fun”}

Pop-up Boxes

Pop-up Boxes alert(“hello”) dialog box with “ok” button confirm("are you
sure?") dialog box with “ok” and “cancel” buttons prompt("Name?","John") input box with prompt text   and default value

Document Object Model

DOM - Document Object Model

Node accessors The root node    document Accessors    document.getElementById(“id”) 
document.getElementByTagName(“p”);  document.getElementByClassName(“class”);  document.querySelector(“#id .class p”);  document.querySelectorAll(“#id .class p”); 

DOM methods x.innerHTML the content of x x.style css of
x x.parentNode the parent node of x x.children the child nodes of x x.attributes the attributes nodes of x

DOM methods x.appendChild(node) insert a child node to x x.removeChild(node)
remove a child node from x

The Browser

The Browser screen the visitor's screen browser the browser itself
window the current browser window url the current url history URLs visited by the user   (within a browser window)

Events

Good Practices with JavaScript

Good practices Functions in the header or separate ﬁle (better)
Javascript code that should be executed when the web application starts should be called as an “onload” event of the document

Strict Mode

Why using the Strict mode Tell the browser to validate
Javascript against the standard No Browser smart interpretation of wrong code

Don’t // Don't do this "use strict”; function doSomething() {
// this runs in strict mode } function doSomethingElse() { // so does this } Strict mode will be applied to other scripts included in the HTML document

Do (function() { "use strict"; function doSomething() { // this
runs in strict mode } function doSomethingElse() { // so does this } }());

15-437 Javascript

15-437 Javascript

More Decks by ThierrySans

Other Decks in Education

Featured

Transcript