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.

  1. charCodeAt()
  2. 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.

Javascript get ASCII value using codePointAt()

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

Get ASCII value of char javascript

Get ASCII value of character
Fig: Get ASCII value of character

Generating ASCII Values Table in JavaScript

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

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

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

ASCII value of Small Letter

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

Changing the background color of the body

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

  1. Get multiple checkbox value in javascript
  2. Add active class onclick
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object 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.

Read More

  1. Get multiple checkbox value in javascript
  2. Add active class onclick
  3. JavaScript Multiplication Table
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

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.

Read More

  1. Add active class onclick
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

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.

Read More

  1. Get multiple checkbox value in javascript
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

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.

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

Read More

  1. Get multiple checkbox value in javascript
  2. Add active class onclick
  3. JavaScript Multiplication Table
  4. isPrime() Javascript : Prime number program
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

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