Scribd
Upload
74 views

Unit Ii Javascript Function

The document discusses JavaScript functions. It defines a function as reusable code that can be called anywhere in a program to perform a specific task. Functions allow programmers to divide programs into smaller, manageable parts. The document then covers defining and calling functions, passing parameters to functions, return values from functions, and JavaScript events like onclick and onsubmit that trigger functions. It provides examples to illustrate function definition, parameters, return values, and common event types.

Uploaded by

Hajiram Beevi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views

Unit Ii Javascript Function

The document discusses JavaScript functions. It defines a function as reusable code that can be called anywhere in a program to perform a specific task. Functions allow programmers to divide programs into smaller, manageable parts. The document then covers defining and calling functions, passing parameters to functions, return values from functions, and JavaScript events like onclick and onsubmit that trigger functions. It provides examples to illustrate function definition, parameters, return values, and common event types.

Uploaded by

Hajiram Beevi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

UNIT II

JavaScript Function
A function is a group of reusable code which can be called anywhere in your program. This
eliminates the need of writing the same code again and again. It helps programmers in writing
modular codes. Functions allow a programmer to divide a big program into a number of small
and manageable functions.
Like any other advanced programming language, JavaScript also supports all the features
necessary to write modular code using functions
JavaScript allows us to write our own functions as well.
Function Definition
Before we use a function, we need to define it. The most common way to define a function in
JavaScript is by using the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded by curly braces.
Syntax
The basic syntax is shown here.
<script type = "text/javascript">
function functionname(parameter-list) {
statements
}
</script>
Example
It defines a function called sayHello that takes no parameters –
<script type = "text/javascript">
function sayHello() {
alert("Hello there");
}
</script>
Calling a Function
To invoke a function, you would simply need to write the name of that function as shown in the
following code.
Example
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Welcome to JMC!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html> 

1
Output

Function Parameters
We have seen functions without parameters. But there is a facility to pass different parameters
while calling a function. These passed parameters can be captured inside the function and any
manipulation can be done over those parameters. A function can take multiple parameters
separated by comma.
Example
We have modified our sayHello function here. Now it takes two parameters.
<html>
<head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Vimala', 35)" value = "Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>

2
Output

The return Statement


A JavaScript function can have an optional return statement. This is required if you want to
return a value from a function. This statement should be the last statement in a function.
For example, you can pass two numbers in a function and then you can expect the function to
return their multiplication in your calling program.
Example
It defines a function that takes two parameters and concatenates them before returning the
resultant in the calling program.
Example
<html>
<head>
<script type = "text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Vidhya', 'Balan');
document.write (result );
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>

3
Output

JavaScript Events
 JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
 When the page loads, it is called an event. When the user clicks a button, that click too is
an event. Other examples include events like pressing any key, closing a window,
resizing a window, etc.
 Developers can use these events to execute JavaScript coded responses, which cause
buttons to close windows, messages to be displayed to users, data to be validated, and
virtually any other type of response imaginable.
 Events are a part of the Document Object Model (DOM) Level 3 and every HTML
element contains a set of events which can trigger JavaScript Code.
onclick Event Type
This is the most frequently used event type which occurs when a user clicks the left button of his
mouse. You can put your validation, warning etc., against this event type.
Example
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>

4
Output

onsubmit Event Type


onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.
Example
The following example shows how to use onsubmit. Here we are calling a validate() function
before submitting a form data to the webserver. If validate() function returns true, the form will
be submitted, otherwise it will not submit the data.
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
Output

onmouseover and onmouseout


These two event types will help you create nice effects with images or even with text as well.
The onmouseover event triggers when you bring your mouse over any element and
the onmouseout triggers when you move your mouse out from that element.

Example

5
<head>
<script type="text/javascript">
function OnMouseIn (elem) {
elem.style.border = "2px solid blue";
}
function OnMouseOut (elem) {
elem.style.border = "";
}
</script>
</head>
<body>
<div style="background-color:#d0f0a0; width:200px"
onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
Move your mouse pointer into and out of this element!
</div>
</body>
Output

HTML 5 Standard Events


The standard HTML 5 events are listed here for your reference. Here script indicates a Javascript
function to be executed against that event.
Attribute Value Description
Offline script Triggers when the document goes offline
Onabort script Triggers on an abort event
Onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document loads
onbeforeprint script Triggers before the document is printed
Onblur script Triggers when the window loses focus
Triggers when media can start play, but
Oncanplay script
might has to stop for buffering
Triggers when media can be played to the
oncanplaythrough script
end, without stopping for buffering
Onchange script Triggers when an element changes

6
Onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
Ondblclick script Triggers on a mouse double-click
Ondrag script Triggers when an element is dragged
Ondragend script Triggers at the end of a drag operation
Triggers when an element has been
Ondragenter script
dragged to a valid drop target
Triggers when an element is being dragged
Ondragleave script
over a valid drop target
Ondragover script Triggers at the start of a drag operation
Ondragstart script Triggers at the start of a drag operation
Ondrop script Triggers when dragged element is being
dropped
ondurationchange script Triggers when the length of the media is
changed
Triggers when a media resource element
Onemptied script
suddenly becomes empty.
Onended script Triggers when media has reach the end
Onerror script Triggers when an error occur
Onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has change
Oninput script Triggers when an element gets user input
Oninvalid script Triggers when an element is invalid
Onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and
released
Onkeyup script Triggers when a key is released
Onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded

