Client Side Programming - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

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

Client-Side Programming:

the JavaScript Language

WWW Structures, Techniques and Standards

JavaScript History and Versions

• JavaScript was introduced as part of the Netscape 2.0 browser
• Microsoft soon released its own version called JScript
• ECMA developed a standard language known as ECMAScript
• ECMAScript Edition 3 is widely supported and is what we will call

“JavaScript”

JavaScript Introduction

• Let’s write a “Hello World!” JavaScript program
• Problem : the JavaScript language itself has no input/output

statements(!)

• Solution : Most browsers provide de facto standard I/O methods
  • alert: pops up alert box containing text
  • prompt: pops up window where user can enter text

JavaScript Introduction

• File JSHelloWorld.js:
• HTML document executing this code: script element used to load and execute JavaScript code

JavaScript Introduction

• Web page and alert box generated by JSHelloWorld.html

document and JSHelloWorld.js code:

JavaScript Introduction

• Prompt window example:

JavaScript Properties

• Note that JavaScript code did not need to be compiled
  • JavaScript is an interpreted language
  • Portion of browser software that reads and executes JavaScript is an interpreter
• Interpreted vs. compiled languages:
  • Advantage: simplicity
  • Disadvantage: efficiency

JavaScript Properties

• JavaScript is a scripting language: designed to be executed within a

larger software environment

• JavaScript can be run within a variety of environments:
  • Web browsers (our focus in next chapter)
  • Web servers
  • Application containers (general-purpose programming)

JavaScript Properties

• Components of a JavaScript implementation:
  • Scripting engine: interpreter plus required ECMAScript functionality (core library)
  • Hosting environment: functionality specific to environment
    • Example: browsers provide alert and prompt
    • All hosting environment functionality provided via objects

JavaScript Properties

• All data in JavaScript is an object or a property of an object
• Types of JavaScript objects
  • Native: provided by scripting engine
    • If automatically constructed before program execution, known as a built-in object (ex: window)
  • Host: provided by host environment
    • alert and prompt are host objects

Developing JavaScript Software

• Writing JavaScript code
  • Any text editor ( e.g ., Notepad, Emacs)
  • Specialized software ( e.g ., MS Visual InterDev)
• Executing JavaScript
  • Load into browser (need HTML document)
  • Browser detects syntax and run-time errors
    • Mozilla: JavaScript console lists errors
    • IE6: Exclamation icon and pop-up window

Developing JavaScript Software

• Mozilla JavaScript console (Tools | Web Development | JavaScript

Console):

Developing JavaScript Software

• IE6 error window: Error indicator; double-clicking icon opens error window Click to see error messages

Developing JavaScript Software

• Firefox (2.0 and up): the JavaScript console has been renamed “Error

Console” (Tools|Error Console) and shows JavaScript errors, CSS

errors etc…

• Enhancements available as extensions (e.g. Console 2

, firebug)

• Chrome (4) has excellent dev support (developer|JavaScript Console)
• IE8: Tools|Developer tools

Developing JavaScript Software

• Debugging
  • Apply generic techniques: desk check, add debug output (alert’s)
  • Use specialized JavaScript debuggers: later
• Re-executing
  • Overwrite .js file
  • Reload (Mozilla)/Refresh (IE) HTML document that loads the file

Basic JavaScript Syntax

Basic JavaScript Syntax

Notice that there is no main() function/method

Basic JavaScript Syntax

Comments like Java/C++ (/* */ also allowed)

Basic JavaScript Syntax

Variable declarations:

• Not required
• Data type not specified

Basic JavaScript Syntax

Semi-colons are usually not required, but always allowed at statement end

Basic JavaScript Syntax

Arithmetic operators same as Java/C++

Basic JavaScript Syntax

String concatenation operator as well as addition

Basic JavaScript Syntax

Arguments can be any expressions Argument lists are comma-separated

Basic JavaScript Syntax

Object dot notation for method calls as in Java/C++

Basic JavaScript Syntax