1. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Introduction to JavaScript Programming Instructor: Joseph DiVerdi, Ph.D., MBA

2. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC JavaScript In Brief JavaScript Is –Object-oriented, Client-side, Scripting Language –Permits Executable Content in Web Pages –Derived From C/C++ & Perl –Totally Unrelated to Java It Is Not “Java Light” –Not a Simple Language –Most Popular Language for Client-side Web Programming

3. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Client-Side Language JavaScript Is Executed by the Web Client –That's the Browser Program on Your Desktop –Web Client Contains a JavaScript Engine Web Server Does Not Execute JavaScript JavaScript Is Placed Directly in an HTML Document –Delivered Just Like HTML Also Contained in Separate Documents –Referenced in HTML Documents

4. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Scripting Language Difference Between Scripting & Programming Languages Is Increasingly Small –More Semantic Than Significant Scripting Language Is a Marketing Term –Scripting Is Easier Than Programming!?! JavaScript Is Not Compiled –Source Code Is Distributed to Client –Difficult to Hide Source Code Almost Impossible

5. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Executable Content Web Page Needn’t Be Limited to Static HTML Include Dynamic Content Which: –Interacts With the Viewer –Controls the Browser (Ouch!) –Dynamically Creates HTML Content –Interacts With Java Applets Running on Client Commonality With CGI Programming but Significant Differences –CGI Is Server-side –CGI Uses Many Different Programming Languages Perl, Java, C/C++, Applescript, Visual Basic, etc.

6. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Powerful Language Display Additional Information About Links Create Mouse Rollover Effects Change Page Contents –Depending on Certain Conditions Randomly Display Content on a Page Move Elements Around on a Page Load Content in New Windows & Frames Interact With Cookies Interact With User Through Event Handlers

7. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Limited Language Cannot Create Graphics Limited Ability to Perform Networking Tasks –Request Content Through URL –Send Content to Servers & Mailer Cannot Read or Write to Client's Disks Does Not Support Multithreading –Only One Task Can Be Performed At a Time Viewer Has to Wait...

8. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Tricky Language Looks About As Complicated As BASIC Is Much More Complex Than BASIC –Use of Objects –Arguments to Functions Requires Careful Understanding of Argument Passing By–value By–reference Lots of Non-intuitive Aspects Lots of Very Tricky Details

9. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Unrelated to Java Java Is a Compiled Programming Language –Created and Owned by Sun Microsystems “...The Same Software Should Run on Many Different Kinds of Computers & Other Gadgets…” A Java Engine Is Included in Web Browsers Java Programs Are Often Called Applets –Little Applications –Running Is a Specialized Environment Java Programs Are Also Running Without Browsers on Many Large Computers –Mainframes

10. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Politics, politics, politics... The Name JavaScript Is Owned by Netscape Microsoft’s Implementation Is Officially Known As JScript –Very Few Make a Distinction Between the Two JScript Versions Generally Track With JavaScript Versions

11. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Politics, politics, politics... JavaScript Has Been Standardized by ECMA –European Computer Manufacturers Association Defined a Language Known As ECMAscript –Chosen to Favor No One Aka A Name No One Could Love

12. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Object -Oriented Language Different Style of Programming –Traditional Programming Called Function-oriented Data & Functions –Useful Modern Way of Thinking About Programs Some Definitions: Object: a Data Structure With a Collection of Behaviors That Can Be Performed on It Method: a Behavior Performed on an Object Class: a Definition of Methods Inherit: Receive Definitions Instance: Individual Representative of a Category

13. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Example Syntax Two Parts to Most JavaScript: –Function Definitions Tell the Browser What to Do Not Required –References To Those Functions Required

14. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Example Syntax Function Definitions –May Be Contained Directly in an HTML Page –Or in a Separate JavaScript Document References Are Contained in HTML Pages –These Are Code to Be Executed

15. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Embedded Example Status Line Example <A HREF ="http://www.disney.com" ONMOUSEOVER="window.status='Go to the Magic Kingdom?'; return true;">Disney <A HREF="http://www.wwf.com" ONMOUSEOVER="window.status='Most Polite People on Earth'; return true;">WWF

16. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Embedded Example Browser Identity Example You are using: document.write(navigator.appName + ' - ' + navigator.appVersion);

17. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC External Reference Example Today's Date The current date and time are: get_date();

18. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Common JavaScript Directory

19. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Contents of my_script.js // my_script.js /* JavaScript function which returns a formatted string containing the current date */ function get_date() { variable my_date = new Date(); return my_date.toDateString; }

20. Introduction to JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Online Examples Excellent Set of Examples Available Online At: http://examples.oreilly.com/jscript3/ http://examples.oreilly.com/jscript4/ Both Sites Are Useful Because They Provide Many of the Same Examples but Present Them Using Different Styles