JavaScript Multiplication Table Program with HTML CSS

JavaScript Multiplication Table is a multiplication table for any number.

Using JavaScript we program and generate multiplication table of any number.

Java multiplication table generation using for loop is developed as below

  1. Create a text box to get a number from user.
  2. Create a button to submit value
  3. on button click call the multiplicationTable() function.
  4. function will get value of text box
  5. loop to generate multiplication table.
  6. print the data in html page.
Javascript Multiplication table

Generating Multiplication table in Range

Here user will enter range to generate multiplication table if user enters 1 and 10 then multiplication table from 1 to 10 is generated.

Generate Multiplication table in Range

Read More

isPrime() Javascript : Prime number program in Javascript

isPrime() Javascript : Prime number program in Javascript

Prime number Program

isPrime() Javascript represents a prime number checker function in Javascript.

Prime number is a number which is divisible by one and number itself.

like numbers 5,7,11,13,17, etc are prime numbers.

Prime number program in javascript using for loop

Below program uses for loop to check a number is prime or not.

Create a function isPrime() to check the number is prime or not.

  1. get the number
  2. check a number is divisible by 2 to num/2
  3. if divisible then not a prime number
  4. else it is a prime number.

In above program we have create isPrime() Javascript function.

Prime number program in JavaScript

Function is checking whether a number is prime or not.

To get text box value document.getElementById("num").value is used here document represents the html page and method getElementById is accepting a html elements id.

based on it is finding its value.

To show result in paragraph element with id result document.getElementById("result").innerHTML is used.

Learn More:

JavaScript Inclusion in HTML File

How to get multiple checkbox value in javascript and JQuery

In many websites you find multiple check box form to select your interest, or to select multiple options.

That can be created by using HTML check box.

Here to make a input as a text box we need type="checkbox".

name is name given to text box

value property specifies what value a text box holds.

id is used to uniquely identify this text box in HTML Document.

To get this text box value we can use JavaScript.

To get element by Id we can use document.getElementById().

Inside getElementById() we pass the elements id.

in above code we can see that check box id is checkbox1

and to get value we can use value property of getElementById()

how to get checkbox value in javascript with getelementbyid()

var bike = document.getElementById("checkbox1");         
     if(bike.checked){
         ele.push(bike.value);
   }

How to get multiple checkbox value in javascript with getElementById()

Here to select multiple check boxes we selected each check box one by one.

Select Element by id using document.getElementById().

then check checkbox is checked or not.

If checked then push in array.

How to get checkbox value in JQuery

JQuery makes code simple and easy, to select checkbox we can use either name, id or input type checkbox.

We can use any of above ways as per need.

Here we will use checkbox id to select checkbox.

You can download JQuery or include from CDN

We checked check box is selected or not using ($('#checkbox1').is(":checked"))

Here checkbox1 is id of checkbox.

To get the value of check box $('#checkbox1').val();

How to get multiple checkbox value in JQuery

$("input:checkbox[name=cb1]:checked").each(function(){                  
ele.push($(this).val());
});

Here Input check box with name cb1 is checked then for each element get checkbox value and push to array.

get multiple checkbox value using JQuery
Fig: get multiple checkbox value using JQuery

It is very easy to access multiple check box value using JavaScript and JQuery.

You can use these in your web page like in form and to capture user information.

Add active class onclick javascript and jQuery

Add active class to a div on javascript onclick event

Here we are applying a style to a simple div.

Steps to add a css class on click event

  1. Create a div with specific id (here id=”text”)
  2. on click on div call a method makeActive()
  3. Define a function makeActive() in side <script> tag.
  4. Inside makeActive() getElementById
  5. Get Elements classList and add class active.
  6. Use the innerHTML to change to element Text

Add active class onclick javascript to HTML ul List to make menu

Here We have ul list elements to create horizontal menu on click on any element an active class is applied on it and if any one have already active class then remove it.

  1. create a ul menu with li items
  2. make menu display inline using css
  3. inside script tag select all anchor in menu class
  4. on click event find is there any active class in li
  5. if found then remove it
  6. add active class to clicked element.

