JavaScript for Beginners: January 2014

Monday 27 January 2014

Javascript : Classes and Objects

The Class

JavaScript is basically prototype-based language which have no class statement,
as found in C++ or Java. This is actually confusing for programmers
accustomed to languages with a class statement. In reality, JavaScript uses
functions as classes. Defining a class is as easy as defining a function.

Examples:

function employee() { }

The Objects

Objects are basically instance of classes which help us to access the methods
of that class.

To create a new instance of an object obj we use the statement new obj,
assigning the result (which will be type obj) to a variable to access it later.

In the example below we define a class named employee and we
create two instances (emp1 and emp2).

function employee() { }
var emp1= new employee();
var emp2= new employee();

Monday 20 January 2014

Javascript : Prototype based programming

Prototype-based programming:
Prototype-based programming is a style of doing programming like object-oriented programming
in which instead of classes functions are present, and function's behavior reuse
is accomplished through a process of decorating existing objects which serve as prototypes.
This model is also known as prototype-oriented, or instance-based programming.

Advantage :
- Re-usability
- can maintain large number of classes with less code
- Multiple inheritance is easy
- can change behavior at runtime

Example :

Saturday 18 January 2014

Javascript : Introducing Object oriented Javascript

OOPS INTRODUCTION :

JavaScript is not a object-oriented programming language but it has
strong capabilities of oops,even people debate have taken place
due to the differences in object-oriented JavaScript compared to
other languages.

User can create classes and object and can use in their JavaScript code.

Class

Defines the characteristics of the Object and how object should behave.

Object

An Instance of a Class and help to access method of class.

Property

An Object characteristic, such as color,size,alignment.

Method

It defines Activity and behaviour, such as walk.

Constructor

A method called at the moment of instantiation.

Inheritance

A Class can inherit characteristics from another Class i.e from base class.

Encapsulation

A Class defines only the characteristics of the Object . It provide security to code .

Abstraction

The conjunction of complex inheritance, methods, properties of an Object must be able to simulate a reality model.

Polymorphism

Different Classes might define the same method or property.
Having same look but acted differently on different places

NOTE : Javascript is a prototype of object oriented language but it a bit confusing for
programmer because javascript functions used as class

Friday 17 January 2014

Javascript : Understanding Dailog boxes

JavaScript supports three types of dialog boxes.
Dialog box are very useful to throw a kind of message or alert to user
or to get confirmation on any input or to have a kind of input from the users.

Alert Dialog Box:

An alert dialog box is mostly used to give a warning message to the users.
one input field requires to enter some text but user does not
enter that field then as a part of validation you can use alert box to
give warning message as follows:

<head>
<script type="text/javascript">

alert("Warning !!");

</script>
</head>
Alert box gives only one button "OK" to select and proceed.

Confirmation Dialog Box:

A confirmation dialog box is mostly used to take user's consent on any option.
It displays a dialog box with two buttons: OK and Cancel.

If the user clicks on OK button the window method confirm() will return true.
If the user clicks on the Cancel button confirm() returns false.

<head>
<script type="text/javascript">

var Val = confirm("Do you want to continue ?");
if( Val == true ){
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}

</script>
</head>
To understand it in better way you can Try it yourself.

Prompt Dialog Box:

The prompt dialog box is very useful when you want to pop-up a text box to get user input.
it enable you to interact with the user. User needs to fill in the field and then
click OK.

This dialog box is displayed using a method called prompt() which have two parameters
(i) A label which you want to display in the text box
(ii) A default string to display in the text box.

This dialog box with two buttons: OK and Cancel.
If the user clicks on OK button
the window method prompt() will return entered value from the text box.
If the user clicks on the Cancel button the window method prompt()
returns null.

<head>
<script type="text/javascript">
var Val = prompt("Enter your name : ", "your name");
alert("You have entered : " + Val );
</script>
</head>

Wednesday 15 January 2014

Javascript : Working with Cookies - Part - 2

Storing Cookies:

We can create a cookie and assign it to a string value to the document.cookie object:
Syntax:
document.cookie = "key1=value1;key2=value2;expires=date";
if we set cookie with given date and time the cookie will expires and
cannot be accessible

Note: Cookie values may not include semicolons, commas, or whitespace. For this reason,
you may need to use the JavaScript escape() function to encode the value before storing
it in the cookie. and unescape() function to read the cookie

Reading Cookies:
Reading a cookie is just as simple as writing one, because the
value of the document.cookie object is the cookie. So you can
use this string whenever you want to access the cookie.

The document.cookie string will keep a list of name=value pairs
separated by semicolons, where name is the name of a cookie and
value is its string value.

You can use strings' split() function to break the string into
key and values as follows:

Deleting a Cookie:

Sometimes you will want to delete a cookie so that subsequent attempts to

read the cookie return nothing. To do this, you just need to set the

expiration date to a time in the past.

Sunday 12 January 2014

Javascript : Working With Cookies - Part -1

Cookies :

When a small piece of information sent from website & stored in user's web-browser during the time of browsing

For example :

User Login information stored in cookies , whenever user request that particular web page the cookies fill the information

Note :

Every time the user loads the website, the browser sends the cookie back to the server to notify the website of the user's previous activity

Understand Working :

-> Server send data to user web browser in form of cookies

-> User may allow to accept cookies or can reject it

-> If user accept cookies then the cookies store in plain text in user system

-> server remember the location and can retrieved the store information

