Post on 26-Jun-2015
transcript
Introduction to Javascript
History of Javascript
oFirst appeared in 1995
oMain purpose was Input validation
oNetscape Navigator 3
oCmm -> ScriptEase -> Expresso Pages
oBrendan Eich
oMocha -> LiveScript -> Javascript
oIE 3 & Jscript
oECMAScript – 1997
Javascript Implementation
oThe Core (ECMAScript)
oDocument Object Model (DOM)
oBrowser Object Model (BOM)
Implementations of ECMAScript
oJavascript
oJScript
oActionScript
oEjscript
oJSCript 3.0
DOM
oAPI for XML & HTML documents
oHierarchy of Nodes
<html><head>
<title>DOM Example</title></head><body>
<p>Welcome to the DOM</p></body>
</html>
HTML Document
HTMLHEAD
TITLEDOM Example
BODYP
Welcome to the DOM
DOM Hierarchy Representation
DOM
oControl of Content & Structure
oAdd, remove and modify nodes
oStandards
oLevels
oDOM Level 0
oDOM Level 1
oDOM Level 2
oDOM Level 3
DOM
oLevel 0
oNetscape Navigator 3 & IE 3
oPrimitive
oLevel 1
oDOM Core
oDOM HTML
DOM
oLevel 2
oViews
oEvents
oStyles
oTraversal
oRange
DOM
oLevel 3
oDOM Load & Save
oDOM Validation
oXpath
oXML Base
DOM
oOther DOMs
oScalable Vector Graphics (SVG)
oMathematical Markup Language (MathML)
oSynchronized Multimedia Integration Language (SMIL)
DOM
oBrowser Support
oLevel 0
oNetscape Navigator 4
oInternet Explorer 4
oOpera 1 – 6
oLevel 1
oNetscape Navigator 6+
oInternet Explorer 5+
oOpera 7+
oSafari
DOMoBrowser Support Cont..
oLevel 2
oInternet Explorer 8
oSafari 2+
oChrome
oOpera 7+
oLevel 3
oSafari 3+
oChrome 2+
oFirefox 1+
oOpera 9+
BOM
oInternet Explorer 3
oInteract with the Browser
oNo Standards
BOM
oOpening windows – window.open
oMove, resize & close windows
oNavigator object
olocation object
oscreen object
oCookie
oXMLHttpRequest
Browser Engines
oTrident
oGecko
oWebKit
oKHTML
oPresto
Javascript Language
oECMAScript 3rd Edition
oC, Perl Syntax
oCase Sensitive
oIdentifiers
oA-Z, a-z, 0-9, $, _
oCannot use Keywords and reserved words
oComments
o//single-line comments
o/* */ multi-line comments
Statements
oEnds with ;
ois optional
obut recommended
var sum = a + bvar difference = a – b;
Statements
oMultiple statements wrap in { }
if (true === true) {var msg = “hello”;alert(msg + “world”);
}
break else new varcase finally return voidcatch for switch whilecontinue function this
withdefault if throwdelete in trydo instanceof typeof
Keywords
abstract enum intshortboolean export interface
staticbyte extends long superchar final nativesynchronizedclass float packagethrowsconst goto private transientdebugger implements protected
volatiledouble import public
Reserved Words
Variables
oLoosely typed
oCan hold any data
oCan be modified and contain different type of value
o‘var’
oscope
function myFunction () {var myVariables = ‘some string’;
}
alert(myVariables); //undefined
var a = 1, b = ‘hello’, myArray = {};
Datatypes
oFive primitive datatypes
oUndefined
oNull
oBoolean
oNumber
oString
o‘typeof’ operator
o‘objects’
Undefined
var temp;alert(temp); //undefined
alert(typeof temp === ‘undefined’) //true
Null
var temp = null;
alert(null == undefined) //true
alert(null === undefined) //false
oEmpty object pointer
Boolean
true false
String non-empty string empty stringNumber non-zero 0Object any object
Undefined – falseNull - false
oBoolean()
Number
var intNum = 100; //integervar octNum = 070; //Octal for 56var hexNum = 0xA; //Hex for 10var floatNum1 = 1.1; //floatvar floatNum2 = 1.; //1 integervar floatNum3 = 0.1; //1 integervar lrgFloat = 3.125e7; //31250000
//3.125 * 10^7
oIntegers & floating point values
Number
isNaN(NaN); //trueisNaN(10); //falseisNaN(’10’); //falseisNaN(‘cool’); //trueisNaN(true); //false
oNaN – not a number
oisNaN()
oNaN === NaN
NumberoNumber()
oNumber.MIN_VALUE
oNUMBER.MAX_VALUE
oInfinity
oisFinite()
String
Object