by David Gevorkyan

1
Lecture 2

• by David Gevorkyan

2
Outline

• Cascading Style Sheets
• Document Object Model
• JavaScript

3
CSS
4
What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

5
Cascading Order

• All the styles will "cascade" into a new
  "virtual" style sheet
• Browser default
• External style sheet
• Internal style sheet (inside the ltheadgt tag)
• Inline style (inside an HTML element)

6
External style sheets

• File ex1.html
• lthtmlgt
• ltheadgt  
• ltlink rel"stylesheet" type"text/css"
  href"style1.css"gt   
• lt/headgt  
• ltbodygt
• Some text to Show  
• lt/bodygt
• lt/htmlgt
• File style1.css
• body
• font-family Verdana, Helvetica, Arial,
  sans-serif
• color darkblue
• background-color ffeeff

7
Embedded style sheets

• File ex2.html
• lthtmlgt
• ltheadgt   
• ltstyle TYPE"text/css"gt
• body
• background lightyellow
• color darkblue
• .customClass
• margin-left 8
• margin-right 8
• font-size 20px
• lt/stylegt   
• lt/headgt   
• ltbodygt
• ltdiv class"customClass"gtSome text to
  Showlt/divgt
• lt/bodygt
• lt/htmlgt

8
Inline styles

• lth1 style"color blue"gtHeadlinelt/h1gt
• ltp style"color green font-size 12pt"gt
• While the paragraph is green.
• lt/pgt

9
Cascading 1

• File ex4.html
• lthtmlgt
• ltheadgt
• lttitlegttitlelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  href"style2.css /gt
• ltstyle type"text/css"gt
• h1 color blue
• p color red
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtheadlinelt/h1gt
• ltpgtparagraph.lt/pgt
• lt/bodygt
• lt/htmlgt
• File style2.css
• p font-size 12pt color blue

10
Cascading 2

• File ex5.html
• lthtmlgt
• ltheadgt
• lttitlegttitlelt/titlegt
• ltstyle type"text/css"gt
• h1 color blue
• p color red
• lt/stylegt
• ltlink rel"stylesheet" type"text/css"
  href"style2.css /gt
• lt/headgt
• ltbodygt
• lth1gtheadlinelt/h1gt
• ltpgtparagraph.lt/pgt
• lt/bodygt
• lt/htmlgt
• File style2.css
• p font-size 12pt color blue

11
Cascading 3

• File ex6.html
• lthtmlgt
• ltheadgt
• lttitlegttitlelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  href"style2.css" /gt
• ltstyle type"text/css"gt
• h1 color blue
• p color red
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtheadlinelt/h1gt
• ltp style"color orange"gtparagraph.lt/pgt
• lt/bodygt
• lt/htmlgt
• File style2.css
• p font-size 12pt color blue

12
Selectors, Properties Values

• Syntax selector property value
• body
• font-size 8px
• color navy
• p
• font-family Verdana
• Selectors - body, p
• Properties - font-size, color, font-family
• Values - 8, navy

13
Lengths and Colors

• Measurements
• Relative length units
• em The height of the element's font (2em means 2
  times the size of the current font).
• ex The height of the letter "x (x-height is
  usually about half the font-size).
• px Pixels.
• Percentage.
• Absolute length units
• in Inches (1 inch 2.54 centimeters).
• cm Centimeters.
• mm Millimeters.
• pt Points (1 point 1/72 inches).
• pc Picas (1 pica 12 points).
• Colors
• color_name // red, white, cyanrgb(255,0,0)r
  gb(100,0,0) // An RGB percentage
  valueff0000 // RRGGBBf00 // RGB

14
Attribute class

• Example 1
• .myGreen color green
• .active
• border-top dotted 1px 00f
• border-bottom dotted 1px 00f
• ltspan classmyGreengtThis text is greenlt/spangt
• ltimg srcfairy.jpg classactivegt
• Example 2
• ltpgtltspan id"msg1" class"info"
  lang"en"gtVariable declared twicelt/spangt
• ltpgtltspan id"msg2" class"warning"
  lang"en"gtUndeclared variablelt/spangt
