Multiple changes
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user