Post
Ask Question

Learn JavaScript

Introduction

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.

learn_javascript

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, and 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:
    • Alert- OK
    • Confirm- OK/CANCEL
    • Prompt- Input
  5. Function- There is a 'function' keyword used for function in JavaScript.

Some Examples of JavaScript

A simple program of JavaScript.

<body>      
    <script type="text/javascript">      
        document.write("Most Welcome in JavaScript")      
    </script>      
</body>       

Output

Frames in JavaScript?

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">           
                    <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=recipe>      
        </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 frames the link target.

<frameset cols="20%,*">      
<frame src="sidebar.html" name=sidebar>      
<frame src="main.html" name=nain>      
</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;      
    alert(c);      
</script>  

Output

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;
    alert(c);      
</script>

Output

JavaScript multiplication operator

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

<script>      
    var a = 4;      
    var b = 3;      
    var c = a * b;      
    alert(c);      
</script>   

Output

JavaScript division operator

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

<script>      
    var a = 8;      
    var b = 4;      
    var c = a / b;      
    alert(c);      
</script>    

Output

JavaScript increment operator

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

Example

<script>      
    var i = 0;      
    i++;      
    alert(i);      
</script>   

Output

JavaScript decrement operator

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

Example

<script>      
    var i = 1;      
    i--;      
    alert(i);      
</script>  

Output

JavaScript block statement

JavaScript block statements are the curly braces ( { } ), you see everywhere. They are used to establish the code to be compartmentalized into a specific function or 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> 

For more info in this Module 

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


Similar Articles