Introduction to JavaScript Please see speaker notes for additional information!

To run JavaScript, we will use HTML. The JavaScript will be enclosed in the HTML. HTML is run by a browser so if you have a browser you can test your code. The code is written in notepad and then opened for testing in the browser. Since JavaScript is written within HTML, when you save your code, you will give it an HTML extension. JavaScript is coded within the SCRIPT tag within HTML. First we use the HTML tag to tell the browser we are coding HTML and then we use the script tag to tell the browser we are using a scripting language The language attribute is used to designated that JavaScript is the scripting language being used. Note that when we end the script we use and when we end the html, we use. The insertion of the slash, is the standard html for showing that the tag is an ending tag. code JavaScript is used within HTML

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 CIS17”), the document is the object, write is the method and the argument that is being written is the message This is CIS17. 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. You could then make mymsg equal to “This is CIS17”.

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

document.write("Hello World!"); alert("Hello World!");

var ans = 0; var firstnum = 0; var secondnum = 0; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); ans = firstnum * secondnum; document.write(ans); The JavaScript var (for variable) can be used to define a field (note that you can eliminate the command var and it will still work). In this example, I have defined three variables and given them all an initial value of 0. The prompt can be used to take in data. The message in quotes is used to ask the user for input and the 0 indicates it is numeric input. Note that the data that was keyed in with the first prompt was assigned to firstnumand the data that was keyed in with the second prompt was assigned to secondnum. ans = firstnum * secondnum; This takes the two numbers stored in firstnum and secondnum and multiplies them together. The results are stored in ans. document.write(ans); I am now using the write method to put ans to the screen. Note that ans is a variable, not a literal so it is not enclosed in quotes.

var ans = 0; var firstnum = 0; var secondnum = 0; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); ans = firstnum * secondnum; document.write("The answer is ", ans); The only change here is in the document.write where I am writing the literal “The answer is ” and then the variable answer, ans. Note that I separated the literal and the variable with a comma.

var ans = 0; var firstnum = 0; var secondnum = 0; var whattodo; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); whattodo = prompt("Enter * or /",""); if (whattodo == "*") { ans = firstnum * secondnum; } else { ans = firstnum / secondnum; } document.write("The answer is ", ans); Note the = = when I am making the check for is equal to. I could have given whattodo and initial value of space (written as “ “).

if (navigator.appName == "Netscape") { document.write("The browser is Netscape Navigator "); document.write("Netscape is in use!!!"); } else { document.write("Probably it is Internet Explorer "); document.write("I know it is not Netscape"); } Now I am writing an if statement. I am testing to see if the browser is Netscape. I do this by testing to see if navigator.appName is equal to the word Netscape. If it is, I do the commands inside the first set of curly brackets. If it not true, I do the code inside the set of curly brackets that follows the else. Remember, in JavaScript when I want to test to see if two things are equal, I use = =. At the end of each command inside the curly brackets I put the semi-colon.

On this slide, I am showing the testing of checkbrowser.html using Netscape.

var data_input = 0; data_input=prompt("How many times should I write the line?",0); var ct=1; while (ct <= data_input) { document.write("This is number " + ct + " "); ct = ct + 1; } document.write(" " + "This is the end!!!") The while says to do this loop while the contents of the ct variable is less then or equal to the contents of the data_input variable. Note that the data_input variable contains user input. The ct variable is controlled by the program. Inside the loop, I increment ct by 1 using the structure ct = ct + 1. This means that eventually ct will no longer be less than or equal to the number that the user inputted so the loop will end. When the loop ends the message, This is the end is written. Note that the means that it will be written after moving to a new line. The + means concatenation so I am putting the three things together in the document.write - see speaker notes.

monthArray = new Array(12); monthArray[1]="January"; monthArray[2]="February"; monthArray[3]="March"; monthArray[4]="April"; monthArray[5]="May"; monthArray[6]="June"; monthArray[7]="July"; monthArray[8]="Auguest"; monthArray[9]="September"; monthArray[10]="October"; monthArray[11]="November"; monthArray[12]="December"; var user_month = 0; var user_day = 0; var user_year = 0; user_month = prompt("Enter the month as a number",0); user_day = prompt("Enter the day",0); user_year = prompt("Enter the year",0); document.write("The date is " + monthArray[user_month] + " " + user_day + ", " + user_year); Here I have defined an array and filled the array - I decided not to use the 0th element even though it would be available with this definition. Now I am taking in user input for the month, day and year. Now I am concatenating the literals, spaces and parts of the date together to produce the output. The [ ] holds the index/subscript/pointer which selects which element of the array I want. The elements are named monthArray.