• intro to javascript
• implementations
• utilizing existing javascripts

• scripting languages are not application development languages: cannot write programs that are compiled and then executed
• usually designed specifically to interact with the user and certain events
• when an event occurs, the browser executes the related action
• when interpretation is done by the machine where the program is stored, scripts are said to be server-side applications
• when interpretation is done by the browser, scripts are said to be client-side applications
• browsers must have scripting enabled (most do)
  • can be turned off - advantage to server-side scripting
• code is executed asynchronously, i.e., as needed
  • no need for server response - advantage to client-side scripting
• may include additional calls to server or page reloads
• source code is easily visible throught the browser as it is typically embedded in HTML pages or linked to as external files

• object-oriented scripting language.
• used to work with the objects associated with a web page document — the window, the document, the elements such as forms, images, links, etc.
• originally developed by Netscape and called LiveScript
• netscape collaborated with Sun Microsystems on modifications to the language and it was renamed JavaScript
• JavaScript is NOT Java
• JavaScript is Case Sensitive
• common uses:
  • pop up, nested navigations
  • photo galleries
  • adding animated tool tips
  • place/read cookies (remember/retrieve previous states)
  • determine the status of user's browser (vendor, version, plugins, size, position)
  • perform calculations
  • display a message box
  • select list navigation Lecture One Lecture Two Lecture Three Lecture Three
  • edit and pre-validate form information - Pick a number between 1 and 10
  • create a new window with a specified size and screen position
  • image Rollovers (this is frequently accomplished using CSS now)
  • status Messages Saved!
  • display Current Date:
  • perform calculations 1+1=2

The Document Object Model (DOM) is the mechanism through which javascript can manipulate an HTML page and access information about the user's browsing environment.

• the document object model (DOM) is the collection of objects, properties and methods on a page
• the DOM defines every object and element on a web page
• javascript can use the DOM to determine the status of the browser, the HTML page content, and the CSS
• through the DOM, javascript can also make changes, additions, or deletions to the HTML page content and CSS
• its hierarchical structure can be used to access page elements and apply styles to page elements
• a portion of the DOM is shown below:

  

• more on the document object model

• Javascript can be defined in the body or head section, using the script element:

  <script>
//javascript instructions go here...
</script>

• Alternatively, javascript can defined in an external .js file, using the script element with a src attribute:

  <script src="path_to_javascript.js"></script>

• Place the script element in either the head or body
• Multiple script elements can be used in one HTML page
• A particular script element must be used to either embed code or link to external code, but not both.
• If the browser does not support javascript, code located in a noscript element will be displayed instead. Browsers supporting javascript will ignore code in a noscript element. Use this tag to either present a version of the page that does not require javascript or to gently request that your user enable it.

  <noscript>Please enable javascript if you want the full, awesome web experience.</noscript>

• JavaScipt consists of a system of objects, properties and methods
• objects are manipulated when events occur
• an object is a thing or entity:
  • browser window
  • submit button
  • web page document
• Three object categories:
  • Native objects - objects supplied by JavaScript such as String, Number, Array, Image, Date, Math, etc.
  • Host objects - objects supplied to JavaScript by the browser environment, such as window, document, forms, etc.
  • User-defined objects - defined by you, the programmer
• a property is a characteristic or attribute of an object:
  • the background color of a web page document.
    document.bgcolor
  • the date the web page file was last modified.
    document.lastmodified
  • the src file of an image object
    image1.src
• a method is an action (a verb):
  • writing text to a web page document
    document.write()
  • submitting a form
    form1.submit()
• Events are actions that the visitor to the web page can take such as
• clicking (onclick),
• placing the mouse on an element (onmouseover),
• removing the mouse from an element (onmouseout),
• loading the page (onload),
• unloading the page (onunload), etc.
• JavaScript can be configured to perform actions when these and other events occur.
• The JavaScript code is added directly to the XHTML tag with the type of event as an attribute.
• The value of the event attribute will contain one or more JavaScript statements.
• Example:

  <a href="home.htm" onmouseover="alert('Click to go home')">Home</a>

