Topic: An Introduction to JavaScript - from Beginning JavaScript by Wilton (WROX)

What is JavaScript It is not java Interpreted Converted to machine code everytime code is run Java is compiled and Interpteted

History of JavaScript LiveScript Java was trendy – changed the name JScript – the competition Perl and VBScript

Why Use JavaScript User Interaction Getting Information Validating Information Forms Menus Etc.

Getting Started Text Editor or HTML Editor Uses tags for start and end of contents Language Attribute in SCRIPT tag – Opening statement First Code…

Your JavaScript Tutorial document.bgColor = "RED"; Hello There

Java Notes Alert boxes alert(“hello”) or (‘hello’) Start and and with same “” or ‘ ’ ; follow all statements Comment lines // or /* same as in C or Java

Your JavaScript Tutorial // put up an alert box, to show how they work alert("Soon, I will rebuild my browser!"); alert("..and then the world"); document.bgColor = "RED"; Hello There

Static vs Dynamic HTML is static JavaScript is dynamic The word static in the java language means that all objects of a class share the same piece of data can be a behavior or an attribute.

Data Types Weakly types language No explicit declarations of type Works it out for itself Integers and floats var varOne; varOne = “hello”; varOne = 22.33; Assignment varTwo = varOne;

Your JavaScript Tutorial var varOne; varOne = "Hey look at me"; alert(varOne); varOne = 55; alert(varOne); Hello There

Using Data varOne = ; varOne++; varFour = 7/3; varSix = “House”; varSeven = “Red”; varEight = varSix/varSeven

Your JavaScript Tutorial var varOne; varOne = "Hey look at me"; alert(varOne); varOne = 55; alert(varOne); Hello There

Prompting Receiving info from the user Placing results in an alert or a document Adding numbers - parseInt

var varOne = prompt("Enter your name"); alert("Your name is " + varOne+".");

var varOne = prompt("Enter your name"); document.write("Your name is "+varOne+" ");

var varOne = prompt("Enter first number"); var varTwo = prompt("Enter second number"); document.write("The answer is "+varOne+varTwo+" "); alert("Is that correct?"); document.write("The real answer is "+((parseInt(varOne))+(parseInt(varTwo)))+"<BR");

Arrays One dimensional Arrays or multi- dimensional arrays are allowed var myArray1 = new Array() ; or var myArray2 = new Array(5); or Var myArray3= new Array(“the”,”house”); Value of myArray3[0] is ?

var varOne = new Array(); //Total is being incremented each time, so need to initialize it here var Total=0; var counter; for (counter = 0; counter<4; counter++) { varOne[counter] = prompt("Enter number"); //reading from keyboard, need to convert each number from string to int Total+=parseInt(varOne[counter]); } //writes out answer document.write("The answer is "+Total+" "); if (Total>20) document.write("The result is greater than 20 "); else document.write("The result is less than 20 "); document.write("The numbers were "); for (counter in varOne) document.write(""+varOne[counter]+" ");

Why use arrays? Storing just one value in memory at a time does not fulfill your needs. If you wanted to store twenty names you could create twenty unique variables – not efficient –A lot of typing Array – a list of data items that all have the same type and the same name. Easy to fill with a while or for loop

MultiScripted Array Two-dimensional arrays Create an array And then create an array of each item in the array var q = new Array(5); q[0] = new Array(5); Creates a 5x5 array (five rows and five columns)

var questions = new Array(); var answers = new Array(); //Total is being incremented each time, so need to initialize it here var index, counter=0, addMore="yes"; while (addMore == "yes") { questions[counter] = new Array(); questions[0][0] = prompt("Enter First Question"); for (var x = 1; x<5; x++) questions[counter][x] = prompt("Answer choice "+x+" is:"); addMore = prompt("Any more questions?"); counter++ } document.write("The questions were "); for (index=0; index<counter; index++) { document.write(questions[index][0]+" "); for (var x = 1; x< 5; x++) document.write(x+". "+questions[index][x]+" "); answers[index] = prompt("Answer to question "+index+" is"); }

Forms In html page, not JavaScript Textareas, buttons etc. Can use to input or output data

Buttons Adding interactivity to the web page Buttons are part of the html code created in a form. When button clicked can specify some function to activate. –function doThis() –All code in a function is encased in {} Haven’t used functions in previous code today – JavaScript happened automatically when code was run.

Functions Just like methods in Java In this example when button is pressed calls function Function terminates when completed Another button press causes process to start again. Can have global and local variables

var counter = 0; var questions = new Array(); var answers = new Array(); function myButton_doThis() { var index, addMore; addMore="yes"; while (addMore == "yes") { questions[counter] = new Array(); questions[0][0] = prompt("Enter Question +(parseInt(counter)+parseInt(1))); for (var x = 1; x<5; x++) questions[counter][x] = prompt("Answer choice "+x+" is:"); addMore = prompt("Any more questions?"); counter++ } var question; question="The questions were \n"; for (index=0; index<counter; index++) { question+= index+". "+questions[index][0]+"\n"; for (var x = 1; x< 5; x++) question += " "+ x+". "+questions[index][x]+"\n"; window.document.myForm.textAreaOne.value =question; answers[index] = prompt("Answer to question "+index+" is"); }

function myButton_onclick() { window.location.reload(); }

Images Changing images based on user selection var myImages = new Array("station.gif", "stopsign.gif"); var imgIndex = prompt("enter a zero or a one"); document.images["img1"].src = myImages[imgIndex];

Quick Review JavaScript is not Java But it uses many of the basic concepts of many languages: such as assignment, arrays, functions etc. It is interpreted. Works with HTML

Lab Assignment Create an html document which includes JavaScript to ask the user a series of questions and then output the responses to the web page. Use color, prompts, arrays and alert boxes.