CH 15
Java Script
FOR TUESDAY and WED: Your assignment is to have your pet talk back and forth to your user and change pictures.
This will be a TWO step process so it is important for you to have things ready to go each day. DAY 1: Create a web page based on any topic. WHAT YOU NEED BY WED:
THE VIDEO below show you what our overall project will look like at the end of Wednesday, so please keep that in mind. |
DAY 1 and 2:
Using JavaScript.
What is JavaScript???an object-oriented computer programming language commonly used to create interactive effects within web browsers. Make sure you understand why we use JavaScript in HTML. This will be a question on the exam. Be sure you will be able to describe situations and sites that use JavaScript.
IMPORTANT TO NOTE:
Your javaScript will NOT effect your css file so all your styling should already be done before you put your script in. STEP 1: Identifying the script - You will use the element <script type="text/javascript"> and </script> in the head area of your HTML. This will be the "program" part of your script. THINK ... working part Create a Function in your script
STEP 2: You will create a function in your script element. This function does "the heavy lifting" and is the "directions" you want your script to do declare a variable:var userName = prompt("What is your name?", "Enter your name here.");
STOP IF YOU GET TO THIS POINT ON TUESDAY!
We will work on this part on WEDNESDAY PART 2 - THE JAVA in JAVASCRIPT Wednesday 11/13STEP 1 - Creating an IF statement
STEP 2 - onload
STEP 3 - id
STEP 4 - Final Pic
|
MAKING A PIC INTO A LINK
BEFORE WE START MAKE SURE YOU HAVE:
* 3 pictures
* two links you will need to access
pic_test.html | |
File Size: | 0 kb |
File Type: | html |
SAMPLE CODE
<!DOCTYPE html>
<head>
<title> This is a pic</title>
</head>
<body>
<p>Create a link of an image: </p>
<a href="your website">
<img src="your picture" alt="HTML tutorial" width="32" height="32"></a>
<p>border around the image, but still a link:
<a href="your website">
<img border="2" src="your picture" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>
<!DOCTYPE html>
<head>
<title> This is a pic</title>
</head>
<body>
<p>Create a link of an image: </p>
<a href="your website">
<img src="your picture" alt="HTML tutorial" width="32" height="32"></a>
<p>border around the image, but still a link:
<a href="your website">
<img border="2" src="your picture" alt="HTML tutorial" width="32" height="32"></a></p>
</body>
</html>
Creating a rollover in HTML
SAMPLE CODE:
<a href="website " >
<img src=" first image " onmouseover="this.src='second_image '"
onmouseout="this.src=' first image'" />
</a>
<a href="website " >
<img src=" first image " onmouseover="this.src='second_image '"
onmouseout="this.src=' first image'" />
</a>