Introduction to JavaScript MIS 403
Classifications of Languages High-Level vs Low LevelHigh-Level vs Low Level –Remember that Information Technology is VERY layered Compiled vs InterpretedCompiled vs Interpreted Structured vs Object OrientedStructured vs Object Oriented Scripting vs ProgrammingScripting vs Programming
Java vs JavaScript Java - Programming Language (PL)Java - Programming Language (PL) –Interactive Web Graphics –Creating web browser applications –Writing stand-alone applications JavaScript - Scripting LanguageJavaScript - 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…In reality, Java and JavaScript are unrelated…
Web Scripting Languages Combine PL tools to make easier to useCombine PL tools to make easier to use Fewer featuresFewer features Less versatileLess versatile Can be client side or Server sideCan be client side or Server side –Server side – Invoked from browserInvoked from browser Run on the serverRun on the server –Client side - JavaScript Invoked and Run on the browserInvoked and Run on the browser
JavaScript 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 Oriented Objects haveObjects have –Qualities or attributes –Things they can do In JavaScript these areIn JavaScript these are –Properties –Methods
Object Examples
JavaScript Object Example To Reference Properties and methods To Reference Properties and methods – document.title –document.bgColor – document.writeln( My Heading )
Fundamental 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 that define the behaviors of objectsMethods: The verbs of the language that define the behaviors of objects Events and Events HandlersEvents and Events Handlers
JavaScript Variables Variables: containers for dataVariables: containers for data –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 variablename Beware of reserved words (book page 558)Beware of reserved words (book page 558)
The Document Object Model Internal road map of objects on a web pageInternal road map of objects on a web page Hierarchical model of web browser objectsHierarchical model of web browser objects Old DOMs for Netscape, MicrosoftOld DOMs for Netscape, Microsoft New browsers use the standard DOM by W3CNew browsers use the standard DOM by W3C
Embedding JavaScript in HTML As statements and functions via tagAs statements and functions via tag – javascript statements...if not external – javascript statements...if not external –Attributes Ttype, SRCTtype, SRC Within HTML tags as event handlers… LaterWithin HTML tags as event handlers… Later –Provide the doorway between HTML and Scripts
A Word About Comments JavaScript CommentsJavaScript 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 commentThese 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 commentsEverything between the start and end comment markers are comments Can be on a single line or span many…Can be on a single line or span many… HTML CommentsHTML Comments – –
JavaScript in HTML, Template <head> My page with javascript My page with javascript </head><body) <!-- begin hiding here javascript statements… // end hiding here --> </script><noscript> the page requires a browser with javascript the page requires a browser with javascript </noscript>...
JavaScript in HTML, Examples Write and Writeln methods of documentWrite and Writeln methods of document –…./10-04 intro/jsexmp1.html –…./jsexmp1A.html Alerts, Confirmations and PromptsAlerts, Confirmations and Prompts –…/jsalert.html –…/jsconfirm.html –…/jsprompt.html –…/jsprompt2.html
Events and Functions Many event handlers are supportedMany event handlers are supported –onmouseover, onmouseout, onclick –…/swap image.html Functions have Three partsFunctions 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 functionYou can pass attribute to a function –…///jsfunct.html Use the src attribute of the tag to reuse codeUse the src attribute of the tag to reuse code –…/jsfunct2.html
JavaScript Lab Exercise 1 Create a web page that containsCreate 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 exampleCreate another page that combines image swap and function example –Have the function called from the button switch the images