Introduction To JavaScript

Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script tags. javascript code </SCRIPT>

Outputting Text (page 12) Similar to Java we can output text to the screen. We do this by saying: Similar to Java we can output text to the screen. We do this by saying: document.write(“Hello World”); </SCRIPT>

Hiding Text in Javascript (page 30) Similar to Java you can comment sections of text or code out by simply saying: Similar to Java you can comment sections of text or code out by simply saying: // document.write(“You can’t See Me”); OR /* I don’t think You can see this section of code */

Variables (page 36) Assigning variables in Javascript is similar to Java Assigning variables in Javascript is similar to Java var PriceCandy; var TotalText=“Total”; var PriceDrink; var total=0; total = PriceCandy + PriceDrink;

Incorporating HTML Tags TO JavaScript (page 49) To output some text to the screen using a HTML tag we simply say: To output some text to the screen using a HTML tag we simply say: document.write(“ JavaScript Rules \n This is fun”); The \n acts as a new line in JavaScript NOT a break line.

Displaying your variables (page 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 linktag=“ Web link ”; var text=“Hello”; var begineffect=“ ”; var endeffect=“ ”; document.write(myheading);document.write(linktag);document.write(begineffect);document.write(texty);document.write(endeffect);

Functions (page 70) Similar to Java we can declare functions. Similar to Java we can declare functions. function reallycool() { Javascript goes here }

Functions & Variables (page 76) We can also pass variable into a function as shown: We can also pass variable into a function as shown: var var1=“BMW M3”; var var2=“Chapel St”; function reallycool(var1,var2) { document.write(“My car is a “+var1+” and I drive it to “+var2); }

Result

Window Alerts (page 80) Like in DreamWeaver we can create pop up messages by simply saying: Like in DreamWeaver we can create pop up messages by simply saying: <window.alert(“This is an alert”); </script>

Window Alerts These can also be used for variables: These can also be used for variables: var num1=4; var thesum=num1+7; window.alert(thesum);

If Statements (page 142) We can also use “if” statements like in Java We can also use “if” statements like in Java var num1=0; var num2=0; if(num1==num2){window.alert(“True”);}else{window.alert(“False”);}

Switch Statement (page 153) Like in Java we have switch statements Like in Java we have switch statements var thename=“Fred”; switch(thename){ case “George” : window.alert(“George is an OK name”); break; case “Fred” : window.alert(“Fred rules”); break; default : window.alert(“Cool”);}

Loops – For (page 159) We also have the for loop We also have the for loopfor(count=1;count<11;count+=1){ document.write(“I am a loop”); }

Event Handler (page 176) We can add event handlers to HTML. The onClick Event We can add event handlers to HTML. The onClick Event Don’t Click Me Don’t Click Me

Event Handlers There are many of them like: There are many of them like: onMouseOut onMouseOut onLoad onLoad onUnload onUnload onFocus onFocus onBlur onBlur onChange onChange onSubmit onSubmit etc.. etc..

Opening New Windows (page 280) With javascript we can also open new windows, close them and even determine how they look: With javascript we can also open new windows, close them and even determine how they look: <input TYPE="button" VALUE="Open New Window“ onClick="NewWin=window.open('','NewWin', 'toolbar=no, status=no, width=200, height=100'); ">

Opens New Window

Window Attributes <input TYPE="button" VALUE="Open New Window" onClick="NewWin=window.open('','NewWin', onClick="NewWin=window.open('','NewWin','toolbar=no,status=no,width=200,height=100');"> </form>

Handling Strings bold() – adds and tags around a string value bold() – adds and tags around a string value chatAt() – finds out which character is at a given position in a string chatAt() – finds out which character is at a given position in a string concat()-adds two or more strings together and returns the new combined string value concat()-adds two or more strings together and returns the new combined string value fontcolor() – adds and tags around a string value, which change the size of the string to a specified size given as number; fontcolor() – adds and tags around a string value, which change the size of the string to a specified size given as number; 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 returned; otherwise, it returns –1; 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 returned; otherwise, it returns –1; replace() – finds out if a regular expression matches a string and then replaces a matched string with a new string; replace() – finds out if a regular expression matches a string and then replaces a matched string with a new string; substr() – allows a portion of the string specified with a start position and an ending position to be returned. substr() – allows a portion of the string specified with a start position and an ending position to be returned. ( more methods of string Object – page , the book)

JavaScript Doesn’t End There JavaScript is quite large scripting language so read your books and ensure that you look into all the different capabilities of JavaScript. JavaScript is quite large scripting language so read your books and ensure that you look into all the different capabilities of JavaScript. Useful links: Useful links: