JavaScript Asst. Prof. Dr. Kanda Saikaew (krunapon@kku.ac.th) Dept. of Computer Engineering Khon Kaen University 1
Why Learn JavaScript? JavaScript is used in millions of Web pages to Validate forms Detect browsers Create cookies JavaScript is the most popular scripting language on the internet, and works in all major browsers Internet Explorer Mozilla Firefox 2
What is JavaScript? JavaScript was designed to add interactivity to HTML pages A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license 3
What Can a JavaScript Do? (1/3) JavaScrip Script t gives HTML designers rs a program rammi ming tool JavaScript is a scripting language with a very simple syntax! JavaScrip Script t can put dynamic c text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page 4
What Can a JavaScript Do? (2/3) JavaSc aScript ript can react to events A JavaScript can be set to execute when something happens, like when a user clicks on an HTML element JavaSc aScrip ript t can read and write HTML elements ts A JavaScript can read and change the content of an HTML element JavaSc aScrip ript t can be used to validate te data A JavaScript can be used to validate form data before it is submitted to a server 5
What Can a JavaScript Do? (3/3) JavaScrip Script t can be used to detect ct the visito itor' r's s browser A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScrip Script t can be used to create te cookie ies A JavaScript can be used to store and retrieve information on the visitor's 6 computer
How to Put a JavaScript into an HTML Page The HTML <script> tag is used to insert a JavaScript into an HTML page The word document. t.wri write te is a standard JavaScript command for writing output to a page Syntax document.write(“type what you want to write here”); 7
Example: js1.html <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> 8
Where to Put the JavaScript (1/2) Scrip ipts ts in the head section Scripts to be executed when they are called, or when an event is triggered, go in the head section When you place a script in the head section, you will ensure that the script is loaded before anyone uses it Example: <html> <head> <script type="text/javascript"> .... </script> 9 </head>
Prompt Box Example Source code Output <html> <head> <script type="text/javascript"> var text = prompt("Please enter text"); document.write("You have entered " + text); </script> </head> <body></body> </html> 10
Functions Source code Output <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html> 11
for...in Statement The for...in statement is used to loop (iterate) through the elements of an array or through the properties of an object. Syntax tax for (variable in object) { code to be executed } 12
for… in Sample Source code Output <html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Toyota"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write("<b>" + mycars[x] + "</b><br />"); } </script> </body> </html> 13
Events By using JavaScript, we have the ability to create dynamic web pages Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger JavaScript functions Events are normally used in combination with functions, and the function will not be executed before the event occurs! 14
Examples of Events A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke 15
onClick Sample Code Source code Source code (cont.) <html> <body> <head> <form> <script type="text/javascript"> <input type="button" value="Start var c=0; count!" var t; onClick="timedCount()"> function timedCount() <input type="text" id="txt"> { </form> document.getElementById('txt').value=c; <p>Click on the button above. c=c+1; The input field will count for t=setTimeout("timedCount()",1000); ever, starting at 0.</p> } </body> </script> </html> </head> 16
onClick Sample Output setTimeout ( expression , timeout ); where expression is the JavaScript code to run after timeout milliseconds have elapsed. 17
onload and onUnload The onload and onUnload events are triggered when the user enters or leaves the page The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information 18
onload Sample Source code Output <html> <head> <script type="text/javascript"> function detectBrowser() { var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); if ((browser=="Netscape" || browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); } else { alert("It's time to upgrade your browser!"); } } </script></head> <body onload="detectBrowser()"/> 19 </html>
onFocus, onBlur and onChange The onFocus, onBlur and onChange events are often used in combination with validation of form fields. Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()"> 20
onChange Sample Code <form name="go" onSubmit="return false;"> <select name="select" onChange="window.document.location=window.docume nt.go.select.value;"> <option value="#" selected>Please Select</option> <option value="http://www.microsoft.com">Microsoft</option> <option value="http://www.yahoo.com">Yahoo!</option> <option value="http://www.google.com">Google</option> </select> </form> 21
onChange Sample Output 22
onSubmit The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event <form method="post" action="xxx.htm" onsubmit="return checkForm()"> The checkForm() function will be called when the user clicks the submit button in the form If it returns true the form will be submitted, otherwise the submit will be cancelled 23
onMouseOver and onMouseOut onMouseOver and onMouseOut are often used to create "animated" buttons. Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected Example: <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false"> <img src="w3schools.gif" width="100" height="30"> </a> 24
onMouseOver and onMouseOut Sample Source code Output <html> <head> <script type="text/javascript"> function mouseOver() { document.b1.src ="b_blue.gif"; } function mouseOut() { document.b1.src ="b_pink.gif"; } </script> </head> <body> <a href="http://gear.kku.ac.th" target="_blank"> <img border="0" alt="Visit CoE KKU!" src="b_pink.gif" name="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a> </body> </html> 25
The try … catch Statement The try … catch statement allows you to test a block of code of errors The try block contains the code to be run The catch block contains the code to be executed if an error occurs Syntax try { // run some code here } catch (err) { // handle errors here } 26
Recommend
More recommend
