What is JavaScript
JavaScript(also known as JS) is a programming language that can understand by web browsers. That is JS run on browser, there is no need of any additional software. And note even internet connection also not need to run JS.
Why JavaScript
Before going to ask why JavaScript, first thing what will happen on a website which does not has JS code?.. Its going to had no.of static or sleeping pages which are build by HTML and CSS, and there html taking care about what contents are to be display and CSS taking care about how that contents are to be display. And one more person is there that is server language, but he only active at when our website trying to send request to server. This usually happening only on form submit, so we need to wait until our site request to and get response from server. Abort from that our site always sleeping, and we cannot perform any action even a adding two integers. Because our HTML and CSS are not know these. So in this point we need something that should make our website alive without any energy(network). For this JavaScript came. I hope now you may get some undefinable imagine about JS, yess.. thats it. We can define that imagine as JavaScript add behavior to your website where you no need for connect to server. Some of that behaviors are add or alter any HTML elements, styling that elements, making animations, form validations, even can request and response with server with out reloading the page, etc..
Okay now you had some basic idea about why and what is JS. And next you have to know how can write JS.
How to start writing JS
We can write JS in any portion of the HTML page. But writing it on top or bottom of the page is good practice, because by doing this you can separate you HTML and JS codes.
Example 1:
Write something into top of html page, and also make an alert message.
<script type="text/javascript">
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");
</script>
<html>
<head>
<title>Hello JavaScript World</title>
</head>
<body>
<p>This is my first JavaScript Programme</p>
</body>
</html>
How to RUN: Make a separate folder for our tutorial in any location. And save the above file as hello_world.html in that folder and open it on any browser.
Output: First your html page had line "Hello JavaScript World", then get one alert as "Welcome to JavaScript World", after that alert the page will get a line "This is my first JavaScript Programme".
You can save JS codes in new file with the extension ".js" and can include in on your HTML page.
Example 2:
Integrate Example 1 with external JS file.
First write the following codes in file and save it as hello_world_2.html on our folder.
<script type="text/javascript" src="hello_world_2.js"></script>
<html>
<head>
<title>Hello JavaScript World</title>
</head>
<body>
<p>This is my first JavaScript Programme</p>
</body>
</html>
Now write the following JS codes in new file and save it as hello_world_2.js on our folder.
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");
Output: Same example 1 output.
Variables in JS
Okay now you got some idea about how to write, save and run JS codes. Next you have to know how write and use variables in JS. Its not a difficult matter, its easier than you used in some basic programming languages such as C, C++. Because you do not need to declare datatype of the variable, its takes that as you defined. That is if you mention a=24 it takes it as number, if you declare a="24" then it take it as string. You have to use "var" keyword on declaration. If you do not assigned any value on the declaration it consider as a undefined.
You can declare variables as following ways,
var a; // here a declared as undefined
var a=5; // here a declared as number
var a="apple"; // here a declared as string
var a,b,c; // here a,b,c are declared as undefined in single line
var a=2,b=3,c=a+b; // here a,b declared as number and c declared with expression; here c=5;
DOM
I think before you going to write JS codes, you have know about DOM. Because JS fully designed for integrate with DOM. So by learning DOM you can outline what are JS works.
That is our browser makes every elements in the html page as programmable object model. So our JS can interact with all these objects or elements.
Our JS actions among these objects are below:
1. JS can change all the HTML elements in the page
2. JS can change all the HTML attributes in the page
3. JS can change all the CSS styles in the page
4. JS can react to all the events in the page
Example 3: Change HTML element content
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.innerHTML("Welcome to JavaScript"); // change element
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to HTML</div>
</body>
</html>
Output: The message "Welcome to JavaScript" will display on the div which having the id "welcome_div".
Change HTML Style
As we said can change the style of a html element by JS.
Example 4: Change HTML element style
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.style.color="#2E9AFE";
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to JavaScript</div>
</body>
</html>
Output: The message "Welcome to JavaScript" will display as blue color, which is on the id "welcome_div".
Call JS on Event
We can call JS function and make some operation when event is triggered on DOM or html page.
Example 5: Call JS function on a event
<script type="text/javascript">
function my_fun()
{
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.innerHTML("Welcome to JavaScript"); // change element
}
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to HTML</div>
<button value="Change" onclick="my_fun();" />
</body>
</html>
Output: The message "Welcome to HTML" is change to "Welcome to JavaScript" when you click on the button.
Some basic things need to know about JavaScript
1. Your JS code can view by users, so do not include any sensitive datas on JS file.
2. User can disable JS on browsers, so make sure your website can run with out JS. Just it add some extra functionality to site.
3. Its runs on browser, so it can run even you are not connect to internet.
4. JQuery is just a JS file, which has list of functions to minimize our coding stuff and length.
JavaScript(also known as JS) is a programming language that can understand by web browsers. That is JS run on browser, there is no need of any additional software. And note even internet connection also not need to run JS.
Why JavaScript
Before going to ask why JavaScript, first thing what will happen on a website which does not has JS code?.. Its going to had no.of static or sleeping pages which are build by HTML and CSS, and there html taking care about what contents are to be display and CSS taking care about how that contents are to be display. And one more person is there that is server language, but he only active at when our website trying to send request to server. This usually happening only on form submit, so we need to wait until our site request to and get response from server. Abort from that our site always sleeping, and we cannot perform any action even a adding two integers. Because our HTML and CSS are not know these. So in this point we need something that should make our website alive without any energy(network). For this JavaScript came. I hope now you may get some undefinable imagine about JS, yess.. thats it. We can define that imagine as JavaScript add behavior to your website where you no need for connect to server. Some of that behaviors are add or alter any HTML elements, styling that elements, making animations, form validations, even can request and response with server with out reloading the page, etc..
Okay now you had some basic idea about why and what is JS. And next you have to know how can write JS.
How to start writing JS
We can write JS in any portion of the HTML page. But writing it on top or bottom of the page is good practice, because by doing this you can separate you HTML and JS codes.
Example 1:
Write something into top of html page, and also make an alert message.
<script type="text/javascript">
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");
</script>
<html>
<head>
<title>Hello JavaScript World</title>
</head>
<body>
<p>This is my first JavaScript Programme</p>
</body>
</html>
How to RUN: Make a separate folder for our tutorial in any location. And save the above file as hello_world.html in that folder and open it on any browser.
Output: First your html page had line "Hello JavaScript World", then get one alert as "Welcome to JavaScript World", after that alert the page will get a line "This is my first JavaScript Programme".
You can save JS codes in new file with the extension ".js" and can include in on your HTML page.
Example 2:
Integrate Example 1 with external JS file.
First write the following codes in file and save it as hello_world_2.html on our folder.
<script type="text/javascript" src="hello_world_2.js"></script>
<html>
<head>
<title>Hello JavaScript World</title>
</head>
<body>
<p>This is my first JavaScript Programme</p>
</body>
</html>
Now write the following JS codes in new file and save it as hello_world_2.js on our folder.
document.write("Hello JavaScript World");
alert("Welcome to JavaScript World");
Output: Same example 1 output.
Variables in JS
Okay now you got some idea about how to write, save and run JS codes. Next you have to know how write and use variables in JS. Its not a difficult matter, its easier than you used in some basic programming languages such as C, C++. Because you do not need to declare datatype of the variable, its takes that as you defined. That is if you mention a=24 it takes it as number, if you declare a="24" then it take it as string. You have to use "var" keyword on declaration. If you do not assigned any value on the declaration it consider as a undefined.
You can declare variables as following ways,
var a; // here a declared as undefined
var a=5; // here a declared as number
var a="apple"; // here a declared as string
var a,b,c; // here a,b,c are declared as undefined in single line
var a=2,b=3,c=a+b; // here a,b declared as number and c declared with expression; here c=5;
DOM
I think before you going to write JS codes, you have know about DOM. Because JS fully designed for integrate with DOM. So by learning DOM you can outline what are JS works.
DOM is an abbreviation of Document Object Model. That is when a web page is loaded, the browser creates a Document Object Model of the page. This is constructed as a tree of Objects that is looks like in the below picture.
Our JS actions among these objects are below:
1. JS can change all the HTML elements in the page
2. JS can change all the HTML attributes in the page
3. JS can change all the CSS styles in the page
4. JS can react to all the events in the page
So, now we are going to learn about these actions. And before that one more thing we have to do is, to apply these actions first we have to find a element on the page.
Finding HTML Elements
You can find/ get elements on the page Id, Class or TagName.
Find by ID:
var element1=document.getElementById('elemnt_id');
Find by TagName:
var para=document.getElementById('p'); // get all p tags
Note: Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.
Change HTML Element Content
We can change the content of a html element by JS.
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.innerHTML("Welcome to JavaScript"); // change element
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to HTML</div>
</body>
</html>
Output: The message "Welcome to JavaScript" will display on the div which having the id "welcome_div".
Change HTML Style
As we said can change the style of a html element by JS.
Example 4: Change HTML element style
<script type="text/javascript">
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.style.color="#2E9AFE";
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to JavaScript</div>
</body>
</html>
Output: The message "Welcome to JavaScript" will display as blue color, which is on the id "welcome_div".
Call JS on Event
We can call JS function and make some operation when event is triggered on DOM or html page.
Example 5: Call JS function on a event
<script type="text/javascript">
function my_fun()
{
var wel_div=document.getElementById("welcome_div"); //get element
wel_div.innerHTML("Welcome to JavaScript"); // change element
}
</script>
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<div id="welcome_div">Welcome to HTML</div>
<button value="Change" onclick="my_fun();" />
</body>
</html>
Output: The message "Welcome to HTML" is change to "Welcome to JavaScript" when you click on the button.
Some basic things need to know about JavaScript
1. Your JS code can view by users, so do not include any sensitive datas on JS file.
2. User can disable JS on browsers, so make sure your website can run with out JS. Just it add some extra functionality to site.
3. Its runs on browser, so it can run even you are not connect to internet.
4. JQuery is just a JS file, which has list of functions to minimize our coding stuff and length.
Note: Now I hope you had some basic ideas about JS. Which means you are ready to write JS, but you have to know more about it. This tutorial only made for push you to learn JS. And here I explained just outline of the JS use. You can learn more about JS here: http://www.w3schools.com/js/default.asp
Reference:
http://www.w3schools.com/js/default.asp
http://www.w3schools.com/js/default.asp
http://javascript.about.com/od/reference/a/javascriptpurpose.htm
No comments:
Post a Comment