Introduction to Client-Side Scripting and JavaScript

1
Introduction to Client-Side Scripting and
JavaScript
Eastern Mediterranean University School of
Computing and Technology Department of
Information Technology
ITEC229 Client-Side Internet and Web Programming

• CHAPTER 9

2
CONTENT

• 9.1 Introduction to Client-Side Scripting
• 9.2 Introduction to JavaScript
• 9.3 JavaScript Statements
• 9.4 JavaScript Comments
• 9.5 JavaScript Variables
• 9.6 JavaScript Operators

http//sct.emu.edu.tr/it/itec229
3
9.1 Introduction to Client-Side Scripting

• HTML is good for developing static pages
• can specify text/image layout, presentation,
  links,
• web page looks the same each time it is accessed
• in order to develop interactive/reactive pages,
  must integrate programming in some form or
  another

http//sct.emu.edu.tr/it/itec229
4
9.1 Introduction to Client-Side Scripting

• Client-Side Scripting
• programs are written in a separate programming
  (or scripting) language
• e.g., JavaScript, JScript, VBScript
• programs are embedded in the HTML of a Web page,
  with (HTML) tags to identify the program
  component
• e.g., ltscript type"text/javascript"gt lt/scriptgt
• the browser executes the program as it loads the
  page, integrating the dynamic output of the
  program with the static content of HTML
• could also allow the user (client) to input
  information and process it, might be used to
  validate input before its submitted to a remote
  server

http//sct.emu.edu.tr/it/itec229
5
9.1 Introduction to Client-Side Scripting

• Client-Side Scripting
• a scripting language is a simple, interpreted
  programming language
• scripts are embedded as plain text, interpreted
  by
• application
• simpler execution model don't need compiler or
  
• development environment
• saves bandwidth source code is downloaded, not
  
• compiled executable
• platform-independence code interpreted by any
  script-
• enabled browser
• but slower than compiled code, not as
  powerful/full-
• featured

http//sct.emu.edu.tr/it/itec229
6
9.1 Introduction to Client-Side Scripting

• JavaScript
• the first Web scripting language,
• developed by Netscape in 1995
• syntactic similarities to Java/C, but simpler,
  more flexible in some respects, limited in other
• (loose typing, dynamic variables, simple objects)
• JScript
• Microsoft version of JavaScript, introduced in
  1996
• same core language, but some browser-specific
  differences
• fortunately, IE, Netscape, Firefox, etc. can
  (mostly) handle both JavaScript JScript
• JavaScript 1.5 JScript 5.0 cores both conform
  to ECMAScript standard
• VBScript
• client-side scripting version of Microsoft Visual
  Basic

http//sct.emu.edu.tr/it/itec229
7
9.1 Introduction to Client-Side Scripting

• Client-Side Scripting
• Adding dynamic features to Web pages
• validation of form data (probably the most
  commonly used application)
• image rollovers
• time-sensitive or random page elements
• handling cookies
• Defining programs with Web interfaces
• utilize buttons, text boxes, clickable images,
  prompts, etc.

http//sct.emu.edu.tr/it/itec229
8
9.1 Introduction to Client-Side Scripting

• Limitations of Client-Side Scripting
• since script code is embedded in the page, it is
  viewable to the world
• for security reasons, scripts are limited in what
  they can do
• e.g., can't access the client's hard drive
• since they are designed to run on any machine
  platform, scripts do not contain platform
  specific commands
• script languages are not full-featured
• e.g., JavaScript objects are very crude, not good
  for large project development

http//sct.emu.edu.tr/it/itec229
9
9.2 Introduction to JavaScript

• What is JavaScript?
• JavaScript is a scripting language that runs in a
  web browser (client-side)
• A scripting language is a lightweight programming
  language
• JavaScript is developed by Netscape
• It was designed to add interactivity to HTML
  pages
• It is usually embedded directly into HTML pages
• JavaScript is the most popular scripting language
  on the internet, and works in all major browsers,
  such as Internet Explorer, Firefox, Chrome,
  Opera, and Safari.
• Everyone can use JavaScript without purchasing a
  license
• It is used in billions of Web pages to add
  functionality, validate forms, communicate with
  the server, and much more.

http//sct.emu.edu.tr/it/itec229
10
9.2 Introduction to JavaScript

• Are Java and JavaScript the same?
• Java and JavaScript are two completely different
  languages in both concept and design!
• However, the syntax is similar.
• Java (developed by Sun Microsystems) is a
  powerful and much more complex programming
  language - in the same category as C and C.
• JavaScript is not a full-featured programming
  language.
• JavaScript only executed in a browser.

http//sct.emu.edu.tr/it/itec229
11
9.2 Introduction to JavaScript

• What Can 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 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 saves
  the server from extra processing
• JavaScript can be used to detect the visitor's
  browser - A JavaScript can be used to detect the
  visitor's browser, and - depending on the browser
  - load another page specifically designed for
  that browser
• JavaScript can be used to create cookies - A
  JavaScript can be used to store and retrieve
  information on the visitor's computer

http//sct.emu.edu.tr/it/itec229
12
9.2 Introduction to JavaScript

