Internet Systems Design

1
Client Scripting

• Internet Systems Design

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

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
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
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("lth1gt" name "lt/h1gt") 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
6
Client Scripting

• Computations are performed on the clients
  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.

7
Client Scripting Languages

• Netscape JavaScript
• Microsoft Jscript
• Developed after Netscape JavaScript
• ECMAScript
• Developed based on JavaScript and JScript
• VBScript

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

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

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.

11
Object Oriented

• An Object can have
• Methods
• Properties
• Can use objects in JavaScript

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

13
Client-Side JavaScript Example 1

• http//www.engineering.uiowa.edu/ie181/JavaScript
  /HelloWorld.html
• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("Hello World!")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

Note Object
14
Results of Example 1
15
JavaScript

• ltSCRIPT Language"JavaScript"gt or ltSCRIPT
  type"text/javascript"gt and lt/SCRIPTgt 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

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
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
• ltscript type"text/javascript"gt
• lt!
• some statements
• //--gt
• lt/scriptgt
• The two forward slashes at the end of comment
  line (//) are a JavaScript comment symbol. This
  prevents the JavaScript compiler from compiling
  the line.

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

19
JavaScript Reference

• Refer to http//www.w3schools.com/js/
• Provides a complete reference to JavaScript syntax

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

21
From http//www.w3schools.com/js/js_operators.asp
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()

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)

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
• Syntaxfor (initial-expression condition
  increment-expression)    statements

25
JavaScript Statements

• IFElse
• 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)    statements1else
     statements2

26
JavaScript Statements

• Var
• Declares a variable, optionally initializing it
  to a value.
• Syntaxvar varname value ..., varname
  value

27
JavaScript Comments

• Syntax// comment text/ multiple line comment
  text /

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

29
JavaScript Example 2 Code

• lthtmlgt
• ltHEADgt
• ltSCRIPT language"JavaScript"gt
• lt!--
• function run_cal()
• var numb1document.calc.num1.value
• var the_ansMath.sqrt(numb1)
• if (numb1lt0)
• the_ans"No Negatives"
• document.calc.the2root.valuethe_ans
• //--gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBodygt

Note Script in header
30
Example 2 Results
31
Example 3

• Age Finder JavaScript Example http//javascript.in
  ternet.com/clocks/age-finder.html
• Code from http//javascript.internet.com/ is
  here
• http//www.engineering.uiowa.edu/ie181/JavaScript
  /AgeFinder.html

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

33
Example 3 Results