js
js
--------------------------------------------------------------------------------------------------------------------------------------
JAVA SCRIPT LECTURE NOTES
INTRODUCTION
JavaScript is the world's most popular scripting language. It is the language for HTML and the
web, for servers, PCs, laptops, tablets, smart phones, and more.
A scripting language is a lightweight programming language. JavaScript code can be inserted into
HTML pages which can be executed by all modern web browsers.
To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where
the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript
code
<script type=”text/javascript”>
</script>
We can place this JavaScript code in head part as well as body part also.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
OUTPUT IN JAVA SCRIPT
We can print any text in a web page by using JavaScript in following ways.
1) document.write(“hello”) :
Example Program:
<html>
<head>
<script type="text/javascript">
document.write("Hello...Welcome to JavaScript Class from teluguwebguru");
</script>
</head>
<body>
</body>
</html>
Output:
Whatever the text that we write within the document.write statement, that text will be directly
placed within body part of the webpage.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
2) innerHTML
If we want to place a text within start and end of any tag (innerHTML) then this method will be used.
To implement this we need to assign a id to the tag so that we can place the content within this
particular tag from javascript part by identifying the tag using the id assigned.
Example:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementById("special").innerHTML = "Welcome to JS Class from
teluguwebguru";
</script>
</body>
</html>
Here as script part requires finding the tag with id “special”. JavaScript part is included after the tag
h1 with id special so that system will execute the h1 tag first then only the java script can identify
this tag.
Output:
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
3) window.alert(“Hello”);
To display output message in separate window then we may use alert box. By using this method
whatever the message that we send to browser through window.alert that will be displayed in a
separate window.
Example :
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.alert("Welcome to JS from teluguwebguru");
</script>
</body>
</html>
Output
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
COMMENTS IN JAVA SCRIPT
Comments are very useful in any programming language.
Comments will
Example :
<script type=”text/javascript”>
document.write(“hello”);
</script>
To write multi line comments we simply place those particular statements witin /* */
<script type=”text/javascript”>
document.write(“hello”);
/*
document.write(“Hi”);
document.write(“welcome”);
*/
</script>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
VARIABLES IN JAVA SCRIPT
JavaScript variables are containers for storing data values.
Examples :
var a = 2; //number
In the above shown examples please observe that all variables are declared by using the keyword ‘
var ’. However based on the assigned values the particular datatype will be decided.
Java Script variables can hold many datatypes: numbers, strings, objects, and more
Javascript supports undefined data type where all the variables are belonged to undefined datatype
only its values are not assigned. Once values are assigned then corresponding datatypes will be
decided.
Javascript supports null datatype which is a special datatype in java script. We will discuss about this
in further concepts.
Data types of Java Script variables will be decided at runtime while assigning its values. This type of
languages are called as Dynamic Typed Languages.
Examples of Dynamic typed languages are Java Script, PHP, Python etc.,
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
POPUP BOXES IN JAVA SCRIPT
Popup Boxes in Java Script
Alert Box :
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax :
Window.alert(“message”);
Example:
<html>
<head>
<script type="text/javascript">
window.alert("Welcome to JS alert box from teluguwebguru");
</script>
</head>
<body>
</body>
</html>
Output:
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Confirm Box:
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax:
window.confirm("confirmation message");
Example:
<html>
<head>
<script type="text/javascript">
window.confirm("Are you sure to delete this file?");
</script>
</head>
<body>
</body>
</html>
Output:
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Prompt Box :
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax :
window.prompt("sometext","defaultText");
Example:
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Output:
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
OPERATORS IN JAVA SCRIPT
1) Arithmetic Operators
2) Comparison Operators
3) Logical Operators
4) Bitwise Operators
5) Assignment Operators
6) Conditional Operators
Arithmetic Operators:
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus
++ Increment
-- Decrement
Example :
<html>
<head>
<script type="text/javascript">
var a=10;
var b=5;
document.write("result of + is : "+(a+b));
document.write("<br/>");
document.write("result of - is : "+(a-b));
document.write("<br/>");
document.write("result of * is : "+(a*b));
document.write("<br/>");
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
document.write("result of / is : "+(a/b));
document.write("<br/>");
document.write("result of % is : "+(a%b));
document.write("<br/>");
document.write("result of a++ is : "+(a++));
document.write("<br/>");
document.write("result of --b is : "+(--b));
document.write("<br/>");
</script>
</head>
<body>
</body>
</html>
Output:
+= -= *= /= %=
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Comparison Operators:
Comparison and Logical operators are used to test for true or false.
Operator Description
== equal to
!= not equal
? ternary operator
Example
<html>
<head>
<script type="text/javascript">
var a=10;
var b=5;
document.write("result of == is : "+(a==b));
document.write("<br/>");
document.write("result of != is : "+(a!=b));
document.write("<br/>");
document.write("result of > is : "+(a>b));
document.write("<br/>");
document.write("result of >= is : "+(a>=b));
document.write("<br/>");
document.write("result of < is : "+(a<b));
document.write("<br/>");
document.write("result of a<=b is : "+(a<=b));
document.write("<br/>");
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output
Logical Operators:
Logical operators are used to determine the logic between variables or values.
|| or (x == 5 || y == 5) is false
Example:
<html>
<head>
<script type="text/javascript">
var a=true;
var b=false;
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output
Bitwise Operators :
Any numeric operand in the operation is converted into a 32 bit number. The result is converted
back to a JavaScript number.
Example
<html>
<head>
<script type="text/javascript">
var a=10;
var b=5;
document.write("result of & is : "+(a&b));
document.write("<br/>");
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
document.write("result of | is : "+(a|b));
document.write("<br/>");
document.write("result of ~ is : "+(~a));
document.write("<br/>");
document.write("result of ^ is : "+(a^b));
document.write("<br/>");
document.write("result of a << b is : "+(a<<b));
document.write("<br/>");
document.write("result of a >> b is : "+(a>>b));
document.write("<br/>");
</script>
</head>
<body>
</body>
</html>
Output :
Assignment Operator ( = )
Example :
var a = 10;
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Conditional (Ternary) Operator :
JavaScript also contains a conditional operator that assigns a value to a variable based on some
condition.
Syntax :
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
FUNCTIONS IN JAVA SCRIPT
A function is a group or collection of reusable code which can be called from anywhere in
our program.
Advantages of functions :
function code
Example :
<html>
<head>
<script type="text/javascript">
function f()
{
window.alert("Hello from teluguwebguru");
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output:
In the above example function is called immediately after declaration. But by using events we can
call java script functions whenever we want.
Example:
<html>
<head>
<script type="text/javascript">
function f()
{
window.alert("Button Clicked....Hello from teluguwebguru");
</script>
</head>
<body>
<input type="button" value="Click me" onclick="f()">
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output
In the above example function f () will be executed whenever we click on the button. We
made it possible with the help of javascript event onclick.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
ARRAYS IN JAVA SCRIPT
Example
We can access the elements of an array by using index which starts from 0. So, in above example 10
is at index 0, 20 is at index 1, 30 is at index 2. If we try to access the value at index which does not
exists then it simply returns "undefined".
if we want to print the value at index 0 then we can write the statement as follows.
document.write(a[0]);
Example
<html>
<head>
<script type="text/javascript">
var values = new Array(10,20,30,40,50);
document.write("element at index 2 is:"+values[2]+"<br/>");
document.write("element at index 10 is:"+values[10]);
</script>
</head>
<body>
</body>
</html>
Output
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
CONDITIONAL OR CONTROL STATEMENTS IN JAVA SCRIPT
We have
1) if condition:
if is a selection statement which allows us to execute one block of statements based on
the condition returns true.
syntax:
if(condition)
{
//statements
}
Above block of statements will be executed if condition becomes true.
Under if, we have if-else statement too where one block of statements among two will be
executed based on the condition result (true or false).
syntax:
if(condition)
{
//statements
}
else
{
//else statements
}
In the above code if condition satisfies then first block of statements will be
executed. If condition becomes false then else block will be executed.
Under if, we have if-else-if statements also where we can check more than one condition
and based on the conditions result corresponding block of statements will be selected for
execution.
syntax:
if(condition1)
{
//statements
}
else if(condition2)
{
//statements
}
else
{
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
//else statements
}
In the above syntax, if first condition is true then corresponding block will be
executed, other wise it evaluates the other conditions too and select the block for execution
based on the condition. If all the conditions are becoming false then last else block will be
executed.
Example:
<html>
<head>
<script type="text/javascript">
function f()
{
var a=10;
var b=18;
if(a<=10)
{
document.write("a value is less than or equal to 10<br/>");
}
if(b<=10)
{
document.write("b value is less than or equal to 10<br/>");
}
else if(b<15)
{
document.write("b value is less than 15<br/>");
}
else
{
document.write("b value is greater than or equal to 15<br/>");
}
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output:
2) switch
switch case will also work same as if. It is also used to select and execute a block of
statements based on a condition.
syntax:
switch(expression)
{
case ____: statements;
break;
case ____: statements;
break;
default: statements;
break;
In above syntax the case that matches with expression value is selected for
execution. if no case is matched with the expression then default case will be
selected for execution.
Example
<html>
<head>
<script type="text/javascript">
function f()
{
var a=17;
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
switch(a){
case 0: document.write("a is 0");break;
case 5:document.write("a is 5");break;
case 10:document.write("a is 10");break;
default:document.write("a is not matched with any case");
}
}
f();
</script>
</head>
<body>
</body>
</html>
Output:
3) while
By using while condition we can execute block of statements more than one time.
syntax :
while(condition)
statements;
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
above block of statements will be repeatedly executed and whenever the condition specified
is failed then it stops the execution
Example:
<html>
<head>
<script type="text/javascript">
function f()
{
var a=0;
while(a<10){
document.write("a is : "+a+"<br/>");
a++;
}
}
f();
</script>
</head>
<body>
</body>
</html>
Output
4) for
for loop also used to execute block of statements more than one time repeatedly
based on a condition.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
syntax:
for(initialization;condition;iteration)
{
Example :
<html>
<head>
<script type="text/javascript">
function f()
{
var a=0;
for(a=0;a<10;a++){
document.write("a is : "+a+"<br/>");
}
}
f();
</script>
</head>
<body>
</body>
</html>
Output
In above example, observe that unlike while where iteration statements will be written
inside block, for loop allows us to write initialization, condition, iteration statements at a
time.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
DATE IN JAVA SCRIPT
new Date()
This is used to create date object with current date and time.
new Date(milliseconds)
This is used to create date object with our required date and time. But we need to
specify the date and time in milliseconds. it adds the milliseconds that you provided to 1970 jan 01st
00:00:00 and create a date object with the result.
new Date(datestring)
We can create date object by providing date string.
new Date(year,month,date[,hour,minute,second,millisecond])
We can create date object by providing values as per above constructor.
Once a date object is created, we can retrieve independent values like date, day etc., by using
methods getDate(), getDay().
Example:
<html>
<head>
<script type="text/javascript">
function f()
{
var d1 = new Date();
document.writeln("d1:"+d1+"<br/>");
document.writeln("d1 date:"+d1.getDate()+"<br/>");
document.writeln("d1 day:"+d1.getDay()+"<br/>");
document.writeln("d1 year:"+d1.getFullYear()+"<br/>");
document.writeln("d1 Hours:"+d1.getHours()+"<br/>");
document.writeln("d1 minutes:"+d1.getMinutes()+"<br/>");
document.writeln("d1 seconds:"+d1.getSeconds()+"<br/>");
}
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
output
This example explains about first constructor and various methods available to retrieve independent
values from the date object.
Example2
<html>
<head>
<script type="text/javascript">
function f()
{
var d1 = new Date(450000000);
document.writeln("d1:"+d1+"<br/>");
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
OBJECTS IN JAVA SCRIPT
var person = {name: ' Santosh ', age: 35, channel: ' Telugu Web Guru ',}
We can create properties and their values by mentioning them in curly braces as key – value pairs.
person.age or person['age'] will returns 35. (the value of the property age )
once an object is defined, we can insert any number of properties into the object as follows
person['city']='Visakhapatnam';
person['getdetails'] = function(){
//function code
}
here in above property instead of value a function is given so whenever the property getdetails is
called the associated function will be executed.
Example
<html>
<head>
<script type="text/javascript">
function f()
{
//creating object
var person = {name:'Santosh',
age:35,
channel:'Telugu Web Guru',
getmydetails: function(){
return "my name is :"+this.name;
}
};
//accessing properties
document.write('age is'+person.age+'<br/>');
document.write(person.getmydetails());
f();
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
</body>
</html>
Output
In above example this refers to the current object on which this method is executing.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
EVENTS IN JAVA SCRIPT
We can decide when a java script function to be executed. For example we can execute a java script
function whenever an event is triggered like when user perform mouse click, button click etc., these
are called as events.
To implement this we have events concept where we can call function by using event.
Example
In above example function f() will be executed whenever the web page is loaded (this is called
onload event).
Example1
<html>
<head>
<script type="text/javascript">
function f()
{
document.write('Welcome to Telugu web guru');
}
</script>
</head>
<body>
<button onclick="f()">Click me</button> <br/><br/>
<input type="checkbox" value="subscribe" onchange="f()">Subscribe<br/><br/>
<button onmouseover="f()">mouse over me</button><br/><br/>
<button onmouseout="f()">mouse out from me</button><br/><br/>
Enter Your Name <input type="text" onfocus="f()">
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
</body>
</html>
Output
For example above program calls the same function on generating different events. for example if
we click on a button " Click me " then the function will be executed as follows(onclick event).
whenever we clicked on checkbox also the event will be generated (onchange), similarly the
following events are also will call the function : whenever we placed mouse pointer on "mouse over
me" button , moved mouse pointer out from button “mouse out from me”, whenever we clicked on
text box so that it gets focus(onfocus) .
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
\ ERRORS IN JAVA SCRIPT
Example
<html>
<head>
<script type="text/javascript">
function f()
{
document.write('Before Error Line');
window.alerting("Hello Welcome");
document.write('After Error Line');
f();
</script>
</head>
<body>
</body>
</html>
For example in the above program intentionally we mentioned alerting instead of alert which generates the
error.
Because a line in this program contains error we never get the program executed even though two lines are
perfect in the program
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
So to overcome this problem and to make the perfect lines executable, we need to use try-catch blocks as
follows.
Example
<html>
<head>
<script type="text/javascript">
function f()
{
document.write('Before Error Line<br/>');
try{
window.alerting("Hello Welcome");
}
catch(err){
alert('error is:'+err.message);
}
finally{
document.write('After Error Line in finally');
}
}
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Output
Now we are able to execute the perfect lines by handling the program using try -catch blocks. here try block
identified the error occurred and forwarded to the catch block and then catch block executes it’s handler code
available in it and then remaining lines will get executed.
Also observe that the statement in finally block always will be executed irrespective of whether the program
contains error or not.
We can generate and throw errors as per our conditions or requirements in our program by using
user defined exceptions.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Here we entered 10 as input which raises the error so we did not get the output as the error is not yet handled
by the try catch blocks
<html>
<head>
<script type="text/javascript">
function f()
{
var input = window.prompt("enter a number below 10");
var num = parseInt(input);
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
if(num<10)
document.write("Correct input");
try{
if(num>=10)
throw new Error("Wrong input");
}
catch(err){
alert(err.message);
}
f();
</script>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
Now we give the correct output also (below 10 ) value and check the output
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru
JavaScript Lecture Notes TeluguWebGuru
--------------------------------------------------------------------------------------------------------------------------------------
As we entered correct input (below 10) here no error is generated so program gets executed successfully.
This is how we can handle errors in java script by using try-catch-finally-throw keywords.
--------------------------------------------------------------------------------------------------------------------------------------
https://teluguwebguru.in https://www.youtube.com/@teluguwebguru