Web Developer: 2016

Friday, 16 September 2016

fadeIn and fadeOut Method in Jquery

Let us understand with a suitable example:-

fadeIn_fadeOut.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/fadein_fadeout.js"></script>
</head>

<body>
<p>Demonstrating fadeIn functionality.</p>
<button id="btn1">Click to fade in the box</button>
<br><br>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;">
</div><br>

<p>Demonstrating fadeOut functionality.</p>
<button id="btn2">Click to fade out the box</button>
</body>

</html>

fadein_fadeout.js:-

$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn("slow");
});

$("#btn2").click(function(){
$("#div1").fadeOut("slow");
});
});

Screenshots:-

Explanation:-

Here, fadeIn() and fadeOut() methods has been used. fadeIn() method changes the opacity from hidden to visible whereas fadeOut() method changes the opacity from visible to hidden. Both the methods are built-in functions which are used in Jquery.

Saturday, 13 August 2016

Hide & Show with effects in Jquery

Let us explain with an example:-

hide_show.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide_show.js"></script>
</head>
<body>
<h4>Click on Hide button and then on Show button.</h4>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>

</html>

hide_show.js:-

$(document).ready(function(){
$("#btn1").click(function(){
$("h4").hide(1000);
});
$("#btn2").click(function(){
$("h4").show(1000);
});

});

Screenshot:-

Explanation:-

Here, in the "hide" function, "1000" as a parameter is passed. So, when we click on the "hide" button, it will hide the content within "1000 ms". Similarly, in the case of "show" function.

Focus & Blur Effect in Jquery

Let us explain with a suitable example:-

effect.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/effect.js"></script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="email" name="email">

</body>

</html>

effect.js:-

$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","lightpink");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

});

Screenshots:-

Explanation:-

Here, "focus" and "blur" function has been used. When we will click on the textboxes, its color will be "lightpink", i.e, on focus and when we move to another textbox, it will change to "white" color, i.e, on blur functionality.

Thursday, 28 July 2016

Mouse Events in Jquery

Let us explain with an example:-

mouse.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/mouse.js"></script>
</head>

<body>
<h3>Mouse Enter Example</h3>
<p id="p1">Move your mouse to this paragraph</p>
<hr/>

<h3>Mouse Leave Example</h3>
<p id="p2">Exit mouse from this paragraph</p>
<hr/>

<h3>Mouse Down Example</h3>
<p id="p3">Mouse Down on this paragraph</p>
<hr/>

<h3>Mouse Up Example</h3>
<p id="p4">Mouse up on this paragraph</p>
</body>

</html>

mouse.js:-

