kmutnb - internet programming 4/7

Cascade Style Sheet & Java Script & DOM

By: Mr. PHUPHA PUNYAPOTASAKUL

(ภู�ผา ปั�ญญาโพธาสกุ�ล)

04/11/23 Free template from www.brainybetty.com 2

Cascading Style Sheets

• CSS stands for Cascading Style Sheets • Styles define how to display HTML elemen

ts • 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

• Syntaxselector {property: value}

• E.g.body {color: black}

• If value have space or special characterp {font-family: "sans serif"}


CSS Syntax

• Multiple properties (use semi-colon)p

{

text-align: center;

color: black;

font-family: arial

}

• Groupingh1,h2,h3,h4,h5,h6

{

color: green

}

CSS Syntax

• Class selectorp.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 tagp#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

• Syntaxselector: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 examplevar strname = "Hege"

• Variable scope– Local: declared within a function– Global: elsewhere

• Overriding global variable

• Implicit declaration


Arithmetic Operators

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division

% Modulus (division remainder)

++ Increment

-- Decrement


Assignment Operators

Operator Example Is The Same As

= x=y 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=x%y

Comparison Operators

Operator Description

== is equal to

=== is equal to (checks for both value and type)

!= is not equal

> is greater than

< is less than

>= is greater than or equal to

<= is less than or equal to


Flow control

• If then else

• Switch

• For loop

• While loop

• Break/continue statement


Arrays

• Creating an arrayvar mycars=new Array();

var mycars=new Array(3);

var mycars=new Array("Saab","Volvo","BMW");

• Accessing value in arrayalert(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 ObjectObject Description

Window 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

Navigator Contains information about the client's browser

Screen Contains information about the client's display screen

History Contains the visited URLs in the browser window

Location Contains information about the current URL

http://www.w3schools.com/htmldom/dom_obj_window.asp

http://www.w3schools.com/htmldom/dom_obj_navigator.asp

http://www.w3schools.com/htmldom/dom_obj_screen.asp

http://www.w3schools.com/htmldom/dom_obj_history.asp

http://www.w3schools.com/htmldom/dom_obj_location.asp


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 DOMThe DOM (Document Object Model) presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.


DOM Inspector


Access Node

• Get element by IDdocument.getElementById('someID')

• Get element by tag namedocument.getElementsByTagName("p")

• Return value possible to be either object or array of object

• parentNode, firstChild, lastChild and etc.


Question & Answer

kmutnb - internet programming 4/7

Education