Purpose of the Blog

Interesting articles about life of IT professionals in sydney and Technical articles in .NET and C++.

Saturday, February 19, 2011

Javascript Tutorial


Javascript Totorial

1)        What is Javascript
JavaScript is THE scripting language of the Web.
JavaScript is used in billions of Web pages to add functionality, validate forms, comunicate with the server, and much more.
  • JavaScript was designed to add interactivity to HTML pages
  • JavaScript is a scripting language
  • A scripting language is a lightweight programming language
  • JavaScript is usually embedded directly into HTML pages
  • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
  • Everyone can use JavaScript without purchasing a license
2)       Example – using javascript directly
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>

3)      Example – using javascipt in the function
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>

4)   Example – using an external javascript
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

5)   Comments in javascript
Both single line comments // and multiple line comments are supported /* */

6)   Declaring variables
var x=5;
var carname="Volvo"
if you donnt declare a variable it will be automatically created in the global scope
x=5;
carname="Volvo";

7)   Declaring array
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";       // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW”;

8)   The navigator object contains the information about the visitors browser
<div id="example"></div>

<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("example").innerHTML=txt;

</script

9)   Settimeout and cleartimeout functions
var t=setTimeout("javascript statement",milliseconds);
clearTimeout(setTimeout_variable);

10)Creating objects
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";

11) Practical example of adding two numbers in javascript

<html>
<head>
<title>Form to sum two numbers</title>
<script type="text/javascript">
function displaysum()
{
var f = parseInt(document.getElementById("first").value);
var s = parseInt(document.getElementById("second").value);
document.getElementById("answer").value = f+s;
}
</script>
</head>
<body>
<br/>
Value1 = <input type="text" id ="first"></input>
<br/>
Value2 = <input type="text" id ="second"></input>
<input type="button" id="submit" onclick="displaysum()" value="Submit"></input>
<br />
Answer = <input type="text" id="answer"></input>
</body>
</html>
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)