1 / 31

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT. BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES. Outline. Introduction to Client-Side Scripting. How it works? Introduction to JavaScript Javascript Escape Sequences

herdon
Download Presentation

CSC317 – INTERNET PROGRAMMING 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. CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ 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 FTMSK UiTM Pahang  Page 2

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

  4. Introduction to Client-Side Scripting How it works? • What is client-side scripting? • It is 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 FTMSK UiTM Pahang  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) FTMSK UiTM Pahang  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 FTMSK UiTM Pahang  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 FTMSK UiTM Pahang  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) FTMSK UiTM Pahang  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!"); } FTMSK UiTM Pahang  Page 9

  10. Introduction to Client-Side Scripting Introduction to JavaScript <html> <head> <script type="text/javascript"> function myFunction(){ var msg = "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(){ var msg = "Hello World!"; alert(msg); } </script> </head> <body> <form> <input type="button" name="button" value="Click Me!" onclick="myFunction()"> </form> </body> </html> Event Direct call FTMSK UiTM Pahang  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()"> FTMSK UiTM Pahang  Page 11

  12. Introduction to Client-Side Scripting Introduction to JavaScript • Some events available in JavaScript & HTML • onclick • onmousemove (Not in syllabus) • onmouseover (Not in syllabus) • onmouseout (Not in syllabus) • onmousepress (Not in syllabus) • onmouseup (Not in syllabus) • onkeypress (Not in syllabus) • onkeyup (Not in syllabus) • onsubmit (Not in syllabus) - onblur - onfocus - onload FTMSK UiTM Pahang  Page 12

  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> FTMSK UiTM Pahang  Page 13

  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"; var msg; msg = prompt(question, " "); document.write("Your name is:" + msg); </script> </body> </html> FTMSK UiTM Pahang  Page 14

  15. Introduction to Client-Side Scripting Introduction to JavaScript • How do you join together several statements? … <script type="text/javascript"> var x = "Mohd"; var y = "Ikhsan"; var z = "Md. Raus"; // concatenate x, y, z var name = x + " " + y + " " + z; // print out (display) name document.write("Name: " + name); </script> … FTMSK UiTM Pahang  Page 15

  16. Introduction to Client-Side Scripting Introduction to JavaScript • Arithmetic operators in JavaScript (let say, y = 5) FTMSK UiTM Pahang  Page 16

  17. Introduction to Client-Side Scripting Introduction to JavaScript • Assignment operators (let say, x = 10, y = 5) FTMSK UiTM Pahang  Page 17

  18. Introduction to Client-Side Scripting Introduction to JavaScript • Comparison operators (you will use these many times in your codes), let say x = 5 FTMSK UiTM Pahang  Page 18

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

  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 FTMSK UiTM Pahang  Page 20

  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 FTMSK UiTM Pahang  Page 21

  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 = "Eizan Aziz"; // string FTMSK UiTM Pahang  Page 22

  23. Introduction to Client-Side Scripting Introduction to JavaScript • Declaring variables in JavaScript var student_name = "Mohd Ikhsan Bin Md. Raus"; var student_number = 2006666027; var student_program = "CS770"; FTMSK UiTM Pahang  Page 23

  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 FTMSK UiTM Pahang  Page 24

  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 FTMSK UiTM Pahang  Page 25

  26. Introduction to Client-Side Scripting JavaScript Escape Sequences • More escape characters FTMSK UiTM Pahang  Page 26

  27. Introduction to Client-Side Scripting JavaScript Escape Sequences • Find the output: "\tTom said \"Hello to everyone!\"\nSo did Mary." FTMSK UiTM Pahang  Page 27

  28. Introduction to Client-Side Scripting JavaScript Escape Sequences • More escape characters FTMSK UiTM Pahang  Page 28

  29. Introduction to Client-Side Scripting JavaScript vs VBScript FTMSK UiTM Pahang  Page 29

  30. Question? FTMSK UiTM Pahang  Page 30 FTMSK UiTM Pahang  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 Bibliography (Book) Bibliography (Website) FTMSK UiTM Pahang  Page 31 FTMSK UiTM Pahang  Page 31

More Related