This is why we use JavaScript. JavaScript provides websites with the ability to execute functions when an event is triggered.
For instance, if a user were to click on an image, we could execute a function that would change the image within that <img> element.
So, let's do that. But first, let's learn about functions!
Creating A Function
In your HTML file in the <head> portion, add a <script> tag.
This will be where we put the script for our function.<script></script>
For our first script, let's do the generic "hello world!" script.
Next we want to define our function. To do this, add the following lines between the <script> tags.
<script>
function HelloWorld(){}
</script>
We're telling the browser that HelloWorld is a function. with no arguments "()" and providing the {} tells the script what code to execute.
Now that we have declared our function, we can start writing the script.
For this script we will simply "alert" the user "Hello World!" when the script is executed. To do this:
function HelloWorld(){
alert("Hello World!");
}
Notice that "Hello World!" is in quotations, this is because it is a string.
Any time you put data in quotations, it is interpreted as a string.
Also notice the ( ) that the "Hello World!" is in. This tells the built in "alert" function what to execute as the alert.
And finally, notice the semi-colon ";" that is placed at the end of the line. This tells the browser when the task has ended. Every time you get to a semi-colon in the script, this is when that line will be executed.
Executing The Function
If you run the document now, nothing will happen. This is because, at no point have we told the script to be executed. Functions are only executed when the event that triggers them is detected by the browser. For this case, we want to do this when the page is loaded.
There are several ways to do this, and many different schools of thought. We will be going over these methods later on in more depth. For now, simply go to the body tag and add: onload="HelloWorld"
<body onload="HelloWorld()">
onload is an event of document, which is available to all documents loaded in the browser.
This will tell the browser to execute the function "HelloWorld" once the document is loaded.
Try it!
That's pretty good, but also, pretty worthless...
Now that we know how to create a function. Let's make a script file and pull the scripting out of our HTML document and save it to a .js file.
First open a new document and copy paste your function (WITHOUT THE <script> TAGS) into this new document and save it as "javascriptTest.js" or whatever you'd like. I'm going to save it as "common.js" for my actual page, or something similar because this is where I'll store my functions common to the rest of my site. Save this file to a javascript or "js" folder. Just remember where you put it.
Now, you want to edit your <script> tag to read:
<script type="text/javascript" src="js/javascriptTest.js">
Of course, where you saved your file and what you saved it as will affect the src= portion of this, but if you're following along exactly with this article, you can do exactly this.
Save your documents, and reload your page.
Pretty cool, huh?
Ok, if that doesn't work, make sure your documents look like these:
HTML DOCUMENT:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title of my project: A learning experience.
</title>
<link rel="stylesheet" href="css/examplePageA.css">
<script type="text/javascript" src="js/javascriptTest.js"></script>
</head>
<body onload="helloWorld()">
<div class="container" id="master">
<div class="menu" id="leftMenu">
</div>
<div class="content" id="article01">
</div>
</div>
</body>
</html>
JAVASCRIPT DOCUMENT:
If for some reason this business still doesn't work for you. You can comment here, and I'll be happy to help. But It should work.
function helloWorld() {
alert("Hello World!");
}
No comments:
Post a Comment