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

Introduction to JavaScript

Classifications of Languages

• High-Level vs Low Level
  • Remember that Information Technology is VERY layered
• Compiled vs Interpreted
• Structured vs Object Oriented
• Scripting vs Programming

Java vs JavaScript

• Java - Programming Language (PL)
  • Interactive Web Graphics
  • Creating web browser applications
  • Writing stand-alone applications
• JavaScript - Scripting Language
  • Runs within the context of the Web browser
  • Customizing pages based on browser version
  • Visual Feedback to user actions
  • Validating data entered on HTML Forms
• In reality, Java and JavaScript are unrelated…

Web Scripting Languages

• Combine PL tools to make easier to use
• Fewer features
• Less versatile
• Can be client side or Server side
  • Server side –
    • Invoked from browser
    • Run on the server
  • Client side - JavaScript
    • Invoked and Run on the browser

JavaScript

• Extends functionality of Web pages
• Written in the HTML Document
• Controls page elements
• Reacts to user actions
• Instructions - code downloaded as text
• Platform independent
• Object Oriented

Object Oriented

• Objects have
  • Qualities or attributes
  • Things they can do
• In JavaScript these are
  • Properties
  • Methods

Object Examples

Object Attribute Things it can do

Computer Brand name Model Name Processor Type Processor Speed Disk Drive

Boot up Run an application Perform math calculations Shut down

Disk Drive Brand name Model name Storage capacity Transfer rate Access time

Store information Retrieve information Delete information

JavaScript Object Example

Object Attribute Things it can do

document bgColor linkColor vlinkColor title

clear() close() writeln() write()

• To Reference Properties and methods
  • document.title
  • document.bgColor
  • document.writeln(

    My Heading

    )

Fundamental Concepts

• Objects: The nouns of the language
• Instances: incarnations of objects
• Properties: attributes or state of objects
• Methods: The verbs of the language that define the behaviors of objects
• Events and Events Handlers

JavaScript Variables

• Variables: containers for data
  • All variables have
    • Name
    • Type – JavaScript is loosely typed
    • Value or “null”
    • To declare a variable
      • var variablename
    • Beware of reserved words (book page 558)

The Document Object Model

• Internal road map of

objects on a web page

• Hierarchical model of

web browser objects

• Old DOMs for

Netscape, Microsoft

• New browsers use the

standard DOM by W3C

Embedding JavaScript in HTML

• As statements and functions via - Attributes - Ttype, SRC - Within HTML tags as event handlers…Later - Provide the doorway between HTML and Scripts

  A Word About Comments

  • JavaScript Comments
    • These comments must be within a script
    • // begins a single line comment
      • These can start anywhere on the line, but the remainder of the line becomes a comment
    • /* All of your comments here… */
      • Everything between the start and end comment markers are comments
      • Can be on a single line or span many…
  • HTML Comments

  JavaScript in HTML, Template

  <body) <script language=“javascript” type=“text/javascript” **>

  ...**

  JavaScript in HTML, Examples

  • Write and Writeln methods of document
    • …./10-04 intro/jsexmp1.html
    • …./jsexmp1A.html
  • Alerts, Confirmations and Prompts
    • …/jsalert.html
    • …/jsconfirm.html
    • …/jsprompt.html
    • …/jsprompt2.html

  Events and Functions

  • Many event handlers are supported
    • onmouseover, onmouseout, onclick
    • …/swap image.html
  • Functions have Three parts
    • The function keyword
    • Parenthesized, comma-separated list of arguments
    • Statements enclosed in curly brackets
    • …/function ex.html

  Attributes and Reusable code

  • You can pass attribute to a function
    • …///jsfunct.html
  • Use the src attribute of the