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...

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 - JavaScript is coded within the SCRIPT tag. The language attribute is used to designated that JavaScript is the scripting language being used. code 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. <!-- Code to hide from old browsers code //This is the end of the hide comment-->

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 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 = 1 var msg = “error occurred”

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 IF condition if (condition) { __________; } else { __________; } Processing if condition true Processing if condition not true Y N 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.

var todaydate=new Date(); var thr = todaydate.getHours(); if (thr < 7) { document.write(”I can still sleep!"); } else { document.write(”Time to study!"); } Hour < 7 I can still sleepTime to study Y N 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 g etHours() 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.

Test IF for slide var todaydate=new Date(); var thr = todaydate.getHours(); if (thr < 7) { document.write("I can still sleep!"); } else { document.write("Time to study!"); } ifforslide.html This is the code - the entire BODY consists of JavaScript in this example. The screen below shows the output.

Java Script IF This is a sample Java Script IF if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator "); document.write("My favorite!!!"); window.status = ("Netscape Navigator in use!”); alert("You are using my favorite!!!"); } else { document.write("Probably it is Internet Explorer "); document.write("Oh well..."); window.status = ("Excuse me...”); alert ("Wait a minute - you aren't using my favorite!!!"); } navtypefix.html establishes that the code is now in the SCRIPT language specified - in this case it is the default of JavaScript. defines the end of the JavaScript. HTML executed prior to the JavaScript code.

if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator "); document.write("My favorite!!!"); window.status = ("Netscape Navigator in use!)"; alert("You are using my favorite!!!"); } else { document.write("Probably it is Internet Explorer "); document.write("Oh well..."); window.status = ("Excuse me...”); alert ("Wait a minute - you aren't using my favorite!!!"); } navtypefix.html This 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. NOTE that the entire phrase that is to be written, including the 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.

Playing with time tests! The CIS Department at BCC runs both day and evening classes. Day classes run from 8:00AM until 4:00PM DCE classes run from 4:00PM until 10:00PM 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 + " "); 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!"); } time1.html Code for year adds 1900.

time1.html Explorer 5.0 shows 3900 while Netscape 4.6 shows var tyr = todaydate.getYear() ;

Playing with time tests! The CIS Department at BCC runs both day and evening classes. Day classes run from 8:00AM until 4:00PM DCE classes run from 4:00PM until 10:00PM 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 + " "); 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!"); } time4.html This 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.html Using Explorer 5.0 the year shows as 2000, using Netscape 4.6, the year shows as 100. var tyr = todaydate.getYear();

Playing with time tests! The CIS Department at BCC runs both day and evening classes. Day classes run from 8:00AM until 4:00PM DCE classes run from 4:00PM until 10:00PM todaydate=new Date() tday = todaydate.getDate(); tmo = todaydate.getMonth() + 1; if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() ; } else { var tyr = todaydate.getYear(); } var thr = todaydate.getHours(); document.write("After checking our clock for the date " + tmo + "/" + tday + "/" + tyr + " "); 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.html If the appName is Netscape than the 1900 is added, otherwise it is not!

time5.html By testing the browser, I was able to do the calculation for both.Each shows if (navigator.appName == "Netscape") { var tyr = todaydate.getYear() ; } 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 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 If the year is 2026, the value returned is Examples Example 1. The second statement assigns the value 95 to the variable year. Xmas = new Date("December 25, :15:00") year = Xmas.getYear() Example 2. The second statement assigns the value 2000 to the variable year. Xmas = new Date("December 25, :15:00") year = Xmas.getYear() “ The information below is a quote from netscape documentation - the exact address is: getYear( )

tmo = todaydate.getMonth() + 1; 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 + " "); 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.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. 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 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!