Practical JavaScript

Mary Nguyen, Duy-Ky Nguyen, PhD

1. Basics

1.1. JavaScript Code

JS Code could be in either <head> or <body> for both internal and external one.

1.1.1. Internal Script : <script type="text/javascript"> . . . </script>

<script>
alert("My First JavaScript");
</script>

1.1.2. External Script : <script src="xxx.js"></script>


<script src="xxx.js"></script>

1.2. HTML DOM (Document Object Model) : document

1.2.1. DOM method

write(string) - write into HTML output
getElementById(id) - get the node (element) with a specified id

Example
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

1.2.2. DOM properties:

innerHTML - the text value of a node (element)

Change HTML content
x=document.getElementById("demo");  // Find the element id="demo" defined somewhere
x.innerHTML="Hello JavaScript!";    // Change the content
x.style.color="#ff0000";         //Change the style

Change HTML Image
element=document.getElementById('myimage')
element.src="pic_bulboff.gif";

1.2.3. DOM Events

onclick
onload
onsubmit

1.2.4. DOM Form

Properties : action, name
Methods : reset(), submit()

Example.1 : by "name"
<script>
function formSubmit()
{
document.my_form1.submit();
}
</script>
</head>
<body>

<form name="my_form1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="button" onclick="formSubmit()" value="Submit form">
</form>

Example.2 by "id"
<script>
function formSubmit()
{
document.getElementById("frm1").submit();
}
</script>
</head>
<body>

<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="button" onclick="formSubmit()" value="Submit form">
</form>

2. JavaScript Statements : C++ Style

2.1. Variable Declarations

Identifier var is used to declare variable anywhere, like C++
JS data type is automatic (no type specified) and dynamic (change to another type)

var num_int = 5;       // an integer
var num_flt = 3.14;    // a float
var x;               // Now x is undefined
var x = 5;           // Now x is a Number
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123
var x = "John";      // Now x is a String
var name = "JavaScript";    // a string in quotes "..."

Re-Declaring JavaScript Variables won't lose value
var carname="Toyota";    // carname has value "Toyota"
var carname;             // value still "Toyota"

Single Line
var lastname="Doe", age=30, job="carpenter";

Multiple lines
var lastname="Doe",
age=30,
job="carpenter";

JavaScript Has Dynamic Types
var x;             // Now x is undefined
var x = 5;           // Now x is a Number
var x = "John";      // Now x is a String

JavaScript Booleans
var x=true;
var y=false;

JavaScript Arrays
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

2.2. Operators

var x=5+5;   // 10
var y="5"+5;   // 55 : string concat
var z="Hello"+5;   // Hello5 : string concat


== is equal to
=== is exactly equal to (value and type)

!= is not equal
!== is not equal (neither value nor type)

2.3 Statements

C++ : if-then-else, for, while, switch, break, default

for (var i=0;i<10;i++)
  {
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
  }

2.4. Error : Built-in "err"

 try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}

2.5. JavaScript Objects

 Example 1
Create an object "person" with 4 properties
<html>
<body>

<p id="demo"></p>

<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

and here's the output

3. JavaScript Functions : function

 function func_name(arg1, arg2)   // or () for void, no var
{
    // code
    //return value;   // optional
}

4. JavaScript Events


 Example 1
Create a button for an action
<html>
<body>

<button type="button" onclick="alert('Hello world!')">Click Me!</button>
 
</body>
</html>

and here's the output

Example 2
 Create a button to call a function 
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
 
</body>
</html>

and here's the output

Example 3
Create a button get user input using "alert()" for debugging purpose
<html>
<head>
	<meta charset="utf-8">
	<title>Input Text Form</title>

	<script>
    	var yourName;
    	var yourGender;
      	function Get_It()
      	{
        	yourName = document.Form_1.y_Name.value;
        	alert(yourName);

        	yourGender = document.Form_1.y_Gender.value;
        	alert(yourGender);
      	}
    </script>
</head>

<body>

  <form name="Form_1">
    	Your Name : <input type="text" name="y_Name" value="" size="20"><br/>
    	Your Gender : <input type="text" name="y_Gender" value="" size="20">
    	<button onClick="Get_It()"> Get It </button>
  </form>

  </body>
</html>

and here's the output