Introduction To Introduction To JavaScriptJavaScript

Putting it Together (page 11)Putting it Together (page 11)

All javascript must go in-between the All javascript must go in-between the script tags.script tags.

<SCRIPT language=“JavaScript”><SCRIPT language=“JavaScript”>

javascript codejavascript code

</SCRIPT></SCRIPT>

Outputting Text (page 12)Outputting Text (page 12)

Similar to Java we can output text to Similar to Java we can output text to the screen. We do this by saying:the screen. We do this by saying:

<SCRIPT language=“JavaScript”><SCRIPT language=“JavaScript”>

document.write(“Hello World”);document.write(“Hello World”);

</SCRIPT></SCRIPT>

Hiding Text in Javascript (page Hiding Text in Javascript (page 30)30)

Similar to Java you can comment Similar to Java you can comment sections of text or code out by simply sections of text or code out by simply saying:saying:

// document.write(“You can’t See Me”);// document.write(“You can’t See Me”);

OROR

/* I don’t think/* I don’t think

You can see this section of code */You can see this section of code */

Variables (page 36)Variables (page 36)

Assigning variables in Javascript is similar Assigning variables in Javascript is similar to Javato Java

var PriceCandy;var PriceCandy;var TotalText=“Total”;var TotalText=“Total”;var PriceDrink;var PriceDrink;var total=0;var total=0;

total = PriceCandy + PriceDrink;total = PriceCandy + PriceDrink;

Incorporating HTML Tags TO Incorporating HTML Tags TO JavaScript (page 49)JavaScript (page 49)

To output some text to the screen To output some text to the screen using a HTML tag we simply say:using a HTML tag we simply say:

document.write(“<B>JavaScript document.write(“<B>JavaScript Rules</B>\n This is fun”);Rules</B>\n This is fun”);

The \n acts as a new line in The \n acts as a new line in JavaScript NOT a break line.JavaScript NOT a break line.

Displaying your variables (page Displaying your variables (page 61)61)

To display your variable to the web page then:To display your variable to the web page then:var myheading=“This is my first Javascript”;var myheading=“This is my first Javascript”;var linktag=“<A var linktag=“<A

HREF=‘http://www.google.com.au’>Web HREF=‘http://www.google.com.au’>Web link</A>”;link</A>”;

var text=“Hello”;var text=“Hello”;var begineffect=“<U>”;var begineffect=“<U>”;var endeffect=“</U>”;var endeffect=“</U>”;document.write(myheading);document.write(myheading);document.write(linktag);document.write(linktag);document.write(begineffect);document.write(begineffect);document.write(texty);document.write(texty);document.write(endeffect);document.write(endeffect);

Functions (page 70)Functions (page 70)

Similar to Java we can declare Similar to Java we can declare functions.functions.

function reallycool()function reallycool()

{{

Javascript goes hereJavascript goes here

}}

Functions & Variables (page Functions & Variables (page 76)76)

We can also pass variable into a function We can also pass variable into a function as shown:as shown:

var var1=“BMW M3”;var var1=“BMW M3”;

var var2=“Chapel St”;var var2=“Chapel St”;

function reallycool(var1,var2)function reallycool(var1,var2)

{{

document.write(“My car is a “+var1+” and document.write(“My car is a “+var1+” and I drive it to “+var2);I drive it to “+var2);

}}

ResultResult

Window Alerts (page 80)Window Alerts (page 80)

Like in DreamWeaver we can create Like in DreamWeaver we can create pop up messages by simply saying:pop up messages by simply saying:

<script language=“JavaScript”><script language=“JavaScript”>

<window.alert(“This is an alert”);<window.alert(“This is an alert”);

</script></script>

Window AlertsWindow Alerts

These can also be These can also be used for variables:used for variables:

var num1=4;var num1=4;

var var thesum=num1+7;thesum=num1+7;

window.alert(thesumwindow.alert(thesum););

If Statements (page 142)If Statements (page 142)

We can also use “if” statements like in JavaWe can also use “if” statements like in Java

var num1=0;var num1=0;var num2=0;var num2=0;if(num1==num2)if(num1==num2){{

window.alert(“True”);window.alert(“True”);}}elseelse{{

window.alert(“False”);window.alert(“False”);}}

Switch Statement (page 153)Switch Statement (page 153)

