Introduction to Scripting - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

Download Introduction to Scripting - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

JavaScript: Introduction to Scripting

Topics Covered

• Writing simple JavaScript programs.
• Using input and output statements
• Basic memory concepts.
• Arithmetic operators.
• Decision-making statements.
• Relational and equality operators.

Introduction

• JavaScript scripting language
  • Client-side scripting enhances functionality and appearance
    • Makes pages more dynamic and interactive
    • Pages can produce immediate response without contacting a server
    • Customization is possible on the basis of users’ explicit and implicit input
    • Browser has to have a built-in (JavaScript) interpreter
  • Foundation for complex server-side scripting

JavaScript: Object-Based Language

• There are three object categories in JavaScript: Native Objects, Host Objects, and User-Defined Objects. - Native objects: defined by JavaScript. - String, Number, Array, Image, Date, Math, etc. - Host objects : supplied and always available to JavaScript by the browser environment. - window, document, forms, etc. - User-defined objects : defined by the author/programmer
• Initially, we will use host objects created by the browser and their methods and properties

Scripting

• Two approaches to client side scripting:
  • Inline scripting
    • Written in the section of a document
  • JavaScript code embedded in the section

Scripting

• - 18 19 20

  HTML comment tags will

  result in skipping of the script

  by those browsers that do not

  support scripting

  welcome2.html

  (1 of 1)

  1 2 4 5 6 7 8 9 10 11 12 19 20 21

   Escape character in combination with quotation mark: \” will result in insertion of a quotation mark in the string that is actually written by JavaScript

  welcome3.html

  1 of 1

  1 2 4 5 6 7 8 9 10 11 17 18 19

   New line of the html document in a browser is determined by an html
  element

  welcome4.html

  1 of 1

  1 2 4 5 6 7 8 9 10 11 16 17 18 19 20

  Click Refresh (or Reload) to run this script again.

  21 22

  alert method of the object displays a Dialog

  Common Escape Sequences

  Escape sequence Description

  \n Newline. Position the screen cursor at the beginning of the next line.

  \t Horizontal tab. Move the screen cursor to the next tab stop.

  \r Carriage return. Position the screen cursor to the beginning of the

  current line; do not advance to the next line. Any characters output

  after the carriage return overwrite the characters previously output on

  that line.

  \ Backslash. Used to represent a backslash character in a string.

  " Double quote. Used to represent a double quote character in a string

  contained in double quotes. For example,

  window.alert( ""in quotes"" );

  displays "in quotes" in an alert dialog.

  ' Single quote. Used to represent a single quote character in a string. For

  example,

  window.alert( ''in quotes'' );

  displays 'in quotes' in an alert dialog.

  Fig. 7.5 Some common escape sequences.

  Dynamic Pages

  • A script can adapt the content based on explicit input from

  the user or other information

  • System clock: Time of day
  • Hidden input
  • Cookies
  • User input can be collected by invoking the prompt method

  of a window object

  • This will display a dialog box that prompts user for input

  welcome5.html

  (1 of 2)

  1 2 4 5 6 7 8 9 10 11 12

  JavaScript is a loosely typed language. Variables take

   on any data type depending on the value assigned.

   Value returned by the prompt

  method of the window object is

  assigned to the variable name

   “+” symbol can be used for text concatenation as well as arithmetic operator

  24 25 26 27

  Click Refresh (or Reload) to run this script again.

  28 29

  Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

  This is the prompt to the user.

  This is the default value that appears when the dialog opens.

  This is the text field in which the user types the value.

  When the user clicks OK , the value typed by the user is returned to the program as a string.

  If the user clicks Cancel , the null value will be returned to the program and no value will be assigned to the variable.

  Simple Script Example: Adding Integers

  • The values of numbers to be added are obtained as user inputs colleted through the window.prompt method
  • parseInt
    • Converts its string argument to an integer
    • What happens if the conversion is not done?
      • See example on our web site
  • NaN (not a number): value returned if non-numerical values are passed to the paresInt method

  Addition.html

  (1 of 2)

  1 2 4 5 6 7 8 9 10 11 12 39 40 41 42

  Click Refresh (or Reload) to run the script again

  43 44

  Arithmetic Operators and order of evaluation

  JavaScript operation

  Arithmetic operator

  Algebraic expression

  JavaScript expression Addition +^ f + 7 f + 7 Subtraction -^ p – c p^ -^ c Multiplication *^ bm b * m Division /^ x / y or or x y x / y

  Remainder %^ r mod s r % s Fig. 7.12 Arithmetic operators.

  Operator(s) Operation(s) Order of evaluation (precedence) *, / or % (^) Multiplication Division Modulus

  Evaluated first. If there are several such operations, they are evaluated from left to right.

  • or - (^) Addition Subtraction

  Evaluated last. If there are several such operations, they are evaluated from left to right. Fig. 7.13 Precedence of arithmetic operators.

  x

  y--

  Always use parentheses to ensure desired order of evaluation: (a + b) / 6

  Relational (Inequality and Equality) Operators

  Standard algebraic

  equality operator or

  relational operator

  JavaScript equality

  or relational

  operator

  Sample

  JavaScript

  condition

  Meaning of

  JavaScript

  condition

  Equality operators

  = ==^ x ==^ y^ x is equal to y

  ? !=^ x !=^ y^ x is not equal to y

  Relational operators

  > >^ x > y^ x is greater than y

  < <^ x < y^ x is less than y

  >= x >= y x is greater than or

  equal to y

  <= x <= y x is less than or

  equal to y

  Fig. 7.15 Equality and relational operators.

  

  

  Do NOT confuse relational equality operator “==“ with an assignment operator “=“

  welcome6.html

  (1 of 3)

  1 2 4 5 6 7 8 9 10 11 12 44 45 46

  welcome6.html

  (3 of 3)

  47 48

  Click Refresh (or Reload) to run this script again.

  49 50