1. CS5220 Advanced Topics in Web Programming JavaScript Basics
Chengyu Sun
California State University, Los Angeles

2. Web Development Server-Side Client-Side C, Perl Java C#, VB JavaScript
PHP
ColdFusion
Ruby
Python
JavaScript …
JavaScript
Applet
JavaFX
Flex/Flash
Silverlight
HTTP
Browser
What do Applet, JavaFX, Flex/Flash
and Silverlight have in common?
Application Server

3. Why Client-Side? Improve user experience Reduce server workload
Interactive
Responsive
Reduce server workload
Handle input events
Implement as much
functionality on the
client-side as possible
Hide the inevitable
communication overhead
from the user

4. About JavaScript Originally developed by Netscape
Standardized as ECMAScript
ECMAScript 5 is fully supported by all modern browsers
Influenced by Java and various scripting languages
Web Server
Client-side
Core
Server-side
Browser

5. Elements of a Programming Language
Comments
Types
Literals and Variables
Operators and expressions
Statements
Functions
Classes and Objects
Packages

6. Elements of JavaScript
Comments
Types
Variables and Literals
Operators and expressions
Statements
Functions
Classes and Objects
Packages

7. Comments
Single-line comment: //
Block comment: /* */

8. Types
Boolean
Number
String
Null
Undefined
Object
Primitive Types

9. Literals Boolean: true, false Number: 123, 4.56
String: “hello”, ‘world’
Null and Undefined: null, undefined
Object literal

10. Valid JavaScript Identifier
Object Literal
Valid JavaScript Identifier
(Variable Name) {
make: “Honda”,
model: “Civic”,
“Year”: 2001,
‘owner’: {
name: “Chengyu” }
String or Number
An object literal consists of zero or more property:value pairs

11. JSON (JavaScript Object Notation)
Used as a data exchange format
Based on a subset of JavaScript syntax
String are double quoted
Property name are strings {
“make”: “Honda”,
“model”: “Civic”,
“year”: 2001,
“owner”: {
“name”: “Chengyu” }

12. Valid JavaScript Identifier
Object Property
Valid JavaScript Identifier
(Variable Name)
String or Number
console.log( obj.make );
console.log( obj[“make”] );
obj[0] = 10;
Properties can be dynamically added
What if there’s a variable make??

13. Array
a = [“x”, “y”, “z”];
a.b = “hello”;
a[100] = 10; {
0:“x”,
1:“y”,
2:“z” }
An array is a special object where array elements are stored as object properties
An array may have “holes” (i.e. undefined elements)
Array has built-in properties like length

14. Variables
var x; // declare a variable x
x = 10; // now x is a number
x = ‘abc’;// now x is a string
y = 20; // y is a global variable
// (a property in the global object)
JavaScript variables are dynamically typed (think of them as references instead of storage spaces)

15. Variable Scope var a = 10; b = 20; function foo() { var c = 0;
for( i=1 ; i < 3 ; ++i )
c += i;
return a + b + c; }
foo(); // ??
console.log(a, b, c, i); // ??

16. Operators All Java operators, e.g. +, -, =, && …
Strict equality/inequality: ===, !==
=== true if same type and same value
Type operators: typeof, instanceof
Object property operators: in, delete

17. Automatic Type Conversion
2 + 4/2
2 + 3/2
“2” + 3/2
3/2 + “2”
3/2 * “2”
3/2 + “two”
3/2 * “two”
0 == false
1 == true
“” == false
null == false
undefined == false
0 == “”
null == undefined
Pros and cons of automatic type conversion??

18. Statements All Java statement, e.g. if, for, while, switch …
Semicolon is optional but highly recommended

19. Example: Object “Deep” Comparison
Write a function deepEqual(obj1, obj2) to compare two objects by value
typeof and in operator
for(property in object) statement
Function and recursion

20. Functions as First-class Citizens
In JavaScript, functions are actually objects
Assigned to a variable
Assigned as a property of an object
Function literals (i.e. functions without names)
Passed as a function argument
Returned as a function result

21. Function Examples function foo() { Regular function alert(“foo”);}
bar = function() {
alert(“bar”);
setTimeout( bar, 5000 );
setTimeout( function() {
alert(“foobar”);},
5000 )
Regular function
declaration
Function literal
Function assignment
Function as parameter
Function literal
as parameter

22. Function Arguments
function add(x,y) {
return x+y; }
add(10,20);
add(“10”,“20”);
add(10);
add(10,20,30);
A special variable arguments hold all the arguments to a function
arguments is not an array but similar to an array, e.g. arguments.length, arguments[0], arguments[1], …

23. Lexical Scope and Closure …
function foo(){
var value=10;
return function(){ return value++; } }
var bar1 = foo();
var bar2 = foo();
bar1(); // ??
bar2(); // ??

24. … Lexical Scoping and Closure
Inner function has access to the local variables of the outer function
Lexical Scoping – the location in the source code where a variable is declared is used to determine where the variable is available
Functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared.

25. Function and Object Constructor Method
A function invoked with the new keyword
When invoked with new, the implicit parameter this is bound to a new object, and the function returns this object (unless there’s an explicit return statement)
Method
An object property that has a function value
this in a method refers to the object the method is called on

26. Example: Constructor function Car( make, model, year ) {
this.make = make;
this.model = model;
this.year = year; }
var car1 = new Car(“Honda”, “Civic”, 2016);
var car2 = new Car(“Ford”, “F-150”, 2017);
car1 instanceof Car; // ??

27. Creating Objects Creating single object
Object literal
new Object() – more verbose than using object literal
Creating objects using constructor
Creating objects from an existing object (i.e. prototype) using Object.create()

28. Example: Object.create()
var car3 = Object.create(car1);
console.log(car3.make);
console.log(car3.model);
console.log(car3);
Difference between car3 and car1?
Prototype inheritance – an object inherits the properties of its prototype

29. Common JavaScript Functions
IO functions, e.g. console.log, alert, confirm, prompt
Array functions, e.g. push, pop, slice, concat, indexOf, forEach
JSON functions JSON.stringify and JSON.parse …

30. Readings Speaking JavaScript by Axel Rauschmayer
Eloquent JavaScript by Marijn Haverbeke -
MDN JavaScript Reference -