javascript Archives

Javascript get ASCII value of char charCodeAt() & codePointAt()

ASCII is a Character Encoding Scheme. The full form of ASCII is American Standard Code for Information Interchange.

ASCII Encode any character in 7 bits. it was developed for telegraph code.

ASCII is used to represent 128 English characters in Numbers.

ASCII value for A is 65, B is 66, and similar.

ASCII value for a is 97, b is 98 etc

Each character has a unique ASCII value we will use the following two methods to get ASCII value.

charCodeAt()
codePointAt()

Both functions return the Unicode value of the character at a specified index value.

In the title, we say how to get ASCII value but why we are finding Unicode value

In Unicode first 128 characters are ASCII characters. so accessing the first 128 characters will return ASCII Value.

Javascript get ASCII value using charCodeAt()

Function charCodeAt() returns a number between 0 to 65535 that represents the UTF-16 code of character at specified index.

<h2>Get ASCII Value of Character</h2>
<p id="msg"></p>
<script>
var i="a";
var b=i.charCodeAt(0);
document.getElementById("msg").innerHTML=b;

</script>

<h2>Get ASCII Value of Character</h2>

var i="a";

var b=i.charCodeAt(0);

document.getElementById("msg").innerHTML=b;

</script>

Try It

Javascript get ASCII value using codePointAt()

Function codePointAt() returns the unicode value of character at specified position.

<!DOCTYPE html>
<html>
    <head>
        <title>Get ASCII Value of Character</title>
    </head>
    <body>
        <h2>Get ASCII Value of Character</h2>
        <p id="msg"></p>
        <script>
            var i="A";
            var b=i.codePointAt(0);
            document.getElementById("msg").innerHTML='Ascii Value of character '+i +' = '+b;
            
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Get ASCII Value of Character</title>

</head>

<body>

<h2>Get ASCII Value of Character</h2>

var i="A";

var b=i.codePointAt(0);

document.getElementById("msg").innerHTML='Ascii Value of character '+i +' = '+b;

</script>

</body>

</html>

Try It

Get ASCII value of char javascript

        <h2>Get ASCII Value of Character</h2>
        Enter Character: <input type="text" id="char">
        <button onclick="getChar()">Get ASCII</button>
        <p id="msg"></p>
        <script>
            function getChar(){
                var i=document.getElementById("char").value;
                var b=i.codePointAt(0);
                document.getElementById("msg").innerHTML='ASCII Value of character '+i +' = '+b;
                }
        </script>

<h2>Get ASCII Value of Character</h2>

Enter Character: <input type="text" id="char">

<button onclick="getChar()">Get ASCII</button>

function getChar(){

var i=document.getElementById("char").value;

var b=i.codePointAt(0);

document.getElementById("msg").innerHTML='ASCII Value of character '+i +' = '+b;

}

</script>

Try It

Generating ASCII Values Table in JavaScript

String.fromCharCode() is used here to get character from ASCII value.

var table;
table='
<table id="mtable">
    ';
    table+='
    <tr>
        <th>ASCII Code</th>
        <th>Character</th>
    </tr>
    ';
    for(i=1;i<=127;i++){
    table+='
    <tr>
        <td>'+i+'</td>
        <td>'+String.fromCharCode(i)+'</td>
    </tr>
    ';
    }
    table+='
</table>
';
document.getElementById("result").innerHTML = table;

var table;

table='

table+='

<tr>

<th>ASCII Code</th>

<th>Character</th>

</tr>

for(i=1;i<=127;i++){

table+='

<tr>

<td>'+String.fromCharCode(i)+'</td>

</tr>

}

table+='

</table>

document.getElementById("result").innerHTML = table;

Not all the character are printable to it is showing box.

Try It

ASCII value of alphabets

ASCII value of Capital Letter start from 65 and end at 90. Small case letter start from 97 and end at 122.

To print Capital Letters start loop from 65 and end it to 90 ans for small latter start with position 97 and at 122.

ASCII value of Capital Letter

