1 / 20

Introduction to JavaScript Programming

Introduction to JavaScript Programming. Instructor: Joseph DiVerdi, Ph.D., MBA. 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”

Download Presentation

Introduction to JavaScript Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related