JavaScript variables are used to hold values or expressions. A variable can have a short name e.g x or y etc, or it can have more descriptive name, for example firstname or city. There are some rules for naming JavaScript variables, these are below.
- Variable names are case sensitive, y and Y are two different variables. (as JavaScript is case-sensitive, so variable names are also case-sensitive.)
- Variable names must begin with a letter, the $ character, or the underscore character.
JavaScript Variables Declaration :
Creating new variable in JavaScript is most often referred to as "declaring" a variable. Variables are declared in JavaScript using var keyword, e.g var cityname; To assign a value to the variable, we use the = sign, e.g cityname="NYC"; However, we can also assign a value to the variable when we declare it, e.g var cityname="NYC";
To assign a text value to a variable, put quotes around the value. While assigning a numeric value to a variable, do not put quotes around the value, if you put quotes around a numeric value, it will be treated as text. If you redeclare a JavaScript variable, it will not lose its value.
If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables. e.g cityname="NYC"; will declare the variable carname as a global variable if it does not already exist.
Local JavaScript Variables :
A variable declared within a JavaScript function becomes local and can only be accessed within that function. Local variables can be with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are deleted as soon as the function is completed.
Global JavaScript Variables :
Variables declared outside a function, become Global, and all scripts and functions on the web page can access it. Global variables are deleted only when you close the page.
JavaScript Arithmetic :
You can do arithmetic operations with JavaScript variables ( as we do with algebra ). For example
y=3;
x=y+4;
JavaScript comments can be used to make the code more readable. Comments are not executed by JavaScript. There are two ways for commenting JavaScript Code. These are as follows
Single line comments :
Single line comments start with //. For example, we use single line comments to explain the code.
// Edit paragraph on page load
document.getElementById("Parag").innerHTML="This paragraph added using JS.";
Single line comment can be used to prevent the execution of one of the code lines, for example
//document.getElementById("p1").innerHTML="paragraph 1 text here";
document.getElementById("p2").innerHTML="
paragraph 2 text here ";
First code line 'll not be executed by browser.
JavaScript Multi-Line Comments :
Multi line comments start with /* and end with */.
For example
/*
The JS code below will
Edit paragraph,
having id "parag".
*/
document.getElementById("Parag").innerHTML="This paragraph added using JS.";
Multi-line comments can used to prevent the execution of a code block. For example
/*
document.getElementById("p1").innerHTML="paragraph 1 here";
document.getElementById("p2").innerHTML="
paragraph 2 here ";
*/
Comments can be placed at the end of a code line as well. For example
var str="My name is Waqas."; // declare a variable and assign a value to it
str=
str + "I am JS developer"; // concatenate string to variable.
There are different ways, we can place Java Script code inside web page. These are as follows
JavaScript in <body>
JavaScript in <head>
Using an External JavaScript
JavaScript in <body> :
Java Script code can be placed in <body> tag. It is placed at the bottom of the page to make sure all the elements are loaded completely. If Java Script code executed before entire page loaded then it may cause problem, e.g trying to change content of some element ( say <p> ) , which is not loaded yet, can cause problem. For example
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="content">A Paragraph</p>
<script type="text/javascript">
document.getElementById("content").innerHTML="Edited using JavaScript";
</script>
</body>
</html>
If we place <p> tag after Java Script code then definitely it cause problem.
JavaScript Functions and Events :
If we want to execute a JavaScript when an event occurs, such as when a user clicks a button then we 'll put the script inside a function. Functions are normally used in combination with events. For example, in following code, JS function named "myFunction" 'll be called on button click event. ( This is also example of Java Script in <head> )
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
document.getElementById("content").innerHTML="Edited using JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="content">A Paragraph</p>
<button type="button" onclick="myFunction()">Click Me !!!</button>
</body>
</html>
You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.
Using an External JavaScript :
JavaScript can also be placed in external files. External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension .js. To use an external script, point to the .js file in the "src" attribute of the <script> tag. For example
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>
The script will behave as it was located in the document, exactly where you put it.
JavaScript is typically used to manipulate existing HTML elements. The HTML "id" attribute is used to identify HTML elements. The document.getElementById() method will access the HTML element with the specified id. For Example, in following code, the browser will access the HTML element with id="content", and replace the content with "Edited using JavaScript ".
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="content">My First Paragraph</p>
<script type="text/javascript">
document.getElementById("content").innerHTML="Edited using JavaScript";
</script>
</body>
</html>
The HTML <script> tag is used to insert a JavaScript into an HTML document. Inside the <script> tag use the type attribute to define the scripting language (e.g type="text/javascript"). The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript and are executed by the browser:
Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, as follows
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("content").innerHTML="Edited using JavaScript";
//-->
</script>
</body>
</html>
The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
The following example writes a <p> element into the HTML document:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<script type="text/javascript">
document.write("<p>Added using JavaScript</p>");
</script>
</body>
</html>
The problem here is that, the entire HTML page will be overwritten if document.write() is used inside a function. So we must use document.getElementById() to avoid overwritten entire HTML page.
Introduction :
JavaScript is the most popular scripting language on the internet, and works in all major browsers. It can be used without purchasing a license.
JavaScript was designed to add interactivity to HTML pages. It is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages.
Java and JavaScript :
Java and JavaScript are two completely different languages in both concept and design. Java is a powerful and much more complex programming language , such as C and C++.
Java is server side language while Java Script is client side language.
Usage of Java Script :
Java Script is used for following purposes.
- Java Script gives HTML designers a programming tool.
- Java Script can react to events.
- Java Script can manipulate HTML elements.
- Java Script can be used to validate data.
- Java Script can be used to detect the visitor's browser.
- Java Script can be used to create cookies.
What is ECMAScript :
JavaScript is an implementation of the ECMAScript language standard. ECMA-262 is the official JavaScript standard.
JavaScript was invented by Brendan Eich at Netscape, and has appeared in all browsers since 1996.
The official standardization was adopted by the ECMA organization in 1997.
The ECMA standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
