Monitor

Lesson 16: Functions and Windows in JavaScript

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

In this first video, we build a complex event handler and then we describe how to extract this into a pair of functions (and how to invoke the functions). Then we extract these functions into a separate file and use the <script> element to point to that file. Finally, we introduce the <noscript> element in order to provide functionality if the user has disabled scripts.

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

 


Lesson 16: JavaScript Functions +
part 1: JavaScript Functions

Click here for the video transcript

 

Hands on exercise

This exercise is primarily focused on creating and using a function. We'll have an <h1> element that contains any one of three different text contents, changeable by a click on the element.

First, create a new page, scripts3.html, based on scripts2.html. That is, modify scritps2.html as described below and then save it as scripts3.html.

In your <script> element:
*   declare a variable 'a', initialized to 0
*   declare a variable 'text', initialized to ""
*   declare an array, 'remarks()', and initialize three entries:
      "Best courses ever!"
      "The SuperBowl of training"
      "The best investment I ever made!"

*   define a function called 'comments()', as follows:
      Check if 'a' is less than 2, and if so:
         + add 1 to 'a'
              otherwise
         + set 'a' to 0
      then change the content of the <h1>
        element with an id of 'brag' (see below)
        to be the content of 'text'

In the <body> element, add an <h1> element with:
*   An id of 'brag'
*   An onclick event that invokes the comments() function

Click the text of the <h1> element to test your function works.

After you have your function working, add a link to scripts3.html from your index.html page.

 

 

The video below demonstrates how to create a pop-up window in response to a user request, using the window methods of document.open() and document.write().

 


Lesson 16: JavaScript Functions +
part 2: Windows and Documents

Click here for the video transcript

 

 

Hands on exercise

This exercise is focused on generating a pop-up window containing a list of people attending an event, applying lessons learned from this and earlier videos.

Start a new web page, Events.html, using "html_skel" for a starter.

In the <head> element:

In the <body> element:

After you have your code working, add a link to Events.html from your index.html page.

 

 

 

The video below demonstrates how to create functions that accept parameters (arguments) and how to invoke them passing parameters.

 


Lesson 16: JavaScript Functions +
part 3: Functions with Parameters

Click here for the video transcript

 

 

Hands on exercise

This exercise demonstrates the use of 'writeln' and how to code and use a function with arguments.

Bring Events.html into your browser


Start a new html file, FunctionDemo.html (remember 'html_skel')

After you have your code working, add a link to FunctionDemo.html from your index.html page.

 

 

Supplemental materials

    A cumulative summary of the contents of the course so far: Click here

    DSCIDemo html file from third video lecture (download and rename to DSCIDemo.html)
    popUpStyle stylesheet from third video lecture (download and rename to popUpStyle.css)

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.