var table;
table='
<table id="mtable">
    ';
    table+='
    <tr>
        <th>ASCII Code</th>
        <th>Character</th>
    </tr>
    ';
    for(i=65;i<=90;i++){
    table+='
    <tr>
        <td>'+i+'</td>
        <td>'+String.fromCharCode(i)+'</td>
    </tr>
    ';
    }
    table+='
</table>
';
document.getElementById("result").innerHTML = table;

var table;

table='

table+='

<tr>

<th>ASCII Code</th>

<th>Character</th>

</tr>

for(i=65;i<=90;i++){

table+='

<tr>

<td>'+String.fromCharCode(i)+'</td>

</tr>

}

table+='

</table>

document.getElementById("result").innerHTML = table;

Try It

ASCII value of Small Letter

var table;
table='
<table id="mtable">
    ';
    table+='
    <tr>
        <th>ASCII Code</th>
        <th>Character</th>
    </tr>
    ';
    for(i=97;i<=122;i++){
    table+='
    <tr>
        <td>'+i+'</td>
        <td>'+String.fromCharCode(i)+'</td>
    </tr>
    ';
    }
    table+='
</table>
';
document.getElementById("result").innerHTML = table;

var table;

table='

table+='

<tr>

<th>ASCII Code</th>

<th>Character</th>

</tr>

for(i=97;i<=122;i++){

table+='

<tr>

<td>'+String.fromCharCode(i)+'</td>

</tr>

}

table+='

</table>

document.getElementById("result").innerHTML = table;

Try It

Here we shownd how Javascript get ASCII value of char can work to get ASCII Values.

Q How to convert javascript char to ASCII

Here we discussed two methods

charCodeAt() and codePointAt() methods.

Q How to convert javascript ASCII to char

String.fromCharCode() is used to convert ASCII code to character conversion.

Change background color on button click in javascript

Change background color on button click in javascript is a good example of DOM manipulation.

You can change the background color of any element like div, paragraph or can change the color of the HTML body.

To change the background color we use style property.

Let us see one by one

Changing the background color of the HTML element

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            #one{
            width:90%;
            height:50px;
            border: solid 1px;
            margin-top:10px;
            }
        </style>
        <script>
            function changeColor(){
             var div1=document.getElementById("one");
             div1.style.background="red";
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="changeColor()" value="Change">
        <div id="one"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

#one{

width:90%;

height:50px;

border: solid 1px;

margin-top:10px;

}

</style>

function changeColor(){

var div1=document.getElementById("one");

div1.style.background="red";

}

</script>

</head>

<body>

</body>

</html>

Changing the background color of the body

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            function changeBodyColor(){
             document.body.style.background="red";
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="changeBodyColor()" value="Change">
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

function changeBodyColor(){

document.body.style.background="red";

}

</script>

</head>

<body>

</body>

</html>

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

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            #mtable {
              font-family: Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 30%;
            }

            #mtable td, #mtable th {
              border: 1px solid #ddd;
              padding: 8px;
              }
            #mtable tr:nth-child(even){background-color: #FFF8DC;}

            #mtable tr:hover {background-color: #F5DEB3;}
        </style>
    </head>
    <body>
        <h2>Generate Table</h2>
        <label>Enter Number</label>
        <input type="number" id="number" />
        <input type="button" value="generate" onclick="multiplicationTable()" />
        <br /><br /><br />
        <div id="result"></div>

        <script>

            function multiplicationTable() {
            var table;
            table='<table id="mtable">';

            var num=document.getElementById("number").value;
            if(num==null || num=="")
            num=5;
               for(i=1;i<=10;i++){
                  table+='<tr><td>'+num+'*'+i+'='+num*i+'</td></tr>';
               }

            table+='</table>';
            document.getElementById("result").innerHTML = table;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#mtable {

font-family: Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 30%;

}

#mtable td, #mtable th {

border: 1px solid #ddd;

padding: 8px;

}

#mtable tr:nth-child(even){background-color: #FFF8DC;}

#mtable tr:hover {background-color: #F5DEB3;}

</style>

</head>

<body>

<h2>Generate Table</h2>

<label>Enter Number</label>

