ClientScripting

coordinatedcapableSoftware and s/w Development

Nov 4, 2013 (4 years and 9 days ago)

76 views

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


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

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.

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

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

JavaScript Statements


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.



Syntax

if (
condition
) {


statements1

}

[else {


statements2

}]

Client Scripting

26

JavaScript Statements


Var


Declares a variable, optionally initializing it to a value.


Syntax

var
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/Jav
aScript/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">

<!
--

function run_cal()

{


var numb1=document.calc.num1.value;


var the_ans=Math.sqrt(numb1);


if (numb1<0)


the_ans="No Negatives";


document.calc.the2root.value=the_ans;

}

//
--
>

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