CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? - PowerPoint PPT Presentation

CE419 Session 5: JavaScript Web Programming � 1

What is JavaScript? • JavaScript is a dynamic programming language. • Introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. • It has made modern web applications possible. • Has almost nothing to do with Java . • ECMAScript. � 2

What is JavaScript? • Client-side • Interact with user, control the browser, communicate asynchronously, alter the displayed document. • Server-side • Node.js

Welcome to JavaScript! • JavaScript is case-sensitive. • Each statement is optionally ended with a semicolon . • Syntax is very similar to C and Java.

Values, Types, and Operators • Numbers: 13, 16.59, 1.23e8. • Arithmetic operations: * , / , - , + , % • (18 - 5) % 4 * 2 / 2 console.log(15 / 2); 7.5

Infinity & NaN console.log(Infinity * -2); -Infinity console.log(10 / 0); Infinity console.log(0 / 0); NaN console.log(Infinity - Infinity); NaN

Values, Types, and Operators • Strings "This is a string." 'This is a \'string\', too.' console.log('100' + "250"); 100250 • Booleans: true and false (null, undefined, 0, NaN, '', are false, the rest is true). • Comparisons: > , < , <= , >= , == , != console.log('100' != "250"); true console.log(NaN == NaN); false

Values, Types, and Operators • Logical operators: || , && , ! console.log(!(3 == 4 || 10 >= 2)); false • Conditional operator console.log(5 > 2 ? 'foo' : 'bar'); foo

Values, Types, and Operators • null & undefined • denote the absence of a meaningful value. • The difference in meaning between undefined and null is an accident of JavaScript’s design, and it doesn’t matter most of the time. 1 console.log(console.log('1')); undefined

Automatic Type Conversion • JavaScript goes out of its way to accept almost any program you give it. console.log(8 * null) console.log("5" - 1) console.log("5" + 1) console.log("five" * 2) console.log(false == 0) console.log('1' == 1) console.log(true == [1]) 0 console.log([[]] == 0) 4 51 NaN true true true true

Automatic Type Conversion console.log(null == undefined); console.log(null == 0); true false

JavaScript Equality table https://dorey.github.io/JavaScript-Equality-Table/

Automatic Type Conversion • When you don't want automatic type conversion, use === and !== . console.log(false === 0); console.log('1' === 1); false false • Rule of thumb : Always use 3 equals unless you have a good reason to use 2.

Short-circuiting console.log(null || "user") console.log("Karl" || "user") "user" "Karl"

Playtime! alert('Knock, knock.'); var who = prompt("Who's there?"); var res = confirm("Do you like JS?")

Program Structure • Variables var myAge = 21; var box; console.log(box); undefined • Every time you forget to put var , a kitten dies horribly. • Local vs. Global

Program Structure if (num < 10) { do { alert("Small"); var name = prompt("Who are you?"); } } while (!name); else if (num < 100) { alert("Medium"); var result = 1; } for (var i = 0; i < 10; i = i + 1) else { result = result * 2; alert("Large"); } var number = 0; while (number <= 12) { console.log(number); number = number + 2; }

Program Structure switch (weather) { case "rainy": console.log("bring an umbrella."); break; case "sunny": console.log("Dress lightly."); case "cloudy": console.log("Go outside."); break; default: console.log("Unknown weather"); break; }

Comments // this is a comment /* this is a long comment. years ago I was walking down the street when I saw a programming beating himself with a book. I looked at the cover and I saw that it was a JS book. I asked him why and he said that he is tired of this stupid language… */

Functions var square = function (x) { return x * x; }; console.log(square(12)); 144 • JavaScript is flexible with arguments. • All arguments can be accessed using arguments pseudo-array:

Functions & Scopes var x = "outside"; var f1 = function() { var x = "inside f1"; }; f1(); console.log(x); var f2 = function() { x = "inside f2"; }; f2(); console.log(x); outside inside f2

Nested Scopes var landscape = function() { var result = ""; var flat = function(size) { for (var count = 0; count < size; count++) result += "_"; }; var mountain = function(size) { result += "/"; for (var count = 0; count < size; count++) result += "'"; result += "\\"; }; flat(3); mountain(4); flat(6); mountain(1); flat(1); return result; }; ___/''''\______/'\_

Declaration Notation function square(x) { return x * x; }; console.log(square(12)); console.log("The future says:", future()); function future() { return "We STILL have no flying cars."; }

Closure • A closure is the local variables for a function — kept alive after the function has returned, or • A closure is a stack-frame which is not deallocated when the function returns. function sayHello2(name) { var text = 'Hello ' + name; // Local variable var sayAlert = function() { alert(text); } return sayAlert; } say2 = sayHello2('Bob'); say2();

Closure • A closure is the local variables for a function — kept alive after the function has returned, or • A closure is a stack-frame which is not deallocated when the function returns. function sayHello2(name) { var text = 'Hello ' + name; // Local variable var sayAlert = function() { alert(text); } return sayAlert; } say2 = sayHello2('Bob'); say2();

Closure function say() { var num = 20; var sayAlert = function() { alert(num); } num++; return sayAlert; } var sayNumber = say(); sayNumber(); 21

Showtime! Let's see closure in action! � 27

Arrays var myList = [2, 3, false, "sadjad", 11]; console.log(myList.length); myList[myList.length] = 'newItem'; myList.push('newerItem'); for(var i = 0; i < myList.length; i++) { console.log(myList[i]); } for(var i in myList) { console.log(i); } • A lot of methods are available: concat, indexOf, join, lastIndexOf, pop, push, reverse, sort, shift, slice, etc.

Object-Oriented Programming with JavaScript • JavaScript is object-oriented to its core, with powerful, flexible OOP capabilities. • JavaScript is a prototype-based language which contains no class statement, such as is found in C++ or Java. • Instead, JavaScript uses functions as classes.

The Class & Objects var Person = function () {}; var person1 = new Person(); var person2 = new Person(); var Person = function (firstName) { this.firstName = firstName; console.log('Person instantiated'); }; var person1 = new Person('Alice'); var person2 = new Person('Bob'); console.log('person1 is ' + person1.firstName); console.log('person2 is ' + person2.firstName);

The Class & Objects var Person = function (firstName) { this.firstName = firstName; console.log('Person instantiated'); }; Person.prototype.sayHello = function() { console.log(this.firstName); } var person1 = new Person('Alice'); person1.sayHello(); console.log(Person.prototype); { sayHello: [Function] }

Objects var obj = { firstName: "Sadjad", lastName: "Fouladi", age: 25, email: "sfouladi@gmail.com", sayHello: function() { console.log("Hi, " + this.firstName); } }; obj.sayHello(); console.log(obj.firstName); Hi, Sadjad! console.log(obj['lastName']); Sadjad Fouladi x = Object.create(obj); x.firstName = "Milad";

Showtime! Let's see objects in action! � 33

References • http://eloquentjavascript.net/ • http://htmldog.com/guides/javascript/ • https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Introduction_to_Object-Oriented_JavaScript

Thank you. Any questions? � 35