Post
Ask Question

How to Learn JavaScript

JavaScript, commonly abbreviated as JS, is high-ranking, mostly just-in-time, and multiparadigm assembled. It has curly bracket notation, intuitive scripting, object-orientation concept, and high-class functions.

JavaScript gained popularity because of the following features,

  1. Increased execution speed as it is interpreted and not compiled
  2. Easy to learn and implement.
  3. It is supported by all modern browsers with built-in interprets.
  4. It works efficiently with other languages, to provide an optimal web solution.
  5. JavaScript is both capable of Front-End and Back-End.
  6. Provides greater performance for websites and web applications with reduced code length.  

Some facts about JavaScript,

  1.  JavaScript along with HTML and CSS forms the 3 main components of WWW or the World Wide Web.
  2. JavaScript was developed under project Mocha.
  3. JavaScript was created in just 10 days, covering very limited functionalities.
  4. JavaScript is an interpreted language.
  5. According to Github Octoverse, although JavaScript has not seen any growth, then also is among the top languages used on the web. 

Fundamentals Of JavaScript

  1. There are no specific data types (e.g:-var t) in JavaScript.
  2. There are if for, switch, while, do-while, break, continue; similar to Java or C# in JavaScript.
  3. document.write() is used to display an output in JavaScript.
  4. There are some dialogues in JavaScript, which are as follows:
    1. Alert- OK
    2. Confirm- OK/CANCEL
    3. Prompt- Input
  5. Function- There is a 'function' keyword, which is used for function in JavaScript.

Some Examples of JavaScript

A simple program of JavaScript.

<html>      
      
<head>      
    <title>MY TITLE</title>      
</head>      
      
<body>      
    <script type="text/javascript">      
        document.write("Most Welcome in JavaScript")      
    </script>      
</body>      
      
</html>  

How many data types are in JavaScript

Answer

There are two types of data types in JavaScript.

Primitive data type

  • String
  • Number
  • Boolean
  • Undefined
  • Null

Non-primitive (reference) data type

  • Object
  • Array
  • RegExp

Frames in JavaScript

Answer

Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame".

Here is an example

<FRAMESET ROWS="75%, *" COLS="*, 40%">      
    <FRAME SRC="framea.html">      
        <FRAME SRC="frameb.html">      
            <FRAME SRC="framec.html">      
                <FRAME SRC="framed.html">      
                    <NOFRAMES>      
                        <H1>No Frames? No Problem!</H1>    

Take a look

<A HREF="noframes.html">no-frames</A> 

The version is

  • </NOFRAMES>  
  • </FRAMESET> 

Nested Frames

<FRAMESET ROWS="15%,*">      
    <FRAME SRC="titlebar.html" NAME=TITLE SCROLLING=NO>      
        <FRAMESET COLS="20%,*">      
            <FRAME SRC="sidebar.html" NAME=SIDEBAR>      
                <FRAME SRC="menu.html" NAME=RECIPES>      
        </FRAMESET>      
        <NOFRAMES> No frames? No Problem! Take a look at our      
            <A HREF="menu.html">no-frames</A> version. </NOFRAMES>      
</FRAMESET>    

Targeting Frames

Each frame is given a name, using <FRAME NAME="...">. These names uniquely identify each frame. Using these names, the links in other frames can tell the Browser, which frame does the link target.

<FRAMESET COLS="20%,*">      
<FRAME SRC="sidebar.html" NAME=SIDEBAR>      
<FRAME SRC="main.html" NAME=MAIN>      
</FRAMESET>    

To target one of these frames, the link should have a TARGET attribute set to the name of the frame, where the linked page should appear. Thus, for example, this code creates a link totfetacos.html and targets the link to the MAIN frame:

<A HREF="tfetacos.html" TARGET=MAIN>my link</A>    

JavaScript Addition Operators

JavaScript addition operator ( + ) serves two main purposes in JavaScript. The first is to perform a simple addition to the numbers.

The second operation is to perform a string concatenation (combine the strings).

<script>      
    var a = 3;      
    var b = 2;      
    var c = a + b;      
    document.write(c);      
</script>  

JavaScript subtraction operator

JavaScript subtraction operator ( - ) also serves two purposes in your code. The first is to perform simple subtraction on the numbers (6 - 2). The second operation is to specify negative numeric values (-20).

Subtraction

<script>      
    var a = 10;      
    var b = 3;      
    var c = a - b;      
    document.write(c);      
</script>  

JavaScript multiplication operator

JavaScript multiplication operator ( * ) is used to multiply the numbers.

<script>      
    var a = 4;      
    var b = 3;      
    var c = a * b;      
    document.write(c);      
</script>   

JavaScript division operator

JavaScript division operator ( / ) is used to divide the numbers.

<script>      
    var a = 8;      
    var b = 4;      
    var c = a / b;      
    document.write(c);      
</script>    

JavaScript increment operator

JavaScript increment operator ( ++ ) is used to increase a number by 1.

Example

<script>      
    var i = 0;      
    i++;      
    document.write(i);      
</script>   

JavaScript decrement operator

JavaScript decrement operator ( -- ) is used to decrease a number by 1.

Example

<script>      
    var i = 1;      
    i--;      
    document.write(i);      
</script>  

JavaScript block statement

JavaScript block statements are the curly braces ( { } ), you see everywhere. They are used to establish the code, which is to be compartmentalized into a specific function or a statement.

