Multiple changes
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Levi Lab #2</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
var json = '{"version":3,"status":"ok","response":{"data":[{"address":"1001 Fanshawe College Blvd","category_ids":[29],"category_labels":["Community and Government","Education","Colleges and Universities"],"country":"ca","factual_id":"fba3ee56-9947-424d-bba4-f6c955491fff","fax":"(519) 452-4420","hours":{"monday":[["6:00","17:00"]],"tuesday":[["6:00","17:00"]],"wednesday":[["6:00","17:00"]],"friday":[["6:00","13:00"]]},"hours_display":"Mon-Wed 6:00-17:00; Fri 6:00-13:00","latitude":43.01392,"locality":"London","longitude":-81.20093,"name":"Fanshawe College","neighborhood":["Huron Heights"],"postcode":"N5Y 5R6","region":"ON","tel":"(519) 452-4430","tel_normalized":"5194524430","website":"http://www.fanshawec.ca","$distance":219.55336},{"address":"1569 Oxford St E","address_extended":"# 1","category_ids":[354,312],"category_labels":["Social","Food and Dining","Restaurants","Diners"],"country":"ca","factual_id":"2b22d57b-6fc3-46c6-b32e-ab6501c0ac15","latitude":43.011113,"locality":"London","longitude":-81.198993,"name":"Careys Pub","neighborhood":["Huron Heights"],"postcode":"N5V 1W5","region":"ON","tel":"(519) 951-6886","tel_normalized":"5199516886","website":"http://careys.ca/","$distance":144.9862},{"address":"1579 Oxford St E","category_ids":[347],"category_labels":["Social","Food and Dining","Restaurants"],"country":"ca","factual_id":"fa5cbbf3-42c4-47bf-af8d-1ff597668820","latitude":43.011228,"locality":"London","longitude":-81.198469,"name":"Tuscanos Pizzeria & Bistro","neighborhood":["Huron Heights"],"postcode":"N5V 1W5","region":"ON","tel":"(519) 452-3737","tel_normalized":"5194523737","website":"http://www.tuscanoslondon.com","$distance":171.85011},{"address":"1569 Oxford St E","category_ids":[363],"category_labels":["Social","Food and Dining","Restaurants","Pizza"],"country":"ca","factual_id":"134b343a-1064-48f8-a8ab-af1c17641a82","latitude":43.011227,"locality":"London","longitude":-81.198942,"name":"Marvellous 2 For 1 Pizza & Wings Inc","neighborhood":["Huron Heights"],"postcode":"N5V 1W5","region":"ON","tel":"(519) 452-1044","tel_normalized":"5194521044","website":"http://marvellous2for1pizza.com/","$distance":139.92738},{"address":"670 1st St","category_ids":[355,464],"category_labels":["Social","Food and Dining","Restaurants","International"],"country":"ca","factual_id":"0bbb20a6-b7ca-4c3c-91c6-2a82cdefcb4c","latitude":43.010551,"locality":"London","longitude":-81.199745,"name":"Sammys Souvlaki","neighborhood":["Huron Heights"],"postcode":"N5V 2A2","region":"ON","tel":"(519) 457-6433","tel_normalized":"5194576433","website":"http://www.restaurantica.com/on/london/sammys-souvlaki/23004725/","$distance":167.32169}],"included_rows":5}}';
|
||||
|
||||
// Convert JSON string to JS object
|
||||
let jsObject = JSON.parse(json);
|
||||
|
||||
// Initialize new variable called viewDate to current date
|
||||
jsObject.viewDate = new Date();
|
||||
|
||||
function startMeUp() {
|
||||
// Print details of each object in the response
|
||||
for (let i = 0; i < jsObject.response.data.length; i++) {
|
||||
document.write(jsObject.response.data[i].name + "<br>");
|
||||
document.write(jsObject.response.data[i].address + "<br>");
|
||||
document.write(jsObject.response.data[i].category_labels.join("<br>") + "<br><br>");
|
||||
}
|
||||
|
||||
// Dump the JSON String after changes
|
||||
document.write(jsonString);
|
||||
}
|
||||
|
||||
// Convert JS object back to JSON string
|
||||
let jsonString = JSON.stringify(jsObject);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Constructors</title>
|
||||
<script>
|
||||
// this is a constructor function used to create a new object
|
||||
// based on the parameters passed over
|
||||
function PlanType(name, price, space, transfer, pages) {
|
||||
|
||||
// "this" references the current object being created
|
||||
// to ensure that each object has its own private data
|
||||
this.name = name;
|
||||
this.price = price;
|
||||
this.space = space;
|
||||
this.transfer = transfer;
|
||||
this.pages = pages;
|
||||
}
|
||||
|
||||
// prints out a single object using document.write
|
||||
function printObj(pObj) {
|
||||
document.write(pObj.name + " " + pObj.price + " " + pObj.space + " " + pObj.transfer + " " + pObj.pages + "<br>");
|
||||
}
|
||||
|
||||
// start up function launched from the onload event
|
||||
function startMeUp() {
|
||||
// creates 3 objects (plan1, plan2 and plan3)
|
||||
var plan1 = new PlanType("Basic", 3.99, 100, 1000, 10);
|
||||
var plan2 = new PlanType("Premium", 5.99, 500, 5000, 50);
|
||||
var plan3 = new PlanType("Ultimate", 9.99, 2000, 20000, 500);
|
||||
|
||||
// print out each object
|
||||
printObj(plan1);
|
||||
printObj(plan2);
|
||||
printObj(plan3);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Constructors (Array of Objects)</title>
|
||||
<script>
|
||||
// this is a constructor function used to create a new object
|
||||
// based on the parameters passed over
|
||||
function PlanType(name, price, space, transfer, pages) {
|
||||
|
||||
// "this" references the current object being created
|
||||
// to ensure that each object has its own private data
|
||||
this.name = name;
|
||||
this.price = price;
|
||||
this.space = space;
|
||||
this.transfer = transfer;
|
||||
this.pages = pages;
|
||||
}
|
||||
|
||||
// prints out an array of objects using document.write
|
||||
function printObjArray(pArray) {
|
||||
var properties = "";
|
||||
|
||||
// use a "for" loop to combine all the properties into a string
|
||||
// separate each property from the next with a space
|
||||
for (var i = 0; i < pArray.length; i++) {
|
||||
properties += pArray[i].name + " ";
|
||||
properties += pArray[i].price + " ";
|
||||
properties += pArray[i].space + " ";
|
||||
properties += pArray[i].transfer + " ";
|
||||
properties += pArray[i].pages + "<br>";
|
||||
}
|
||||
|
||||
document.write(properties); // print out the "properties" string with all object properties
|
||||
}
|
||||
|
||||
// start up function launched from the onload event
|
||||
function startMeUp() {
|
||||
var plans = []; // create an empty array
|
||||
|
||||
// creates an object array with 3 element objects (plans[0], plans[1] and plans[2])
|
||||
plans[0] = new PlanType("Basic", 3.99, 100, 1000, 10);
|
||||
plans[1] = new PlanType("Premium", 5.99, 500, 5000, 50);
|
||||
plans[2] = new PlanType("Ultimate", 9.99, 2000, 20000, 500);
|
||||
|
||||
// print out all objects in the plans array
|
||||
printObjArray(plans);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Simple Object Example</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
|
||||
var flight = {
|
||||
airline: "Oceanic",
|
||||
number: 815,
|
||||
departure: {
|
||||
IATA: "SYD",
|
||||
time: "2004-09-22 14:55",
|
||||
city: "Sydney"
|
||||
},
|
||||
arrival: {
|
||||
IATA: "LAX",
|
||||
time: "2004-09-23 10:42",
|
||||
city: "Los Angeles"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Simple Object Example</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
|
||||
var flight = {
|
||||
airline: "Oceanic",
|
||||
number: 815,
|
||||
departure: {
|
||||
IATA: "SYD",
|
||||
time: "2004-09-22 14:55",
|
||||
city: "Sydney"
|
||||
},
|
||||
arrival: {
|
||||
IATA: "LAX",
|
||||
time: "2004-09-23 10:42",
|
||||
city: "Los Angeles"
|
||||
},
|
||||
updateNumber: function(num) {
|
||||
this.number = num;
|
||||
},
|
||||
updateDepartures: function(IATA, time, city) {
|
||||
this.departure.IATA = IATA;
|
||||
this.departure.time = time;
|
||||
this.departure.city = city;
|
||||
}
|
||||
}
|
||||
|
||||
function startMeUp() {
|
||||
flight.updateNumber(900);
|
||||
flight.updateDepartures("TOR", "2018-02-01 08:44", "Toronto");
|
||||
document.write(flight.departure.time);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Methods</title>
|
||||
<script>
|
||||
var PlanType = function(name, price, space, transfer, pages, discountMonths) {
|
||||
this.name = name;
|
||||
this.price = price;
|
||||
this.space = space;
|
||||
this.transfer = transfer;
|
||||
this.pages = pages;
|
||||
this.discountMonths = discountMonths;
|
||||
|
||||
this.calcAnnual = function(percentIfDiscount) {
|
||||
var bestPrice = this.price;
|
||||
var currentDate = new Date();
|
||||
var theMo = currentDate.getMonth();
|
||||
|
||||
for (var i = 0; i < this.discountMonths.length; i++) {
|
||||
if (this.discountMonths[i] === theMo) {
|
||||
bestPrice = this.price * percentIfDiscount;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return bestPrice * 12;
|
||||
}
|
||||
}
|
||||
|
||||
var plan1 = new PlanType("Basic", 3.99, 100, 1000, 10, [2, 6, 7]);
|
||||
var plan2 = new PlanType("Premium", 6.99, 500, 5000, 20, [1, 6, 7, 9]);
|
||||
var bp = plan1.calcAnnual(0.15);
|
||||
|
||||
bp = plan2.calcAnnual(0.15);
|
||||
|
||||
if (sameDiscountMonths(plan1, plan2)) {
|
||||
document.write(plan1.name + " and " + plan2.name + " have the same discount months");
|
||||
}
|
||||
else {
|
||||
document.write(plan1.name + " and " + plan2.name + " don't have the same discount months");
|
||||
}
|
||||
|
||||
// return true/false
|
||||
function sameDiscountMonths(p1, p2) {
|
||||
if (p1.discountMonths.length !== p2.discountMonths.length)
|
||||
return false;
|
||||
|
||||
for (var i = 0; i < p1.discountMonths.length; i++) {
|
||||
if (p1.discountMonths[i] !== p2.discountMonths[i])
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Methods</title>
|
||||
<script>
|
||||
var PlanType = function(name, price, space, transfer, pages, discountMonths) {
|
||||
this.name = name;
|
||||
this.price = price;
|
||||
this.space = space;
|
||||
this.transfer = transfer;
|
||||
this.pages = pages;
|
||||
this.discountMonths = discountMonths;
|
||||
}
|
||||
|
||||
PlanType.prototype.cancellable = false;
|
||||
|
||||
PlanType.prototype.calcAnnual = function(percentIfDiscount) {
|
||||
var bestPrice = this.price;
|
||||
var currentDate = new Date();
|
||||
var theMo = currentDate.getMonth();
|
||||
|
||||
PlanType.prototype.cancellable = false;
|
||||
|
||||
for (var i = 0; i < this.discountMonths.length; i++) {
|
||||
if (this.discountMonths[i] === theMo) {
|
||||
bestPrice = this.price * percentIfDiscount;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return bestPrice * 12;
|
||||
}
|
||||
|
||||
var plan1 = new PlanType("Basic", 3.99, 100, 1000, 10, [2, 6, 7]);
|
||||
var plan2 = new PlanType("Premium", 6.99, 500, 5000, 20, [1, 6, 7, 9]);
|
||||
var bp = plan1.calcAnnual(0.15);
|
||||
|
||||
bp = plan2.calcAnnual(0.15);
|
||||
|
||||
PlanType.prototype.cancellable = true;
|
||||
|
||||
if (sameDiscountMonths(plan1, plan2)) {
|
||||
document.write(plan1.name + " and " + plan2.name + " have the same discount months");
|
||||
}
|
||||
else {
|
||||
document.write(plan1.name + " and " + plan2.name + " don't have the same discount months");
|
||||
}
|
||||
|
||||
// return true/false
|
||||
function sameDiscountMonths(p1, p2) {
|
||||
if (p1.discountMonths.length !== p2.discountMonths.length)
|
||||
return false;
|
||||
|
||||
for (var i = 0; i < p1.discountMonths.length; i++) {
|
||||
if (p1.discountMonths[i] !== p2.discountMonths[i])
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
Hello
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<div id="demo">
|
||||
<h2>The XMLHttpRequest Object</h2>
|
||||
<button type="button" onclick="loadDoc()">Change Content</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function loadDoc() {
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function() {
|
||||
document.getElementById("demo").innerHTML =
|
||||
this.responseText;
|
||||
}
|
||||
xhttp.open("GET", "ajax_info.txt");
|
||||
xhttp.send();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
body {
|
||||
background-color:ButtonFace;
|
||||
}
|
||||
.txtBox {
|
||||
font-family: Verdana, Arial, Helvetica;
|
||||
font-size: 9pt;
|
||||
color: black;
|
||||
height: 19px;
|
||||
background-color: white;
|
||||
border: 1px solid #07A2FE;
|
||||
}
|
||||
.divClass {
|
||||
font-family: Verdana, Arial, Helvetica;
|
||||
font-size: 9pt;
|
||||
padding: 3px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
width: 500px;
|
||||
border: 1px solid #07A2FE;
|
||||
visibility: hidden;
|
||||
}
|
||||
.btnButton {
|
||||
font-family: Verdana, Arial, Helvetica;
|
||||
font-size: 8pt;
|
||||
color: black;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Wikipedia Demo 3 (external .js and .css)</title>
|
||||
<link rel="stylesheet" href="wikidemo3.css" />
|
||||
<script src="wikidemo3.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" id="txtSearch" class="txtBox" style="width:200px" onclick="this.select();" onkeypress="filterText();" value="supercomputer" />
|
||||
<br /><br />
|
||||
<input type="button" id="btnAsynch" class="btnButton" value="Find Data Asynchronously" onclick="doSearch();" />
|
||||
<br /><br />
|
||||
<div id="outputDiv" class="divClass"></div><br />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
const ISOK = 200;
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
function getJSONAsync(searchArg) {
|
||||
if (searchArg == "") {
|
||||
alert("Enter valid search argument");
|
||||
return;
|
||||
}
|
||||
|
||||
// use an anonymous function as the event handler
|
||||
request.onload = function() {
|
||||
if (request.status === ISOK) {
|
||||
var jsObject = JSON.parse(request.responseText);
|
||||
var countResults = jsObject.query.search.length;
|
||||
var template = '<a href="_url" target="_blank">_title</a><br><br>';
|
||||
|
||||
// clear div container
|
||||
document.getElementById("outputDiv").innerHTML = "";
|
||||
|
||||
if (countResults > 0) {
|
||||
for (var i = 0; i < countResults; i++) {
|
||||
var link = "https://en.wikipedia.org/?curid=" + jsObject.query.search[i].pageid;
|
||||
var titleText = template.replace("_url", link);
|
||||
titleText = i + 1 + ". " + titleText.replace("_title", jsObject.query.search[i].title);
|
||||
document.getElementById("outputDiv").innerHTML += titleText;
|
||||
|
||||
var snipText = jsObject.query.search[i].snippet + "...<br><br>";
|
||||
document.getElementById("outputDiv").innerHTML += snipText;
|
||||
document.getElementById("outputDiv").style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var url = "https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=" + searchArg;
|
||||
request.open("GET", url, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function callBack() {
|
||||
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
var searchArg = document.getElementById("txtSearch").value;
|
||||
getJSONAsync(searchArg);
|
||||
|
||||
}
|
||||
|
||||
function filterText() {
|
||||
if (window.event.keyCode === 13) {
|
||||
document.getElementById("outputDiv").style.visibility = "hidden";
|
||||
doSearch();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>ASynchronous AJAX</title>
|
||||
|
||||
</head>
|
||||
<body onload="main();">
|
||||
<script type="text/JavaScript">
|
||||
|
||||
let xmlHttp = new XMLHttpRequest();
|
||||
|
||||
function requestCallbackFunction(){
|
||||
if(xmlHttp.status === 200){
|
||||
writeToContent(xmlHttp.responseText);
|
||||
|
||||
let data = JSON.parse(xmlHttp.responseText);
|
||||
console.log(data);
|
||||
|
||||
setTimeout(null, 1000);
|
||||
|
||||
data['someProperty'] = { data:"This is an additional value"};
|
||||
|
||||
console.log(JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
function getJSONASynchronous(url){
|
||||
if(xmlHttp !== null){
|
||||
xmlHttp.onload = requestCallbackFunction;
|
||||
xmlHttp.open("GET", url, true);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
}
|
||||
|
||||
function writeToContent(data){
|
||||
document.getElementById("content").innerText = data;
|
||||
}
|
||||
|
||||
function main(){
|
||||
getJSONASynchronous("https://google.ca");
|
||||
getJSONASynchronous("https://reqbin.com/echo/get/json");
|
||||
getJSONASynchronous("./data.json");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="content">
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Synchronous AJAX</title>
|
||||
|
||||
</head>
|
||||
<body onload="main();">
|
||||
<script type="text/JavaScript">
|
||||
|
||||
function getJSONSynchronous(url){
|
||||
let response = "";
|
||||
let xmlHttp = new XMLHttpRequest();
|
||||
|
||||
if(xmlHttp !== null){
|
||||
xmlHttp.open("GET", url, false);
|
||||
|
||||
xmlHttp.send(null);
|
||||
|
||||
response = xmlHttp.responseText;
|
||||
|
||||
return response;
|
||||
}
|
||||
}
|
||||
|
||||
function writeToContent(data){
|
||||
document.getElementById("content").innerText = data;
|
||||
}
|
||||
|
||||
function main(){
|
||||
writeToContent(getJSONSynchronous("https://google.ca"));
|
||||
writeToContent(getJSONSynchronous("https://reqbin.com/echo/get/json"));
|
||||
writeToContent(getJSONSynchronous("./data.json"));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="content">
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Api Test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Query Fake User API
|
||||
let request = fetch("https://randomuser.me/api/");
|
||||
console.log(request);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user