7
Triggers when the duration and other
onloadedmetadata script
media data of a media element is loaded
Triggers when the browser starts to load
onloadstart script
the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
Triggers when the mouse pointer moves
onmouseout script
out of an element
Triggers when the mouse pointer moves
onmouseover script
over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being
rotated
onoffline script Triggers when the document goes offline
Onoine script Triggers when the document comes online
Ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
Onpause script Triggers when media data is paused
Onplay script Triggers when media data is going to start
playing
onplaying script Triggers when media data has start playing
onpopstate script Triggers when the window's history
changes
Triggers when the browser is fetching the
onprogress script
media data
Triggers when the media data's playing
onratechange script
rate has changed
onreadystatechang script Triggers when the ready-state changes
e
Onredo script Triggers when the document performs a
redo

8
Onresize script Triggers when the window is resized
Triggers when an element's scrollbar is
Onscroll script
being scrolled
Triggers when a media element's seeking
onseeked script attribute is no longer true, and the seeking
has ended
Triggers when a media element's seeking
onseeking script
attribute is true, and the seeking has begun
Onselect script Triggers when an element is selected
Triggers when there is an error in fetching
Onstalled script
media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
Triggers when the browser has been
onsuspend script fetching media data, but stopped before the
entire media file was fetched
ontimeupdate script Triggers when media changes its playing
position
Onundo script Triggers when a document performs an
undo
onunload script Triggers when the user leaves the
document
Triggers when media changes the volume,
onvolumechange script
also when volume is set to "mute"
Triggers when media has stopped playing,
onwaiting script
but is expected to resume
JAVASCRIPT ERRORS AND EXCEPTIONS
There are three types of errors in programming: (a) Syntax Errors, (b) Runtime Errors, and (c)
Logical Errors.
Syntax Errors
Syntax errors, also called parsing errors, occur at compile time in traditional programming
languages and at interpret time in JavaScript.
For example, the following line causes a syntax error because it is missing a closing parenthesis.
<script type = "text/javascript">
window.print();
</script>
When a syntax error occurs in JavaScript, only the code contained within the same thread as the
syntax error is affected and the rest of the code in other threads gets executed assuming nothing
in them depends on the code containing the error.

9
Runtime Errors
Runtime errors, also called exceptions, occur during execution (after compilation/interpretation).
For example, the following line causes a runtime error because here the syntax is correct, but at
runtime, it is trying to call a method that does not exist.
<script type = "text/javascript">
window.printme();
</script>
Exceptions also affect the thread in which they occur, allowing other JavaScript threads to
continue normal execution.
Logical Errors
Logic errors can be the most difficult type of errors to track down. These errors are not the result
of a syntax or runtime error. Instead, they occur when you make a mistake in the logic that drives
your script and you do not get the result you expected.
You cannot catch those errors, because it depends on your business requirement what type of
logic you want to put in your program.
The try...catch...finally Statement
The latest versions of JavaScript added exception handling capabilities. JavaScript implements
the try...catch...finally construct as well as the throwoperator to handle exceptions.
You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript
syntax errors.
Here is the try...catch...finally block syntax –
<script type = "text/javascript">
try {
[break;]
}
catch ( e ) {
[break;]
}
[ finally {
}]
</script>
The try block must be followed by either exactly one catch block or one finally block (or one of
both).
Now let us try to catch this exception using try...catch and display a user-friendly message.
<html>
<head>
<script type = "text/javascript">
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
</script>
</head>
<body>

10
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Output

You can use finally block which will always execute unconditionally after the try/catch. Here is
an example.
<html>
<head>
<script type = "text/javascript">
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html> 
Output

11
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.
Example
<html>
<head>
<script type = "text/javascript">
function myFunc() {
var a = 100;
var b = 0;
try {
if ( b == 0 ) {
throw( "Divide by zero error." );
} else {
var c = a / b;
}
}
catch ( e ) {
alert("Error: " + e );
}
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Output

12
The onerror() Method
The onerror event handler was the first feature to facilitate error handling in JavaScript.
The error event is fired on the window object whenever an exception occurs on the page.
<html>
<head>
<script type = "text/javascript">
window.onerror = function () {
alert("An error occurred.");
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Output

The onerror event handler provides three pieces of information to identify the exact nature of
the error −
 Error message − The same message that the browser would display for the given error
 URL − The file in which the error occurred
 Line number− The line number in the given URL that caused the error
Here is the example to show how to extract this information.
Example

13
 <html>
<head>
<script type = "text/javascript">
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Output

You can display extracted information in whatever way you think it is better.
You can use an onerror method, as shown below, to display an error message in case there is
any problem in loading an image.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />
You can use onerror with many HTML tags to display appropriate messages in case of errors.

14

You might also like