Introduction to JavaScript Programming

1. Introduction to JavaScript Programming Instructor: Joseph DiVerdi, Ph.D., MBA

2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Example Syntax • Two Parts to Most JavaScript: • Function Definitions Tell the Browser What to Do • Not Required • References To Those Functions • Required

14. 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. Embedded Example <!DOCTYPE HTML PUBLIC ... > <HTML> <HEAD><TITLE>Status Line Example</TITLE></HEAD> <BODY> <A HREF ="http://www.disney.com" ONMOUSEOVER="window.status='Go to the Magic Kingdom?'; return true;">Disney</A> <A HREF="http://www.wwf.com" ONMOUSEOVER="window.status='Most Polite People on Earth'; return true;">WWF</A> </BODY> </HTML>

16. Embedded <SCRIPT> Example <!DOCTYPE HTMLPUBLIC ... > <HTML> <HEAD><TITLE>Browser Identity Example</TITLE></HEAD> <BODY> You are using: <SCRIPT TYPE="text/javascript"> document.write(navigator.appName + ' - ' + navigator.appVersion); </SCRIPT> </BODY> </HTML>

17. External Reference Example <!DOCTYPE HTML PUBLIC ... > <HTML> <HEAD> <SCRIPT TYPE="text/javascript" SRC="/~diverdi/my_script.js"></SCRIPT> <TITLE>Today's Date</TITLE> </HEAD> <BODY> The current date and time are: <SCRIPT TYPE="text/javascript">get_date();</SCRIPT> </BODY> </HTML>

18. Common JavaScript Directory

19. 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. 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