Download javascript_intro

Introduction to JavaScript
Fort Collins, CO
Introduction to
JavaScript
Programming
Instructor: Joseph DiVerdi, Ph.D., MBA
Copyright © XTR Systems, LLC
JavaScript In Brief
Introduction to JavaScript
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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
Copyright © XTR Systems, LLC
Executable Content
Introduction to JavaScript
Fort Collins, CO
• 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.
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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...
Copyright © XTR Systems, LLC
Tricky Language
Introduction to JavaScript
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Unrelated to Java
Introduction to JavaScript
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Politics, politics, politics...
Introduction to JavaScript
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Politics, politics, politics...
Introduction to JavaScript
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
So Many Versions
Introduction to JavaScript
Fort Collins, CO
• JavaScript, JScript, & ECMAscript Versions
– See pp 2-4 in Text Book
– See Tables 1-1 & 1-2
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
Representative Statistics
• browserwatch.internet.com
Explorer
Navigator
Opera
Other
Explorer
6.x
5.x
4.x
3.x
58%
20%
12%
10%
<1%
84%
15%
<1%
Navigator
6.x
4%
4.x
3.x
93%
3%
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
Example Syntax
• Two Parts to Most JavaScript:
– Function Definitions Tell the Browser What to Do
• Not Required
– References To Those Functions
• Required
Copyright © XTR Systems, LLC
Introduction to JavaScript
Fort Collins, CO
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
Copyright © XTR Systems, LLC
Embedded Example
Introduction to JavaScript
Fort Collins, CO
<!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>
Copyright © XTR Systems, LLC
Embedded <SCRIPT> Example
Introduction to JavaScript
Fort Collins, CO
<!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>
Copyright © XTR Systems, LLC
External Reference Example
Introduction to JavaScript
Fort Collins, CO
<!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>
Copyright © XTR Systems, LLC
Common JavaScript Directory
Introduction to JavaScript
Fort Collins, CO
Copyright © XTR Systems, LLC
Contents of my_script.js
Introduction to JavaScript
Fort Collins, CO
// 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;
}
Copyright © XTR Systems, LLC
Online Examples
Introduction to JavaScript
Fort Collins, CO
• Excellent Set of Examples With the Textbook
Is 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
Copyright © XTR Systems, LLC