Cookies stored with the following field

Expires : The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
Domain : The domain name of your site.
Path : The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.
Secure : If this field contains the word "secure" then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
Name=Value : Cookies are set and retrieved in the form of key and value pairs.

Next Blog we will see how many types of cookies are available ...

Wednesday 8 January 2014

Javascript : Page Redirection & Page Refresh

Javascript (JS) :

Page Redirection :
It is a process by which URL which user typed for accessing page - X but
internally redirected to some other page

Example:
type : www.fb.com
it will redirect you to www.facebook.com

Example 1:

<head>
<script type="text/javascript">

window.location="http://www.newpage.com";

</script>
</head>

Why Page - redirection is USEFUL ?

-For commercial website which have different product in different countries
-Publisher of website don't want to loose their visitors , so they buy all common domain which resembles
their website name

You can set message also during Page-redirect :

Example :
<head>
<script type="text/javascript">

function Redirectme()
{
window.location="http://www.newpage.com";
}

document.write("You will be redirected to main page in 5 sec.");
setTimeout('Redirectme()', 5000);
</script>
</head>

Page Refresh :
It actually reload the page by calling reload method
Location.reload() method
if You pass location.reload(true) - will load page from server
otherwise it will reload from cache

Thursday 2 January 2014

Javascript : Events

What is an Event ?
Occurrence of an activity termed as Event
JavaScript's interaction with HTML is handled through events
that occur when the user or browser works on a page.

When the page loads,even occurs. When the user clicks a button,
that click, too, is an event, pressing any key,
closing window, re sizing window etc.

Events are a part of the Document Object Model (DOM) Level 3 and every
HTML element have a certain set of events which can trigger JavaScript Code.

onclick Event Type:
This is the most frequently used event type which occurs when a user
clicks mouse left button. You can put your validation, warning etc against this event type.

Example:

<html>
<head>
<script type="text/javascript">

function begin() {
alert("Hello World")
}

</script>
</head>
<body>
<input type="button" onclick="begin()" value="welcome" />
</body>
</html>
This will produce following result and when you click Hello
button then onclick event will occur which will trigger begin() function.

onsubmit event type:
Another most important event type is onsubmit.
This event occurs when you try to submit a form.
So you can put your form validation against this event type.

Here is simple example showing its usage. Here we are calling a validate()
function before submitting a form data to the webserver. If validate()
function returns true the form will be submitted otherwise it will not submit the data.

Example:

<html>
<head>
<script type="text/javascript">

function validation() {
do validation ...
.........
return either true or false
}

</script>
</head>
<body>
<form method="POST" action="check.aspx" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
onmouseover and onmouseout:
These two event types will help you to create nice effects with images
or even with text as well. The onmouseover event occurs when you bring your
mouse over any element and the onmouseout occurs when you take your mouse out from that element.

Example:

Following example shows how a division reacts when we bring our mouse in that division:

<html>
<head>
<script type="text/javascript">

function onOver() {
alert("Mouse Over");
}
function Onout() {
alert("Mouse Out");
}

</script>
</head>
<body>
<div onmouseover="Onover()" onmouseout="Onout()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Events and their description :

Wednesday 1 January 2014

Javascript : Understanding Functions

Javascript(JS):
JavaScript Functions :
A function is a group of reusable code which can be called anywhere in your program.
its help us to eliminates the need of writing same code again and again. it helps
programmers to write modular code. You can break your big program in a number of small and operable functions.

Like any other advance programming language, JavaScript also supports all the features
necessary to write modular code using functions.

some predefined function are alert() , write() , confirm();

JavaScript allows us to write our own functions as well.
This section will explain you how to write your own functions in JavaScript.

Function Definition:
Before we use a function we need to define that function.
The most common way to define a function in JavaScript is by using the "function" keyword,
followed by a unique function name, with some parameters (that might be empty),
and a statement block surrounded by "{}" curly braces. The basic syntax is shown here:

<script type="text/javascript">

function name(parameter-list)
{
your statement......
}

</script>
Example:

A simple function that takes no parameters called "begin" is defined here:

<script type="text/javascript">

function begin()
{
alert("hello javscript");
}

</script>
Calling a Function:
To invoke a function somewhere later in the script,
just write the name of that function as follows:

<script type="text/javascript">

begin();

</script>

Function Parameters:
we have seen function without a parameters. But there is a
facility to pass different parameters while calling a function.
These passed parameters can be captured inside the function and
any operation can be done over those parameters.

A function can take multiple parameters separated by comma.

Example:

This time it will take three parameters:

<script type="text/javascript">

function begin(name, place , year)
{
alert( name + " is from this " + place + "from" + year );
}

</script>
Note: Use + operator to concatenate string and number together.
JavaScript does not mind in adding numbers into strings.

Now we can call this function as follows:

<script type="text/javascript">

begin('Zara', 'bangalore', 1988 );

</script>
To understand it in better way you can Try it yourself.

The return Statement:
A JavaScript function can have a return statement.
if you want to return a value from a function.

For example :
you can pass two numbers in a function and you can return the output of that function

Example:

The function takes two parameters and combine them and return result. Take a look

<script type="text/javascript">

function hello(first, second)
{
var result;
result = first + second;
return result; // result have the output which will be return where ever this function being called
}

</script>
Now we can call this function as follows:

<script type="text/javascript">

var value;
value = hello('hello', 'world');
alert(value );

</script>