session eleven
agenda
- 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
client-side vs. server-side scripting
- 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
introduction to javascript
- 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
- edit and pre-validate form information -
- create a new window with a specified size and screen position
- image Rollovers (this is frequently accomplished using CSS now)
- status Messages
- display Current Date:
document object model (DOM)
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
implementing javascript
- 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 thescript
element with asrc
attribute:<script src="myjavascript.js"></script>
- place the
script
element in either thehead
orbody
- 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
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
- 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
- the background color of a web page document.
- a method is an action (a verb):
- writing text to a web page document
document.write()
- submitting a form
form1.submit()
- writing text to a web page document
- 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>
scripting basics
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.
hands-on practice
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
libraries, frameworks & plugins
- 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
example: lightbox photo gallery
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'). - Bonus challenge: Create your own CSS
.class
for styling a 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 GIMP to prepare appropriate image sizes and formats.
research & exploration
Explore other JavaScript options:
- Review the session files and the resources and videos in these notes for ideas
- Browse online for sites that freely share JavaScripts
- Choose a script that performs a feature you find useful
- Implement the script in an HTML page of your own
- Try to customize the script in some way
- 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
readings & resources
- 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:
- 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