Full Javascript beginner tutorial in one article.

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

Console log image

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

Visual Studio Code We get the same print statement when we refresh the browser.

Hello World on 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

JS 101:Introduction to Modern JavaScript.

Table of contents