6 min readApr 19, 2020

Getting-Started-With- JavaScript

In this tutorial you will learn how to continue your journey in front end development/web development using JavaScript.

JavaScript is one of the most popular programming languages on earth and is used to add interactivity to webpages, process data, as well as create various applications (mobile apps, desktop apps, games, and more). It helps to add interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, and animation). This article helps you get started with this exciting language and gives you an idea of what is possible.

JavaScript can be placed in the HTML page’s <body> and <head> sections.

Our first JavaScript code:

<script>
   alert(your code will be here)
</script>

In the example below, i will teach you how to place our script tag within the <body> tag.

Note: The script tag, which is placed in the head section, will be executed before the <body> is rendered. If you want to get elements in the body, it’s a good idea to place your script at the end of the body tag.

JavaScript in the <head> tag

You can place any number of scripts in an HTML document.Typically, the script tag is placed in the head of the HTML document:

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My First Javascript</title><script></script></head><body></body></html>

We have the External JavaScript:

Scripts can also be placed in external files.
External scripts are useful and practical when the same code is used in a number of different web pages.
JavaScript files have the file extension .js.

Below, we’ve created a new text file, and called it script.js (n.b you can use any name for the text file. i.e app.js, main.js etc).

Having Javascript scripts in separate files makes your code much readable and clearer.

JAVASCRIPT COMMENTS

The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code.

The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.

Not all JavaScript statements are executed.
Code after a double slash //, or between /* and */, is treated as a comment.
Comments are ignored, and are not executed.

One of the advantages of JavaScript comments are:

To make code easy to understand It can be used to elaborate the code so that end user can easily understand the code.
To avoid the unnecessary code It can also be used to avoid the code being executed. Sometimes, we add the code to perform some action. But after sometime, there may be need to disable the code. In such case, it is better to use comments.

We have the Single line comment and the multi-line comment:

1. JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the statement.

Let’s see the example of single-line comment .

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My first javascript code</title></head><body><script>var x = 40;var y = 70;var z = x + y;//It adds values of x and y variabledocument.write(z);//prints sum of 40 and 70</script></body></html>

Its output is shown below:

**Our result is 110 without the comment displaying.**

2.JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.

It’s a good idea to make a comment about the logic of large functions to make your code more readable for others.

It is represented by forward slash with asterisk then asterisk with forward slash. For example:

/* Writing of 
code  */

It can be used before, after and middle of a statement.

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My first javascript code</title></head><body><script>/* It is multi line comment.It will not be displayed */document.write("example of javascript multi=line comment");</script></body>
</html>

Basic Concepts of JavaScript(JS)

VARIABLES:

Variables are containers for storing data values. The value of a variable can change throughout the program.It is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (which are also known as identifiers).

The first character must be a letter, dollar( $ ) sign, or an underscore (_). You can’t use a number as the first character.
The rest of the variable name can include any letter, any number, or the underscore. You can’t use any other characters, including spaces, symbols, and punctuation marks.
JavaScript variables are case sensitive, for example a and A are different variables.

These are just few of the rules when declaring a Javascript variables.

In the example below, the value 100 is assigned to the variable x.
Use the var keyword to declare a variable:

var x = 100;

Example of a correct JavaScript Variables:

Example of Incorrect Variables:

Data Types

Data types refers to the types of values with which a program can work. JavaScript variables can hold many data types, such as numbers, strings, arrays, and more.

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript which are:

Primitive data type
Non-primitive data type

JavaScript is a dynamic type language, means you don’t need to specify type of the variable because it is dynamically used by JavaScript engine. It can hold any type of values such as numbers, strings etc.

OPERATORS IN JAVASCRIPT

JavaScript operators are symbols that are used to perform operations on operands.

Arithmetic Operator:They are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators.

Addition of many numbers or variables can be added together as you want.

2. Comparison Operator: This operator compares the two operands,They are also used in logical statements to determine equality or difference between variables or values. They return true or false. The comparison operators are as follows:

3. Bitwise Operator: The bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

4. Logical Operators: These operators are known as JavaScript logical operators.
The table below explains the logical operators (AND, OR, NOT).

4.Assignment Operators:This evaluate the expression and return true or false.

See you in the next episode..Thank YOU