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

CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

BY: SITI NURBAYA ISMAILFACULTY of COMPUTER and MATHEMATICAL SCIENCES

Outline

How it works?

Introduction to JavaScript

Javascript Escape Sequences

JavaScript vs VBScript

Introduction to Client-Side Scripting


Remember this diagram?

How it works?

`

Client-side Server-side

Send request to the server

Return file to the client

Send another request to the server

Return required file to the client


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?


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?


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


If you write JavaScript in an HTML file, it must be written within:


<script type="text/javascript"></script>

<html> <head><title>My First JavaScript</title></head><body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>

<html><head><script type="text/javascript">alert("Hello IE");</script></head><body>Hi</body></html>

1

2

3


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)



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

}



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

Direct call Event


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>


Some events available in HTML- onclick- onchange- onmousemove- onmouseover- onmouseout- onmousepress- onmouseup- onkeypress- onkeyup- onsubmit



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:



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 websitedocument.write("Hello!");</script></body></html>


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>


How do you join together several statements?


…<script type="text/javascript">var x = "";var y = "";var z = "";// concatenate x, y, zvar name = x + " " + y + " " + z;// print out (display) namedocument.write("Name: " + name);</script>…


Arithmetic operators in JavaScript (let say, y = 5)


Operator Description Example Result

+ Addition x = y +2 x = 7

- Subtraction x = y – 2 x = 3

* Multiplication x = y * 2 x = 10

/ Division x = y / 2 x = 2.5

% Modulus (division reminder) x = y % 2 x = 1

++ Increment x = ++y x = 6

-- Decrement x = --y x = 4


Assignment operators (let say, x = 10, y = 5)


Operator Example Same As Result

= x = y x = 5

+= x += y x = x + y x = 15

-= x -= y x = x – y x = 5

*= x *= y x = x * y x = 50

/= x /= y x = x / y x = 2

%= x %= y x = x % y x = 0


Comparison operators (you will use these many times in your codes), let say x = 5


Operator Description Example

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


Logical operators, determine logic between variables or value (let say, x = 6, y = 3)


Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x == 5 || y == 5) is false

! not !(x == y) is true


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

1. x and y are declared as variables2. x = 4, this equation shows value of x is 4


Now, look at this JavaScript code


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


Declaring variables in JavaScript


// variables have been declared, but no valuesvar x;var name;

// variables have declared together with valuesvar x = 4; // numericvar name = “siti nurbaya"; // string


Declaring variables in JavaScript


var student_name = "HAZWANI";var student_number = 2012841448;var student_program = "CS110";


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

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"> </script>

Desired output:

They call it an "escape" character


More escape characters


Character Meaning

\b Backspace

\f Form feed

\n New line

\r Carriage return

\t Tab

\' Single quote or apostrophe (')

\" Double quote (")


VBScript is the default scripting language in html.

That’s why, JavaScript had to be declared in html.




JavaScript VBScript

Case-sensitive Not case-sensitive

Able to be executed on any web browsers

Some web browsers may have problems execute VBScript

<%@LANGUAGE=“JavaScript”%> <%@LANGUAGE=“VBScript”%>

JavaScript is open protocol VBScript is not

More complex Less complex

More powerful than VBScript Less powerful than JavaScript

Question?

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)

http://www.w3schools.com/js/default.asp

http://www.sitinur151.wordpress.com/

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

Documents

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