JavaScript

1
JavaScript

• Language Fundamentals

2
About JavaScript

• JavaScript is not Java, or even related to Java
• The original name for JavaScript was LiveScript
• The name was changed when Java became popular
• Statements in JavaScript resemble statements in
  Java, because both languages borrowed heavily
  from the C language
• JavaScript should be fairly easy for Java
  programmers to learn
• However, JavaScript is a complete, full-featured,
  complex language
• JavaScript is seldom used to write complete
  programs
• Instead, small bits of JavaScript are used to add
  functionality to HTML pages
• JavaScript is often used in conjunction with HTML
  forms
• JavaScript is reasonably platform-independent

3
Using JavaScript in a browser

• JavaScript code is included within ltscriptgt tags
• ltscript type"text/javascript"gt
  document.write("lth1gtHello World!lt/h1gt")
  lt/scriptgt
• Notes
• The type attribute is to allow you to use other
  scripting languages (but JavaScript is the
  default)
• This simple code does the same thing as just
  putting lth1gtHello World!lt/h1gt in the same place
  in the HTML document
• The semicolon at the end of the JavaScript
  statement is optional
• You need semicolons if you put two or more
  statements on the same line
• Its probably a good idea to keep using semicolons

4
Dealing with old browsers

• Some old browsers do not recognize script tags
• These browsers will ignore the script tags but
  will display the included JavaScript
• To get old browsers to ignore the whole thing,
  use ltscript type"text/javascript"gt
  lt!-- document.write("Hello World!")
  //--gt lt/scriptgt
• The lt!-- introduces an HTML comment
• To get JavaScript to ignore the HTML close
  comment, --gt, the // starts a JavaScript comment,
  which extends to the end of the line

5
Where to put JavaScript

• JavaScript can be put in the ltheadgt or in the
  ltbodygt of an HTML document
• JavaScript functions should be defined in the
  ltheadgt
• This ensures that the function is loaded before
  it is needed
• JavaScript in the ltbodygt will be executed as the
  page loads
• JavaScript can be put in a separate .js file
• ltscript src"myJavaScriptFile.js"gtlt/scriptgt
• Put this HTML wherever you would put the actual
  JavaScript code
• An external .js file lets you use the same
  JavaScript on multiple HTML pages
• The external .js file cannot itself contain a
  ltscriptgt tag
• JavaScript can be put in HTML form object, such
  as a button
• This JavaScript will be executed when the form
  object is used

6
Primitive data types

• JavaScript has three primitive types number,
  string, and boolean
• Everything else is an object
• Numbers are always stored as floating-point
  values
• Hexadecimal numbers begin with 0x
• Some platforms treat 0123 as octal, others treat
  it as decimal
• Strings may be enclosed in single quotes or
  double quotes
• Strings can contains \n (newline), \" (double
  quote), etc.
• Booleans are either true or false
• 0, "0", empty strings, undefined, null, and NaN
  are false , other values are true

7
Variables

• Variables are declared with a var statement
• var pi 3.1416, x, y, name "Dr. Pilskalns"
• Variables names must begin with a letter or
  underscore
• Variable names are case-sensitive
• Variables are untyped (they can hold values of
  any type)
• The word var is optional (but its good style to
  use it)
• Variables declared within a function are local to
  that function (accessible only within that
  function)
• Variables declared outside a function are global
  (accessible from anywhere on the page)

8
Parameter Passing

• JavaScript has two methods of parameter passing.
• All of the base types strings, numbers and
  booleans are passed by value
• The object types object, function and array are
  all passed by reference
• Note that parameters are un-typed
• If the type of a parameter is important you can
  test it with typeof operator

9
Operators, I

• Because most JavaScript syntax is borrowed from C
  (and is therefore just like Java), we wont spend
  much time on it
• Arithmetic operators - /
  --
• Comparison operators lt lt !
  gt gt
• Logical operators ! (
  and are short-circuit operators)
• Bitwise operators
  ltlt gtgt gtgtgt
• Assignment operators - /
  ltlt gtgt gtgtgt

10
Operators, II

• String operator
• The conditional operator condition ?
  value_if_true value_if_false
• Special equality tests
• and ! try to convert their operands to the
  same type before performing the test
• and ! consider their operands unequal if
  they are of different types
• Additional operators (to be discussed) new
  typeof void delete

11
Comments

