Web Developer: June 2016

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.