The lines of the code inside of a block statement are often intended to represent that they are part of the block statement. The following are some examples, showing the curly braces establishing the blocks of the compartmentalized code.

<script>      
    if (3 < 5) {      
        // code for this block statement goes in here      
    }      
    for (var i = 0; i < 10; i++) {      
        // code for this block statement goes in here      
    }      
      
    function myFunction() {      
        // code for this block statement goes in here      
    }      
</script>  

JavaScript break statement

The JavaScript break statement is used to terminate a loop, switch, or label the statement from further processing. Apply it, when you want to force one of those types of statements to stop the processing.

Example of terminating a loop using break

<script>      
    for (i = 0; i < 20; i++) {      
        if (i >= 5) {      
            break;      
        }      
        document.write("Pass index " + i + " of the loop<br />");      
    }      
</script>    

JavaScript continue statement

JavaScript's continue statement is used to bypass the specified iterations of a loop so that the code in the loop statement does not execute for the specified iterations and moves on to the next.

<script>      
    for (i = 0; i < 20; i++) {      
        if (i < 10) {      
            continue;      
        }      
        document.write("Pass index " + i + " of the loop<br />");      
    }      
</script>  

  

JavaScript do...while statement

JavaScript do...while statement is an inverted while statement. It will execute the code as long as the while condition returns a value of true.

<script>      
    var i = 0;      
    do {      
        document.write("Loop index: " + i + "<br />");      
        i++;      
    }      
    while (i < 5);      
</script>    

JavaScript for statement

JavaScript for statement is a loop mechanism, which will execute code as long as the condition evaluation continues to be true.

<script>      
    for (var i = 0; i < 5; i++) {      
        document.write("Pass index " + i + " of the loop<br />");      
    }      
</script>  

JavaScript Break Statement

A break statement allows you to break or exit a loop. When used inside a loop, the break statement stops executing the loop and causes the loop to be immediately exited. If the loop has statements after the break statement, the statements do not execute.

Function

Execute the script by opening the file in the Web Browser. If you are using Internet Explorer, click “Allow Blocked Content” to allow the script to execute and if you are using Mozilla Firefox, click allow “ActiveX Controls”.

Execute

JavaScript Continue Statement

Similar to the break statement, the continue statement is used to stop the execution of the loop. However, the continue statement does not exit the loop; it executes the condition for the next iteration of the loop. If the loop has any statements after the continue statement, those statements are executed.

code

Execute the script by opening the file in the Web Browser. If you are using Internet Explorer, click “Allow Blocked Content” to allow the script to execute and if you are using Mozilla Firefox, click allow “ActiveX Controls”.

Execute

JavaScript Arrays

An array is a collection of similar data types. All its values are stored in the index locations, which start in the range 0 to n-1.

Declaration of an Array

var myArray = [];      
var myArray = [value1, value2, value3, so on...];      
var myArray = new myArray(length_of_array);   

Let's understand this with the following examples

Example

var myArray = [20, 30, 40, 50];      
for (var i = 0; i <= myArray.length - 1; i++) {      
    document.write("The value at the index location " + i + " is " + myArray[i] + " <br/>");      
}    

The preceding code declares an array with 4 values. The for loop is used, which starts the index value "i" from 0 until the length of "myArray" and the index location is incremented by 1.

The written property of the document object displays the values at the index location, which is implemented, using myArray[i] and HTML Break is used, so that the value of each index location is displayed in a different line.

Example

var myevenNumbersArray = [];      
for (var i = 0; i <= 5; i++) {      
    myevenNumbersArray[i] = i * 2;      
}      
for (var i = 0; i < myevenNumbersArray.length; i++) {      
    document.write(myevenNumbersArray[i] + "<br/>");      
}  

The preceding code prints all the even numbers, stored in the array. This time, we are adding the values to the array dynamically. We have used a for loop to do this. At the very first, we have declared an array, whose size is not defined. Thus, it means that it can contain as many values, as we want. We have used a for loop starting from 0 and going to 5. The value of the index location is multiplied by 2, each time, the interpreter iterates through the loop. Thus, 5 values will be stored in the array. In other words 0, 2, 4, 6, 8, and 10.

How to access the array of elements

Array elements can be assessed through the index of the element. Array index starts with 0. For example, if we have 5 elements in an array. So the index will be like [0], [1], [2], [3], [4]. we can access the full array then we will use the array name for this. But if we want to access any specific element of the array then, we will use the index number like if we want to access the third element of the array we will use [2] index of the array.

As we have seen in the above array example program we access the full array through the array name stu. Through the statement "document.write(stu);" we print the full array.

The complete program for showing the process of accessing the array elements is listed below.

<!DOCTYPE html>    
<html>    
    <body>     
    <h2>How to access array elements</h2>    
    
    <script>    
        var ele = ["CsharpCorner","Delhi","Noida", "GZB", "Faridabad"];    
        document.write(ele);    
    </script>    
      
      </body>    
</html>    

The above program generates the following output.

array-access-elements

Explanation

In the above example program, we define an array named "ele" and access that by the statement "document.write(ele); ". It returns the elements of the array as the output of the program.

For more info in this Module

learn_javascript 

To learn and enhance more of JavaScript Functions, operators, etc. take on the C# Corner - JavaScript Introduction Course.


Similar Articles