JavaScript - Introduction

Please use speaker notes for additional information!

Using JavaScript lets you bring interactivity and increased functionality to your Web site. HTML is not a programming language, it is a markup language that allows you to insert tags in your code that display the results in a particular way. JavaScript brings the power of the “if statement”, “looping”, and “events” to your site.

JavaScript is an open language that is available without license and is supported by the major browsers. JavaScript is not a high-level programming language, it is a scripting language. JavaScript is designed to be embedded in your HTML code. This means you can keep HTML as your structure and include JavaScript to provide the enhancements and interactivity you want. HTML is static, JavaScript is dynamic!

JavaScript is not a compiled language, an interpreter translates each line of code to machine language as it executes. The interpreter is built into the browser. Therefore the browser version determines the JavaScript that is supported. When the page is loaded the results of the HTML and the JavaScript are displayed.

Not only can you embed JavaScript within your HTML, you can also embed HTML complete with TAGS and ATTRIBUTES within the JavaScript. For example, if a condition is true JavaScript can contain the HTML for a particular type of display and if the condition is false JavaScript can contain the HTML for a different type of display.

Why JavaScript….Why JavaScript...Why JavaScript...

Objects, methods and properties

Objects, methods and properties

JavaScript uses some of the concepts of Object Orientation (OO), so it is of value to have a basic understanding of the Object Oriented vocabulary and concepts.

An object is an entity or a thing. You and I are objects, the computer is an object and the code we produce is an object.

Properties are the attributes that describe an object. A person has a certain color hair, eyes etc. that are properties because they are attributes of the person that help to describe the person and make them who they are. In programming properties are coded with the object by putting a period/dot between them. For example, rug.style is referring to the object rug and its style property. Taking this one step further, rug.style=“oriental” means the object is a rug and the style property has a value of oriental while rug.color=“brown” still means the object is a rug, but we are now talking about the property color which has a value of brown. Another example: stove.color=“beige” means that the object stove has a property of color which has a value of beige.

Methods are an action or function that the property can perform. For example a person can talk or listen and a stove can bake or broil. Again, the method is coded with the object by putting a period/dot between them. For example stove.bake refers to the making method of the stove object. The value given to the method is an argument. For example: stove.bake(“turkey”) means the object stove has a method bake. Currently, the think being baked in the stove is a turkey so the turkey is the argument for bake. In JavaScript when we say document.write(“This is CIS44”), the document is the object, write is the method and the argument that is being written is the message This is CIS44. Note that arguments can be literals as in these examples or variables. With a variable we would code document.write(mymsg) where mymsg is defined as a variable.

Basic Concepts - <SCRIPT>

Basic Concepts - <SCRIPT>

JavaScript is coded within the SCRIPT tag. The language attribute is used to designated that JavaScript is the scripting language being used.

<SCRIPT LANGUAGE=“JavaScript”>

code

</SCRIPT>

Because JavaScript is not supported by old browsers, many programmers include an HTML comment within the JavaScript which hides the script from the browser that does not support JavaScript.

<SCRIPT LANGUAGE=“JavaScript”>

<!-- Code to hide from old browsers

code

//This is the end of the hide comment-->

</SCRIPT>

Basic concepts - Cautions

Basic concepts - Cautions

•JavaScript is very case sensitive

•Use separate lines for each command

•Be careful with parenthesis and quotes

•Use single quotes within double quotes

•Use a semi-colon after commands as shown in examples

Cautions...

Basic concepts - variable & literal

Basic concepts - variable & literal

A variable is the name given to data that is temporarily stored in memory. In JavaScript the word var can optionally be used to indicate that a variable is being defined. Below are some examples of variables defined in one of the examples we will be discussing. Note that the first two variables simple give the variable name and then assign a value to that name. In the last example, the name is preceded by the word var to indicate that this is a variable. NOTE: variable names are case sensitive!

todaydate=new Date()tday = todaydate.getDate();var thr = todaydate.getHours();

Now let’s talk about assign. Assign means to take the information on the right and assign it to the field named on the left. It is called assign, because in fact you are doing just that, you are assigning the data. This is not an equal sign because ct = ct+1 is a valid programming statement. In this case you clearly do not have equality. On the right you are incrementing the current value of the variable ct by 1 and putting it back in to or assigning it to ct

A literal is a constant value. A numeric literal is written without quotes, a string literal must be enclosed in quotes. If quotes are put around a number, it is considered a string literal.

var ct = 1var msg = “error occurred”

Basic concepts - Language

Basic concepts - Language

JavaScript provides a variety of symbols and expressions that can be used. You need to check a reference for some of the these - I am only listing the basics:

