introduction to javascript programming

Introduction to JavaScriptFort Collins, CO

Copyright © XTR Systems, LLC

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”

– Not a Simple Language– Most Popular Language for

• Client-side Web Programming



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



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



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.



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



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



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



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



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



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



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



Example Syntax

• Two Parts to Most JavaScript:– Function Definitions Tell the Browser What to Do

• Not Required

– References To Those Functions• Required



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



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>



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>



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>



Common JavaScript Directory



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;

}



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