• ltpgtltspan id"msg3" class"error" lang"en"gtBad
  syntax for variable namelt/spangt
• Class Selectors
• span.info color green
• span.warning color yellow

15
Text Styling

• font-family Times New Roman, Arial, Verdana
• font-size ltlengthgt
• font-weight normal, bolder, lighter, 100,
  200, 300, , 900
• font-style italic or normal
• text-transform uppercase, lowercase
• text-decoration overline, line-through,
  underline
• letter-spacing length or normal
• word-spacing length or normal
• line-height length, a percentage or normal.
• text-align left, right, center or justify.

16
Border

• .brd
• bordersolid 2px ffaadd
• .brd1
• border-top dotted 1px 00f
• border-bottom dotted 1px 00f
• padding10
• .brd2
• border-right solid 2px rgb(128,35,77)
• border-bottom solid 2px 00f
• .brd3
• border outset 5px cccccc
• padding-left 10
• lttable border0gt
• lttrgtlttd class"brd"gt Cell 1 lt/tdgtlttd
  class"brd1"gt Cell 2 lt/tdgtlttd class"brd2"gt Cell
  3 lt/tdgtlttd class"brd3"gt Cell 4 lt/tdgtlt/trgt

17
HTML DOM
18
HTML DOM

• The HTML Document Object Model (HTML DOM) defines
  a standard way for accessing and manipulating
  HTML documents.
• The DOM presents an HTML document as a
  tree-structure (a node tree), with elements,
  attributes, and text.

19
HTML DOM Nodes

• According to the DOM, everything in an HTML
• document is a node.
• The DOM says
• The entire document is a document node
• Every HTML tag is an element node
• The text in the HTML elements are text nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes

20
Node Tree
21
DOM example 1
HTML ltbodygt lth1gtPage titlelth1gt ltform
name"formName"gt User name ltinput type"text"
name"userName /gt Password ltinput
type"text" name"password /gt ltbrgt Login
ltinput type"submit" value"Login
/gt lt/formgt lt/bodygt
DOM
22
DOM example 2
HTML lttablegt lttbodygt lttrgt lttdgtshady
grovelt/tdgt lttdgtaeolianlt/tdgt lt/trgt
lttrgt lttdgtover the river,
charlielt/tdgt lttdgtdorianlt/tdgt lt/trgt lt/tb
odygt lt/tablegt
DOM
23
Hierarchical relationship

• In a node tree, the top node is called the root
• Every node, except the root, has exactly one
  parent node
• A node can have any number of children
• A leaf is a node with no children
• Siblings are nodes with the same parent

