Introduction
JavaScript (JS) is one of the most popular and widely used programming languages in the world right now. It's growing faster than any other programming languages. For a long time, it was only used in browsers to build interactive web pages. However, these days you can build full blown web or mobile apps as well as real-time networking apps like chats and video streaming services, command-line tools, or even games with JS.
JS can run in:
1.Browser (all browsers have a JS Engine)
2.Node (C++ program with Chrome's V8 JS Engine)
ECMA Script = specification (defines standards)
JS = programming language that confirms to this specification.
HTML is all about content. JS is all about behavior of the content.
In order to write JS code in a HTML file, you need a script element.
There are two places where you can add a script element:
1.<head> head section </head>2.<body> body section </body>
The best practice is to put the script element at the end of the body section after all the existing elements, before </body>. This because of 2 reasons:
1.The browser parses a HTML file from top to bottom. If you put the script element in the head section, the browser might get busy parsing and executing that JS code rather than rendering the content of the page. This can create a bad user experience
2.The code between the script elements almost always needs to talk to the elements on the web page. For example, you may want to show or hide some elements. So by adding the code at the end of the body section you can ensure that all these elements are rendered by the browser
Sometimes a 3rd party code has to be placed in the head section. But these are exceptions.
Browser>>Inspect Element>>Console
console.log('Hello world');
Statement: a piece of code that expresses an action to be carried out.
(In this case, we want to log a message on the console)
All statements in JS should be terminated by a semi colon ;
String: a sequence of characters
Always between “double quotes” or ‘single quotes'
//comment (ignored by the JS engine, not executed)
Separation of concern:
JS code can be very long and look messy. So you don't want to write all the script between the script element. Instead you can store the code in a separate file, and then reference it using the source (src) attribute. So instead of <script> blabla </script> ➝ <script src=code.js> </script>
Variables
Keyword var or let (preferred)
let kdexample= 'Hi'; //This is a declaration
kdexample= name/label (case sensitive, can't start with number or contain space/reserved words)
'Hi'= value
This is called camelNotation. Usually used to label variables.
Once a variable is declared it can't be re-declared, only redefined.
E.g., let age=20;
let age= 40 !!Error!! age has already been declared
if you want to change the value you can re-define it e.g age=40 (without let or var)
Constants
Value of variable can change, value of constant can't change. You cannot reassign a constant.
E.g., const age= 19; it will stay 19.
Types
1. Primitives/value types (String Number Boolean (true/false) undefined null)
2. Reference types (Array Object Function)
JS is a dynamic language. Type of variable can change (based on assigned value)
Console>> type of **variable name** //Outputs the type of variable
Variable types:
1) String e.g value of 'lolzzz'
2) Number e.g value of 7
3) Undefined e.g value of lolzzz
4) Boolean e.g value of true
5) Object e.g value of null
***Undefined can be a (type of) value but it's also a variable type***
let name= 'KD;
let age= 30,
Instead of the above notation, we can write this using an object. Makes code look cleaner. The object here can be person. And name & age are properties/keys of this object (person)
Object literal syntax example: let x = { key:value};
let person = {
name : 'KD',
age : 30
};
How to access the properties/keys instead of whole object:
1. Dot notation (Recommended)
E.g., person.name
2. Bracket notation (For special cases)
E.g., person['name']
//Bracket notation useful when you don't know the property name. For example when the property name is determined by user input. **using bracket notation to access property in a dynamic way**
E.g., let selection = 'name';
person[selection] = 'yesKd';
console.log(person.name); --> Output: yesKD
----
Arrays
An array is data structure used to represent a list of items.
E.g., let colors = ['green' , 'yellow'];
console.log(colors); "green" , "yellow"
Every item within the array has an index, starting with 0.
1st item's index is 0, the 4th item's is 3, etc.
To access the items, you can use their indexes between [square brackets]
console.log(colors[1]); "yellow"
Example: add pink as 3rd color
colors[2] = 'pink';
console.log(colors); "green" , "yellow", “Pink"
Technically, an array is an object.
You can access its predefined keys/properties through the dot method.
console.log(colors.length); 3
The length of an array and the type of objects in the array are dynamic.
They can change. If you add an item, the length will change from 3 to 4.
Or you can even change the type of an object (item) within the array.
For example, you can change the 3rd item to a number (instead of string)
colors[2] = 89
console.log(colors); "green" , "yellow", 89
------
Functions
Syntax of functions:
function functioname(parameter) {}
A parameter is a variable, that is only meaningful inside the function.
It's not accessible outside of the function.
//Performing a task (display something on the console)
| function greet(name) { console.log('Hello' + name); } greet('Kawiesh'); greet('Lol'); | HelloKawiesh HelloLol |
'Kawiesh' here is an argument (actual input value) to the greet function,
and name is the parameter of the greet function (placeholder for the argument)
We can reuse the function with a different input (e.g, 'Lol' )
A function can have multiple parameters. Separated with comma.
| greet(name, lastName) { console.log('Hello' + ' ' + name + ' ' + 'lastName'); } greet('Kawiesh'); | HelloKawiesh Undefined |
//Default value of variables in JS is undefined.
//We didn't put a value (argument) for lastName, that's why it's undefined .
//Calculating a value
| function square(number) { return number * number; } let number = square(3); console.log(number); console.log(square(3)); | 9 !!Long way!! 9 Better |
There are 2 function calls here. When the JS code is executed, the square function will be called first (it will receive a value), and then the log function will be called to display the retrieved value (from the first function call) in the console
Operators
Operators in JS are used along variables & constants to create expressions.
With these expressions you can implement logic and algorithms.
The different kinds of operators in JavaScript:
- Arithmetic
- Assignment
- Comparison
- Logical
- Bitwise
Arithmetic operators
These are used for performing calculations.
Arithmethic operators usually take 2 operands and then produce a new value
let x = 8; let y = 3; console.log( x * y ); 24 | x y = operands * = multiplication operator x * y = expression (produces a value)
|
There are 8 types of arithmetic operators in JS:
Operator | Use | Example |
Addition | x + y | 8 + 3 = 11 |
Subtraction | x - y | 8 - 3 = 5 |
Multiplication | x * y | 8 × 3 = 24 |
Division | x / y | 8 ÷ 3 = 2.666... |
Remainder of division | x % y | 8 ÷ 3 = 2 (2×3=6 , 8-6=2 ) |
Exponentiation | x ** y | 8³ = 512 |
Increment | ++ |
|
Decrement | -- |
|
Increment
Increment is indicated by ++
Depending on where this operator is placed, it will behave differently.
let x = 8; let y = 3; console.log( ++x ); 9 | If the ++ is placed before x, the value of x will be incremented by 1 first & then displayed on the console
|
In contrast, if you place ++ after x, x will be displayed on the console first,
and then the value of x will be incremented by 1.
let x = 8; let y = 3; console.log( x++ ); 8 console.log( x++ ); 9 | 8 is displayed on the console first. but at this point x is incremented by 1, so if you do another console.log of x you'll get a value 9
|
Decrement
The decrement operator works in a pretty similar way.
let x = 8; let y = 3; console.log( --x ); 7 | If the -- is placed before x, the value of x will be decremented by 1 first & then displayed on the console
|
let x = 8; let y = 3; console.log( x-- ); 8 console.log( x-- ); 7 | 8 is displayed on the console first. but at this point x is decremented by 1, so if you do another console.log of x you'll get a value 7
|
Assignment operator
Used to assign (=) values to variables/constants.
The = operator can also be used in combination with arithmetic operators.
The arithmetic operator is placed first, followed by the assignment operator.
let x = 5;
console.log ( x += 9 ); 14
console.log ( x -= 9 ); -4
console.log ( x *= 9 ); 45
console.log ( x /= 9 ); 0.555...
console.log ( x %= 9 ); 5
console.log ( x **= 9 ); 1953125
Another example
let x = 7;
x *= 3;
console.log ( x ); 21
Comparison operators
The result of an expression with a comparison operator is a boolean (true or false).
Relational operators
Using <, <=, > and >= signs to compare the value of a variable to something else.
let x = 1;
console.log(x > 1); console.log(x >= 1); console.log(x < 1); console.log(x <= 1);
|
false true false true |
Equality operators
- Strict equality operator (===)
Checks the type and value of the operands on both side.
let x = 1;
console.log(x === 1); console.log(x !== 1); console.log(x !== 5);
|
true false true |
- Loose equality operator (==)
Checks only the value of the operands on both side.
It will automatically convert the type of the right operand, to match the type of the left operand (if the types don’t already match).
console.log(1 == 1); console.log(1 == 2); console.log('1' = 1); console.log(1 = true); console.log(true = 0); console.log(false = 0);
|
true (no conversion needed) false (no conversion needed) console.log('1' = '1'); true console.log(1 = 1); true console.log(true = false); false console.log(false = false); true
|
Strict === ➞ !== or Loose == ➞ !=
|
Strict equality operator is used more often, because it’s more precise and accurate.
