Scribd
Upload
18 views

CSS Chapter 4 (1)

Uploaded by

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

CSS Chapter 4 (1)

Uploaded by

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

Cookies & Browser

Data Unit - IV

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


1
MHSSP
Cooki
es
• The goal of a web site programmer should be to make the web site experience as
easy and pleasant for the users as possible.

• Apart from well-designed web pages with easily navigable layouts, learning about
users and using information gained about them is also very effective.

• E.g. Amazon’s, it incorporates one click purchasing system. By already knowing


the user’s purchasing details, such as credit-card number and delivery address,
you can allow the user to go from viewing a book to buying it in just one click.

• Also, based on information, such as the previous purchases and browsing


patterns of the user, it’s possible to make book suggestions.
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
2
MHSSP
Cooki
• Such personalization requires thates
information about users be stored somewhere
in between their visits to the web site.

• Accessing the user’s local file system from a web application is pretty much off
limits because of security restrictions included in browsers.

• However we can store small amounts of information in a special place on the


user’s local disk, using what is called a cookie.

• Cookie property of document object can be used to create and retrieve cookie
data from within a JavaScript code.
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
3
MHSSP
Cooki
es stores in the visitor’s computer.
• Cookies are small text files that a browser

• Cookies were invented to solve the problem "how to remember information


about the user“

• A cookie is basically a string-value pairs separated by semi-colons.


e.g. “color=red;expires=Fri, 5 Aug 2016 01:00:00 UTC;”
•a

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


4
MHSSP
Cooki
es fields:
•Cookies contains 5 variable length
• 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.

• 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
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
5
MHSSP
Cooki
•Storing Cookies: es
• A cookie can be created by assigning string-value to the document.cookie
object.

• document.cookie = "key1 = value1;key2 = value2;expires = date";

• 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.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


6
MHSSP
Cooki
•Reading Cookies: es
• A cookie value can be read by using document.cookie object.

• Document.cookie string will keep a list of name=value pairs separated by


semicolons,

• where name is the name of the cookie and value is its string value.

• You can use strings' split() function to break a string into key and values

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


7
MHSSP
Cooki
<html> es
<head> <script>
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return; }
cookievalue =
escape(document.myform.customer.value) +
";";
document.cookie = "name=" + cookievalue;
document.write ("Cookie created! <br>");
var allcook=document.cookie;
document.write("<br>"+allcook); }
</script> </head>
<body> <form name = "myform">
Enter name: <input type = "text" name =
"customer"/>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
MHSSP
8
Cooki
•Setting Cookies expiry date: es
• Life of a cookie can be extended beyond the current browser session by
setting an expiration date and saving the expiry date within the cookie.

• It can be achieved by setting ‘expires’ attribute to a date and time.

• expires=Thu, 18 Dec 2013 12:00:00 UTC

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


