JavaScript Examples

Java Script Examples

Example 1

ex1.html: first example.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 1</title>
</head>
<body>
<script type="text/javascript">
<!--
for(i=1;i<=10;i++) 
    document.writeln("<p>The square of "+i+" is "+ i*i + ".</p>");
// -->
</script>
</body>
</html>

Example 2

ex2.html: show an alert

<script type="text/javascript">
<!--
alert("Hello World!");
// -->
</script>>

Example 3

ex3.html: comments

<script type="text/javascript">
<!--
// the program prints out numbers and there square
/* for loop
 write square from 1 to 1 */
for(i=1;i<=10;i++) 
    document.writeln("<p>The square of "+i+" is "+ i*i + ".</p>");
// -->
</script>

Example 4

ex4.html: external javascript file

<script type="text/javascript" src="ex4.js">
</script>

ex4.js

/* for loop
 write square from 1 to 1 */
for(i=1;i<=10;i++) 
    document.writeln("<p>The square of "+i+" is "+ i*i + ".</p>");

Example 5

ex5.html: join strings.

<script type="text/javascript">
<!--
var name="Charles", age=20;
document.writeln("<p>" + name + " is " + age + ".</p>");
// -->
</script>

Example 6

ex6.html: different types.

<script type="text/javascript">
<!--
var name="Charles", age=20;
document.writeln("<p>" + name + " is " + age + ".</p>");
name=20;
age="Charles"
document.writeln("<p>" + name + " is " + age + ".</p>");
// -->
</script>

Example 7

ex7.html.

<script type="text/javascript">
<!--
var name="Charles", age=20;
document.writeln("<p style=\"color: red; font-size: 30pt\">" 
+ name + " is " + age + ".</p>");
// -->
</script>

Example 8

ex8.html: different variable types.

<script type="text/javascript">
<!--
var counter, index, pi=3.1415, pi2= 31.415e-1, passExam = true, name ="Charles";
document.writeln(pi + "<br />");
document.writeln(pi2 + "<br />");
document.writeln(name + "<br />");
// -->
</script>

Example 9

ex9.html: Math class.

<script type="text/javascript">
<!--
document.writeln("<table border=\"1\">");
document.writeln("<tr><th>n</th><th>sqrt n</th></tr>");
for(var i=1; i<=100; i++) {
  document.writeln("<tr><td>" + i + "</td><td>" 
                  + Math.sqrt(i) + "</td></tr>");
}  
document.writeln("</table>");
// -->
</script>

Example 10

ex10.html: String class.

<script type="text/javascript">
<!--
var str="PIC 40A is fun!"; 
document.writeln(str.charAt(5) + "<br>"); // returns 0
document.writeln(str.indexOf('C') + "<br>"); // returns 2
document.writeln(str.indexOf("fun") + "<br>"); // return 11
document.writeln(str.indexOf("abc") + "<br>"); // return -1
document.writeln(str.substring(4, 8) + "<br>"); // returns "40A i"
document.writeln(str.toLowerCase() + "<br>"); // "pic 40a is fun!"
// -->
</script>

Example 11

ex11.html: confirm.

<script type="text/javascript">
<!--
var ans;
ans = confirm("Do you want to continue?");
if(ans) { // if true
  document.writeln("<p>Ok!!!</p>");
} else {
  document.writeln("<p>Cancel!!!</p>");
}
// -->
</script>

Example 12

ex12.html: alert and prompt.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- firstproduct.html -->
<head>
<title>JavaScript Example 12</title>

<script type="text/javascript">
<!--
   alert("Welcome to First Products in JavaScript");

   var num1, num2, product;

   num1 = prompt("Enter first integer", "0");
   num2 = prompt("Enter second integer", "0");

   product = num1 * num2;

   document.writeln("<h1>The product is " + product + "</h1>");
// -->
</script>
</head>

<body>
<p>Click Refresh (or Reload) to run script again.</p>
</body>

</html>

Example 13

ex13.html: error check.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>JavaScript Example 13</title>

<script type="text/javascript">
<!--
   alert("Welcome to Products in JavaScript");

   var num1, num2, product;

   num1 = parseInt(prompt("Enter first integer", ""));
   num2 = parseInt(prompt("Enter second integer", ""));

   if (!isNaN(num1) && !isNaN(num2)) {
      product = num1 * num2;
      document.writeln("<h1>The product is " + product + "</h1>");
   }
   else {
      document.writeln("<h1>Hey, you forgot to type in the numbers!</h1>");
   }
// -->
</script>
</head>

<body>
<p>Click Refresh (or Reload) to run script again.</p>
</body>
</html>

Example 14

ex14.html: array.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>JavaScript Example 14</title>

<script type="text/javascript">
<!--
   function avgeScores (scores)
   {
      var size = scores.length;
      var sum = 0;

      for (var i = 0; i < size; i++)
          sum += scores[i];

      return sum / size;
   }
// -->
</script>
</head>

<body>
<script type="text/javascript">
<!--
   var num = 0, i = 0;
   var scores = new Array();

   document.writeln("<h1 style=\"text-align: center\">Welcome" +
                    " to the Average Center</h1>");

   while (num != -1) {
      num = parseInt(prompt("Enter the score, -1 to stop: ", "0"));
      if (num != -1) {
         scores[i] = num;
         i++;
      }
   }

   if (i > 0) 
      document.writeln("<p>The average is " + avgeScores(scores) + "</p>")
   else
      document.writeln("<h1>You didn't enter any scores!</h1>");
// -->
</script>

<p>To find another average, click Reload (or Refresh).</p>

</body>
</html>

Example 15

ex15.html: function.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>JavaScript Example 15</title>

<script type="text/javascript">
<!--
   function absValue (n)
   {
      if (n >= 0)
         return n;
      else
         return -n;
   }

//-->
</script>
</head>

<body>
<script type="text/javascript">
<!--
   var num;

   document.writeln("<h1>Find absolute value</h1>");
   num = parseInt(prompt("Enter an integer", "0"));

   if (!isNaN(num))
      document.writeln("The absolute value of " + num + " is " + 
                        absValue(num) + "<br>");
   else
      document.writeln("<p>You did not enter a number.</p>");
// -->
</script>
<p>Click Refresh (or Reload) to run the script again.</p>

</body>
</html>

Example 16

ex16.html: sorting

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Sales Sorter for XYZ Corp.</title>

<script type="text/javascript">
<!--
   function compareFloat(num1, num2) 
   {
      return (num1 - num2);
   }
// -->
</script>
</head>

<body>
<script type="text/javascript">
<!--
   var i = 0, value = 0;
   var sales = new Array();

   value = parseFloat(prompt("Enter sales, -1 to stop: ", ""));

   while (value != -1) {
      if (!isNaN(value)) {
         sales[i] = value;
         i++;
      }

      value = prompt("Enter sales, -1 to stop: ", "");
   } 

   sales.sort(compareFloat);
   document.writeln("<h1>Sales for XYZ Corp. in order:</h1>\n<p>" +
                    sales.join(", ") + "</p>");
// -->
</script>
</body>
</html>