Unit 4 Cookies and Browser Data (08 Marks)Cookies * Cookies are the name given to the small text files your browser stores on your computer, which contain information relevant to the sites you have visited in the past. * Using JavaScript you can write to these text files and then extract data from them whenever your reader returns to your site. * Cookies are small pieces of text sent to your browser by a website you visit. They help that website remember information about your visit, which can both make it easier to visit the site again and make the site more useful to you. ‘Scanned with CamScanneeCookies Cont.. Cookies remembers the information about the user in the following ways * Step 1: when the user visit the webpage his/her is name can be stored in a cookie. * Step 2: to next time when the user visit the same page, the cookie remembers his/her name. Cookies are saved in a name-value pair, * for example- username = AAABBB * Cookies is a small text field which contain following data 1. Aname-value pair which stores whatever data you want to save. 2. An expiry date, after which time the entry will be deleted. 3. The web domain and path that the entry should be associated with. ‘Scanned with CamScanneeCookies Cont.. * There are two types of cookies: 1. session cookies 2. persistent cookies 1. Session cookies: session cookies are a cookie that remains in a temporary memory only while user is reading and navigating the website. The cookies are automatically deleted when the user exits the browser application. 2. Persistent cookies: A persistent cookies is a cookie that is assigned an expiration date. A persistent cookie is return to the computer's hard disk and remains there until the expiration date has been reached; then it is deleted. * JavaScript can create, read and delete a cookie using document. cookie property. ‘Scanned with CamScanneeCookies Cont.. Creating Cookies * With JavaScript, a cookie can be created like this: document. cookie = "username=John"; Thus the name value pair separated by ‘=’ sign and terminated by a delimiter like semicolon (;) You can also add an expiry date (in UTC time). * By default, the cookie is deleted when the browser is closed: document. cookie = "username=John; expires=Thu, 18 Dec 2013 [Link] UTC"; * With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page. ¢ document. cookie = "username=John; expires=Thu, 18 Dec 2013 [Link] UTC; path=/"; ‘Scanned with CamScanneeJavaScript Program to display cookie Show cookies ‘Scanned with CamScanneeJavaScript Program to set and get cookie ‘Scanned with CamScanneeCookies Cont.. Reading a cookie value 2. 3. Reading a cookie is as simple as writing one because of the value of the [Link] object is the cookie. You can use this string whenever you want to access the cookie. The [Link] string keeps a list of name=value pairs separated by semicolons, where name represents the cookie name and value is its string value. Using split() function the string of cookies break into key and values. . The split() method finds the = character in the cookie, and then takes all the character to left of the = and store them into an array array[0]. . Next split() method takes all the characters from right of the = up to; but not including the semicolon, and assign those characters to JavaScript Cookies can be read in the following way: var x = [Link]; ‘Scanned with CamScanneeJavaScript Program to read cookie

click the Button to View Result:

‘Scanned with CamScannerCookies Cont.. + Deleting Cookies 3 Different ways to delete a Cookie These are the following ways to delete a cookie: 1. A cookie can be deleted by using expire attribute. 2. Acookie can also be deleted by using max-age attribute. 3. We can delete a cookie explicitly, by using a web browser. ‘Scanned with CamScanneeJavaScript Program to delete a cookie by providing expiry date (i.e. any past date) ‘Scanned with CamScannerJavaScript Program use max-age attribute to delete a cookie by providing zero or negative number (that represents seconds) to it. ‘Scanned with CamScannerJavaScript Program to set and get cookies. ‘Scanned with CamScannerCookies Cont.. * Deleting Cookies To delete a cookie explicitly, follow the following steps: 1. Open Mozilla Firefox. 2. Click Open menu - Library - History - Clear Recent History - Details. ‘Scanned with CamScanneeCookies Cont.. + Deleting Cookies Clear Recent History Time range to clear: Last hour History GZ Browsing & download history Cookies ©& active togins Gi cache GZ Eorm & search history Data Site settings Offline website data = ‘Scanned with CamScannerCookies Cont.. * Setting Expiration Date of Cookies * This can be done by setting the ‘expires’ attribute to a date and time. we need three important built in function 1. getMonth()- this method returns the current month based on the system clock of the computer running the JavaScript. 2. setMonth()- this method assigns the month to Date [Link](0) 3. toGMTString()- this method returns the value of the Date variable to a string that is in the format of time. Which is then assigned to the cookie. ‘Scanned with CamScanneeJavaScript Program to display cookies by getMonth.

getMonth() returns the month (from 0 to 11) of a date:

Note: O=January, 1=February etc.

