Javascript - introduction

Javascript examples I. : on the net:

Examples on Media college.com | document.write

Javascript tutorial: W3schools,

Javascript local examples: picture preview, traffic lights, rewrite innerHTML (or example from w3school: ).

From this web page: Javascript in forms. Address form elements (see lower).

Advanced: Javascript canvas, Javascript "use widget", Redirect, reload, timing (intended to be topics of the last two lectures).

Javascript example II.

Declaration of a function can be in the head of the page (but is possible in the body too).

<HTML>
 <HEAD>
 <TITLE>Some page title</TITLE>
 <script>
    function changeImg(n,url)
   {
      document.getElementById(n).src=url; 
  //  window.alert(url+"\n"+n);
   }
 </script>


</HEAD>

......

</HTML>

Javascript is hierarchical (object-oriented). Compare red text in the next line and in the function calling:

document.getElementById('picture-name').src

Note: in older versions of Mozilla, the blue part was not required.

<img src="6a.gif" border="0" id="obr6"
  onMouseover="changeImg('obr6','6b.gif')"
  onMouseOut="changeImg('obr6','6a.gif')"
  onClick="changeImg('obr6','6b.gif')">

Warning: name for an object (the red text in the previous example, "id=" - in previous versions of html, the "name=" parameter had been used, instead of "id=") should fulfill all rules for a variable name, for example starts with a letter and countains only letters and numbers. Passing the name to the function is marked in green.

Warning 2: Javascript itself (text between <script> and </script>) is a case-sensitive, it means you have to write names of variables and functions with respect on small and capital letters (no conversion included, so - for example - Img1 is diffrent from IMG1 and even from img1).

Note: There are no <script> tag in a body. Setting up an event task for a html object is not a script creation.

Note 2: For such simple task, the Javascript function don't need to be declared at all. A simple command can be written directly to the event handler. See example on another page for more info.

Picture list (use right mouse button to save a copy):

Another example: Javascript in forms. This task has been separated, to allow simple source code showing, but it is important part of this lecture (in a Czech Firefox: Zobrazit zdrojovy kod). Another example how to address form elements.

More comments: Try the Javascript Debugger. For the Firefox, you can select Debug Console:

note: parts of a java-script can be packed. You can use the http://www.strictly-software.com/unpack-javascript.aspx web page to decode it.