JavaScript - Basics

1
Lecture

• JavaScript - Basics

2
What is JavaScript

• JavaScript is a simple, interpreted,
  programming language with elementary
  object-oriented capabilities
• JavaScript has two distinct but overlapping
  systems
• client-side JavaScript runs on Web browsers
• server-side JavaScript runs on Web servers
• Syntactically JavaScript resembles C, C, Java
• JavaScript was developed by Netscape (formerly
  called LiveScript)

3
JavaScript is Embedded in HTML

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• ltSCRIPT LANGUAGEJavaScriptgt
• //the Javascript here produces content for the
  BODY on loading
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt
• Deferred Script
• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGEJavaScriptgt
• //the Javascript here creates functions for later
  use
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgtlt/BODYgtlt/HTMLgt

4
A Simple Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSimple Javascriptlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtFirst Example of JavaScriptlt/H1gt
• ltSCRIPT LANGUAGEJavaScriptgt
• lt!-- hide from old browsers by embedding in a
  comment
• document.write(Last updated on
  document.lastModified .)
• // end script hiding --gt
• lt/SCRIPTgt
• lt/BODYgt
• lt/HTMLgt

5
Example 1 Browser Output
6
JavaScript has Event Handlers

• ltHTMLgt
• ltHEADgtltTITLEgtHandling Events Examplelt/TITLEgtlt/HEAD
  gt
• ltBODYgt
• ltH1gtHandling Events in JavaScriptlt/H1gt
• ltFORMgt
• ltINPUT TYPEbutton VALUEClick me
• onClickalert(You clicked me) gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

7
Example 3
8
Javascript Console

• In addition to http, ftp etc. javascript can
  also be used in any context where a URL is
  permitted
• Entering javascript in the location field brings
  up an error message window

9
What JavaScript Programs Can Do

• Write programs to perform any computation it is
  equivalent in power to a general purpose
  programming language
• Control Web page appearance and content (this is
  its intended use)
• Control the Web browser, open windows and frames
• Interact with document content
• Retrieve and manipulate all hyperlinks
• Interact with the user
• Read/write client state with cookies

10
JavaScript - The Basics

• JavaScript is case-sensitive
• sum, SUM and Sum are 3 different identifiers
• HTML is NOT case-sensitive
• JavaScript ignores spaces, tabs, newlines
• Semicolon is optional
• but multiple statements on a line require a
  semicolon
• i 1 j 2
• C and C style comments are supported
• //comment to end of line
• / this can be a
• multiple line comment /

11
JavaScript Literals

• Escape sequences are used to embed special
  characters in a string
• \b backspace \t tab
• \f form feed \ single quote
• \n newline \ double quote
• \r carriage return \\ backslash
• Example of escape characters in strings
• msg You\re using an embedded single quote
  here.
• msg This is on the first line \n and this is
  on the second line.
• msg document.title \n document.links.lengt
  h links present

12
JavaScript Variables

• Variables should be declared, but not their type
• var i, sum
• var zero 0 //declaration and initialization
• var myName Ellis
• The type of value a variable can hold during
  execution may change.
• Any variable outside a function is a global
  variable and can be referenced by any statement
  in the document
• Variables declared in a function are local to the
  function
• In a multi-frame or multi-window set up of the
  browser, scripts can access global variables from
  any other document currently loaded

13
JavaScript Data Types

• Type Example Description
• String a string a series of characters inside
• quote marks
• Number 123.45 Any number not inside quote marks
• Boolean true a logical true and false
• Null null completely devoid of any value, not
• a number, not a string, different than 0
• in C/C
• Object all properties and methods belonging to
• the object
• Function a function

14
Array and Objects

• Objects and arrays are really identical
• typeof(array) typeof(object) object
• typeof() returns a string which is the type of
  its argument (number, string, boolean,
  object, function, undefined)
• Object elements are accessed using dot (.)
• An object/array on the left requires a field name
  on the right of dot
• document.lastModified
• frames0.length
• The dot operator can be used with arrays
• arr1 is identical to arr.1
• but if i 1, arr1 is not equivalent to arr.i
  since property names are not evaluated

15
Example Using new

• ltHTMLgtltHEADgtltTITLEgtExample using newlt/titlegt
• ltSCRIPT LANGUAGEJavaScriptgt
• function outputDate()
• var d new Date() //creates todays date and
  time
• document.write(d.toLocaleString())
• // converts a
• //date to a string
• lt/SCRIPTgtlt/HEADgt
• ltBODYgt
• ltH1gtThe date and time arelt/H1gt
• ltSCRIPT LANGUAGEJavaScriptgt
• outputDate()
• lt/SCRIPTgtlt/BODYgtlt/HTMLgt

16
Date Browser Output
17
Using alert(), confirm(), and prompt()

• ltHTMLgtltHEADgtltTITLEgtExample of alert, confirm,
  promptlt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgt
• function alertUser()
• alert("An alert box contains an exclamation
  mark")
• function confirmUser()
• var msg "\n please confirm that you want\n"
• "to test another button?"
• if (confirm(msg))
• document.write("lth2gtYou selected OKlt/h2gt")
• else document.write("lth2gtYou selected
  Cancellt/h2gt")
• function promptUser()
• name1prompt("What is your name?, )
• document.write("lth2gtwelcome to this page "
  name1 "lt/h2gt") lt/SCRIPTgtlt/HEADgt

18
Using alert(), confirm(), and prompt()

• ltBODYgtwelcome to this pageltbrgt
• ltFORMgt
• ltINPUT TYPEbutton VALUE"Click here to test
  alert() onClick"alertUser()"gtltBRgt
• ltINPUT TYPEbutton VALUE"Click here to test
  confirm()" onClick"confirmUser()"gtltBRgt
• ltINPUT TYPEbutton VALUE"Click here to test
  prompt()" onClick"promptUser()"gtlt/FORMgtlt/BODYgtlt/H
  TMLgt

19
Clicking on alert()
20
Clicking on confirm()
21
Clicking on prompt()