Separate speaker notes to accompany the presentation on JavaScript introduction:


Slide #1:

This is a brief introduction to a different style of programming.  JavaScript is similar to C++ and Java in some areas.

Slide #2:

A tag in HTML is incased in the < and > symbols.  These tag symbols are used to tell the browser what to do.  Within HTML you can use JavaScript, but you must tell the browser that you are using a scripting language, specifically JavaScript within the HTML.

Slide #3:

Vocabulary in JavaScript contains words used in object oriented programming.  Words like object, property and method are important to understand.

Slide #4:

JavaScript is very particular.  It is case sensitive so an a is not an A and it relies on things like semi-colons and curly brackets to make the syntax work.

Slide #5:

I have now written a simple program in JavaScript and saved it as hello.html. I am writing the code using Notepad.  Note that I first write the tag<html> to tell the browser that I am using HTML.  Then I write the script tag which specifies that the language being used within the script which is embedded in the HTML is JavaScript.  Now I can write the JavaScript.

In this example I am using the document.write which means write to the document (the document being the available area on the screen).  I am writing what is enclosed in () and since what I am writing is a literal, I put in in quotes.  Actually what happens here is that the message in quotes is handled as if it was written in HTML.

The alert() puts up a box.  The message in the box is the message I enclose in the Parenthesis.  Again, it is a literal so I enclose it in quotes.

The next slides will show the output.

When I am ready to save my code, I save it with an html extension.  Note that I am writing my code in notepad.

Slide #6:

To open the file that I saved as hello.html, I first go to the browser and select file open.  In explorer I will see the box shown.  I select browse and then find my file and select it.  Then I click open.  I will see the results in the browser window.

When I am working with html, I keep both the browser (or usually a couple of browsers open) and I keep notepad open so I can switch back and forth between my code in notepad and the results in the browser window.

Slide #7:

This shows the output when hello.html is opened in the explorer browser.

The JavaScript command document.write( ) puts information on the screen (otherwise known as the document).  The message I want to put out is enclosed in quotes within the parenthesis.

The JavaScript command alert( ) puts up an alert box containing the message that I coded in the parenthesis. When you click on the OK, the alert box goes away.

If you know HTML, you can make the Hello Write that appears on the screen a different size and a different color etc.

Slide #8:

I have now written the code on this slide and saved it as multiply.html.

In the calculation: ans = firstnum * secondnum, the = is an assignment sign.  It is assigning the answer to the calculation to the variable ans.  The reason that this is called an assignment sign is that code like the following is legitimate: ans = ans + 1.  In fact we know that ans can never be equal to ans + 1, but we can take ans and add 1 to it and put it back into ans.  That is called assigning.

Slide #9:

This shows entering the number 5 as firstnum and then the number 7 as secondnum.  Finally the results of the multiply calculation is shown on the screen using document.write(ans);

Slide #10:

The change is putting in a literal to identify the answer.  In this case, the document.write contains both a literal and a variable.  They are separated with a comma.

Slide #11:

This shows the results of using a literal to identify the answer. The code is named multiplyans.html.

Slide #12:

I have defined a variable called whattodo and put out a prompt to take in a * or a /.  Note that after the comma in the prompt I have "" since the data is not numeric.  I then test whattodo using a ==.  This is the way I test for something equal in JavaScript.  Essentially there is a differentiation between the = which means assign to and the = = which means compare for equality.

Slide #13:

In this slide, I am executing mathans.html.  I have entered 15 and then 3 and then *.  The result of multiplying 15 by 3 is shown as 45.

Slide #14:

This time I again entered 15 and 3, but I entered the / to divide.  The results of dividing 15 by 3 is shown as 5.

Slide #15:

The <BR> is html for break or skip a line.  If I enclose the html tag inside my parenthesis and the quotation marks, it says to treat the data as html, which means it displays the literal and then skips a line.

Slide #16:

This shows another example of an if statement.  In this example I am testing the application name to see if it is Netscape.  To do this I test navigator.appName.  Note that I use the two equal signs together since I am testing a condition for equality.  The structure of the if calls for the commands to be executed if the condition is true to be enclosed in curly brackets and the commands to be executed if the condition is false to be enclosed in curly brackets.  Each command within the curly brackets ends in a semi-colon.

Slide #17:

When the navigator.appName is not Netscape, then the else is taken. Again remember that each command ends with a semi-colon and all of the commands for the else are enclosed in curly brackets.  One other comment the literal followed by <BR> is all in quotes and is handled by html by displaying the literal and moving to the next line. Note that I said probably Explorer because it could be another browser, Opera for example.

Slide #18:

This shows the while loop in JavaScript. Note that I am following standard loop structure.  I set ct to 1 prior to entering the loop.  I have a condition on the loop that tests ct to see when to exit and inside the loop, I increment ct so eventually the condition will be met and the loop will be exited.

Concatenation means putting two things together as one.  In the first example in this code, I am concatenating a literal with the contents of ct and then concatenating that with the <br> in quotes that will tell the code to skip a line.  Remember that the things inside the parenthesis are processed as html so I see the literal, the contents of ct and then I skip a line.  Note also that I put a space after the word number so that there will be a space between the literal This is a number and the variable ct.

Slide #19:

This show the output from the program whileloop.html.  Note that when prompted for how many times I wanted to write the line, I entered 6.  The line then got written 6 times.  The message, This is the end!!! is outside the while loop and gets written when the loop is complete.

Slide #20:

Note that the index/subscript/pointer is enclosed in square brackets in JavaScript. In naming the array elements, I used monthArray where I capitalized the beginning of a new word.  This is a frequently used programming technique.

Again remember that literals are enclosed in quotes and variables are  not.  In this example, I have concatenated several variables and literals together to show the date.

Slide #21:

Here I am taking in month, day and year.  The results of the document.write are shown here.