‘Scanned with CamScannerJavaScript Program to display cookies by setMonth. ‘Scanned with CamScannerJavaScript Program to display cookies by toGMTString Method. ‘Scanned with CamScannerJavaScript Program to display cookies by setcookie Method.

Enter name:

‘Scanned with CamScannerBrowser ‘Scanned with CamScannerBrowser ¢ It is possible to open a new browser window from a currently running JavaScript. * One can determine the size, location of this window, toolbar, scroll bar or any other style that normally the browser windows have. * Once the new browser window is set up, it is also possible to change the contents within that window dynamically. ‘Scanned with CamScanneeOpening a Window * It is possible to open a new window from a JavaScript by simply clicking a button. + For that purpose the window object is used. This window object has various useful properties and methods. * To open a new window we use open() method of window object. ‘Scanned with CamScanneeOpening a Window Cont.. + Syntax The syntax of using open() method is [Link](URL, name. style) Where, URL: The URL specifies the URL of the web page that will appear in new window. This is an optional parameter. name: The name that could be assigned to a window. This is an optional parameter style: The style of the window includes various parameters such as toolbar, scrollbar, location, height and width of window and so on ‘Scanned with CamScanneeOpening a Window Cont.. Sr.N | Parameters Description ° 1 | channelmode=yes|no|1|0 Whether or not to display the window in theater mode. Default is no. IE only 2 oF : directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE only 3 fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is no. 4 =pixels a The height of the window. Min. value is 100 EI left=pixels The left position of the window. Negative values not allowed 6 location=yes|no|1|0 Whether or not to display the address field. Opera only ‘Scanned with CamScanneeOpening a Window Cont.. [Link] | Parameters Description a menubar=yesjno|1|0 Whether or not to display the menu bar 8 resizable=yes|no|1|0 Whether or not the window is resizable. JE onl: 9) 4 scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera onl: 10 status=yes|no|1|0 Whether or not to add a status bar 1 titlebar=yes|no|1\0 Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box. 12 toolbar=yes|no|1\0 Whether or not to display the browser toolbar. IE and Firefox only 13 top=pixels The top position of the window. Negative values not allowed ‘Scanned with CamScanneeOpening a Window Cont.. Sr. No | Parameters Description 13 ae z 5 top=pixels The top position of the window. Negative values not allowed 14 width=pixels. The width of the window. Min. value is 100 + Return value Anewly created window gets opened up on success and null on failure. ‘Scanned with CamScannerLayout and part of Window © Googie Moz Fefox Tie Git fen Hatoy dockmens Took Dep S Goede x |# Titie par Menu Bar Havigation : Toolbar Location Har Scrotiar status bar ‘Scanned with CamScannerJavaScript Program to OPEN NEW blank Window

Click the button to open an about:blank page in a new browser window that is 200px wide and 100px tall.

Try it ‘Scanned with CamScannerJavaScript Program to OPEN NEW Window with website

Click the button to open a new browser window.

Try it ‘Scanned with CamScannerNew Window Focus + A focus to a new window can be giving using focus() method. ‘Scanned with CamScanneeJavaScript Program to set new window focus using Focus method

Click the button to open a new window, and assure that the new window GETS focus (send the new window to the front).

Try it ‘Scanned with CamScannerWindow Position + We can set the desired position for the window. * Using the left and top attribute values the window position can be set. * style attribute as left=0, top=0 in open method, the window is created and positioned at the extreme left and top location screen ‘Scanned with CamScanneeJavaScript Program to set new window position

Click the button to open a new window with some specifications.

Open Window ‘Scanned with CamScannerChanging Window Content ¢ By writing some text to the newly created window we can change the contents of a window ‘Scanned with CamScanneeJavaScript Program to change the content of window Open Window ‘Scanned with CamScannerClose Window * The most simple operation about the window is to close it. It can be close using the function close(). ‘Scanned with CamScanneeJavaScript Program to close the window Open "myWindow" Close "myWindow" ‘Scanned with CamScannerScrolling Web Page + We can scroll horizontally or vertically using scrollTo() function. + Second Program see on page no.21 ‘Scanned with CamScanneeJavaScript Program to Scroll the Web Page.

Click the button to scroll the document window to 500 pixels horizontally.

Click me to scroll horizontally!

‘Scanned with CamScannerMultiple Windows at Once * It is possible to open up multiple windows at a time. Simply put open() method multiple time ‘Scanned with CamScanneeJavaScript Program to open Multiple Windows at Once.

Click the button to open multiple tabs.