• Comments are as in C or Java
• Between // and the end of the line
• Between / and /
• Javas javadoc comments, / ... /, are treated
  just the same as / ... / comments they have no
  special meaning in JavaScript

12
Statements, I

• Most JavaScript statements are also borrowed from
  C
• Assignment greeting "Hello, " name
• Compound statement statement ...
  statement
• If statements if (condition) statement
  if (condition) statement else statement
• Familiar loop statements while (condition)
  statement do statement while (condition)
  for (initialization condition increment)
  statement

13
Statements, II

• The switch statement switch (expression)
  case label statement
  break case label statement
  break ... default
  statement
• Other familiar statements
• break
• continue
• The empty statement, as in or

14
JavaScript is not Java

• By now you should have realized that you already
  know a great deal of JavaScript
• So far we have talked about things that are the
  same as in Java
• JavaScript has some features that resemble
  features in Java
• JavaScript has Objects and primitive data types
• JavaScript has qualified names for example,
  document.write("Hello World")
• JavaScript has Events and event handlers
• Exception handling in JavaScript is almost the
  same as in Java
• JavaScript has some features unlike anything in
  Java
• Variable names are untyped the type of a
  variable depends on the value it is currently
  holding
• Objects and arrays are defined in quite a
  different way
• JavaScript has with statements and a new kind of
  for statement

15
Exception handling, I

• Exception handling in JavaScript is almost the
  same as in Java
