JavaScript Syntax – Where JavaScript Code takes Birth!

Previously, we learned about all the core aspects of JavaScript in JavaScript tutorial, now, moving ahead in the DataFlair’s JavaScript Tutorial Series, we will understand the JavaScript Syntax.

This tutorial will help you to write your first JavaScript code. From here on, you will start implementing JavaScript as you learn. But first, you need to understand the syntax of JavaScript and how it works. It’s the time to dive into the concept.

What is JavaScript Syntax?

JavaScript syntax refers to the set of rules that determine how the programmer constructs and the browser interprets JavaScript programs.

Before starting with JavaScript, let us first understand how to add JavaScript to an HTML file:

The HTML <script> Tag

The <script> tag in HTML defines a client-side script like JavaScript. We can add the tags in any of the following locations:

  • Inside the <head> tag
  • Inside the <body> tag
  • In an external file

If embedded in the HTML file, we must write JavaScript code like this:

<script>
JavaScript code
</script>

The alternative is to add an external JavaScript file in our HTML document. This separates the HTML code from the JavaScript code, making it a lot easier for the programmer to edit the code.

The most common attributes of <script> tag are src and type.

<script src= ‘my_js_file.js’ type= 'text/javascript'></script>

The src attribute specifies the URI of an external script. A URI or Uniform Resource Identifier is a sequence of characters that identifies a logical or physical resource.

The type attribute defines the type of file represented.

In case we want to provide content for those users who have disabled JavaScript, we use the <noscript> tag.

Code:

<html>
<body>
     <p id="test">Hello DataFlair!</p>
     <script>
     document.getElementById('test').innerHTML = "My first JavaScript code!"
     </script>

     <noscript>
     Sorry, JavaScript not supported 🙁
     </noscript>

</body>
</html>

Screenshot:

HTML script tag screenshot - JavaScript Syntax

If JavaScript is enabled in your browser, the result will be:

HTML script tag output - JavaScript Syntax

If not, the output in your browser will be:

HTML script tag output 2 - JavaScript Syntax

JavaScript syntax includes various components that we will explore in this tutorial. We will discuss all of them in detail later on in our tutorial. For now, we will try to grasp the basic idea of the syntax with the help of a code.

Code:

<html>
<body>

      <script>
      var operand1, operand2, sum; //declaring variables
      operand1 = 10;
      operand2 = 20; //assigning values to the variables operand1 & operand2
                  /* A JavaScript Expression */
      sum = operand1 + operand2; //using arithmetic and assignment operators
      document.write("Sum of " + operand1 + " and " + operand2 + " is " + sum);
      </script>

</body>
</html>

Screenshot:

HTML script tag var operand screenshot - JavaScript Syntax

The output of this code in the browser would be:

HTML script tag var operand output - JavaScript Syntax

Note that we embedded this code in an HTML file. This is because we cannot execute a JavaScript file on the browser on its own. So we use the <script> tag to add JavaScript in our HTML code. You can also add an external JavaScript file, the output will remain the same.

Wait! Have you checked the Latest Features of JavaScript

JavaScript Values

JavaScript syntax includes two types of values:

  • Fixed values 
  • Variable values

The fixed values are Literals while the variable values are Variables.

A literal is a way to create values in JavaScript; it takes the value you provide and creates a data value from it. In the code, 10 and 20 are the literals we provided and store the literal 30 after computation.

A variable is simply the name of the storage location where we store the data and we can easily alter it. In the above code, operand1, operand2 and sum are the variables that we operated on.

JavaScript Operators

The various operators in JavaScript are symbols that allow us to perform operations on operands. We use Arithmetic operators ( +, -, *, /, %) to calculate the value and Assignment operators ( =, +=, -=, *=) to allocate values to the variables.

In the above code, we used assignment operator = and arithmetic operator + for addition and concatenation (joining the strings together).

Grab complete knowledge with our separate article on JavaScript Operators

JavaScript Expressions

These are the combination of values, operators, and variables. They are used to compute the value.

sum = operand1 + operand2; is the expression used in the code.

JavaScript Keywords

These are reserved words in JavaScript that have some special meaning and thus cannot be used as identifiers. For example – JavaScript uses the var keyword to declare a variable.

JavaScript Identifiers

We use them to name variables in a program. They follow certain rules:

  • Identifiers must start with a letter, dollar sign ($), or underscore (_).
  • Identifiers only consist of letters, numbers, dollar sign ($), and underscore (_).
  • An identifier cannot be a keyword.

JavaScript Data Types

JavaScript provides different data types to hold different variable values. These are mainly of two types: Primitive and Non-Primitive (Reference).

Want to learn more, right? Check our complete tutorial on JavaScript Data Types

JavaScript Comments

This JavaScript code is not executed. These include additional notes for the programmer. JavaScript interpreter considers any code after double slashes // and between /* and */ as a comment.

It is clear in the above example that the comments are never interpreted by the browser.

Summary

Here we come to the end of our article on JavaScript Syntax. In the following article, we discussed the basics of JavaScript syntax. Now you know what JavaScript actually is and how the browser interprets it. These are the basic blocks that define the whole structure of JavaScript. Therefore it is very important to understand them correctly to be an expert in JavaScript.

Time to move on to the next article – JavaScript Architecture

Hope the information provided was useful to you. Drop your feedback and queries below in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.