I think you’re getting very good at this. one thing you should also learn, is how to use scripts on your web pages. A little knowledge on Javascript will give you a good start on this tutorial, but anyway am going to have a little one here for you.
A quick run through on Javascript: Javascript is a scripting language used to add dynamic content to your HTML static pages, this can be easily implemented because javascript also have similar resemblance to your HTML code (in the sense some HTML tags are used in javascripts). Javscript is officially named ECMAScript developed and maintained by ECMA organization, released in 1996 and ever since then it has been adopted by all browsers. Javascript file are totally different form Java so don’t get confused on that, Java is a more powerful language in the same category with C++ , C and other powerful scripting HLL (high level language). Javascript can be implemented on any part of your HTML document just by declaring or adding its syntax like this <script type="text/javascript"> document.write('some text here'); </script>. As you can see, it has an opening tag that contains an element “Script” and an attribute “Type” with some values in the attribute “Text/javascript” before the opening tag was closed. Then a javascript command “document.write (‘some text here’);” tells your browser to write the content inside the parenthesis and a single quotation mark is used to start and end the contained content; and finally ends with a semi-colon. confused? Let see some examples shall we.
Example 1: To add javascript content to your HTML document, you need to know how the syntax for javascript looks like.
<html>
<body>
<script type="text/javascript">
document.write("My First Javascript Word!");
</script>
</body>
</html>
it will look like this on your browser
That is the syntax in order to write a javascript file.
To insert a javascript file into our HTML document, we used the <script> tag and insert it any where we want the javascript file to run.
Example 2:
<script type="text/javascript">
document.write("My First Javascript Word!");
</script>
The document.write command is a standard JavaScript command for writing output to a page, By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write My First javascript Word! to the page:
Where can i insert a Javascript tag?
Actually, a javascript tag can be inserted any where in your HTML document, if your using functions in Javascript and want the function to load first, you can include it in your head section like this:
Example 3:
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
If you save this as a new page and run it on your browser, once the page load, it displays a dialog nag screen. try it out.
it will show up like this on your browser, normally if the pages loads, it shows the message but on our on-site preview we used the click event instead.
Using an External JavaScript
If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script></script> tags!
To use the external script, point to the .js file in the “src” attribute of the <script> tag:
Example 4:
<html>
<head>
<script type="text/javascript" src="Myfirstjavascriptfile.js"></script>
</head>
<body>
</body>
</html>
Always remember to place the script exactly in the place where you want it to execute.
Javascript code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will write a heading and two paragraphs to a web page:
Example 5:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
In javascript, there are events that javascript file can listen for and execute them if that event occurs.
List of events are:
- onclick
- ondblclick
- onmouseover
- onmousemove
- onmouseup
- onmouseout
- onmousedown
- onfocus
- onblur
- onload
- onsubmit
- onkeydown
- onkeyup
- onchange
There are many more but here’s a few you can begin with.
How can i use a Javascript Event?
As listed above, the type of events depends on what you want the script to do once that particular event occurs, each event does what its name implies. for instance “onclick” events occurs only when the user clicks on an object that you’ve already placed the javascript command to function. “ondblclick” events occurs once the object is double clicked, “onmouseover” events only occurs when the user uses his or her mouse to hover on the object that the javascript command is working on. Lets look at some examples shall we.
Example 6:
<html>
<body>
<form>
<input type="button" value="Red" onclick="document.bgColor= 'red';" />
<input type="button" value="Reset" onmouseover="document.bgColor= 'white';" />
</form>
</body>
</html>
It will look like this on your browser, click to change color.
Now you’re starting to understand the syntax behind Javascript. lets see some more examples.
Example 7:
In this example, we’re using functions in conjunction with out codes to make this work. to learn about javascript functions visit our Javascript tutorials
<html>
<head>
<title>Changing Background Color</title>
<script type="text/javascript">
function setBgColor(){
document.bgColor = prompt("Set Background Color:", "");
}
function getBgColor(){
return document.bgColor;
}
</script>
</head>
<body>
<form>
<input type="button" value="Set Background Color" onclick="setBgColor();" />
<input type="button" value="Get Background Color" onclick="alert(getBgColor());" />
</form>
</body>
</html>
Click here to see a working example Example 7
This time we used the javascript command “prompt” to display the message we want the user to input once an event occurs. try it out.
| Back | Main: HTML Programming | Previous Lesson: Including Styles to HTML | Next Lesson: Embedding Objects |
