javascript Archives

Add active class onclick javascript and jQuery

November 13, 2023November 8, 2023 by manish

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

<!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>

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 … Read more

Type Conversion in JavaScript

October 23, 2023October 22, 2023 by manish

Type Conversion in JavaScript means converting one data type to another. JavaScript data type or variables can be converted into a different variable and/or different data type by the following ways: Converting Numbers to Strings Using JavaScript method The JavaScript function String() can convert numbers into strings. String() can take any numbers, literals, variables, or expressions. Consider … Read more

Operator Precedence and associativity in JavaScript

September 22, 2023 by manish

Operator Precedence Operator precedence determines the order in which operators are evaluated when more than one operator is used in an expression. The higher an operator’s precedence, the earlier it is evaluated in comparison with the operators with lower precedence. Consider the following example:

a+b*c

a+b*c

The above expression is evaluated in the order of the … Read more

JavaScript Introduction

August 26, 2023August 19, 2023 by manish

JavaScript is a client-side scripting language. Javascript code is downloaded from the server and executed on client’s browser. We can include javascript statements in html file or we can create a javascript file and can import it on html files. In html file we can use script tag to write javascript statements. Syntax

<script type="text/javascript">
    javascript statements
</script>

javascript statements

</script>

we … Read more

Get ASCII value of char javascript charCodeAt() & codePointAt()

July 22, 2023 by manish

get the ASCII value of char javascript 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 … Read more

How to get multiple checkbox value in javascript and JQuery

July 22, 2023July 22, 2023 by manish

On many websites, you find multiple check box forms to select your interest, or to select multiple options. That can be created by using the 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 an input as a text box we need type=”checkbox”. name is a name given to a text box value property that specifies what … Read more

isPrime() Javascript : Prime number program in Javascript

July 22, 2023July 22, 2023 by manish

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() … Read more

JavaScript Multiplication Table Program with HTML CSS

July 22, 2023July 22, 2023 by manish

JavaScript Multiplication Table is a multiplication table for any number. Using JavaScript we program and generate a 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 the user. Create a button to submit value on the button click to … Read more

Window.resizeTo() in javascript

July 9, 2023June 9, 2023 by manish

The window object represents the web browser’s window. There are various methods available in the window. one of them is resizeTo(). resizeTo() the method is used to resize the window.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            let child1;
                function openb() {    
                   
                  child1=window.open('','Test','resizable,width=300,height=200');
                  child1.focus();
                }
                function resize400() {    
                   child1.focus();
                    child1.resizeTo(400,400);   
                }
                function resize500() {    
                   child1.focus();
                    child1.resizeTo(500,500);   
                }
                function increase50() {    
                   child1.focus();
                    child1.resizeBy(+50,+50);   
                }
                 function decrease50() {    
                   child1.focus();
                    child1.resizeBy(-50,-50);   
                }
        </script>
    </head>
    <body>
        <input type="button" value="open" onclick="openb()"/>
        <input type="button" value="resize to 400" onclick="resize400()"/>
        <input type="button" value="resize to 500" onclick="resize500()"/>
        <input type="button" value="increase by 50" onclick="increase50()"/>
        <input type="button" value="decrease by 50" onclick="decrease50()"/>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

let child1;

function openb() {

child1=window.open('','Test','resizable,width=300,height=200');

child1.focus();

}

function resize400() {

child1.focus();

child1.resizeTo(400,400);

}

function resize500() {

child1.focus();

child1.resizeTo(500,500);

}

function increase50() {

child1.focus();

child1.resizeBy(+50,+50);

}

function decrease50() {

child1.focus();

child1.resizeBy(-50,-50);

}

</script>

</head>

<body>

</body>

</html>

This Keyword in JavaScript

February 20, 2023February 20, 2023 by manish

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 of any function, called this. JavaScript function while executing has a reference to its current execution of any function, called this. with this keyword, It does not matter how and where … Read more