Skip to content

Commit 9ee9fe6

Browse files
hannabeasiamhannabeasiam
committed
lesson11 js cookies added
1 parent f352d5f commit 9ee9fe6

8 files changed

Lines changed: 285 additions & 0 deletions

File tree

‎lesson11/browserDetection.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Browser Detection</title>
6+
<script type="text/javascript">
7+
//by checking this, existance of property, we can determine which browser is used
8+
//indexOf is string method to check if existance of sequence of character in a string
9+
var mactest = (navigator.userAgent.indexOf('Mac')!=-1); //!= -1 means if string can not found
10+
var isChrome = (navigator.userAgent.toLowerCase().indexOf('chrome') != -1);
11+
var isNetscape = (navigator.appName.indexOf('Netscape') != -1);
12+
var isSafari = (navigator.userAgent.indexOf('Safari') != -1);
13+
//opera browser is little bit differant
14+
var isOpera = 0;
15+
if (window.opera) {isOpera=1};
16+
var isIE = 0;
17+
if (document.all) {isIE=1}; //document.all property is only exist in Internet Explore browser so we can check with this
18+
</script>
19+
</head>
20+
<body>
21+
<h2>CIW JavaScript Specialist</h2>
22+
<h3>Browser Detection</h3>
23+
<script type="text/javascript">
24+
document.write(
25+
'mactest: '+mactest +
26+
'<br/>isChrome: ' + isChrome +
27+
'<br/>isNetscape: ' + isNetscape +
28+
'<br/>isSafari: ' + isSafari +
29+
'<br/>isOpera: ' + isOpera +
30+
'<br/>isIE: ' + isIE +
31+
'<br/>userAgent: ' + navigator.userAgent+
32+
'<br/>appName: ' + navigator.appName
33+
);
34+
35+
/*result with firefox browser
36+
mactest: false
37+
isChrome: false
38+
isNetscape: true
39+
isSafari: false
40+
isOpera: 0
41+
isIE: 0
42+
userAgent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
43+
appName: Netscape
44+
45+
result with chrome browswer can not determin accuratly so, use feature detection is more efficient
46+
mactest: false
47+
isChrome: true
48+
isNetscape: true
49+
isSafari: true
50+
isOpera: 0
51+
isIE: 0
52+
userAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
53+
appName: Netscape
54+
55+
*/
56+
</script>
57+
</body>
58+
</html>

‎lesson11/cookies.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Cookies</title>
6+
<script type="text/javascript">
7+
//to test cookie in browser firefox is recomemded
8+
var currentDate = new Date();
9+
//as long as expire date is past, cookie will deleted
10+
//assign year past to store paste date
11+
var expireDatePast = new Date(currentDate.getFullYear()-1,currentDate.getMonth(),currentDate.getDate());
12+
</script>
13+
</head>
14+
<body>
15+
<h2>CIW JavaScript Specialist</h2>
16+
<h3>Cookies</h3>
17+
<script type="text/javascript">
18+
//store by browser, page remember info one page to another
19+
//cookie property .
20+
var cookiesContent = 'Start: ' + document.cookie + '<br/>';
21+
document.cookie = 'Author=Hanna'; //to set cookie assign name and value pair name = Author value = Hanna
22+
//variable cookiesContent is to display cookie info later with document.write
23+
cookiesContent += 'After setting Author: ' + document.cookie + '<br/>';
24+
//define another cookie assign another name and value pair
25+
document.cookie = 'College=Broward';
26+
cookiesContent += 'After setting College: ' + document.cookie + '<br/>';
27+
//to delete cookie, specify name and assign no value; and expires keyword with expiredate inthe past
28+
document.cookie = 'Author=;expires=' + expireDatePast;
29+
cookiesContent += 'After deleting Author: ' + document.cookie + '<br/>';
30+
document.cookie = 'College=;expires='+expireDatePast;
31+
cookiesContent += 'After deleting College: ' + document.cookie;
32+
document.write(cookiesContent);
33+
</script>
34+
</body>
35+
</html>

