Introduction to JavaScript

mewstennisSoftware and s/w Development

Nov 4, 2013 (3 years and 7 months ago)

63 views

Introduction to JavaScript

MIS 403

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(<H1>My Heading</H1>)

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 <script> tag


<script type=“text/javascript” src=“some file.js” >


javascript statements...if not external

</script>


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


<!
--

All of your comments here…
--
>

JavaScript in HTML, Template

<head>

<title>My page with javascript</title>

</head>

<body)

<script
language=“javascript” type=“text/javascript”
>

<!
--

begin hiding here


javascript statements…

// end hiding here
--
>

</script>

<noscript>

<b>the page requires a browser with javascript </b>

</noscript>...

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 <script> tag to reuse
code


…/jsfunct2.html

JavaScript Lab Exercise 1


Create a web page that contains


A title of “My first JavaScript Page”


A Javascript to ask the user for their name


A personalized welcome message to the user.



Create another page that combines image swap
and function example


Have the function called from the button switch the
images