Quote : “If the internet is the king, JavaScript is its queen”
What is JavaScript (JS)?
Java Script (JS) is a programming language that enables you to update content on a webpage dynamically. Where HTML and CSS are languages that give structure and style to web pages, Java Script gives web pages interactive elements that engage a user. Common examples of Java Script that you might use every day include the google search Engine or refreshing your Facebook feed.
Why JavaScript ?
As fuel is to a vehicle, so is Java Script to a webpage – because it makes the webpage lively and keep them running.
JS enables you to make static and non-interactive web pages more interactive and engaging. Using JS, you can achieve things like:
- Loading new content or data onto the page without reloading.
- Validating input from Web forms before submitting the form.
- Playing audio and video.
- Rollover effects and dropdown menus
- Autocomplete feature.
- Displaying animations and many more.
Introduction to Programming in JS
Now let’s dive into programming aspects of JS. One thing to note is that you don’t need any special software or compiler to run your JS code. All you need is a browser. To run Java Script, you can simply open any browser and press Cmd+Option+I (for MacOs) or Ctrl+Shift+I (for Windows OS). This will open up the console, where you can test the JS code.
In this section, I will try to explain few fundamental concepts in JavaScript. So, let’s get started,
First and foremost, let’s write Hello World Program using JS. And trust me, it can be done using just one line of code unlike other programming languages like C and Java.
console.log(“Hello World!!”);
The console.log() is an in-built function which outputs a message to the web console.
Variables
Variables are containers that store values. And those values can be one of the following data types –
- String: Strings are blocks of text enclose within single or double quotes.
- Number: This is just a number with no quotes around them.
- Boolean: This is a True/False value. The words true and false are special keywords that don’t need quote marks.
The syntax to declare a variable goes like this:
keyword variable_name = value;
Keyword to declare a variable can either be “var”, “let” or “const”. For simplicity sake, let’s just use “var” here. And values can be any of the data types mentioned above. And a semicolon at the end of the statement indicates the end of a statement. One thing to note is variables can be named anything, but there are some restrictions. Refer this article for variable naming convention.
Let’s take a look at an example:
var myFavNumber = 10;
var myName = ‘Bob’;
var myValue = true;
In the above examples, we can see that a value of 10 which is a number is stored in myFavNumber variable, a piece of text is stored in variable myName and lastly Boolean value true is stored in myValue variable.
You can use console.log(variableName) to print the value stored in the above variables.
Operators
Arithmetic operators like +, – , *, /, % and = can be used to perform computations in JS and logical operators like >, <, >=, <=, == and != to compare two values.
Conditional Statements
Conditional statements are used to perform different actions based on different conditions. And all this can be done using the if-else statement.
In JavaScript we have the following conditional statements:
- Use if to specify a block of code to be executed, if a specified condition is true
- Use else if to specify a new condition to test, if the first condition is false
- Use else to specify a block of code to be executed, if all the preceding conditions are false
And the syntax for this goes like:
if (expression1 == true) {
//execute this
}else if (expression2 == true) {
//execute this
}else{
//execute this
}
Looping Statements:
Loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes the code compact. And the syntax is
for (initialization; condition; increment) {
//code to be executed
}
Let’s run a simple for loop in JS.
for (var i=1; i<=5; i++) {
console.log(i)
}
Functions:
A function is a set of statements that take inputs, perform a specific computation, and return a result. In order to create a function in JS, you can use the keyword function, followed by the function’s name and parameters enclosed in parenthesis. The part of function inside the curly braces { } is the body of the function.
function functionName(Parameter 1, Parameter 2,….Parameter N){
// function body
}
Let’s run a simple function to add two numbers:
function addNumbers(num1, num2){
var result = num1 + num2;
return result;
}
That’s the end of this section, as you now know some basic JS concepts, practice a lot and get started with some advanced concepts.
Role of JS
Let’s see how JS plays an important role in our day-to-day life.
If there was no JS, then
- You wouldn’t have commented on your best friend’s Instagram or Facebook post.
- And more importantly, your friends wouldn’t have posted their fav pics on social media.
- And if you were applying for a job online then your job application form wouldn’t have gotten submitted to the employer at all.
- YouTube’s videos wouldn’t have loaded. There would also be no tik-tok videos and reels for your entertainment.
And this list goes on if I keep adding-on why JS is important to both, developers and users.
Now that you understood what JS is, why is it useful and the role it plays in your life, you can now go through advanced concepts like DOM where you can interact with the webpages directly. Once you become familiar with DOM you can pick some frameworks like Angular and React and start building powerful websites.
Fun Fact : This website that I made, which you are currently viewing, leverages JavaScript on the backend 😉
