This first tutorial is a very simple one, we are going to make a button and have it check the time and display it on the screen.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript">
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Ozzu JavaScript</h1>
<p id="date">Click here to check the date from your computer.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Making note about the full stops
document.getElementById("date").innerHTML=Date();
The full stops between each element function is a + variable so this line would mean document+getElementById("date")+innerHTML=Date();
lines 1-3 General HTML header
line 4 Script tag where we have set the JavaScript language and text type JavaScript
line 5 First Function with displayDate()
line 6 { open the function
line 7 Document = page
getElementById("date") = requesting information using a variable
innerHTML=Date() = ID for HTML to run the function
line 8 } Close off the function | this section finished
line 9 closing of script
line 10 closing of head
line 11 Body Start
line 12 header1 title
line 13 p tag using id(date) requested the script above via the "date"
line 14 button tag made a button | onclick "displayDate()" is going to load the function from the script when clicked.
line 15-16 closing HTML
I have taken a simple script in Javascript and broken it down line by line to give starting script writers a better understanding of what they are looking at but if you can understand how a button works and works with the script on how to load a function then it is a good start.
Also i am more then happy to work on more complex tutorials if someone requests.
This page was published on It was last revised on