Pages

Friday 17 May 2013

LEARN JAVASCRIPT

 

 Javscript Tutorials | Learn Javscript



JavaScript the Client Side scripting



JavaScript a name which is some what related to comprehensive language Java ?
Yes it is, but the fact is like,  two unknown persons have the name Tom and Tomy, but they are neither cousins,  nor friends or relatives and they didn't know each other. That's only we can say about these two languages Java and. Java script.

Javascript is a client side scripting (refers which is run in browser of the user). Keep in mind if the browser is not supporting javascript, the functions of JavaScript we provided in  our website will not work. But all most modern browsers are supporting JavaScript includes Internet Explorer 6 + , Google Chrome, Opera, Mozilla, Safari and more. But these browsers are also providing the option for users to active and inactive javscripts.

What can we do with Javascript ? Why ?


Through JavaScript we can produce interactive web pages which is user friendly in all sense . The era of touch panel devices increases the chances of using  JavaScript in web page. In now a days all websites are using JavaScript for different purposes. Social networking giants like youtube, twitter and facebook are using javscript, an simple example in facebook for java script is, when we press the Like button , Like will change to Unlike and in reverse  order. Using javscript we can   validate a form, display slide show animations, interact with server (through Ajax a technology used in javscript) and more.

Some of the studies suggests that using JavaScript in  web pages reduces the bandwidth usage of clients to a certain extent. There we use a technology called Ajax in java script called Asynchronous JavaScript and XML which loads the data without refreshing the web page or web content. For Example if we want to submit a form through Ajax, we input the data  in form and press the submit button, which produces a result "Your feedback is submitted"  without refreshing the web page. Ajax is not a single technology but a combination of technology, javascript, css, DHTML and more which is embedded in <script></script> tags.

Ajax is a different section but i refereed Ajax here is  because Ajax technology is used with JavaScript.

Following is the simple JavaScript which displays a text  "Hello world" in a  layer called #mylayer


<html>
<head>

<title>My Javascript</title>

<script>

function change()
{
var text = "Hello world";

x=document.getElementById("mylayer"); 

x.innerHTML = text;    // Change the content

}
</script>

</head>

<body> 


<h1>Changing the text</h1>

<div id="mylayer">Testing My Javascript Code</div>

<BR/>

<input type="button" onclick="change()" value="Display Hello World"/>

</body>


</html>




Code Explanation - Normally we write the java script under head tag, but in certain instances we write it in body tag also, but it should be recommended to write java scripts in between head tags except certain conditions. In our above java script we create a function called write(),
write function in java script do as follows
  1. Storing the text "Hello world" in a variable text.
  2. Selecting the layer #mylayer  using x=document.getElementById("mylayer");
  3. Putting value inside the layer using  x.innerHTML = text;
  4. We already defined the value of text in var text.
  5. Calling the function when the button is clicked, onclick="change()" 
  6. Final Output is When user click on the button  the text "Testing My Javascript Code" will be replaced as "Hello world".
  7. You can copy the above code in a html file and running that html file in your browser will output the result.
From the above code we studied the initial part of JavaScript. Our next step is to study how to display a simple pop up window in javascript. 

<html>
<head>

<title>My Javascript</title>

<script>

function popupmsg()
{
alert('Hello Friend');

}
</script>

</head>

<body> 

<input type="button" onclick=" popupmsg()" value="Display Hello World"/>

</body>


</html>

The above code displays a popup message Hello Friend when we click the button "Display Hello World" . I put the coding of alert in a function (look popupmsg() ) and called that function in button "onclick", 

Here in the section of "onclick" users can change the event to some other like onDblClick, onMouseOver etc instead of onclick. Then the popup message "Hello World" will display only when we double click the button or moving mouse over the button.

Another method is simply calling alert in the event instead of calling it in function. That is as follows.


<html>
<head>

<title>My Javascript</title>


</head>

<body> 

<input type="button" onclick="alert('Hello Friend')" value="Display Hello World"/>

</body>

</html>

Then next problem is how can we change the popup message by our own. 
Following code allows you to enter a value in text box,  the same value (the value entered by you) is displayed in popup message instead of "Hello Friend"

<html>

<head>

<title>My Javascript</title>

<script>

function popupmsg()

{
var dom = document.getElementById('kol').value;
alert(dom);

}

</script>

</head>

<body>

<input type="text" name="text" size="30" id="kol">

<input type="button" onMouseOver="popupmsg()" value="Display Hello World"/>

</body>

</html>

Explanation of above code as follows.
  1. Creating a function popupmsg()
  2. Creating a variable "dom" to store the input value from textbox id "kol".
  3. document.getElementById('kol').value; takes the value entered from textbox.
  4. alert function displays value stored in variable "dom" using alert(dom);

No comments:

Post a Comment