Introduction to JavaScriptIntroduction to JavaScript

MIS 403MIS 403

Classifications of LanguagesClassifications of Languages

• High-Level vs Low LevelHigh-Level vs Low Level– Remember that Information Technology is VERY Remember that Information Technology is VERY

layeredlayered

• Compiled vs InterpretedCompiled vs Interpreted

• Structured vs Object OrientedStructured vs Object Oriented

• Scripting vs ProgrammingScripting vs Programming

Java vs JavaScriptJava vs JavaScript• Java - Programming Language (PL)Java - Programming Language (PL)

– Interactive Web GraphicsInteractive Web Graphics– Creating web browser applicationsCreating web browser applications– Writing stand-alone applicationsWriting stand-alone applications

• JavaScript - Scripting LanguageJavaScript - Scripting Language– Runs within the context of the Web browserRuns within the context of the Web browser– Customizing pages based on browser versionCustomizing pages based on browser version– Visual Feedback to user actionsVisual Feedback to user actions– Validating data entered on HTML FormsValidating data entered on HTML Forms

• In reality, Java and JavaScript are unrelated…In reality, Java and JavaScript are unrelated…

Web Scripting LanguagesWeb Scripting Languages

• Combine PL tools to make easier to useCombine PL tools to make easier to use

• Fewer features Fewer features

• Less versatileLess versatile

• Can be client side or Server sideCan be client side or Server side– Server side –Server side –

• Invoked from browserInvoked from browser• Run on the serverRun on the server

– Client side - JavaScriptClient side - JavaScript• Invoked and Run on the browser Invoked and Run on the browser

JavaScriptJavaScript

• Extends functionality of Web pagesExtends functionality of Web pages

• Written in the HTML DocumentWritten in the HTML Document

• Controls page elementsControls page elements

• Reacts to user actionsReacts to user actions

• Instructions - code downloaded as textInstructions - code downloaded as text

• Platform independentPlatform independent

• Object OrientedObject Oriented

Object OrientedObject Oriented

• Objects have Objects have – Qualities or attributesQualities or attributes– Things they can do Things they can do

• In JavaScript these areIn JavaScript these are– PropertiesProperties– MethodsMethods

Object ExamplesObject Examples

Object Attribute Things it can do

Computer Brand nameModel NameProcessor TypeProcessor SpeedDisk Drive

Boot upRun an applicationPerform math calculationsShut down

Disk Drive Brand nameModel nameStorage capacityTransfer rateAccess time

Store informationRetrieve informationDelete information

JavaScript Object ExampleJavaScript Object Example

Object Attribute Things it can do

document bgColor linkColor vlinkColor title

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

• To Reference Properties and methodsTo Reference Properties and methods– document.titledocument.title–document.bgColordocument.bgColor– document.writeln(<H1>My Heading</H1>)document.writeln(<H1>My Heading</H1>)

Fundamental ConceptsFundamental Concepts

• Objects: The nouns of the languageObjects: The nouns of the language

• Instances: incarnations of objectsInstances: incarnations of objects

• Properties: attributes or state of objectsProperties: attributes or state of objects

• Methods: The verbs of the language Methods: The verbs of the language that define the behaviors of objectsthat define the behaviors of objects

• Events and Events HandlersEvents and Events Handlers

JavaScript VariablesJavaScript Variables

• Variables: containers for dataVariables: containers for data– All variables have All variables have

• NameName• Type – JavaScript is loosely typedType – JavaScript is loosely typed• Value or “null”Value or “null”• To declare a variableTo declare a variable

– var variablenamevar variablename• Beware of reserved words (book page 558)Beware of reserved words (book page 558)

The Document Object ModelThe Document Object Model

• Internal road map of Internal road map of objects on a web objects on a web pagepage

• Hierarchical model of Hierarchical model of web browser objectsweb browser objects

• Old DOMs for Old DOMs for Netscape, MicrosoftNetscape, Microsoft

• New browsers use New browsers use the standard DOM the standard DOM by W3Cby W3C

Embedding JavaScript in HTMLEmbedding JavaScript in HTML• As statements and functions via <script> tagAs statements and functions via <script> tag

– <script type=“text/javascript” src=“some file.js” ><script type=“text/javascript” src=“some file.js” > javascript statements...if not externaljavascript statements...if not external

</script></script>– Attributes Attributes

• Ttype, SRCTtype, SRC

• Within HTML tags as event handlers…Within HTML tags as event handlers…LaterLater

– Provide the doorway between HTML and ScriptsProvide the doorway between HTML and Scripts

A Word About CommentsA Word About Comments

• JavaScript CommentsJavaScript Comments– These comments must be within a scriptThese comments must be within a script– // begins a single line comment// begins a single line comment

• These can start anywhere on the line, but the remainder of the These can start anywhere on the line, but the remainder of the line becomes a commentline becomes a comment

– /* All of your comments here… *//* All of your comments here… */• Everything between the start and end comment markers are Everything between the start and end comment markers are

commentscomments• Can be on a single line or span many…Can be on a single line or span many…

• HTML CommentsHTML Comments– <!-- All of your comments here… --><!-- All of your comments here… -->

JavaScript in HTML, TemplateJavaScript in HTML, Template<head><head><title>My page with javascript</title><title>My page with javascript</title></head></head><body) <body) <script <script language=“javascript” type=“text/javascript” language=“javascript” type=“text/javascript” >><!-- begin hiding here<!-- begin hiding here

javascript statements… javascript statements…// end hiding here -->// end hiding here --></script></script><noscript><noscript><b>the page requires a browser with javascript </b><b>the page requires a browser with javascript </b></noscript>...</noscript>...

JavaScript in HTML, ExamplesJavaScript in HTML, Examples

• Write and Writeln methods of documentWrite and Writeln methods of document– ……./10-04 intro/jsexmp1.html./10-04 intro/jsexmp1.html– ……./jsexmp1A.html./jsexmp1A.html

• Alerts, Confirmations and PromptsAlerts, Confirmations and Prompts– ……/jsalert.html/jsalert.html– ……/jsconfirm.html/jsconfirm.html– ……/jsprompt.html/jsprompt.html– ……/jsprompt2.html/jsprompt2.html

Events and FunctionsEvents and Functions• Many event handlers are supportedMany event handlers are supported

– onmouseover, onmouseout, onclickonmouseover, onmouseout, onclick– ……/swap image.html/swap image.html

• Functions have Three partsFunctions have Three parts– The function keywordThe function keyword– Parenthesized, comma-separated list of Parenthesized, comma-separated list of

argumentsarguments– Statements enclosed in curly bracketsStatements enclosed in curly brackets– ……/function ex.html/function ex.html

Attributes and Reusable codeAttributes and Reusable code

• You can pass attribute to a functionYou can pass attribute to a function– ……///jsfunct.html///jsfunct.html

• Use the src attribute of the <script> tag to reuse Use the src attribute of the <script> tag to reuse codecode– ……/jsfunct2.html/jsfunct2.html

JavaScript Lab Exercise 1JavaScript Lab Exercise 1

• Create a web page that containsCreate a web page that contains– A title of “My first JavaScript Page”A title of “My first JavaScript Page”– A Javascript to ask the user for their name A Javascript to ask the user for their name – A personalized welcome message to the user.A personalized welcome message to the user.

• Create another page that combines image swap Create another page that combines image swap and function exampleand function example– Have the function called from the button switch the Have the function called from the button switch the

imagesimages