JavaScript Presented by Team KAF San Jose State University

Department of Computer Science CS152 Spring 2014 May 5th

1. Introduction to JavaScript 2. Object Oriented JavaScript 3. Data Types and Data Structures and Control

Statements4. Functions 5. Reference

Agenda

Introduction to Javascript• What is JavaScript• History • Cores • Today’s JavaScript• Features in Programming Paradigm

a dynamic computer language (initially)Client side of programming

language First released in 1995

What is JavaScript?

Ranking

Language of the year

Developed by Brendan Eich in Netscape communications influenced by Shceme, self, Java, C, Python, AWK,

HyperTalk At 1996, Internet Explorer3.0 can run JavaScript As the internet and web became popular, JavaScript

become to play an important rule to enrich their website. At 2005, Microsoft developed AJAX (JS and XML) It becomes more popular language to develop web

applications.

History of JavaScript

ECMAScript: the scripting language standardized by Ecma International to reduce a compatible dialects of the language between Netscape and Microsoft.

Document Object Model (DOM) : provide supports for HTML and XML documents

Browser Object Model (BOM) : a set of objects related to the bowser environment primarily utilized in HTML5

3 cores of JavaScript

Create rich and powerful web applications Write server-side code using .NET or Node.js

As well as code that can run using Rhino(JS engine written in java )

Create Mobile Applications Run on iPhone, Android and other phones using PhoneGap or Titanium

Full-Stack for web application (UI-DB) by One Language Especially MEAN stack

Today’s JavaScript

Features in Paradigm

JavaScript

Script language Prototype Based Objected Oriented Procedural Functional Dynamic Type Checking Weakly Typed On web browsers

Java

Complied language Class Based Objected Oriented Procedural

Static Type Checking Strong Typed On JVM

Cont: Features in Paradigm

JavaScript

Less Reliable Weakly typed, unchecked

parameters Regularity Generality Orthogonal Uniformity Efficiency

Less: type checked at runtime Extensibility

More: libraries and frameworks

Node.js, Angluer.js, Backbone.js.

Jquery , React….etc

Java

More Reliable Strong type, parameters

checked Regularity Generality Orthogonal Uniformity Efficiency

More: type checked by compiler

Extensibility Less: libraries and

frameworks

Object Oriented JavaScript

JavaScript is an object based language Objects can store multiple properties. Example var fruit = “apple”;var fruit = {type: “apple”, color: “red”, brand: “Fuji”}

Objects

JavaScript is a prototype based objected oriented language Which means that inheritance is performed by

prototypes, rather than extending their functionalities in a place

Inheritance Objects inherit from other objects since JavaScript

does not have an idea of “class.” When an object inherits from another object, it

usually adds new methods to the inherited ones. Therefore, extending the old objects.

Objected oriented JavaScript

Example of inheritance JavaScript

function Animal(name){this.name = name;

} Animal.prototype.speak = funciton(){ console.log(“my name is ” + this.name);};var animal = new Animal(‘Monty’); animal.speak(); //My name is Montyfunction Cat(name){ Animal.call(this, name);}Cat.prototype = new Animal();var cat = new Cat(‘Monty’); Cat.speak(); //My name is Monty

java

Public class Animal(){

Public Animal(name){this.name = name;

} }//AnimalPublic class Cat(name) extends Animal{

super(name);}//CatCat cat = new Cat(‘Monty’);

Primary difference between “class based” OO and “prototype based” OO is: Prototype based does not have classes.

Prototypes

Prototypes

JavaScript

function fruit(type, color, brand){

this.type = type;this.color = color; this.brand = brand;

}var apple = new fruit(“apple”, “red”, “Fuji”);

java

public class Fruit(){Fruit(str type, str color, str brand ) {

this.type = type;this.color = color;this.brand = brand; }

}//class Fruit apple = new Fruit(“apple”, “red”, “Fuji”);

Treat “class” in java as a function

in JS.

Encapsulation consists mainly of packing data into objects because there is no classes in JS.

prototyping is a common practice when enforcing encapsulation, as it allows for many object attributes and methods to be localized into a single object.

Encapsulation

The capability to combine several objects into a new, more complex object is a functionality that JS supports.

An example:var fruit = {type: “apple”, color: “red”, brand: “Fuji”}

Aggregation

Data types and Data Structures

and Control Statements

Number String Booleans Array Object Undefined Null

Data Type

TIPS! In JavaScript, undefined and Null are different. Null is an Object meaning it does not exists. While, undefined is value for a valuable without value.

Number object supports

Both double and int in java

Primitive Types

Dynamically typed var y y = 8lx = 21var newStr = “hello”;

Case Sensitive var randFruit = “apple”;var randfruit = “apple”;

Variables

They are two unique

variables

Declaring a variable without “var” notation will

