The Engineering Projects

Basic Syntax And Rules In JavaScript

Welcome back, guys! I hope you are well and having a great day. In today's tutorial, I will discuss the new topic "Basic Syntax and Rules in JavaScript". Learning grammar for a spoken language is necessary before you start writing it. There are rules and regulations you have to follow to write. Similarly, all programming languages have their grammar/syntax and rules which you have to follow in order to execute.

JavaScript Is Case Sensitive

• JavaScript is case sensitive programing language. Therefore variables, function names, language keywords and any other identifiers must have written with a consistent capitalization of letters.     

Let me show you an example. 

• In this statement "alert" is case sensitive and if I change the first letter of "alert"  "A".

Alert(“I am learning JavaScript”);

This code sample has uppercase "A" and instead of printing the expected "I am learning JavaScript". The error will appear (alert is not defined) and code would not run. So it is important to be careful with syntax.  Here are some rules you should keep in mind. 

• JavaScript keywords such as if, for and alert are always lowercase.
• Built-in objects such as math and date are uppercase or capitalized.
• DOM(Document Object Model)  are usually lowercase but the methods are often a combination of lowercase and uppercase.

Variable, Function & Objects Name

• You can define or name your own variable, function and objects.
• There is no limit in choosing their name you can use uppercase, lowercase and underscore(_) or Numbers.
• The name must begin with letters or underscore and it can't start with a number i.e getAgeBy_Name,  getHeightUnder_2
• There is no limit for you in choosing a variable name with uppercase or lowercase, as I told before JavaScript is case sensitive: age, Age, AGE will be considered as three different variables.
• So make sure to use the same variable when calling it or referring.
• Most of the code in JavaScript is a statement. Like, this is a statement of JavaScript.

