Post
Ask Question

JavaScript from Beginner To Advanced - Part One

Introduction

 
JavaScript is an open source, client-side scripting language. Client-side means language runs in the browser and is not used on the server side. It is very easy to interact with HTML pages using JavaScript. JavaScript is case-sensitive and uses the Unicode character set (It means all human language's written symbols. It includes the tens of thousands of Chinese characters, math symbols, as well as characters of dead languages). 
 
Simple statements in JavaScript are generally followed by a semicolon character(;) like other programming languages e.g. C++, C# and Java, and in JavaScript a semicolon is optional. It is good programming practice to use semicolons. In JavaScript we can use spaces, tabs, and new line characters according to our requirement. Spaces, tabs, and new line requirement are called white space. The source text of JavaScript executes from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments, or white space.
 

Variables

 
Variables store data that can later be retrieved or updated with new data. In JavaScript variables must start with a letter, underscore(_) or dollar sign ($). 
 
We can declare variables in the following ways:
  1. var
    Using var keyword we can declare local and global variables. e.g. var name='JavaScript ';
     
  2. this
    Using this keyword we can declare variables like this.name='JavaScript '. This keyword is always declared a global variable.
     
  3. let
    Let the keyword is used for declaring a block scope variable.
     
  4. const
    As the name suggests, using const keyword we can create any read-only variable.
A variable declared using the var or let statement with no value will automatically be assigned with default value undefined.
 
If we want to access any variable without prior declaration will throw Reference error exception.
 

Comments

 
You can put comments into JavaScript code, just like you can in CSS:
 
Example
  1. <html>      
  2.       
  3. <body>      
  4.     <script language="javascript" type="text/javascript">      
  5.         /*   
  6. Comment here  
  7.         */      
  8.         
  9.     </script>      
  10. </body>      
  11.       
  12. </html>    
If your comment contains no line breaks, is easy to use like this:
  1. <html>      
  2.       
  3. <body>      
  4.     <script language="javascript" type="text/javascript">      
  5.     
  6.   //This is Comment    
  7.         
  8.     </script>      
  9. </body>      
  10.       
  11. </html>     
Now, we are ready to proceed to some real programming stuff!
 

Setting Up Code

 
Where do our JavaScript codes go? Well, basically anywhere inside the <html> tags of our HTML page. JavaScript must begin with <script type="text/JavaScript "> and ends with </script> but it is normally recommended that you should keep it within the <head> tag of HTML page.
 
Hello world With JavaScript
 
Let us take a sample example. In this we will write code for displaying "Hello World!" using JavaScript.
  1. <html>    
  2.     
  3. <body>    
  4.     <script language="javascript" type="text/javascript">    
  5.         /* Description:-  
  6.         Here "document" is the object and   
  7.         "write" is the method of this object.This method write what ever message you pass into this as parameter.   
  8.         */    
  9.         document.write("Hello World!");    
  10.     </script>    
  11. </body>    
  12.     
  13. </html>   
When this code executes then the following result is displayed,
 
Hello World!
 
In JavaScript all objects' properties and methods are accessed in the same manner as the above example -- first by specifying the object name, then a dot (.), then the method or property you want to use from it.
 
Basic Important Methods/Properties of document object in JavaScript
 
The document object is one of the most important objects of JavaScript. It has lot of useful methods, some of them are below:
  1. document.body: Sets or gets the document's body (the <body> element) or null if no such element exists.
     
    Example
    1. <html>    
    2.     
    3. <body>    
    4.     <script language="javascript" type="text/javascript">    
    5.         //if want to get Id of  body tag then you can use document.body.id.    
    6.         document.body.style.backgroundColor = "yellow";    
    7.     </script>    
    8. </body>    
    9.     
    10. </html>   
    In the above example document. body. style.backgroundColor="yellow" replaces <body> tage background color with specified color.
     
  2. document.cookie: Cookie property sets or gets all name/value pairs of cookies in the current document.
     
    Example
    1. <script language="javascript" type="text/javascript">    
    2.     //declare x variable and assign it with document.cookie value;.      
    3.     var x = document.cookie;    
    4.     //used for popup.It will popup of x value      
    5.     alert(x);    
    6. </script> 
  3. document.getElementsByTagName(): This function return all element of given HTML tage.
     
    Example
    1. <script language="javascript" type="text/javascript">    
    2.     var h1 = document.getElementsByTagName("h1")[0]; // Get the first <h1> element in the document    
    3. </script>  
  4. document.getElementById(): This is the most often used JavaScript method. It is useful when you want to get an element from your HTML on your document. It will return null when no element found with specified Id.
    1. <html>    
    2.     
    3. <body>    
    4.     <p id="demo">Value will replace from Hello World.</p>    
    5.     <script language="javascript" type="text/javascript">    
    6.         //Here demo is element Id which we want to get and innerHTML property gets or sets the HTML content (inner HTML) of an element.      
    7.         document.getElementById("demo").innerHTML = "Hello World";    
    8.     </script>    
    9. </body>    
    10.     
    11. </html>   
  5. document.getElementsByClassName(): This method returns the list of all HTML elements in the document with the specified class name, which can be accessed using the index numbers. The Index number starts at 0.
    1. <html>    
    2.     
    3. <body>    
    4.     <div class="bla">First element.</div>    
    5.     <div class="bla">Second element.</div>    
    6.     <script language="javascript" type="text/javascript">    
    7.         //Here x will get collection of all html element which have class name bla.      
    8.         var x = document.getElementsByClassName("bla");    
    9.         //set then value of first element as Hello World!.      
    10.         x[0].innerHTML = "Hello World!";    
    11.     </script>    
    12. </body>    
    13.     
    14. </html>   
  6. document.getElementsByName(): This method works exactly the same as document.getElementsByClassName()  only difference is document.getElementsByClassName() needs to pass class name a argument and in document.getElementsByName() needs to pass element name as parameter.
    1. <html>    
    2.     
    3. <body>    
    4.     <div class="bla">First element.</div>    
    5.     <div class="bla">Second element.</div>    
    6.     <script language="javascript" type="text/javascript">    
    7.         //Here x will get collection of all html element which have classname bla.      
    8.         var x = document.getElementsByClassName("bla");    
    9.         //set then value of first element as Hello World!.      
    10.         x[0].innerHTML = "Hello World!";    
    11.     </script>    
    12. </body>    
    13.     
    14. </html>   
  7. document.createAttribute(): This function is used to create an HTML attribute. e.g.
    1. <script language="javascript" type="text/javascript">    
    2.     var h1 = document.getElementsByTagName("H1")[0]; // Get the first <h1> element in the document      
    3.     var att = document.createAttribute("class"); // Create a "class" attribute      
    4.     att.value = "democlass"; // Set the value of the class attribute      
    5.     h1.setAttributeNode(att); // Add the class attribute to <h1>    
    6. </script> 
In this article we learned about the basics of JavaScript. In upcoming articles we will learn about methods, events, etc. This is my first article, so your comment, critics and suggestions are welcomed.
 
Read more articles on JavaScript


Similar Articles