JavaScript in web design | Basics | Advantages | Limitations | Form Validation

JavaScript in web design | JavaScript | JavaScript Basics | Advantages of JavaScript | Limitations of JavaScript | Form Validation in JavaScript

JavaScript is a dynamic programming language that makes a web page highly interactive. Web page design consists of 3 parts:

  • HTML that defines the content of the web page,
  • CSS that specify the layout of the web page and
  • JavaScript that is used to program the behavior of the web page.

When JavaScript code is applied to HTML, it enhances the performance of the web page and provides dynamic interactivity to the website. JavaScript has a very versatile scope. If used proficiently, it is able to create games, animated 2d, and 3d graphics and much more. JavaScript is somehow difficult in comparison to HTML and CSS but it’s very flexible. JavaScript is an interpreted language with object-oriented features. It is light weighted. It must be included in HTML within <script>…</script> tags. Script tag has 2 main attributes: LANGUAGE and TYPE.

JavaScript is a cross-platform scripting language that is open to all. It is designed for creating network-centric applications. It is light weighted and highly interactive client-side language. The code should be directly embedded in HTML. The code is interpreted by the web browser. JavaScript code executes on user initiating events like button click, link navigation etc. it works only when data entered in every field is valid.

NOTE:

  • JavaScript is Case Sensitive.
  • The semicolon is optional in JavaScript. If typing the next statement in the different line, a semicolon can be skipped.
  • Line breaks and white spaces are ignored in JavaScript.

 

 


Advantages of JavaScript

JavaScript adds extra functionality to the web page. It is directly embedded in HTML. It adds dynamic interactivity to the web page. Let’s have a look on its benefits why to include it in HTML:

  • It is a client-side scripting language for the web page.
  • Increase the interactivity and usability of the web page.
  • Make the web page more user-friendly by providing easy to use and rich features.
  • Saves server traffic by validating user input before sending to the server.
  • Respond immediately if there is any mistake in user data without waiting for the page reload.

 


Limitations of JavaScript

  • Reading and writing of files are not allowed in client-side JavaScript for the purpose of security.
  • JavaScript codes work for network-centric applications only. There is no support for networking applications.
  • JavaScript doesn’t support multi-threading or multiprocessing.

 


JavaScript Basics

JavaScript code is written within <script>….</script> tags. The script tag may be placed either in head part or in the body of the HTML coding of the web page.

The Script tag: It enclosed the JavaScript code. This tag has two main attributes:

  •  Language that specifies the name of the scripting language we are using. It must be set as “JavaScript”.
  •  Type that specifies the type of scripting language. Its value must be set as “text/javascript”.

Syntax:

<script type= “text/javascript” language= “JavaScript”>…</script>

Page Printing: To add page print functionality in the web page, window.print() method is called.

Example:

<html>

<head>

<title> JavaScript Example</title>

<script type= “text/javascript” language= “JavaScript”></script>

</head>

<body>

<h1> Page Printing Example in JavaScript</h1>

<form><input type= “button” value= “Print” onClick= “window.print()” /></form>

</body>

</html>

Page Redirect: To redirect from web page to somewhere else we use window.location in the code. It carries the page address where to redirect.

Syntax:

<script type= “text/javascript” language= “JavaScript”>

window.location= “https://msatechnosoft.in”;

</script>

Show Content: To display any content on web page document.write() method is used. What you want to display should be written inside quotation marks.

Syntax:

document.write(“My Content in JavaScript”);

Alert dialog box: Alert dialog box is used to display an alert message on the webpage.

Syntax:

<script language= “JavaScript” type= “text/javascript”>

alert(“Warning!!!”);

</script>

Confirmation dialog box: It displays a dialog box with ok/cancel buttons for confirmation.

Syntax:

var x= confirm(“Do you want to continue?”);

if(x==true){

alert(“User wants to proceed”);

return true;

} else {

alert(“Don’t proceed”);

return false;

}

Prompt dialog box: It displays a prompt dialog box in the web page. In a prompt dialog box user is prompted to type the content.

Syntax:

<script>

var x=prompt(“Enter your name”, “your name here”);

alert(“you have entered:”+x);

</script>

Storing cookies:

Document.cookie= “key1=value1; key2=value2; expires=date”;

Reading cookies: Cookies can be read as a string of name-value pair separated by semicolons from document.cookie. Here name shows the name of the cookie and value shows the cookie data.

 


Form Validation in JavaScript

Generally, the form is validated on the server. After submitting the form by client, server checks and validate the form. If any error occurs or any mistake found, the form is reloaded and client needs to resend it after correction. This process is lengthy and burdened server.

JavaScript is a client-side scripting language that validates the form on client end before submit. It not only fast the process but also reduce server burden.

Form validation is done in 2 ways by JavaScript:

  • Basic Validation: here all the required field are checked whether it’s filled or not, “validate ()” method is called to validate data on submit event call.

<script language= “JavaScript” type= “text/javascript”>

function validate()

{

if(document.myform.Name.value == “”)

{

alert(“Please enter your name”);

document.myform.Name.focus();

return false;

}

</script>

  • Data Format Validation: here the correctness of filled data is checked whether the data entered is correct by format and value or not.

<script language= “JavaScript” type= “text/javascript”>

function validateEmail()

{

var eid= document.myform.Email.value;

atpos= eid.indexOf(“@”);

dotpos= eid.lastIndexOf(“.”);

if(atpos<1 || (dotpos-atpos<2))

{

alert(“enter valid email id”);

document.myform.Email.focus();

return false;

}

return(true);

}

</script>

Categories:   tech blogs

Comments