Presentation on JavaScript
advertisement
Introduction to JavaScript
Please see speaker notes for
additional information!
JavaScript is
used within
HTML
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 </script> and when we end the html, we use </html>. The insertion of the
slash, is the standard html for showing that the tag is an ending tag.
<html>
<script language=“JavaScript”>
code
</script>
</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
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
<html>
<script language="JavaScript">
document.write("Hello World!");
alert("Hello World!");
</script>
</html>
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.
<html>
<script language="JavaScript">
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;
The prompt can be used to take in data.
document.write(ans);
The message in quotes is used to ask
</script>
the user for input and the 0 indicates it
</html>
ans = firstnum * secondnum;
This takes the two numbers
stored in firstnum and secondnum
and multiplies them together.
The results are stored in ans.
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.
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.
<html>
<script language="JavaScript">
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);
</script>
</html>
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.
<html>
<script language="JavaScript">
I could have given whattodo and
var ans = 0;
initial value of space (written as “ “).
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 == "*")
{
Note the = = when I am making
ans = firstnum * secondnum;
the check for is equal to.
}
else
{
ans = firstnum / secondnum;
}
document.write("The answer is ", ans);
</script>
</html>
Remember, in JavaScript when
<html>
I want to test to see if two
<script language="JavaScript">
things are equal, I use = =.
if (navigator.appName == "Netscape")
{
document.write("The browser is Netscape Navigator<BR>");
document.write("Netscape is in use!!!");
}
else At the end of each command inside the curly brackets I put the semi-colon.
{
document.write("Probably it is Internet Explorer<BR>");
document.write("I know it is not Netscape");
}
</script>
</body>
</html>
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.
On this slide, I am showing the testing of
checkbrowser.html using Netscape.
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.
<html>
<script language="JavaScript">
var data_input = 0;
data_input=prompt("How many times should I write the line?",0);
var ct=1;
The + means concatenation so I am putting the three
while (ct <= data_input)
things together in the document.write - see speaker notes.
{
document.write("This is number " + ct + "<br>");
ct = ct + 1;
}
document.write("<br>" + "This is the end!!!")
</script>
</html>
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 <br>
means that it will be written
after moving to a new line.
<html>
<script language="JavaScript">
monthArray = new Array(12);
monthArray[1]="January";
Here I have defined an array
monthArray[2]="February";
and filled the array - I decided
monthArray[3]="March";
monthArray[4]="April";
not to use the 0th element
monthArray[5]="May";
even though it would be
monthArray[6]="June";
available with this definition.
monthArray[7]="July";
monthArray[8]="Auguest";
monthArray[9]="September";
monthArray[10]="October";
monthArray[11]="November";
Now I am taking in user input
monthArray[12]="December";
for the month, day and year.
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);
</script>
</html>
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.
