Introduction to JavaScript Programming
-
Upload
jasmine-long -
Category
Documents
-
view
34 -
download
0
description
Transcript of Introduction to JavaScript Programming
Introduction to JavaScriptFort Collins, CO
Copyright © XTR Systems, LLC
Introduction to JavaScript
Programming
Instructor: Joseph DiVerdi, Ph.D., MBA
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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.
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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...
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort 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
Introduction to JavaScriptFort Collins, CO
Copyright © XTR Systems, LLC
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>
Introduction to JavaScriptFort Collins, CO
Copyright © XTR Systems, LLC
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>
Introduction to JavaScriptFort Collins, CO
Copyright © XTR Systems, LLC
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>
Introduction to JavaScriptFort Collins, CO
Copyright © XTR Systems, LLC
Common JavaScript Directory
Introduction to JavaScriptFort 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;
}
Introduction to JavaScriptFort 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