Quick Intro to Javascript Basic Syntax with Examples

Photo by Digital Buggu on Pexels       

Before beginning this course you need to have an environment to execute JavaScript, either a browser or a server side environment such as node.js

1# Script Insertion:

Insertion of scripts is made with the following tag :

<script> Snippet : <script> // here write your code 

2# Old JavaScript VS New JavaScript:

There are some indications to spot old JS code which are :

The existence of a (type = " ") or ( language = " " ) attribute which are no longer needed in the modern JS.

Snippet :

<script type = " "></script>

Snippet :

<script language = " "> </script>

Snippet :

<script>
// Here write your code
</script> 

3# Loading From External Storage:

If your code is way too long, you need to load the script from an external source, an independent file with the '.js' extension. Doing this has benefits like less page loading time in addition to traffic and bandwidth usage reduction since the browser will do its task and cache the file and start to load it from the local storage instead of an external storage.

4# Embedding External Scripts:

External scripts can be embedded with the usage of snippet :

<script src="X/Y.js"></script>

(X : absolute path; Y :file name). The src attribute value can be a URL of the file we want to embed which can be placed on any other place on the internet as long as we have access to read that file.If we have several JS files we have to use the

<script>

 tag multiple times, one

<script>

tag for each file.

Snippet :

<script src="#"></script>
<script src="#"></script>
<script src="#"></script>

etc ...

5# Ignoring The Code :

If the src attribute is set, any code inside the

<script>

tag will be ignored and not executed. → either use internal or external source at once (cannot be nested).
Snippet :

<script src="script.js">
alert('Hello World'); // will be ignored;
</script>

6# Semicolons :

Statements are commands that performs actions. They are usually separated with a semicolon ( ; ). JS supports semicolon auto insertion which is a risky thing to do (sometimes causes errors). Going with the "ending statements with a semicolon" is always the recommended option.

Snippet :

<script>
alert ('Hello World'); // notice the semicolon at the end of the statement (recommended to always use for beginners )
</script>

7# Comments:

Comments are used to describe what the code does and why. Basically there are 2 types of comments:

1. Online comments : they start by a double forward slash ( // ). Anything written after that is ignored and will not be executed. Besides, online comments can be set on a new line as they can take the rest of the line after a statement.
   Snippet:
   

   <script>
   // something goes here 
   OR
   alert('Hello World'); // something can always go here
   </script>	

    
   
2. Multiline comments : they start by a (/) and ends with a (/) and they are mainly used to disable a block of code for the sake of debugging.
   Snippet :
   

   <script>
   /*
   alert('Hello World');
   alert('5 + 5 + 5');
   */
   </script>

   
   

8# Using The Modern JavaScript:

' use strict ' or " use strict " is inserted at the beginning of a file to ensure that the script will work with the modern JavaScript way. The use of classes and modules does not need the " use strict " and once you are in the strict mode, you cannot go back.

9# Variables :

1. Variables are value containers. In JavaScript, we declare a variable with a "let " keyword following by the variable name;
   snippet :
   

   <script> let name ; </script>

2. Assigning a value to the variable can be made with calling the variable by its name and using the equal sign which is actually used for assigning ( = ) then the value and a semicolon.
   Snippet :
   

   <script> let name ; name = 'Drake'; </script>

3. We can merge the declaration and the assignment in the same statement.
   Snippet :
   

   <script> let name = 'Drake'; </script>

4. To access the variable value just call it by its name.
   Snippet :
   

   script>
   let name = 'Drake";
   alert (Drake) ;
   
   

5. Declaring multiple variable is possible in the same line or it can be done in multi lines.
   Snippet :
   

   <script>
   let name  = 'Drake' , Age = 25 ;
   // or
   let name = 'Drake';
   let age = 25; 
   </script>