Javascript: 2014

Tuesday, December 9, 2014

Count characters in textfield on keydown event

Monday, January 13, 2014

Example of innerText.

<html>
<body>
<script type="text/javascript" >
function validate()
{
var msg;
if(document.myForm.userPass.value.length>5)
{
msg="good";
}
else
{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}
</script>

<form name="myForm">

<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>

</form>
</body>
</html>

innerHTML example.

<html>
<body>
<script type="text/javascript" >
function commentForm()
{
var data="Name:<input type='text' name='name'><br>Comment:<textarea rows='5' cols='50'></textarea><br><input type='submit' value='comment'>";

document.getElementById('place').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="commentForm()">
<div id="place"></div>
</form>
</body>
</html>

Another Example of getElementByTagName() method.

<html>
<body>
<script type="text/javascript">
function counth2()
{
var totalh2=document.getElementsByTagName("h2");
alert("total h2 tags are: "+totalh2.length);
}
function counth3()
{
var totalh3=document.getElementsByTagName("h3");
alert("total h3 tags are: "+totalh3.length);
}
</script>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<button onclick="counth2()">count h2</button>
<button onclick="counth3()">count h3</button>
</body>
</html>`

getElementByTagName() method example :-

The getElementByTagName() method returns all the element.

<html>
<body>
<script type="text/javascript">
function mahi()
{
var prgf=document.getElementsByTagName("p");
alert("total p tags are: "+prgf.length);
}
</script>

<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by getElementByTagName() method.</p>
<p>Here is the simple example.</p>
<p>I am Mahi Babariya.</p>
<p>I Love My parents alot</p>

<button onclick="mahi()">Count Paragraph</button>
</body>
</html>

document.getElementByName() method example.

The document.getElementByName() method returns all the element of specified name.

<html>
<body>
<script type="text/javascript">
function mahi()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="mahi()" value="Total Genders">
</form>
</body>
</html>

document.getElementById() method example.

<html>
<body>
<script type="text/javascript">
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:
<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
</body>
</html>

Here, the document.getElementById() method returns the element of specified id.

Example of document object that prints name with welcome message.

<html>
<body>
<script type="text/javascript">
function printer()
{
var name=document.index.mahi.value;
alert("Welcome: "+name);
}
</script>
<form name="index">
Enter Name:
<input type="text" name="mahi"/>
<input type="button" onclick="printer()" value="Print Name"/>
</form>
</body>
</html>

Example of document object getElementById().

<html>
<body>
<p>
<a id="Mahi" href="http://javascripttution.blogspot.com">My Blog</a>
</p>

<p>
Click the button to return the value of the href attribute of the link above.
</p>

<p id="Mayur"></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var x = document.getElementById("Mahi").href;
document.getElementById("Mayur").innerHTML=x;
}
</script>
</body>
</html>

Sunday, January 12, 2014

Window object 5) setTimeout()

setTimeout() performs action after specified time like calling function , evaluating expressions etc.

<html>
<head>
<script type="text/javascript">
function test()
{
setTimeout(
function()
{
alert("Me aaya bas 2 seconds me, LoL")
},2000);
}
</script>
</head>
<body>
<input type="button" value="setTimeout" onclick="test()"/>
</body>
</html>

Window object 4) open()

open() opens the new window in the browser.

<html>
<head>
<script type="text/javascript">
function site()
{
open("http://javascripttution.blogspot.in");
}
</script>
</head>
<body>
<input type="button" value="MyBlog" onclick="site()"/>
</body>
</html>

Window object 3) prompt()

prompt() displays a dialog box to get to input from the user.

<html>
<head>
<script type="text/javascript">
function info()
{
var m=prompt("Who are you?");
alert("I am "+m);
}
</script>
</head>
<body>
<input type="button" value="Prompt Box" onclick="info()"/>
</body>
</html>

Window object 2) confirm()

confirm() displays the confirm dialog box containing message with ok and cancel button.

<html>

<head>

function msg()

{

var m=confirm("Are u sure?");

if(m==true)

{

alert("Good");

}

else

{

alert("As you wish");

}

</script>

</head>

<body>

</body>

</html>

Window object 1) alert()

alert() displays the alert box containing message with ok button.

Ex:-

<html>

<head>

function call()

{

alert("Alert Box");

}

</script>

</head>

<body>

</body>

</html>

JavaScript function (methods)

1) Simple example of function

<html>

<body>

function love()

{

alert("Love is a feeling");

}

</script>

<form>

</form>

</body>

</html>

2) Function Arguments

<html>

<body>
<script>
function tri(m) //argument
{
alert(m*m*m);
}
</script>
<form>
<input type="button" value="click" onclick="tri(5)">
</form>
</body>
</html>

3) Function with Return Value

<html>
<body>
<script>
function gujrati()
{
return "kem chho?"
}
document.write(gujrati());
</script>
</body>
</html>

JavaScript Do While Loop Example.

<html>
<body>
<script>
var m=5;
do
{
document.write(m+"<br>");
m++;
}while (m<=10);
</script>
</body>
<html>

JavaScript While loop example.

<html>
<body>
<script>
var i=1;
function mahi()
{
while(i<=10)
{
document.write(i+"<br>");
i++;
}
}
</script>
<form>
<input type="button" value="While Loop" onclick="mahi()"/>
</form>
</body>
</html>

JavaScript for loop example.

Switch case example in JavaScript.

<html>
<body>
<script>
var grade='B';
var result;
switch(grade)
{
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
break;
}
document.write(result);
</script>
</body>
</html>

JavaScript If/else Example

<html>
<body>
<script>
var m=10;
if(m==0)
{
document.write("m is equal to 0");
}
else if(m==10)
{
document.write("m is equal to 10");
}
else if(m==20)
{
document.write("m is equal to 20");
}
else
{
document.write("m is more than 20");
}
</script>
</body>
</html>

Another example of "Global Variable" in JavaScript

File 1.js

var a=5;
function mahi()
{
alert(window.value); //accessing global variable
}

File 1.htm

Saturday, January 11, 2014

Types of variables in JavaScript

There are 2 types of variables in JavaScript.

1) Local Variable

A variable which is declared inside block or function is called local variable. It is accessible within the function or block only.

Ex:-

<html>
<body>
<script>
    function mahi()
    {
        var a=5;//local variable
    }
</script>
</body>
</html>

2) Global Variable

A variable which declared outside the function or with window object is known as global variable. It is accessible from any function.

Ex:-

JavaScript Variable

<html>
<body>
<script>
    /* A variable in javascript is simply a name of storage location which is also known as identifiers. There are two types of variables in javascript : local and global.

    Rules for declaring a variable.

    --> Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
    --> After first letter we can use digits (0 to 9), for example value1.
    --> Javascript variables are case sensitive, for example x and X are different variables.*/

    var x = 10;
    var y = 20;
    var z=x+y;
    document.write(z);
    var _value="MaHi"
    document.write(_value);
</script>
</body>
</html>

JavaScript Comment

There are two types of comments in JavaScript.

1) Single-line comment

It is represented by double forward slashes (//).
Ex:-
<script>
var a=4;
var b=2;

var c=a+b;

document.write(c);//It will print sum of 10 and 20

</script>

2) Multi-line comment

It can be used to add single as well as multi lines to comments.
It is represented by forward slash(/) with asterisk(*) then asterisk with forward slash.
Ex:-
<script>
a=5;
b=6;
document.write(a); //it will print the value of a
document.write(b); //it will print the value of b
/*first value of a will be print
and the the value of b */
</script>

The external JavaScript file and embed it in html page.

Here first create JavaScript file and link it in HTML file.

JavaScript file js.js

function piyu()
{
    alert("Hello Friends");
}

HTML file

<html>
<head>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
    <p>Welcome to javascripttution.blogspot.com</p>
    <form>
        <input type="button" value="click" onclick="piyu()"/>
    </form>
</body>
</html>

2) Example of Alert

<html>
<body>
    <script type="text/javascript">
     alert("Hello CandyFry");
    </script>
</body>
</html>

First WebPage using Javascript

<html>
<body>
<script type="text/javascript">
document.write("Welcome to the first page");
</script>
</body>
</html>