ACCESS CONTENT
You can use JavaScript to select any element, attribute, or text from an HTML page.Example:
- Select the text inside all the <h1> elements on a page
- Select any elements that have a class attribute with a value of note
- Find out what was entered into a text input whose id attribute has a value of email
MODIFY CONTENT
You can use JavaScript to add elements, attributes, and text to the page, or remove them.
Example:
- Add a paragraph of text after the first <h1> element
- Change the value of class attribute to trigger new CSS rules for those elements
- Change the size or position of an <img> element
PROGRAM RULES
You can specify a set of steps for the browser to follow, which allows it to access or change the content of the page.
Example:
- A gallery script could check which image a user clicked on and display a larger version of that image
- A mortgage calculator could collect values from a form, preform a calculation, and display repayments
- An animation could check the dimensions of the browser window and move image to the bottom of the viewable area(also known as the viewport)
REACT TO EVENTS
You can specify that a script should run when a specific event has occurred.
Example:
- A button is pressed
- A link is clicked
- A cursor hovers over an element
- Information is added to a form
- An interval of time has passed A web page has finished loading
Some Examples of JavaScript
Why not try the following sample code it has a small bit of HTML and JavaScript.
You will need a text editor "notepad++" is quite good for this and a browser, write in the code as you see it, try not to copy and paste just yet as it is always better to get a feeling for the code first.
This is a simple function.
html>
<head>
<title>Functions</title>
<script type="text/javaScript">
<!--
function printName(Name)
{
document.write("<hr>");
document.write("Name is "+Name +"<br>");
document.write("<hr>");
}
-->
</script>
</head>
<body>
<p>Functions script</p>
<script type="text/javaScript">
<!--
printName("GMIT,Galway,Ireland")
printName("GMIT,Galway,Ireland")
-->
</script>
</body>
</html>
In this example text is written to the web page "Name is GMIT,Galway,Ireland.
In this example we can toggle the background color.
<html>
<head>
<title>Changing colour</title>
<script type="text/javascript">
function setColour()
{
var colour = window.document.bgColor;
switch(colour)
{
case "#ffffff" : window.document.bgColor ="#ff0000"; break;
case "#ff0000" : window.document.bgColor ="#00ff00"; break;
case "#00ff00" : window.document.bgColor ="#0000ff"; break;
default: window.document.bgColor="#ffffff";
}
}
</script>
</head>
<body>
<form>
<input type="button"
onClick="setColour()"
value="Toggle Colours">
</form>
</body>
</html>
This is a lovely simple bit of JavaScript that is very cool.
In the next post I will cover some more Function in JavaScript, feel free to leave comments or feed back.
Posts
