Levi/IWD2-02
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JS project start

Browse Source
This commit is contained in:
LeviM0323
2026-02-04 13:51:54 -05:00
parent 59948ed75c
commit c88c9bbeea
16 changed files with 549442 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
INFO-3168 (JS 2)/Notes/Classes/Classes_1Level.html
+79
View File
@@ -0,0 +1,79 @@
<html>
<head>
<title>Classes</title>
<script language="JavaScript" type="text/JavaScript">
// create the "base" class
class Book {
// define the constructor function for Book
// notice the use of ._propertyName
constructor(title, author, pubdate) {
this._title = title;
this._author = author;
this._pubdate = pubdate;
}
// create a method
// this is much easier to do with ES6
getBook() {
return this._author + " published " + this._title + " in " + this._pubdate;
}
}
// create a new class that extends the base class book
class TypedBook extends Book {
// define the constructor function for TypeBook
// include a reference to the "base" class Book
// to call that constructor function as well...
// this done using "super([parameter set for the base class])
constructor(title, author, pubdate, type) {
super(title, author, pubdate);
this._type = type;
}
// this method overrides the getBook() found in the base class
// but allows us to call the Book version with super.getBook()
getBook() {
return super.getBook() + " - category: " + this._type;
}
// we can use an ES6 getter to retrieve the type
get type() {
return this._type;
}
// ... and an ES6 setter to set a new value for type
set type(newType) {
if (newType) {
this._type = newType;
}
}
}
// create a Book object
var bookB = new Book("The Greatest Show on Earth", "Richard Dawkins", 2009);
// call the Book getBook method
console.log(bookB.getBook());
// create a TypedBook object
var bookT = new TypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics");
// call the TypedBook getBook method
console.log(bookT.getBook());
// when we retrieve a property using an ES6 getter,
// we just write objectName.propertyName and the getter
// will be invoked under the hood
console.log(bookT.type);
// similarly, when we update a property using an ES6 setter,
// we also assign the new value to objectName.propertyName and
// the setter will be invoked "under the hood"
bookT.type = "political science";
console.log(bookT.type);
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/Classes/Classes_2Levels.html
+116
View File
@@ -0,0 +1,116 @@
<html>
<head>
<title>Classes</title>
<script language="JavaScript" type="text/JavaScript">
// create the "base" class
class Book {
// define the constructor function for Book
// notice the use of ._propertyName
constructor(title, author, pubdate) {
this._title = title;
this._author = author;
this._pubdate = pubdate;
}
// create a method
// this is much easier to do with ES6
getBook() {
return this._author + " published " + this._title + " in " + this._pubdate;
}
}
// create a new class that extends the base class book
class TypedBook extends Book {
// define the constructor function for TypeBook
// include a reference to the "base" class Book
// to call that constructor function as well...
// this done using "super([parameter set for the base class])
constructor(title, author, pubdate, type) {
super(title, author, pubdate);
this._type = type;
}
// this method overrides the getBook() found in the base class
// but allows us to call the Book version with super.getBook()
getBook() {
return super.getBook() + " - category: " + this._type;
}
// we can use an ES6 getter to retrieve the type
get type() {
return this._type;
}
// ... and an ES6 setter to set a new value for type
set type(newType) {
if (newType) {
this._type = newType;
}
}
}
// create a new class that extends the base class book
// very similar to the TypedBook class but with version instead
class VersionBook extends Book {
constructor(title, author, pubdate, version) {
super(title, author, pubdate);
this._version = version;
}
getBook() {
return super.getBook() + " - version: " + this._version;
}
get version() {
return this._version;
}
}
// create a new class that extends VersionBook
// this creates a 3 level hierarchy because VersionBook
// extends book
class VersionTypedBook extends TypedBook {
constructor(title, author, pubdate, typed, version) {
// super in this case will be the VersionBook constructor
super(title, author, pubdate, typed);
this._version = version;
}
getBook() {
return super.getBook() + " - version: " + this._version;
}
get version() {
return this._version;
}
}
// create a TypedBook object
var bookT = new TypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics");
// create a version book
var bookV = new VersionBook("Thank You for Being Late", "Thomas Friedman", 2016, "hardcover");
// create a version typed book
var bookVT = new VersionTypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics", "hardcover");
console.log(bookVT.getBook());
// call the TypedBook getBook method
//console.log(bookB.getBook());
// when we retrieve a property using an ES6 getter,
// we just write objectName.propertyName and the getter
// will be invoked under the hood
console.log(bookT.type);
// similarly, when we update a property using an ES6 setter,
// we also assign the new value to objectName.propertyName and
// the setter will be invoked under the hood
bookT.type = "political science";
console.log(bookT.type);
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/Collections/Collections.html
+68
View File
@@ -0,0 +1,68 @@
<html>
<head>
<title>Collections</title>
<script language="JavaScript" type="text/JavaScript">
// create a Set (collection) type
var collect1 = new Set();
// add 2 values to the collection
collect1.add("apple");
collect1.add("oranges");
// return the number of members in the collection
console.log(collect1.size); // 2
// add a new member and then try to add it again
collect1.add("banana");
collect1.add("banana"); // ignored
// get the collection size again
console.log(collect1.size); // 3
// remove (delete) a member
collect1.delete("banana");
// get the size again
console.log(collect1.size); // 2
// determine if particular values are members or not
console.log(collect1.has("banana")); // false
console.log(collect1.has("apple")); // true
// the forEach() method calls a provided function once for each element in a collection, in order.
// using anonymous function
collect1.forEach(function(value) {
console.log(value);
});
// using a declared function
collect1.forEach(loopFor);
function loopFor(value) {
console.log(value);
}
// convert the collection to an array
var arr = [...collect1]; // spread syntax
console.log(arr[1]); // oranges
// create a new set (collection) from an array literal
var collect2 = new Set(['one','two','three']);
// get the size of the new collection
console.log(collect2.size); // 3
// same as above but with an array variable
var arr2 = ['test','again'];
var collect3 = new Set(arr2);
console.log(collect3.size); // 2
// remove all members from the set collection
collect1.clear();
console.log(collect1.size); // 0
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/Maps/Maps.html
+87
View File
@@ -0,0 +1,87 @@
<html>
<head>
<title>Maps</title>
<script language="JavaScript" type="text/JavaScript">
// create a new map
var map1 = new Map();
// add a string key and a value
map1.set("value1", "this is value");
// add a numeric key and a value
map1.set(3, "another value");
// hard to believe but NaN can be a key name
map1.set(NaN, "this is allowed");
// an object such as window can also be a key name
map1.set(window, "also allowed");
// retrieve the number of entries
console.log(map1.size);
// retrieve values by key
console.log(map1.get("value1"));
console.log(map1.get(NaN));
console.log(map1.get(3));
console.log(map1.get(window));
// iterate the map by key value pairs
// uses the for..var (or let).. of.. syntax
for (var [key, value] of map1) {
console.log(key + " = " + value);
}
// iterating through keys
for (var key of map1.keys()) {
console.log(key);
}
// iterating through values
for (var value of map1.values()) {
console.log(value);
}
//call the anonymous function once for each value in the map
map1.forEach(function(value) {
console.log(value);
});
// define an iterator for the keys
var mapIter = map1.keys();
// use the next() method to retrieve the next value
console.log(mapIter.next().value);
console.log(mapIter.next().value);
console.log(mapIter.next().value);
// create a couple of object literals
var b = {first: 'apple', second: 'pear'};
var c = {first: '5', second: '1'};
// create a numeric array literal
var d = [1,2,3,4];
// create an object alias
var e = b;
e.third = "grape";
// redefine map1 as a new map
var map1 = new Map();
// add keys and values using the b, c, d declarations as values
map1.set('first', b);
map1.set('second', c);
map1.set('array', d);
// retrieve the entries
console.log(map1.get("array"));
console.log(map1.get("first"));
console.log(map1.get("second"));
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/More_Classes/Classes_Shape.html
+118
View File
@@ -0,0 +1,118 @@
<html>
<head>
<title>Shapes</title>
<script language="JavaScript" type="text/JavaScript">
// set the size of the canvas
// we'll use block scope variable declarations throughout
const maxWidth = 500;
const maxHeight = 500;
// declare the base class (most generic class)
// Shape has a string "id", a fill style string
// and x, y coordinates
class Shape {
//constructor declares property set
constructor(id, fillStyle, x, y) {
this._id = id;
this._fillStyle = fillStyle;
this._x = x;
this._y = y;
}
// create native getters for the x, y coordinates
// and the fill style
get id(){
return this._id;
}
get fillStyle(){
return this._fillStyle;
}
get x(){
return this._x;
}
get y() {
return this._y;
}
get style() {
return this._fillStyle;
}
}
// declare the first extended class
// Rectangle is a specific kind of Shape with width and height
class Rectangle extends Shape {
// constructor declares all properties, including the
// super class (Shape) properties
constructor (id, fillStyle, x, y, width, height) {
super(id, fillStyle, x, y);
this._width = width;
this._height = height;
}
// create native getters and setters for the
// width and height
set width(width){
this._width = width;
}
get width(){
return this._width;
}
set height(height){
this._height = height;
}
get height(){
return this._height;
}
// log the properties for this shape (rectangle)
render(){
console.log(super.id);
console.log(super.fillStyle, super.x, super.y, this.width, this.height);
}
}
// declare the second extended class
// Circle is a specific kind of Shape with x, y centre point and radius
class Circle extends Shape {
constructor (id, fillStyle, x, y, radius) {
super(id, fillStyle, x, y)
this._radius = radius;
}
// native setter and getter for the radius property
set radius(radius){
this._radius = radius;
}
get radius(){
return this._radius;
}
// define the render method specifically for this shape (circle)
render(){
console.log(super.id);
console.log(super.fillStyle, super.x, super.y, this.radius);
}
}
function startMeUp() {
// create a rectangle object
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
r1.render();
// change the width and height and re-render
r1.width = 100;
r1.height = 100;
r1.render();
// create a circle
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
c1.render();
// change the radius and re-render
c1.radius = 100;
c1.render();
}
</script>
</head>
<body onload="startMeUp();">
</body>
</html>
INFO-3168 (JS 2)/Notes/More_Classes/Classes_Shape_Draw.html
+128
View File
@@ -0,0 +1,128 @@
<html>
<head>
<title>HTML5 2d Shapes and Drawing</title>
<script language="JavaScript" type="text/JavaScript">
// set the size of the canvas
// we'll use block scope variable declarations throughout
const maxWidth = 500;
const maxHeight = 500;
// declare the base class (most generic class)
// Shape has a string "id", a fill style string
// and x, y coordinates
class Shape {
//constructor declares property set
constructor(id, fillStyle, x, y) {
this._id = id;
this._fillStyle = fillStyle;
this._x = x;
this._y = y;
}
// create native getters for the x, y coordinates
// and the fill style
get id(){
return this._id;
}
get fillStyle(){
return this._fillStyle;
}
get x(){
return this._x;
}
get y() {
return this._y;
}
get style() {
return this._fillStyle;
}
}
// declare the first extended class
// Rectangle is a specific kind of Shape with width and height
class Rectangle extends Shape {
// constructor declares all properties, including the
// super class (Shape) properties
constructor (id, fillStyle, x, y, width, height) {
super(id, fillStyle, x, y);
this._width = width;
this._height = height;
}
// create native getters and setters for the
// width and height
set width(width){
this._width = width;
}
get width(){
return this._width;
}
set height(height){
this._height = height;
}
get height(){
return this._height;
}
// define the render method specifically for this shape (rectangle)
render(context){
context.fillStyle = super.style;
context.fillRect(super.x, super.y, this.width, this.height);
}
}
// declare the second extended class
// Circle is a specific kind of Shape with x, y centre point and radius
class Circle extends Shape {
constructor (id, fillStyle, x, y, radius) {
super(id, fillStyle, x, y)
this._radius = radius;
}
// native setter and getter for the radius property
set radius(radius){
this._radius = radius;
}
get radius(){
return this._radius;
}
// define the render method specifically for this shape (circle)
render(context){
context.fillStyle = super.style;
context.arc(super.x, super.y, this.radius, 0, 2 * Math.PI);
context.fill();
}
}
function startMeUp() {
let drawing = document.getElementById("drawing");
// make sure <canvas> is completely supported
// if drawing.getContext returns true, it's supported
if (drawing.getContext){
let context = drawing.getContext("2d");
// create a new rectangle
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
r1.render(context);
// change the width and height and re-render
r1.width = 100;
r1.height = 100;
r1.render(context);
// create a new circle
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
c1.render(context);
// change the radius and re-render
c1.radius = 100;
c1.render(context);
}
}
</script>
</head>
<body onload="startMeUp();">
<canvas id="drawing" width="500" height="500"></canvas>
</body>
</html>
INFO-3168 (JS 2)/Notes/More_Classes/Classes_Static.html
+57
View File
@@ -0,0 +1,57 @@
<html>
<head>
<title>Rectangle Class</title>
<script language="JavaScript" type="text/JavaScript">
// declare a Rectangle class
class Rectangle {
constructor (width, height) {
this._width = width;
this._height = height;
}
// create native getters and setters
set width(width){
this._width = width;
}
get width(){
return this._width;
}
set height(height){
this._height = height;
}
get height(){
return this._height;
}
get area(){
return this._width * this._height;
}
// create a static method that we can call without
// first creating an object
static defaultRectangle () {
return new Rectangle(100, 100);
}
}
var r = new Rectangle(50, 20)
r.width = 60;
if (r.area === 1000) {
console.log(true);
}
else {
console.log(false);
}
// call the static method directly
var defaultRect = Rectangle.defaultRectangle();
console.log(defaultRect.area);
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/Sets/Sets.html
+68
View File
@@ -0,0 +1,68 @@
<html>
<head>
<title>Sets (Collections)</title>
<script language="JavaScript" type="text/JavaScript">
// create a Set type
var set1 = new Set();
// add 2 values to the set
set1.add("apple");
set1.add("oranges");
// return the number of members in the set
console.log(set1.size); // 2
// add a new member and then try to add it again
set1.add("banana");
set1.add("banana"); // ignored
// get the set size again
console.log(set1.size); // 3
// remove (delete) a member
set1.delete("banana");
// get the size again
console.log(set1.size); // 2
// determine if particular values are members or not
console.log(set1.has("banana")); // false
console.log(set1.has("apple")); // true
// the forEach() method calls a provided function once for each element in a set, in order.
// using anonymous function
set1.forEach(function(value) {
console.log(value);
});
// using a declared function
set1.forEach(loopFor);
function loopFor(value) {
console.log(value);
}
// convert the set to an array
var arr = [...set1]; // spread syntax
console.log(arr[1]); // oranges
// create a new set from an array literal
var set2 = new Set(['one','two','three']);
// get the size of the new set
console.log(set2.size); // 3
// same as above but with an array variable
var arr2 = ['test','again'];
var set3 = new Set(arr2);
console.log(set3.size); // 2
// remove all members from the set
set1.clear();
console.log(set1.size); // 0
</script>
</head>
<body>
</body>
</html>
INFO-3168 (JS 2)/Notes/code1/code1/index.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
const date = new Date();
let year = date.getFullYear();
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>
</body>
</html>
INFO-3168 (JS 2)/Practice/apitest.html
-14
View File
@@ -1,14 +0,0 @@
<!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>
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/css/style.css
+8
View File
@@ -0,0 +1,8 @@
table {
border: 2px solid black;
}
#map {
height: 720px;
width: 100%;
}
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/index.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nasa Meteorite Explorer</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Nasa Meteorite Explorer</h1>
<hr>
<!-- Filter by year stuff -->
<fieldset>
<legend>Sort By Year</legend>
<label for="minYearInput">Min Year</label>
<input type="number" placeholder="MinYear" name="minYearInput">
<label for="maxYearInput">Max Year</label>
<input type="number" placeholder="MaxYear" name="maxYearInput">
<button type="submit" value="Filter By Year" name="yearFilterBtn">Filter By Year</button>
<button type="reset" value="Reset Filter" name="resetFilterBtn">Reset Filter</button><br>
</fieldset>
<!-- Filter by name stuff -->
<fieldset>
<legend>Sort By Name</legend>
<label for="nameInput">Name</label>
<input type="text" placeholder="Name" name="nameInput">
<button type="submit" value="Filter By Name" name="nameFilterBtn">Filter By Name</button>
</fieldset><hr>
<!-- Where Google Map will go -->
<div id="map"></div>
<hr>
<!-- Table with clickable headers for sorting -->
<table>
<caption>Meteorite Data Table</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Year</th>
<th>Recclass</th>
<th>Mass</th>
</tr>
</thead>
<tbody id="meteorTableBody"></tbody>
</table><br>
<button type="button" name="downloadBtn">Download Filtered Data</button>
<script src="js/main.js"></script>
<script src="js/map.js"></script>
<script src="js/dataHandler.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1Mo5opxS1m0c16McSaTfzqnFAgbEuU2k&callback=loadMap" async defer></script>
</body>
</html>
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/Meteorite_Landings.json
+548594
View File
File diff suppressed because it is too large Load Diff
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/dataHandler.js
+22
View File
@@ -0,0 +1,22 @@
fetch('./js/Meteorite_Landings.json')
.then((response) => response.json())
.then(data => {
console.log(data);
const tableBody = document.getElementById("meteorTableBody");
data.forEach(meteor => {
const row = document.createElement("tr");
const id = document.createElement("td");
id.textContent = meteor.id ?? "-";
const name = document.createElement("td");
name.textContent = meteor.name ?? "-";
const year = document.createElement("td");
year.textContent = meteor.year ?? "-";
const recclass = document.createElement("td");
recclass.textContent = meteor.recclass ?? "-";
const mass = document.createElement("td");
mass.textContent = meteor["mass (g)"] + "g" ?? "-";
row.append(id, name, year, recclass, mass);
tableBody.appendChild(row);
})
})
.catch(error => console.error(error));
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/main.js
View File
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/map.js
+6
View File
@@ -0,0 +1,6 @@
function loadMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 0, lng: 0}, // Center of the globe
zoom: 2
});
}