‎lesson11/cookies.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
//cookie name is matched with input tag id
2+
var cookieName = 'clientname';
3+
4+
var currentDate = new Date();
5+
function getNameCookie() {
6+
var cookieReturn = '';
7+
var allCookies = document.cookie;
8+
var cookieArray = allCookies.split(';'); //if there is multiple cookie, saperate by ;
9+
for (var i = 0; i < cookieArray.length; i++) {
10+
var theCookie = cookieArray[i];
11+
//if there is any space beteween cookie, remove that space
12+
while (theCookie.charAt(0) == ' ') theCookie = theCookie.substring(1,theCookie.length);
13+
if (theCookie.indexOf(cookieName + '=') == 0) { //if there is any equal sign, assign as 0 means starting
14+
cookieReturn = theCookie.substring(cookieName.length + 1, theCookie.length);
15+
}
16+
}
17+
return cookieReturn;
18+
}
19+
function setNameCookie() {
20+
var expireDate = new Date(currentDate.getFullYear() + 1, currentDate.getMonth(), currentDate.getDate());
21+
var cookieValue = document.getElementById(cookieName).value;
22+
var setCookie = cookieName + '=' + cookieValue;
23+
setCookie += ';expires=' + expireDate.toUTCString();
24+
alert('Set to: ' + setCookie);
25+
document.cookie = setCookie;
26+
}
27+
28+
function deleteNameCookie() {
29+
var expireDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate());
30+
var setCookie = cookieName + '=';
31+
setCookie += ';expires=' + expireDate.toUTCString();
32+
alert('Set to: ' + setCookie);
33+
document.cookie = setCookie;
34+
}
35+
36+
function setAuthorCookie() {
37+
var expireDate = new Date(currentDate.getFullYear()+1, currentDate.getMonth(), currentDate.getDate());
38+
var setCookie = 'Author=George Cooke';
39+
setCookie += ';expires=' + expireDate.toUTCString();
40+
alert('Set to: '+setCookie);
41+
document.cookie = setCookie;
42+
};
43+
function deleteAuthorCookie() {
44+
var expireDate = new Date(currentDate.getFullYear()-1, currentDate.getMonth(), currentDate.getDate());
45+
var setCookie = 'Author=';
46+
setCookie += ';expires=' + expireDate.toUTCString();
47+
alert('Delete: ' + setCookie);
48+
document.cookie = setCookie;
49+
};

‎lesson11/encoding.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Encoding Input/Output</title>
6+
<script type="text/javascript">
7+
var theMessage = prompt('Enter code to be encoded',
8+
'<table border="1"><tr><td>Jello</td></tr></table>');
9+
var encodedMessage = encodeURIComponent(theMessage);
10+
</script>
11+
</head>
12+
<body>
13+
<h2>CIW JavaScript Specialist</h2>
14+
<h3>Encoding Input/Output</h3>
15+
<hr/>
16+
<script type="text/javascript">
17+
document.write(' Original: ' + theMessage + '<br/>');
18+
document.write('URI Encoded: ' + encodedMessage + '<br/>');
19+
document.write('URI Decoded: ' + decodeURIComponent(encodedMessage) + '<br/>');
20+
</script>
21+
</body>
22+
</html>

