1. JavaScript
Presented by Team KAF
San Jose State University
Department of Computer Science
CS152 Spring 2014 May 5th

2. 1. Introduction to JavaScript
2. Object Oriented JavaScript
3. Data Types and Data Structures and Control
Statements
4. Functions
5. Reference
Agenda

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

4.  a dynamic computer language
 (initially)Client side of programming language
 First released in 1995
What is JavaScript?

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

8.  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

9.  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

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

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

12. Object Oriented JavaScript

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

14.  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

15. 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 Monty
function 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;
} }//Animal
Public class Cat(name) extends Animal{
super(name);
}//Cat
Cat cat = new Cat(‘Monty’);

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

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

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

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

20. Data types and Data Structures
and Control Statements

21.  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

22.  Dynamically typed
var y
y = 8l
x = 21
var 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

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

24.  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!
}//if
else{//good to go the next!}//else
} //f
Undefined: check pre-condition

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

26. 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 * 5
type of n;
----Inverse Operation------------
var n = 1;
n = “” + n;
type of n;
String type
String * numerical
Number!
Number type
String + number
String

27.  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 type
1 === 1  true
1 !== 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!!!

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

29.  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…..

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

31. 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’;
}

32. Functions

33.  Declare function as below:
function fucntionName() {
//what to do
}
function functionName1(x){
//to do
}
function f(x, y ,z){
//do
}
Function

34.  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…

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

36. Data Representations

37.  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

38. Json Many APIs are available to
read/write/parse Json.

39. Demo Program

40.  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

41.  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

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

43. Question and Answer!