JavaScript Tutorial

What is 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 is also being used widely in game development and Mobile application development.

How do JavaScript engines work?

JavaScript Engines are complicated. But it works on some simple basics:

• The engine reads (“parses:) the script.
• Then it converts or compiles the script to the machine language.
• After that machine code runs.

Here, JavaScript engine applies optimizations at each step of the process. It reads a compiled script and analyzes the data that passes in JavaScript engine. After that, it applies optimizations to the machine code from that acquired knowledge. When this process is completed, scripts run quite fast.

What can in-browser JavaScript do?

JavaScript’s functionality depends on the environment it’s running in. For example, Node.js supports functions which allows JavaScript to read and write arbitrary files, perform network requests, object-oriented, etc. The roles that JavaScript plays in both client-side (front end) and server-side (back end) development of applications can vary wildly.

In-browser JavaScript also allows you to perform webpage manipulation, interaction with the user and with the web server.

Javascript offer advantages like:

1. 1. Show dynamic content based on the user profile.
2. 2. React to user’s operations, like mouse clicks events, key presses or pointer movements.
3. 3. Support features like auto-validated form entries and interactive drop-down menus.
4. 4. Send requests to remote servers, Upload and download files.
5. 5. JavaScript code can also create movement and sound
6. 6. Ask questions to the users, Get and set cookies, show messages, switch browser tabs.
7. 7. Allows the data on to be stored in the local storage.

What can’t in-browser JavaScript do?

JavaScript’s capabilities in the browser are quite limited for the sake of the user’s safety. It helps to prevent any unauthorized webpage from accessing private information.

Examples of such limitations are:

• JavaScript on a webpage may not allow you to copy, execute or read/write arbitrary files on the hard disk. It doesn’t offer any access to Operating system functions.
• Many browsers allow it to work with files, but the access is very limited and only provided if the user is performing a specific action like, dropping a file into a browser window or selecting using <input> tag.
• JavaScript allows you to communicate over the net to the server where the current page came from. Although, it does not allow you to receive data from other sites/domains.

What makes JavaScript unique?

Here, are the three most important features which make JavaScript unique

• It offers full integration with HTML/CSS.
• Simple things are done quickly without any complication or following strict rules.
• Supported by all major browsers and JavaScript is enabled by default.

Alternatives to JavaScript

The syntax of JavaScript not suited for everyone as different project demands different features. However, some modern tool like a Coffee script, Typescript, and Dart allowing developers to code in another language and then auto-convert into the JavaScript code.

Where is JavaScript Today?

ECMAScript is a specification governed by ECMA international aimed at standardizing JavaScript. The latest version is ECMA9 also called JavaScript 9. It is supported by all major browsers like Chrome, Firefox, Internet Explorer, etc. Though each browser has an array of unique commands that are not part of the standards.

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. Also, JavaScript runs on any operating system including Windows, Linux or Mac. Thus, JavaScript overcomes the main disadvantages of VBScript (Now deprecated) which is limited to just IE and Windows.

Tools You Need

To start with, you need a text editor to write your code and a browser to display the web pages you develop. You can use a text editor of your choice including Notepad++, Visual Studio Code, Sublime Text, Atom or any other text editor you are comfortable with. You can use any web browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

• JavaScript Variable: Declare, Assign a Value with Example
• Variables are used to store values (name = “John”) or expressions (sum = x + y).
• Declare Variables in JavaScript
• Before using a variable, you first need to declare it. You have to use the keyword var to declare a variable like this:

• Assign a Value to the Variable
• You can assign a value to the variable either while declaring the variable or after declaring the variable.

• OR

Naming Variables

Though you can name the variables as you like, it is a good programming practice to give descriptive and meaningful names to the variables. Moreover, variable names should start with a letter and they are case sensitive. Hence the variables student name and studentName are different because the letter n in a name is different (n and N).

This code is editable. Click Run to Execute

OUTPUT

First No: = 22

Second No: = 3

22 + 3 = 25

22 – 3 = 19

22 * 3 = 66

22 / 3 = 7.333333333333333

JavaScript Array Methods: Create with Example

What is an Array?

