Skip to content

lesson11 js cookies added #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hannabeasiam merged 1 commit into from
Feb 27, 2018
Merged

lesson11 js cookies added #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions lesson11/browserDetection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Browser Detection</title>
<script type="text/javascript">
//by checking this, existance of property, we can determine which browser is used
//indexOf is string method to check if existance of sequence of character in a string
var mactest = (navigator.userAgent.indexOf('Mac')!=-1); //!= -1 means if string can not found
var isChrome = (navigator.userAgent.toLowerCase().indexOf('chrome') != -1);
var isNetscape = (navigator.appName.indexOf('Netscape') != -1);
var isSafari = (navigator.userAgent.indexOf('Safari') != -1);
//opera browser is little bit differant
var isOpera = 0;
if (window.opera) {isOpera=1};
var isIE = 0;
if (document.all) {isIE=1}; //document.all property is only exist in Internet Explore browser so we can check with this
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Browser Detection</h3>
<script type="text/javascript">
document.write(
'mactest: '+mactest +
'<br/>isChrome: ' + isChrome +
'<br/>isNetscape: ' + isNetscape +
'<br/>isSafari: ' + isSafari +
'<br/>isOpera: ' + isOpera +
'<br/>isIE: ' + isIE +
'<br/>userAgent: ' + navigator.userAgent+
'<br/>appName: ' + navigator.appName
);

/*result with firefox browser
mactest: false
isChrome: false
isNetscape: true
isSafari: false
isOpera: 0
isIE: 0
userAgent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
appName: Netscape

result with chrome browswer can not determin accuratly so, use feature detection is more efficient
mactest: false
isChrome: true
isNetscape: true
isSafari: true
isOpera: 0
isIE: 0
userAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
appName: Netscape

*/
</script>
</body>
</html>
35 changes: 35 additions & 0 deletions lesson11/cookies.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cookies</title>
<script type="text/javascript">
//to test cookie in browser firefox is recomemded
var currentDate = new Date();
//as long as expire date is past, cookie will deleted
//assign year past to store paste date
var expireDatePast = new Date(currentDate.getFullYear()-1,currentDate.getMonth(),currentDate.getDate());
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Cookies</h3>
<script type="text/javascript">
//store by browser, page remember info one page to another
//cookie property .
var cookiesContent = 'Start: ' + document.cookie + '<br/>';
document.cookie = 'Author=Hanna'; //to set cookie assign name and value pair name = Author value = Hanna
//variable cookiesContent is to display cookie info later with document.write
cookiesContent += 'After setting Author: ' + document.cookie + '<br/>';
//define another cookie assign another name and value pair
document.cookie = 'College=Broward';
cookiesContent += 'After setting College: ' + document.cookie + '<br/>';
//to delete cookie, specify name and assign no value; and expires keyword with expiredate inthe past
document.cookie = 'Author=;expires=' + expireDatePast;
cookiesContent += 'After deleting Author: ' + document.cookie + '<br/>';
document.cookie = 'College=;expires='+expireDatePast;
cookiesContent += 'After deleting College: ' + document.cookie;
document.write(cookiesContent);
</script>
</body>
</html>
49 changes: 49 additions & 0 deletions lesson11/cookies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
//cookie name is matched with input tag id
var cookieName = 'clientname';

var currentDate = new Date();
function getNameCookie() {
var cookieReturn = '';
var allCookies = document.cookie;
var cookieArray = allCookies.split(';'); //if there is multiple cookie, saperate by ;
for (var i = 0; i < cookieArray.length; i++) {
var theCookie = cookieArray[i];
//if there is any space beteween cookie, remove that space
while (theCookie.charAt(0) == ' ') theCookie = theCookie.substring(1,theCookie.length);
if (theCookie.indexOf(cookieName + '=') == 0) { //if there is any equal sign, assign as 0 means starting
cookieReturn = theCookie.substring(cookieName.length + 1, theCookie.length);
}
}
return cookieReturn;
}
function setNameCookie() {
var expireDate = new Date(currentDate.getFullYear() + 1, currentDate.getMonth(), currentDate.getDate());
var cookieValue = document.getElementById(cookieName).value;
var setCookie = cookieName + '=' + cookieValue;
setCookie += ';expires=' + expireDate.toUTCString();
alert('Set to: ' + setCookie);
document.cookie = setCookie;
}

function deleteNameCookie() {
var expireDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate());
var setCookie = cookieName + '=';
setCookie += ';expires=' + expireDate.toUTCString();
alert('Set to: ' + setCookie);
document.cookie = setCookie;
}