• throw expression creates and throws an exception
• The expression is the value of the exception, and
  can be of any type (often, it's a literal String)
• try statements to try catch (e) //
  Notice no type declaration for e
  exception-handling statements finally
  // optional, as usual code that is always
  executed
• With this form, there is only one catch clause

16
Exception handling, II

• try statements to try catch (e if test1)
  exception-handling for the case that test1
  is true catch (e if test2)
  exception-handling for when test1 is false and
  test2 is true catch (e)
  exception-handling for when both test1and test2
  are false finally // optional, as
  usual code that is always executed
• Typically, the test would be something like
  e "InvalidNameException"

17
Object literals

• You dont declare the types of variables in
  JavaScript
• JavaScript has object literals, written with this
  syntax
• name1 value1 , ... , nameN valueN
• Example (from Netscapes documentation)
• car myCar Ford", 7 "Mazda",
  getCar CarTypes("Honda"), special Sales
• The fields are myCar, getCar, 7 (this is a legal
  field name) , and special
• Ford" and "Mazda" are Strings
• CarTypes is a function call
• Sales is a variable you defined earlier
• Example use document.write("I own a "
  car.myCar)

18
Three ways to create an object

• You can use an object literal
• var course number "CS420", teacher"Dr.
  Pilskalns"
• You can use new to create a blank object, and
  add fields to it later
• var course new Object()course.number
  CS420"course.teacher "Dr. Pilskalns"
• You can write and use a constructor
• function Course(n, t) // best placed in
  ltheadgt this.number n this.teacher
  t
• var course new Course("CS420", "Dr. Pilskalns")

19
Array literals

• You dont declare the types of variables in
  JavaScript
• JavaScript has array literals, written with
  brackets and commas
• Example color "red", "yellow", "green",
  "blue"
• Arrays are zero-based color0 is "red"
• If you put two commas in a row, the array has an
  empty element in that location
• Example color "red", , , "green", "blue"
• color has 5 elements
• However, a single comma at the end is ignored
• Example color "red", , , "green", "blue,
  still has 5 elements

20
Four ways to create an array

• You can use an array literal var colors
  "red", "green", "blue"
• You can use new Array() to create an empty array
• var colors new Array()
• You can add elements to the array
  latercolors0 "red" colors2 "blue"
  colors1"green"
• You can use new Array(n) with a single numeric
  argument to create an array of that size
• var colors new Array(3)
• You can use new Array() with two or more
  arguments to create an array containing those
  values
• var colors new Array("red","green", "blue")

21
The length of an array

• If myArray is an array, its length is given by
  myArray.length
• Array length can be changed by assignment beyond
  the current length
• Example var myArray new Array(5) myArray10
  3
• Arrays are sparse, that is, space is only
  allocated for elements that have been assigned a
  value
• Example myArray50000 3 is perfectly OK
• But indices must be between 0 and 232-1
• As in C and Java, there are no two-dimensional
  arrays but you can have an array of arrays
  myArray53

22
Arrays and objects

• Arrays are objects
• car myCar "Saturn", 7 "Mazda"
• car7 is the same as car.7
• car.myCar is the same as car"myCar"
• If you know the name of a property, you can use
  dot notation car.myCar
• If you dont know the name of a property, but you
  have it in a variable (or can compute it), you
  must use array notation car."my" "Car"

23
Array functions

• If myArray is an array,
• myArray.sort() sorts the array alphabetically
• myArray.sort(function(a, b) return a - b )
  sorts numerically
• myArray.reverse() reverses the array elements
• myArray.push() adds any number of new elements
  to the end of the array, and increases the
  arrays length
• myArray.pop() removes and returns the last
  element of the array, and decrements the arrays
  length
• myArray.toString() returns a string containing
  the values of the array elements, separated by
  commas

24
The forin statement

• You can loop through all the properties of an
  object with for (variable in object) statement
• Example for (var prop in course)
  document.write(prop " "
  courseprop)
• Possible output teacher Dr. Pilskalns
  number CS420
• The properties are accessed in an undefined order
• If you add or delete properties of the object
  within the loop, it is undefined whether the loop
  will visit those properties
• Arrays are objects applied to an array, forin
  will visit the properties 0, 1, 2,
• Notice that course"teacher" is equivalent to
  course.teacher
• You must use brackets if the property name is in
  a variable

25
The with statement

• with (object) statement uses the object as the
  default prefix for variables in the statement
• For example, the following are equivalent
• with (document.myForm) result.value
  compute(myInput.value)
• document.myForm.result.value
  compute(document.myForm.myInput.value)
• One of my books hints at mysterious problems
  resulting from the use of with, and recommends
  against ever using it

26
Functions

• Functions should be defined in the ltheadgt of an
  HTML page, to ensure that they are loaded first
• The syntax for defining a function isfunction
  name(arg1, , argN) statements
• The function may contain return value statements
• Any variables declared within the function are
  local to it
• The syntax for calling a function is just
  name(arg1, , argN)
• Simple parameters are passed by value, objects
  are passed by reference

27
Regular expressions

• A regular expression can be written in either of
  two ways
• Within slashes, such as re /abc/
• With a constructor, such as re new
  RegExp("abc")
• Regular expressions are almost the same as in
  Perl or Java (only a few unusual features are
  missing)
• string.match(regexp) searches string for an
  occurrence of regexp
• It returns null if nothing is found
• If regexp has the g (global search) flag set,
  match returns an array of matched substrings
• If g is not set, match returns an array whose 0th
  element is the matched text, extra elements are
  the parenthesized subexpressions, and the index
  property is the start position of the matched
  substring

28
Events

• JavaScript applications are often highly
  event-driven
• Events are actions that occur
• Usually as a result of something the user does
• A button click is an event it gives focus to a
  form element
• There is a specific set of events that browsers
  recognize
• In JavaScript programmers can write event
  handlers - scripts that are automatically
  executed when an event occurs.

29
Standard Events

• load onLoad The browser finishes loading a window
  or all of the frames within a frameset tag.
• mousedown onMouseDown The user depresses a mouse
  button.
• mousemove onMouseMove The user moves the cursor.
• mouseout onMouseOut The cursor leaves an area
  (client-side image map) or link from inside that
  area or link.
• mouseover onMouseOver The cursor moves over an
  object or area from outside that object or area.
• mouseup onMouseUp The user releases a mouse
  button.
• move onMove The user or script moves a window or
  frame.
• reset onReset The user resets a form (clicks a
  Reset button).
• resize onResize The user or script resizes a
  window or frame.
• select onSelect The user selects some of the text
  within a text or textarea field.
• submit onSubmit The user submits a form.
• unload onUnload The user exits a document.

30
Warnings

• JavaScript will take some time learn language
• Weve only scratched the surface
• Its easy to get started in JavaScript, but if
  you need to use it heavily, plan to invest time
  in learning it well
• Write and test your programs a little bit at a
  time
• JavaScript is not totally platform independent
• Expect different browsers to behave differently
• Write and test your programs a little bit at a
  time
• Browsers arent designed to report errors
• Dont expect to get any helpful error messages
• Write and test your programs a little bit at a
  time

31
What is AJaX? A name given to an existing
approachto building dynamic web applications
Web pages use JavaScript to make asynchronous
calls to web-based services that typically return
XML allows user to continue interacting with
web pagewhile waiting for data to be returned
page can be updated without refreshing browser
results in a better user experience there are
AJaX libraries that reduce the amountof
JavaScript code that must be written Uses a
JavaScript class called XMLHttpRequest
32
A Good Acronym?

• A is for asynchronous
• requests can be made asynchronously or
  synchronously
• both techniques allow web page to be updated
  without refreshing it
• anything useful the user can do while
  processing request?
• if yes then use asynchronous, otherwise use
  synchronous
• J is for JavaScript
• typically JavaScript is used on the client-side
  (in the browser)
• only programming language supported
  out-of-the-box by most web browsers
• can use any language on server-side that can
• accept HTTP requests and return HTTP responses
• Java servlets, Ruby servlets, CGI scripts,
• X is for XML
• request and response messages can contain XML
• can easily invoke REST-style services
• can really contain any text (single text value,
  delimited text, )

33
XMLHttpRequest

• A JavaScript class supported by most web
  browsers
• Allows HTTP requests to be sent from JavaScript
  code
• to send multiple, concurrent requests,
• use a different XMLHttpRequest instance for each
• HTTP responses are processed by handler
  functions
• in client-side JavaScript
• Issue
• code to create an XMLHttpRequest object differs
  between browsers
• can use a JavaScript library such as Sarissa
  (more detail later)
• to hide the differences

34
XMLHttpRequest Properties

• (partial list)
• readyState
• 0 UNINITIALIZED open not yet called
• 1 LOADING send for request not yet called
• 2 LOADED send called, headers and status are
  available
• 3 INTERACTIVE downloading response,
• responseText only partially set
• 4 COMPLETED finished downloading response
• responseText
• response as text null if error occurs or ready
  state lt 3
• responseXML
• response as DOM Document object null if error
  occurs or ready state lt 3
• status integer status code
• statusText string status

35
XMLHttpRequest Methods

• (partial list)
• Basic methods
• open(method, url, async) initializes a new
  HTTP request
• method can be "GET", "POST", "PUT" or "DELETE"
• url must be an HTTP URL (start with "http//")
• async is a boolean indicating whether request
  should be sent asynchronously
• defaults to true
• send(body) sends HTTP request
• abort() called after send() to cancel request
• Header methods
• void setRequestHeader(name, value)
• String getResponseHeader(name)
• String getAllResponseHeaders()
• returns a string where
• header value pairs
• are delimited by carriage returns

36
Lets see some coding

• var reqfunction retrieveURL(url)
•     if (window.XMLHttpRequest) // Non-IE browsers
•       req new XMLHttpRequest()
•    
• else if (window.ActiveXObject) // IE
•       req new ActiveXObject("Microsoft.XMLHTTP"
  )
•    
•      req.open("GET", url, true)
•      req.onreadystatechange processStateChange
•      req.send(null)
•  

37
Lets see some coding

• function processStateChange()
•     if (req.readyState 4) // Complete
•  
•      if (req.status 200) // OK response
•  
•        document.getElementById(MyContent").innerH
  TML
• req.responseText
•      
•    
•  
•  

38
Coding PHP server.php

• lt?php
• //Display Message
• echo This is Ajax with PHP
• ?gt

39
Coding Javascript client.htm

• lthtmlgt
• ltscript languagejavascriptgt
• function createRequestObject()
• var httpObj
• var browsernavigator.appName
• if(browser"Microsoft Internet Explorer")
• httpObj ActiveXObject("Microsoft.XMLHTTP")
• else
• httpObj new XMLHttpRequest()
• return http
• var http createRequestObject() - Continued

40
Coding Javascript client.htm

• var requestObjectcreateRequestObject()
• function sendRequest(page)
• requestObject.open('get',page)
• requestObject.onreadystatechangedisplayContent
  
• requestObject.send(null)
• - Continued

41
Coding Javascript client.htm

• function displayContent()
• if(requestObject.readyState4)
• var datarequestObject.responseText
• document.getElementById('contact').innerHTMLdata
  "ltbrgt"
• lt/scriptgt
• ltbodygt
• lta href"javascriptsendRequest('server.php')"gtCli
  ck here to View the pagelt/agtltbrgt
• ltdiv idcontact"gt lt/divgt
• lt/bodygtlt/htmlgt