• client-side vs. server-side scripting
• intro to javascript
• document object model (DOM)
• implementing javascript
• objects, properties, methods & events
• scripting basics
• hands-on practice
• libraries, frameworks & plugins
• research & exploration
• readings & resources

• scripting languages are programming languages that do not require an explicit compilation step
• usually designed specifically to interact with the user and certain events (behaviour)
• 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 as external resource

• 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
  • scrolling carousels
  • 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:

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
• view a portion of the DOM
• more on the document object model

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

  <script>
alert("Embedded script");
</script>

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

  <script src="myjavascript.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>

• add comments for describing what the script is doing, and for designating the script organization:

  /* multiple line comments are similar to CSS */
//single line comments begin with two forward slashes

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

COMP 1850 curriculum does not require students to be able to write their 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.

Download PDF file of exercises taken from the optional textbook.

Working with the DOM and Event Handlers

• practice exercise 14.2, starting p. 580
• practice exercise 14.3, starting p. 582

Variables and Functions: Intro to programming concepts

• practice exercise 14.5, starting p. 586
• practice exercise 14.6, starting p. 590
• practice exercise 14.7, starting p. 593

Walk & talk: Your instructor will walk you through the creation of a custom JavaScript

• a library or framework provides a pre-written codebase including several functions that can make rapid development of sophisticated JavaScripts much easier, more efficient, and result in more browser-compatible scripts:
  • jQuery - a powerful, multipurpose library
  • React - a JavaScript library for building user interfaces
  • Node.js - designed to build scalable network applications
  • Angular - framework for creating efficient single-page apps
  • Prototype - one of the first libraries, still very good
  • script.aculo.us - a very good 'effects' libraries, uses Prototype Library
  • Mootools - a more recent player with some excellent UI effects
• plugins (library code that has already been written by another developer) are avaialable for the functional needs of many typical web site designs:
  • Lightbox - a popular photo gallery
  • Slick Carousel - a flexible scrolling carousel
  • Simple Parallax the easiest way to get a parallax effect with javascript
  • Creative Bloq recommends some plugins
  • Designmodo suggests more plugins
  • SpeckyBoy provides another list of plugins
• applying plugins to your HTML:
  • follow the plugin's instructions closely
  • if you download a compressed file, uncompress it, keep all files together, and locate them near your HTML
  • ensure all paths for all plugin files are valid (most plugins use one or more .js file and often one or more .css files, images etc.)
  • use the browser inspector console to determine if errors are occuring

The Lightbox image gallery is a very popular JavaScript for thumbnail/photo galleries.

1. Download and uncompress the Lightbox Photo Gallery source files and demo.
2. Consult the online documentation and examine the demo code you downloaded, to see how it works.
3. 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').
4. Bonus challenge: Create your own CSS .class for styling a border on all thumbnail images.
5. 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 GIMP to prepare appropriate image sizes and formats.

Explore other JavaScript options:

1. Review the session files and the resources and videos in these notes for ideas
2. Browse online for sites that freely share JavaScripts
3. Choose a script that performs a feature you find useful
4. Implement the script in an HTML page of your own
5. Try to customize the script in some way
6. Optional: Email your instructor, outlining what you have discovered and whether yuo might include it as part of your scripting requirements for your final project

• Mozilla Developer's Network
• Javascript at W3Schools
• JavaScript Syntax Explained: Is JavaScript Case Sensitive or Not
• JavaScript Examples - w3schools
• 13 Best JavaScript Framework For 2020
• jQuery examples at w3schools
• JavaScript for absolute beginners
• online tools:
  • Online JavaScript editor
  • Grasshopper - learn to code in a fun way!
  • JavaScript Cheat Sheet
  • JavaScript Validator
  • Online JavaScript Editor
• video resources:
  • JavaScript Crash Course For Beginners
  • JavaScript for Beginners
  • How to Include JavaScript in Our HTML
  • jQuery Tutorial for Beginners
  • Vanilla Javascript Projects (goes with site linked below)
  • JavaScript Practice Exercises For Beginners
  • JavaScript Form Validation
• How to create a modal image gallery (lightbox)
• How to create a responsive slideshow with CSS and JavaScript
• Vanilla Javascript Projects (goes with video linked above)
• 100+ JavaScript Projects for Beginners