Play with html using javascript
Javascipt can be very fruitful and flexible when it comes to modifying webapges dynamically (though client side). Javascript can be helpful in creating response to browser events like mouseup, mouseover etc, veryfying of form values prior to submitting them, changing style and value of html elements dynamically.
Examples i disscuss here are being user by me in developing Paint Chat !! So here I go..
You can write javascript functions and code in section as:
<script type="text/javascript">function test(){
alert("test javascript");}</script>
Action on events:
Example of events can be mouseclick, keystroke, submitting form etc.With onload()
Now init() function will be called when this html page is being loaded.<body onload="init()">
For links, javascript function can be evoked when clicking, mouseover over links like
Now function replay() will be called when Refresh! is clicked. For input text box<a href="javascript:replay()">Refresh ! </a>
Now whenever content of textbox changes the function suggest() will be called. It can be useful when feature like google suggest has to be implemented or so.<input type="text" size="30" id="search" onchange="suggest()">;
On submitting forms:
So whenever this form is being submitted checkForm() function will be called and can be helpful in verifying values of form elements.<form method="post" action="some.php" onsubmit="return checkForm()">
onMouseOver and onMouseOut:
Now when mouse is over image fade() function will be called and can be used for animate and styling purposes.<a href="http://www.buard.blogspot.com" onmouseover="fade()">
<img src="image.gif"> </a>
Registering of events
A simple way can be:Conside the html code :
<div id="sample"> ..... some... html..text.. </div> Now using javascript you can register event for this div by:
Now whenever mouseover ocours over this div html element sampleMouseDown() function will be called. Events can also be registered using addEventListener() . Find more information baout it here:Advanced event registration modelsvar div_sample = document.getElementById('sample');
div_sample.onmousedown=sampleMouseDown ;
Modify Style and values for html elements
Within some javascript function, you can first get the element object by getElementByID() getElementsByName() for example conside the javascript code:document.getElementById("colorcode").innerHTML = "#000000";
document.getElementById("bgtest").style.backgroundColor= "green";
Some other tweaks which were useful :
- Calling some function repeatedly with some time interval, consider javascript code:
var intervalID = setInterval(drawCurve, 100);
clearInterval(intervalID);
- You can use
setTimeout(drawCurve,100)function to delay drawCurve() execution for a specified time period(100ms).
- Calling a php function inside javascript:
var testImg = new Image();
testImg.src = "form.php?name=form_value";
Some links:
- W3Schools: Javascript Examples
- MDC: Javascript
- DOM Design Tricks
- The events
- Javascript Basic for Prototyping
Labels:
programming,
tutorial,
web2.0,
webdev
Add to: 
Stumble It!
1 comment:
Hi! I've been reading your blog from the beginning..Thank you for your wonderful work! Keep up the good work.
Post a Comment