events and event handling - جامعة آل البيت is an event handler that occurs when the user...
TRANSCRIPT
Events and Event Handling
onChange is an Event Handler that occurs when the text in a select, text, or textArea form item is altered by the user, or the user has moved the input focus to another element. Example:<INPUT TYPE="Text“ VALUE="Change me"
onChange="alert('You chnaged the contents')">
<SCRIPT>var text = "Hello World";function Hello() {alert(text);}</SCRIPT><INPUT TYPE="Text" VALUE="Hello Word"STYLE="background:gold"onChange="Hello() ">
<body><h1>Inches/Centimeter Converter</h1><form><p>Centimeters:<input type="text" name="cm"onchange="this.form.inches.value=Math.round((this.value / 2.54)*1000)/1000"></p><p>Inches:<input type="text" name="inches"onchange="this.form.cm.value = Math.round((this.value* 2.54)*1000)/1000"></p></form></body>
Output
<P>This form will convert your weight in Kilogrammes into Pounds. <BR></P><FORM name="Calculator"><P>Enter your weight in Kilogrammes here:<INPUT TYPE="text value=" " size=4 STYLE="color:red"onchange="KgWeight = document.Calculator.Weight.value" name=Weight> and then click the button. </P><P><BR><INPUT onclick="document.Calculator.Convert.value = (2 * (KgWeight) + (KgWeight)/5) ;document.Calculator.Convert.style.background='blue';"type=button value="Calculate ..."></P><P>Your weight in Pounds is:<INPUT type="TEXT" name=Convert size=6 value=""STYLE="color:white"> </P></FORM><HR color=red size=7>
Output
onFocus is an Event Handler that occurs when the user selects a text, textarea, or select form item. In other words, the user focuses on that item.
onBlur is the reverse. Example:<INPUT type="text" value="focusOnMe" onFocus="alert('you are off focus');">
focus:<input type="text" name="focus" value="you are on focus“ onFocus="alert('you are on focus');"> <BR>Off Focus:<input type="text" name="blur" value="you are off focus“ onblur="alert('You are off focus');">
<center><form name="capsForm">Type in LowerCase:<input type="text" name="capsLower" size=40 value=""onBlur="this.value=this.value.toUpperCase();"><br>Type in UpperCase:<input type="text" name="capsUpper" size=40 value=""onBlur="this.value=this.value.toLowerCase();"></form></center>
<script>function FahrToCelsius(tempInFahr) {return Math.round((5/9)*(tempInFahr - 32)*100)/100;}
</script> <form name="BoxForm">Temperature in Fahrenheit:<input type="text" name="Fahr" size=10 value="0"
onChange="document.BoxForm.Celsius.value = FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));">
<tt>----></tt> <input type="text" name="Celsius" size=10 value=""
onFocus="blur();"> in Celsius </form>
onMouseOver is an Event Handler used within the hypertext link that reacts when the user passes a mouse pointer over the link text.
There are also: onMouseOut ; onMouseDown; onMouseUpExample:<input type=button name=btn1 value= "ClickToTestColors"onmouseover="this.style.backgroundColor='gold'"
onmouseout="this.style.backgroundColor= 'skyblue'">
<script>function ok(colorName){document.bgColor=colorName;alert("The hexadecimal Value of the color is\n"+document.bgColor);}</script><A href="#" onMouseOver="ok('red');"> red</A> <br><A href="#" onMouseOver="ok('maroon');"> maroon</A> <br><A href="#" onMouseOver="ok('cyan');"> cyan</A><br><A href="#" onMouseOver="ok('lime');"> lime</A><br> <A href="#" onMouseOver="ok('magenta');"> magenta</A> <br><A href="#" onMouseOver="ok('gold');"> gold</A><br><A href="#" onMouseOver="ok('green');"> green</A><br><A href="#" onMouseOver="ok('orange');"> orange</A>
<A href="#"onMouseOver="document.myImage.src='1.gif'"onMouseOut="document.myImage.src='john.gif'"><img src="jordan.gif" name="myImage" width=85 height=85 border=0></A>
onLoadMouse is off focus
Mouse is overthe flag Mouse is out
<script>function timer() {setTimeout("alert('Time is up!')", 3000);}</script>The Alert statment will be displayed after 3 second from the<br> moment you focus the mouse over the button<form><input type="button" value="Timer" Style="color:blue;background=gold;font-size=35; width=150; height=75” onMouseOver="timer()"></form>
MouseOver
Output
<script>function change(){var Article = document.form1.ok.value;switch(Article){case "test":document.form1.ok.value = “You Have Change The Value";break;}}</script><form name=form1><input type=button name="ok" value= "test"onmouseover="change();"></form>
MouseOver
<A HREF = "" onMouseOver="style.fontSize='200' ;"><font color=red>0 </A>
MouseOver
Method window.open()<SCRIPT LANGUAGE="javascript">window.open ('titlepage.html', 'newwindow', 'height=100,width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no')</SCRIPT>window.open is the JS command to open a new browser window. 'titlepage.html' is the name of the page that will fill the window. 'newwindow' is a name attribute; string specifying the name of the new window. This name can be used in the same constructions as the frame name provided in the frame tag within a frameset <FRAME NAME=name .. .... > .For example, you can use hyperlinks of the form <a target=name href="page.htm“> ،and the hyperlink destination page will be displayed in your new window.height=100 denotes the height of the window in pixels.
width=400 denotes the width of the window in pixels. toolbar=no denotes if there will be a toolbar on the newly opened window. Set this to yes if you want one - no if you don't.menubar=no denotes if there will be a menubar. Set this to yes if you want one - no if you don't.scrollbars=no denotes if there will be scrollbars or not. resizable=no denotes if the user can change the size of the window by dragging or not. location=no denotes if there will be a location bar on the newly opened window. Use yes and no again.
The location bar is the space at the top of the browser window where the page URL is displayed.directories=no denotes if there will be a directories bar on the new window. Use yes and no.
This is the bar at the top of the browser window that has the bookmarks and such.status=no denotes if there will be a status bar. Use yes and no.
<FORM NAME="myform"><INPUT TYPE="button"NAME="Button1" VALUE=“MoveheMouseOverToSeeMyTable!"onMouseOver="window.open ('ok13.html', 'newWin','left=50, top=50,scrollbars=no,status=no,width=400, height=300, toolbar=no')"></FORM>
<script>function openWin() { myWin= open("", "displayWindow", "width=300,height=200,status=yes,toolbar=yes,menubar=yes");// open document for further outputmyWin.document.open();// create documentmyWin.document.write("<html><head><title>On-the-fly");myWin.document.write("</title></head><body>");myWin.document.write("<center><font size=+3 color=blue>");myWin.document.write("This HTML-document has been
created ");myWin.document.write("with the help of JavaScript!");myWin.document.write("</font></center>");myWin.document.write("</body></html>");myWin.document.close(); }
</script><body><form><input type=button value="On-the-fly" onMouseOver="openWin()"></form></body>
Output
MouseOver
<h2> pictures Flibbing</h2><A HREF="#"onMouseOver="document.images[0].src='humming.gif'"onMouseOut="document.images[0].src='cartoon.gif'"><IMG SRC="mug.PNG" BORDER=0></A>
<body bgColor = "yellow"><h2>image Flipping</h2><a href = "" onmouseover = "document['ok'].src = 'jordan.gif';"onmouseout = "document.images['ok'].src = 'hi.gif';" ><img src = "1.gif" border=15 width="100" name = "ok"></a></body>
<h2>A Simple Heading</h2><p>This is a very simple web page.</p><p>Pick any item...</p><font size="5"> <ul><li onmouseover="this.style.color='green'"onmouseout="this.style.color='blue'">Pick me! </li><li onmouseover="this.style.color='red'"onmouseout="this.style.color='yellow'">No, pick me! </li><li onmouseover="this.style.color='magenta'"onmouseout="this.style.color='maroon'">No, no -- I'm the one!</li></ul>
Output
<SCRIPT>function myfunction(color){document.bgColor=color }</SCRIPT><A HREF="#" onmouseover="myfunction('red')">RED</A><BR><A HREF="#" onmouseover="myfunction('blue')">BLUE</A><BR><A HREF="#" onmouseover="myfunction('black')">BLACK</A><BR><A HREF="#" onmouseover="myfunction('yellow')">YELLOW</A><BR<A HREF="#"
onmouseover="myfunction('skyblue')">SkyBlue</A><BR><A HREF="#"
onmouseover="myfunction('darkgreen')">DarkGreen</A><BR><A HREF="#" onmouseover="myfunction('maroon')">Maroon</A><BR><A HREF="#" onmouseover="myfunction('cyan')">CYAN</A><BR><A HREF="#" onmouseover="myfunction('pink')">PINK</A><BR><A HREF="#" onmouseover="myfunction('gold')">Gold</A><BR><A HREF="#" onmouseover="myfunction('lime')">Lime</A><BR>
Output
<SCRIPT>function getColor(color) { var myColor= new Array(5) myColor[0]="lime"; myColor[1]="orange"; myColor[2]="lightblue"; myColor[3]="pink"; myColor[4]="yellow"; document.bgColor=myColor[color]; me.style.backgroundColor=myColor[myColor.length-color-1];} </SCRIPT> <p ID="me"> Change the background color!<br>and also my color <p><FORM> <INPUT type="button" value="Lime" onMouseOver="getColor(0)"> <br><INPUT type="button" value="Orange" onMouseOver="getColor(1)"> <br><INPUT type="button" value="Light Blue" onMouseOver="getColor(2)"><br> <INPUT type="button" value="Pink" onMouseOver="getColor(3)"> <br><INPUT type="button" value="yellow" onMouseOver="getColor(4)">
/FORM
Output
<script>function mouse(){window.document.ok.text1.focus();}function mouseX(){window.document.ok.text1.blur();}</script><form name="ok"><input type="button“ name="buttonX"value="MoveTheMouseOverToFocusAndOffToBlur” onMouseOver="mouse()"onMouseOut="mouseX()"><br><br><br><input type="text" name="text1" value="Hey, focus on me">
onMouseOver onMouseOut
Output
<SCRIPT language=JavaScript>function subwindow(filename) {NewWindow = window.open(filename, 'win', 'left = 300, top = 300, width = 150, height = 200');}filename1 = “ok“htmlfilename2 = "hi.gif"filename3 = "1.gif" </SCRIPT><INPUT onMouseover=subwindow(filename1); type=button value=Image1><br><INPUT onMouseover=subwindow(filename2); type=button value=Image2><br><INPUT onMouseover=subwindow(filename3); type=button value=Image3><HR size=4>
z
onLoad is an Event Handler that acts to trigger a function when the page loads. The command is placed in the <body… >onUnload is an Event Handler that is placed inside the <body… > command of the HTML document and either calls for a function or contains the command to stop a function from running when the user unloads, or leaves, the pageExample:<script>function msg(){ window.status="Hello Mr., what can I do for you?" ;} </script> <body onLoad=msg(); >Hi</body>
<script>function message1() {alert("Most Welcome dear Friend");}function message2() { alert("Good Bye..");}</script><body onLoad=message1() ; onUnLoad=message2() ; ><h3>You are welcome to my homesite<br>I hope you will enjoy visiting us..............</body>