KMUTNB - Internet Programming 4/7

Cascade Style Sheet & Java Script & DOM By: Mr. PHUPHA PUNYAPOTASAKUL ( ภูผา ปัญญาโพธาสกุล )

C ascading S tyle S heets CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work Multiple style definitions will cascade into one

Cascading Order Browser default External style sheet Internal style sheet ( inside the <head> tag ) Inline style ( inside an HTML element )

CSS Syntax Syntax selector {property : value} E.g. body {color : black} If value have space or special character p {font - family : " sans serif " }

CSS Syntax Multiple properties (use semi-colon) p { text-align: center; color: black; font-family: arial } Grouping h1,h2,h3,h4,h5,h6 { color : green }

CSS Syntax Class selector p.right {text-align: right} p.center {text-align: center} … .. Applying more than one class .. Class for any tag .right {text-align: right}

CSS Syntax ID Selector #green {color : green} ID Selector for specific tag p#green {color : green} Applying style .. Tag with specific attribute input [ type =" text "] {background - color : blue}

CSS Comment Start with /* and end with */ Similar to C or JAVA E.g. /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }

CSS Pseudo-classes Syntax selector:pseudo-class {property: value} selector.class:pseudo-class {property: value} E.g. a : link {color : #FF0000} /* unvisited link */ a : visited {color : #00FF00} /* visited link */ a : hover {color : #FF00FF} /* mouse over link */ a : active {color : #0000FF} /* selected link */ a . red : visited {color : #FF0000}

Java Script JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language ( means that scripts execute without preliminary compilation ) Everyone can use JavaScript without purchasing a license

Java Script Basic Most of syntax same as JAVA Some JAVA feature was cut out e.g. public protected static etc. Case sensitive Interpreted language not compiled language Flexible data type

Variables Syntax example var strname = " Hege " Variable scope Local: declared within a function Global: elsewhere Overriding global variable Implicit declaration

Arithmetic Operators Decrement -- Increment ++ Modulus (division remainder) % Division / Multiplication * Subtraction - Addition + Description Operator

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

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

Flow control If then else Switch For loop While loop Break/continue statement

Arrays Creating an array var mycars=new Array() ; var mycars=new Array(3) ; var mycars=new Array("Saab","Volvo","BMW") ; Accessing value in array alert( mycars[0] ); Dynamic length Flexible data type

Basic Function alert(“some text”); confirm(“some text”); Return true/false prompt(“some text”,”default value”); Return user’s inputted value

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

Events Examples of events : A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke

HTML Event onload and onUnload onFocus, onBlur and onChange onSubmit onMouseOver and onMouseOut And etc. Invoking Java Script function <input type =" text " size =" 30 " id =" email " onchange =" checkEmail ()" >

HTML DOM The DOM (Document Object Model) presents an HTML document as a tree - structure ( a node tree ) , with elements, attributes, and text .

Access Node Get element by ID document.getElementById('someID') Get element by tag name document.getElementsByTagName("p") Return value possible to be either object or array of object parentNode, firstChild, lastChild and etc.

KMUTNB - Internet Programming 4/7

More Related Content

KMUTNB - Internet Programming 4/7