JavaScript Handout--TBE 550

JavaScript

JavaScript Primer--http://www.wsabstract.com/javatutors/primer1.shtml

The JavaScript Source--http://javascript.internet.com/

Website Abstraction/JavaScript Tutorials--http://www.wsabstract.com/javaindex.shtml

What is JavaScript?

An object-oriented programming language used to extend the capabilities of web pages. NOTE: "Object-oriented" refers to the objects on the web page (like windows, documents, images, forms, etc.). Each of these objects has properties (like the background color of a page) that can be addressed using a "dot" syntax. For example, to set the background color of a web page to white, you would write window.document, bgcolor.value="#FFFFFF" This dot syntax starts with the "highest" level (window), then proceeds down to the document within the window, the background color of the document within the window, etc.
Similar to Java, but a subset of Java commands. Java must be compiled (changed into binary code) and place on a server before it is run.
Similar to C and C++ (and even Lingo--from Director, sort of).
JavaScript is written inside the HTML and may be executed when the page is loaded. Other programming languages used with web pages (like Java and Perl) must be compiled (translated to machine code) and stored on a web server. They don't show up in the HTML page source.

Where does your JavaScript code go?

You will use <SCRIPT LANGUAGE="JavaScript"> and </SCRIPT> to surround your program code. NOTE: Be careful about upper and lower case letters in JavaScript.
JavaScript code is often (though not always) placed in the <HEAD> section.

What does JavaScript look like?

Here is a short sample of JavaScript within the HTML of a web page. It writes the words Hi there. This text is an example of text written using javascript! on a web page.

<HTML>

<HEAD><TITLE>JS</TITLE>

<SCRIPT LANGUAGE="JavaScript">

document.write("Hi there. This text is an example of text written using javascript!")

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>

The web page is called a document. This is an example of an "object", the basis for all of JavaScript. Objects usually have properties and methods. Examples of document properties are bgcolor (written as document.bgcolor) and title (written as document.title). Windows, frames, and many other page elements are objects. You can assign values to properties (e.g. document.bgcolor="#FFFF00") using JavaScript. A method is something you do to an object. In the short example above, you are writing something in the document, so write is the method.

JavaScript functions are small programs that accomplish something. Each function must have a unique name. They are "called" from somewhere in the web page (a button, a click, another function, etc.). Functions often contain some kind of variable and other types of JavaScript commands (e.g., IF, FOR object.property.method statements, calculations, etc.). Braces ({}) are used throughout a function to show where the functions begins/ends and to group statements that belong together. Semicolons (;) are often used between lines. The function raiseP below takes in two numbers (shown as the variables x and y), then raises x to the power of y. For example, a line in the web page that says var Z=raiseP(4,3) results in the number 64 (4 ³) being returned to the variable Z.

function raiseP(x,y) the name of the function and the two variables x & y

{ brace shows "begin here"

total=1; start with a total of 1

for (j=0; j<y; j++) a "loop", the calculation below is repeated y times,
variable j is used to keep count, j starts at 0 and
repeats as long as j is less than y, j++ means add 1 each loop

{ total*=x; } variable total is multiplied by x, the new amount replaces old
total, braces show what is repeated

return total; variable total (the answer) is sent back

} brace shows "end here"

Remember: JavaScript is "case sensitive," so watch your capitalization.

The example below shows one of the examples on the class website. It makes a web page that continuously scrolls a message at the bottom of the window. All the JavaScript code is in the <HEAD> section, so it is run automatically when the page is loaded.

<HTML>

<HEAD>

<script language="JavaScript"> Javascript begins here

var scrollCounter=0; variables begin here

var scrollText="Welcome to Room 1117's web page! Isn't it SPECIAL?"; the message is put into scrollText

var scrollDelay=70; other variables

var i=0; are set up

while(i++<140) another kind of loop, adds 140 spaces to message, it means
"keep adding 1 to the variable i as long as i is less than 140"

scrollText=" " + scrollText;
add a space at the font of message

function Scroller() here's the function definition for Scroller()
Notice the () after Scroller, all fucntions have them

{ braces show contents of Scroller()

window.status=scrollText.substring(scrollCounter++,scrollText.length) put part of message at bottom of window

if (scrollCounter = = scrollText.length) Are we done yet?

scrollCounter=0; If so, set the counter back to 0

setTimeout("Scroller()",scrollDelay); wait just a little while, then do Scroller() again--just like recursion in Logo!

} end of Scroller() definition

Scroller(); actually start Scroller()

</script> script ends here

</HEAD>

<BODY>

