Download Web Application Software Development - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

Introduction to JavaScript

Web Application Software Development

Outline – Part A

• Overview of JavaScript
  • Versions, embedding, comments
• JavaScript Basics
  • Variables and Data Types
  • Operators
  • Expressions
• JavaScript Control Structures
  • Conditional Statements
  • Looping Statements

Outline – Part B

• JavaScript Functions and Events
  • Events Handlers
• Using Object in JavaScript
  • Object-Oriented Programming
  • JavaScript Object Model
  • Using Built-In objects (Predefined Object)
  • Custom Object Types
• Error in JavaScript
• Exception Handling in JavaScript

Outline – Part C

• Working with Browser Objects
  • Document Object Model (DOM)
• Creating Cookies in JavaScript
  • Constructing a standard cookie
  • Interaction with the cookie
• Introducing DHTML
  • Styles and Layers
  • Dynamic Positioning

Outline – Part D

• JavaScript Application Development
  • JavaScript Example
  • Discuss the execution requirements
  • How to break down the syntax
• Cool JavaScript Sites
• JavaScript and DHTML Reference
• Hints for JavaScript coding
• Summary

Introduction

• The growth of the WWW has resulted in a demand for dynamic and

interactive web sites.

• There are many different kinds of scripting languages – JavaScript, …
• This lecture aims at offering in-depth knowledge of JavaScript,

discussing the complexity of scripting and studying various common

examples.

JavaScript Capabilities

• Improve the user interface of a website
• Make your site easier to navigate
• Easily create pop-up alert, windows
• Replace images on a page without reload the page
• Form validation
• Many others …

JavaScript Versions

• • JavaScript 1.
  • • Supported by Netscape 2.0 and IE 3.
• • JavaScript 1.
  • • Supported by Netscape 3.0 and IE 4.
• • JavaScript 1.
  • • Supported by Netscape 4.0 and IE 4.
• • JavaScript 1.
  • • Supported by Netscape 4.5 and IE 5.
• • JavaScript 1.

The Future of JavaScript

• ECMA standard brings JavaScript and Jscript together. - ECMA - An International industry association dedicated to standardize information and communication systems.
• Both Netscape and Microsoft have pledged that they will support and develop JavaScript in the future.
• It is future-proof, and it is not going to disappear in the near future. 

A Simple Script

First JavaScript Page

Embedding JavaScript

• A

  JavaScript Source File

  • SRC – specifies the location of an external script
  • TYPE – specifies the scripting language of the script
  • LANGUAGE – specifies the scripting language of the script
  • TYPE and LANGUAGE have a similar function, we use LANGUAGE to specify the language used in the script

  Need for a source file

  • If the JavaScript code is fairly short, you are recommended to include the code in the HTML document.
  • To add clarity to an HTML document.
  • To share JavaScript code across multiple HTML documents.
  • To help you hide your JavaScript code.
    • Spent lot of time for JavaScript coding.
    • Viewer can only see the location of the source file but not the contents.

  Hide JavaScript from incompatible browsers

  • Not all browsers support JavaScript.
  • E.g. NN1, IE2, character-based lynx.

  JavaScript confusion

  JavaScript Java Interpreted by the client-side computer Compiled on the server before executed on the client machine Dynamic binding, object references are checked at runtime Static binding, object references must exist at compile time No need to declare data types Data types must be declared Code is embedded in HTML Code is not integrated in HTML Limited by the browser functionality Java applications are standalone Can access browser objects Java has no access to browser objects

  Using the alert() Method

  • It is the easiest methods to use amongst alert(), prompt() and confirm().
  • You can use it to display textual information to the user (simple and concise).
  • The user can simply click “OK” to close it.

  Using the confirm() Method

  • This box is used to give the user a choice either OK or Cancel.
  • It is very similar to the “alert()” method.
  • You can also put your message in the method.

  Using the alert() Method

  • This is the only one that allows the user to type in his own response to the specific question.
  • You can give a default value to avoid displaying “undefined”.

  Three methods

  Variables

  • JavaScript allows you to declare and use variables to store values.
  • How to assign a name to a variable?
    • Include uppercase and lowercase letters
    • Digits from 0 through 9
    • The underscore _ and the dollar sign $
    • No space and punctuation characters
    • First character must be alphabetic letter or underscore – 99Total?, 012345number?, …
    • Case-sensitive
    • No reserved words or keywords

  Which one is legal?

  My_variable $my_variable 1my_example _my_variable @my_variable My_variable_example ++my_variable %my_variable #my_variable ~my_variable myVariableExample Legal Illegal

  Variable on-the-fly

  • We should use “var” because it is more easy to keep track of the

  variables.

  Variable declaration

  Data Types

  • JavaScript allows the same variable to contain different types of data values.
  • Primitive data types
    • Number: integer & floating-point numbers
    • Boolean: logical values “true” or “false”
    • String: a sequence of alphanumeric characters
  • Composite data types (or Complex data types)
    • Object: a named collection of data
    • Array: a sequence of values
  • Special data types
    • Null: an initial value is assigned
    • Undefined: the variable has been created by not yet assigned a value

  Numeric Data Types

  • It is an important part of any programming language for doing

  arithmetic calculations.

  • JavaScript supports:
    • Integers: A positive or negative number with no decimal places.
      • Ranged from – 253 to 2^53
    • Floating-point numbers: usually written in exponential notation.
      • 3.1415…, 2.0e11

  Integer and Floating-point number example

  • The integer 100 and the number 30,000,000,000 will be appeared in the browser window.