Reference

Add active class to a div on Jquery onclick event

Here we have taken example of only a single div on click on div it will add an active class on div.

you can download or include Jquery from CDN

To achieve this follow these steps

  1. Define active css class
  2. Include Latest Jquery jquery.min.js file to your html
  3. Create a div with id text.
  4. Write Jquery code inside script tag.
  5. Check for document ready state if ready then
  6. write click function for #text
  7. add a class using jquery addClass()
  8. Change the div content using Jquery text().

Add active class onclick JQuery to HTML ul List to make menu

As we already seen how to add a active class in HTML List.

The same work we will do with JQuery.

JQuery provides easy way to add and remove css class in any element

  1. Create a simple HTML unordered list
  2. Style list to make inline and provide margin
  3. define a active style in css
  4. Include Jquery latest jquery.min.js file
  5. Write Jquery event that will work on document ready
  6. On click on anchor tag inside li first remove all active class from li then add active class in parent li of anchor tag.

Jquery provides addClass() and removeClass() to add and remove any css class.

You can learn how to access parent class id in JQuery

Add Hover effect in HTML menu using JQuery hover()

To add hover effect we used below code.

This will add and remove css class on hover.

Form Handling and Validation in JavaScript

HTML form validation can be done with JS.

Form validation normally used on the server, after the user had fill up all the data and then hit the submit button.

If the data entered by a user was incorrect or was something missing, the server will send all the data back to the user and request that the form need to be resubmitted with correct information.

JS provides a way to validate form’s data on the user’s computer before sending it to the web server. In Form validation, there will be two functions.

  • Basic − the form will checked to make sure all the mandatory fields are filled in. It would require just a loop in the form and check for data.
  • Data Format − the data must be checked for correct form and value. Developer’s code must include with logic to test correctness of data.

Different types of form validation

There are two types of validation:

Client-side validation is validation that occurs before the data has been submitted to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

Client side validation check data and then send to server in avoid  unnecessary server call

Server-side validation is validation which occurs after the data has been submitted.

This is performed by a web server, after input has been sent to the server.

A response is sent back to the user to tell what corrections to make,If the data fails authentication.

EXAMPLE

OUTPUT

Form field (firstname) is empty, so the function alerts a message, and returns false value.

Data Validation

Data validation is the process for ensuring that user input is clean, correct.

Validation tasks are:

  • Is user filled in all required fields?
  • Is user entered a valid date?
  • Is user entered text in a numeric field?

Some Validation HTML Input Attributes:

Disabled – This is specifies that the input element should be disabled

Max – This is specifies the maximum value of an input element

Min – This is specifies the minimum value of an input element

Pattern – This is specifies the value pattern of an input element

Required – This is specifies that the input field requires an element

Type – This is specifies the type of an input element

Form Example

Cookies in JavaScript

What are Cookies?

Normally, Cookies store user information in small text files.on your computer.

A cookie is a piece of data that is stored on your browser to be accessed by your browser. Cookies are also saved as key/value pairs.

Cookies will remember information about the user, when server forgets everything about the user after the connection is shut down.

  • When a user visits a web page, The name of user can be stored in a cookie.
  • Next time the user visits the page, the cookie “remembers” the name.

How It Works ?

Server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. When the visitor go to another page, the browser sends the same cookie to the server.

Cookies are a plain text data record of 5 variable −

  • Expires − The date the cookie will expire
  • Domain − The domain name of thewebsite.
  • Path − The path to the directory or web page that set the cookie.
  • Secure − The cookie may only be retrieved with a secure server.
  • Name value – Cookies are set and retrieved in the form of key-value pairs

Create a Cookie with JavaScript

JS can create, read, and delete cookies with the document.cookie property.

A cookie can be created like this:

document.cookie = “username=Ram Das”;

Example

Read a Cookie with JavaScript