9
MHSSP
Cooki
<html> es
<head> <script>
function WriteCookie() {
var now = new Date();
now.setMonth( now.get
Month() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
var allcook = document.cookie;
document.write ("Cookies : " + allcook); }
</script> </head>
<body> <form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" valuePrepared
= "Set Cookie" onclick =
By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
"WriteCookie()"/>
</html> MHSSP
10
Brows
er
• The Window object represents the browser’s frame on a page or document.

• If you have a page with no frames, there will be just one window object.

• However, if you have more than one frame, there will be one window object for
each frame.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


11
MHSSP
Opening new
• The window object has Windows
an open() method, which opens up a new window.

Syntax: window.open(URL, name, specs, replace)

where:
URL: specifies the URL of the page to open. If no URL is specified, a new
window/tab with about:blank is opened.
name: specifies the target attribute or the name of the window. Following
values are supported:
_blank: URL is loaded into a new window or tab.
_parent: URL is loaded into the parent window.
_self: URL replaces the current page.
_top: URL replaces any framesets that
may be loaded. name: The name of the window.
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
12
MHSSP
Opening new
Windows
specs: A comma separated lists of items. E.g. fullscreen, height,width, left,
top, menubar, scrollbars, titlebar, toolbar.

replace: Specifies whether the URL creates a new entry or replaces the
current entry in the history list. (true/false)

• When you click same button multiple times to open a window, it will replace the
previous child window with a new window with overwritten data.(only 1 window
is visible)
• To open multiple windows from single button (keeping each child window), use
different window name for each click.(provide a rand number for window name)

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


13
MHSSP
Opening new
<html><body> Windows
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open("https://www.w3schools.com",
"_blank“,"toolbar=yes,scrollbars=yes,
resizable=yes,top=500,left=500,width=400,
height=400");}
</script>
</body></html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
14
MHSSP
New window
• focus() method sets focusfocus
to the current window.

• This method makes a request to bring the current window to the foreground.
Syntax: window.focus()

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


15
MHSSP
New window
<html> focus
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
myWindow.document.write("<p>A new window!</p>");
myWindow.focus();
}
</script>
</body>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
16
MHSSP
Window
• In addition to opening andPosition
closing windows, it’s also possible to move and resize
windows.

• moveby(x,y): moves a window a specified number of pixels.

• moveto(x,y): moves a window’s left and top edge to the specified coordinates.

• resizeby(width, height): resizes a window by the specified amount, relative to


its current size.

• resizeto(x,y): resizes a window to the specified width and height.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


17
MHSSP
Window
<html> Position
<body>
<p>Open "myWindow" and move the new window 250px relative to its current position:</p>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="moveWin()">Move "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");}
function moveWin() {
myWindow.moveBy(250, 250);
myWindow.focus();}
</script>
</body> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
</html> MHSSP
18
Window
<html> Position
<body>
<p>Open "myWindow" and move the new window to the top left corner of the screen:</p>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="moveWin()">Move "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow=window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");}
function moveWin() {
myWindow.moveTo(500, 100);
myWindow.focus();}
</script>
</body> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
</html> MHSSP
19
Window
<html> Position
<body>
<p>Open a new window, and resize the width and height to 250px:</p>
<p><b>Tip:</b> Press the "Resize window" multiple times (the window will increase 250px for each
press).</p>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow =
window.open("",
"", "width=100,
height=100");}
function resizeWin()
{ myWindow.resizeBy(250,
250); myWindow.focus();}
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
MHSSP
20
Window
<html> Position
<body>
<p>Open a new window, and resize the width and height to 500px:</p>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");}
function resizeWin() {
myWindow.resizeTo(250, 250);
myWindow.focus();}
</script>
</body>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
21
MHSSP
Changing the content of
• When an HTMLwindow
document is loaded into a web browser, it becomes a document
object.
• This object is the root node of the HTML document.

• document.write() is used to write HTML expressions or JavaScript code to a


document.

• It is often used to write some text to an output stream opened by the


document.open() method.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


22
MHSSP
Changing the content of
<html><body> window
<button onclick="myFunction()">Try it</button>
<script>
Var
a=0;
function myFunction() {
var n = “w”+a;
var myWindow =
window.open("", n,
"width=200,height=100
");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and
100px tall!</p>"); Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
MHSSP
23
Closing a
window
• close() method closes the current window.
Syntax: window.close()
<html><body>
<button onclick="openWin()">Open
w3schools.com in a new window</button>
<button onclick="closeWin()">Close the new
window (w3schools.com)</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("https://www.w3schools.com", "_blank", "width=500,
height=500");}
function closeWin() {
myWindow.close();
} Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
MHSSP
24
Scrolling a
• Following methods can bewindow
used to scroll a window.

• scrollby()

• scrollto()

• For this method to work, the visibility property of the window’s scrollbar must be
set to true.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


25
MHSSP
Scrolling a
• scrollby(): window
• It scrolls the document by the specified number of pixels.

Syntax: window.scrollby(xnum,ynum)

Where:
xnum: how many pixels to scroll by, along x-axis. +ve value will scroll
to the right, - ve value will scroll to the left.
ynum: how many pixels to scroll by, along y-axis. +ve value will
scrolldown, - ve value will scrollup.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


26
MHSSP
Scrolling a
<html>
<head>
window
<style>
body {
height: 7500px;
width: 5000px;}
button
{ position:
fixed;}
</style></
head>
<body>
<p>Click one of
the buttons
(multiple times)
to scroll the
document
window.</p>
<p>Look at
each scrollbar to
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
see the MHSSP
27
Scrolling a
• scrollto(): window
• It scrolls the document to the specified coordinates.

Syntax: window.scrollto(xpos,ypos)

Where:
xpos: The coordinate to scroll to along x-axis.
ypos: The coordinate to scroll to along y-axis.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


28
MHSSP
Scrolling a
<html><head><style> window
body {
width: 5000px;}
</style></
head><body>
<button
onclick="scrollWin()"
>Click me to
scroll</button>
<br><br><p>SCROLL
SCROLL SCROLL
SCROLL SCROLL
SCROLL SCROLL
SCROLL</p>
<br><p>SCROLL
SCROLL SCROLL
SCROLL SCROLL Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
29
SCROLL SCROLL MHSSP
Time
rs
• There are two types of Timers in JavaScript:
• One-shot Timer
• Regular Interval Timer

• One-shot timer triggers just once after a certain period of time and second type
of timer continually triggers at set of intervals.

• Common uses for timers include advertisement banner pictures that change at
regular intervals or display the changing time in a web page.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


30
MHSSP
Time
• One-shot Timer: rs
• It can be created using setTimeout() method of window object.

Syntax: window.setTimeout(function,milliseconds);
Where:
function: it is a function you want to execute.
millisecond: millisecond delay until the code is executed.

• Method returns the timer’s unique ID, an integer value. It can be


used to stop
the timer firing .
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
31
MHSSP
Time
<html> rs
<head>
</head>
<body onload="window_onload()">
<script>
var timerID;
function window_onload()
{
setTimeout(func,3000); }
function func()
{
alert("hello");}
</script></body>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
32
MHSSP
Time
• One-shot Timer: rs
• clearTimeout() method is used to stop the execution of the function specified
in setTimeout().

Syntax: window.clearTimeout(timeoutVariable)
where:
timeoutVariable: it is the variable returned
from setTimeout() method.
• E.g. myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


33
MHSSP
Time
• Regular Interval Timer: rs
• setInterval() method is used to repeat a given function at every given time-
interval.

Syntax: window.setInterval(function,milliseconds);
Where:
function: it is a function you want to execute.
millisecond: millisecond delay until the code is executed.

• Method returns the timer’s unique ID, an integer value. It can be


used to stop
the timer firing . Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
34
MHSSP
Time
<html> rs
<head>
</head>
<body onload="window_onload()">
<script>
var timerID;
function window_onload()
{
setInterval(func,3000); }
function func()
{
alert("hello"); }
</script></body>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
35
MHSSP
Time
• Regular Interval Timer: rs
• clearInterval() method is used to stop the execution of the function specified
in setTimeout().

Syntax: window.clearInterval(timerVariable)
where:
timerVariable: it is the variable returned
from setTimeout() method.
• E.g. myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


36
MHSSP
Browser
• The HTML Geolocation APILocation
is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user
approves it.

• getCurrentPosition() method is used to get user’s current location.

• It returns the latitude and longitude of the user’s current location.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


37
MHSSP
Browser
<html> Location
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<script>
function getLocation() {
if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(showPosition
);
} else { document.write("Geolocation is not supported by
this browser.");
}}
function showPosition(position)
{ document.write("Latitude: " +Prepared
position.coords.latitude
By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
38
+ MHSSP
Browser
Location
• watchPosition(): Returns the current position of the user and continues to return
updated position as user moves.

• clearWatch(): Stops the watchPosition() method.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


39
MHSSP
Browser
• The History object contains History
the URLs visited by the user (within a browser
window).

• The history object is part of the window object and is accessed through the
window.history property.

• Property:
 Length: Returns the number of URLs in the history list.
It returns atleast 1, because the list includes the currently loaded page.
Maximum length is 50.
This property is read-only.
Syntax: history.length
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
40
MHSSP
Browser
• Methods:
History
 back(): Loads the previous URL in the history list.
It is same as clicking the back button in a browser.
Syntax: history.back();

forward(): Loads the next URL in the history list.


It is same as clicking the forward button in a browser.
Syntax: history.forward();

go(): Loads a specific URL from the history list.


Syntax: history.go(number/URL);
The parameter can either be a number which goes to the URL within the specific
position (-1 goes back one page, 1 goes forward one page), or a string. The function will
go to the first URL that matches the string.
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
41
MHSSP

You might also like