JavaScript Class 11 Notes

Teachers and Examiners (CBSESkillEduction) collaborated to create the JavaScript Class 11 Notes. All the important Information are taken from the NCERT Textbook Web Application (803) class 11.

Contents show

JavaScript Basics

Making interactive web pages is possible with JavaScript, a text-based computer language used both on the client-side and server-side. JavaScript adds interactive aspects to online pages that keep users interested, whereas HTML and CSS are languages that give web pages structure and style.

History of JavaScript

Brendan Eich created JavaScript in 1995 while working at Netscape, and it was originally made available with Netscape 2 in early 1996. LiveScript was the original name; however, to leverage on the success of Sun Microsystems’ Java language, it was changed to JavaScript.

Features of JavaScript

Some specific features of JavaScript are discussed below.

Browser Support – All modern browsers support JavaScript natively and accept it as a programming language.
Client and Server-Side Support – JavaScript can be used on client side as well as on server side.
Functional Programming Language – Variables can be assigned in the functions just like any other programming language. A function has the ability to take another function as a parameter and to return another function.
Support for Objects – JavaScript is Object oriented based programming language. JavaScript manages objects and inheritance in easily.
Run-Time Environment – JavaScript typically relies through upon a run-time environment to provide objects and methods by which scripts can interact with the outside world.
Vendor-specific extensions – The Mozilla Foundation is the official manager of JavaScript, and new language features are regularly added and this features are supported by all browser.
Object based features Supported by JavaScript – JavaScript is sometimes referred to as an object-based programming language and supports a number of object-based language characteristics.

Type of Website

There are two types of website –

Static Website – A user receives a static website exactly as it was stored. This means that unless the website is completely redesigned or the site administrator changes something directly in the code.
Dynamic Website – Facebook and Twitter are two more excellent examples of dynamic websites that produce distinctive, user-specific content. Your feeds are based on friends or accounts you follow on social media platforms like Facebook and Twitter.

Limitations of Static Website

It can not be used while changes are being made by the developer so user has to wait until changes are not finished.
It has limited functionality.
It can cost more to upgrade.
It cannot be scaled e.g. if you want add some data then it might be done using separate page.
It is less attractive and interactive.

Advantages of JavaScript

JavaScript easy to learn.
JavaScript can be used for creating dynamic webpage.
Event can be used in JavaScript.
JavaScript can read and change the contents of an HTML element.
JavaScript can be used to validate data of the form before it is submitted to a server. It saves the server from extra processing.
JavaScript can be used to create cookies. For example, a JavaScript can be used to store and retrieve information from the visitor’s computer.
JavaScript is widely used for developing modern web applications with the capabilities of desktop applications.

Applications/Uses of JavaScript

Developing Multimedia Applications – the users can use JavaScript to add multimedia elements.
Create Pages Dynamically – based on the user’s choice, JavaScript can generate pages that are customized by the user.
Interact with the user – JavaScript can do some processing of forms and can validate user input when the user submits the form.
JavaScript objects are similar to dictionaries – in JavaScript, objects are just a collection of name-value pairs.
Extension – JavaScript can be extended for different purposes by supplementing it with additional objects.
Client-Side JavaScript – It extends the core language by supplying objects to control a browser (navigator or another web browser) and its document object Model (DOM).
Server-Side JavaScript – extends the core language by supplying objects relevant to running JavaScript on a server.

Following steps show how JavaScript works with the web page.

When user type address or URL on the browser then a request is transmitted to the server.
Server accept the browser request and returns the page to the browser.
Browser render the page for HTML tags and display the contents.
If page contains the JavaScript code, which are surrounded by <script> and </script>tag generally then JavaScript interpreter handle the code.
This code can handle user-initiated event like click on the button, rolling mouse or form submitting etc.
It makes the webpage interactive by detecting what is happening on the page and responds it.
It can dynamically change the look of web page or contents
It can read the cookies and validate them

Web Browser

A browser is an application programme having a graphical user interface for displaying HTML files that is used to surf the World Wide Web and give users access to all of the data there.

Enabling JavaScript in Browsers

JavaScript is supported by all contemporary browsers by default. But occasionally you might need to manually turn on or off this support.

Basic Structure of JavaScript program

Client-side JavaScript code is embedded in HTML code between the either <head></head> tag or <body></body> tag surrounded by <script></script> tag. If code contains the object, functions definitions then it is preferred to add the code between the <head></head> tag. If code have to placed one or multiple scripts in a document then <body></body> tag is used.

<!DOCTYPE>
<html>
<head><title></title></head>
<body >
<script type="text/javascript">
Add javascript code here
</script>
</body>
</html>

JavaScript Syntax

JavaScript syntax is the set of rules that define a structured JavaScript. Here are some tips to remember when writing your first JavaScript program.

Case Sensitivity – JavaScript is case sensitive i.e., upper case letter and lower-case letter has different meaning.
Whitespace & Semi Colon – Spaces, tabs, and newlines that are present in JavaScript programmes are ignored by JavaScript.

