Scribd
Upload
120 views

Css Unit-4 Notes

Uploaded by

ooo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
120 views

Css Unit-4 Notes

Uploaded by

ooo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Client-Side Scripting-CSS –UNIT:4 Mrs. S.S.

Kadam

Unit 04 - Cookies and Browser Data

4.1 Cookies

A cookie is a small amount of named data stored by the web browser and associated with a
particular web page or web site. Cookies are used to store information as well as access information.
Cookie is a small text file stored in the subfolder of the browsers installation folder. It contains following
data: name-value pair, expiry date for that cookie.

There are two types of cookies namely, session cookies (non-persistent) and persistent cookies
 Session cookies are created temporarily in your browser’s subfolder while you are visiting a
website. Once you leave the site, the session cookie is deleted.
 Persistent cookie files remain in your browser’s subfolder and are activated again once you visit
the created the particular cookie. A persistent cookie remains in the browser’s subfolder for the
duration period set within the cookie’s file.

4.1.1 Writing/Creating a Cookie


JavaScript can create cookies with the document.cookie property
Document.cookie = “username=Meenakshi”;

Program: Creating Cookie


<html>
<script>
function disp()
{
document.cookie="username=sampada";
alert('created cookie....');
}
</script>
<body>
<form>
<input type="button" name="b1" value=" create Cookies" onclick="disp()">
</form>
</body>
</html>

1
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

4.1.2 Reading a Cookie


We can then use document.cookie whenever we want to access the cookie. With
JavaScript, cookies can be read like this: var x = document.cookie;

Program :Read Cookies

<html>
<script>
function disp()
{
document.cookie="username=sampada";
alert('created cookie....');
}
function read()
{
alert(document.cookie);
}
</script>
<body>
<form>
<input type="button" name="b1" value=" create Cookies" onclick="disp()">
<input type="button" name="b2" value="Read Cookies" onclick="read()">
</form>
</body>
</html>
4.1.3 Deleting a Cookie
Deleting a cookie is very simple, just set the expires parameter to a passed date:
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

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.

2
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

<html>
<script>
function disp()
{
document.cookie="username=sampada; expires=Thu, 18 Dec 2021 12:00:00 UTC; ";
alert('cookie....Created');
}
</script>

<body>
<form>
<input type="button" name="b1" value="Cookies" onclick="disp()">
</form>
</body>
</html>

4.1.5 Setting the expiration Date of Cookie

The expiration date is typically an increment of the current date. JavaScript can create, read,
and delete cookie with the document.cookie property.

document.cookie=”username=Meenakshi; expires=Thu, 18 Dec 2020 12:00:00 GMT”

4.2 Browser
 The window object represents a window in browser.
 An object of window is created automatically by the browser.
 It is used to control the browser window lifecycle and perform various operations on it.
 Whenever you open a new window or tab, a window object representing that window/tab
is automatically created.
 Window is the object of browser, it is not the object of javascript

4.2.1 Opening a Window


open() function –
 It is used to open a new window from current window.
 It is invoked on window object
Syntax: window.open(url, name, style);
url: URL of the new page going to be open in new Window.

3
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

name: to set the name of the window (optional).


style: such as scrollbar, toolbar, height, width, location, etc. (optional).

Style Parameter:
toolbar= yes|no|1|0 To display the browser toolbar

status= yes|no|1|0 To add a status bar

titlebar= yes|no|1|0 To display the title bar

menubar= yes|no|1|0 To display the menubar

fullscreen=yes|no|1|0 To display the browser in full screen mode

resizable=yes|no|1|0 To determine whether the window is resizable

scrollbars= yes|no|1|0 To display scroll bars

height=pixels The height of window minimum value is 100

width=pixels The width of the window

left=pixels The left position of the window

top=pixels Top position of window

Program: Open a New Window


<html>
<script>
function openwin()
{
window.open("http://www.google.com","","left=100,top=100,width=200,height=100");
}
</script>
<body>
<form name="frm1">
<input type = "button" value = "Open" onclick = "openwin()">
</form>
</body>
</html>

4
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

4.2.2 focus() function


It is used to focus on the new open window
Syntax: - window.focus();

