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?

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 -onchange -onmousemove -onmouseover -onmouseout -onmousepress -onmouseup -onkeypress -onkeyup -onsubmit Introduction to JavaScript

Introduction to Client-Side Scripting  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 JavaScript

Page 14 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 15 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 16 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 17 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 18 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 19 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 20 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 21 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 22 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 23 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 24 Introduction to Client-Side Scripting  Declaring variables in JavaScript Introduction to JavaScript var student_name = "HAZWANI"; var student_number = ; var student_program = "CS110";

Page 25 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 26 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 27 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 (")

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

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

Page 30 Question?

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