JAVASCRIPT –

FUNCTIONS,
EVENTS AND
COOKIES
22BBA-MUET JAMSHORO
Mubeen K.Chandio
Research Assistant
CSE department MUET,
Jamshoro
JAVASCRIPT - FUNCTIONS
 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.
JAVASCRIPT - FUNCTIONS
 Like any other advanced programming
language, JavaScript also supports all the
features necessary to write modular code
using functions.
 You must have seen functions
like alert() and write() in the earlier
chapters.
 We were using these functions again and
again, but they had been written in core
JavaScript only once.
JAVASCRIPT - FUNCTIONS
 JavaScript allows us to write our own
functions as well.
 This section explains how to write your
own functions in JavaScript.
JAVASCRIPT - FUNCTIONS
 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.
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
 Example
 Try the following example. It defines a function
called sayHello that takes no parameters −
JAVASCRIPT - FUNCTIONS
 Calling a Function
 To invoke a function somewhere later in the
script, you would simply need to write the name
of that function as shown in the following code.
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
 Function Parameters
 Till now, 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.
JAVASCRIPT - FUNCTIONS
 Example
 Try the following example. We have modified
our sayHello function here. Now it takes two
parameters.
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
 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.
JAVASCRIPT - FUNCTIONS
 Example
 Try the following example. It defines a function
that takes two parameters and concatenates
them before returning the resultant in the
calling program.
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - FUNCTIONS
JAVASCRIPT - EVENTS
 What is an Event ?
 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.
JAVASCRIPT - EVENTS
 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.
JAVASCRIPT - EVENTS
 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
 Try the following example.
JAVASCRIPT - EVENTS
JAVASCRIPT - EVENTS
JAVASCRIPT - EVENTS
 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.
 Try the following example.
JAVASCRIPT - EVENTS
JAVASCRIPT - EVENTS
 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.
 Try the following example.
JAVASCRIPT - EVENTS
JAVASCRIPT - EVENTS
JAVASCRIPT AND COOKIES
 What are Cookies ?
 Web Browsers and Servers use HTTP protocol to
communicate and HTTP is a stateless protocol.
But for a commercial website, it is required to
maintain session information among different
pages. For example, one user registration ends
after completing many pages. But how to
maintain users' session information across all
the web pages.
JAVASCRIPT AND COOKIES
 In many situations, using cookies is the most
efficient method of remembering and tracking
preferences, purchases, commissions, and
other information required for better visitor
experience or site statistics.
JAVASCRIPT AND COOKIES
 How It Works ?
 Your server sends some data to the visitor's
browser in the form of a cookie. The browser
may accept the cookie. If it does, it is stored as
a plain text record on the visitor's hard drive.
Now, when the visitor arrives at another page
on your site, the browser sends the same
cookie to the server for retrieval. Once
retrieved, your server knows/remembers what
was stored earlier.
JAVASCRIPT AND COOKIES
 Cookies are a plain text data record of 5 variable-length fields
−
 Expires − The date the cookie will expire. If this is blank, the
cookie will expire when the visitor quits the browser.
 Domain − The domain name of your site.
 Path − The path to the directory or web page that set the
cookie. This may be blank if you want to retrieve the cookie
from any directory or page.
 Secure − If this field contains the word "secure", then the
cookie may only be retrieved with a secure server. If this field
is blank, no such restriction exists.
 Name=Value − Cookies are set and retrieved in the form of
key-value pairs
JAVASCRIPT AND COOKIES
 Cookies were originally designed for CGI programming.
The data contained in a cookie is automatically
transmitted between the web browser and the web
server, so CGI scripts on the server can read and write
cookie values that are stored on the client.
 JavaScript can also manipulate cookies using
the cookie property of the Document object. JavaScript
can read, create, modify, and delete the cookies that
apply to the current web page.
JAVASCRIPT AND COOKIES
 Storing Cookies
 The simplest way to create a cookie is to assign a string
value to the document.cookie object, which looks like
this.
 document.cookie =
"key1=value1;key2=value2;expires=date";
JAVASCRIPT AND COOKIES
 Here the expires attribute is optional. If you provide this
attribute with a valid date or time, then the cookie will
expire on a given date or time and thereafter, the
cookies' value will not be accessible.
 Note − Cookie values may not include semicolons,
commas, or whitespace. For this reason, you may want to
use the JavaScript escape() function to encode the value
before storing it in the cookie. If you do this, you will also
have to use the corresponding unescape() function
when you read the cookie value.
 Example
 Try the following. It sets a customer name in an input
cookie.
JAVASCRIPT AND COOKIES
JAVASCRIPT AND COOKIES

 Now your machine has a cookie called name. You can set
multiple cookies using multiple key=value pairs
separated by comma.
JAVASCRIPT AND COOKIES
 Reading Cookies
 Reading a cookie is just as simple as writing one, because
the value of the document.cookie object is the cookie. So
you can use this string whenever you want to access the
cookie. The document.cookie string will keep a list of
name=value pairs separated by semicolons,
where name is the name of a cookie and value is its
string value.
 You can use strings' split() function to break a string into
key and values as follows −
 Example
 Try the following example to get all the cookies.
JAVASCRIPT AND COOKIES
JAVASCRIPT AND COOKIES
 Note − Here length is a method of Array class which
returns the length of an array. We will discuss Arrays in a
separate chapter. By that time, please try to digest it.

 Note − There may be some other cookies already set on

your machine. The above code will display all the cookies
set on your machine.
JAVASCRIPT AND COOKIES
 Setting Cookies Expiry Date
 You can extend the life of a cookie beyond the current
browser session by setting an expiration date and saving
the expiry date within the cookie. This can be done by
setting the ‘expires’ attribute to a date and time.
 Example
 Try the following example. It illustrates how to extend the
expiry date of a cookie by 1 Month.
JAVASCRIPT AND COOKIES
JAVASCRIPT AND COOKIES
JAVASCRIPT AND COOKIES
 Deleting a Cookie
 Sometimes you will want to delete a cookie so that
subsequent attempts to read the cookie return nothing.
To do this, you just need to set the expiry date to a time
in the past.
 Example
 Try the following example. It illustrates how to delete a
cookie by setting its expiry date to one month behind the
current date.
JAVASCRIPT AND COOKIES
JAVASCRIPT AND COOKIES