topic: an introduction to javascript - from beginning javascript by wilton (wrox)
Post on 01-Jan-2016
231 Views
Preview:
TRANSCRIPT
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>
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>
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>
<SCRIPT LANGUAGE="JavaScript">
var varOne;
varOne = "Hey look at me";alert(varOne);
varOne = 55;alert(varOne);</script> </head> <P> Hello There </P> </script> </HTML>
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
<SCRIPT LANGUAGE="JavaScript">
var varOne = prompt("Enter your name");alert("Your name is " + varOne+".");
</script>
<SCRIPT LANGUAGE="JavaScript">
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 ?
<SCRIPT LANGUAGE="JavaScript">
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)
<SCRIPT LANGUAGE="JavaScript">
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.
<FORM NAME = "myForm"><TEXTAREA ROWS=6 COLS=40 Name=textAreaOne></TEXTAREA><INPUT TYPE=button VALUE="Click ME!" NAME = "myButton" onclick="myButton_doThis()"><INPUT TYPE=button VALUE="Start Again!" NAME = "my2Button" onclick="myButton_onclick()"></FORM>
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.
top related