How to write JavaScript Syntax? – Learn JavaScript Basics Online

Hey guys, how are you?

After reading my last post, hopefully, you have the basic introduction to JavaScript programming. The last was targeted to provide you the general intro session. But from today onwards, we will learn about the coding stuff. Like how to write codes of JavaScript and how to execute them?

Basically, we have two tags that I have discussed in the previous post of the same stream also. The tags are <script …></script>. In between the tags, you have to write your JavaScript code, as I have given below:

<script ...>

              Your JavaScript code goes here!

</script>

Are you still getting the question that what are ()? As I explained previously, here you have to write two important attributes which are language and type. If you don’t remember that then just scoot over to my previous post.

How to write your first “Say Hi” script?

Not so difficult, if you have a positive attitude. But if you think, it will be…

So it better to take it lightly and keep your positive attitude. You fee that JavaScript is very easy. So let’s start with our first Say Hi script. 

<html>
      <head>
           <!--JavaScript Part starts here-->
           <script language="javascript" type="text/javascript">
                document.write(" Hi ")
           </script>
           <!--JavaScript Part ends here-->

      </head>
</html>

Above I have written a small say hi script. In this what we have used are explained below:

  1. <html> tag
  2. <head> tag
  3. <script> tag
  4. document.write

Do you know what these all tags do? And what document.write does in the script and on the webpage? Are you confused about document.write and saying others as a write-up style?

Okay, let me explain to you one by one.

<html>: It’s a standard writing style which is used to taking advantage in text files to achieve the font and colors schemes in it. Like graphical effects and linking effects on WWW (World Wide Web pages).

<head>: <head> is also a tag which should start right after the start of <html>. It’s a standard way of writing a .html document file. The tag <head> may consist of further sub-tags like meta , style , base , link , and script. <head> tag is important and it should be used just once.

Might be you are thinking that when to start and stop. Isn’t it? Yea…

Okay, no problem. I am here to explain you all these things. <head>tag should start immediately after the opening <html> and end directly before the opening <body>.

<body> from where this is coming and what exactly the tag is about?

Don’t worry, relax!

<body> is not used in the above script but yes let me introduce it to you too.

<body>: <body> is the tag which consists of all the main text of your web page. That you see on the browser. The basics HTML standard write up is given below. You can refer that also.

<html>
      <head>
            <title>Tittle of the webpage goes here!</title>
      </head>

   <body>
          Main webpage content goes here!
   </body>

</html>

<script>: This tag has been already introduced to you. It is used to write the script code. It consists of two important attributes i.e. language and type. Please read the previous post to clear it, if you have still any doubt. But don’t go ahead if you don’t know it.

document.write: Got something new! Have you used printf and cout in C and C++? What does the do? Yes, they print on the output screen right. In the same way, document.write does its job of printing or writing on the screen. document.write is used to print text on the web page.

As I have written Hi inside the document.write code braces, it will fire a Hi message on the web page when we will execute the .html file. Have a look on the below screenshot of the running script.

Learn JavaScript with Rahul Rahi

Say Hi JavaScript Code

In the above screenshot, I have shown you the output of the “say hi script”. You can refer and also you can execute the script at your own system.

I am using:

  • Sublime Text Editor and
  • Google Chrome web browser.

Whitespace and Line Breaks in JavaScript

Do you know what is whitespace and what is linebreak? I think you will not refuse, no no! You don’t, really… :p

No problem, let me tell you that also.

Whitespace: A white space character is an empty space without any visual representation on the screen. e.g.

Ex.1:  p         +         (      2     *         o  )           +     j          + a                   =            pooja;

Ex.2:  p+(2*o)+j+a=pooja;

Have you analysed something? Yes the gap!

Do you find any logical or result difference between Ex.1 and Ex.2? No?

Right, there is no difference, the only appearance is different because of spaces add in between the variables. But there is no logical difference at all.

The gap between the variables (p,o,j,a) is known as white space. Let’s have a look at the example.

Learn JavaScript with Rahul Rahi Online

JavaScript Program Code explaining Whitespace concept by Rahul Rahi

Looking for me? I’m here…