alert(“I am learning JavaScript on https://www.theengineeringprojects.com/”); 

• Statement can be used to change the color of webpage, background or position of picture etc
• Always put a semicolon at the end of the statement because each statement in JavaScript ends with a semicolon.
• White space is not sensitive. You can add spaces and line-breaks as much as you want.

Syntax of JavaScript Comment

The syntax of comment is similar to CSS. JavaScripts comments are used to explain or understand the code, and to make it more readable. Suggestions or warnings can help the end-user too.  With the help of comment, you can stop code from execution while running or testing alternative code. There are two types of comment in JavaScript.

1. Single Line Comment
2. Multi-Line Comments

Single Line Comment

Single line comment represents double slash forward (//). You can use it before and after the code.  When you add these two forward slashes (//), all of the code/text to right of them will be ignored. You can see an example in the below picture.

Multi-Line Comment

The multi-line comment is more convenient than single-line comment, you can use it as a single line comment and multi-line too. Multi-line comment represents forward slash with stearic /* and end with a stearic forward slash */.

/* Your comment here */

You can out a segment of code by adding multi-line comment in it. You can look in the image for more detail. These are so helpful in coding.  You can add any comment at any time as you want for your preference. Look in the below image for a more clear example. It is really important for a JavaScript developer to know how JavaScript program executes internally. The code in JavaScript executes from top to bottom. If you want some particular statement to perform in order then you have to write it with a specific order.

Data Types in JavaScript

There are three data types in JavaScript.

• Number: Number represents all the integer, decimal  and float type etc. i.e 4, 4.345
• Boolean: Boolean is going to store if the statement is true or false. True/false
• String: String should be either in a single quote or double-quotes. "I am learning Js" 'Mystring'

Google Chrome Development Tool

• Google developer tool is available in the google chrome browser. Since you all know the google chrome browser already. So move forward.
• Hence, all you have to do is press f12 in your google chrome browser.  It will bring a tab like this as you can see on the right side of the Image.

It will take you to the element bar, you can go to the console bar by clicking on it.

• Element tab shows the HTML of the page.
• You can open the Javascript file further by right-clicking on it and go down the “open link in resources panel”. 
• In the resources panel, you can see the javascript file.

In console Panel, you can type live Javascript in the browser and test it. I will show you with example.

• Open a new tab in your browser and press f12.
• Now go in console tab and type this code:

  alert("I am doing this alert form in console");

  And press enter. Then the dialogue box will appear instantly. Don’t worry about this “undefined message”.

• You can type different numbers in here and get your result, addition, multiplication, subtraction and more. See in the image.

• Now go back in element tab and you can see the console panel in the last. Look in image:

  I hope you have understood the basic syntax and structure of JavaScript. In the next tutorial, I am going to share more detail of JavaScript. If you have any question related to this topic, comment below. I will answer you immediately.  Thank you so much for reading it and keep reading more article and grow your knowledge in coding. If you want to learn any other language comment below. We will make sure to share those languages with you too.

Introduction to JavaScript

Hello folks, I hope you are having a great day. Today, I am going to start this new tutorial series on JavaScript and here's our 1st tutorial titled Introduction to JavaScript. This is a beginner level tutorial series, where we will start from very basics & will slowly move towards complex concepts. If you're not a beginner or looking for secure development training or advanced tutorials, stay tuned, more training is coming. We can use any development Editor for running JavaScript and for this tutorial series, I will use Microsoft Visual Studio Code, which is free to use & you can download it from official site. You don't need to be an expert programmer, in order to learn JavaScript, but you must have some basic knowledge of HTML & CSS. So, let's get started with today's lecture:

What is JavaScript - A Quick Definition

• JavaScript ( initially named as LiveScript, officially named as ECMAScript ) is a client-side scripting language, developed by Brendan Eich in 1995 and is used to create interactive webpages and mostly used in game development.
• Before JavaScript, webpages were dull and has no way to interact with the user, as we had only server side languages ( php, java etc. ) at that time and in order to get any action done, we have to send request to the server.

• With JavaScript, now we can perform any complex task without refreshing the page, JavaScript works on client side that's why there's no need of page refreshing.
• You must have noticed on your Facebook / Twitter profile that they update automatically, that's because of JavaScript.
• As JavaScript is a client side language so it can't communicate directly with the server i.e. database or file system.
• JavaScript is normally confused with Java, but they are two entirely different languages, Java is server side complex language while JavaScript is a simple scripting language.

How to Run JavaScript Code?

• As I mentioned earlier, JavaScript is a client side scripting language, so we don't need any compiler or editor for running JavaScript.
• Instead, JavaScript is directly executed by the web Browsers, similar to HTML & CSS, which are also client side languages.
• When a user makes an HTTP request, then browser reads the webpage and along with HTML,CSS etc. it also finds the JS scripts and executes them.
• All modern browsers support JavaScript and you can enable / disable JavaScript in your browser's settings.
• Moreover, JavaScript works on almost all operating platforms i.e. Windows, Linux, Mac, Ubuntu etc.
• So, in order to run JavaScript, you can use any Programming Environment / Editor i.e. Sublime, Notepad++, Visual Studio Code etc.

Uses of JavaScript

So, now let's have a look at few uses / advantages of Javascript:

1. Developing Mobile Applications & Games.
2. Web Browser-based Games.
3. Add interaction to websites.
4. Back end web Development.
5. Rich interface for Applications and web pages.

How to Include a JavaScript Code in HTML WebPage

• As I have mentioned earlier, we don't need any editor to run or execute JavaScript. Instead, web browsers execute the JS code on their own.
• But question is, How web Browsers are going to recognize that its a JS code ??
• And the answer is, the code placed between <script> </script> tags will be treated as a JavaScript Code.
• There are two ways to include the JavaScript code in an HTML webpage, discussed as follows:

Embedding JavaScript Code directly in HTML Page

• When we add JavaScript directly in <body> tag of our HTML page, it is termed as Embedded JavaScript.
• In our HTML page, we can place JavaScript Code in the <script> </script> tags, as shown in the figure:
• You can see in the figure that I have added a simple JavaScript Code:

<script> alert(“I am learning JavaScript”);    </script>

• To run this code you have to add an extension. Go to the left side of visual studio and click on extension or press Ctrl + Shift + X buttons. 
• Afterwards, Search “Open in browser” and install the first file. Look below in the image for more detail.
• When your exertion is installed, now go back to your HTML file and press Alt + B.  It will run your code. 
• You will see something similar to below image, in your browser.
• This is a simple JavaScript alert message, displaying our content.

Include External JavaScript File in HTML WebPage

• If we add JavaScript Code directly in HTML page then it will make the code quite messy.
• So, it's always a best practice to create a separate file for JavaScript ( extension .js ) and then include this file in your webpage.
• By convention, If your JavaScript code is more than 10 lines, then it's better to add an external JavaScript file.
• It also reduces the code repetition i.e. if you are using your JS code for multiple pages.
• Let's see now, how to add an external JavaScript file:

Steps to Follow:

• Create a new file by pressing Ctrl + N and add  “alert("Introduction to JavaScript");”  content in this file. Save it with the name “Test.js”.
• As you can see on the right side in the figure.
• Now go back to the “index.html” file and add the code as you can see in below figure:
• When you will refresh the web browser then it will automatically reload a JS file through source code, as shown in below figure:

What Is The Best Way To Include JavaScript File in Html

• You can add <script> tag in the <head> section of your HTML file, in the start of the <body> tag and also at the start or end of the body tag.
• But I would advise you to add it at the end of the <body> tag. I will show you why it should be at the bottom of the body tag.
• The HTML page always loads from top to bottom. And if your JS file will be in <head> tag or opening of the <body> tag. Therefore, it’s gonna run JavaScript first before loading any of the content in and it will leave a negative impact on your webpage. Let me show you now how it will drop a negative impression on your website.
• Here is a basic example for you. As you can see in below image that I have added <script> tag at the start of <head> tag and add a new tag of <h1> for your understanding.
• Save these file and press ALT + B to execute this code. You will notice that as you see in the picture underneath that only <script> tag alert comes up first without loading the rest of page.
• But once I click at ok then it has loaded the rest of the page now. As indicated in the image here.

 

• It leaves a bad impact on users because the page is loading step by step but not at once. Now I am gonna add  <script> at the bottom of the <body> tag and as you can see in image down.
• Now save it go again to the browser and reload the page.  Instantly you can see the content and alert form at the same time. This is a perfect way of adding JS.

I am sure you all already know HTML and CSS but you have attempted to learn JavaScript many times but failed for some reason and you drop it. But I am sure now you are going to stick with me since I am going to describe you step by step each code. From the next lesson onward, I am going to tell you more in detail what is the Syntax of JavaScript and where to place JavaScript file. I hope you guys understand this lesson and I will see you in my next tutorial. Till then take care of yourself. If YOU have any question regarding this post feel free to comment below and ask about it.  I will definitely reply to your query as soon as possible.