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>
<script language="javascript" type="text/javascript">
function displayDate()

<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>


Making note about the full stops

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



  • Votes
  • Oldest
  • Latest