have global scope by default. With “var”

notation, localize the scope of variable.

Which implies, JS supports both

global and local variables

Functions is not checked the number of parameters.

function f(x, y) {// body } can call f(x,y) by all of the following:f();f(1);f(3,true);

Undefined

Programmer’s response to make sure and pay

attention to preconditions of

function!

All do not give you ERROR!

Errors Caught by Compiler (checked)

Errors Caught by Runtime

(unchecked)

Errors Caught by Nothing

(Less Reliable)

All Program Errors

To check the pre-condition, and to reveal errors as quickly as possible. You can use undefined!

function f(x){

if(typeof x == “undefined”){// not set! Missing parameter or something! x = 0; //make it default here!

}//ifelse{//good to go the next!}//else

} //f

Undefined: check pre-condition

Supports major basic arithmetic operators{+,-,/,*}.

Also some syntactic sugars. var a = 123;var b = ++a; Result a = 124, b = 124 var c = 123; var d = c--; Result c =122, d = 123

Operators

Same as Java!

String Conversion

Number like string, js convers to a number automatically.

Can operate arithmetic on the string except addition.

Inverse operation is done by concatenating

var n = “1”; n = n * 5type of n;

----Inverse Operation------------var n = 1;n = “” + n;type of n;

String type

String * numerical

Number!

Number type

String + number

String

Supports comparison symbols that java supports

Also, Operator symbol === to return true if both operands are equal AND the same type

Example 1 === “ 1” false because of type1 === 1 true1 !== 1 false 1 !== ‘1’ true because of type

Comparisons

Equals == Not equals

!=

Less < More >

Less Equals <= More Equals

>=

Point: Equals == And equals

value and type === are not the same!!!

Declaration of array: Use [] surrounding your elements var arr = [1, “2”, 3, “4” ];

Access to the element arr[2] = “three” ;arr = [1, “2”, “three”, “4” ] ;

Add data: address an index where the outside of current boundary.var arr = [1,2,3];arr[4] = “4th” arr = [1,2,3, undefined, “four”]

Arrays

Unlike java, can put any type in one array

Delete Elements: JS has delete operator. var arr = [1,2,3]; delete arr[1];arr = [1, undefined, 3]

Cont: Arrays

But, it does not change its size…..

Control Structures: if-statement

Conventional

var result = (a === 2) ? “a is two”:“a is not two”;

Ordinary

if(a === 2){ result = “a is two”;}else {

result = “a is not two” ;}

JavaScript also supports Switch-statement!

Loops

4 types of loop While loop Do-while

loop For loop For –in loop

For – in Loop var a = [‘a’, ‘b’, ‘c’];var result = ‘\n’;for(var i in a ){ result += “index” + i + “, value” + a[i]+ ‘\n’;

}

Functions

Declare function as below: function fucntionName() {

//what to do} function functionName1(x){

//to do} function f(x, y ,z){

//do}

Function

JavaScript passes values by Reference or by value Primitive types, such as Numbers, String,

Boolean are passed by Value Changes in function not-directly affect to the

original value. Object and Array are passed by Reference

Changes in functions directly affect to the original value.

Pass By…

Function Functional

Programming Paradigm treat a function as the first class object. Can assign function to

variable. Can pass function as

parameters Can return function

function sum(x,y){return a + b;

} var newSum = sum;newSum (1,2); Result: 3---------------------------------------------------------------------

Data Representations

Json: stands for JS Object Notation. a lightweight Data Interchange format.

Interchangeable between two different machine(big endian, little endian, etc)

Data Processing format. use the format to store variables that is used in

programs Data Storage format: can store json into DB directly. Self-contained format (able to adjust changes)

Data explain data itself. JSON is used interchange and process and store.

Example actual products are Mongo DB, Open Data(Whether,,,etc)

Json

Json Many APIs are available to

read/write/parse Json.

Demo Program

JavaScript (of course!) jQuery: jQuery is a fast, small, and featured-rich JS library.

It makes things like HTML doc traversal and manipulation, event handling, animation and Ajax much simpler with an easy to use API that works across a multitude of browsers.

Ajax: stands for asynchronous JS and XML. With Ajax, web applications can send data to and retrieve

from a server asynchronously(in the background) without interfering with the display and behavior of the existing page.

Json

Demo Program Used

Object-Oriented JavaScript - Second Edition By: Stoyan Stefanov; Kumar Chetan Sharma Publisher: Packt Publishing Pub. Date: July 26, 2013

JavaScript Programmer's Reference By: Jonathan Reid; Thomas Valentine Publisher: Apress Pub. Date: June 05, 2013

Reference

Modern JavaScript Develop and Design By: Larry Ullman Publisher: Packt Publishing Pub. Date: Feb 17, 2012

Reference

Question and Answer!

Thank you for listening!!