JavaScript
What is JavaScript?
JavaScript is a type of programming language which can be applied to objects on your webpage to really make the page come alive. There are a few basic scripts that need to be present in your html code for it to work:
You must tell the reading browser that you are using javascript by keying the following before the javascript code:
<script type="text/javascript">
Javascript goes here
< /script>
Example
If you put in the set up code and then insert this javascript code, you will get an alert message. Try it and see.
alert("put your message here");
Be sure to include the ending ;
Methods
A method is an action that you want the JavaScript to perform. For example, the write() method allows you to insert text to be written to the document.
Another method, as seen in the previous section, is alert().
Obviously, you wouldn't want to use the write() method to construct your whole web page when you can just type out the information for display. However, it might be useful to use it in conjustion with other tools. For example, you could have the code get the current time of day and then based on that information write either "Good Morning", "Good Afternoon" or "Good Evening".
Here's some JavaScript that you can insert into the template given in the last exercise to see how the write() method works:
<h5>This document was last modified on:
<script >
document.write(document.lastModified);
</script>
</h5>
Event Handlers
Events are occurrences triggered by mouse actions.
Event JavaScript does not require the <script> tag as these are placed as attributes within regular xhtml tags.
Copy the following code and place it in a text document saved as an html file. What does it do?
<html>
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h2>Using Javascript</h2>
<table width="80%">
<tr>
<td>
<a href="#" onmouseover="alert('You moused over');">Mouseover test</a>
</td>
<td>
<a href="#" onmouseout="alert('You moused out');">Mouseout test</a>
</td>
</tr>
</table>
</body>
</html>
Collecting Input from a User
JavaScript can also be used to collect data from a user. Try this example in a text editor saved as an html file. What does it do? How does it do it? Where in the code is the direction to collect the data from the user?
<html>
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h2>Using Javascript</h2>
<script >
var userName;
userName = prompt("Please enter your name");
document.write("<h2>Hello "+ userName + "</h2>");
</script>
</body>
</html>
Other Code
Here's some code that changes what the cursor looks like. Can you modify it? Just paste everything in the file into the <head> section.
Here's a site that offers additional Javascript that you might want to check out and/or modify for your own purposes.
Challenge
I challenge you to modify the code in the above examples to create your own example.
Look what I did with this code! (Note: It's a folder. You'll have to download it and then right click on the folder to uncompress it using the 7-Zip utility.)
OR check out this site and use the code there.
Maybe do a search online for free Javascript code that you can copy/modify.
If you have even more time, try the Javascript tutorial at W3Schools.
JavaScript is a type of programming language which can be applied to objects on your webpage to really make the page come alive. There are a few basic scripts that need to be present in your html code for it to work:
You must tell the reading browser that you are using javascript by keying the following before the javascript code:
<script type="text/javascript">
Javascript goes here
< /script>
Example
If you put in the set up code and then insert this javascript code, you will get an alert message. Try it and see.
alert("put your message here");
Be sure to include the ending ;
Methods
A method is an action that you want the JavaScript to perform. For example, the write() method allows you to insert text to be written to the document.
Another method, as seen in the previous section, is alert().
Obviously, you wouldn't want to use the write() method to construct your whole web page when you can just type out the information for display. However, it might be useful to use it in conjustion with other tools. For example, you could have the code get the current time of day and then based on that information write either "Good Morning", "Good Afternoon" or "Good Evening".
Here's some JavaScript that you can insert into the template given in the last exercise to see how the write() method works:
<h5>This document was last modified on:
<script >
document.write(document.lastModified);
</script>
</h5>
Event Handlers
Events are occurrences triggered by mouse actions.
Event JavaScript does not require the <script> tag as these are placed as attributes within regular xhtml tags.
Copy the following code and place it in a text document saved as an html file. What does it do?
<html>
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h2>Using Javascript</h2>
<table width="80%">
<tr>
<td>
<a href="#" onmouseover="alert('You moused over');">Mouseover test</a>
</td>
<td>
<a href="#" onmouseout="alert('You moused out');">Mouseout test</a>
</td>
</tr>
</table>
</body>
</html>
Collecting Input from a User
JavaScript can also be used to collect data from a user. Try this example in a text editor saved as an html file. What does it do? How does it do it? Where in the code is the direction to collect the data from the user?
<html>
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h2>Using Javascript</h2>
<script >
var userName;
userName = prompt("Please enter your name");
document.write("<h2>Hello "+ userName + "</h2>");
</script>
</body>
</html>
Other Code
Here's some code that changes what the cursor looks like. Can you modify it? Just paste everything in the file into the <head> section.
Here's a site that offers additional Javascript that you might want to check out and/or modify for your own purposes.
Challenge
I challenge you to modify the code in the above examples to create your own example.
Look what I did with this code! (Note: It's a folder. You'll have to download it and then right click on the folder to uncompress it using the 7-Zip utility.)
OR check out this site and use the code there.
Maybe do a search online for free Javascript code that you can copy/modify.
If you have even more time, try the Javascript tutorial at W3Schools.