Comments

Comments are used to make programmes easier to read and are typed with two forward slashes before each word. The interpreter will ignore these comments. In JavaScript, there are two types of comments: single-line comments and multi-line comments.

Single – line comments

// This is comment

Multiline comments

/* This is comment */

Line Break

line breaks are ignored except when it is used within a statement.

JavaScript Code inside the HTML code

<html>
<body>
<script language = “Javascript”> 
Statement 1;
Statement 2;
</script>
</body>
</html>

The write () and writeln() Methods

Without adding a newline at the end, write() method writes a new text to the document. A newline is added at the end of each line that writeln() adds to the page.

The write()Method

<body>
<script type="text/javascript">
document.write("Hello JavaScript");
</script>
</body>

The writeln() Method

<body>
<script type="text/javascript">
document.writeln("Hello");
document.writeln(" JavaScript");
</script>
</body>

Scripting Language vs Programming Language

A scripting language does not require compilation before it is run where as code written in programming language first compiled then it is run.
A code in scripting language is interpreted as it is loaded in the client.
Error won’t be caught before the script is run while in programming errors are found when it is compiled.
Errors in JavaScript are handled by browser.

Using internal and external JavaScript files

There are four different place in the HTML document where scripts can be used.

Body of the page – In this case when page is loaded in the browser then output is displayed as the part of the HTML document.
Header of the page – In this case code is written in the form of function and referred in the other script in the same page.
Within HTML tag – When JavaScript is used as a event handler then it work with HTML elements.
As external file – In this case JavaScript code is written in another file having .js extension. This file is included in a script tag by specifying the file name.

Data Types

The classification of the types of data that a variable or object can store is known as a data type.

There are two type of datatype –

Primitive Data Type
Non-Primitive Data Type

Primitive Data Type

JavaScript supports three basic data types –

Numeric – Numeric type has two type viz. Integer and floating point. Integer is a whole number such as 145, -9 etc. It can be expressed in decimal base(10), octal base (8), hexadecimal (16) of both positive and negative values. Floating point are values with decimal value or fractional value.
String – Strings are collection of characters which are enclosed with either single or double quotes.
Boolean – This type of data contains only two value i.e. true or false or 0 or 1. When these values are compared then true value is taken as 1 and false value is taken as 0.

Composite Data Types (Non-Primitive Data Type)

When a data type declares several identical or dissimilar data under a single variable declaration, or when the data type includes multiple values grouped together, the data type is referred to as a composite data type. The three primary categories of composite data types are listed below. Array. Function.

Variables

Anything that can change is considered variable. A variable saves the data value in JavaScript and allows for future data value changes. If you want to declare a variable in JavaScript, use the reserved term var.

Variables can be thought of as named containers in the computer’s memory. You can place data in these containers and refer to the value using the name.
A variable consists of an identifier, a scope and a specific data typ
An Identifier is the name of a variable.

Usefulness of Variable

When code is written they can be used in place of unknown value.
When script is written or updated then it saves the time
Then clearer the purpose of code because you can give the meaningful name which make the code easy to read.

Variable Naming Convention

JavaScript has some rules when we give the name to the variable.

Case Sensitivity – JavaScript variables are case sensitive.
Use Valid Characters – A variable must begin with underscore or letter only. All other characters are invalid to start the variable name. Variable must not contains blank spaces.
Avoid Reserved Words – Reserved words are the special words which has specific meaning in JavaScript.

Variable Declaration and Initialization

Variables in JavaScript can be defined using the keyword var.
The equal to (=) sign is used to assign a value to a variable.
Note that var is the keyword in JavaScript.
Users can either, separately declare the variable and then assign values to it or straight-away declare and initialize the variables.

Variable Scope

The scope of a variable refers to the area of a program in which it can be accessed. Variables have two types of scopes – global scope and local scope.

Global Scope – Outside of a function, global variables are defined to be accessible throughout the entire programme.
Local Scope – Using the var keyword, local variables are kept in a function and can only be used inside the confines of that function.

Operators

An operator is a symbol that is used to perform an operation. in this section we will learn how to use JavaScript operators.

Assignment Operators

Assignment operators help in assigning values to a variable. the following are the example –

=, +=, -=, *=, /=, %=

Arithmetic Operators

There are following arithmetic operators supported by JavaScript language –

+, -, *, /, ++, —

Comparison Operators

There are following comparison operators supported by JavaScript language.

==, !=, >, <, >=, <=

Logical Operators

There are following logical operators supported by JavaScript language.

&&, ||, !

Bitwise Operators

There are following bitwise operators supported by JavaScript language.

&, |, ^, ~, <<, >>, >>>

Built-in Functions/Object for Numerical Calculation

Basic Math Operation

isNaN() – NaN stands for “Not-a-Number” in JavaScript. This method checks whether passing argument is a number or not. It returns true or false value as a result.

document.write( isNaN(4) ) // will return false.
document.write( isNaN(“4”) ) // will return false.
document.write( isNaN(“four”) ) // will return true.