$(document).ready(function(){

$("#p1").mouseenter(function(){

alert("You entered this paragraph");

});

$("#p2").mouseleave(function(){

alert("You just left from this paragraph");

});

$("#p3").mousedown(function(){

alert("Mouse Down on this paragraph");

});

$("#p4").mouseup(function(){

alert("Mouse up on this paragraph");

});

Screenshot:-

Explanation:-

Here, separate paragraphs have been used for all the mouse events functionality in Jquery. <p> tag has been used, declared along with the attribute "id". This "id" value has been called in the different functions of the mouse events. Different functions like "mouseenter", "mouseleave", "mousedown" and "mouseup" has been used in the above example.

Monday, 25 July 2016

dblclick() in Jquery

Let me explain you with a suitable example:-

dblclick.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/dbclick.js"></script>
</head>

<body>

<p id="p1">Double-Click on this paragraph to hide it</p>

</body>
</html>

dblclick.js:-

$(document).ready(function(){

$("p").dblclick(function(){

$("#p1").hide();

});

Screenshot:-

Explanation:-

When we will double-click the paragraph defined in the page, that paragraph will get hidden. Here, an "id" attribute has been added along with the "p" tag/element, whose value has been called in the jquey function.

Thursday, 21 July 2016

Hide() in Jquery

Let us understand it with a suitable example:-

hide.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide.js"></script>
</head>
<body>

<h1>Paragraph Example</h1>
<p id="p1">Click the paragraph to hide</p>
<hr>

<h1>Button Example</h1>
<h5 id="btn1">Click button to hide the paragraph</h5>
<button>Hide</button>

</body> </html>

hide.js:-

$(document).ready(function(){
$("p").click(function(){
$("#p1").hide();
});
});

$(document).ready(function(){
$("button").click(function(){
$("#btn1").hide();
});
});

Screenshot:-

Explanations:-

Jquery is a JavaScript library. We need to include its library to use its functionality in webpage. Here, I have used the "hide()" function to hide the paragraph(<p>) tag. I have shown here, simply by clicking on the paragraph as well as by clicking on the button. I have used separate ids attribute to show the above functionality in Jquery.

Sunday, 19 June 2016

Closure in JavaScript

It is one of the important concept, mainly used by the JavaScript developers.

Let me explain it further with a suitable example:-

closure.html:-

<html>

<head>

<body>

</script>

</body>

</html>

app.js:-

function showValue (x, y) {

var value = "The value is ";

function makeSentence () {

return value + x + y;

}

return makeSentence ();

}

console.log(showValue (5, 6));

Output:-

Explanation:-

Here, "showValue()" ia the function name, passed with two parameters - "x" & "y". A variable called "value" has been declared inside it. A function name called "makeSentence()" has been declared, which is the inner function of the outer function - "showValue()". This inner function - "makeSentence" has access to the outer function's("showValue()") variable("value"), including the parameters("x" & "y"). The "value", "x" & "y" has been returned in the inner function, by using "return" keyword. So, the output will be "The value is 56", as "+" operator is used which will concatenate the numbers.

Wednesday, 15 June 2016

JavaScript Form Validation

Consider a suitable example:-

index.html:-

<html>
<head>
<body>
<form name="form1" onsubmit="return validator()" method="post">
Username: <input type="text" name="username"/> <br/> <br/>
Password: <input type="password" name="password"/> <br/> <br/>
<input type="radio" name="radio" id="radio">Radio button
<input type="checkbox" name="thebox"/>Check Box <br/> <br/>
<input type="submit" value="Submit!"/>
</form>
<script src="app.js">
</script>
</body>

</html>

app.js:-

function validator()

{

if(!document.form1.thebox.checked || !document.getElementById("radio").checked ||

document.form1.username.value == "" || document.form1.password.value == "")

{

alert("Not entered");

}

else

{

alert("All elements are entered");

}

Output:-

Explanation:-

Here, under the <form> tag, all the elements of it, like textbox, radio button, checkbox are included. When we will click on the "submit" button, then the control will go to the function called "validator", declared in the "aap.js" file, due to the attribute called "onsubmit" declared in the form tag. "method" attribute is also being used here in the form tag, so that whatever values we are going to enter, it will not display in the url. For validation purpose, "name" attribute is used for username and password textbox. It has also been used for checkbox element. "id" attribute has been used for the radio button.

Wednesday, 8 June 2016

Add The Array Elements Using A Loop In JavaScript

Let us consider an example:-

index.html:-

<html>
<head>
<body>
<script src="app.js">
</script>
</body>

</html>

app.js:-

var crap = new Array(5);

for(var i=0;i<5;i++)

{

crap[i] = prompt("Add something in an array");

document.write(crap[i]);

document.write("<br/>");

}

Output:-

Explanation:-

Here, we are entering every single element one by one in an array, by using the prompt() method in JavaScript. "crap" is the variable declared, within which an array of length 5 is included."document.write" is used in the JavaScript to print the data. Here, the element entered in the array are displayed on the screen one by one, once the user enters the data. "<br/>" is used to move the cursor to the next line.

Sunday, 5 June 2016

Passing A Function As A Parameter To Another Function In JavaScript

Consider the following example:-

pass_func.html:-

app.js:-

function log(a) //passing a function as a parameter to another function

{

a();

}

log(function(){

console.log("hi");

});

Output:-

Explanation:-

Here, in this example, "log()" function is declared with a parameter called "a", within which "a()" is declared. At the time of defining the "log()", another function is passed, in which the body of the passed function is coded or scripted.

Saturday, 4 June 2016

Navigating to particular section in HTML

In webpage, various topics are included and to navigate to particular topics or section, we used to scroll up & down throughout the page. This trouble can be solved by declaring an "id" attribute to each section using "div" tag.

Consider the following example:-

section.html:-

<html>
<head>
<title>Section Portion </title></head>
<body>
<center><b>Trees</b></center> <br/>
<center>
<a href="#definition">Definition</a>    
<a href="#overview">Overview</a>
</center> <br/> <br/>

<center> <img src="trees.jpg" alt="trees" width="900" height="600"> </center> <br/>

<a name="definition">
<div id="definition">
<p>
<b>Definition</b> <br/>
Although "tree" is a term of common parlance, there is no universally recognised precise definition of what a tree is, either botanically or in common language.In its broadest sense, a tree is any plant with the general form of an elongated stem, or trunk, which supports the photosynthetic leaves or branches at some distance above the ground. Trees are also typically defined by height, with smaller plants from 0.5 to 10 m (1.6 to 32.8 ft) being called shrubs, so the minimum height of a tree is only loosely defined. Large herbaceous plants such as papaya and bananas are trees in this broad sense.
A commonly applied narrower definition is that a tree has a woody trunk formed by secondary growth, meaning that the trunk thickens each year by growing outwards, in addition to the primary upwards growth from the growing tip. Under such a definition, herbaceous plants such as palms, bananas and papayas are not considered trees regardless of their height, growth form or stem girth. Certain monocots may be considered trees under a slightly looser definition; while the Joshua tree, bamboos and palms do not have secondary growth and never produce true wood with growth rings, they may produce "pseudo-wood" by lignifying cells formed by primary growth.
Aside from structural definitions, trees are commonly defined by use, for instance as those plants which yield lumber.
<img src="Tree_def.jpg" alt="definition" width="900" height="700">
</p>
</div>
</a>

<a name="overview">
<div id="overview">
<p>
<b>Overview</b> <br/>
The tree growth habit is an evolutionary adaptation found in different groups of plants: by growing taller, trees are able to compete better for sunlight. Trees tend to be long-lived, some reaching several thousand years old, as well as tall. Trees have modified structures such as thicker stems composed of specialized cells that add structural strength and durability, allowing them to grow taller than non-woody plants and to spread out their foliage. They differ from shrubs, which are also woody plants, by usually growing larger and having a single main stem; but the distinction between a small tree and a large shrub is not always clear, made more confusing by the fact that trees may be reduced in size under harsher environmental conditions such as on mountains and subarctic areas.
</p>
</div>
</a>

</body> </html>

Output:-

Explanation :-

When we will click on the "definition" link, it will redirect to the definition portion of the page. Similarly, when we will click on the "overview" link, it will be redirected to the overview section of the page.

Sunday, 29 May 2016

Adding Methods to our object in JavaScript

In JavaScript, we can add methods to our object, which are mainly used by the web developers.

Let me clear this concept with an example.

methodstoObject.html:-

<html>
<head>
<script type="text/javascript">
function people(name,age){
this.name = name;
this.age = age;
this.yearsUntilRetire = yearsLeft;
}

function yearsLeft(){
var numYears = 65 - this.age;
return numYears;
}

var robertson = new people("Robertson Muddy", 28);
</script>
</head>
<body>
<script type="text/javascript">
document.write("<b>" + robertson.yearsUntilRetire()+ "</b>");
</script>
</body>

</html>

Output:-

Description:-

Here, people is the method declared within the script tag, along with name & age as the function parameters. "yearsLeft" is the method which is used in the people method, by declaring it to "yearsUntilRetire". So, to use it, we need to write as "robertson.yearsUntilRetire()", where "robertson" is the object declared before.

Object Initialization in JavaScript

JavaScript is one of the scripting language that is mainly used in web applications. "Object" is one of the good concept which is used while coding with javascript.

Let me explain it with a suitable example:-

objectinitial.html :-

<html>
<head>
<script type="text/javascript">
ronny = {name:"Ronny Thomson", age:24};
shilpa = {name:"Shilpa Thomson", age:20};
</script>
</head>
<body>
<script type="text/javascript">
console.log(ronny.name + " loves " + shilpa.name + " as she is " + shilpa.age +" yrs old!");
</script>
</body>

</html>

Output:-

Explanation:-

Here, "ronny" & "shilpa" are objects initialized with particular data. "name" is the key of the object "ronny" and "Ronny Thomson" is the value of it. So, to display the value of the key - name, we need to use dot(.) operator, i.e, ronny.name.