Java Script Beginner Tutorial 6 : JavaScript Operators

JavaScript operators are used to perform operations on JavaScript variables. The assignment operator = is used to assign values to JavaScript variables. The arithmetic operator + is used to add values together. For example


x = 3;
y = 4;
z = x + y;


The output 'll be equal to 7. 


Arithmetic operators are used to perform arithmetic between variables and/or values. There are many arithmetic operators, we use in JavaScript, for example


+  ( used for addition),                -  ( used for subtraction ), 
*  ( used for multiplication ),        /  ( used for division ), 
%  ( used for modulus ),             ++  ( used for increment ) and 
--  ( used for decrement )


Assignment operators are used to assign values to JavaScript variables. These assignments operators can be used in JavaScript :


= ,  += ,  -= ,   *= ,   /=   and   %=


The + operator can also be used to add string variables or text values together. For example


str1 = "This is ";
str2 = "a fox";
str3 = str1 + str2;


The output 'll be "This is a fox."
If you add a number and a string, the result will be a string. For example 


x = "this is a string" + 10 ;


The output 'll be "this is a string10".

Java Script Beginner Tutorial 5 : Java Script Variables

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;

Java Script Beginner Tutorial 4 : Java Script Comments

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.

Java Script Beginner Tutorial 3 : Where to place JS

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.

Java Script Beginner Tutorial 2 : How To Use

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.