Javascript is a scripting language which means that it has a very simple syntax. JavaScript was designed to add interactivity to HTML pages. A JavaScript is usually embedded directly into HTML pages. Remember that Javascript is totally different than Java which is a full featured programming language.
Some important things about Javascript :
· Variable names are CaSe sensitive. Javascript is case sensitive.
· To keep the browser from executing a script when the page loads, you can put your script into a function.
· The for…in statement is used to loop (iterate) through the elements of an array or through the properties of an object.
· Javascript detects events. That gives us the ability to create dynamic web pages.
· The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.
· JavaScript is an Object Oriented Programming (OOP) language.
· Arrays start from 0.
· Javascript has regular expressions. (RegExp)
· you can access and manipulate all of the HTML DOM (Document Object Model) objects with JavaScript.
· Javascript supports timing events.
The following two examples demonstrate a small set of the capabilities of JavaScript language.
Example 1
<HTML>
<HEAD>
<!--Your copyright -->
</HEAD>
<TITLE>
My First Javascript example
</TITLE>
<BODY>
<script type="text/javascript">
//You can build your page using a javascript
//this is a header
document.write("<h1>This is my First Javascript example</h1>");
document.write("<p>This is a paragraph</p>");
//this is a form
document.write("<form>");
//some text and an input box with the onchange event pointing to function checkDate()
document.write("Your Age ?: <input type=\"text\" id=\"age\" name=\"age\" onchange=\"calculateBirthYear()\"/>");
document.write("</form>");
</script>
<script type="text/javascript">
function calculateBirthYear()
{
/*
document.getElementById("age") permits us to get the value the user entered in the chack box
we search the document object for a control with id="age" and we read the control's value
*/
var age=document.getElementById("age").value;
//the variable d holds a date object
var d=new Date();
var currentYear=d.getFullYear();
/*
In JavaScript the program flow is linear one statement after the other. To change the flow of
the code we use conditional statements like the if statement and the switch statement.
To be on the safe side you have also to check everything you pass to the server from the server
side
if (expression) {
... statements
} else {
... statements...
}
*/
if ((age<1) || (age > 120)) {
alert("You exceed the age limit");
} else {
alert("You were born in : " + (currentYear-age));
}
}
</script>
</BODY>
</HTML>
Example 2
<HTML>
<HEAD>
<!--Your copyright -->
</HEAD>
<TITLE>
My Second Javascript example
</TITLE>
<BODY>
<script type="text/javascript">
//You can build your page using a javascript
//this is a header
document.write("<h1>This is my Second Javascript example</h1>");
document.write("<p>This is a paragraph</p>");
//this is a form
document.write("<form>");
//some text and an input box with the onchange event pointing to function checkDate()
document.write("Your Age ?: <input type=\"text\" id=\"age\" name=\"age\" onchange=\"calculateBirthYear()\" onkeypress=\"return checkKeyStroke(event)\"/>");
document.write("</form>");
</script>
<script type="text/javascript">
function calculateBirthYear()
{
/*
document.getElementById("age") permits us to get the value the user entered in the chack box
we search the document object for a control with id="age" and we read the control's value
What will happen if the user types letters instead of numbers?
Are there ways to avoid it?
One way is to check every key pressed to determine if it is a number
alternative you can use the validate event of the form and a regular expression to check the user input
*/
var age=document.getElementById("age").value;
//the variable d holds a date object
var d=new Date();
var currentYear=d.getFullYear();
/*
In JavaScript the program flow is linear one statement after the other. To change the flow of
the code we use conditional statements like the if statement and the switch statement.
To be on the safe side you have also to check everything you pass to the server from the server
side
if (expression) {
... statements
} else {
... statements...
}
*/
if ((age<1) || (age > 120)) {
alert("You exceed the age limit");
} else {
alert("You were born in : " + (currentYear-age));
}
}
function checkKeyStroke(evt)
//Makes sure that the value entered is a number
{
// fix for firefox and ie7
evt - (evt) ? evt : window.event;
var charCode =(evt.which) ? evt.which : evt.keyCode;
//numeric values are between ascii 48 and 57
if (charCode > 31 && (charCode < 48) || (charCode > 57) ){
alert('Please enter only numbers.');
evt.returnValue = false;
}
evt.returnValue = true;
}
</script>
</BODY>
</HTML>
Sometimes you may get different results using different browsers, so test your code at least with two different browsers.
Full Javascript tutorial can be found here http://www.w3schools.com/js/js_intro.asp
Happy coding!
No Responses to “Javascript Quick tutorial”