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}

Dreamweaver

CCS Windows

Box model

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