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

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

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

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

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?

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

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

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) Page 8 Introduction to JavaScript

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!"); }

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

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()">

Page 12 Introduction to Client-Side Scripting  Some events available in HTML -onclick -onmousemove -onmouseover -onmouseout -onmousepress -onmouseup -onkeypress -onkeyup -onsubmit Introduction to JavaScript

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!");

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);

Page 15 Introduction to Client-Side Scripting  How do you join together several statements? Introduction to JavaScript … var x = ""; var y = ""; var z = ""; // concatenate x, y, z var name = x + " " + y + " " + z; // print out (display) name document.write("Name: " + name); …

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

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

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 to x == 8 is false === is exactly equal to (value and type) x === 5 is true x === “5” is false != is not equal to x != 8 is true > is greater than x > 8 is false < is less than x < 8 is true <= is less than or equal to x <= 8 is true >= is greater than or equal to x >= 8 is false

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

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 x and y are declared as variables 2.x = 4, this equation shows value of x is 4

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

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 = “siti nurbaya"; // string

Page 23 Introduction to Client-Side Scripting  Declaring variables in JavaScript Introduction to JavaScript var student_name = "NURAFIQAH BINTI ZAINOL"; var student_number = ; var student_program = "CS10";

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

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

Page 26 Introduction to Client-Side Scripting  More escape characters JavaScript Escape Sequences CharacterMeaning \b Backspace \f Form feed \n New line \r Carriage return \t Tab \' Single quote or apostrophe (') \" Double quote (")

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

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)

Introduction to Client-Side Scripting  VBScript is the default scripting language in html.  That’s why, JavaScript had to be declared in html. Page 29 JavaScript vs VBScript

Page 30 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

FTMSK UiTM Pahang  Page 31 Question?

Page 32  Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.    Bibliography (Book) Bibliography (Website)