1. CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES

2. FTMSK UiTM Pahang  Page 2 Outline  How it works?  Introduction to JavaScript  Javascript Escape Sequences  JavaScript vs VBScript Introduction to Client-Side Scripting

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

4. FTMSK UiTM Pahang  Page 4 Introduction to Client-Side Scripting  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 How it works?

5. FTMSK UiTM Pahang  Page 5 Introduction to Client-Side Scripting  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) How it works?

6. FTMSK UiTM Pahang  Page 6 Introduction to Client-Side Scripting  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 Introduction to JavaScript

7. FTMSK UiTM Pahang  Page 7 Introduction to Client-Side Scripting  If you write JavaScript in an HTML file, it must be written within: Introduction to JavaScript <!-- Your script code //--> My First JavaScript document.write("Hello World!"); alert("Hello IE"); Hi 1 2 3

8. FTMSK UiTM Pahang  Page 8 Introduction to Client-Side Scripting  Where can you place your JavaScript code? - … -Direct statements like document.write("Hello") are executed at page load time -Any functions are called upon specific events - … -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) Introduction to JavaScript

9. FTMSK UiTM Pahang  Page 9 Introduction to Client-Side Scripting  What is JavaScript function? -You can create function to perform specific task = user-defined function -Function can be executed: -Directly, OR -Through events Introduction to JavaScript function helloWorld(){ alert("Hello World!"); }

10. FTMSK UiTM Pahang  Page 10 Introduction to Client-Side Scripting Introduction to JavaScript function myFunction(){ var msg = "Hello World!"; return (msg); } document.write(myFunction()); function myFunction(){ var msg = "Hello World!"; alert(msg); } <input type="button" name="button" value="Click Me!" onclick="myFunction()"> Direct call Event

11. FTMSK UiTM Pahang  Page 11 Introduction to Client-Side Scripting  What is an event? -Scripts that are executed when specific event occurs -Examples: -onclick (e.g. button, checkbox, radio button, etc) -onload (e.g. … ) Introduction to JavaScript <input type="button" name="button value="Click Me!" onclick="myFunction()">

12. FTMSK UiTM Pahang  Page 12 Introduction to Client-Side Scripting  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) Introduction to JavaScript - onblur - onfocus - onload

13. FTMSK UiTM Pahang  Page 13 Introduction to Client-Side Scripting  JavaScript code must be written within …  What is the output of the JavaScript code below? Introduction to JavaScript // display Hello! on the website document.write("Hello!");

14. FTMSK UiTM Pahang  Page 14 Introduction to Client-Side Scripting  How do you join together several statements? -We called it concatenate, using plus (+) symbol Introduction to JavaScript var question = "Please enter your name"; var msg; msg = prompt(question, " "); document.write("Your name is:" + msg);

15. FTMSK UiTM Pahang  Page 15 Introduction to Client-Side Scripting  How do you join together several statements? Introduction to 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); …

16. FTMSK UiTM Pahang  Page 16 Introduction to Client-Side Scripting  Arithmetic operators in JavaScript (let say, y = 5) Introduction to JavaScript OperatorDescriptionExampleResult + Addition x = y +2x = 7 - Subtraction x = y – 2x = 3 * Multiplication x = y * 2x = 10 / Division x = y / 2x = 2.5 % Modulus (division reminder) x = y % 2x = 1 ++ Increment x = ++yx = 6 -- Decrement x = --yx = 4

17. FTMSK UiTM Pahang  Page 17 Introduction to Client-Side Scripting  Assignment operators (let say, x = 10, y = 5) Introduction to JavaScript OperatorExampleSame AsResult =x = yx = 5 +=x += yx = x + yx = 15 -=x -= yx = x – yx = 5 *=x *= yx = x * yx = 50 /=x /= yx = x / yx = 2 %=x %= yx = x % yx = 0

18. FTMSK UiTM Pahang  Page 18 Introduction to Client-Side Scripting  Comparison operators (you will use these many times in your codes), let say x = 5 Introduction to JavaScript OperatorDescriptionExample == is equal tox == 8 is false === is exactly equal to (value and type)x === 5 is true x === "5" is false != is not equal tox != 8 is true > is greater thanx > 8 is false < is less thanx < 8 is true <= is less than or equal tox <= 8 is true >= is greater than or equal tox >= 8 is false

19. FTMSK UiTM Pahang  Page 19 Introduction to Client-Side Scripting  Logical operators, determine logic between variables or value (let say, x = 6, y = 3) Introduction to JavaScript OperatorDescriptionExample && and(x 1) is true || or(x == 5 || y == 5) is false ! not!(x == y) is true

20. FTMSK UiTM Pahang  Page 20 Introduction to Client-Side Scripting  You have seen several JavaScript codes on the previous slides  Do you remember this? You did in math Introduction to JavaScript You are given two variables, x and y. if x = 4, Find y if y = x + 3 1.x and y are declared as variables 2.x = 4, this equation shows value of x is 4

21. FTMSK UiTM Pahang  Page 21 Introduction to Client-Side Scripting  Now, look at this JavaScript code Introduction to JavaScript var x, y; // variable declaration in JavaScript x = 4; // set value of x y = x + 3; // the equation to be solved *Notes: 1.‘ var ’ is an optional, BUT, just place the ‘ var ’ every time you declare variables 2.DO NOT forget to end with semi-colon ( ; ), at the end of JavaScript code

22. FTMSK UiTM Pahang  Page 22 Introduction to Client-Side Scripting  Declaring variables in JavaScript Introduction to 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

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

24. FTMSK UiTM Pahang  Page 24 Introduction to Client-Side Scripting  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 JavaScript Escape Sequences

25. FTMSK UiTM Pahang  Page 25 Introduction to Client-Side Scripting  Look at this code:  Try it and fix the code by putting escape character, the backslash!  The output must be look like below: JavaScript Escape Sequences <!-- document.write("They call it an "escape" character"); //--> Desired output: They call it an "escape" character

26. FTMSK UiTM Pahang  Page 26 Introduction to Client-Side Scripting  More escape characters JavaScript Escape Sequences CharacterMeaning \bBackspace \fForm feed \nNew line \rCarriage return \tTab \'Single quote or apostrophe (') \"Double quote (")

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

28. FTMSK UiTM Pahang  Page 28 Introduction to Client-Side Scripting  More escape characters JavaScript Escape Sequences CharacterMeaning \\Backslash (\) \XXX XXX is an octal number (between 0 and 377) that represent the Latin-1 character equivalent. For example \251 is the octal code for the copyright symbol. \xXX XX is a hexadecimal number (between 00 and FF) that represent the Latin-1 character equivalent. For example \xA9 is the hexadecimal code for the copyright symbol. \uXXXX XXXX is a hexadecimal number (between 00 and FF) that represent the Unicode character equivalent. For example \u00A9 is the hexadecimal code for the copyright symbol. (Note: Unicode is only supported by JavaScript 1.3)

29. FTMSK UiTM Pahang  Page 29 Introduction to Client-Side Scripting JavaScript vs VBScript JavaScriptVBScript Case-sensitiveNot case-sensitive Able to be executed on any web browsers Some web browsers may have problems execute VBScript JavaScript is open protocolVBScript is not More complexLess complex More powerful than VBScriptLess powerful than JavaScript

30. FTMSK UiTM Pahang  Page 30 Question?

31. FTMSK UiTM Pahang  Page 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.w3schools.com/js/default.asp Bibliography (Book) Bibliography (Website)