Program: Changing Focus of Window

<html>
<script>
function disp()
{
var myWin1=window.open("http://www.google.com","GPage","height=200,width=100");
var myWin2=window.open("http://www.yahoo.com","yPage","height=200,width=100");
myWin1.focus();
}
</script>
<body>
<form>
<input type="button" name="b1" value="Open" onclick="disp()">
</form>
</body>
</html>

4.2.3 Window position


can set the specified position to the new window.
The attributes left and top are used to specify the position of the new window.
window.open("","“,”left=0, top=0, width=200,height=100”);

Program: Setting the position of new Window

5
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

<html>
<head>
<script>
function openwin()
{
window.open("","",”left=100, top=100, width=200,height=100”);
}
</script>
</head>
<body>
<form name="frm1">
<input type = "button" value = "Open" onclick = "openwin()">
</form>
</body>
</html>

4.2.4 Changing the content of window


 We can change the content of newly opened window.
 Example- you want the window to display a product each time a customer selects the item
on your web page.
 The secret to changing the content of a window is to call the open() method using the same
window name each time you change the content of the window.

Program: Changing Content of Newly opened Window (Image)

<html>
<script>
function openwin(ad)
{
var MyWin=window.open(ad,"w1","width=200,height=100");

}
</script>
<body>
6
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

<form name="frm1">
<input type = "button" value = "Samsung Galaxy M31" onclick = "openwin('M31.jpg')">
<input type = "button" value = "Apple iPhone 7" onclick = "openwin('iPhone.jpg')">
<input type = "button" value = "Mi" onclick = "openwin('Desert.jpg')">
</form>
</body>
</html>

Program : Changing Content of Newly opened Window(URL)


<html>
<script>
function openwin(ad)
{
var MyWin=window.open(ad,"w1","width=200,height=100");
}
</script>
<body>
<form name="frm1">
<input type = "button" value = "Gmail" onclick = "openwin('http://www.gmail.com')">
<input type = "button" value = "Yahoo" onclick = "openwin('http://www.yahoo.com')">
<input type = "button" value = "Facebook" onclick =
"openwin('http://www.facebook.com')">
</form>
</body>
</html>

4.2.5 Closing the window


 Is used to close any window.
 the open() method returns a reference to the newly opened window, which is a window
object. You use the reference to call the close() method.
Syntax: window.close();
 Note: A current window/tab will only get closed if and only if it was created &
opened by that script. Means the window.close syntax is only allowed for the
window/tab that is created & opened using window.open method.

Program: Closing a Window


<html>
<script>
var MyWin;
function openwin()
{
7
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

MyWin=window.open("","w1","width=200,height=100");
}
function closewin()
{
MyWin.close();

}
</script>
<body>
<form name="frm1">
<input type = "button" value = "Open" onclick = "openwin()">
<input type = "button" value = "Close" onclick = "closewin()">
</form>
</body>
</html>

4.2.6 scrollTo() and scrollBy()


4.2.6.1 scrollTo() –
 scrollTo() is used to scroll to a particular set of coordinates in the document.
 It scrolls to the document to the specified coordinates.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord – The coordinate to scroll to, along the x-axis (horizontal) in pixels
y-coord- The coordinate to scroll to, along the Y-axis (vertical) in pixels

Program: scrollTo()
<html>
<head>
<style>
body {
width: 5000px;
}
</style>
<script>
function STo() {
window.scrollTo(300, 500);
}
</script>
</head>
<body>
<form>
<input type="button" value="ScrollTo" onclick="STo()">
</form>

8
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
9
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

4.2.6.2 scrollBy()
 It is used to scroll the document by given number of pixels.
Syntax: window.scrollBy( xcoordinate, ycoordinate );
x-coordinate: is the horizontal pixel value that you want to scroll by.
y-coordinate: is the vertical pixel value that you want to scroll by.

10
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program: scrollBy ( )
<html>
<head>
<style>
body {
width: 5000px;
}
</style>
<script>
function scrollWin() {
window.scrollBy(800, 0);
}
</script>

</head>
<body>
<form>
<input type="button" value="ScrollBy" onclick="scrollWin()">
</form>

</body>
</html>

4.2.7 Multiple Windows at a glance:


We can open multiple windows by using window.open( ) function multiple times. Also we can
use loop to open multiple windows. The last opened window will get the focus by default.

Program: Multiple Windows at Glance without Loop


<html>
<script>
function disp()
{
var myWin1=window.open("http://www.google.com","GPage","height=100,width=100");
var myWin2=window.open("http://www.yahoo.com","YPage","height=100,width=100");
var myWin3=window.open("http://www.facebook.com","FPage","height=100,width=100");
var myWin4=window.open("http://www.rediff.com","RPage","height=100,width=100");
}
</script>
<body>
<form>
<input type="button" name="b1" value="Open" onclick="disp()">
</form>
</body>
</html>

11
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program: Multiple Windows at glance using Loop


<html>
<script>
function disp()
{
for(var i=0;i<=7;i++)
{
window.open("","","height=100,width=100");
}
}
</script>
<body>
<form>
<input type="button" name="b1" value="Open" onclick="disp()">
</form>
</body>
</html>

4.2.8 Creating Web Page in a new Window


 Can design a newly created window using write() function
 Can pass html code as a string parameter to write()
 Syntax: - win_refence.document.write(“<htmlcode>”);
 Example: - MyWin1.document.write(“<b> Welcome</b>”);

12
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program: Creating a web page in a new window


<html>
<script>
function disp()
{
var w1=window.open(","","height=100,width=100");
w1.document.write("<html>");
w1.document.write("<head>");
w1.document.write("<title> My New Page </title></head>");
w1.document.write("<body>");
w1.document.write("<h2> This is Child Web Page</h2>");
w1.document.write("</body></html>");
}
</script>
<body>
<form>
<input type="button" name="b1" value="Open" onclick="disp()">
</form>
</body>
</html>

4.2.8 Javascripts in URLs:


Javascript code can be used with the URL by using ‘javascript’ pseudo-protocol specifier. The
pseudo-protocol specifier that the body of URL is an arbitrary javascript code. This code is going to
be interpreted by the javascript interpreter.

For example:javascript:alert(“hello world”);

If the javascript code in a javascript: URL contains multiple statements, the statements need to be
separated by semicolon.

Such a URL looks like: javascript:var now=new Date();”The time is ”+now;

13
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

When the browser “loads” these Javascript URLs, it executes the Javascript code to present in that
URL and displays the result. For security reasons the recent browsers are not allowing to execute the
javascript code in URLs.

4.2.9 Javascript Security:

There are several Javascript security issues that needs to be considered. As a javascript used in
client side, a risk is there for end users. It enables malicious users to send scripts over the web and run
them on client computers. There are two measures need to be considered. We should use scripts
separately so that the malicious users can only access certain resources and perform tasks. The second
measures is we should implement the same origin policy i.e. we must use the script from only one site,
which prevents scripts of one site from accessing data from script of other sites.

Cross-site scripting (XSS) is one of the most common javascript security vulnerability. Cross-Site
Scripting vulnerabilities allow malicious users to manipulate websites to manipulate websites to return
malicious script to the users. These malicious scripts then execute on the client web browsers. It can
be result in user data theft, account tampering, malware spreading or remote control over a user
browser.

Cross-Site Request Forgery(CSRF) is another common javascript security vulnerability. It allows


attackers to manipulate users browsers to take venerable actions on other sites. It happens due to target
sites authenticate the request based on the users cookie. Attackers are able to send requests using users
cookies. This Javascript security issue causes account tampering, data theft, fraud and more.

4.2.10 Timers
Sometimes there is a need of asynchronous code execution
Javascript provides certain in-built functions which allow us to schedule tasks to be executed
after a specific amount of time.
Example -use timers to change the advertisement banners at regular intervals, or display a real-
time clock, etc.
Two Timer functions –
setTimeout()
setInterval()

4.2.11.1 setTimeout()
 This method executes a particular function after a certain period of time.
 Syntax: - setTimeout(function, milliseconds)
14
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Function - the function to execute


Miliseconds-which is the number of milliseconds representing the amount of time to wait
before executing the function (1 second = 1000 milliseconds). By default, the value is set
to 0.
Program: setTimeout( )
<html>
<body>
<script>
function myFunction()
{
alert('Hello World!');
}
</script>
<form name="frm1">
<input type="button" name="b1" value="Click Me" onclick="setTimeout(myFunction,
2000)">
</form>
</body>
</html>

Program: setTimeout( )
<html>
<body>
<script>
function myFunction()
{
setTimeout(disp, 2000);
}
function disp()
{
alert('Hello World!');
}
</script>
<form name="frm1">
<input type="button" name="b1" value="Click Me" onclick="myFunction()">
</form>

15
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

</body>
</html>

4.2.11.2 setInterval ( )
This method repeatedly executes a particular function repeatedly at fixed time intervals.
Syntax – setInterval (function, milliseconds)
Parameters –
function-the function to execute,
Interval- which is the number of milliseconds representing the amount of time to wait
before executing the function (1 second = 1000 milliseconds)

Program: setInterval ( )
<html>
<body>
<script>
function disp()
{
alert('Hello Students!');
}
</script>
<form name="frm1">
<input type="button" name="b1" value="Click Me" onclick="setInterval(disp,5000)">
</form>
</body>
<html>

16
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program: setInterval ( )
<html>
<script>
function disp()
{
var d = new Date();
document.getElementById("p1").innerHTML = d;
}
</script>
<body>
<p id="p1"> </p>
<form name="frm1">
<input type="button" name="b1" value="Click Me" onclick="setInterval(disp,5000)">
</form>
</body>
</html>

4.2.11 Browser Location

 The location property of a window is a reference to a Location object, it represents the current
URL of the document being displayed in that window.
Syntax - window.location.propertyname
 window.location.href: It returns the URL of the current working page.
 window.location.hostname: It returns the domain name of web host.
 window.location.pathname: It returns the path and filename of the current working page.
 window.location.protocol: It returns the used protocol (http: or https:).
 window.location.port(): It prints the port number.
 window.location.host(): It prints host name along with port number.
 window.location.assign(): It loads new document.

17
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program: Browser Location


<html>
<body>
<script>
function disp()
{
document.write("Href =" + window.location.href + "<br>");
document.write("Hostname =" + window.location.hostname+ "<br>");
document.write("Pathname ="+ window.location.pathname+ "<br>");
document.write("Protocol ="+window.location.protocol+ "<br>");
document.write("Port ="+window.location.port+ "<br>");
document.write("Host ="+window.location.host+ "<br>");
}
</script>
<form name="frm1">
<input type="button" name="b1" value="Show" onclick="disp()">
</form>
</body>
</html>

Program: load new page using assign property


<html>
<body>
<script>
function pgload()
{
window.location.assign("https://www.google.com");
}
</script>
<form name="frm1">
<input type="button" name="b2" value="Google" onclick="pgload()">
</form>
</body>
</html>

18
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

4.2.13 History
 The history property of the Window object refers to the History object.
 It contains the browser session history, a list of all the pages visited in the current frame or window.
 Syntax – window.history.property/method

Property:
 Length - it is used to return the number of URLs in the list of history.
Methods:
 back() - it is used to load the previous URL in the history list.
 forward() - it is used to load the next URL in the history list.
 go() - it is used to load a specific URL from the history list.

Program: Length property


<html>
<script>
function getViews()
{
alert("You've accessed " + history.length + " web pages in this session.");
}
</script>
<body> <form name="frm1">
<input type="button" name="b1" value="Views" onclick="getViews()">
</form>
</body>
</html>

19
Client-Side Scripting-CSS –UNIT:4 Mrs. S.S. Kadam

Program:
<html>
<script>
function pgLoad()
{
window.location.assign("https://www.google.com");
}

function goBack()
{
window.history.back();
}

function goForward()
{
window.history.forward();
}

</script>
<body> <form name="frm1">
<input type="button" name="b1" value="Load" onclick="pgLoad()">
<input type="button" name="b2" value="Back" onclick="goBack()">
<input type="button" name="b2" value="Forward" onclick="goForward()">
</form>
</body>
</html>

20

You might also like