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
REST

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
Three main variations: Client-side JavaScript, Node.js, and TypeScript
Year
Version
1997 1
2009
5 (ES5)
2015
6 (ES6 or ES 2015)
2016 7

7. Client-Side JavaScript
JavaScript inside browser
THE language for client-side web development
ES5 and partially ES6
Browser objects like window and document; DOM
jQuery

8. Node.js Standalone JavaScript
Popular for server-side web development and used even for desktop applications
Mostly ES6 (built on Chrome’s V8 JavaScript engine)
Additional language features like a new runtime environment and support for modules
Many libraries

9. TypeScript JavaScript with Type
Makes JavaScript more suitable for large software projects
Static type checking, improved tool support …
ES6 and beyond (compiled to plain JavaScript)
Used in Angular applications
Type and more

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

11. Elements of an Imperative Programming Language
Comments
Types
Literals and Variables
Operators and expressions
Statements
Functions
Classes and Objects
Packages

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

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

14. Types
Boolean
Number
String
Null
Undefined
Object
Primitive Types

15. Literals Boolean: true, false Number: 123, 4.56
String: "hello", 'world'
Null and Undefined: null, undefined
Object literal

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

17. 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" }

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

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

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

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

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

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

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

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

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

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

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

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

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

31. Example: Object.create()
var car3 = Object.create(car1);
console.log(car3.make);
console.log(car3.model);
console.log(car3);
Prototype inheritance – an object inherits the properties of its prototype
Like Object.prototype, Array.prototype …

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

33. Readings The Modern JavaScript Tutorial
Eloquent JavaScript by Marijn Haverbeke
MDN JavaScript Reference