JAVA SCRIPT

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. 

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 char = “ford”

         char = 25

•String concatenation: “+”

         char = 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);

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

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

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