Mathematical:+, - , *, / do add, subtract, multiply and divide respectively% returns the remainder only when do division - modulus= is the assignment sign( ) parenthesis will be resolved first, inner before outer

In resolving mathematical expressions, JavaScript follows the standard order of operation.

Conditional tests:= = equals < less than != not equal to <= less than or equal to&& and > greater than|| or >= greater than or equal to

Conditional - if…else

Conditional - if…else

IF condition

if (condition) { __________; __________; }else { __________; __________; }

Processing if condition true

Processing if condition not true

YN

When coding the IF you ask the condition.

The processing that you want to do if the condition is true is enclosed in { }. Each command within the true processing should end with a semi-colon.

If you have processing to do if the condition is not true, you can code an else and include the processing in { }. Again each command should end with a semi-colon.

<SCRIPT LANGUAGE="JavaScript">var todaydate=new Date();var thr = todaydate.getHours();if (thr < 7) { document.write(”I can still sleep!"); } else { document.write(”Time to study!"); }</SCRIPT>

Hour < 7

I can still sleepTime to study

YNVariables and simple IF…else

Variables and simple IF…else

This script first brings in today’s date/time from the system and stores it in my variable todaydate. It then extracts the hours from the date/time and stores it in my variable named thr. This is done using the JavaScript getHours() method which acts on todaydate and puts the hours in thr.

It then tests thr to see if it is < 7. If it is the I can still sleep message will be displayed using the document.write. If it is not < 7 the Time to study message will be displayed using the document.write.

The command document.write means to execute the method write( ) on the object document. The argument for the method is the actual literal to be written enclosed in quotes and in ( ).

New Date() gets the system date which includes time and stores it in the var todaydate.

The getHours() method extracts the hours from the date and assigns it to the variable thr.

Tests condition thr < 7

Code after else gets executed if the condition was not true.

<HTML><HEAD><TITLE>Test IF for slide</TITLE></HEAD><BODY><SCRIPT LANGUAGE=”JavaScript">var todaydate=new Date();var thr = todaydate.getHours();if (thr < 7) { document.write("I can still sleep!"); } else { document.write("Time to study!"); }</SCRIPT></BODY></HTML>

ifforslide.htmlifforslide.html

This is the code - the entire BODY consists of JavaScript in this example. The screen below shows the output.

<HTML><HEAD><TITLE>Java Script IF</TITLE></HEAD><BODY bgcolor=beige><H1>This is a sample Java Script IF</H1><SCRIPT LANGUAGE="JavaScript"> if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator<BR>"); document.write("My favorite!!!"); window.status = ("Netscape Navigator in use!”); alert("You are using my favorite!!!"); } else { document.write("Probably it is Internet Explorer<BR>"); document.write("Oh well..."); window.status = ("Excuse me...”); alert ("Wait a minute - you aren't using my favorite!!!"); }</SCRIPT></BODY></HTML>

navtypefix.htmlnavtypefix.html

<SCRIPT> establishes that the code is now in the SCRIPT language specified - in this case it is the default of JavaScript. </SCRIPT> defines the end of the JavaScript.

HTML executed prior to the JavaScript code.

<SCRIPT LANGUAGE="JavaScript"> if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator<BR>"); document.write("My favorite!!!"); window.status = ("Netscape Navigator in use!)"; alert("You are using my favorite!!!"); } else { document.write("Probably it is Internet Explorer<BR>"); document.write("Oh well..."); window.status = ("Excuse me...”); alert ("Wait a minute - you aren't using my favorite!!!"); }</SCRIPT>

navtypefix.htmlnavtypefix.htmlThis is checking to see if the appName property of the object navigator is equal to “Netscape”. NOTE: equal is expressed as = =

document.write means that you are doing the write method on the object document. The thing that is being written is basically the same as an HTML statement including the hypertext markup <BR>. NOTE that the entire phrase that is to be written, including the <BR> are enclosed in quotes.

window.status puts the words on the window status line at the bottom of the screen.

alert brings up an alert window with the message that is enclosed in the parenthesis and the quotes.

<HTML><HEAD><TITLE>Playing with time tests!</TITLE></HEAD><BODY BGCOLOR=beige><DIV ALIGN=CENTER><IMG SRC=CISa.gif><BR>The CIS Department at BCC runs both day and evening classes.<UL><LI>Day classes run from 8:00AM until 4:00PM<LI>DCE classes run from 4:00PM until 10:00PM</UL><BR><SCRIPT LANGUAGE="JavaScript"> todaydate=new Date() tday = todaydate.getDate(); tmo = todaydate.getMonth() + 1; var tyr = todaydate.getYear() + 1900; var thr = todaydate.getHours(); document.write("After checking our clock for the date " + tmo + "/" + tday + "/" + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }</SCRIPT></DIV></BODY></HTML>

