This is Day 8 of the javascript and jquery tutorial. To start we would like to sum up events programming in Javascript in 5 steps.
1. Create a User Interface in web pages the user interface is usually in made in html and css
2. Setup events that the program should respond to. Like open window, close window, mouseclick etc..
3. Write a function for each of the events. That does whatever need to happen.
4. You might want to get information from the user using form elements.
5. Ouptut the information to the screen. Or writing back to the document.
The first step we are going to setup the html. Copy the code below and put it in a html file. Below is a sample html file (try to use firefox or I8 in quirks mode) load it in your browser and try it. Brief explanation follows after.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>innerHtml.html</title> </head> <body> <h1>Inner HTML Demo</h1> <form action = ""> <fieldset> <label>Please type your name</label> <input type = "text" id = "txtName" /> <button type = "button" onclick = "sayHi()"> Click Me </button> </fieldset> </form> <div id = "divOutput"> Watch this space. </div> </body> </html> |
Most of the page is a form. A fieldset is used to contain form elements. Normally input elements should be inside a kind of block elements. Fieldset is the natural choice for this.
There is a textfield named “txtName”. The second element is a button, it’s not necessary to give the button an ID (as it it not called in the code). The Button has an onclick() event instead.
The button’s onclick event is named “sayHi()” As of yet we have not written the code yet for the that function.
Oke to sum things up a bit the above html code nicely lays out how this program is going to run. You knoe you will need a function called “sayhi()” and this function will read text from the” txtName” field and write to the “txtOuput” field.
Now next step is to get the XHTML to communicate with the Javascript. The “txtName” field has to be read from the Javascript. The solution to that problem is the “ getElementById() method, which does exactly that. What this method does is search through the DOM and returns an object with the requested ID.
Writing to the document. Form elements are great for getting input from the user, but they are not ideal for out put. Instead of using a form field the DOM supports a much better technique. The “innerHtml” property. This property can be read from and written to. The “innerHtml describes the html code inside and element eg. a div tag. There are some exceptions like single or self closing html tags like “img” or “input” which can not be accessed with this property.
The javascript code for modifying the inner HTML is pretty easy. Here it is below followed by some notes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type = "text/javascript"> //<![CDATA[ //from innerHTML.html function sayHi(){ txtName = document.getElementById("txtName"); divOutput = document.getElementById("divOutput"); name = txtName.value; divOutput.innerHTML = "<em>" + name + "<\/em>"; divOutput.innerHTML += " is a very nice name."; } //]]> </script> |
In the code above the first step is to extract the data from the form field (user input ) and store that in a variable(memory location). Also the DOM element has been represented as the variable “divOutput”.
Lastly an explanation of the “innerHtml “ property allows you to change the HTML displayed by the div. You can put any kind of html code you want into the innerHtml property even html tags.
Here is the final code put altogether:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>innerHtml.html</title> <script type = "text/javascript"> //<![CDATA[ //from innerHTML.html function sayHi(){ txtName = document.getElementById("txtName"); divOutput = document.getElementById("divOutput"); name = txtName.value; divOutput.innerHTML = "<em>" + name + "<\/em>"; divOutput.innerHTML += " is a very nice name."; } //]]> </script> </head> <body> <h1>Inner HTML Demo</h1> <form action = ""> <fieldset> <label>Please type your name</label> <input type = "text" id = "txtName" /> <button type = "button" onclick = "sayHi()"> Click Me </button> </fieldset> </form> <div id = "divOutput"> Watch this space. </div> </body> </html> |
