Javascript session 01 - Introduction to Javascript

1,646
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,646
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript session 01 - Introduction to Javascript

  1. 1. Introduction to Javascript<br />
  2. 2. History of Javascript<br />First appeared in 1995<br />Main purpose was Input validation<br />Netscape Navigator 3<br />Cmm -> ScriptEase -> Expresso Pages<br />Brendan Eich<br />Mocha -> LiveScript -> Javascript<br />IE 3 & Jscript<br />ECMAScript – 1997<br />
  3. 3. Javascript Implementation<br />The Core (ECMAScript)<br />Document Object Model (DOM)<br />Browser Object Model (BOM)<br />
  4. 4. Implementations of ECMAScript<br />Javascript<br />JScript<br />ActionScript<br />Ejscript<br />JSCript 3.0<br />
  5. 5. DOM<br />API for XML & HTML documents<br />Hierarchy of Nodes<br />
  6. 6. <html><br /> <head><br /> <title>DOM Example</title><br /> </head><br /> <body><br /> <p>Welcome to the DOM</p><br /> </body><br /></html>​<br />HTML Document<br />
  7. 7. HTML<br /> HEAD<br /> TITLE<br /> DOM Example<br /> BODY<br /> P<br /> Welcome to the DOM<br />DOM Hierarchy Representation<br />
  8. 8. DOM<br />Control of Content & Structure<br />Add, remove and modify nodes<br />Standards<br />Levels<br />DOM Level 0<br />DOM Level 1<br />DOM Level 2<br />DOM Level 3<br />
  9. 9. DOM<br />Level 0<br />Netscape Navigator 3 & IE 3<br />Primitive <br />Level 1<br />DOM Core<br />DOM HTML<br />
  10. 10. DOM<br />Level 2<br />Views<br />Events<br />Styles<br />Traversal<br />Range<br />
  11. 11. DOM<br />Level 3<br />DOM Load & Save<br />DOM Validation<br />Xpath<br />XML Base<br />
  12. 12. DOM<br />Other DOMs<br />Scalable Vector Graphics (SVG)<br />Mathematical Markup Language (MathML)<br />Synchronized Multimedia Integration Language (SMIL)<br />
  13. 13. DOM<br />Browser Support<br />Level 0<br />Netscape Navigator 4<br />Internet Explorer 4<br />Opera 1 – 6<br />Level 1<br />Netscape Navigator 6+<br />Internet Explorer 5+<br />Opera 7+<br />Safari<br />
  14. 14. DOM<br />Browser Support Cont..<br />Level 2<br />Internet Explorer 8<br />Safari 2+<br />Chrome<br />Opera 7+<br />Level 3<br />Safari 3+<br />Chrome 2+<br />Firefox 1+<br />Opera 9+<br />
  15. 15. BOM<br />Internet Explorer 3<br />Interact with the Browser<br />No Standards<br />
  16. 16. BOM<br />Opening windows – window.open<br />Move, resize & close windows<br />Navigator object <br />location object<br />screen object<br />Cookie<br />XMLHttpRequest<br />
  17. 17. Browser Engines<br />Trident<br />Gecko<br />WebKit<br />KHTML<br />Presto<br />
  18. 18. Javascript Language<br />ECMAScript 3rd Edition<br />C, Perl Syntax<br />Case Sensitive<br />
  19. 19. Identifiers<br />A-Z, a-z, 0-9, $, _<br />Cannot use Keywords and reserved words<br />Comments<br />//single-line comments<br />/* */ multi-line comments<br />
  20. 20. Statements<br />Ends with ;<br />is optional<br />but recommended<br />var sum = a + b<br />var difference = a – b;<br />
  21. 21. Statements<br />Multiple statements wrap in { }<br />if (true === true) {<br />varmsg = “hello”;<br />alert(msg + “world”);<br />}<br />
  22. 22. break else new var<br />case finally return void<br />catch for switch while<br />continue function this with<br />default if throw<br />delete in try<br />do instanceoftypeof<br />Keywords<br />
  23. 23. abstract enumint short<br />boolean export interface static<br />byte extends long super<br />char final native synchronized<br />class float package throws<br />constgoto private transient<br />debugger implements protected volatile<br />double import public<br />Reserved Words<br />
  24. 24. Variables<br />Loosely typed<br />Can hold any data<br />Can be modified and contain different type of value<br />‘var’<br />scope<br />
  25. 25. function myFunction () {<br />varmyVariables = ‘some string’;<br />}<br />alert(myVariables); //undefined<br />var a = 1, b = ‘hello’, myArray = {};<br />
  26. 26. Datatypes<br />Five primitive datatypes<br />Undefined<br />Null<br />Boolean<br />Number<br />String<br />‘typeof’ operator<br />‘objects’<br />
  27. 27. Undefined<br />var temp;<br />alert(temp); //undefined<br />alert(typeof temp === ‘undefined’) //true<br />
  28. 28. Null<br />Empty object pointer<br />var temp = null;<br />alert(null == undefined) //true<br />alert(null === undefined) //false<br />
  29. 29. Boolean<br />Boolean()<br /> true false<br />String non-empty string empty string<br />Number non-zero 0<br />Object any object<br />Undefined – false<br />Null - false<br />
  30. 30. Number<br />Integers & floating point values<br />varintNum = 100; //integer<br />varoctNum = 070; //Octal for 56<br />varhexNum = 0xA; //Hex for 10<br />var floatNum1 = 1.1; //float<br />var floatNum2 = 1.; //1 integer<br />var floatNum3 = 0.1; //1 integer<br />varlrgFloat = 3.125e7; //31250000<br /> //3.125 * 10^7<br />
  31. 31. Number<br />NaN – not a number<br />isNaN()<br />NaN === NaN<br />isNaN(NaN); //true<br />isNaN(10); //false<br />isNaN(’10’); //false<br />isNaN(‘cool’); //true<br />isNaN(true); //false<br />
  32. 32. Number<br />Number()<br />Number.MIN_VALUE<br />NUMBER.MAX_VALUE<br />Infinity<br />isFinite()<br />
  33. 33. String<br />Object<br />

×