With JS, cookies can be read like this:

var x = document.cookie;

Example

Change a Cookie with JavaScript

With JS, cookies can be changed like this:

document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

Example

In this example the cookie extend the expiry date by 1 Month.

Delete a Cookie with JavaScript

With JS, cookies can be delete like this:

Just set the expires parameter to a passed date:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Example

 Full Example

HTML Document Object Model (DOM) in JavaScript

The DOM is an object-oriented representation of the website pages, which is modified with a scripting language JS.

The DOM stand for Document Object Model.

When a web page is loaded, the browser creates a DOM of the page.

The DOM model is a tree of Objects.

The DOM is a platform that allows programs and scripts to dynamically access and update the content and style of a document.

It is a programming interface for HTML and XML documents. It represents the document as nodes and objects.

With the object model, JS will have all the power to create dynamic HTML:

  • It can be change all the HTML elements in the page
  • It can bechange all the HTML attributes in the page
  • It can bechange all the CSS styles in the page
  • It can be remove existing HTML elements and attributes
  • It can be add new HTML elements and attributes
  • It can be react to all existing HTML events in the page
  • It can be create new HTML events in the page

The DOM standard is separated into three different parts:

  • Core DOM – For all document types
  • XML DOM – For XML documents
  • HTML DOM – For HTML documents

For example, the standard DOM specifies that

the getElementsByTagName method must return a list of all the <P> elements in the document.

varpara = document.getElementsByTagName(“P”);

alert(para[0].nodeName);

How To Access the DOM?

There is nothing special to begin using the DOM.

Different implementations of the DOM will be happened in different browsers.

Every web browser uses some document object model to make web pages accessible via JavaScript.

That DOM programming can be simple as it is displays an alert message by using the alert() function from the window object.

For Example

<body onload=”window.alert(‘Welcome to my home page!’);”>

When creating a script , whether it’s inline in a <script> element , you can immediately using the API for the document or window elements to manipulate the document.

Example

From where the DOM came?

The DOM originated as a specification to allow JS and Java programs to be portable among web browsers.

Dynamic HTML was the immediate ancestor of the DOM, and it was originally thought of largely in terms of browsers.

However, when the DOM Working Group was formed, it was also joined by vendors in other domains, including HTML or XML editors and document repositories.

DOM Tree of Objects

Document –

Root element(html) –

          Element(head) –

                   Element(title)

                   Text(My Title)

          Element(body) –

                   Element(a) –

                             Attribute(href)

                             Text (My Link)

                   Element(h1) –

                             Text(My Header)

Example with DOM Method

OUTPUT

Finding DOM HTML Element by Id

Hello World!

This example demonstrates the getElementsById method.

OUTPUT

This example demonstrates the getElementsById method.

The text from the intro paragraph is Hello World!

Read More

  1. Popup Box in JavaScript
  2. Classes and Objects in JavaScript

This Keyword in JavaScript

This keyword refers to an object, that object which is executing the current bit of JavaScript code.

JavaScript function while executing has a reference to its current execution any function, called this.

JavaScript function while executing has a reference to its current execution any function, called this.

with this keyword,It does not matter how and where function is declared or defined.

Example

function’s this keyword behaves differently in JavaScript compared to other language.

In most of cases, this is determined that by how avalue of function is called.

It cannot be set by assignment on time execution, and it will be different each time the function is called.

ES5 have the bind() method to set the value of a function’s this regardless of how it’s called, and ES2015 introduced arrow functions which don’t provide their own this binding.

Example

This keyword has some different values depending on its usage:

  • Within a method, this keyword refers to the owner object.
  • As Single, this keyword refers to the global object.
  • this keyword within a function refers to the global object.
  • Within a function, within strict mode, this keyword is undefined.
  • Creating an event, this keyword refers to the element that received the event.
  • Methods like call(), and apply() can refer this to any object.

In an object method, this refers to the “owner” of the method.

In the example on the top of this page, this refers to the person object.

The person object is the owner of the fullName method.