• Incorporating JavaScript into HTML
• JavaScript programs require the ltSCRIPTgt tag in
  .html files
• ltscript type "text/javascript"gt
• ACTUAL JavaScript code here
• lt/scriptgt
• These can appear in either the ltHEADgt or ltBODYgt
  section of an html document
• Functions and code that may execute multiple
  times is typically placed in the ltHEADgt
• Code that needs to be executed only once, when
  the document is first loaded is placed in the
  ltBODYgt

http//sct.emu.edu.tr/it/itec229
13
9.2 Introduction to JavaScript

• Using an External JavaScript
• JavaScript can also be placed in external files.
• External JavaScript files often contain code to
  be used on several different web pages.
• External JavaScript files have the file extension
  .js.
• External script cannot contain the
  ltscriptgtlt/scriptgt tags!
• To use an external script, point to the .js file
  in the "src" attribute of the ltscriptgt tag
• Example

lthtmlgtltheadgtltscript type"text/javascript"
src"xxx.js"gtlt/scriptgtlt/headgtltbodygtlt/bodygtlt/ht
mlgt
http//sct.emu.edu.tr/it/itec229
14
9.2 Introduction to JavaScript

• Hiding Scripts from Other Browsers
• Some browsers may not support scripting
• To be safe, you can put your scripts in html
  comments.