function multiplicationTable() {

var table;

table='<table id="mtable">';

var num=document.getElementById("number").value;

if(num==null || num=="")

num=5;

for(i=1;i<=10;i++){

table+='<tr><td>'+num+'*'+i+'='+num*i+'</td></tr>';

}

table+='</table>';

document.getElementById("result").innerHTML = table;

}

</script>

</body>

</html>

Try It

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.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #mtable {
              font-family: Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 30%;
            }

            #mtable td, #mtable th {
              border: 1px solid #ddd;
              padding: 8px;
              }
            #mtable tr:nth-child(even){background-color: #FFF8DC;}

            #mtable tr:hover {background-color: #F5DEB3;}
        </style>
    </head>
    <body>
        <h2>Generate Tables</h2>
        <label>Number1</label>
        <input type="number" id="number1" />
        <label>Number2</label>
        <input type="number" id="number2" />
        <input type="button" value="generate" onclick="multiplicationTable()" />
        <br /><br /><br />
        <div id="result"></div>

        <script>
            function multiplicationTable() {
            var table;
            table='<table id="mtable">';

            var num1=document.getElementById("number1").value;
            var num2=document.getElementById("number2").value;
            if(num1==null || num1=="")
            num1=1;
            if(num2==null || num2=="")
            num2=10;
            for(i=1;i<=10;i++){
             table+='<tr>';
              for(num=num1;num<=num2;num++){
                  table+='<td>'+num*i+'</td>';
               }
               table+='</tr>';
              }

            table+='</table>';
            document.getElementById("result").innerHTML = table;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#mtable {

font-family: Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 30%;

}

#mtable td, #mtable th {

border: 1px solid #ddd;

padding: 8px;

}

#mtable tr:nth-child(even){background-color: #FFF8DC;}

#mtable tr:hover {background-color: #F5DEB3;}

</style>

</head>

<body>

<h2>Generate Tables</h2>

<label>Number1</label>

<label>Number2</label>

function multiplicationTable() {

var table;

table='<table id="mtable">';

var num1=document.getElementById("number1").value;

var num2=document.getElementById("number2").value;

if(num1==null || num1=="")

num1=1;

if(num2==null || num2=="")

num2=10;

for(i=1;i<=10;i++){

table+='<tr>';

for(num=num1;num<=num2;num++){

table+='<td>'+num*i+'</td>';

}

table+='</tr>';

}

table+='</table>';

document.getElementById("result").innerHTML = table;

}

</script>

</body>

</html>

Try It

isPrime() Javascript : Prime number program in Javascript

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.

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

<!DOCTYPE html>
    <html>
    <head>
    <title>Prime Number Checker</title>
    <script >
    function isPrime() {
        var num = document.getElementById("num").value;
        var count = 0;
        for (i = 2; i <= num / 2; i++) {
            check = num % i;
            if (check == 0) {
                count++;
                break;
            }
        }
        if (count > 0) {
            document.getElementById("result").innerHTML = num + " not a prime number";
        } else {
            document.getElementById("result").innerHTML = num + " is a Prime number";
        }
    }
    </script>

    </head>
    <body>

    <h2> Prime Number Checker </h2>
    <p> Enter a number to check is it prime or not </p>
    <label> Enter a Number </label> 
    <input type = "number" id = "num" />
    <input type = "button" value = "Check Prime" onclick = "isPrime()" />
    <br/>
    <p id = "result"></p>
    </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Prime Number Checker</title>

function isPrime() {

var num = document.getElementById("num").value;

var count = 0;

for (i = 2; i <= num / 2; i++) {

check = num % i;

if (check == 0) {

count++;

break;

}

if (count > 0) {

document.getElementById("result").innerHTML = num + " not a prime number";

} else {

document.getElementById("result").innerHTML = num + " is a Prime number";

}

</script>

</head>

<body>

<h2> Prime Number Checker </h2>

<p> Enter a number to check is it prime or not </p>

<label> Enter a Number </label>

<br/>

</body>

</html>

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

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.

Try It

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.

<input type="checkbox" name="Hobby" value="Painting" id="cb1">

1	<input type="checkbox" name="Hobby" value="Painting" id="cb1">

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.

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

1	Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

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); }