24
Simple Document
HTML lthtmlgt ltheadgt lttitlegt simple dom demo
lt/titlegt lt/headgt ltbody id"bodynode"gt ltp id
"p1node"gt this is paragraph 1. lt/pgt this is the
document body ltp id "p2node"gt lt/pgt ltp id
"p3node"gtlt/pgt lt/bodygt lt/htmlgt
25
The Table's Diagram
HTML lttable id"tablenode"gtlttrgt lttdgtthis is
row 1, cell1lt/tdgt lttdgtthis is row 1, cell
2lt/tdgtlt/trgtlttrgt lttdgtthis is row 2, cell
1lt/tdgt lttdgtthis is row 2, cell
2lt/tdgtlt/trgtlttrgt lttdgtthis is row 3, cell
1lt/tdgt lttdgtthis is row 3, cell
2lt/tdgtlt/trgtlt/tablegt
26
Embedding in BODY
HTML lthtmlgt ltheadgt lttitlegtThis is a
JavaScript examplelt/titlegt lt/headgt
ltbodygt lth1gt My Page1 lt/h1gt ltscript
language"JavaScript"gt lt!--
document.write(lth2gtHello World!lt/h2gt")
//--gt lt/scriptgt lt/bodygt lt/htmlgt
27
JavaScript
28
Client-side programming

• Recall HTML is good for developing static pages
• Can specify text/image layout, presentation,
  links,
• Web page looks the same each time it is accessed
• In order to develop interactive/reactive pages,
  must integrate programming
• Client-side programming
• programs are written in a separate programming
  language (JavaScript, VBScript, )
• programs are embedded in the HTML of a Web page,
  with tags to identify the program component e.g.,
  ltscript type"text/javascript"gt lt/scriptgt

29
What is JavaScript?

• JavaScript was designed to add interactivity to
  HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming
  language
• 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

30
JavaScript

• Is the first Web scripting language, developed by
  Netscape in 1995.
• Syntactic similarities to Java/C, but simpler
  more flexible (loose typing, dynamic variables,
  simple objects).
• Are Java and JavaScript the Same?
• NO!
• Java and JavaScript are two completely different
  languages in both concept and design!
• Java (developed by Sun Microsystems) is a
  powerful and much more complex programming
  language - in the same category as C and C.

31
What can a JavaScript Do?

• Gives HTML designers a programming tool
• Can put dynamic text into an HTML page
• Can react to events
• Can read and write HTML elements
• Can be used to validate data
• Can be used to detect the visitor's browser
• Can be used to create cookies

32
How to use

• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("Hello World!")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

33
Where to Put the JavaScript

• In the Head section
• You will ensure that the script is loaded before
  anyone uses it
• In the Body section
• In the External JavaScript
• lthtmlgt
• ltheadgt
• ltscript src"xxx.js"gtlt/scriptgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

34
Types, variables and Values

• number 2. boolean (true, false)
• var x 7 var isCorrect true
• var a 1.657 var ok false
• 3. string 4. object
• var y, z "19" document
• var lk "lucky" window
• var obj new Object()
• 5. function
• function initPage()
• alert("Please, type your name", "")
• same as var initPage function()

35
Example

• ltscript type"text/javascript"gt
• var computePower function()
• var numberElement document.getElementById("num
  berElement")
• if (numberElement.value "")
• alert("Please enter a value")
• else
• var value numberElement.value
• var newValue Math.pow(value, 2)
• alert(newValue)
• lt/scriptgt
• Complete code is available
• in the js_ex2.html

36
JavaScript Operators

• Standard C/Java operators control statements
  are
• provided in JavaScript
• Operator Description Example
• Addition x y 2
• - Subtraction x y 2
• Multiplication x y 2
• / Division x y / 2
• Modulus x y 2 (remainder)
• Increment x y
  
• -- Decrement x --y
  

37
JS Assignment Operators

• Operator Example Same As
• 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

38
Comparison and Logical Ops.

• Operator Description
• is equal to
• is exactly equal to (value and type)
• ! is not equal
• gt is greater than
• lt is less than
• gt is greater than or equal to xgt8 is false
• lt is less than or equal to xlt8 is true
• Operator Description Example
• and (x lt 10 y gt 1)
• or (x5 y5)
• ! not !(xy) is true

39
Control Structures if

• if ( ( x lt 10 ) ( -10 lt x ) )
• y ( x x x )
• ystr "The cube of " x " is " y
• else
• y null
• ystr "Cannot compute the cube of " x

40
Control Structures while

• var xsum 0
• while ( x lt 10 )
• xsum x
• x
• var x 0
• do
• x
• . . .
• while(x gt 10)

41
Control Structures for

• var xsum 0
• var x
• for( x 1 x lt 10 x ) // 1 loop while x
  is lt 10
• xsum x // 2 add x to xsum
• for(var i in obj) //foreach struct
• var propName i
• var propValue obji

42
Control Structures switch

• switch ( expression)
• case label
• statements
• break
• case label
• statements
• break
• ...
• default statements

43
JavaScript Math routines

• Math.sqrt
• Math.pow
• Math.abs
• Math.max
• Math.min
• Math.floor
• Math.ceil
• Math.round
• Math.PI
• Math.E
• Math.random - function returns number in 0..1)

The Math object allows you to perform mathematical
tasks. The Math object includes several
mathematical constants and methods.
44
JavaScript Popup Boxes

• Alert Box
• When an alert box pops up, the user will have to
  click "OK" to proceed.
• alert("sometext")
• Confirm Box
• When a confirm box pops up, the user will have to
  click either "OK" or "Cancel
• to proceed.
• confirm("sometext")
• Prompt Box
• When a prompt box pops up, the user will have to
  click either "OK" or "Cancel
• to proceed after entering an input value.
• prompt("sometext","defaultvalue")

45
Array

• 1. var myArray new Array(arrayLength)
• var colors new Array(25)
• 2. var myArray new Array(element0, element1,
  ... , elementN)
• var colors new Array("black, "white,
  "yellow, "blue, red)
• 3. var myArray element0, element1, ...,
  elementN
• var colors "black, "white, "yellow,
  "blue, red
• 4. var myArray new Array()
• myArray0 element0
• myArray1 element1

46
Methods of the array

• concat - The following code concatenates three
  arrays
• var alpha new Array("a", "b", "c")
• var numeric new Array(1, 2, 3)
• var alphaNumeric alpha.concat(numeric) //
  creates array "a","b","c",1,2,3
• join - Joins all elements of an array into a
  string
• var a new Array("Wind","Rain","Fire")
• var myVar1a.join() // assigns "Wind,Rain,Fire"
  to myVar1
• var myVar2a.join(", ") // assigns "Wind, Rain,
  Fire" to myVar1
• var myVar3a.join(" ") // assigns "Wind Rain
  Fire" to myVar1
• length - Property of Array - An unsigned, 32-bit
  integer that specifies the number of elements in
  an array.
• alphaNumeric.length - 6
• a.length - 3

47
Methods of the array (cont.)

• pop - Removes the last element from an array and
  returns that element
• push - Adds one or more elements to the end of
  an array and returns the new length of
• the array
• shift - Removes the first element from an array
  and returns that element. This method
• changes the length of the array
• unshift - Adds one or more elements to the
  beginning of an array and returns the new
• length of the array
• reverse - Transposes the elements of an array
• sort - Sorts the elements of an array
• splice - Changes the content of an array, adding
  new elements while removing old
• elements
• toString - Returns a string representing the
  specified array and its elements

48
String

• var str Hello world!
• charAt Returns the specified character from the
  string.
• Example var symbol str.charAt(6) // symbol
  w
• charCodeAt Returns a number indicating the
  Unicode value of the character at the given index
• str.charCodeAt(index)
• concat Combines the text of two or more strings
  and returns a new string.
• str.concat(s1, s2) // s1 s2
• fromCharCode Returns a string created by using
  the specified sequence of Unicode values.
• Example str String.fromCharCode(72,101,108,10
  8,111,32,119,111,114,108,100,33) // str Hello
  world!
• indexOf Returns the index within the calling
  String object of the first occurrence of the
  specified value
• Example var fromIndex str.indexOf( ) //
  fromIndex 5
• lastIndexOf Last occurrence of the specified
  value, or -1 if not found.
• Example var fromIndex str.lastIndexOf(l) /
  / fromIndex 9

49
Date

• The Date constructor
• new Date()
• new Date( milliseconds)
• new Date( dateString)
• new Date( yr_num, mo_num, day_num , hr_num,
  min_num, sec_num, ms_num)
• Methods
• var myDate new Date()
• day myDate.getDate()
• weekday myDate.getDay()
• yr myDate.getFullYear()
• hours myDate.getHours()
• month myDate.getMonth()

50
Events

• onkeydown What to do when key is pressed
• onkeypress What to do when key is pressed and
  released
• onkeyup What to do when key is released
• onclick What to do on a mouse click
• ondblclick What to do on a mouse double-click
• onmousedown What to do when mouse button is
  pressed
• onmousemove What to do when mouse pointer moves
• onmouseout What to do when mouse pointer moves
  out of an element
• onmouseover What to do when mouse pointer moves
  over an element
• onmouseup What to do when mouse button is
  released
• onload Script to be run when a
  document loads
• onunload Script to be run when a
  document unloads

51
WT Homework 2

• Design and develop Web Calculator for doing
• simple calculations.
• See example

52
References

• CSS Tutorial http//www.w3schools.com/css/defaul
  t.asp
• HTML DOM http//www.w3schools.com/htmldom/defaul
  t.asp
• JavaScript http//www.w3schools.com/js/default.as
  p
• JavaScript Codes http//www.echoecho.com/javascrip
  t.htm