JavaScript

What is JavaScript?

  • It is a lightweight programming language.
  • Java script can be inserted into an HTML page.
  • Java Script is an open Scripting language that anyone can use it without purchasing the license.
  • Java script is supported by major browsers like  Netscape, Internet  Explorer.

How does it works?

  • When a Java Script is inserted into an HTML document, the internet browser will read the HTML and interpret the JavaScript.
  • The JavaScript can be executed immediately or when some event occurs.

What a Java Script can do?

  • Java Script gives HTML designers a programming tool.
  • It can enhance the dynamic and interactive features of your page by allowing you to perform calculations.

Java Script can

  •   > check forms
  •   > write interactive games
  •   > add special effects
  •   > Customize graphics selection

Java Script can put a dynamic text into an HTML page.

Example :

        document.write(“<h1>”+name +”</h1>” );

       can write a variable text into the display of HTML page just like a static HTML text:

  <h1>Hello</h1> does.

  • Java Script can read and write HTML elements.
  • Java Script can react to events. A JavaScript can be set to execute when something happens like when a page has finished loading or when a user clicks on an HTML elements.
  • Java Script can be used to validate data in a form before it is submitted to a server.

<script> Tag

The primary method of including JavaScript within  HTML is by using the <script> tag. To specify the scripting language name, we have to use the “language attribute” with <script> tag.

Example :

  <script language=“Java Script”>indicates  java script

  <script language=“VBS”>indicates  VB Script

Sample Code:

<html>
	<head>
		<title> Java Script Test Program </title>
	</head>
	<body>
		<script language=“JavaScript”>
			document.write(“Hello”);
		</script>
	</body>
</html>

Sample 2:

<html>
	<head>
		<title> Java Script Test Program </title>
	</head>
	<body>
		<script language=“JavaScript”>
			<b>
			document.write(“Hello”);
			</b>
		</script>
	</body>
</html>

Sample 3:

<html>
	<head>
		<title> Java Script Test Program </title>
	</head>
	<body>
		First Time:
		<script language=“JavaScript”>
			alert(“1st Time”);
		</script>
		Second Time:
		<script language=“JavaScript”>
			alert(“2nd Time”);
		</script>
		Third Time:
		<script language=“JavaScript”>
			alert(“3rd Time”);
		</script>
	</body>
</html>

Advantage of JavaScript

1. An interpreted language: JavaScript is an interpreted; language, which requires no compilation steps. This provides an easy development process. The syntax is completely interpreted by the browser just as it interprets HTML tags.

2. Embedded within HTML: JavaScript does not require any special or separate editor for programs to be written, edited, or compiles. It can be written in any text editor like notepad, along with appropriate HTML tags, and saved as filename.html.

HTML files with embedded  JavaScript commands can then be read and interpreted by any browser that is JavaScript enabled.

3. Minimal Syntax-Easy to Learn: By learning just a few commands and simple rules of syntax, complete applications can be built using JavaScript.

4. Quick Development: Because JavaScript does not require time-consuming compilations, the script can be developed in a short period of time. This is enhanced by the fact that many GUI interface features, such as alerts, prompts, confirm boxes, and other GUI elements are handled by client-side JavaScript, browser and HTML code

5. Design for simple, small Programs: it will be suited to implement the simple, small programs. The program can be easily written and executed at an acceptable speed using JavaScript. In addition, they can be easily integrated into a web page.

6. Performance: JavaScript can be written such that the HTML files ate fairly compact and quite small. This minimize strong requirements on the webserver and download time for the client.

7. Procedural Capabilities: every programming language needs to support facilities such as condition checking, looping, and branching, JavaScript provides syntax which can be used to add such procedurals capabilities to the web page.

8. Design for programming User Events: JavaScript support Object/Event based programming JavaScript recognizes when a form Button is pressed. This event can have suitable JavaScript code attached, which will execute when the Button Pressed event occurs.

JavaScript can be used to implement context-sensitive help. Whatever an HTML form’s Mouse cursor Moves Over button or a link on the page, a helpful and informative message can be displayed in the status bar at the button of the browser window.

9. Easy Debugging and Testing: Being an interpreted language, scripts in JavaScript are tested line by line, and errors are also listed as they are encountered.

10. Platform independence /architecture Neutral.: JavaScript is a programming language that is completely independent of the hardware on which works. It is a language that understood by any JavaScript-enabled browser.

The fact that a platform-specific browser, maintained at the client ends, does the interpretation of JavaScript relieves the developer of the responsibility of maintaining multiple source code files for multiple platforms.

Methods of using JavaScript

  • JavaScript can be embedded in HTML documents i.e. in <head>, in <body> or in both tag
  • Javascript can reside in separate page.
  • Javascript object attributes can be placed in HTML element tags.

  Example : <body onLoad=“alert(‘Hello’)”> 

External Java Script :

  • A script on several pages without writing the script on each and every page.
  • You can write a script in an external file & save the file with
  • .js extension.

Example :

      document.write(“This script is the example of external java script”);

  • External script can not contain the <script> tag.
  • You can call this external script using src attribute from any of your pages.

Example :

External JS.html

<html>
	<head>
		<title>Example of external Java Script </title>
	</head>
	<body>
		<script language=“javascript” src=“ext.js”>
         </script>
		<p>
			The actual script is in an external script file    
                     called “ext.js".
		</p>
	</body>
