Mindbrews Podcast coming in Soon! Stay Tuned!

Developers & Open Source

Introduction to JavaScript

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript.

JavaScript blocks
Source:JavaScript Beginners: Friendly Intro & Exercises

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible for running JavaScript code. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it is up to the browser to execute it. 

The main advantage of JavaScript is that all modern web browsers support JavaScript. So, you do not have to worry about whether your site visitor uses Internet Explorer, Google Chrome, Firefox or any other browser. JavaScript will be supported. 

Now Lets get started

First step is writing the Javascript

You should place all your JavaScript code within <script> tags (<script> and </script>) if you are keeping your JavaScript code within the HTML document itself. This helps your browser distinguish your JavaScript code from the rest of the code.

Just like we do for CSS, we’ll create a new file for writing JavaScript called ‘script.js’ in your project directory. Now open the index.html file, and just before the closing body tag (</body>), insert this line.

<script type="text/javascript">

That’s it. We have linked our script file in our HTML.

Variables

Variables are friendly names that hold data. They are simply human-friendly (and descriptive) names for pieces of data. Let’s consider an example.

1.let greeting= "Hello World";

Here we’re defining a variable called ‘greeting’ and assigning it the value of ‘Hello world’.

Variables can also be used to store different types of data such as numbers, strings, and other variables.

1.let age = 32;
2.let pi = 3.142;
3.let alphabet = 'a';

Did you notice how we wrote ‘let’ before the actual variable name? That’s one way of declaring a variable in JavaScript.

Also note how each line ends with a semicolon (;). This isn’t strictly needed (except for some specific cases), but it’s best practice to use them, so we recommend you do so.

Comparison Operators

JavaScript operators

*There are less strict variants of these, namely == and !=, which enable you to compare two things that may not be of the same type.

“1” == 1 is true, but “1” === 1 is not true, as “1” is a string, while 1 is a number.

I recommend you stick to strict equal/not equal (=== and !==), and avoid the use of == and !=

Arithmetic Operators

JavaScript can also be used as a calculator.

It supports all the regular functions, called operators, like plus (+), minus (-), multiply (*), divide (/) and so on. You could do something like:

1.alert(2+3);

You could also store the values in their own variables and then the result in another variable.

1.let number1 = 2;
2.let number2 = 3;
3.let sum = number1 + number2;
4.alert(sum);

Functions

Functions are blocks of code to which we assign a name so that we can reuse them.Lets see an example:

function add(number1,number2){
let sum = number1 + number2;
return sum;
}

Now calling a function is simply writing its name and using parentheses to pass in the ‘arguments’ (actual parameters).

1.let num1 = 2;
2.let num2 = 3;
3.let sum = add(num1,num2);
4.alert(sum);

Objects

Objects are simply containers for key-value pairs, similar to what you’d find in a dictionary. In a dictionary, a key is a word and a value is the meaning of the word. In a JavaScript object, a key is a name, and a value can be anything, even other objects.

Let’s look at an example:

let fullName ={
     firstName:'Rohan',
     lastName:'Sharma'
    }

In our example object, which is called ‘fullName’, firstName and lastName are keys, and ‘Rohan’ and ‘Sharma’ are the values.

We can access the firstName by using the dot (.) notation. The following will show the alert ‘Rohan’.

1.alert(fullName.firstName);

Flow Control

Generally, a program in JavaScript will execute line by line. But there are instances when we wish to execute a statement based on some condition, or execute a group of statements multiple times. Such change in the order of execution of code is called flow control.

Lets take an example:

If age is less than 18, display “You’re not an adult”, else, display “You’re an adult”

if(age<18){
     alert("you are not an adult");
   }else{
    alert("you're an adult");
   }

So that’s it. I think i have covered some of the basics of of JavaScript.

Remember: learning a new programming language anything takes time and practice. It won’t be easy, but it’ll empower you to create awesome experiences online. Be it for yourself, your friends, or a company.

Slowly but surely, take time to go through some hand-picked resources and try to practice it on your own which will make you much confident.

Author

  • Rithik Manchanda

    I solve problems in creative ways. At Ajay Kumar Garg, where I am completing my 3rd year in the College of Engineering, I have learned the importance of applying classical strategies to modern-day projects. Concentrations in IT engineering provide a broad knowledge of engineering concepts. Passion for innovation and high-quality production.

Related posts
Developers & Open Source

Manage your React State better with Redux

Developers & Open Source

Superpower your Static HTML with Static Jinja!

Developers & Open Source

Deno: The Replacement for Node.js ?

FinanceGlobalLatestLifestyleTechnology

5 benefits of having a website for startups