fbpx
April 2, 2020
javascript syntax

JavaScript SYNTAX | Introduction To Basic Syntax Used In JavaScript

In this tutorial we will be discussing about JavaScript Syntax which entails the basic syntax used in JavaScript. In our previous tutorial we introduced JavaScript and highlighted some of the importance, advantages and limitations of JavaScript. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: Introduction to JavaScript and its Importance

JavaScript Syntax

Just like HTML codes been placed in between the <html> opening and closing </html> tags, JavaScript codes are also placed in between the opening <script> and closing </script> tags. This script can be placed anywhere in the web document but it’s quite advisable to place them in between the <head> section of the web document.

With the help of the <script> tags, the browser gets alerted to start interpreting any code found in between the opening and close <script> tags.  Example of a script syntax in JavaScript is shown below

<script>
functional JavaScript codes

</script>

JavaScript attributes for script tags

Two attributes that can be placed in between the JavaScript scripts tags include:

  • Language: This is used to specify the name of scripting language found in between the script tags
  • Type: This is used to specify the type of script codes placed in between the script tags. Expected value for JavaScript codes is text/javascript.

Below is the re-branded JavaScript syntax after adding the needed attributes

<script language='javascript' type = 'text/javascript'>
functional JavaScript codes

</script>

Building A simple JavaScript Code

Below we will be structuring a simple JavaScript Code with the help of HTML to print out “Hello Buddy” on the web screen. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>Simple JavaScript Code Structure</title>
</head>
<body>
   <script language = "javascript" type = "text/javascript">
      <!--
         document.write("Hello Buddy")
      //-->
   </script>  
   
</body>
</html>

The optional comment structure is used to protect the codes from browsers that do not support scripts

RESULT ON WEB PAGE

Simple JavaScript Code Structure

JavaScript Line Breaks

JavaScript supports line breaks and ignores it. So you can add line breaks and white space in-between your codes for proper structuring. Most developers use line breaks and white spaces to indent and beautify their web codes.

JavaScript Semi colon

The semi colon can be used in JavaScript to break a line of code statement. Although JavaScript allows us to use line breaks to break the line of code statement as well. For example

using line breaks

<script language='javascript' type = 'text/javascript'>
var = a
var = b

</script>

using semi colon and single line

<script language='javascript' type = 'text/javascript'>
var = a; var = b;

</script>

Case Sensitivity

JavaScript is not forgiven unlike HTML. when coding in JavaScript you need to be aware of the use of capitalization’s because JavaScript threats words or letters with different capitalization’s as different and individual words or characters. For example, The word “boy” is different from the word “BOY” and also different from the word “Boy” in JavaScript. So when coding in JavaScript , you need to be consistent in your choice of capitalization.

Comment in JavaScript

Adding comments in JavaScript is quite different from HTML and CSS. JavaScript supports two commenting styles, the single line commenting and the multiple line commenting as shown below

Single line comment: The single line comment in JavaScript starts with the double slash sign “//” and this can only hold comments placed in the same line with the double slash sign. Example shown below

//this is a comment

Multiple line comment: The multiple line comments supports more than one line of comments and the comments are placed between the /* and *\ signs. Example shown below

/*this is a multiple line
of comment illustration
*/

CONCLUSION

With the help of this tutorial on JavaScript syntax we hope you are able to structure simple JavaScript codes and comments when developing your web page. Lets move on to the next topic on JAVASCRIPT PLACEMENT

Leave a Reply

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