1. CS3220 Web and Internet Programming JavaScript Basics
Chengyu Sun
California State University, Los Angeles

2. The Alphabet Soup of CS3220 HTTP HTML XML CSS SERVLET JSP EL JSTL MVC
SQL
MYSQL
JDBC
JavaScript
jQuery
AJAX …

3. Web Application Browser Application Server Client Server HTTP request
Client-side
program
HTTP response
input
output
Client
Service-side
program
Server

4. 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

5. Client-side Technologies
HTML, CSS
JavaScript
Java Applet
Rich Internet Application (RIA) technologies
JavaFX
Adobe Flex and Flash
Microsoft Silverlight

6. 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

7. Use Browser Console to Run JavaScript
Developer Tools -> Console in Chrome, Firefox, and IE
An interpreted language
Clear console
Reload page
“Hello World” Example
Some functions: console.log, alert, confirm, prompt

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

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

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

11. Types
Boolean
Number
String
Null
Undefined
Object
Primitive Types

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

13. 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

14. 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” }

15. Access Object Property
Valid JavaScript Identifier
(Variable Name)
There are no private
properties in JavaScript
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??

16. 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

17. 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)

18. 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); // ??

19. 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

20. 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??

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

22. 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

23. 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

24. 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], …

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

26. … 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.

27. 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

28. 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; // ??

29. 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()

30. 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

31. 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 …

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