Example

OUTPUT

This in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

This in a Function (Default)

The owner of the function is the default binding for this.

Within function, this keyword refers to the Global object.

OUTPUT

Global Scope

If a function uses ‘this’ keyword, is called from the global scope then this will point to the window object

OUTPUT

Example: this keyword inside inner function

OUTPUT

Strict Mode in JavaScript

JAVACRIPT’s strict mode, introduced in ECMAScript 5, is a way to opt in to a restricted variant of JAVACRIPT.

Strict mode is not just a subset: it intentionally has different semantics from all other normal code.

Some browsers does not support strict mode.

To run strict mode code with different behavior from browsers need to test for support for the relevant aspects of strict mode.

Strict mode code and non-strict mode code can be co existing, so scripts can opt into strict mode incrementally

Strict mode makes many changes to normal JavaScript semantics:

  1. Eliminates some JavaScript silent errors by changing them to throw errors.
  2. Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that’s not strict mode.

The “use strict”; Syntax

For declaring strict mode the syntax was designed to be compatible with of JS.

Compiling a numeric literal (10 + 15;) or a string literal (“Ram Das”;) in a JS program has no side effects.

It will simply compiles to a non existing variable and it will dies.

Keywords reserved for future JavaScript versions can NOT be used as variable names in strict mode

These are:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

Simplifying variable uses

Strict mode simplifies how variable names map to particular variable definitions in code.

This is critical to fully optimizing JS code.

JS makes this basic mapping of name to variable definition in the code impossible to perform until runtime.

Strict mode will removes most cases where it will happens, so the compiler can better optimize strict mode code.

First, strict mode prohibits with.

The problem with with is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at run time, Strict mode makes with a syntax error, so there’s no chance for a name in a with to refer to an unknown location at run time.

Example

JavaScript allows strictness of code using “use strict”. Write “use strict” at the top of JavaScript code or in a function to run strict mode.

Example

Output

Defines that JavaScript code should be executed in “strict mode”.

“use strict” is to indicate, the code should be executed within “strict mode”.

Declaring Strict Mode

Strict mode is declared by adding “use strict”; to the beginning of a script or a function.

Example

Declared inside a function

Hoisting in JavaScript

What is Hoisting?

Hoisting is when the JavaScript interpreter moves all variable and function declarations to the top of the current scope.

Hoisting is done during the interpreter’s first run through the code.

The important thing is that the actual declarations are hoisted, and that assignments will be left where they are.

Hoisting is a JS mechanism where variables and functions are declarations are moved to the top before code execution.

All functions and variables that are declared are moved to the top of their scope regardless of whether their scope is global or local.

Of note however, is the fact that the hoisting mechanism only moves the declaration. The assignments are left in place.

Variable declarations are one of the most common aspects of any programming language.

However, JavaScript has a little quirk, known as hoisting, which can turn an innocent declaration into a subtle bug.

The variable and function declarations are put into memory during the compile phase ,  and a hoisting suggests that variable and function declarations are moved to the top of code..

Always Declare Variables At the Top !Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

To avoid bugs, always declare all variables at the beginning of every scope.

Example

Variable Declarations

This is a basic example:

Function Declarations

Hoisting also applies to function declarations.

This is a basic example:

Function Hoisting

Function declarations are also be hoisted. But that functions, what assigned to variables, that’s are not hoisted.

For example, the following code will work due to function declaration hoisting.

The variable declaration for foo is hoisted before the function call.

However, since the assignment to bar is not hoisted, an exception is thrown for trying to call a non-function variable.

Conclusion

Hoisting is an easy to understand, but often overlooked nuance.

To help avoid these bugs, many developers advocate for a single variable declaration statement at the very beginning of every scope.

Hoisting is JS’s default behavior of moving declarations to the top.

JavaScript Declarations are Hoisted

In JS, a variable can be declared after it has been used.

A variable can be used before it has been declared.

Example 1 does not give the same result as Example 2:

Example 1

Output

Example 2