1. We will add a JavaScript alert to make the rock greet users when the iRock web page is loaded.(an alert is js popping up a message box)
2. We will write code to ask for the user's name, print out a personalized greeting, and make the rock smile.
3. We will also add an event handler so that when users click on the rock, the code you wrote, will run. (an event handler is connecting something the user does, like clicking a rock, with the activity that you design)
Its starts with VERY SIMPLE html code as shown below.
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
</head>
<body>
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" />
</div>
</body>
</html>
Be sure to have the images below for your rock site!!!!
rock.png and rock_happy.png
Next, you will add the greeting.
***even though the onload event applies to the entire page, you set it as an attribute of the tag because the body of a page is the part that is visible in a browser***
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
</head>
<body onload="alert('Hello, I am your pet rock.');">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" />
</div>
</body>
</html>
BREAK IT DOWN
onload-------------indicates that the web page is finished loading
( )------------------enclose the information passed into a function
alert---------------display a text message in a pop up window
; -------------------terminate a line of js code
Now it might get a little more complicated, but do not fear :)
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function touchRock() {
var userName = prompt("What is your name?", "Enter your name here.");
if (userName) {
alert("It is good to meet you, " + userName + ".");
document.getElementById("rockImg").src = "rock_happy.png";
}
}
</script>
</head>
<body onload="alert('Hello, I am your pet rock.');">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
Javascript functions are placed in a special script tag that goes in the head of the page.
The type Attribute is used to identify the type of the script language in this case javascript.
Just like alert, every function in js has a name. This function's name is toughRock.
Prompt is a function to pop up a box and get a value from the user.
Once we have a name we greet the user personally.
and change the rock into a smiling rock
The onclick event attribute of the rock image causes the touchRock function to get called when the rock is clicked.
All information from this tutorial was from headfirstlabs.com
No comments:
Post a Comment