‎lesson11/mimeTypes.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Mime Types</title>
6+
<script type="text/javascript">
7+
var theMimeTypes = '';
8+
/*MIME TYPE:
9+
which provide file name extensions to help encode and decode data for e-mail transmission*/
10+
//check if any mimetype defined in browser, if any defined describe in table
11+
if (navigator.mimeTypes != null) {
12+
theMimeTypes += '<table border="1">';
13+
theMimeTypes += '<tr>';
14+
theMimeTypes += '<th>Type</th>';
15+
theMimeTypes += '<th>Description</th>';
16+
theMimeTypes += '<th>Suffixes</th>';
17+
theMimeTypes += '<th>Name</th>';
18+
theMimeTypes += '</tr>';
19+
for (var i = 0; i < navigator.mimeTypes.length; i++) {
20+
theMimeTypes += '<tr>';
21+
theMimeTypes += '<td>' + navigator.mimeTypes[i].type + '</td>';
22+
theMimeTypes += '<td>' + navigator.mimeTypes[i].description + '</td>';
23+
theMimeTypes += '<td>' + navigator.mimeTypes[i].suffixes + '</td>';
24+
theMimeTypes += '<td>' + navigator.mimeTypes[i].enabledPlugin.name + '</td>';
25+
theMimeTypes += '</tr>';
26+
}
27+
theMimeTypes += '</table>';
28+
} else {
29+
theMimeTypes += 'This browser does not recognize the navigator.mimeTypes property.';
30+
}
31+
</script>
32+
</head>
33+
<body>
34+
<h2>CIW JavaScript Specialist</h2>
35+
<h3>Mime Types</h3>
36+
<script type="text/javascript">
37+
document.write(theMimeTypes);
38+
</script>
39+
</body>
40+
</html>

‎lesson11/plugIns.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Plugins</title>
6+
<script type="text/javascript">
7+
var thePlugins = '';
8+
if (navigator.plugins != null) {
9+
thePlugins += '<table border="1">';
10+
thePlugins += '<tr>';
11+
thePlugins += '<th>Name</th>';
12+
thePlugins += '<th>Description</th>';
13+
thePlugins += '<th>Filename</th>';
14+
thePlugins += '</tr>';
15+
for (var i = 0; i < navigator.plugins.length; i++) {
16+
thePlugins += '<tr>';
17+
thePlugins += '<td>' + navigator.plugins[i].name+'</td>';
18+
thePlugins += '<td>' + navigator.plugins[i].description+'</td>';
19+
thePlugins += '<td>' + navigator.plugins[i].filename+'</td>';
20+
thePlugins += '</tr>';
21+
}
22+
thePlugins += '</table>';
23+
} else {
24+
thePlugins += 'This browser does not recognize the navigator.plugins property.';
25+
}
26+
</script>
27+
</head>
28+
<body>
29+
<h2>CIW JavaScript Specialist</h2>
30+
<h3>Plugins</h3>
31+
<script type="text/javascript">
32+
document.write(thePlugins);
33+
</script>
34+
</body>
35+
</html>

‎lesson11/poorJavascript.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Poorly written JavaScript</title>
6+
<script type="text/javascript">
7+
for (var i = 0; i <= 5; i--) { //logic error, never can stop.
8+
document.write(i + ': Stop me if you can!<br/>');
9+
}
10+
</script>
11+
</head>
12+
<body>
13+
<h2>CIW JavaScript Specialist</h2>
14+
<h3>Poorly written JavaScript</h3>
15+
<hr/>
16+
This page demonstrates poorly written code that
17+
locks the browser.
18+
</body>
19+
</html>

‎lesson11/setDeleteCookie.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Set/Delete Cookies</title>
6+
<script type="text/javascript" src="cookies.js"></script>
7+
</head>
8+
<body>
9+
<h2>CIW JavaScript Specialist</h2>
10+
<h3>Set/Delete Cookies</h3>
11+
<form>
12+
Name: <input id="clientname" value="">
13+
<script type="text/javascript">
14+
var currentName = getNameCookie();
15+
if (currentName.length > 0) {
16+
document.getElementById(cookieName).value = currentName;
17+
};
18+
</script>
19+
<br/>
20+
<input type="button" value="Set Cookie" onClick="setNameCookie()">
21+
<input type="button" value="Delete Cookie" onClick="deleteNameCookie()">
22+
<input type="button" value="Set Author Cookie" onClick="setAuthorCookie()">
23+
<input type="button" value="Delete Author Cookie" onClick="deleteAuthorCookie()">
24+
<input type="button" value="See Cookies" onClick="alert('Cookies: '+document.cookie)">
25+
</form>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)