Open Windows Open Windows Open Windows ‘Scanned with CamScannerCreating Web Page in New Window We can create a web page using the window object with the help of write method. * The only thing is that inside the write we have to write the contents of the web page with the help of html element such as , , "); [Link](""); [Link](""); [Link]("

This is new Web Page

"); [Link]("

Wel Come User

"); [Link](""); [Link](""); }

‘Scanned with CamScannerJava Script in URLs The JavaScript code can be included in client side. ¢ JavaScript can be specified in URL using the pseudo-protocol specifier. * This special protocol type specifies that the body of the URL is arbitrary JavaScript code to be interpreted by the JavaScript interpreter. For example we can type following code in URL bar This will show a pop up window of alert box. If the JavaScript code in a JavaScript: URL contains multiple statements then these statements must be separated by semicolons. For example — But for the security reasons modem web browsers are not allowing to execute’ JavaScript:" code in URL. ‘Scanned with CamScanneeJavaScript Security Javascript has several security issues that need widespread attention. One of the most common JavaScript security vulnerabilities is Cross-Site Scripting (XSS). Cross-Site Scripting vulnerabilities enable attackers to manipulate websites to return malicious scripts to visitors. This vulnerability may cause the user data theft, account tampering and so on. JavaScript vulnerabilities can be both client-side problems and _ server- side as well as hackers are able to steal server-side data and infect the users with malware. Therefore, server-side JavaScript injection is also a much more dangerous problem in an application. + Cross-Site Request Forgery (CSRF) attack is another issue in Javascript Cross-Site Request Forgery involves taking over or impersonating a user's browser session by hiiacking the session cookie. ‘Scanned with CamScanneeTimer Using window object it is possible to execute the code at specified time intervals. Two functions are supported by window object for handling timing events and those are — 1. setTimeout 2. setinterval (1) setTimeout () This method executes function after waiting for a specified number of milliseconds. Syntax [Link](function, milliseconds): function- function to be executed milliseconds- no of milliseconds before execution take place The function is only executed once ‘Scanned with CamScannerJavaScript Program to execute timer with setTimeout Method ‘Scanned with CamScannerTimer Cont.. [Link] setInterval() method calls a function or evaluates an expression at specified intervals(in milliseconds). ‘Scanned with CamScanneeJavaScript Program to execute timer with setInterval Method ‘Scanned with CamScannerBrowser location and history (1) Location The location object contains information about the current URL. The location object is part of the window object and is accessed through the window. location property. ‘Scanned with CamScanneeBrowser location and history Cont.. Location Object Properties Sr. [Property Description No 1 hash Sets or returns the anchor part (#) of a URL 2 host Sets or returns the hostname and port number of a URL 8 hostname | Sets or returns the hostname of a URL 4 href Sets or returns the entire URL 5 origin Returns the protocol, hostname and port number of a URL 6 pathname Sets or returns the path name of a URL 7 | port Sets or returns the port number of a URL ‘Scanned with CamScanneeBrowser location and history Cont.. Location Object Properties [Link] |Property Description protocol Sets or returns the protocol of a URL 9 search Sets or returns the query string part of a URL ‘Scanned with CamScanneeBrowser location and history Cont.. Location Object Methods [Link] Methods Description 1 assign Loads a new document 2 reload Reloads the current document 3 teplace() Replaces the current document with a new one 4 assign Loads a new document ‘Scanned with CamScanneeJavaScript Program to display the path name of the web page using [Link] object

‘Scanned with CamScannerJavaScript Program to display the protocol name of the web page using [Link] object

‘Scanned with CamScannerJavaScript Program to display the URL of current web page using [Link] object

‘Scanned with CamScannerJavaScript Program to display the Host name of web page using [Link] object

‘Scanned with CamScannerJavaScript Program to display the Host name of web page using [Link] object

‘Scanned with CamScannerJavaScript Program to load web page document using [Link] object ‘Scanned with CamScannerWindow History The window. history object contains the browsers history. There are two methods: [Link]() This method load the previous URL in history list. Same as clicking back in the browser [Link]() This method loads the next URL in the history. Same as clicking forward in the browser [Link]() method loads the previous URL in the history list. This is the same as clicking the Back button in the browser. ‘Scanned with CamScanneeJavaScript Program to load previous URL of the current web page using [Link]() method ‘Scanned with CamScannerWindow History Cont.. [Link]() method loads the next URL in the history list. This is the same as clicking the Forward button in the browser. ‘Scanned with CamScanneeJavaScript Program to load next URL of the current web page using [Link]() method ‘Scanned with CamScannerIK YOU?!