JavaScript UNIT I
Example:
<script>
var a=10;
var b=20;
c=a>b?
a:b;
[Link]("Largest Number=" + c);
1.1 Making Link Smarter
HTML Links are connections from one web resource to another. A link has two ends,
An anchor and a direction.
The link starts at the “source” anchor and points to the “destination” anchor, which
may be any Web resource such as an image, a video clip, a sound bite, a program, an
HTML document or an element within an HTML document.
You will find many websites or social media platforms ( Like YouTube, and Instagram
) which link an image to a URL or a text to a URL etc.
This means that by using the ‘a’ tag, you can link 1 element of the code to another
element that may/may not be in your code.
Syntax:
<a href="url">link text</a>
Example:
<a href="url">[Link]</a>
The Target Attribute:
By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 1
[Link]
JavaScript UNIT I
The target attribute specifies where to open the linked document. The target attribute can have
one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example:
<html>
<body style="text-align: center;">
<h1 style="color:green;">
NIIT Nanded
</h1>
<h2>The target Attribute</h2>
<p>If target="_blank", the link will open in a new browser window or
tab.</p>
<a href="[Link] target="_blank">Visit NIIT
Nanded!</a>
<p>If target="_self", the link will open in same window or tab.</p>
<a href="[Link] target="_self">Visit NIIT
Nanded!</a>
</body>
</html>
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 2
[Link]
JavaScript UNIT I
Use a link to send an Email:
When placing an email address within a webpage or a contact form it is helpful to let users
quickly get in touch. This is possible within the standard link format by using the “mailto”
keyword prior to writing the recipient.
Example:
<html>
<body style="text-align: center;">
<h1 style="color:green;">
NIIT Nanded
</h1>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let
them send a new email), use mailto: inside the href attribute:</p>
<p><a href="[Link] email</a></p>
</body>
</html>
1.2 Using Switch Case Statement
JavaScript switch statement is used to execute a block of code from multiple expressions.
JavaScript switch statement evaluates an expression. The expression’s value is compared with
the values of each case in the structure. If a match is found, the related block of code is
executed.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 3
[Link]
JavaScript UNIT I
The expression can be of type numbers or strings.
Duplicate case values are not allowed.
The default statement is optional. If the expression passed to the switch does not
match the value in any case then the statement under default will be executed.
The break statement is used inside the switch to terminate a statement sequence.
The break statement is optional. If omitted, execution will continue on into the next
case.
Cases are compared strictly.
JavaScript switch statement is used with a break or default keyword (optional and both can
be used together also).
break: This keyword is used to break out of the switch block. This stops the execution
inside the code block.
default: This keyword is used to specify a piece of code if no case matches the given
condition. There can be only one default keyword in a switch statement.
Syntax:
switch(expression)
{
case
value1:
code
block
break;
case
value2:
code block
break;
.
.
case valueN:
code block
default:
default code block
}
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 4
[Link]
JavaScript UNIT I
Example:
<html>
<body style="text-align: center;">
<h1 style="color:green;"> NIIT Nanded </h1>
<p>Click the button to display what day it is today.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day =
"Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "Unknown Day";
}
[Link]("demo").innerHTML = "Today is " + day;
}
</script>
</body>
</html>
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 5
[Link]
JavaScript UNIT I
1.3 Handling Error
In programming, handling errors or exception is a process or method used for handling the
abnormal statements/ syntactically incorrect statement in the code and executing them.
For example, the Division of a non-zero value with zero will result into infinity always, and it
is a run time error or exception. Thus, with the help of exception handling, it can be executed
and handled.
An error is an action that is inaccurate or incorrect. There are three types of errors in
programming which are discussed below:
Syntax error
Logical error
Runtime error
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 6
[Link]
JavaScript UNIT I
1. Syntax Error: When a user makes a mistake in the pre-defined syntax of a
programming language, a syntax error may appear.
<script type="text/javascript">
// An runtime error here
[Link]();
</script>
2. Logical Error: An error which occurs when there is any logical mistake in the
program that may not produce the desired output, and may terminate abnormally.
Such an error is known as Logical error
3. Runtime Error: When an error occurs during the execution of the program, such an
error is known as Runtime error. The codes which create runtime errors are known as
Exceptions. Thus, exception handlers are used for handling runtime errors
As in runtime errors, there are exceptions and these exceptions can be handled with the help of
the try-and-catch method
Exception Handling Statements
There are following statements that handle if any exception occurs:
1. try…catch…finally statements.
2. throw statements.
try…catch…finally statements.
A try…catch is a commonly used statement in various programming languages. Basically, it is
used to handle the error-prone part of the code. It initially tests the code for all possible errors
it may contain, then it implements actions to tackle those errors (if occur). A good
programming approach is to keep the complex code within the try…catch statements.
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 7
[Link]
JavaScript UNIT I
<script type = "text/javascript">
<!--
try {
// Code to run
[break;]
}
catch ( e ) {
// Code to run if an exception occurs
[break;]
}
[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>
The try block must be followed by either exactly one catch block or one finally block (or
one of both). When an exception occurs in the try block, the exception is placed in e
and the catch block is executed. The optional finally block executes unconditionally after
try/catch.
catch {} statement executes only after the execution of the try {} statement. Also, one try
block can contain one or more catch blocks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body style="text-align: center;">
<h1 style="color:green;"> NIIT Nanded </h1>
<script>
function First()
{ let a =
123; let b =
0; try {
if (b == 0) {
throw "Do not divide by zero";
}
}
catch (e) {
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 8
[Link]
JavaScript UNIT I
[Link]('NIIT').innerHTML
+= "<br>" + e + "<br>";
}
finally {
[Link]('NIIT').innerHTML
+= " Finally block will always
execute!";
}
}
</script>
<p id="NIIT">Click the NIIT button to see the result:</p>
<form>
<input type="button" value="NIIT" onclick="First()" />
</form>
</body>
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 9
[Link]
JavaScript UNIT I
The throw Statement
You can use throw statement to raise your built-in exceptions or your customized exceptions.
Later these exceptions can be captured and you can take an appropriate action.
It will return the simple string message when any error occurs. When we throw an error, the
program execution control goes to the nearest catch block to handle the exception. If we
haven’t defined any catch block, program execution terminates due to the exception fault.
Example:
const number = 5;
try {
// user-defined throw statement
throw new Error('This is the
throw');
}
catch(error) {
[Link]('An error
caught'); if( number + 8 >
10) {
// statements to handle exceptions
[Link]('Error message: ' + error);
[Link]('Error resolved');
}
else {
// cannot handle the exception
// rethrow the exception
throw new Error('The value is low');
}
Example:
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h1 style="color:green;">
NIIT Nanded
</h1>
<h2>JavaScript try catch and throw</h2>
<p>Please input a number between 5 and 10:</p>
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 10
[Link]
JavaScript UNIT I
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
const message = [Link]("p01");
[Link] = "";
let x =
[Link]("demo").value; try {
if([Link]() == "") throw
"empty"; if(isNaN(x)) throw
"not a number"; x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too
high";
}
catch(err) {
[Link] = "Input is " + err;
}
}
</script>
</body>
</html>
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 11
[Link]
JavaScript UNIT I
NANDIGRAM INSTITUTE OF INFORMATION TECHNOLOGY, NANDED 12
[Link]