320 likes | 539 Views
CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT. BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES. Outline. Introduction to Client-Side Scripting. How it works? Introduction to JavaScript Javascript Escape Sequences JavaScript vs VBScript.
E N D
CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES
Outline Introduction to Client-Side Scripting • How it works? • Introduction to JavaScript • Javascript Escape Sequences • JavaScript vs VBScript Page 2
Introduction to Client-Side Scripting How it works? • Remember this diagram? Page 3
Introduction to Client-Side Scripting How it works? • What is client-side scripting? • refers to computer programs on the web, that are executed at the client-side, by the user’s web browser • Form which is made up from HTML code is no use, IF we cannot process the data gathered • Data gathered from form, can be processed using client-side scripting, instead of using server-side scripting Page 4
Introduction to Client-Side Scripting How it works? • What client-side scripting can do? • Form validation • Display messages (e.g. alert() function, etc) • Dynamically modify current document (e.g. document interface, etc) • Animated images • (Detect|React|Response) to event (e.g. rollover, mouseover, etc) • What are the limitation of client-side scripting? • It cannot access to the server (server-side may do!) • It cannot utilize or modify data residing on the host machine (database) Page 5
Introduction to Client-Side Scripting Introduction to JavaScript • JavaScript is a client-side scripting • Developed by Netscape • JavaScript != Java • You can write JavaScript in 2 ways: • Within the same file with your HTML file, OR • In external file with “.js” file extension Page 6
Introduction to Client-Side Scripting Introduction to JavaScript • If you write JavaScript in an HTML file, it must be written within: <html> <head> <title>My First JavaScript</title> </head> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> <script type="text/javascript"> <!-- Your script code //--> </script> 1 <html> <head> <script type="text/javascript"> alert("Hello IE"); </script> </head> <body> Hi </body> </html> 3 2 Page 7
Introduction to Client-Side Scripting Introduction to JavaScript • Where can you place your JavaScript code? • <head>…</head> • Direct statements like document.write("Hello") are executed at page load time • Any functions are called upon specific events • <body>…</body> • Statements are executed at page load time • What are the limitation of client-side scripting? • It cannot access to the server (server-side may do!) • It cannot utilize or modify data residing on the host machine (database) Page 8
Introduction to Client-Side Scripting Introduction to JavaScript • What is JavaScript function? • You can create function to perform specific task = user-defined function • Function can be executed: • Directly, OR • Through events function helloWorld(){ alert("Hello World!"); } Page 9
Introduction to Client-Side Scripting Introduction to JavaScript <html> <head> <script type="text/javascript"> function myFunction(){ varmsg = "Hello World!"; return (msg); } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()); </script> </body> </html> <html> <head> <script type="text/javascript"> function myFunction(){ varmsg = "Hello World!"; alert(msg); } </script> </head> <body> <form> <input type="button" name="button" value="Click Me!" onclick="myFunction()"> </form> </body> </html> Event Direct call Page 10
Introduction to Client-Side Scripting Introduction to JavaScript • What is an event? • Scripts that are executed when specific event occurs • Examples: • onclick (e.g. button, checkbox, radio button, etc) • onload (e.g. <body onload="">…</body>) <input type="button" name="button value="Click Me!" onclick="myFunction()"> <body onload="tq.mp3"> . . . </body> Page 11
Introduction to Client-Side Scripting Introduction to JavaScript • Some events available in HTML • onclick • onchange • onmousemove • onmouseover • onmouseout • onmousepress • onmouseup • onkeypress • onkeyup • onsubmit Page 12
Introduction to Client-Side Scripting Introduction to JavaScript • onChange example: • Build a web page with two text boxes. Make it so that when you change the inches field, the proper conversion to centimeters is written into the centimeters box, and vise versa. [1 inch is 2.54 centimeters]. A sample output is shown below: Page 13
Introduction to Client-Side Scripting Introduction to JavaScript • JavaScript code must be written within <script>…</script> • What is the output of the JavaScript code below? <html> <head><title></title></head> <body> <script type="text/javascript"> // display Hello! on the website document.write("Hello!"); </script> </body> </html> Page 14
Introduction to Client-Side Scripting Introduction to JavaScript • How do you join together several statements? • We called it concatenate, using plus (+) symbol <html> <head><title></title></head> <body> <script type="text/javascript"> var question = "Please enter your name"; varmsg; msg = prompt(question, " "); document.write("Your name is:" + msg); </script> </body> </html> Page 15
Introduction to Client-Side Scripting Introduction to JavaScript • How do you join together several statements? … <script type="text/javascript"> var x = ""; var y = ""; var z = ""; // concatenate x, y, z var name = x + " " + y + " " + z; // print out (display) name document.write("Name: " + name); </script> … Page 16
Introduction to Client-Side Scripting Introduction to JavaScript • Arithmetic operators in JavaScript (let say, y = 5) Page 17
Introduction to Client-Side Scripting Introduction to JavaScript • Assignment operators (let say, x = 10, y = 5) Page 18
Introduction to Client-Side Scripting Introduction to JavaScript • Comparison operators (you will use these many times in your codes), let say x = 5 Page 19
Introduction to Client-Side Scripting Introduction to JavaScript • Logical operators, determine logic between variables or value (let say, x = 6, y = 3) Page 20
Introduction to Client-Side Scripting Introduction to JavaScript • You have seen several JavaScript codes on the previous slides • Do you remember this? You did in math You are given two variables, x and y. if x = 4, Find y if y = x + 3 • x and y are declared as variables • x = 4, this equation shows value of x is 4 Page 21
Introduction to Client-Side Scripting Introduction to JavaScript • Now, look at this JavaScript code • *Notes: • ‘var’ is an optional, BUT, just place the ‘var’ every time you declare variables • DO NOT forget to end with semi-colon (;), at the end of JavaScript code Page 22
Introduction to Client-Side Scripting Introduction to JavaScript • Declaring variables in JavaScript // variables have been declared, but no values var x; var name; // variables have declared together with values var x = 4; // numeric var name = “sitinurbaya"; // string Page 23
Introduction to Client-Side Scripting Introduction to JavaScript • Declaring variables in JavaScript varstudent_name= "HAZWANI"; varstudent_number= 2012841448; varstudent_program = "CS110"; Page 24
Introduction to Client-Side Scripting JavaScript Escape Sequences • Working with strings, you'll notice there are some characters that always seem to break your program • E.g. apostrophes, ampersands, double quotes, etc • Need to use what is known as an "escape character“. • Enables you to output characters you wouldn't normally be able to, usually because the browser will interpret it differently to what you intended • backslash (\) is an escape character Page 25
Introduction to Client-Side Scripting JavaScript Escape Sequences • Look at this code: • Try it and fix the code by putting escape character, the backslash! • The output must be look like below: <script type="text/javascript"> <!-- document.write("They call it an "escape" character"); //--> </script> Desired output: They call it an "escape" character Page 26
Introduction to Client-Side Scripting JavaScript Escape Sequences • More escape characters Page 27
Introduction to Client-Side Scripting JavaScript vs VBScript • VBScript is the default scripting language in html. • That’s why, JavaScript had to be declared in html. Page 28
Introduction to Client-Side Scripting JavaScript vs VBScript Page 29
Question? Page 30 Page 30
Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/js/default.asp http://www.sitinur151.wordpress.com Bibliography (Book) Bibliography (Website) Page 31 Page 31