JavaScript by ajizai

VIEWS: 57 PAGES: 28

									                           JavaScript
• Interpreted language
• Code can be included in an HTML file
   – Downloaded with .html file
   – Interpreted by browser
   – Browser dependencies
• Client side, Server side
   – Client: In a browser, JavaScript embedded in html web
     pages
• Relation to Java
   – Similar in syntax
• JavaScript is case sensitive
   – E.g., null is not the same as Null, NULL, or any other
     variant.
• Resources
   http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm
    General Uses of JavaScript
• Adds full programming language features to
  web scripting
  – E.g., variables, iteration, functions
• Dynamic creation of HTML code
  – HTML code can easily be output to the browser
  – Dynamically interpreted by browser
        Embedding JavaScript
           in HTML - 1
• <script> tag
  – Can place a block of JavaScript code into
    HTML file
     • LANGUAGE attribute specifies version
        – E.g., <SCRIPT LANGUAGE="JavaScript1.2">
  – SRC attribute can specify name of a file
    containing JavaScript program code
     • Use JavaScript stmts prior to closing tag for error
       handling
        – These statements ignored except if there is an error
        Embedding JavaScript
           in HTML - 2
• JavaScript Stmts as HTML Attribute Values
  – Place JavaScript expression within { braces }
     • Use “&” and “;” as with special characters in HTML
       <HR WIDTH="&{barWidth};%" ALIGN="LEFT">
  – Some HTML tag attributes expect the attribute
    value to be a script (e.g., JavaScript)
     • E.g., onClick attribute
     • onClick=“alert(‘You clicked the button’)”
      Comments in JavaScript
// this is a comment
/* this starts a
   multiline comment
*/
<!-- is a single line comment also
- JavaScript does not recognize the --> closing
   bracket
                  Identifiers
• First character
  – ASCII letter
  – Underscore (_)
  – Dollar sign ($)
• Next characters
  – Letters, digits, underscores, $
• Cannot be the same as keywords (reserved
  words)
   Defining & Calling Functions
• Defining functions
   – function started with function keyword.
      • Then, function name
   – Parameter list
      • Comma separate list, in parentheses
      • Names only; No data types
   – The statements in the function in curly braces
• Example
     <SCRIPT LANGUAGE="JavaScript">
     function square (number) {
       return number * number;
     }
     </SCRIPT>
• Calling functions
   – Name function and give actual parameters in
     parenthesis
 Variables, Objects, & Properties
• Variable – a simple (unstructured) variable
   var variableName
   var variableName = value
• Object – a structured variable
   – Objects have associated properties
   – Properties can be data or functions
• Properties access syntax:
   objectName.propertyName
• Example
   – If the object named “myCar” already exists, this creates
     three properties for the object
     myCar.make = "Ford"
     myCar.model = "Mustang"
     myCar.year = 69;
            Global Variables
• Omitting a “var” declaration in an
  assignment creates a global varible
  – .e.g.,
  x = 10 // x has not appeared before; x is global
                     Arrays
• Creating
  var a = new Array(); // using array constructor
  var b = [1.2, “JavaScript”, false]; // literal array
• Indexing
  – Start at element 0, up to N-1
  document.write(b[0])
          Primitive Types &
           Reference Types
• “Primitive” types represented “by value”
  – numbers
  – booleans
• Non-primitive types (e.g., arrays)
  – Represented “by reference”
  Dynamic Typing & Operators
• The type of a variable can be changed
• E.g.,
  var car = “ford”
  car = 25
• String concatenation: “+”
  car = 2001 + “toyota”
                Example
• Use document.write to create a fragment of
  JavaScript code that outputs the value of
  two variables, on separate lines in the
  browser
              Creating Objects
• Object initializer
   objectName = {property1:value1,
     property2:value2,..., propertyN:valueN}
• Object constructor: this object
     function car(make, model, year) {
       this.make = make
       this.model = model
       this.year = year
     }

   – Now you can create an object called mycar as follows:
     mycar = new car("Eagle", "Talon TSi", 1993)
                  Object Values - 1
• Numbers: integer and real
   – E.g., 42 or 3.14159 or -3.1E12
   – 026 (begins with 0– octal); 0xff (begins with 0x – hex)
• Logical (Boolean) values
   – true or false
• Strings: double quoted & single quoted
   – "Howdy!"
   – ‘Howdy!’
   – Special characters
         \n – newline
         \\ - backslash character
         \ can be used to escape characters, e.g., to insert a quote
• null
   – keyword denoting “no value”
           Object Values – 2
• Arrays, Objects
• Functions
  – Variables can take on the value of functions
  function square(num) { return num * num;}
  var func = square;
  // func can be called like square
  var val = func(5);
  document.write (“square of 5= “, val);
          Defining Methods
• Functions can be defined as properties of
  objects
  – Define method by assignment of functions as
    attributes within constructors
         Functions as Properties
• Use Syntax:
  –   objectName.methodName (arguments...)
  –   where objectName: name of the object
  –   methodName: name of the method
  –   Arguments: comma separated list of arguments
• Standard Functions & Objects
  – “document” is a predefined object
       • “document” refers to the document of the browser
       • “write” is a method of document
Netscape Navigator
 object hierarchy
        Control Structures - 1
if (expression)
  statement
[ else statement2 ]
if (expression)
   statement
else if (expression2)
   statement2
        Control Structures - 2
Switch (n) {
case:
  // statements
  break;
default:
  break;
}
          Control Structures - 3
while (expression)
   Statement
do
    statement
while (expression);
for (initialize; test; increment)
    statement
// iterate through object properties
for (variable in object)
    statement
                 Event Handling
• User interface programs are often written in an
  event-driven style
• Program code (e.g., a function) is associated with
  kinds of user actions
   –   E.g., mouse click
   –   Tab key
   –   Enter key
   –   Page/frame entry/exit
• System (e.g., browser) calls function each time an
  event occurs
              HTML Forms &
             JavaScript Events
• HTML forms
  – Input elements:
     • text fields, buttons, file selections etc.
• Browser JavaScript objects for each of these
  elements
• Event handlers
  – Each input element can have a JavaScript event
    handler
                  Events
• Events defined for HTML input elements
  – onfocus, onblur, onselect, onchange,
    onclick, ondblclick, onmousedown,
    onmouseup, onmouseover, onmousemove,
    onmouseout, onkeypress, onkeydown,
    onkeyup
• Can attach function properties to each of
  these
• onclick, onchange – particularly important
    How do you access values?
• For example, text values
• Can access the form input element
• See examples:
  – validate1.htm
  – validate2.htm
  – validate3.htm
                      Misc
• Browser Status Line
  – status variable refers to bottom line of browser
    window
  – See navigation.htm example
• Some output functions don’t take multiple
  parameters
  – E.g., alert function only takes one parameter
  – See alert.htm example
                       Tools
• JavaScript can be generated by
  – Dreamweaver
• Debugger for client-side JavaScript
  http://developer.netscape.com/software/jsdebug.html

								
To top