<!DOCTYPE html>
<html>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">
        <button onclick="getValue()">Get Value</button>
        <script>
            function getValue() {
              var x = document.getElementById("checkbox1").value;
              alert("value is "+x);
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

<button onclick="getValue()">Get Value</button>

function getValue() {

var x = document.getElementById("checkbox1").value;

alert("value is "+x);

}

</script>

</body>

</html>

Try It

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.

<!DOCTYPE html>
<html>
    <body>
        <label>Check Which you have</label><br/>
        <input type="checkbox" id="checkbox1" name="bike" value="Bike"> Bike <br/>
        <input type="checkbox" id="checkbox2" name="car" value="Car"> Car   <br/>
        <input type="checkbox" id="checkbox3" name="home" value="Home"> Home <br/>
        <button onclick="getValue()">Get Value</button>
        <p id="p1"></p>
        <script>
            function getValue() {
             var ele=[]
              var bike = document.getElementById("checkbox1")
              if(bike.checked){
                    ele.push(bike.value);
             }
             var car = document.getElementById("checkbox2")
              if(car.checked){
                    ele.push(car.value);
             }
             var home = document.getElementById("checkbox3")
              if(home.checked){
                    ele.push(home.value);
             }
               if(ele.length>0){
                document.getElementById("p1").innerHTML = ele;
               }
               else{
               document.getElementById("p1").innerHTML = "You Dont have any thing";
               }
             }
             
             
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

<label>Check Which you have</label><br/>

<button onclick="getValue()">Get Value</button>

function getValue() {

var ele=[]

var bike = document.getElementById("checkbox1")

if(bike.checked){

ele.push(bike.value);

}

var car = document.getElementById("checkbox2")

if(car.checked){

ele.push(car.value);

}

var home = document.getElementById("checkbox3")

if(home.checked){

ele.push(home.value);

}

if(ele.length>0){

document.getElementById("p1").innerHTML = ele;

}

else{

document.getElementById("p1").innerHTML = "You Dont have any thing";

}

</script>

</body>

</html>

Try It

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();

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                if ($('#checkbox1').is(":checked"))
                 {
                      var cbVal= $('#checkbox1').val();
                      alert(cbVal);
                 }
                 else{
                      alert("checkbox is not checked");
                 }
                 });
            });
        </script>
    </head>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">
        <button id="btn">Get Value</button>
        
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

if ($('#checkbox1').is(":checked"))

{

var cbVal= $('#checkbox1').val();

alert(cbVal);

}

else{

alert("checkbox is not checked");

}

});

</script>

</head>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">

<button id="btn">Get Value</button>

</body>

</html>

Try It

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.

Fig: get multiple checkbox value using JQuery

 <!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                   var ele=[];
             $("input:checkbox[name=cb1]:checked").each(function(){
                  ele.push($(this).val());
                  console.log("btn clicked");
               });
             alert("selected "+ele);
             });
            });
        </script>
    </head>
    <body>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>
        <button id="btn">Get Value</button>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

var ele=[];

$("input:checkbox[name=cb1]:checked").each(function(){

ele.push($(this).val());

console.log("btn clicked");

});

alert("selected "+ele);

});

</script>

</head>

<body>

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

<button id="btn">Get Value</button>

</body>

</html>