time1.htmltime1.html

Code for year adds 1900.

time1.htmltime1.html

Explorer 5.0 shows 3900 while Netscape 4.6 shows 2000.

var tyr = todaydate.getYear() + 1900;

<HTML><HEAD><TITLE>Playing with time tests!</TITLE></HEAD><BODY BGCOLOR=beige><DIV ALIGN=CENTER><IMG SRC=CISa.gif><BR>The CIS Department at BCC runs both day and evening classes.<UL><LI>Day classes run from 8:00AM until 4:00PM<LI>DCE classes run from 4:00PM until 10:00PM</UL><BR><SCRIPT LANGUAGE="JavaScript"> todaydate=new Date(); tday = todaydate.getDate(); tmo = todaydate.getMonth() + 1; var tyr = todaydate.getYear(); var thr = todaydate.getHours(); document.write("After checking our clock for the date " + tmo + "/" + tday + "/" + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }

</SCRIPT></DIV></BODY></HTML>

time4.htmltime4.htmlThis code has a lot of HTML before the JavaScript starts. In fact the JavaScript is only generating the last line that appears on the screen.

Code for year simply extracts year from todaydate.

time4.htmltime4.html

Using Explorer 5.0 the year shows as 2000, using Netscape 4.6, the year shows as 100.

var tyr = todaydate.getYear();

<HTML><HEAD><TITLE>Playing with time tests!</TITLE></HEAD><BODY BGCOLOR=beige><DIV ALIGN=CENTER><IMG SRC=CISa.gif><BR>The CIS Department at BCC runs both day and evening classes.<UL><LI>Day classes run from 8:00AM until 4:00PM<LI>DCE classes run from 4:00PM until 10:00PM</UL><BR><SCRIPT LANGUAGE="JavaScript"> todaydate=new Date() tday = todaydate.getDate(); tmo = todaydate.getMonth() + 1; if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() + 1900; } else { var tyr = todaydate.getYear(); } var thr = todaydate.getHours(); document.write("After checking our clock for the date " + tmo + "/" + tday + "/" + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }</SCRIPT></DIV>

time5.htmltime5.html

If the appName is Netscape than the 1900 is added, otherwise it is not!

time5.htmltime5.html

By testing the browser, I was able to do the calculation for both.Each shows 2000.

if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() + 1900; } else { var tyr = todaydate.getYear(); }

“The getYear method returns either a 2-digit or 4-digit year:

•For years between and including 1900 and 1999, the value returned by getYear is the year minus 1900. For example, if the year is 1976, the value returned is 76.

For years less than 1900 or greater than 1999, the value returned by getYear is the four-digit year. For example, if the year is 1856, the value returned is 1856. If the year is 2026, the value returned is 2026.

Examples

Example 1. The second statement assigns the value 95 to the variable year.

Xmas = new Date("December 25, 1995 23:15:00")year = Xmas.getYear()

Example 2. The second statement assigns the value 2000 to the variable year.

Xmas = new Date("December 25, 2000 23:15:00")year = Xmas.getYear()

“

The information below is a quote from netscape documentation - the exact address is:http://developer.netscape.com/docs/manuals/communicator/jsref/core3.htm#1012888

getYear( ) getYear( )

tmo = todaydate.getMonth() + 1;

time1.html through time5.html

time1.html through time5.html

The method getMonth( ) returns the numbers 0 through 11. In other words, January is 0, February is 1 etc. To handle this, I needed to add 1 to the month that was retrieved.

document.write("After checking our clock for the date " + tmo + "/" + tday + "/" + tyr + "<BR>"); if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }

time5.htmltime5.html

This code shows concatenation. I am taking the words about After checking… and concatenating that with the contents of tmo and then concatenating that with the literal / and then concatenating that with the contents of tday and then concatenating that with the literal / and then concatenating that with the contents of tyr and finally concatenating that with the HTML tag <BR>. The tag is enclosed in quotes.

&& means AND

On each of these IF statements there is a compound test asking whether the first condition is true and the second condition is true.

time1.html through time5.html

time1.html through time5.html thr >= 8

AND thr < 16

if (thr >=8 && thr <16) { document.write("Day school schedule is in effect!"); } else if (thr >=16 && thr < 22) { document.write("DCE schedule is in effect!"); } else { document.write("The campus is closed!"); }

thr >= 16 AND

thr < 22

Day school schedule is in

effect!

YN

DCE schedule is in

effect!

The campus is closed!