topic: an introduction to javascript - from beginning javascript by wilton (wrox)

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• <SCRIPT>• </SCRIPT>• Language Attribute in SCRIPT tag

– <SCRIPT LANGUAGE=“JavaScript”>

• Opening statement • First Code…

<HTML><head><title>Your JavaScript Tutorial</title> <script language="JavaScript"> document.bgColor = "RED";</script> </head> <P> Hello There </P> </script> </HTML>

http://www1.stpt.usf.edu/awatkins/javascript/first.htm

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

<HTML><head><title>Your JavaScript Tutorial</title>

<SCRIPT LANGUAGE="JavaScript">

// 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";</script>

</head> <P> Hello There </P></script> </HTML>

http://www1.stpt.usf.edu/awatkins/javascript/alert.htm

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;

<HTML><head><title>Your JavaScript Tutorial</title>


var varOne;

varOne = "Hey look at me";alert(varOne);

varOne = 55;alert(varOne);</script> </head> <P> Hello There </P> </script> </HTML>

http://www1.stpt.usf.edu/awatkins/javascript/numbers.htm

Using Data

• varOne = 5+5 +6;

• varOne++;

• varFour = 7/3;

• varSix = “House”;

• varSeven = “Red”;

• varEight = varSix/varSeven

<HTML><head><title>Your JavaScript Tutorial</title> <SCRIPT LANGUAGE="JavaScript"> var varOne;varOne = "Hey look at me";alert(varOne);varOne = 55;alert(varOne);</script> </head> <P> Hello There </P> </script> </HTML>

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+".");

</script>


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

</script>

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

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 herevar 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 answerdocument.write("The answer is "+Total+"<BR>");

if (Total>20) document.write("The result is greater than 20 <BR>");else document.write("The result is less than 20 <BR>");

document.write("The numbers were ");for (counter in varOne)document.write(""+varOne[counter]+" ");

</script>

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 <BR>");

for (index=0; index<counter; index++){ document.write(questions[index][0]+"<BR>"); for (var x = 1; x< 5; x++) document.write(x+". "+questions[index][x]+"<BR>"); answers[index] = prompt("Answer to question "+index+" is");}</script>

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

<SCRIPT LANGUAGE="JavaScript"> 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");

}}</script> <body>

<SCRIPT LANGUAGE = JavaScript>

function myButton_onclick()

{

window.location.reload();

}

</SCRIPT>

Images• Changing images based on user selection<body><IMG Name = img1 SRC = " " BORDER =0 WIDTH=300

HEIGHT=550> <SCRIPT LANGUAGE="JavaScript"> var myImages = new Array("station.gif",

"stopsign.gif"); var imgIndex = prompt("enter a zero or a one"); document.images["img1"].src = myImages[imgIndex]; </script> </body>

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.

topic: an introduction to javascript - from beginning javascript by wilton (wrox)

Documents