Introduction to JavaScript

1
Introduction to JavaScript

• JavaScript was developed by Netscape for
  client-side scripting. It was originally called
  LiveScript.
• The Microsoft version of JavaScript is called
  JScript, which can be executed also on a server.
• JavaScript was standardized by European Computer
  Manufactures Association as ECMAScript.
• JavaScript is dynamically typed.
• JavaScript supports classes and supports a
  document object model (DOM).
• The behavior of a script differs slightly among
  Web browsers.

2
Simple Script in JavaScript Addition

• lthtmlgt
• ltheadgt
• ltscript language "JavaScript"gt
• var x window.prompt("Provide first
  number", "")
• var y window.prompt("Provide second
  number", "")
• document.writeln( x " " y " "
• (parseInt(x) parseInt(y)) )
• lt/scriptgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

3
Output
4
Calculation by Event Handler
5
Calculation by Event Handler

• lthtmlgt
• ltheadgt
• ltscript language "JavaScript"gt
• function add()
• alert("add() entered with "
  document.adder.x.value " and "
  document.adder.y.value)
• document.adder.total.value
• parseInt(document.adder.x.value)
• parseInt(document.adder.y.value)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform name"adder"gt
• First Operand ltinput name "x" type "TEXT"
  value 0 size "8 OnChange "add()"gt ltbrgt
• Second Operand ltinput name "y" type TEXT
  value 0 size "8 OnChange "add()"gt ltbrgt
• Total ltinput name "total" type"TEXT"
  value 0 size "8"gt
• lt/formgt
• lt/bodygt

6
getElementByID()

• lthtmlgt
• ltheadgt
• ltscript language "JavaScript"gt
• function add()
• x getElementByID(x_id)
• y getElementByID(y_id)
• total getElementByID(total)
• alert("add() entered with " x.value "
  and " y.value)
• total.value parseInt(x.value)
  parseInt(y.value)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform name"adder"gt
• First Operand ltinput id x_id" type
  "TEXT" value 0
• size "8 onChange "add()"gt
  ltbrgt
• Second Operand ltinput id "y_id" type TEXT
  value 0
• size "8 onChange "add()"gt
  ltbrgt

7
Checking a Value

• ltinput name "x" type "TEXT" value 0
• OnClick check_input(this)"gt
• ltscriptgt
• function check_input(x)
• var x_val x.value
• if ( ! x_val.match(/\d/))
• alert("x is not a number")
• return false
• return true
• lt/scriptgt

8
onSubmit
9
onSubmit
10
onSubmit
11
onSubmit
ltbodygt ltform name"adder"gt X ltinput
type"text" name"x"gtltbrgt Y ltinput
type"text" name"y"gtltbrgt ltinput
type"button" name"Submit value"Submit
onSubmitreturn check_inputs(this.parentNode)'gt
lt/formgt lt/bodygt
12
Checking a Value to be Submitted

• function check_inputs(form)
• inputs form.getElementsByTag(input)
• x inputs0
• y inputs1
• if (check_input(x) check_input(y))
• return true // no error
• else
• alert(Please fix input data)
• return false // error return

13
Document Object Model (DOM)

• An HTML document can be treated as a hierarchy of
  objects.

14
Object window

• Property document refers to the document
  contained in it.
• Property parent refers to the parent window.
• Property opener refers to the window from which
  the current window was opened.
• Property location designates the URL of the page
  being displayed.

15
Accessing Components
ltform name"adder"gt ltinput name x" type
TEXT value 3 size "8"gt ltinput name y"
type TEXT value 3 size "8"gt ltinput name
"total" type"TEXT" value 0 size
"8"gt lt/formgt ltscript language "JavaScript"gt
document.writeln("document.adder.total.name "
document.adder.total.name
"ltBRgt" this.document.adder.t
otal.name "ltBRgt"
top.document.adder.total.name "ltBRgt"
document.forms'adder'.total.name
"ltBRgt" document.forms"adder
".total.name 'ltBRgt'
document.adder.elements2.name
"ltBRgt") lt/scriptgt
16
Accessing Component Objects