Javascript Tutorial part 2 - syntax

This is the second article in the series of Javascript tutorials at EduSagar. You might want to check out the previous article here that gives a very basic overview of Javascript. In this article we will go through Javascript syntax and where to write the code.

* Where to write Javascript Code:

Javascript code is written inside <script> tags within HTML document. For example:

<script type="text/javascript">
alert('Hello World');

But, it is preferred to combine all Javascript code within a separate file with '.js' extension. This file can then be included within the HTML document using the same '<script>' tags but with an extra attribute which specifies the location of the external file on server. Having Javascript code in a separate file helps in code segregation and also in code reusability. For example:

<script type="text/javascript" src="/filepath/on/server.js"></script>

Another, not so common method of writing Javascript code is to write them inline with the HTML elements itself. For example:

<button onclick="alert('I am clicked')">Click Me</button>

Usually the <script> tag is put inside <head> tag in HTML. But, if you recall the example from our previous article - we wanted to take some action when a particular button was clicked. So, if you put that Javascript code inside <head>, the code will try to find a button element which will only be created when the HTML button declaration is found (which is inside <body> tag defined after <head>). To avoid this kind of situation, usually we put Javascript code just before the closing tag of body (</body>).

* Javascript is case-sensitive

Javascript is case sensitive language. Common practice is to start Class names as capital letters, and use lower case letters for function and variable names.

* Whitespaces in Javascript

Whitespaces are ignored in Javascript. So, if you remove spaces, tags, newlines from your code, it will behave exactly similar. This is really helpful as it reduces the size of the Javascript file which needs to be downloaded from server and in-turn improving website response time. There are tools that can help you minimize the size of Javascript code by removing whitespaces. However, one should always use whitespaces to make code more readable in development environment and always use the minimized version of code in production environments.

* Comments

Syntax for comments is similar to many other languages like C++. For single line comments use '//', while use /* ... */ for comments spreading over multiple lines. One should be very generous while using comments, they help other developers understand the code. There are libraries like JSDoc which can generate project documentation pages based on comments.

// a single line comment.

* this is
* a multi-line
* Javascript
* comment

* Reserved Keywords

There are few keywords which are kept reserved and thus can not be used used for user-defined functions and variables. A list of such reserved words and their explanation can be found here.

* Javascript Identifiers and Literals

A funciton or variable requires a unique name or identifier so that it can be referenced later on. It is always helpful to give your functions and variables a name that conveys their usage and purpose. Following are few constraints over defining such identifiers:

  • It should not be a reserved word
  • It can only be composed of letters, numbers, dollar signs and underscore.
  • The first character can never be a number.

* Variable Declaration

variables needs to be defined using 'var' keyword. You can define one variable using one 'var' keyword or you can combine the declaration of multiple variables using a common 'var' keyword.

var intVar = 1;
var compfunc = function() {};

var tempvar = 1,
testfunc = function(){};

This marks the end of this tutorial. In the next tutorial we will cover differnt types of Javascript variables.
comments powered by Disqus