CNIT 133 Interactive Web Pags

1
CNIT 133 Interactive Web Pags JavaScript and
AJAX

• JavaScript Environment

2
Agenda

• My Web Site http//fog.ccsf.edu/hyip (download
  syllabus, class notes).
• JavaScript Environment.
• Window object.
• DOM.
• Events.
• The ltscriptgt tag.
• JavaScript Psuedo-protocol.

3
The JavaScript Environment

• To understand client-side JavaScript, you must
  understand the programming environment provided
  by a web browser.
• Three important features of that programming
  environment
• The Window object that serves as the global
  object and global execution context for the
  client-side JavaScript code
• The client-side object hierarchy and the Document
  Object Model that forms a part of it
• The event-driven programming model

4
The Window as Global Execution Context

• Window object represents the browser window (or
  frame) that displays the document.
• The Window object is the global object in
  client-side programming
• The window object defines a number of properties
  and methods that allow you to manipulate the web
  browser window.
• It also defines the document property for the
  Document object.
• It has two self-referential properties, window
  and self. You can use either global variable to
  refer directly to the Window object.
• Since the Window object is the global object in
  client-side JavaScript, all global variables are
  defined as properties of the window. The
  following 2 lines of code are the same
• var answer 42 // declare and
  initialize a global variable
• window.answer 42 // create a new
  property of the Window obj

5
The Client-Side Object Hierarchy and the DOM

• The Window object is the key object in
  client-side JavaScript. All other client-side
  objects are accessed via this object. (document
  property location property, etc)
• The Document object (and other client-side
  JavaScript objects) also have properties that
  refer to other objects. (Document object has a
  forms array containing Form objects)
• To refer to one of these forms
• window. document.forms0
• To continue with the example
• window.document.forms0.elements3.options2.t
  ext
• Many of the objects descend from the Document
  object. This subtree of the larger client-side
  object hierarchy is known as the document object
  model (DOM).

6
The Event-Driven Programming Model

• In client-side JavaScript, the web browser
  notifies programs of user input by generating
  events. (e.g. keystroke events, mouse motion
  events, etc)
• When an event occurs, the web browser attempts to
  invoke an appropriate event handler function to
  respond to the event.

7
The Role of JavaScript on the Web

• Web browsers display HTML-structured text styled
  with CSS stylesheets. HTML defines the content,
  and CSS supplies the presentation. Properly used,
  JavaScript adds behavior to the content and its
  presentation.
• The role of JavaScript is to enhance a users
  browsing experience, making it easier to obtain
  or transmit information.

8
Embedding Scripts in HTML

• Client-Side JavaScript code is embedded within
  HTML documents in a number of ways
• Between a pair of ltscriptgt and lt/scriptgt tags
• From an external file specified by the src
  attribute of a ltscriptgt tag
• In an event handler, specified as the value of an
  HTML attribute such as onclick or onmousover
• In a URL that uses the special javascript
  protocol

9
The ltscriptgt Tag

• Client-side JavaScript scripts are part of an
  HTML file and are coded within ltscriptgt and
  lt/scriptgt tags
• ltscriptgt
• // your JavaScript code goes here
• lt/scriptgt
• A simple JavaScript program in an HTML file
• lthtmlgt
• ltheadgtlttitlegtTodays datelt/titlegt
• ltscript language"JavaScript"
  type"text/javascript"gt
• function print_todays_date()
• var d new Date()
• document.write(d.toLocaleString())
• lt/scriptgt
• lt/headgt
• ltbodygt
• The date and time areltbrgt
• ltscript language"JavaScript"
  type"text/javascript"gt
• print_todays_date()
• lt/scriptgt

10
Scripts in External Files

• The ltscriptgt tag supports a src attribute that
  specifies the URL of a file containing JavaScript
  code
• ltscript src"util.js"gt
• lt/scriptgt
• A JavaScript file typically has a .js extension
  and contains pure JavaScript, without ltscriptgt
  tags or any other HTML.

11
Specifying the Scripting Language

• There are two scripting language for the Web.
  JavaScript and Microsofts Visual Basic Scripting
  Edition (supported by Internet Explorer)
• You can specify the default scripting language
  for a file with the HTTP Content-Script-Type
  header, and you can simulate this header with the
  HTML ltmetagt tag.
• ltmeta http-equiv"Content-Type"
  content"text/javascript"gt
• In practice, browsers assume that JavaScript is
  the default scripting language even if your
  server omits the Content-Script-Type header.
• If you wish to override your default, you should
  use the type attribute of the ltscriptgt tag
• ltscript type"text/javascript"gt
• // js code
• lt/scriptgt

12
Specifying the Scripting Language