</html>

                            ext.js 
 document.write(“ This is the example of external Java Script ”);

Operators :

  • Arithmetic –  +  –  *  /  %
  • Comparison –  ==  !=  <  >  <=  >=
  • Logical –   &&  ||  !
  • Bitwise –  &  |  ^  >>  >>>  <<  
  • Ternary –  ?:

Variables :

  • Types are not specified.
  • Initial values are optional.

Rules for JavaScript variable names:

  • –Variable names are case sensitive (y and Y are two different variables)
  • –Variable names must begin with a letter or the underscore character

Example :

  • var name;
  • var nrErrors = 0;
  • var a, b, c;

Example :

<html>
	<body>
		<script language="javascript">
			var x;
			x=5+5;
			document.write(x);
			document.write("<br />");
			x="5"+"5";
			document.write(x);
			document.write("<br />");
			x=5+"5";
			document.write(x);
			document.write("<br />");
			x="5"+5;
			document.write(x);
			document.write("<br />");
		</script>
		<p>The rule is: If you add a number and a string, the result will be a string.</p>
	</body>
</html>

Data Types

image 2

Conditional Statements

1. If – use to execute some code only if  a specified condition is true.

Syntax:

  if(condition1) 
            {  True statements  }
		  else if(condition 2)
		  {  True statements  }
		   else
		   {  True statements }

Example :

<script language="javascript">
		var per=30;
		if (per<35)		
		{document.write("<b>fail</b>"); }
		else if (per>=35 && per<50)
		{ document.write("<b>Pass class</b>"); }
		else if (per>=50 && per<60)
		{ document.write("<b>Second Class</b>"); }
		else if (per>=60 && per<70)
		{ document.write("First Class"); }
		else
		{ document.write("Distinction"); }
	</script>

2. Switch – use to select one of many blocks of code to be executed.

Syntax:

switch(var_name)
		{   case 1: 
			     execute code block1
			     break;
		     case 2:
			  execute code block 2		  
                          break;	     
                     default:		  
                          code to be executed if n is different 			     
                          from case 1 and 2 }

3. Loops  – for loop, while loop

    for loop – loops through block of code a specified no of times.

Syntax:

 
for(var=startvalue;
         var<=endvalue;
         var=var+increment)
           {
                   code to be executed
           }
			

Example :

<html>
	<body bgcolor="pink">
		<script language="javascript">
			var i=0;
			for(i=0;i<=5;i++)
			{
			document.write(“<b>No is:<b>"+i+"<br>");
			}
		</script>
	</body>
</html>

while loop – loops through block of code while a specified condition is true.

Syntax:

while (var<=endvalue) 	     
     {    
          code to be executed    
     } 

Example :

<html> 
   <body>
	<script language=“javascript”>
	   var i=0;		
           while (i<=5)		
               {  
                    document.write("The number is " + i);
      		    document.write("<br />");                
                    i++;
	       }
	</script></body></html>

do…while loop – execute block of code ONCE & then it will repeat the loop as long as the specified condition is true.

Syntax:

do
  {
     code to be executed
  }
  while (var<=endvalue); 

Example :

<html>
   <body>
     <script language="javascript">
	var i=0;
	do
        {
		  document.write("The number is " + i);
		  document.write("<br />");
		  i++;
	}
        while (i<=5);
      </script>
   </body>
</html> 

Break Statements

will break the loop & continue executing the code that follows after the loop if any.

Example :

<html>
   <body>
      <script language="javascript">
           var i=0;
           for (i=0;i<=10;i++)
           {
                 if (i==3)
                 {
                      break;
                 }
	     document.write("The number is " + i);
	     document.write("<br />");
          }
      </script>
   </body>
</html> 

Continue Statements

will break the current loop & continue with the next value.

Example :

<html>
  <body>
    <script type="text/javascript">
	var i=0;
	for (i=0;i<=10;i++)
	{   if (i==3)  
	    {   continue;   }
	         document.write("The number is " + i);
	         document.write("<br />");
	 }
    </script>
  </body>
</html> 

Popup Boxes

Three types

  1. Alert box
  2. Confirm box
  3. Prompt box

Alert box :-

  • used if you want to make sure information comes through to the user.
  • The user will have to click “OK” to proceed.

Syntax :

alert(“sometext”);

Example :

<html> <body>
<script language=javascript”>
	alert(“Alert box”);
</script>
<body></html>

Confirm box :-

  • Used if you want the user to verify or accept something.
  • It will pops up with ‘OK’ and ‘CANCEL’ button.
  • When user clicks OK, the box will return TRUE & if user clicks CANCEL, the box will return FALSE.

Syntax :

  confirm(“sometext”);

Example :

<html>  
  <body>
    <script language="javascript">
	var r=confirm("Press a button");
	if (r==true)
	{  alert("You pressed OK!");  }
	else
	{  alert("You pressed Cancel!");  }
    </script>
  </body>
</html>

Prompt box :-

  • used when you want to take input value from the user.
  • If the user clicks OK button than it will returns input value & if user clicks CANCEL button than it will returns null.

Syntax :

prompt(“sometext”,”defaultvalue”);

Example :

<html>
	<body>
		<script language="javascript">
		var name=prompt("Please enter your name",”ABC");
		if (name!=null && name!="")
		{
		  document.write(“Welcome" + name);
		}
		</script>	
	</body
</html>

Leave a Comment

Crypto logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.

Contact

Company Name

Address