JavaScript from Beginner To Advanced - Part One

K P Singh Chundawat
8y
21.5k
0
6
100
Article

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 letter, underscore(_) or dollar sign ($).

We can declare variables in the following ways:

var: Using var keyword we can declare local and global variable. e.g. var name='JavaScript ';
this: Using this keyword we can declare variable like this.name='JavaScript '. This keyword is always declared global variable.
let: Let keyword is used for declaring a block scope variable.
const: As 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:

E.g.

<html>
<body>
<script language="javascript" type="text/javascript">
/*
Comment here
*/
</script>
</body>
</html>

If your comment contains no line breaks, is is easy to use like this:

<html>

<body>
    <script language="javascript" type="text/javascript">

  //This is Comment

    </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">
/* Description:-
Here "document" is the object and
"write" is the method of this object.This method write what ever message you pass into this as parameter.
*/
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
1. <html>
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>
10. </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:
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>
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>
document.getElementById(): This is 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>
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>
11. </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 index number. The Index number starts with 0.
1. <html>
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>
14. </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.
1. <html>
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>
14. </html>
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.