some-javascript-sample-code

Some JavaScript Sample Code

2013-10-02

Note: most of code were from internet, such as w3school.

x=document.getElementById("demo")  //Find the element      
x.innerHTML="Hello JavaScript";    //Change the content

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

_<!DOCTYPE html>      
<html>       
<body>       
<script src="myScript.js"></script>       
</body>       
</html>_

4: JavaScript Arrays:

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

_var cars=new Array("Saab","Volvo","BMW");_

_var cars=["Saab","Volvo","BMW"];_

5:
JavaScript Objects:

_var person={      
firstname : "John",       
lastname  : "Doe",       
id        :  5566       
};_
  
_name=person.lastname;      
name=person["lastname"];_

Declaring Variables as Objects:

var name = new String;      
var x =    new Number;       
var y =    new Boolean;
  
person=new Object();      
person.firstname="John";       
person.lastname="Doe";       
person.age=50;       
person.eyecolor="blue";

6: If you add a number and a string, the result will be a string!

x=5+5;   //result is 10      
y="5"+5;    //result: "55"       
z="Hello"+5;  //result: "Hello5"

var person={fname:"John",lname:"Doe",age:25};      
for (x in person)       
  {       
  txt=txt + person[x];       
  }

cars=["BMW","Volvo","Saab","Ford"];      
list:       
{       
document.write(cars[0] + "<br>");       
document.write(cars[1] + "<br>");       
document.write(cars[2] + "<br>");       
break list;       
document.write(cars[3] + "<br>");       
document.write(cars[4] + "<br>");       
document.write(cars[5] + "<br>");       
}

_<script>      
function myFunction()       
{       
var y=document.getElementById("mess");       
y.innerHTML="";       
try       
  {       
  var x=document.getElementById("demo").value;       
  if(x=="")    throw "empty";       
  if(isNaN(x)) throw "not a number";       
  if(x>10)     throw "too high";       
  if(x<5)      throw "too low";       
  }       
catch(err)       
  {       
  y.innerHTML="Error: " + err + ".";       
  }       
}       
</script>       
<h1>My First JavaScript</h1>       
<p>Please input a number between 5 and 10:</p>       
<input id="demo" type="text">       
<button type="button" onclick="myFunction()">Test Input</button>       
<p id="mess"></p>

10:

function validateForm()      
{       
var x=document.forms["myForm"]["fname"].value;       
if (x==null || x=="")       
  {       
  alert("First name must be filled out");       
  return false;       
  }       
}

  
_<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">      
First name: <input type="text" name="fname">       
<input type="submit" value="Submit">       
</form>_

11: About DOM

DOM: Document Object Model

when a web page is loaded, the browser creates a DOM of the page.

_<!DOCTYPE html>      
<html>       
<body>       
<img id="image" src="smiley.gif">       
<script>       
document.getElementById("image").src="landscape.jpg";       
</script>       
</body>       
</html>_

Change clicked text:

_<!DOCTYPE html>      
<html>       
<body>       
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>       
</body>       
</html>_

Mouse action sample:

<!DOCTYPE html>    
<html>     
<body>
  
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
  
<script>    
function mOver(obj)     
{     
obj.innerHTML="Thank You"     
}
  
function mOut(obj)    
{     
obj.innerHTML="Mouse Over Me"     
}     
</script>
  
</body>    
</html>

12: BOM : Browser Object Model

The Window Object: The window object is supported by all browsers. It represent the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header");

Get Window Size (determine the size of the browser window - the browser viewport, NOT including toolbars and scrollbars)

covering all browsers:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;    
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

The screen.availWidth property returns the width of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.

<script>    
document.write("Available Width: " + screen.availWidth);     
</script>

result: Available Width: 1680

window.confirm("sometext");

The window.confirm() method can be written without the window prefix.

Example

var r=confirm("Press a button");    
if (r==true)     
  {     
  x="You pressed OK!";     
  }     
else     
  {     
  x="You pressed Cancel!";     
  }

Timer:

1_:

<!DOCTYPE html>      
<html>       
<body>_
  
_<p>A script on this page starts this clock:</p>      
<p id="demo"></p>       
<button onclick="myStopFunction()">Stop time</button>_
  
_<script>      
var myVar=setInterval(function(){myTimer()},1000);       
function myTimer()       
{       
var d=new Date();       
var t=d.toLocaleTimeString();       
document.getElementById("demo").innerHTML=t;       
}       
function myStopFunction()       
{       
clearInterval(myVar);       
}       
</script></body>       
</html>_

var myVar;      
function myFunction()       
{       
myVar=setTimeout(function(){alert("Hello")},3000);       
}       
function myStopFunction()       
{       
clearTimeout(myVar);       
}

Cookie:

About cookie functions, please check w3schools here.

About more JavaScript examples, please chech w3schools here, you also need to navigator more menus on left panel to see all examples.