Download
1 / 20
200 likes | 369 Vues
In the Name of Allah ,The Most Gracious, The Most Merciful. King Khalid University College of Computer and Information System. Web pages Development & Programming. Chapter 5: JavaScript (js). Alaa Alwabel - 2011. What is Javascript?.
E N D
In the Name of Allah ,The Most Gracious, The Most Merciful King Khalid University College of Computer and Information System Web pages Development & Programming Chapter 5: JavaScript (js) Alaa Alwabel - 2011
What is Javascript? • JavaScript was designed to add interactivity to • HTML pages. • JavaScript is a scripting language: A scripting • language is a lightweight programming • language. • JavaScript is usually embedded directly into • HTML pages
What Can JavaScript do? JavaScript gives HTML designers a programming tool. JavaScript can react to events. JavaScript can read and write HTML elements. JavaScript can be used to detect the visitor's browser. JavaScript can be used to create cookies.
Example html> <head> <title>JavaScript Page</title> </head> <body> <script type="text/javascript"> document.write("<p>Hello world!</p>"); document.write(" <p>How are <br/> " + " <i>you</i>?</p> "); </script> <p>Here is some static text as well.</p> </body> </html> javascript.html
Handling browsers that do not support JavaScript • Browsers that do not support JavaScript will display the script as page content. To prevent them from doing this, we may use the HTML comment tag: • <script type="text/javascript"> • <!-- document.write("Hello World!") • //--> • </script>
Variables and If…Else Statement • Variables are used to store data. • Declare a Variable • You can create a variable with the var statement: • var strname = some value • You can also create a variable without the var statement: • strname = some value Example: var name=“Reem” or name =“ Reem” Example2: var x=5 or x=5
Conditional Statements • In JavaScript we have the following conditional statements: • if statement - use this statement if you want to execute some code only if a specified condition is true • if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false • if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed.
If…..else Statement • If you want to execute some code if a condition is true and another code if the condition is not true, use the if....else statement. • Syntax: • if (condition) { code to be executed if condition is true } Note: When comparing variables you must always use two equals signs next to each other (==)!
Popup Boxes • Alert Box • An alert box is often used if you want to make sure information comes through to the user. • When an alert box pops up, the user will have to click "OK" to proceed. • Syntax: • alert("sometext")
Alert Boxes <html> <head> <script type="text/javascript"> functiondisp_alert(){ alert("I am an alert box!!") } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_alert()" value="Display alert box" /> </div> </form> </body> </html javascript.html
Confirm Box • Confirm Box • A confirm box is often used if you want the user to verify or accept something. • When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. • If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. • Syntax: • confirm("sometext")
Confirm Box <html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button") if (r==true) { document.write("You pressed OK!") } else { document.write("You pressed Cancel!") } } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_confirm()" value="Display confirm box" /> </div> </form> </body> </html javascript.html
Prompt Box • prompt box is often used if you want the user to input a value before entering a page. • When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. • If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Prompt Box <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?") } } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_prompt()" value="Display prompt box" /> </div> </form> </body> </html javascript.html
JavaScript Events • By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. • Examples of events: • A mouse click • A web page or an image loading • Mousing over a hot spot on the web page • Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!
onload and onUnload • The onload andonUnload events are triggered when the user enters or leaves the page. <html> <head> <title>Hello/Goodbye page</title> <script type="text/javascript"> function Hello() { globalName=prompt("Welcome to my page. " + "What is your name?",""); } function Goodbye() { alert("So long, " + globalName + " come back real soon."); } </script> </head> <body onload="Hello();" onunload="Goodbye();"> <p>Whatever text appears in the page.</p> </body> </html>
onMouseOver and onMouseOut <html> <head> </head> <body> <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');"> <imgsrc="w3schools.gif" width="100" height="30"> </a> </body> </html> javascript.html
Js- Guideline • JavaScript is case sensitive • JavaScript ignores extra spaces • You can add comments to your script by using two slashes //. • break up a code line within a text string with a backslash • Ex. document.write("Hello \ World!")