Try It

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text" onclick="makeActive()">
            Click to make Active
        </div>
        <script>
            function makeActive() {
               var element = document.getElementById("text");
               element.classList.add("active");
               element.innerHTML="This is Active";
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

function makeActive() {

var element = document.getElementById("text");

element.classList.add("active");

element.innerHTML="This is Active";

}

</script>

</body>

</html>

Try It

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.

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
        <script>
            var a = document.querySelectorAll(".menu a");
            for (var i = 0, length = a.length; i < length; i++) {
              a[i].onclick = function() {
                var b = document.querySelector(".menu li.active");
                if (b) b.classList.remove("active");
                this.parentNode.classList.add('active');
              };
            }
             
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

<li><a href="#">Contact Us</a>

</li>

</li>

</ul>

var a = document.querySelectorAll(".menu a");

for (var i = 0, length = a.length; i < length; i++) {

a[i].onclick = function() {

var b = document.querySelector(".menu li.active");

if (b) b.classList.remove("active");

this.parentNode.classList.add('active');

};

}

</script>

</body>

</html>

Try It

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text">
            Click to make Active
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("#text").click(function(){
                $(this).addClass("active");
                $(this).text("Active Class");
              });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

$(document).ready(function(){

$("#text").click(function(){

$(this).addClass("active");

$(this).text("Active Class");

});

</script>

</body>

</html>

Try It

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("a").click(function(){
              $(".menu li").removeClass("active");
                $(this).parent("li").addClass("active");
                
              });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

<li><a href="#">Contact Us</a>

</li>

</li>

</ul>

$(document).ready(function(){

$("a").click(function(){

$(".menu li").removeClass("active");

$(this).parent("li").addClass("active");

});

</script>

</body>

</html>

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()

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
            .hover {
            background-color: #89de6f;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("a").click(function(){
              $(".menu li").removeClass("active");
                $(this).parent("li").addClass("active");
                
              });
              $( "a" ).hover(function() {
                  $(this).parent("li").addClass("hover");
              }, function() {
                  $(".menu li").removeClass("hover");
               });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

.hover {

background-color: #89de6f;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

<li><a href="#">Contact Us</a>

</li>

</li>

</ul>

$(document).ready(function(){

$("a").click(function(){

$(".menu li").removeClass("active");

$(this).parent("li").addClass("active");

});

$( "a" ).hover(function() {

$(this).parent("li").addClass("hover");

}, function() {

$(".menu li").removeClass("hover");

});

</script>

</body>

</html>

To add hover effect we used below code.

This will add and remove css class on hover.

$( "a" ).hover(function() {
                  $(this).parent("li").addClass("hover");
              }, function() {
                  $(".menu li").removeClass("hover");
               });

$( "a" ).hover(function() {

$(this).parent("li").addClass("hover");

}, function() {

$(".menu li").removeClass("hover");

});

JavaScript Overlays with Examples

There are different kinds of JavaScript overlays for modal dialogs for prompting,

overlays for info or warning boxes, tabbed overlays, alerting users overlays for displaying complex data.

The overlay can implement on HTML like images, links, forms, tables, any type of div and any can be styled with CSS, like rounded borders, shadows or gradients etc.

Core behaviors are configurable such as positioning, animation durations and closing the overlay.

Overlay offers a good container for other tools. Think of scrollables, tabs or accordions inside the Overlay.

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         #overlay {
         position: fixed;
         display: none;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0,0,0,0.5);
         z-index: 2;
         cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="overlay" onclick="off()"></div>
      <div>
         <button onclick="on()">On the overlay effect</button>
      </div>
      <script>
         function on() {
         document.getElementById("overlay").style.display = "block";
         }
         
         function off() {
         document.getElementById("overlay").style.display = "none";
         }
      </script>
   </body>
</html>

<html>

<head>

<style>

#overlay {

position: fixed;

display: none;

width: 100%;

height: 100%;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0,0,0,0.5);

z-index: 2;

cursor: pointer;

}

</style>

</head>

<body>

<div>

<button onclick="on()">On the overlay effect</button>

</div>

function on() {

document.getElementById("overlay").style.display = "block";

}

function off() {

document.getElementById("overlay").style.display = "none";

}

</script>

</body>

</html>

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

<html>

<head>
    <script>
        functionmyForm() {
            varjsx = document.forms["myjsForm"]["firstname"].value;
            if (jsx == "") {
                alert("Please fill the Name");
                return false;
            }
        }
    </script>
</head>

<body>

    <form name="myjsForm" action="" onsubmit="return myForm()" method="post">
        Name:
        <input type="text" name="firstname">
        <input type="submit" value="hit">
    </form>
</body>

</html>

<html>

<head>

functionmyForm() {

varjsx = document.forms["myjsForm"]["firstname"].value;

if (jsx == "") {

alert("Please fill the Name");

return false;

}

</script>

</head>

<body>

Name:

</form>

</body>

</html>

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

<html>

<head>
    <script>
        functionmyJs() {
            var name = document.forms["RegForm"]["Name"];
            var address = document.forms["RegForm"]["Address"];
            var email = document.forms["RegForm"]["EMail"];
            var phone = document.forms["RegForm"]["Telephone"];
            var password = document.forms["RegForm"]["Password"];

            if (name.value == "") {
                window.alert("Please enter your name.");
                name.focus();
                return false;
            }

            if (address.value == "") {
                window.alert("Please enter your address.");
                name.focus();
                return false;
            }

            if (email.value == "") {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf("@", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf(".", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (phone.value == "") {
                window.alert("Please enter your telephone number.");
                phone.focus();
                return false;
            }

            if (password.value == "") {
                window.alert("Please enter your password");
                password.focus();
                returnflase;
            }
            return true;
        }
    </script>

</head>

<body>
    <form name="RegForm" action="" onsubmit="return myJs()" method="post">
        <p>Name:
            <input type="text" name="Name">
        </p>
        <br>
        <p> Address:
            <input type="text" name="Address">
        </p>
        <br>
        <p>E-mail Address:
            <input type="text" name="EMail">
        </p>
        <br>
        <p>Password:
            <input type="text" name="Password">
        </p>
        <br>
        <p>Telephone:
            <input type="text" name="Telephone">
        </p>
        <br>
        <p>
            <input type="submit" value="send" name="Submit">
        </p>
    </form>
</body>

</html>

<html>

<head>

functionmyJs() {

var name = document.forms["RegForm"]["Name"];

var address = document.forms["RegForm"]["Address"];

var email = document.forms["RegForm"]["EMail"];

var phone = document.forms["RegForm"]["Telephone"];

var password = document.forms["RegForm"]["Password"];

if (name.value == "") {

window.alert("Please enter your name.");

name.focus();

return false;

}

if (address.value == "") {

window.alert("Please enter your address.");

name.focus();

return false;

}

if (email.value == "") {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf("@", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf(".", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (phone.value == "") {

window.alert("Please enter your telephone number.");

phone.focus();

return false;

}

if (password.value == "") {

window.alert("Please enter your password");

password.focus();

returnflase;

}

return true;

}

</script>

</head>

<body>

<p>Name:

</p>

<br>

<p> Address:

</p>

<br>

<p>E-mail Address:

</p>

<br>

<p>Password:

</p>

<br>

<p>Telephone:

</p>

<br>

<p>

</p>

</form>

</body>

</html>

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

<html>

<head>

    <script type="text/javascript">
        functionWriteCookie() {
            if (document.myform.customer.value == "") {
                alert("Enter value!");
                return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="ename" />
        </p>
        <br>
        <p>
            <input type="button" value="Set Cookie" onclick="WriteCookie();" />
        </p>
        <br>
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

if (document.myform.customer.value == "") {

alert("Enter value!");

return;

}

cookievalue = escape(document.myform.customer.value) + ";";

document.cookie = "name=" + cookievalue;

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

<p>

</p>

<br>

</form>

</body>

</html>

Read a Cookie with JavaScript

With JS, cookies can be read like this:

var x = document.cookie;

Example

<html>

<head>
    <script type="text/javascript">
        functionReadCookie() {
            varallcookies = document.cookie;
            document.write("All Cookies : " + allcookies);
            cookiearray = allcookies.split(';');
            for (var i = 0; i < cookiearray.length; i++) {
                name = cookiearray[i].split('=')[0];
                value = cookiearray[i].split('=')[1];
                document.write("Key is : " + name + " and Value is : " + value);
            }
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <input type="button" value="Get Cookie" onclick="ReadCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionReadCookie() {

varallcookies = document.cookie;

document.write("All Cookies : " + allcookies);

cookiearray = allcookies.split(';');

for (var i = 0; i < cookiearray.length; i++) {

name = cookiearray[i].split('=')[0];

value = cookiearray[i].split('=')[1];

document.write("Key is : " + name + " and Value is : " + value);

}

</script>

</head>

<body>

</form>

</body>

</html>

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.

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() + 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <br>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() + 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

</form>

</body>

</html>

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

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() - 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() - 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

</form>

</body>

</html>

Full Example

<html>

<head>
    <script>
        functionsetCookie(jsname, jsvalue, jsdays) {
            varjsd = new Date();
            jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));
            varjsexpires = "jsexpires=" + jsd.toGMTString();
            document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";
        }

        functiongetCookie(jsname) {
            var name = jsname + "=";
            vardecodedCookie = decodeURIComponent(document.cookie);
            varjca = decodedCookie.split(';');
            for (var i = 0; i < jca.length; i++) {
                var c = jca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    returnc.substring(name.length, c.length);
                }
            }
            return "";
        }

        functioncheckCookie() {
            varjsuser = getCookie("username");
            if (jsuser != "") {
                alert("Welcome " + jsuser);
            } else {
                jsuser = prompt("Enter your name:", "");
                if (jsuser != "" && jsuser != null) {
                    setCookie("username", jsuser, 30);
                }
            }
        }
    </script>
</head>

<body onload="checkCookie()"></body>

</html>

<html>

<head>

functionsetCookie(jsname, jsvalue, jsdays) {

varjsd = new Date();

jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));

varjsexpires = "jsexpires=" + jsd.toGMTString();

document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";

}

functiongetCookie(jsname) {

var name = jsname + "=";

vardecodedCookie = decodeURIComponent(document.cookie);

varjca = decodedCookie.split(';');

for (var i = 0; i < jca.length; i++) {

var c = jca[i];

while (c.charAt(0) == ' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

returnc.substring(name.length, c.length);

}

return "";

}

functioncheckCookie() {

varjsuser = getCookie("username");

if (jsuser != "") {

alert("Welcome " + jsuser);

} else {

jsuser = prompt("Enter your name:", "");

if (jsuser != "" && jsuser != null) {

setCookie("username", jsuser, 30);

}

</script>

</head>

</html>

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

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

<html>

<head>
    <script>
        window.onload = function() {
            varmyheading = document.createElement("h1");
            varmyheading_text = document.createTextNode("Big Head!");
            myheading.appendChild(myheading_text);
            document.body.appendChild(myheading);
        }
    </script>
</head>

</html>

<html>

<head>

window.onload = function() {

varmyheading = document.createElement("h1");

varmyheading_text = document.createTextNode("Big Head!");

myheading.appendChild(myheading_text);

document.body.appendChild(myheading);

}

</script>

</head>

</html>

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

Hello World!

1	Hello World!

Finding DOM HTML Element by Id

Hello World!

This example demonstrates the getElementsById method.

OUTPUT

Hello
World!

1 2	Hello World!

This example demonstrates the getElementsById method.

The text from the intro paragraph is Hello World!

Javascript get ASCII value using charCodeAt()

Javascript get ASCII value using codePointAt()

Get ASCII value of char javascript

Generating ASCII Values Table in JavaScript

ASCII value of alphabets

ASCII value of Capital Letter

ASCII value of Small Letter

Q How to convert javascript char to ASCII

Q How to convert javascript ASCII to char

Changing the background color of the HTML element

Changing the background color of the body

Generating Multiplication table in Range

Read More

Prime number program in javascript using for loop

Read More

how to get checkbox value in javascript with getelementbyid()

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

How to get checkbox value in JQuery

How to get multiple checkbox value in JQuery

Read More

Add active class to a div on javascript onclick event

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

Add active class to a div on Jquery onclick event

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

Add Hover effect in HTML menu using JQuery hover()

Read More

Some Validation HTML Input Attributes:

Read More

What are Cookies?

How It Works ?

Create a Cookie with JavaScript

Read a Cookie with JavaScript

Change a Cookie with JavaScript

Delete a Cookie with JavaScript

Example

How To Access the DOM?

From where the DOM came?

DOM Tree of Objects

Finding DOM HTML Element by Id