Functions in JavaScript
Syntax:
function functionName(Parameter1, Parameter2, ..)
{
// Function body
}
Below are the rules for creating a function in JavaScript:
function calcAddition(number1, number2)
{
return number1 + number2;
}
Example:
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
function welcomeMsg(name)
{
document.write("Hello" + name + “World");
}
var nameVal = "Admin";
welcomeMsg(nameVal);
</script>
</html>
</body>
JavaScript Events
Some of the HTML events are
Mouse events:
Keyboard events
Window/Document events
Form events:
Ex: Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is OnClick event");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value=“Click Here"/>
</form>
</body>
</html>
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
DOM (Document Object Model)
Why DOM is required?
DOM Hierarchy: The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.
Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
Form object − Everything enclosed in the <form>...</form> tags sets the form object.
Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.
Window Object
They are:
status - set the status bar message
self - stores the name of the current window.
Methods:
open() - Opens a new browser window
close() - Closes the current window
focus() - Sets focus to the current window
blur() - Removes focus from the current window
print() - Prints the content of the current window
alert() - Displays an alert box with a message and an OK button
prompt() - Displays a dialog box that prompts the visitor for input
confirm() - Displays a dialog box with a message and an OK and a Cancel button
Document Object
Methods: You can use the methods of the document object to work on a Wb page.
Here are the most common document methods:
write() - write a string to the Web page
open() - opens a new document
close() - closes the document
Properties: Use the properties of the document object to set the colors of the page, the title and display the date the document was last modified. JavaScript has about 150 defined color words you can use or you can provide the hexidecimal RGB codes.
Here are the most common document properties:
bgColor – to set the background color of the document.
fgColor – to set the foreground color of the document .
linkColor – to set the color for the links of the document.
title – to set the title for document.
Form Validation in Java Script
Basic Form Validation
<script type = "text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
}
</script>
Data Format Validation
<script type = "text/javascript">
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID") document.myForm.EMail.focus() ;
return false;
}
return( true );
}
</script>
JavaScript Form Validation Example
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post“ onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
JavaScript Retype Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1“ onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
JavaScript Number Validation
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}
else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>