An array is an object that can store a collection of items. Arrays become really useful when you need to store large amounts of data of the same type. Suppose you want to store details of 500 employees. If you are using variables, you will have to create 500 variables whereas you can do the same with a single array. You can access the items in an array by referring to its indexnumber and the index of the first element of an array is zero.

JavaScript Create Array

You can create an array in JavaScript as given below.

Here, you are initializing your array as and when it is created with values “John”, “Ann” and “Kevin”.The index of “John”, “Ann” and “Kevin” is 0, 1 and 2 respectively. If you want to add more elements to the students array, you can do it like this:

You can also create an array using Array constructor like this:

OR

JavaScript Array Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

1. 1. length property –> If you want to know the number of elements in an array, you can use the length property.
2. 2. prototype property –> If you want to add new properties and methods, you can use the prototype property.
3. 3. reverse method –> You can reverse the order of items in an array using a reverse method.
4. 4. sort method –> You can sort the items in an array using sort method.
5. 5. pop method –> You can remove the last item of an array using a pop method.
6. 6. shift method –> You can remove the first item of an array using shift method.
7. 7. push method –> You can add a value as the last item of the array.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

students array

John

Ann

Aaron

Edwin

Elizabeth

The number of items in students array is 5

The SORTED students array

Aaron

Ann

Edwin

Elizabeth

John

The REVERSED students array

John

Elizabeth

Edwin

Ann

Aaron

THE students array after REMOVING the LAST item

John

Elizabeth

Edwin

Ann

THE students array after PUSH

John

Elizabeth

Edwin

Ann

New Stuff

For, While and Do While LOOP in JavaScript (with Example)

How to use Loop?

Loops are useful when you have to execute the same lines of code repeatedly, for a specific number of times or as long as a specific condition is true. Suppose you want to type a ‘Hello’ message 100 times in your webpage. Of course, you will have to copy and paste the same line 100 times. Instead, if you use loops, you can complete this task in just 3 or 4 lines.

Different Types of Loops

There are mainly four types of loops in JavaScript.

1. 1. for loop
2. 2. for/in a loop (explained later)
3. 3. while loop
4. 4. do…while loop

for loop

Syntax:

1. 1. The statement1 is executed first even before executing the looping code. So, this statement is normally used to assign values to variables that will be used inside the loop.
2. 2. The statement2 is the condition to execute the loop.
3. 3. The statement3 is executed every time after the looping code is executed.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

Using for loops

John

Ann

Aaron

Edwin

Elizabeth

while loop

Syntax:

The “while loop” is executed as long as the specified condition is true. Inside the while loop, you should include the statement that will end the loop at some point of time. Otherwise, your loop will never end and your browser may crash.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

Using while loops

Fibonacci series less than 40

0

1

1

2

3

5

8

13

21

34

Using while loops

Fibonacci series less than 40

0

1

1

2

3

5

8

13

21

34

do…while loop

Syntax:

The do…while loop is very similar to while loop. The only difference is that in do…while loop, the block of code gets executed once even before checking the condition.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

Using do…while loops

Even numbers less than 20

2

4

6

8

10

12

14

16

18

JavaScript Conditional Statements: IF, Else, Else IF (Example)

How to use Conditional Statements

Conditional statements are used to decide the flow of execution based on different conditions. If a condition is true, you can perform one action and if the condition is false, you can perform another action.

Different Types of Conditional Statements

There are mainly three types of conditional statements in JavaScript.

1. 1. If statement
2. 2. If…Else statement
3. 3. If…Else If…Else statement

What is Database SQL

If statement

Syntax:

You can use If statement if you want to check only a specific condition.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

You are an adult

You are NOT an adult

If…Else statement

Syntax:

You can use If….Else statement if you have to check two conditions and execute a different set of codes.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

Good Afternoon!!!

If…Else If…Else statement

Syntax:

You can use If….Else If….Else statement if you want to check more than two conditions.

Try this yourself:

This code is editable. Click Run to Execute

OUTPUT

ENTER THE FIRST NUMBER-10

ENTER THE SECOND NUMBER-10

10 IS EQUAL TO 10