<h1>Scroller Example</h1> not much on the

<p>See bottom of screen for a short message.</p> actual web page

</BODY>

</HTML>

Here's another example (writing the current date in a web page). Only the JavaScript and surrounding code is shown.

<HEAD>

<TITLE>SHOW DATE ON THE WEB PAGE</TITLE>

<SCRIPT language="JavaScript">

function write_date( ) define the write_date ( ) function

{

var thetime=new Date( ); get the date/time from the computer

var nday=thetime.getDay( );

var nmonth=thetime.getMonth( ); split it up into its component parts

var ntoday=thetime.getDate( ); and put it into variables

var nyear=thetime.getYear( );

var AorP=" ";

if (nday==0) nday="Sunday";

if (nday==1) nday="Monday";

if (nday==2) nday="Tuesday"; determine the name of the current day, based on

if (nday==3) nday="Wednesday"; the number from the system

if (nday==4) nday="Thursday";

if (nday==5) nday="Friday";

if (nday==6) nday="Saturday";

nmonth+=1; add 1 to the month from the system

if (nyear<=99) nyear= "19"+nyear; put 19 in front of the year

if ((nyear>99) && (nyear<2000)) nyear+=1900; check to see if it's over 2000

document.write("Today is "+nday+", "+nmonth+"-"+ntoday+"-"+nyear); write Today is and the variables

} end the definition

</SCRIPT></head>

<body bgcolor="white">

<SCRIPT language="JavaScript"> write_date( ); </SCRIPT> activate the write_date ( ) function where the writing should go

</body>

function raiseP(x,y)	the name of the function and the two variables x & y
{	brace shows "begin here"
total=1;	start with a total of 1
for (j=0; j<y; j++)	a "loop", the calculation below is repeated y times, variable j is used to keep count, j starts at 0 and repeats as long as j is less than y, j++ means add 1 each loop
*{ total=x; }**	variable total is multiplied by x, the new amount replaces old total, braces show what is repeated
return total;	variable total (the answer) is sent back
}	brace shows "end here"

<HTML>
<HEAD>
<script language="JavaScript">	Javascript begins here
var scrollCounter=0;	variables begin here
var scrollText="Welcome to Room 1117's web page! Isn't it SPECIAL?";	the message is put into scrollText
var scrollDelay=70;	other variables
var i=0;	are set up
while(i++<140)	another kind of loop, adds 140 spaces to message, it means "keep adding 1 to the variable i as long as i is less than 140"
scrollText=" " + scrollText;	add a space at the font of message
function Scroller()	here's the function definition for Scroller() Notice the () after Scroller, all fucntions have them
{	braces show contents of Scroller()
window.status=scrollText.substring(scrollCounter++,scrollText.length)	put part of message at bottom of window
if (scrollCounter = = scrollText.length)	Are we done yet?
scrollCounter=0;	If so, set the counter back to 0
setTimeout("Scroller()",scrollDelay);	wait just a little while, then do Scroller() again--just like recursion in Logo!
}	end of Scroller() definition
Scroller();	actually start Scroller()
</script>	script ends here
</HEAD>
<BODY>
<h1>Scroller Example</h1>	not much on the
<p>See bottom of screen for a short message.</p>	actual web page
</BODY>
</HTML>

<HEAD>
<TITLE>SHOW DATE ON THE WEB PAGE</TITLE>
<SCRIPT language="JavaScript">
function write_date( )	define the write_date ( ) function
{
var thetime=new Date( );	get the date/time from the computer
var nday=thetime.getDay( );
var nmonth=thetime.getMonth( );	split it up into its component parts
var ntoday=thetime.getDate( );	and put it into variables
var nyear=thetime.getYear( );
var AorP=" ";
if (nday==0) nday="Sunday";
if (nday==1) nday="Monday";
if (nday==2) nday="Tuesday";	determine the name of the current day, based on
if (nday==3) nday="Wednesday";	the number from the system
if (nday==4) nday="Thursday";
if (nday==5) nday="Friday";
if (nday==6) nday="Saturday";
nmonth+=1;	add 1 to the month from the system
if (nyear<=99) nyear= "19"+nyear;	put 19 in front of the year
if ((nyear>99) && (nyear<2000)) nyear+=1900;	check to see if it's over 2000
document.write("Today is "+nday+", "+nmonth+"-"+ntoday+"-"+nyear);	write Today is and the variables
}	end the definition
</SCRIPT></head>
<body bgcolor="white">
<SCRIPT language="JavaScript"> write_date( ); </SCRIPT>	activate the write_date ( ) function where the writing should go
</body>