<HTML> <HEAD> <TITLE>Javascript Example</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- alert("Thank you for visiting my web site!") //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>example-writing on the page</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- document.write("Hello! Thank you for visiting my web site.") //--> </SCRIPT> </BODY> </HTML>
Functions Definition function myfunction() { // some code }
Operators in JavaScript + For addition of two values - for subtraction of two values * for multiplication / for division % modulus (calculating the remainder) ++ increment -- decrement
Logical operators && logical and || logical or ! logical not if(x<y&&x<z) { any statement } if(!false){ statement }
Comparison Operators == Equal != not equal < Less than <= less than equal > Greater than >= Greater than equal
<HTML> <script language="JavaScript"> <!-- function Addit() { var num1=document.Calform.One.value; var num2=document.Calform.Two.value; alert(parseFloat(num1)+parseFloat(num2)); } function minus() alert(parseFloat(num1)-parseFloat(num2)); //--> </script> <BODY>Add and Subtract Calculator <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3"> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <INPUT TYPE="button" NAME="Add" VALUE="Add Them!!" onclick="Addit()"> <INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!" onclick="minus()"> <INPUT TYPE="RESET" VALUE="Reset!"> </FORM> </BODY> </HTML>
Calculator <HTML> <HEAD>Add Subtract Calculator <script language="JavaScript"> <!-- function Addit() { var num1=document.Calform.One.value; var num2=document.Calform.Two.value; document.Calform.result.value=parseFloat(num1)+parseFloat(num2); //alert(parseFloat(num1)+parseFloat(num2)); } function minus() document.Calform.result.value=parseFloat(num1)-parseFloat(num2); //alert(parseFloat(num1)-parseFloat(num2)); //--> </script>
Calculator <Title> My Simple Calculator</Title> <BODY> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3"> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> Result:<INPUT TYPE="TEXT" NAME="result" maxlength="9" Disabled> <INPUT TYPE="button" NAME="Add" VALUE="Add Them!!" onclick="Addit()"> <INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!" onclick="minus()"> <INPUT TYPE="RESET" VALUE="Reset!"> </FORM> </BODY> </HTML>
<HTML> <script language="JavaScript"> <!-- function Addit() { var num1=document.Calform.One.value; var num2=document.Calform.Two.value; document.write("The result of this addition is " + (parseFloat(num1)+parseFloat(num2))); } function minus() document.write("The result of this subtraction is " + (parseFloat(num1)-parseFloat(num2))); //--> </script> <BODY> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3"> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <INPUT TYPE="button" NAME="Add" VALUE="Add Them!!" onclick="Addit()"> <INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!" onclick="minus()"> <INPUT TYPE="RESET" VALUE="Reset!"> </FORM> </BODY> </HTML>
<HTML> <script language="JavaScript"> <!-- function Multiplyit() { var num1=document.Calform.One.value; var num2=document.Calform.Two.value; alert(parseFloat(num1)*parseFloat(num2)); } function Divideit() alert(parseFloat(num1)/parseFloat(num2)); //--> </script> <BODY><h2> Multiply and Divide Calculator</h2> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3"> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <INPUT TYPE="button" NAME="Multiply" VALUE="Multiply" onclick="Multiplyit()"> <INPUT TYPE="button" NAME="Divide" VALUE="Divide" onclick="Divideit()"> <INPUT TYPE="RESET" VALUE="Reset!"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>A Drop-Down List of Links</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function GoToIt(list) { var selection = list.options[list.selectedIndex].value if (selection != "None") location.href = selection } //--> </SCRIPT> <BODY> <FORM> <SELECT WIDTH="20" onChange="GoToIt(this)"> <OPTION VALUE="None">Select a page previously done ---> <OPTION VALUE="calculator.htm">Calculator <OPTION VALUE="styles.htm">Style Sheet <OPTION VALUE="forms.htm">Web Forms <OPTION VALUE="tablemargin.htm">Table Margins <OPTION VALUE="frames.htm">Frames </SELECT> </FORM> </BODY> </HTML>
<HTML> <script language="JavaScript"> <!-- function minus() { var num1=document.Calform.One.value; var num2=document.Calform.Two.value; if(parseFloat(num1)<parseFloat(num2)) { alert("negative"); } else alert(parseFloat(num1)-parseFloat(num2)); //--> </script> <BODY> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3"> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <INPUT TYPE="button" NAME="Minus" VALUE="Subtract" onclick="minus()"> <INPUT TYPE="RESET" VALUE="Reset!"> </FORM> </BODY> </HTML>
Loops For loop for(intialization;condition;increment) {statements} While loop while(codition){statements} Do while loop do{statements}while(condition) Keep on executing a code till a certain condition is met.
For Loop <HTML> <HEAD> <TITLE>Using the For Statement</TITLE> </HEAD> <BODY> <SCRIPT> <!-- for(i=1;i<7;i++) document.write("<H"+i+">Hello "+i+"!!</H"+i+">"); //-> </SCRIPT> </BODY> </HTML>
Some Predefined Objects Global Array String Math Date … etc.
Example of Math object <HTML> <HEAD> <TITLE>Using the Math object</TITLE> </HEAD> <BODY> <H1>Using the Math object </H1> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- document.write("Math.PI :" +Math.PI +"<P>"); document.write("Math.LN2 :"+Math.LN2+"<P>"); document.write("Math.sin(90) :"+Math.sin(90)+"<P>"); document.write("Math.random() :"+Math.random()+"<P>"); document.write("Math.pow(2,3) :"+Math.pow(2,3)+"<P>"); document.write("Math.min(123,133): "+Math.min(123,133)+"<P>"); //--> </SCRIPT> </BODY> </HTML>
Array Object <HTML> <HEAD> <TITLE>Using Arrays </TITLE> </HEAD> <BODY> <H1>Using Arrays </H1> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- myArray=[0,1,2,3,4,5,6,7,8,9,10]; document.write("myArray: first element " +myArray[0]+"<P>"); document.write("myArray.toString(): "+myArray.toString()+"<P>"); document.write("myArray.join(':'): "+myArray.join(':')+"<P>"); document.write("myArray.reverse(): "+myArray.reverse()+"<P>"); document.write("myArray.sort(): "+myArray.sort()+"<P>"); //--> </SCRIPT> </BODY> </HTML>