valueOf() – This method return a number of a given variable. For example
var x =345;
x.valueOf() // will return 345;

Math.round(x) – It returns the rounded value of passing number to its nearest integer. For example:
Math.round(6.7) //returns 7
Math.round(6.4) //returns 6

Math.pow(x,y) – It returns the power of x based on y. For example:
Math.pow(3,4) //returns 81

Math.sqrt(x) – It returns the square root of x. For example:
Maths.sqrt(81) //returns 9

Math.ceil(x) – It returns the greater or equal to integer value of x.
Math.ceil(6.4) //returns 7

Math.floor(x) – It returns the less or equal to integer value of x

Math.floor(6.4) //returns 6
Math.ceil(3.9) //returns 3

Basic String Operations

Length() – It returns the length of a string including white space(s). For example
var str = “Hello javaScript”;
document.write(str.length); // it returns the 16.

Search() – It returns the starting location of passing string otherwise returns -1.
var str = “This is my first script in JavaScript”
str.search(“script”); //returns 17

Substring() – It extract the substring by taking the starting and ending position as argument. You can omit ending position then it will extract the string from starting position to end of the string.
var str = “This is my first script in JavaScript”
str.substring(7,16) // returns “my first” as substring

Data Type Conversion

The process of transforming data from one type to another is known as type conversion. Changing data from a String to a Number, for instance. In JavaScript, there are two types of type conversion. Automatic type conversion is known as implicit conversion. Manual type conversion is known as explicit conversion.

Implicit Type Conversion

JavaScript occasionally automatically changes one data type to another (to the right type). Implicit conversion describes this situation.

Example 1 – document.write("3" + "1");

Output – 4

Example 2 – document.write(3 + "1");

Output – 4

In example 1, both value having string type but due to Implicit Type Conversion value automatically converted in numerical value.

Explicit Type Conversion

This type of conversion is done by developer by using the inbuilt method of type conversions.

Number() – This method is used to convert any type to number type.

Number (“40”) convert string value “40” to 40.

Number (null) convert null to 0

parseInt() – This method returns the integer value by accepting two argument.

parseInt (“10”) returns 10
parseInt (“40.33”) returns 40

parseFloat() – This method returns the integer value by accepting one string argument.

parseFloat(“23”) returns 23
parseFloat(“23.55”) returns 23.55

eval() – This method accept the JavaScript expression as an string argument. It then evaluates the expression and return the result after execution. If no result is obtained the it returns undefined as a result. For example:

eval (“ 8*4/2”) returns 16 as result

Converting String

String() method is used to convert any type to string value whereas possible by accepting one argument.

string (40) converted to “40”

Converting Boolean

Boolean() method convert any type to Boolean type which is supported.

Boolean(25) returns true.

Display method in JavaScript

We have seen document object methods which are used to display the content on the web page. Let see some other methods for display text in JavaScript.

Alert() Dialog Box

The alert message is displayed in the alert dialogue, which also provides a yes-or-no response. Your response determines the next step that is taken once the alert dialogue has displayed its message to warn you.

alert(“You want to continue….”);

Prompt() Dialog Box

The user is prompted for input in a dialogue box by the prompt() method. If the user selects “OK,” the prompt() method returns the input value; otherwise, it returns null.

prompt(“Enter your name”); – By default prompt store only string value

parseInt(prompt(“Enter Number”); – Now the value will be convert to integer value.

Confirm() Dialog Box

Most often, a confirmation dialogue box is used to obtain the user’s approval for any option. A dialogue box with the buttons OK and Cancel is displayed.

var ans =confirm(“Are you really want to cancel the order?”);

Decision Making using if and switch

Conditional Statements

If else Statement

Conditional statements are supported by if and else described below –

if(condition)
{
True Statement;
}
else
{
False Statement;
}

Switch statement

The switch statement is used to select one of many blocks of the code to be executed.

switch (expression){
case n:
code block
break;
case n:
code block
break;
default:
default code block
}

Looping Structure

For Loop

The for loop is best suited when you already know the number of times the statements should be executed. the loop executes until the condition becomes false.

for(initialization; condition; increment)
{//statements }

While Loop

The While loop is another commonly used loop in JavaScript. the purpose of the while loop is to execute a block of statements over and over again until the condition fails.

var i = 1;
while (i < 10) {
alert(i);
i = i + 1;
}

Do-while Loop

This is another kind of loop and different from the for loop and the while loop. this loop will execute the statement at least once that is the statements inside the loop will always get executed at least once, even if the condition is false.

var i = 1;
do {
alert(i);
i = i + 1;
} while (i<10);

Break and Continue

The break statement is very useful to break the loop in the middle of an execution. the break statement can also be used to jump out of the loop. the break statement breaks the loop and continues executing the code after the loop.

for (i = 0; i < 5; i++)
{
if( i==3)
break;
document.write("Hello Life! You are so Good" +"<br>");
}