COMP 1850 curriculum does not require students to be able to write thier own javascripts. However, being able to recognize how a script operates, even at a very simple level, can make it much easier to deploy javascripts that have been written by others.

Review these HTML files to see some JavaScript Basics.

See chapter 14 of the course textbook for further information

Download PDF file of textbook exercises.

Working with the DOM and Event Handlers

• practice exercise 14.2 (DOM property), starting p. 580 of text (8th ed.)
• practice exercise 14.3 (Events and Event Handlers), starting p. 582 of text (8th ed.)

Variables and Functions: Intro to programming concepts

• practice exercise 14.5 (Input Prompt), starting p. 586 of text (8th ed.) [ variablewrite2.html file]
• practice exercise 14.6 (Decision Making), starting p. 590 of text (8th ed.)
• practice exercise 14.7 (Functions), starting p. 593 of text (8th ed.) [ quantityif.html file]

Implement javascripts written by other developers. The Lightbox image gallery is a very popular javascript for thumbnail/photo galleries.

• Download and uncompress the Lightbox Photo Gallery source files and demo.
• Consult the online documentation and examine the demo code you downloaded, to see how it works.
• Place the unzipped lightbox source files in a folder somewhere near your HTML page. It is best to NOT alter the directory name/structure provided to you in the lightbox download (including the folders named 'css', 'img' and 'js').
• Look through the downloaded files and locate the following three files: jquery-1.11.0.min.js, lightbox.min.js and lightbox.css.
• Implement a lightbox gallery into one of your own HTML pages:
  1. Download the week10 folder from the Share Out server and use the images and thumbnails in the gallery_images folder to create this gallery or, if you prefer, use your own images.
  2. Use <script src=""> tags to load the following two javascript files: jquery-1.11.0.min.js and lightbox.min.js.
  3. Use the <link> tag to load the lightbox CSS stylesheet: lightbox.css.
  4. Note: be sure to use appropriate relative paths for loading the above .js and css files.
  5. Add one anchor tag for each image in your gallery, eg: <a href="images/image01.jpg">image one</a>.
  6. Replace the clickable text "image one" with an <img /> tag that is srced to the appropriate thumbnail image.
  7. Include, in each anchor tag, the following attribute: data-lightbox="value" using any "value" you like. Any anchor tag with such an attribute will behave like a clickable thumbnail. If more than one anchor tag shares the same data-lightbox="" value, they will operate as a grouped gallery (with forward, back options). Each anchor tag that has a uniquely assigned data-lightbox="" value will operate seperately from any other lightbox links.
• Bonus challenge: Create your own CSS .class for styling a nice border on all thumbnail images.
• Once your lightbox gallery is working, see if you can use your own images instead of the ones provided in the demo. Use a program such as photoshop to prepare appropriate image sizes and formats.

Your instructor will walk you through the creation of two custom JavaScripts:

1. Exercise one: simple dropdown navigation menu
2. Exercise two: image swapping techniques

Explore other JavaScript options:

1. Browse online for sites that freely share javascripts
2. Choose a script that performs a feature you find useful
3. Implement the script in an HTML page of your own
4. Try to customize the script in some way

• since javascript is client-side, it cannot be hidden from the user
• because everyone has access (i.e., "i can see your code, dude"), javascripts are freely shared
• find code banks, libraries etc. of javascripts that you can use in your pages
  • Some introductory tutorials:
    • HTML Dog
    • Mozilla Developer's Network
    • Javascript at W3Schools
  • Resources at Dynamic Drive:
    • Navigation and menu scripts
    • Accordion Menu
  • other cool menus
  • more on rollovers
  • 'show more' example
  • Javscript Kit
  • Code lifter
  • HotScripts
  • ...many, many more online
• after your skills have been honed, consider learning a javascript framework to increase your capabilities with cient side scripting
  • jQuery
  • Dojo
  • Moo Tools
  • ...search online for others

Complete Numbers 3, 4 and 5 in the Hands-On Exercises at the end of Chapter 14 in Web Development & Design Foundations (page 619).

Note: you can create several pages or put the scripts all on one page. Please upload the finished files to your web space and email your instructor with their location.

Exercise due in class in week eleven.