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.
Syntaxif (condition) { statements1}[else { statements2}]
Client Scripting 26
JavaScript Statements
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"> <!--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