• This way browsers that do not recognize
  JavaScript will look at the programs as comments

ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgtlt/HEADgt ltBODYgt
Here's the result ltSCRIPT LANGUAGE"JavaScrip
t"gt lt!-- HIDE FROM OTHER BROWSERS // Output
"It Works!" document.writeln("It
works!ltBRgt") // STOP HIDING FROM OTHER
BROWSERS --gt lt/SCRIPTgt lt/BODYgt lt/HTMLgt
http//sct.emu.edu.tr/it/itec229
15
9.3 JavaScript Statements

• JavaScript is a sequence of statements to be
  executed by the browser.
• A JavaScript statement is a command to a browser.
  
• The purpose of the command is to tell the browser
  what to do.
• This JavaScript statement tells the browser to
  write "Hello World" to the web page
• document.write("Hello World")
• It is normal to add a semicolon at the end of
  each executable statement.
• The semicolon is optional (according to the
  JavaScript standard), but using semicolons makes
  it possible to write multiple statements on one
  line.

http//sct.emu.edu.tr/it/itec229
16
9.3 JavaScript Statements

• JavaScript Code
• JavaScript code (or just JavaScript) is a
  sequence of JavaScript statements.
• Each statement is executed by the browser in the
  sequence they are written.
• This example will write a heading and two
  paragraphs to a web page
• Example

ltscript type"text/javascript"gtdocument.write("lth
1gtThis is a headinglt/h1gt")document.write("ltpgtThi
s is a paragraph.lt/pgt")document.write("ltpgtThis
is another paragraph.lt/pgt")lt/scriptgt
http//sct.emu.edu.tr/it/itec229
17
9.3 JavaScript Statements

• JavaScript Code
• JavaScript code (or just JavaScript) is a
  sequence of JavaScript statements.
• Each statement is executed by the browser in the
  sequence they are written.
• This example will write a heading and two
  paragraphs to a web page
• Example

ltscript type"text/javascript"gtdocument.write("lth
1gtThis is a headinglt/h1gt")document.write("ltpgtThi
s is a paragraph.lt/pgt")document.write("ltpgtThis
is another paragraph.lt/pgt")lt/scriptgt
http//sct.emu.edu.tr/it/itec229
18
9.3 JavaScript Statements

• JavaScript Blocks
• JavaScript statements can be grouped together in
  blocks.
• Blocks start with a left curly bracket , and end
  with a right curly bracket .
• The purpose of a block is to make the sequence of
  statements execute together.
• This example will write a heading and two
  paragraphs to a web page
• Example

ltscript type"text/javascript"gtdocument.write("
lth1gtThis is a headinglt/h1gt")document.write("ltpgtT
his is a paragraph.lt/pgt")document.write("ltpgtThis
is another paragraph.lt/pgt")lt/scriptgt
http//sct.emu.edu.tr/it/itec229
19
9.4 JavaScript Comments

• Comments can be added to explain the JavaScript,
  or to make the code more readable.
• Single line comments start with //.
• Multi line comments start with / and end with /.

lthtmlgt ltbodygt ltscript type"text/javascript"gt //
This is Comment 1.. / This is Comment 2.. this
is multi-line comment / document.write("lth1gtITEC
229lt/h1gt") // prints the text to the screen in
ltH1gt format. lt/scriptgt lt/bodygt lt/htmlgt
http//sct.emu.edu.tr/it/itec229
20
9.5 JavaScript Varibles

• JavaScript variables are used to hold values or
  expressions.
• A variable can have a short name, like x, or a
  more descriptive name, like carname.
• Rules for JavaScript variable names
• Variable names are case sensitive (y and Y are
  two different variables)
• Variable names must begin with a letter or the
  underscore character
• A variable's value can change during the
  execution of a script.
• You can refer to a variable by its name to
  display or change its value.

http//sct.emu.edu.tr/it/itec229
21
9.5 JavaScript Varibles

• Declaring (Creating) JavaScript Variables
• Creating variables in JavaScript is most often
  referred to as "declaring" variables.
• You declare JavaScript variables with
  the var keyword
• var xvar carname
• After the declaration shown above, the variables
  are empty (they have no values yet).
• However, you can also assign values to the
  variables when you declare them
• var x5  // will hold the value 5,
• var carname"Volvo" // and carname will hold
  the value Volvo
• Note When you assign a text value to a variable,
  use quotes around the value.
• Note If you redeclare a JavaScript variable, it
  will not lose its value.

http//sct.emu.edu.tr/it/itec229
22
9.5 JavaScript Varibles

• Local JavaScript Variables
• A variable declared within a JavaScript function
  becomes LOCAL and can only be accessed within
  that function. (the variable has local scope).
• You can have local variables with the same name
  in different functions, because local variables
  are only recognized by the function in which they
  are declared.
• Local variables are destroyed when you exit the
  function.

http//sct.emu.edu.tr/it/itec229
23
9.5 JavaScript Varibles

• Global JavaScript Variables
• Variables declared outside a function
  become GLOBAL, and all scripts and functions on
  the web page can access it.
• Global variables are destroyed when you close the
  page.
• If you declare a variable, without using "var",
  the variable always becomes GLOBAL.
• If you assign values to variables that have not
  yet been declared, the variables will
  automatically be declared as global variables.
• The statements given below will declare the
  variables x and carname as global variables (if
  they don't already exist).
• x5carname"Volvo"

http//sct.emu.edu.tr/it/itec229
24
9.6 JavaScript Operators

• JavaScript Arithmetic Operators
• Arithmetic operators are used to perform
  arithmetic between
• variables and/or values.
• Given that y5, the table below explains the
  arithmetic operators

Operator Description Example Result Result
Addition xy2 x7 y5
- Subtraction xy-2 x3 y5
Multiplication xy2 x10 y5
/ Division xy/2 x2.5 y5
Modulus (division remainder) xy2 x1 y5
Increment xy x6 y6
Increment xy x5 y6
-- Decrement x--y x4 y4
-- Decrement xy-- x5 y4
http//sct.emu.edu.tr/it/itec229
25
9.6 JavaScript Operators

• JavaScript Assignment Operators
• Assignment operators are used to assign values to
  JavaScript variables.
• Given that x10 and y5, the table below explains
  the assignment operators

Operator Example Same As Result
xy   x5
xy xxy x15
- x-y xx-y x5
xy xxy x50
/ x/y xx/y x2
xy xxy x0
http//sct.emu.edu.tr/it/itec229
26
9.6 JavaScript Operators

• The Operator Used on Strings
• The operator can also be used to add string
  variables or text values together.
• To add two or more string variables together, use
  the operator
• txt1"What a very"txt2"nice day"txt3txt1txt
  2
• After the execution of the statements above, the
  variable txt3 contains "What a verynice day".

http//sct.emu.edu.tr/it/itec229
27
9.6 JavaScript Operators

• The Operator Used on Strings
• To add a space between the two strings, insert a
  space into one of the strings
• txt1"What a very " txt2"nice
  day" txt3txt1txt2
• or insert a space into the expression
• txt1"What a very" txt2"nice
  day" txt3txt1" "txt2
• After the execution of the statements above, the
  variable txt3 contains
• "What a very nice day"

http//sct.emu.edu.tr/it/itec229
28
9.6 JavaScript Operators

• Comparison Operators
• Comparison operators are used in logical
  statements to determine equality or difference
  between variables or values.
• Given that x5, the table below explains the
  comparison operators
• Comparison operators can be used in conditional
  statements to compare values
• and take action
• depending on the
• result.

Operator Description Example
is equal to x8 is falsex5 is true
is exactly equal to (value and type) x5 is truex"5" is false
! is not equal x!8 is true
gt is greater than xgt8 is false
lt is less than xlt8 is true
gt is greater than or equal to xgt8 is false
lt is less than or equal to xlt8 is true
http//sct.emu.edu.tr/it/itec229
29
9.6 JavaScript Operators

• Logical Operators
• Logical operators are used to determine the logic
  between variables or values.
• Given that x6 and y3, the table below explains
  the logical operators

Operator Description Example
and (x lt 10 y gt 1) is true
or (x5 y5) is false
! not !(xy) is true
http//sct.emu.edu.tr/it/itec229
30
9.6 JavaScript Operators

• Conditional Operator
• JavaScript also contains a conditional operator
  that assigns a value to a variable based on some
  condition.
• Syntax
• variablename(condition)?value1value2 
• Example
• greeting(visitor"PRES")?"Dear President
  ""Dear "
• If the variable visitor has the value of "PRES",
  then the variable greeting will be assigned the
  value "Dear President " else it will be assigned
  "Dear".

http//sct.emu.edu.tr/it/itec229
31
Introduction to Client-Side Scripting and
JavaScript
Thank You !
END of CHAPTER 9

• http//sct.emu.edu.tr/it/itec229