Like in Java we have switch statements Like in Java we have switch statements var thename=“Fred”;var thename=“Fred”;switch(thename)switch(thename){{

case “George” :case “George” :window.alert(“George is an OK name”);window.alert(“George is an OK name”);break;break;

case “Fred” :case “Fred” :window.alert(“Fred rules”);window.alert(“Fred rules”);break;break;

default :default :window.alert(“Cool”);window.alert(“Cool”);

}}

Loops – For (page 159)Loops – For (page 159)

We also have the for loopWe also have the for loop

for(count=1;count<11;count+=1)for(count=1;count<11;count+=1)

{{

document.write(“I am a loop”);document.write(“I am a loop”);

}}

Event Handler (page 176)Event Handler (page 176)

We can add event handlers to HTML. We can add event handlers to HTML. The onClick EventThe onClick Event

<A HREF=“http://none” <A HREF=“http://none” onClick=“window.alert(‘Hey You onClick=“window.alert(‘Hey You clicked Me’);”>Don’t Click Me</A>clicked Me’);”>Don’t Click Me</A>

Event HandlersEvent Handlers

There are many of them like:There are many of them like:onMouseOutonMouseOutonLoadonLoadonUnloadonUnloadonFocusonFocusonBluronBluronChangeonChangeonSubmitonSubmitetc..etc..

Opening New Windows (page Opening New Windows (page 280)280)

With javascript we can also open new With javascript we can also open new windows, close them and even determine windows, close them and even determine how they look:how they look:

<input TYPE="button" VALUE="Open New <input TYPE="button" VALUE="Open New Window“ Window“ onClick="NewWin=window.open('','NewWionClick="NewWin=window.open('','NewWin',n',

'toolbar=no, status=no, width=200, 'toolbar=no, status=no, width=200, height=100'); ">height=100'); ">

Opens New WindowOpens New Window

Window AttributesWindow Attributes

<form NAME="winform"><form NAME="winform"> <p><input TYPE="button" VALUE="Open New <p><input TYPE="button" VALUE="Open New

Window"Window" onClick="NewWin=window.open('','NewWin',onClick="NewWin=window.open('','NewWin','toolbar=no,status=no,width=200,height=100');'toolbar=no,status=no,width=200,height=100');

">"> </p></p> <p><input TYPE="button" VALUE="Close New <p><input TYPE="button" VALUE="Close New

Window" onClick="NewWin.close();"> </p>Window" onClick="NewWin.close();"> </p> <p><input TYPE="button" VALUE="Close Main <p><input TYPE="button" VALUE="Close Main

Window" onClick="window.close();"> </p>Window" onClick="window.close();"> </p></form></form>

Handling StringsHandling Strings bold() – adds <B> and </B> tags around a string valuebold() – adds <B> and </B> tags around a string value chatAt() – finds out which character is at a given position in a stringchatAt() – finds out which character is at a given position in a string concat()-adds two or more strings together and returns the new concat()-adds two or more strings together and returns the new

combined string valuecombined string value fontcolor() – adds <FONT color=“color”> and </FONT> tags around fontcolor() – adds <FONT color=“color”> and </FONT> tags around

a string value, which change the size of the string to a specified size a string value, which change the size of the string to a specified size given as number;given as number;

indexOf() - searches for a character sent as a parameter in a string. indexOf() - searches for a character sent as a parameter in a string. If it’s found, the position of the first instance of the character is If it’s found, the position of the first instance of the character is returned; otherwise, it returns –1;returned; otherwise, it returns –1;

replace() – finds out if a regular expression matches a string and replace() – finds out if a regular expression matches a string and then replaces a matched string with a new string;then replaces a matched string with a new string;

substr() – allows a portion of the string specified with a start substr() – allows a portion of the string specified with a start position and an ending position to be returned.position and an ending position to be returned.

( more methods of string Object – page 408-409, ( more methods of string Object – page 408-409, the book)the book)

JavaScript Doesn’t End ThereJavaScript Doesn’t End There

JavaScript is quite large scripting JavaScript is quite large scripting language so read your books and language so read your books and ensure that you look into all the ensure that you look into all the different capabilities of JavaScript.different capabilities of JavaScript.

Useful links:Useful links:

http://www.dhtmlcentral.comhttp://www.dhtmlcentral.com

http://www.w3schools.comhttp://www.w3schools.com

http://www.htmlgoodies.comhttp://www.htmlgoodies.com