Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a...

Client Scripting 1

Client Scripting

Internet Systems Design

Client Scripting 2

Client Scripting

“A scripting language is a programming language that is used to manipulate, customize, and automate the facilities of an existing system.” -ECMA International

Client Scripting 3

What is JavaScript? JavaScript was designed to add interactivity to HTML

pages JavaScript is a scripting language - a scripting

language is a lightweight programming language A JavaScript is lines of executable computer code A JavaScript is usually embedded directly in HTML

pages JavaScript is an interpreted language (means that

scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a

license JavaScript is supported by all major browsers, like

Netscape and Internet Explorer Note: Much of this presentation is taken from: http://www.w3schools.com/js/js_intro.asp

Client Scripting 4

Are Java and JavaScript the same?

NO! Java and JavaScript are two completely

different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

From: http://www.w3schools.com/js/js_intro.asp

Client Scripting 5

What can a JavaScript Do? JavaScript gives HTML designers a programming tool - HTML

authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages

JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page

JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element

JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element

JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server, this will save the server from extra processing


Client Scripting 6

Client Scripting

Computations are performed on the client’s machine, which is why they cannot refer to a database on a server.

Client scripting can lessen the burden on servers and are particularly useful for such tasks as validating data before sending to server side to be processed.

They are browser-specific, so the same code may be interpreted differently depending on the browser being used.

Client Scripting 7

Client Scripting Languages

Netscape JavaScript Microsoft Jscript

– Developed after Netscape JavaScript ECMAScript

– Developed based on JavaScript and JScript

VBScript

Client Scripting 8

JavaScript

We will concentrate on JavaScript JavaScript was originally developed by

Netscape and first appeared in Netscape Navigator 2.0

Compatible with Internet Explorer starting with version 3.0 and other web browsers such as Mozilla

Client Scripting 9

JavaScript vs. Java

JavaScript is entirely different from the Java programming language

Java is a programming language developed by Sun

However, there are some syntax similarities between JavaScript and Java – It is possible to copy and paste some code from

one to the other

Client Scripting 10

Compiled Vs. Interpreted Compiled code – converted to machine

instructions ahead of time by compiling program.

Interpreted programs must be converted to machine instructions when run.

Compiled programs therefore generally faster than interpreted.

Usually easier to develop interpreted programs since no necessity to recompile program after changes made.

Client Scripting 11

Object Oriented

An Object can have:– Methods– Properties

Can use objects in JavaScript

Client Scripting 12

JavaScript

HTML is limited in functionality i.e. can only display text and images

JavaScript is an advanced scripting language that can be embedded within HTML to enhance a website

Most web browsers have built-in JavaScript interpreters

Client Scripting 13

Client-Side JavaScript Example 1

http://www.engineering.uiowa.edu/~ie181/JavaScript/HelloWorld.html

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Note Object

Client Scripting 14

Results of Example 1

Client Scripting 15

JavaScript

<SCRIPT Language="JavaScript"> or <SCRIPT type="text/javascript"> and </SCRIPT> are used to surround JavaScript code

The Script tags let the web browser know that whatever is inside the tag must be interpreted by the JavaScript interpreter

Client Scripting 16

Ending Statements With a Semicolon?

With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon.

Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.


Client Scripting 17

How to Handle Older Browsers Browsers that do not support scripts will display the

script as page content. To prevent them from doing this, we may use the HTML comment tag:<script type="text/javascript"> <!–

some statements //--> </script>

The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line.

Client Scripting 18

JavaScript JavaScript is also an object-oriented

programming language Portions of code are programmed as

objects with certain behaviors– In example 1, ‘document’ is the object,

while ‘write’ is the method to write the text– Objects can also have properties, which

we saw with the ActiveX property box

Client Scripting 19

JavaScript Reference

Refer to: http://www.w3schools.com/js/ Provides a complete reference to

JavaScript syntax

Client Scripting 20

Variables

A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value.

Rules for Variable names:– Variable names are case sensitive – They must begin with a letter or the underscore character

You can create a variable with the var statement:var strname = some value

You can also create a variable without the var statement:

strname = some value

Client Scripting 21

Arithmetic Operators

Operator Description Example Result + Addition x=2

x+2 4

- Subtraction x=2 5-x

3

* Multiplication x=4 x*5

20

/ Division 15/5 5/2

3 2.5

% Modulus (division remainder)

5%2 10%8 10%2

1 2 0

++ Increment x=5 x++

x=6

-- Decrement x=5 x--

x=4

From: http://www.w3schools.com/js/js_operators.asp

Client Scripting 22

JavaScript Objects, Methods, and Properties

Function Specifies a string of JavaScript code to be

compiled as a function Syntax

function name([param[, param[, ... param]]]) { statements}

To call the function:name();

Client Scripting 23

JavaScript Objects, Methods, and Properties

Math A built-in object that has properties and

methods for mathematical constants and functions

function getAbs(x) { return Math.abs(x)}

Client Scripting 24

JavaScript Statements

For Creates a loop that consists of three optional expressions,

enclosed in parentheses and separated by semicolons, followed

by a block of statements executed in the loop Syntax

for ([initial-expression]; [condition]; [increment-expression]) { statements}

Client Scripting 25


IF…Else Executes a set of statements if a specified condition is true. If

the condition is false, another set of statements can be executed.

Syntaxif (condition) { statements1}[else { statements2}]

Client Scripting 26


Var Declares a variable, optionally initializing it to a value.

Syntaxvar varname [= value] [..., varname [= value] ]

Client Scripting 27

JavaScript Comments

Syntax// comment text/* multiple line comment text */

Client Scripting 28

JavaScript Example 2

http://www.engineering.uiowa.edu/~ie181/JavaScript/SquareRoot.html

User enters a number in the “number” text box and clicks the “get square root!” button to call the function run_cal()

The Internet Explorer JavaScript interpreter performs the computation of the JavaScript and the corresponding square root is displayed to the user

Client Scripting 29

JavaScript Example 2 Code<html><HEAD>

<SCRIPT language="JavaScript">  </SCRIPT></HEAD>

<Body><P><FORM name="calc">Number: <INPUT TYPE="text" name="num1" size="5"> Square Root: <INPUT TYPE="text" name="the2root" size="15" Readonly><P><INPUT TYPE="button" value="Get Square Root!" onClick="run_cal()"></FORM></body>

</html>

Note: Script in header

Client Scripting 30

Example 2 Results

Client Scripting 31

Example 3

Age Finder JavaScript Example http://javascript.internet.com/clocks/age-finder.html

Code from http://javascript.internet.com/ is here:

http://www.engineering.uiowa.edu/~ie181/JavaScript/AgeFinder.html

Client Scripting 32

Note user data input code:

var mm = prompt('What month were you born in?','1-12');

var bday = prompt('What day were you born on?','1-31');

var byear = prompt('What year were you born in?','1975');

Client Scripting 33

Example 3 Results

Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a...

Documents

Transcript of Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a...