• JavaScript programs are not really text
  documents, it marks this type as obsolete and
  recommends "application/javascript" instead.
• However, "application/javascript" is not well
  supported, once it has become well supported, the
  most appropriate ltscriptgt and ltmetagt tags will
  be
• ltscript type"application/javascript"gt
  lt/scriptgt
• ltmeta http-equiv"Content-Script-Type"
  content"application/javascript"gt
• When the ltscriptgt tag was first introduced, it
  was not support the type attribute. It was
  defined with the language attribute.
• ltscript language"JavaScript"gt
• // JS code
• lt/scriptgt

13
Specifying the Scripting Language

• The HTML 4 specification standardized the
  ltscriptgt tag, but it deprecated the language
  attribute . Sometimes you will see ltscriptgt tags
  that use the type attribute for standards
  compliance and the language attribute for
  backward compatibility with older browsers
• The language attribute is sometimes used to
  specify the version of JavaScript in which a
  script is written
• ltscript language"JavaScript1.2"gt lt/scriptgt
• ltscript language"JavaScript1.5"gt lt/scriptgt
• Note an old browser that does not support
  JavaScript 1.5 will not attempt to run a script
  that has a language attribute of "JavaScript1.5".

14
The ltnoscriptgt Tag

• HTML defines the ltnoscriptgt element to hold
  content that should be rendered only if
  JavaScript has been disabled in the browser.
• You can use ltnoscriptgt to notify the users that
  JavaScript is required and possibly to provide a
  link to alternative content.
• ltbodygt ... ltscript language"JavaScript"
  type"text/javascript"gt lt!-- document.write("Hel
  lo World!") //--gt lt/scriptgt ltnoscriptgtYour
  browser does not support JavaScript!lt/noscriptgt .
  .. lt/bodygt

15
Hiding Scripts from Old Browsers

• When JavaScript was new, some browsers did not
  recognize the ltscriptgt tag and would render the
  content of this tag as text.
• The workaround is to use HTML comments inside the
  script tag.
• ltscript language"JavaScript" type"text/javascri
  pt"gt
• lt!-- Begin HTML comment that hide the script
• // js statements
• // more js statements
• // end html comments that hide the script --gt
• lt/scriptgt
• Or, more compactly
• ltscriptgt lt!--
• // js statements
• //--gtlt/scriptgt

16
Event Handlers in HTML

• More dynamic programs define event handlers that
  are automatically invoked by the web browser when
  certain events occur.
• Because events in client-side JavaScript
  originate from HTML objects (such as buttons),
  event handlers can be defined as attributes of
  those objects
• ltinput type"checkbox" name"options"
  value"giftwrap" onclick"giftwrap()"gt
• These are the most common event handlers
• onclick
• onmousedown, onmouseup
• onmouseover, onmouseout
• onchange
• onload

17
JavaScript in URLs

• Another way that JavaScript code can be included
  on the client side is in a URL following the
  javascript pseudo protocol specifier.
• This string of JavaScript code is treated as a
  single line of code, which means that statements
  must be separated by semicolons and that / /
  comments must be used in place of // comments
• javascript var now new Date() "lth1gtThe time
  islt/h1gt" now
• The browser executes the JavaScript code
  contained in the URL and uses the value of the
  last JavaScript statement or expression,
  converted to a string, as the contents of the new
  document to display. This string value may
  contain HTML tags and is formatted and displayed
  just like any other document loaded into the
  browser.
• JavaScript URLs may also contain JavaScript
  statements that perform actions but return no
  value
• javascriptalert("Hello World!")

18
JavaScript in URLs (continue)

• To use a JavaScript URL to execute some
  JavaScript code without altering the currently
  displayed document, be sure that the last
  statement in the URL has no return value. Or use
  the void operator to explicitly specify an
  undefined return value
• javascriptwindow.open("aboutblank") void (0)
• You can use a JavaScript URL anywhere you would
  use a regular URL. One handy way to use this
  syntax is to type it directly into the location
  field of your browser, where you can test
  arbitrary JavaScript code without having to open
  your editor and create an HTML file containing
  the code.

19
Execution of JavaScript Programs

• The JavaScript code in ltscriptgt tags is executed
  as part of document loading and parsing process.
• Document loading process
• Load document (execute ltscriptgt)
• Parse document (text output from ltscriptgt will be
  displayed in document)
• Load image, sound, etc
• Execute onload event (browser fires off this
  event)
• JavaScript Event-driven phase and JavaScript URLs
  (mouse motion, mouse click, key press, etc)
• Execute onunload event
• Note when the onload handler is triggered, the
  document is fully loaded and parsed. Therefore,
  onload event handler must not call
  document.write(). It will overwrite the current
  document.