JavaScript Introduction

Speaker Notes

Slide 1:

This is an introduction to the JavaScript programming concepts that can be included in your HTML (hypertext markup language) document.

Slide 2:

With HTML, TAGS are used to format the page. Within the tag you can have ATTRIBUTES that select the size of the font, the alignment, the background color etc.

Slide 3:

Introduction to objects, properties, methods, attributes and arguments.

Slide 4:

This section covers some the basic features you need to be familiar with in using JavaScript.

Note: language of JavaScript with no version means version 1.0. The developer can designate a different version number such as JavaScript1.1 in the language attribute.

Slide 5:

Cautions!

Slide 6:

When developing a variable name you should begin with a letter or an underscore, use only letters, numbers and underscores in the name and use no embedded spaces.

The name must be unique and must not be a reserved word that JavaScript has a predefined meaning for.

NOTE: variables do not have to be given a type in JavaScript. The type is determined by the data stored in the variable. Numeric variables contain numbers, string variables contain letters, numbers and special characters and Boolean variables are used for the Yes/No, True/False condition.

Slide 7:

A lot of the symbols and expressions from C++ and Java are also supported in JavaScript. Check text or Web sources for a more extensive listing.

Slide 8:

This is the logic for the standard if...else statement as implemented in JavaScript.

Slide 9:

If I had no else and simply wanted to write if the hours was less than 7, the code would be:

if (thr < 7>
   {
     document.write("I can still sleep!")
   }

 

NO else would be coded.

Slide 10:

This was tested during the day so the message Time to study! is written to the screen.

Slide 11:

This slide shows a BODY that consists of some HTML followed by the <SCRIPT...> which indicates the start of JavaScript.

Slide 12:

The document.write is writing the information inside the ( ) enclosed in quotes. Basically this can be seen as HTML code which includes the HTML tag <BR>. When this is executed it acts on the text by displaying it and acts on the HTML tag as well.

This emphasizes the integration of HTML and JavaScript.

Slide 13:

Time done in 2 browsers. This one adds 1900 to the year.

Slide 14:

Shows date using 2 browsers.

The calculation to get the date is shown on the slide.

Slide 15:

This code determines whether it is day or night.

Slide 16:

Using the date in 2 browsers!

The calculation to get the date is shown on the slide.

Slide 17:

Coded differently for Explorer 5.0 and Navigator 4.6.

I have ordered Navigator 4.7 and I will try it on that!

Slide 18:

Testing year in two browsers.

Code shown below!

Slide 19:

Quote on how getYear() works from Netscape documentation.

Retrieved April 2000.

Slide 20:

Handling of the month.

Slide 21:

Now that the year is resolved, let's look at the code that determines the message to be shown about whether this is Day, DCE or the campus is closed.

This code is the same in time1.html through time5.html

The logic is shown on the next slide.

Slide 22:

Logic that determines which message to show - from time1.html through time5.html.