Posted by H-AZAD
► What is JavaScript?
HTML lays down an outline of what goes where on the page, CSS is used to style the elements that have been added and JavaScript is a scripting language that adds interactivity to the web page. What good maybe a website if it doesn't interact? JavaScript allows you to update or change content, create animations, add responsive interactions to forms, change or modify styles, take actions on events and far more.
Now we will learn about Javascript Basics.
• How to add JS in an HTML file?
Every HTML file has a “head” section. HTML provides a “<script>” tag that lets you add JS in you HTML page like follows:
<script type="text/javascript">
....
<!—JS code goes here -- >
....
</script>
• What are external JS Scripts?
When there are loads of JS, adding it inside the HTML file may not be a best practice. An external script file with the extension “.js” is created and linked in the HTML file.
Example:
“helloWorld.js”
Once a “js” script file is created it is linked using the “<script>” tag like follows:
<script src=" "></script>
here “src” is the path to the js script file
The HTML file will look like this:
<!DOCTYPE>
<html>
<body>
<script type="text/javascript" src="hello.js"> </script>
</body>
</html>
► Building Blocks of JavaScript
• Variables
In programming, just like in algebra, we use variables to hold values. Variables are containers for storing data (values).
There are 3 ways to declare a JavaScript variable:
- Using
var- Using
let- Using
const
Here we will discuss about the var only
In this example, x, y, and z, are variables, declared with the var keyword:
var x = 5;
var y = 6;
var z = x + y;
From the example above, you can expect:
- x stores the value 5
- y stores the value 6
- z stores the value 11
• Operators
In JavaScript, an operator is a special symbol used to perform operations on operands (values and variables). Here is a list of different operators in Javascript:
- Assignment Operators
- Arithmetic Operators
- Comparison Operators
- Logical Operators
- Bitwise Operators
- String Operators
♦ Assignment Operators
Assignment operators are used to assigning values to variables. For example,
const x = 5;
Here, the = operator is used to assigning value 5 to variable x.
Here's a list of commonly used assignment operators:
| Operator | Name | Example |
|---|---|---|
= |
Assignment operator | a = 7; // 7 |
+= |
Addition assignment | a += 5; // a = a + 5 |
-= |
Subtraction Assignment | a -= 2; // a = a - 2 |
*= |
Multiplication Assignment | a *= 3; // a = a * 3 |
/= |
Division Assignment | a /= 2; // a = a / 2 |
%= |
Remainder Assignment | a %= 2; // a = a % 2 |
**= |
Exponentiation Assignment | a **= 2; // a = a**2 |
Note: The commonly used assignment operator is
=. You will understand other assignment operators such as+=,-=,*=etc. once we learn arithmetic operators.
♦ Arithmetic Operators
Arithmetic operators are used to performing arithmetic calculations. Such as:
const number = 3 + 5; // 8
Here, the + the operator is used to adding two operands.
Here's a list of commonly used arithmetic operators:
| Operator | Name | Example |
|---|---|---|
+ |
Addition | x + y |
- |
Subtraction | x - y |
* |
Multiplication | x * y |
/ |
Division | x / y |
% |
Remainder | x % y |
++ |
Increment (increments by 1) | ++x or x++ |
-- |
Decrement (decrements by 1) | --x or x-- |
** |
Exponentiation (Power) | x ** y |
Arithmetic operation in JavaScript
let x = 5;
let y = 3;
// addition
console.log('x + y = ', x + y); // 8
// subtraction
console.log('x - y = ', x - y); // 2
// multiplication
console.log('x * y = ', x * y); // 15
// division
console.log('x / y = ', x / y); // 1.6666666666666667
// remainder
console.log('x % y = ', x % y); // 2
// increment
console.log('++x = ', ++x); // x is now 6
console.log('x++ = ', x++); // prints 6 and then increased to 7
console.log('x = ', x); // 7
// decrement
console.log('--x = ', --x); // x is now 6
console.log('x-- = ', x--); // prints 6 and then decreased to 5
console.log('x = ', x); // 5
//exponentiation
console.log('x ** y =', x ** y);
♦ Comparison Operators
Comparison operators compare two values and return a boolean value, either true or false. For example,
const a = 3, b = 2;
console.log(a > b); // true
Here, the comparison operator > is used to compare whether a is greater than b.
| Operator | Description | Example |
|---|---|---|
== |
Equal to: returns true if the operands are equal |
x == y |
!= |
Not equal to: returns true if the operands are not equal |
x != y |
=== |
Strict equal to: true if the operands are equal and of the same type |
x === y |
!== |
Strict not equal to: true if the operands are equal but of different type or not equal at all |
x !== y |
> |
Greater than: true if left operand is greater than the right operand |
x > y |
>= |
Greater than or equal to: true if left operand is greater than or equal to the right operand |
x >= y |
< |
Less than: true if the left operand is less than the right operand |
x < y |
<= |
Less than or equal to: true if the left operand is less than or equal to the right operand |
x <= y |
Comparison operators in Javascript
// equal operator
console.log(2 == 2); // true
console.log(2 == '2'); // true
// not equal operator
console.log(3 != 2); // true
console.log('hello' != 'Hello'); // true
// strict equal operator
console.log(2 === 2); // true
console.log(2 === '2'); // false
// strict not equal operator
console.log(2 !== '2'); // true
console.log(2 !== 2); // false
Comparison operators are used in decision-making and loops.
♦ Logical Operators
Logical operators perform logical operations and return a boolean value, either true or false. For example,
const x = 5, y = 3;
(x < 6) && (y < 5); // true
Here, && is the logical operator AND. Since both x < 6 and y < 5 are true, the result is true.
| Operator | Description | Example |
|---|---|---|
&& |
Logical AND: true if both the operands are true, else returns false |
x && y |
|| |
Logical OR: true if either of the operands is true; returns false if both are false |
x || y |
! |
Logical NOT: true if the operand is false and vice-versa. |
!x |
Logical Operators in JavaScript
// logical AND
console.log(true && true); // true
console.log(true && false); // false
// logical OR
console.log(true || false); // true
// logical NOT
console.log(!true); // false
Output
true false true false
Logical operators are used in decision making and loops.
♦ Bitwise Operators
Bitwise operators perform operations on binary representations of numbers.
| Operator | Description |
|---|---|
& |
Bitwise AND |
| |
Bitwise OR |
^ |
Bitwise XOR |
~ |
Bitwise NOT |
<< |
Left shift |
>> |
Sign-propagating right shift |
>>> |
Zero-fill right shift |
Bitwise operators are rarely used in everyday programming.
♦ String Operators
In JavaScript, you can also use the + operator to concatenate (join) two or more strings.
String operators in JavaScript
// concatenation operator
console.log('hello' + 'world');
let a = 'JavaScript';
a += ' tutorial'; // a = a + ' tutorial';
console.log(a);
Output
helloworld JavaScript tutorial
Note: When
+is used with strings, it performs concatenation. However, when+is used with numbers, it performs addition.