JS 101:Introduction to modern JavaScript.
Muriithi Gakuru
Posted on February 14, 2022
JavaScript is the most used programming language. It is used alongside HTML(Hypertext Markup Language) and CSS(Cascading Stylesheet) on the World Wide Web. It is used on the client side to manipulate webpage behavior.
JavaScript is Multi-paradigm. This means that it is event-driven, functional, imperative and incorporates object-oriented programming.
Getting Started.
We're going to print a Hello World statement. JavaScript uses the console on the browser to print statements. You don't need to install JavaScript since it is interpreted by the browser. We just have to write code on a file with a dot js extension as such;
myFile.js
On your browser, navigate to the location of your project. Right-click and select inspect. Click on the console tab to get your console.
We can achieve the same result using an Integrated Development Environment.
We just have to write code on a file with a dot js extension as such;
myFile.js
We get the same print statement when we refresh the browser.
The hello world statement is a bit distorted to show the difference.
Comments
// This is a single line comment
/* This
is
a multi-line
comment
*/
Variables
We assign variables using various keywords such as var
, let
or const
Var - var is used to declare variables. It is flexible in that the data can be reassigned later in the code. Var is functional scoped It is able to run in the older browser versions.
Let - it's used to declare variables much like var. The difference is let can not be redeclared later on. Let has a block scope. Get more information here.
Const - These are constant that are block scoped much like let
declared variables. Values cannot be reassigned but the can be redeclared through variable declaration. However, if a constant is an object or array its properties or items can be updated or removed.
**
Data Types
**
Strings - Js support string assignment. This is used to print statements and store words or variables that are required to be processed as strings.
let name = "Muriithi Gakuru";
The value is enclosed by quotation marks and the end of the statement has to be a semi-colon.
Integers - These are assigned decimal numbers
let b = 210;
Extra large or extra small numbers can be written with scientific (exponential) notation
let a = 123e5; // 12300000
let d = 123e-5; // 0.00123
Floating Point numbers - These are declared much like integers only that these have decimal points.
const temperature = 13.4;
Boolean Values - These are assigned values that show whether a condition or values is true
or false
.
let isAlive = true;
// reassign to false
isAlive = false;
BigInt - Used to represent an manipulate primitive bigint values which are too big to be represented by a number.
const MaxSafeInteger = 9007199254740991n
const alsoHuge = BigInt(9007199254740991)
Arithmetics - JavaScript supports all mathematical arithmethic and logical operations.
Arrays
An array is a special variable, which can hold more than one value. The values are enclosed in square brackets.
const cars = ["volvo", "mercedes", "Rolls Royce"]
// They can contain different data types
let details = ["Muriithi Gakuru", 23, "Wisconsin", 72.4 ]
Syntax for an array is
const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
Objects
JavaScript objects are containers for named values called properties.
These store values that can be accessed using name:value pairs. They are variables enclosed using curly braces.
const car = {
type:"Fiat",
model:"500",
color:"white"
};
// You can access the value by using the key ie. property name `car.key`
console.log(car.type) // this will print Fiat
Conditional Statements
Conditional statements are used to perform different actions based on different conditions.
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
if (condition) {
// executed if the condition is true
}else if(condition){
// executed if the first condition failed
}
else{
// executed if the previous conditions failed
}
Loops
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
for/in - loops through the properties of an object
for (key in object) {
// code block to be executed
}
for/of - loops through the values of an iterable object
for (variable of iterable) {
// code block to be executed
}
while - loops through a block of code while a specified condition is true
while (condition) {
// code block to be executed
}
do/while - also loops through a block of code while a specified condition is true
do {
// code block to be executed
}
while (condition);
More information on the loops is shared here
Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it). It is called using the function name, either to print or to return a value.
function printName(){
name = "Muriithi Gakuru";
console.log("My name is", name);
}
//call the function
printName()
A function may take arguments making calling JS functions more dynamic.
function printName(name){
console.log("My name is", name)
}
// call the function using an argument
printName("Muriithi Gakuru")
This is just an introduction into the vastness of JavaScript. It is a very robust language hence its uses both in the client side and the server side. Keeplearning and Follow for more content. Cheers!!
credits
w3schools
mozilla
Posted on February 14, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024