All you need to know about Java Script

Introduction 

JavaScript is a programming language that allows you to make your website more interactive. This happens in games, when buttons are pressed or when data is entered on forms; with dynamic styling; animation, and so on. This article will help you get started with JavaScript and expand your knowledge of what it can do.

Javascript

JavaScript is a powerful programming language that can be used to make a website more interactive. Brendan Eich came up with the concept (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation).

JavaScript is user-friendly and versatile. You'll be able to make games, animated 2D and 3D graphics, database-driven apps, and much more as you gain experience.

JavaScript is a small but powerful scripting language. On top of the core JavaScript language, developers have written a variety of tools that unlock a vast amount of functionality with minimal effort. You can start from the basics of javascript and go to the advance level with time and experience. Among them are:

• Web browser APIs provide functionality such as dynamically creating HTML and CSS styles, collecting and manipulating a video stream from a user's webcam, and generating 3D graphics and audio samples.

• Third-party APIs allow developers to integrate functionality from other content providers, such as Twitter or Facebook, into their own websites.

• Third-party frameworks and libraries for HTML can be used to speed up the development of websites and applications.

Basic Example

Create a new folder called scripts on your test site. Make a new text document called main.js in the scripts folder and save it.

Put this code on a new line in your index.html file, just before the closing tag:

This serves the same purpose as the CSS link element. It adds JavaScript to the page so that it can interact with the HTML (along with the CSS, and anything else on the page).

Add the following code to main.js:

const myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello World!';

Confirm that the HTML and JavaScript files have been saved. Then, in your browser, load index.html. Something along these lines should be seen:

Language Basics

Variables

Variables are storage containers for values. The let keyword is used to declare a variable, which is then followed by the variable's name:

let myVariable;

The semicolon at the end of a line denotes the end of a statement. It is only required when multiple statements must be separated on a single line. Some people, however, believe that using semicolons at the end of each statement is a good idea.

Case is important in JavaScript. This means that myVariable and my variable are not the same thing.

You can assign a value to a variable after declaring it:

myVariable = 'Tom';

You can also perform both of these operations on the same line:

let myVariable = 'Tom';

You retrieve the value by calling the variable name:

myVariable;

Variables may hold values that have different data types:

String: A string is a collection of characters. Enclose the value in single quote marks to indicate that it is a string.

Number: This is a numerical value. There are no quotes around numbers.

Boolean: This is a binary value. True and false are special keywords that do not require quotation marks.

Array: This is a structure that allows multiple values to be stored in a single reference.

Object: It could be anything. In JavaScript, everything is an object that can be stored in a variable. As you learn, keep this in mind.

Comments

Comments are text snippets that can be placed alongside code. Text marked as comments is ignored by the browser. In JavaScript, you can write comments in the same way you can in CSS:

/*

Everything in between is a comment.

*/

If your comment doesn't have any line breaks, you can put it between two slashes like this:

// This is a comment

Operators

A mathematical symbol that produces a result based on two values is called an operator (or variables). Some of the most basic operators are listed in the table below, along with some examples to try in the JavaScript console.

Addition (+): Combine two strings or add two numbers together.

Subtraction (-), Multiplication (*), Division (/): In basic math, these do exactly what you'd expect.

Assignment (=): assigns a value to a variable.

Strict equality (===): This function compares two values to see if they are equal. It gives you a true/false (Boolean) answer.

Not (!), Does-not-equal (!==): This gives the logically opposite value to what comes before it. It converts a true to a false, and so on. The negation operator, when combined with the Equality operator, determines whether two values are not equal.

Conditionals

Conditionals are code structures that are used to determine whether or not an expression returns true. The if... else statement is a common type of conditional. For instance:

let okayAlert = ‘Okay';

if(okayAlert === 'Okay') {

  alert('This is the alert box!');

} else {

  alert('This is not okay!');

}

The test is the expression inside the if(...) clause. To see if the variables ‘okayAlert’ and ‘okay’ are equal, this code employs the strict equality operator (as described above). The first block of code is executed if this comparison returns true. If the comparison is false, the code after the else statement is executed instead.

Functions

Functions are a method of storing and reusing functionality. A body of code can be defined as a function that executes when the function name is called in your code. This is a good alternative to writing the same code over and over again. You've already seen how functions can be used. For instance:

let myVariable = document.querySelector('h1');

alert('hello!');

The browser includes these functions, document.querySelector and alert.

It's most likely a function if you see something that looks like a variable name but is preceded by parentheses— (). Functions often take arguments: bits of data they need to do their job. If there are multiple arguments, they go inside the parentheses, separated by commas.

The alert() function, for example, displays a pop-up box inside the browser window, but we must pass it a string as an argument to tell it what message to display.

You can create your own functions as well. In the following example, we create a simple function that multiplies two numbers as arguments:

function multiply(num1,num2) {

  let result = num1 * num2;

  return result;

}

Run this in the console and experiment with various arguments. For instance:

multiply(4, 7);

multiply(20, 20);

multiply(0.5, 3);

Events 

Event handlers are required for true website interactivity. These are code structures that monitor browser activity and execute code in response. Handling the click event, which is fired by the browser when you click on something with your mouse, is the most obvious example. Enter the following into your console, then click on the current webpage to demonstrate:

document.querySelector('html').addEventListener('click', function() {

  alert('Click event triggered!');

});

An event handler can be attached to an element in a variety of ways. The element is selected here. Then we call its addEventListener() function, passing in the event name ('click') and a function to run when the event occurs.

Because the functions we just passed to addEventListener() don't have a name, they're called anonymous functions. An arrow function is a type of anonymous function that is written in a different way. Instead of function (), an arrow function uses () =>:

document.querySelector('html').addEventListener('click', () => {

  alert('Click event triggered!');

});