comp 1850 | introduction to web design and development

lecture ten

agenda

  • intro to client-side scripting
  • implementations
  • utilizing existing javascripts

intro to client-side scripting

  • 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

what is javascript?

  • a client side 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 and nested navigation
    • photo gallery
    • carousel (animated scroller)
    • edit and validate form information
    • place/read cookies (remember previous states)
    • create a new window with a specified size and screen position
    • display a message box
    • display current date
    • calculations

implementation

Javascript can embedded in the body or head section, using the script tag:

<script type="text/javascript">
	//javascript instructions go here...
</script>

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

<script type="text/javascript" src="path_to_javascript.js"></script>

You may include as many script tags as needed, but each one must be either embedded or external, you cannot do both in the same script tag.

a simple javascript

<script type="text/javascript">

alert("Welcome to Our Site");

</script>

  1. Create a new HTML document.
  2. Give your page a new title of "Javascript Alert".
  3. Copy the code above into the body of your document.
  4. Save the page and open it in a browser window.

scripting basics

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.

  • your instructor will walk you through the basics...
    • variables: containers that hold data
    • data types: integers, booleans, strings
    • operations: output, calculations, concatenation
    • functions: blocks of reusable code, parameters, returns
    • events: onclick, onmouseover, etc
  • see chapter 14 of the course textbook for further information

document object model (DOM)

  • 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
  • its hierarchical structure can be used to access page elements and apply styles to page elements
  • a portion of the DOM is shown below:

objects, properties, methods & events

  • 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
  • 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 HTML 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>

javascript: the big picture

  • since javascript is client-side, it cannot be hidden from the user
  • everyone has access to it = javascripts are freely shared
  • find code banks, libraries etc of javascripts that you can use in your pages
  • after your skills have been honed, consider learning a javascript framework to increase your capabilities with cient side scripting

exercise 1: lightbox photo gallery

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

exercise 2: scrolling carousel

Implement javascripts written by other developers: The carousel is a common mechanism for displaying more information than would otherwise be visible at one time. A proper carousel provides controls to the user to allow them to go forward, back, etc.

Try the slick carousel, or search online for other carousel scripts.

exercise 3: use more open source javascript

  • Search online for other useful javascripts
  • Consider features you may desire for your COMP1850 final project (eg: nested navigations, photo galleries, etc), and see if there are javascripts available that meet your needs
  • Use one of the many javascript code repositories, such as Dynamic Drive, or some of the others listed below
  • Try to implement your chosen script in one of your own HTML pages
  • Once you have the script functioning correctly, investigate what features can be customized by you
  • If you choose to use one of these scripts in your final project, consider cleaning up your HTML by externalizing some or all of the javascript code into .js file(s).
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |