[Go to site: main page, start]
Scribd
Upload
15 views14 pages

JavaScript Examples and Tutorials

The document provides 17 JavaScript examples demonstrating different techniques, including: 1. Writing text to the document 2. Displaying the current date and time 3. Getting the last modified date/time 4. Changing background and text colors with buttons 5. Calculating tax with a textbox 6. Creating an alert popup 7. Looping to display numbers divisible by 11 8. Performing calculations

Uploaded by

Rochana Ramanayaka
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views14 pages

JavaScript Examples and Tutorials

The document provides 17 JavaScript examples demonstrating different techniques, including: 1. Writing text to the document 2. Displaying the current date and time 3. Getting the last modified date/time 4. Changing background and text colors with buttons 5. Calculating tax with a textbox 6. Creating an alert popup 7. Looping to display numbers divisible by 11 8. Performing calculations

Uploaded by

Rochana Ramanayaka
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Java Scripts - Examples Example 01 Let's start JavaScript Lessons.

<html> <head> <title> </title> </head> <body> <script language="javascript"> <!-[Link]("Let's start JavaScript Lessons."); //--> </script> </body> </html>

Example 02 The program will display the current year, month, date hour, minute, and second. 2006Year2Month23date15hour48minute44second

<html> <head> <title>Date and Time </title> </head> <body> The program will display the current year, month, date hour, minute, and second.<br> <script language="javascript">

<!-// Creating an Date object now = new Date(); /* Getting and Displayinf the year, month, date, hour, minute, and second*/ [Link]([Link]()+"Year");

[Link]([Link]()+1,"Month",[Link](),"date"); [Link]([Link](),"hour",[Link](),"minute"); [Link]([Link](),"second"); //--> </script> </body> </html> Example 03 The last modified date/time:10/24/2003 20:10:46

<html> <head> <title>The last modified date and time</title> </head> <body> <script language="javascript"> <!-[Link]("The last modified date/time:", [Link]); //--> </script> </body> </html> Example 04

<HTML> <HEAD> <TITLE>Change Background and Text color</TITLE> </HEAD>

<BODY bgcolor="white"> <form> Change the Background color:<br><br> Please select a button for the color of your choice.<br><br> <Input type="button" value="Yellow" <Input type="button" value="pink" <Input type="button" value="lime" <Input type="button" value="white" <br><br> change the Text color:<br> Please select a button for the color of your choice.<br><br> <Input type="button" value="red" <Input type="button" value="green" <Input type="button" value="blue" <Input type="button" value="black" </form> </BODY> </HTML> Example 05

<html> <head> <title>Textbox Value </title> <script language="javascript"> <!--

//Calculate tax function calc() { [Link] = [Link] * 1.05; } //--> </script> </head> <body> <form name="myform"> Enter your value here: <input type="text" Name="input" size="10" <br><br> Your price including tax is: <input type="text" Name="result" size="10">Yen </form> </body> </html>

Example 06

<BODY> <CENTER> <FORM>

<INPUT TYPE="button" VALUE="Click here to be alerted" You have been alerted.")'> </FORM> </CENTER>

Example 07 For numbers between 1 and 100, the numbers that can be divided by 11 are; 11,22,33,44,55,66,77,88,99,

<html> <head> <title>[Link] </title> </head> <body> For numbers between 1 and 100, the numbers that can be divided by 11 are; <!--Input JavaScript statements below--> <script language="javascript"> <!-for (i= 1; i<100; i++){ if (i%11==0){ [Link](i,","); } } //--> </script> </body> </html> Example 08 Calculation: The result of 100-10*2 is <html> <head> <title>[Link] </title> </head> <body> Calculation: The result of 100-10*2 is <script language="javascript"> <!-goukei=100-10*2; [Link](goukei); //--> </script> </body> </html> 80

Example 09

<HTML> <HEAD> <TITLE>[Link]</TITLE> </HEAD>

<BODY bgcolor="ffcc99" I am a cat!!<BR><BR> <IMG SRC = 'image/[Link]'><BR><BR> <script language="javascript"> <!-[Link]("The last modified date/time:", [Link],"<br>"); //--> </script> <form> <input type="button" value="close" </form>

</BODY> </HTML>

Example 10 This shows how to get the date according the this format(2003-Oct-24) using array 2003-Oct-24 <html> <head> <title>[Link] </title> </head> <body> This shows how to get the date according the this format(2003-Oct-24) using array<br><br> <script language="javascript"> // var array1 = new Array(""Jan", "Feb","Mar","Apr","May","Jun","Jul","Aug","sep","Oct","Nov","Dec"); var array1 = new Array(12); array1[0]="Jan"; array1[1]="Feb"; array1[2]="Mar"; array1[3]="Apr"; array1[4]="Mar"; array1[5]="Jun"; array1[6]="Jul"; array1[7]="Aug"; array1[8]="Sep"; array1[9]="Oct"; array1[10]="Nov"; array1[11]="Dec"; var lastMD=new Date([Link]); var yy = [Link]() var MMM =array1[[Link]()] var dd= [Link]() [Link](yy,"-",MMM,"-",dd); //--> </script> </body> </html>

Example 11

<html> <head> <title>[Link] </title> <script language="javascript"> function message(){ alert("Welcome to my home page"); } </script> </head> <body> <a href="[Link] Welcome to the home page </a> </body> </html>

Example 12

<html> <head> <title>Form Validation Checking</title> <script language="javascript"> <!-//Calculate to check form input function checkForm() { if ([Link]==""){ alert("please input the postal code."); return false; } if ([Link]==""){ alert("please input the address."); return false; } if ([Link]==""){ alert("please input the name."); return false; } return true; } //--> </script> </head> <body>

Please fill up these text boxes(all inputs are required).<br> <form action ="[Link]" name="fm" checkForm()"> Postal Code: <input type="text" Name="yubin" size="8"><br> Address: <input type="text" Name="address" size="40"><br> Name: <input type="text" Name="name" size="20"><br> <input type="submit" value="Submit"> <input type="reset" value="Cancel"> </form>

</body> </html> Example 13

<html> <head> <title>Opening a Window </title>

10

<script language="javascript"> function winopen1() { [Link]("[Link]","new", "menubar=yes, scrollbars=yes,width=300,height=400").moveTo(200,200); } </script> </head> <body> click this button to Open a new Window <br> <br> <form> <input type="button" value="new window" </form> </body> </html> Example 14 Loop1:JavaScript Loop2:JavaScript Loop3:JavaScript Loop4:JavaScript Loop5:JavaScript <html> <head> <title>[Link] </title> </head> <body> <script language="javascript"> <!-/* i start as 1, continue adding 1 while i is less than 6(repetition 5 times).*/ for (i=1; i<6; i++){ [Link]("Loop",i,":JavaScript<br>"); } --> </script> </body> </html>

11

Example 15

<html> <head> <title>Definition Window</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="100%" height="485"><tr><td valign="top"> <h2>Definition Window</h2>

<p 'NewWindow','WIDTH=400,height=400');" style="cursor:hand"> 1. <font color="blue"><u>Activist</u></font></p> </body> </html>

12

Example 16 16Good afternoon2006Year

<html> <head> <title>[Link] </title> </head> <body> <script language="javascript">

<!-// timecheck timecheck = new Date(); Year= new Date(); if([Link]()<12){ [Link]([Link](), "Good Morning"); }else { [Link]([Link](), "Good afternoon"); } {[Link]([Link]()+"Year"); } //--> </script> </body> </html> Example 17

13

<head> <title>weight calculation </title> <script language="javascript"> <!-//Calculate weight function check() { [Link] = [Link] * [Link] * 22/10000; } //--> </script> </head> <body>

Let's find your Ideal Weight; <table> <form name="myform"> <tr> <td>Height(cm)</td> <td>Height(cm)</td> <td></td> <td></td> <td>Ideal weight(kg)</td> </tr> <tr> <td> <input type="text" Name="height" size="15">*</td> <td> <input type="text" Name="height2" size="15" <td>*22/10000<td> <td> <input type="text" Name="weight" size="15"></td> </tr> <td colspan="3" align="right"><input type="reset" value="reset"></td> </tr> </form> </table> <font color="red">* Enter values into the first to textboxes, and then<br> move the cursor to "Ideal weight".</font><br><br> </body> </html>

14

You might also like