KMUTNB - Internet Programming 4/7


Published on

Lecture for King Mongkut's University of Technology North Bangkok (KMUTNB) / Computer Science / Internet Programming Course by PHUPHA

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

KMUTNB - Internet Programming 4/7

  1. 1. Cascade Style Sheet & Java Script & DOM By: Mr. PHUPHA PUNYAPOTASAKUL ( ภูผา ปัญญาโพธาสกุล )
  2. 2. C ascading S tyle S heets <ul><li>CSS stands for C ascading S tyle S heets </li></ul><ul><li>Styles define how to display HTML elements </li></ul><ul><li>Styles were added to HTML 4.0 to solve a problem </li></ul><ul><li>External Style Sheets can save a lot of work </li></ul><ul><li>Multiple style definitions will cascade into one </li></ul>
  3. 3. Cascading Order <ul><li>Browser default </li></ul><ul><li>External style sheet </li></ul><ul><li>Internal style sheet ( inside the <head> tag ) </li></ul><ul><li>Inline style ( inside an HTML element ) </li></ul>
  4. 4. CSS Syntax <ul><li>Syntax selector {property : value} </li></ul><ul><li>E.g. body {color : black} </li></ul><ul><li>If value have space or special character p {font - family : &quot; sans serif &quot; } </li></ul>
  5. 5. CSS Syntax <ul><li>Multiple properties (use semi-colon) </li></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>text-align: center; </li></ul></ul><ul><ul><li>color: black; </li></ul></ul><ul><ul><li>font-family: arial </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Grouping </li></ul><ul><ul><li>h1,h2,h3,h4,h5,h6 </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>color : green </li></ul></ul><ul><ul><li>} </li></ul></ul>
  6. 6. CSS Syntax <ul><li>Class selector </li></ul><ul><li>p.right {text-align: right} </li></ul><ul><li> {text-align: center} </li></ul><ul><li>… </li></ul><ul><li><p class=&quot;right&quot;> ..</p> </li></ul><ul><li>Applying more than one class </li></ul><ul><li><p class=&quot;center bold&quot;> .. </p> </li></ul><ul><li>Class for any tag </li></ul><ul><li>.right {text-align: right} </li></ul>
  7. 7. CSS Syntax <ul><li>ID Selector </li></ul><ul><li>#green {color : green} </li></ul><ul><li>ID Selector for specific tag </li></ul><ul><li>p#green {color : green} </li></ul><ul><li>Applying style </li></ul><ul><li><p id=“green”> .. </p> </li></ul><ul><li>Tag with specific attribute </li></ul><ul><li>input [ type =&quot; text &quot;] {background - color : blue} </li></ul>
  8. 8. CSS Comment <ul><li>Start with /* and end with */ </li></ul><ul><li>Similar to C or JAVA </li></ul><ul><li>E.g. </li></ul><ul><ul><li>/* This is a comment */ </li></ul></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>text-align: center; </li></ul></ul><ul><ul><li>/* This is another comment */ </li></ul></ul><ul><ul><li>color: black; </li></ul></ul><ul><ul><li>font-family: arial </li></ul></ul><ul><ul><li>} </li></ul></ul>
  9. 9. CSS Pseudo-classes <ul><li>Syntax </li></ul><ul><li>selector:pseudo-class {property: value} </li></ul><ul><li>selector.class:pseudo-class {property: value} </li></ul><ul><li>E.g. </li></ul><ul><li>a : link {color : #FF0000} /* unvisited link */ </li></ul><ul><li>a : visited {color : #00FF00} /* visited link */ </li></ul><ul><li>a : hover {color : #FF00FF} /* mouse over link */ </li></ul><ul><li>a : active {color : #0000FF} /* selected link */ </li></ul><ul><li>a . red : visited {color : #FF0000} </li></ul>
  10. 10. Dreamweaver
  11. 11. CCS Windows
  12. 12. Box model
  13. 13. Java Script <ul><li>JavaScript was designed to add interactivity to HTML pages </li></ul><ul><li>JavaScript is a scripting language </li></ul><ul><li>A scripting language is a lightweight programming language </li></ul><ul><li>A JavaScript consists of lines of executable computer code </li></ul><ul><li>A JavaScript is usually embedded directly into HTML pages </li></ul><ul><li>JavaScript is an interpreted language ( means that scripts execute without preliminary compilation ) </li></ul><ul><li>Everyone can use JavaScript without purchasing a license </li></ul>
  14. 14. Java Script Basic <ul><li>Most of syntax same as JAVA </li></ul><ul><li>Some JAVA feature was cut out e.g. public protected static etc. </li></ul><ul><li>Case sensitive </li></ul><ul><li>Interpreted language not compiled language </li></ul><ul><li>Flexible data type </li></ul>
  15. 15. Variables <ul><li>Syntax example var strname = &quot; Hege &quot; </li></ul><ul><li>Variable scope </li></ul><ul><ul><li>Local: declared within a function </li></ul></ul><ul><ul><li>Global: elsewhere </li></ul></ul><ul><li>Overriding global variable </li></ul><ul><li>Implicit declaration </li></ul>
  16. 16. Arithmetic Operators Decrement -- Increment ++ Modulus (division remainder) % Division / Multiplication * Subtraction - Addition + Description Operator
  17. 17. Assignment Operators x=x%y x%=y %= x=x/y x/=y /= x=x*y x*=y *= x=x-y x-=y -= x=x+y x+=y += x=y x=y = Is The Same As Example Operator
  18. 18. Comparison Operators is less than or equal to <= is greater than or equal to >= is less than < is greater than > is not equal != is equal to (checks for both value and type) === is equal to == Description Operator
  19. 19. Flow control <ul><li>If then else </li></ul><ul><li>Switch </li></ul><ul><li>For loop </li></ul><ul><li>While loop </li></ul><ul><li>Break/continue statement </li></ul>
  20. 20. Arrays <ul><li>Creating an array </li></ul><ul><ul><li>var mycars=new Array() ; </li></ul></ul><ul><ul><li>var mycars=new Array(3) ; </li></ul></ul><ul><ul><li>var mycars=new Array(&quot;Saab&quot;,&quot;Volvo&quot;,&quot;BMW&quot;) ; </li></ul></ul><ul><li>Accessing value in array </li></ul><ul><ul><li>alert( mycars[0] ); </li></ul></ul><ul><li>Dynamic length </li></ul><ul><li>Flexible data type </li></ul>
  21. 21. Basic Function <ul><li>alert(“some text”); </li></ul><ul><li>confirm(“some text”); </li></ul><ul><ul><li>Return true/false </li></ul></ul><ul><li>prompt(“some text”,”default value”); </li></ul><ul><ul><li>Return user’s inputted value </li></ul></ul>
  22. 22. Java Script Object Contains information about the current URL Location Contains the visited URLs in the browser window History Contains information about the client's display screen Screen Contains information about the client's browser Navigator The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag Window Description Object
  23. 23. Events <ul><li>Examples of events : </li></ul><ul><ul><li>A mouse click </li></ul></ul><ul><ul><li>A web page or an image loading </li></ul></ul><ul><ul><li>Mousing over a hot spot on the web page </li></ul></ul><ul><ul><li>Selecting an input box in an HTML form </li></ul></ul><ul><ul><li>Submitting an HTML form </li></ul></ul><ul><ul><li>A keystroke </li></ul></ul>
  24. 24. HTML Event <ul><li>onload and onUnload </li></ul><ul><li>onFocus, onBlur and onChange </li></ul><ul><li>onSubmit </li></ul><ul><li>onMouseOver and onMouseOut </li></ul><ul><li>And etc. </li></ul><ul><li>Invoking Java Script function </li></ul><ul><ul><li><input type =&quot; text &quot; size =&quot; 30 &quot; id =&quot; email &quot; onchange =&quot; checkEmail ()&quot; > </li></ul></ul>
  25. 25. HTML DOM The DOM (Document Object Model) presents an HTML document as a tree - structure ( a node tree ) , with elements, attributes, and text .
  26. 26. DOM Inspector
  27. 27. Access Node <ul><li>Get element by ID </li></ul><ul><ul><li>document.getElementById('someID') </li></ul></ul><ul><li>Get element by tag name </li></ul><ul><ul><li>document.getElementsByTagName(&quot;p&quot;) </li></ul></ul><ul><li>Return value possible to be either object or array of object </li></ul><ul><li>parentNode, firstChild, lastChild and etc. </li></ul>
  28. 28. Question & Answer