Introduction to Javascript

1
Introduction to Javascript

• Jaana Holvikivi
• EVTEK

2
Javascript on HTML pages
HTML
HEAD
STYLEsheet
STYLE
Javascript file
SCRIPT
BODY
lttag Javascriptgt
Javascript
lttag stylegt
3
Javascript on an html page
lthtmlgt ltheadgt lttitlegtJavascript and
DOMlt/titlegt ltscript type"text/javascript"
gt var datenew Date() var hourdate.getHours(
) if (hourgt22 hourlt5) document.write("Y
ou should go to sleep") else document.write(
"Hello, world!") lt/scriptgt lt/headgt ltbodygt lt/body
gt lt/htmlgt
4
External code file
jsdom.js
var datenew Date() var hourdate.getHours() if
(hourgt22 hourlt5) document.write("You should
go to sleep") else document.write("Hello,
world!")
lthtmlgt ltheadgt lttitlegtJavascript and
DOMlt/titlegt ltscript type"text/javascript"
src"jsdom.js"gtlt/scriptgt lt/headgt ltbodygt I love
you! lt/bodygt lt/htmlgt
Hello, world! I love you!
5
Variables and values

• var i0, result 0for (i 0 i lt 10 i)
  result idocument.write(i " " result
  "ltbr/gt") document.write("ltbr/gtltbr/gt")
• var i 0 declares a variable and sets the value
  to 0 (assignment statement)
• statement terminator
• Var a, A
• JavaScript is case sensitive

6
Data types in JavaScript

• Numbers 0.44
• Strings document.write ("ltbr/gtltbr/gt") inside
  single or double quotes
• lta href"http//www.evtek.fi" onMouseOver
  "window.status'Click here to know more about
  EVTEK' return true" onMouseOut"window.status'
  ' "gt
• String literals document.write (\n\t")adds a
  new line and a tab
• Boolean valuestrue, false

7
Events

• ltA HREF"http//www.evtek.fi" onMouseOver
  "window.status'Click here ' return true"
  onMouseOut"window.status' ' "gt
• onClick
• onerror
• onSelect
• onChange
• onMouseOver
• onKeyPress

8
Expression and operators

• Assignment Operators
• xy is the same as xxy
• Comparison Operators
• is equal to
• !is not equal 5!8 returns true
• Logical Operators
• and
• String Operator alert (i " " result
  "ltbr/gt")

9
Conditional statements

• if ( !Math.random ) // here you call a standard
  functiondocument.write('ltpregt -- weather
  called off due to rain --lt/pregt')else if (
  Math.floor((Math.random()2)) 0 )
  document.write ("ltbgtIt's just awful.
  lt/bgt\n")elsedocument.write ("ltemgtHow
  wonderful it is!lt/emgt\n")

10
Loops

• for (i 0 i lt 10 i)
• result idocument.write(i " " result
  "ltbr/gt") document.write("ltpgtlt/pgt")
• Increment ii1 or i

11
Loops

• var x 1var result 0while ( x lt 10 )
  // the loop is repeated until xgt10result x
  x alert ("The result is " result "
  and x is " x )

12
Functions

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function disp_alert()
• alert("I am an alert box!!")
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltformgt
• ltinput type"button" onclick"disp_alert()"
  value"Display alert box"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

13
DOM Document Object Model

• document.form1.text1.value ltform name"form1"gt
  ltinput type"text" name"text1"gt lt/formgt
• parent.location word1 word2 ".html"

14
Javascript as a programming language

• Object-oriented
• Instead of writing procedural programs, write
  class libraries to encapsulate behaviors
• DOM is not a collection of dumb elements but a
  hierarchy of types
• Styles are properties of objects
• Complete OO code with error handling, instance
  methods, static methods and type hierarchies
• Versatile use of functions
• A large number of object-oriented libraries
• Used to create User Interfaces