<html>
   <head>
        <script language = "javascript" type="text/javascript">
            var p = 1;
            var o = 4;
            var j = 3;
            var a = 2;
            var poja;
 
                    document.write("Var a = ", p);
                  document.write("<br>");
                    document.write("Var o = ", o);
                  document.write("<br>");
                    document.write("Var j = ", j);
                  document.write("<br>");
                    document.write("Var a = ", a);
                  document.write("<br>");
                  document.write("<br>");

                    document.write("Logic Applied = p + ( 2 * o ) + j + a ");
                  document.write("<br>");
                    document.write("Result with whitespace is = ", p + ( 2 * o ) + j + a );
                  document.write("<br>");
                  document.write("<br>");
          </script>

   </head>
            <body>
                  Output with whitespace!
            </body>
</html>

In the above code, I have explained whitespace and line break concept.

Whitespace:

 document.write("Result with whitespace is = ", p + ( 2 * o ) + j + a );

Linebreak:

 document.write("<br>"); // Using html <br/> as the syntax described will add a new line, means your will be set to the new next line.

In the above syntax, I have written HTML br tag in the document.write which will act like same as <br/> break line act in HTML code.

Do you know, Semicolons are Optional?

If you are writing any simple code line in javascript, it is ended with a semicolon (;) as in C, C++ and Java. But JavaScript has a omit option for this. You can ignore semicolon. You can leave it and keep your code line simple. I’m giving an example here. Please check it out for more details.

Semicolon are ignorable in JavaScript.

The semicolon is ignorable in JavaScript.

Looking for me? I’m here…

<html>
   <head>
        <script language = "javascript" type="text/javascript">
            var p = 1
            var o = 4
            var j = 3
            var a = 2
            var poja
 
                    document.write("Var a = ", p)
                  document.write("<br>")
                    document.write("Var o = ", o)
                  document.write("<br>")
                    document.write("Var j = ", j)
                  document.write("<br>")
                    document.write("Var a = ", a)
                  document.write("<br>")
                  document.write("<br>")

                    document.write("Logic Applied = p + ( 2 * o ) + j + a ")
                  document.write("<br>");
                    document.write("Result with whitespace is = ", p + ( 2 * o ) + j + a )
                  document.write("<br>")
                  document.write("<br>")
          </script>

   </head>
            <body>
                  Output with whitespace!
            </body>
</html>

Sensitivity:

JavaScript is a case-sensitive language. Means, you have to take care of writing while writing code. e.g. time and TIME both convey the different meaning. So be careful  while writing code.

JavaScript is Case sensitive programming language.

JavaScript is Case sensitive programming language.

Looking for me? I’m here…

<html>
  <body>

      <h1>JavaScript is Case Sensitive</h1>
      <p id="case_sen"></p>

         <script type="text/javascript">
             var firstName = "Pooja";
             var firstname = "Neha";
                 document.getElementById("case_sen").innerHTML = firstName;
         </script>

  </body>
</html>

Comments in JavaScript

Comments are writen in the program code to tell about the code, what it is doing? And comment help third person to understand about the codes when the developer is replaced or chenged for the same. Comments have three styles of writing.

  1. <!–comment text//–>
  2. /*comment text*/ (This is also a multi-line comment.)
  3. // Comment text.

I have listed three javascript comments types. You can follow any of them as per as your need. I am showing you the  live example here.

Comments in JavaScript example by Rahul Rahi

Comments in JavaScript example by Rahul Rahi

Looking for me? I’m here…

<html>
   <head>
       <script language = "javascript" type="text/javascript">

 <!-- p, o, j, a, poja are the variable decleration part-->
 
 var p = 1
 var o = 4
 var j = 3
 var a = 2
 var poja;
 
<!-- variable decleration part ends here-->

/* Mutliline comment starts here
 * I have explained whitespace concept here
 * I Have explinaed linebreak conncept here
 * if you have any doubt please comment in the comment session right after the post
 * Mutliline comment ends here
 */
 
 document.write("Var a = ", p)
 document.write("<br>")
 document.write("Var o = ", o)
 document.write("<br>")
 document.write("Var j = ", j)
 document.write("<br>")
 document.write("Var a = ", a)
 document.write("<br>")
 document.write("<br>")

// now logical part is going on...
 
 document.write("Logic Applied = p + ( 2 * o ) + j + a ")
 document.write("<br>")
 document.write("Result with whitespace is = ", p + ( 2 * o ) + j + a )
 document.write("<br>")
 document.write("<br>")
 
 </script>

</head>
<body>
 Output with whitespace!
</body>
</html>

Leave a Reply

CONTACT ME