1 / 31

CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

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.

hesper
Download Presentation

CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES

  2. Outline Introduction to Client-Side Scripting • How it works? • Introduction to JavaScript • Javascript Escape Sequences • JavaScript vs VBScript Page 2

  3. Introduction to Client-Side Scripting How it works? • Remember this diagram? Page 3

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. Introduction to Client-Side Scripting Introduction to JavaScript • Arithmetic operators in JavaScript (let say, y = 5) Page 17

  18. Introduction to Client-Side Scripting Introduction to JavaScript • Assignment operators (let say, x = 10, y = 5) Page 18

  19. 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

  20. Introduction to Client-Side Scripting Introduction to JavaScript • Logical operators, determine logic between variables or value (let say, x = 6, y = 3) Page 20

  21. 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

  22. 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

  23. 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

  24. Introduction to Client-Side Scripting Introduction to JavaScript • Declaring variables in JavaScript varstudent_name= "HAZWANI"; varstudent_number= 2012841448; varstudent_program = "CS110"; Page 24

  25. 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

  26. 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

  27. Introduction to Client-Side Scripting JavaScript Escape Sequences • More escape characters Page 27

  28. 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

  29. Introduction to Client-Side Scripting JavaScript vs VBScript Page 29

  30. Question? Page 30 Page 30

  31. 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

More Related