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:
- var
Using var keyword we can declare local and global variables. e.g. var name='JavaScript ';
- this
Using this keyword we can declare variables like this.name='JavaScript '. This keyword is always declared a global variable.
- let
Let the keyword is used for declaring a block scope variable.
- 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
- <html>
-
- <body>
- <script language="javascript" type="text/javascript">
-
-
-
-
- </script>
- </body>
-
- </html>
If your comment contains no line breaks, is easy to use like this:
- <html>
-
- <body>
- <script language="javascript" type="text/javascript">
-
-
-
- </script>
- </body>
-
- </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.
- <html>
-
- <body>
- <script language="javascript" type="text/javascript">
-
-
-
-
- document.write("Hello World!");
- </script>
- </body>
-
- </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:
- document.body: Sets or gets the document's body (the <body> element) or null if no such element exists.
Example
- <html>
-
- <body>
- <script language="javascript" type="text/javascript">
-
- document.body.style.backgroundColor = "yellow";
- </script>
- </body>
-
- </html>
In the above example document. body. style.backgroundColor="yellow" replaces <body> tage background color with specified color.
- document.cookie: Cookie property sets or gets all name/value pairs of cookies in the current document.
Example
- <script language="javascript" type="text/javascript">
-
- var x = document.cookie;
-
- alert(x);
- </script>
- document.getElementsByTagName(): This function return all element of given HTML tage.
Example
- <script language="javascript" type="text/javascript">
- var h1 = document.getElementsByTagName("h1")[0];
- </script>
- 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.
- <html>
-
- <body>
- <p id="demo">Value will replace from Hello World.</p>
- <script language="javascript" type="text/javascript">
-
- document.getElementById("demo").innerHTML = "Hello World";
- </script>
- </body>
-
- </html>
- 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.
- <html>
-
- <body>
- <div class="bla">First element.</div>
- <div class="bla">Second element.</div>
- <script language="javascript" type="text/javascript">
-
- var x = document.getElementsByClassName("bla");
-
- x[0].innerHTML = "Hello World!";
- </script>
- </body>
-
- </html>
- 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.
- <html>
-
- <body>
- <div class="bla">First element.</div>
- <div class="bla">Second element.</div>
- <script language="javascript" type="text/javascript">
-
- var x = document.getElementsByClassName("bla");
-
- x[0].innerHTML = "Hello World!";
- </script>
- </body>
-
- </html>
- document.createAttribute(): This function is used to create an HTML attribute. e.g.
- <script language="javascript" type="text/javascript">
- var h1 = document.getElementsByTagName("H1")[0];
- var att = document.createAttribute("class");
- att.value = "democlass";
- h1.setAttributeNode(att);
- </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
SubashPosted Aug 30, 2016, 12:38 AM
Useful one thank you
Ravi PatelPosted May 18, 2016, 3:37 AM
nice explanation
Vignesh ManiPosted Apr 3, 2016, 5:30 PM
Nice one.
Kuppurasu NagarajPosted Apr 3, 2016, 12:06 PM
nice
shaikh abrarPosted Mar 30, 2016, 1:17 AM
Nice
Yogendra YadavPosted Mar 21, 2016, 8:08 AM
nice one
Pradeep SahooPosted Mar 18, 2016, 8:39 PM
good description ....
Imtiyaz AnsariPosted Mar 16, 2016, 2:50 PM
Nice Describe for Beginners
Amit Kumar SinghPosted Mar 16, 2016, 6:42 AM
Nice one
Debasis SahaPosted Mar 15, 2016, 1:52 PM
Good One..
Saillesh PawarPosted Mar 15, 2016, 8:44 AM
Please elaborate let: Let keyword is used for declaring a block scope variable.
Saillesh PawarPosted Mar 15, 2016, 8:42 AM
Nice Share.
Mohammed IbrahimPosted Mar 6, 2016, 9:57 AM
nice
Kirtan ParmarPosted Mar 6, 2016, 1:37 AM
its really helpful for beginners
Ankit BansalPosted Mar 6, 2016, 12:59 AM
Nice share..Looking forward for a good and more expressive series of JS..JavaScript Rocks..
KeyurPosted Mar 6, 2016, 12:45 AM
Nice...
Humayun Kabir MamunPosted Mar 5, 2016, 10:51 PM
Nice...
Asfend YarPosted Mar 5, 2016, 1:56 PM
nice
Sonu ChaudharyPosted Mar 5, 2016, 12:12 PM
Plz explain how to print value by JavaScript
Vignesh ManiPosted Mar 5, 2016, 9:08 AM
Nice
Satyam LimbaniPosted Mar 5, 2016, 8:24 AM
informative article for beginner
Amit Kumar SinghPosted Mar 5, 2016, 6:46 AM
Nice One