Week 4 Lecture 1

1
Week 4 - Lecture 1
COMP233B-08(HAM) Internet Applications

• What is JavaScript?
• Interacting with the browser
• Interacting with HTML documents
• document.getElementById()
• innerHTML

2
What is JavaScript?

• An interpreted (usually) programming language
• Has some similar syntax to Java
• But is totally different Java is really in the
  name for marketing reasons!
• Generally runs inside a web browser
• The JavaScript engine inside FireFox is called
  SpiderMonkey and is written in C
• http//www.mozilla.org/js/spidermonkey/
• Internet Explorer has JScript which is a
  superset of JavaScript
• http//en.wikipedia.org/wiki/JScript
• Although you can run JavaScript anywhere
• e.g. on web servers, Sun Java 1.6 has JavaScript
  built inside Java

3
What is JavaScript? 2

• A standard managed by ECMA
• European Computer Manufacturers Association
• A private group and not as open as W3C
• Also manage CD-ROM file structure, C, C, CLI,
  MS OOXML
• Is similar to ActionScript in Flash/Director
• JS
• provides more interactivity in web pages
• provides the ability to do computation in the
  browser
• is the basis for rich AJAX/DHTML interfaces
• e,g, GMail, http//weboggle.shackworks.com/

4
Programming Language Constructs

• JS is a programming language
• Variables objects
• Arrays, strings, regular expressions, dates,
  Math,
• Loops
• For next, while do, do while
• Conditional statements
• If then else, switch
• Functions
• With parameters
• Object orientation
• Most JS on the web doesnt use this
• http//www.w3schools.com/js/js_examples.asp
• For examples of these constructs

5
How do we include JS in HTML?

• 3 ways
• Just like CSS
• Inline
• in an onclick attribute of an HTML element such
  as a form input or button
• JavaScript URLs (esp. bookmarklets)
• http//www.unix.org.ua/orelly/web/jscript/ch10_04.
  html
• Internal
• Using script element with JS content
• External
• Using script element with a src attribute and no
  content

6
Inline (as an event handler)

• onclick attribute contains a JS statement
• ltbutton type"button"
• onclick"alert('clicked!')"gt
• Click me!lt/buttongt
• Several other types of events, e.g.
• focus, blur (loss of focus)
• onmouseover (cursor movement )
• onload (page load)
• http//www.w3schools.com/js/js_events.asp
• http//www.w3schools.com/jsref/jsref_events.asp

7
Internal

• Internal JS showing interaction with the browser
  and a variable assignment
• ltscript type"text/javascript"gt
• alert("Welcome to this webpage!")
• loopCounter 5
• lt/scriptgt
• Executed when the script element is encountered
• in either head or body
• Uses a MIME type (text/javascript) to signal the
  content
• Despite this being obsolete and wrong it does
  work reliably (!)
• http//annevankesteren.nl/2005/02/javascript-mime-
  type
• http//annevankesteren.nl/2006/05/javascript-mime-
  type

8
External

• From CNNs web site
• ltscript src"http//i.l.cnn.net/cnn/.element/js/2.
  0/scripts/prototype.js" type"text/javascript"gtlt/s
  criptgt
• MIME URL
• This allows for cache-ability ? faster more
  efficient sites
• When multiple pages use the same URL

9
Interacting with the browser

• Alerts, windows, document, statusbar
• Sample file js-examples.html
• Changing the content of pages
• Next week DHTML (or DOM) manipulation
• AJAX
• XmlHttpRequest object
• Client-server communication without page re-loads
• New http requests, often very small and quick
• To update parts of pages

10
noscript

• ltSCRIPT type"text/tcl"gt ...some Tcl script to
  insert data... lt/SCRIPTgt
• ltNOSCRIPTgt ltPgtAccess the ltA href"http//someplace
  .com/data"gtdata.lt/Agt lt/NOSCRIPTgt
• Is JavaScript absolutely necessary? What if
  someone has it turned off?
• The noscript element allows you to specify some
  alternative content
• Such as this sites requires JavaScript to be
  turned on

11
Testing JS requirements of Web content

• Try turning off JavaScript in your browsers
  options
• Browse your usual websites
• What breaks?
• Also
• Try the NoScript Firefox add-on
• https//addons.mozilla.org/en-US/firefox/addon/722
  
• Some people use this as a security measure
• Many Web security bugs are due to JS
• Especially XSS Cross Site Scripting attacks
• http//www.mozilla.org/security/known-vulnerabilit
  ies/firefox20.html

12
document.getElementById()

• Identifying parts of the HTML document
• Same problem as CSS selectors
• CSS has the ID selector
• id1234 text-indent 10px
• JavaScript has the function
• document.getElementById(id1234)
• Once we have identified an HTML element we can
  then use it
• To read from the HTML document
• To change the HTML document

13
document.getElementById() 2

• We can write new content (including new HTML)
  into the document structure
• More DOM methods, next week
• http//www.w3.org/DOM/
• http//java.sun.com/j2se/1.4.2/docs/api/org/w3c/do
  m/Document.htmlgetElementById(java.lang.String)
• To start with we will use a non-standard but
  widely supported concept, innerHTML
• innerHTML represents the content of an element
• Together with the id attribute this allows us to
  target the content of any element in an HTML
  document

14
Using innerHTML

• ltp id"para1"gtThis is the paragraph para1.lt/pgt
• document.getElementById("para1").innerHTML "new
  content"
• ltp id"para1"gtnew contentlt/pgt
• innerHTML.html in the Resources folder on CF

15
.src

• .src shortcut for accessing src attribute of
  images
• document.getElementById('img1').src
  'http//www.waikato.ac.nz/enrol/images/waikato_btn
  _over.jpg'
• There is a formal DOM alternative but the .src
  method is widely supported
• Sample file innerHTML.html

16
JavaScript can do many irritating things

• Popup windows gone mad
• Firefox provides options to limit the power of JS
  in the browser

17
Tips

• Use Error Console/Firebug
• JS errors are generally harder to fix than
  normal programming languages due to lack to
  development support
• Basic JS error messages in IE are poor
• Try some IE add-ons (e.g. IE Developer Toolbar)
• http//www.windowsmarketplace.com/category.aspx?bc
  atid844tabid1
• http//www.w3schools.com/js/default.asp
• http//www.unix.org.ua/orelly/web/jscript/index.ht
  ml
• Online JS book