function setAuthorCookie() {
var expireDate = new Date(currentDate.getFullYear()+1, currentDate.getMonth(), currentDate.getDate());
var setCookie = 'Author=George Cooke';
setCookie += ';expires=' + expireDate.toUTCString();
alert('Set to: '+setCookie);
document.cookie = setCookie;
};
function deleteAuthorCookie() {
var expireDate = new Date(currentDate.getFullYear()-1, currentDate.getMonth(), currentDate.getDate());
var setCookie = 'Author=';
setCookie += ';expires=' + expireDate.toUTCString();
alert('Delete: ' + setCookie);
document.cookie = setCookie;
};
22 changes: 22 additions & 0 deletions lesson11/encoding.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Encoding Input/Output</title>
<script type="text/javascript">
var theMessage = prompt('Enter code to be encoded',
'<table border="1"><tr><td>Jello</td></tr></table>');
var encodedMessage = encodeURIComponent(theMessage);
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Encoding Input/Output</h3>
<hr/>
<script type="text/javascript">
document.write(' Original: ' + theMessage + '<br/>');
document.write('URI Encoded: ' + encodedMessage + '<br/>');
document.write('URI Decoded: ' + decodeURIComponent(encodedMessage) + '<br/>');
</script>
</body>
</html>
40 changes: 40 additions & 0 deletions lesson11/mimeTypes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mime Types</title>
<script type="text/javascript">
var theMimeTypes = '';
/*MIME TYPE:
which provide file name extensions to help encode and decode data for e-mail transmission*/
//check if any mimetype defined in browser, if any defined describe in table
if (navigator.mimeTypes != null) {
theMimeTypes += '<table border="1">';
theMimeTypes += '<tr>';
theMimeTypes += '<th>Type</th>';
theMimeTypes += '<th>Description</th>';
theMimeTypes += '<th>Suffixes</th>';
theMimeTypes += '<th>Name</th>';
theMimeTypes += '</tr>';
for (var i = 0; i < navigator.mimeTypes.length; i++) {
theMimeTypes += '<tr>';
theMimeTypes += '<td>' + navigator.mimeTypes[i].type + '</td>';
theMimeTypes += '<td>' + navigator.mimeTypes[i].description + '</td>';
theMimeTypes += '<td>' + navigator.mimeTypes[i].suffixes + '</td>';
theMimeTypes += '<td>' + navigator.mimeTypes[i].enabledPlugin.name + '</td>';
theMimeTypes += '</tr>';
}
theMimeTypes += '</table>';
} else {
theMimeTypes += 'This browser does not recognize the navigator.mimeTypes property.';
}
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Mime Types</h3>
<script type="text/javascript">
document.write(theMimeTypes);
</script>
</body>
</html>
35 changes: 35 additions & 0 deletions lesson11/plugIns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Plugins</title>
<script type="text/javascript">
var thePlugins = '';
if (navigator.plugins != null) {
thePlugins += '<table border="1">';
thePlugins += '<tr>';
thePlugins += '<th>Name</th>';
thePlugins += '<th>Description</th>';
thePlugins += '<th>Filename</th>';
thePlugins += '</tr>';
for (var i = 0; i < navigator.plugins.length; i++) {
thePlugins += '<tr>';
thePlugins += '<td>' + navigator.plugins[i].name+'</td>';
thePlugins += '<td>' + navigator.plugins[i].description+'</td>';
thePlugins += '<td>' + navigator.plugins[i].filename+'</td>';
thePlugins += '</tr>';
}
thePlugins += '</table>';
} else {
thePlugins += 'This browser does not recognize the navigator.plugins property.';
}
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Plugins</h3>
<script type="text/javascript">
document.write(thePlugins);
</script>
</body>
</html>
19 changes: 19 additions & 0 deletions lesson11/poorJavascript.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Poorly written JavaScript</title>
<script type="text/javascript">
for (var i = 0; i <= 5; i--) { //logic error, never can stop.
document.write(i + ': Stop me if you can!<br/>');
}
</script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Poorly written JavaScript</h3>
<hr/>
This page demonstrates poorly written code that
locks the browser.
</body>
</html>
27 changes: 27 additions & 0 deletions lesson11/setDeleteCookie.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Set/Delete Cookies</title>
<script type="text/javascript" src="cookies.js"></script>
</head>
<body>
<h2>CIW JavaScript Specialist</h2>
<h3>Set/Delete Cookies</h3>
<form>
Name: <input id="clientname" value="">
<script type="text/javascript">
var currentName = getNameCookie();
if (currentName.length > 0) {
document.getElementById(cookieName).value = currentName;
};
</script>
<br/>
<input type="button" value="Set Cookie" onClick="setNameCookie()">
<input type="button" value="Delete Cookie" onClick="deleteNameCookie()">
<input type="button" value="Set Author Cookie" onClick="setAuthorCookie()">
<input type="button" value="Delete Author Cookie" onClick="deleteAuthorCookie()">
<input type="button" value="See Cookies" onClick="alert('Cookies: '+document.cookie)">
</form>
</body>
</html>