jblu/js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

furthered work

Browse Source
This commit is contained in:
Jonathan Branan
2024-10-03 11:29:13 -05:00
parent fa7ac2949b
commit 1e756f4f72
15 changed files with 301 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
.vscode/.DS_Store
Vendored
BIN
View File
Binary file not shown.
4/sayhello.html
+10 -10
View File
@@ -1,11 +1,11 @@
<html><body><script> <html><body><script>
function sayHello(name){ function sayHello(name){
return `Hello ${name}, it is good to see you.` return `Hello ${name}, it is good to see you.`
} }
let a = sayHello("jon".toLocaleUpperCase()) let a = sayHello("jon".toLocaleUpperCase())
console.log(a) console.log(a)
// sayHello("meli") // sayHello("meli")
// sayHello("sammie") // sayHello("sammie")
// sayHello("lucy") // sayHello("lucy")
</script></body></html> </script></body></html>
5/function.html
+6 -5
View File
@@ -1,6 +1,7 @@
<html><body><script> <html><pre id="log"></pre><body><script>
function sayHi() { !function(){var n=document.getElementById("log");console.log=function(){for(var i=0;i<arguments.length;i++)"object"==typeof arguments[i]?n.innerHTML+=(JSON&&JSON.stringify?JSON.stringify(arguments[i],void 0,2):arguments[i])+"<br />":n.innerHTML+=arguments[i]+"<br />"}}();
console.log("Hi!"); function sayHi() {
} console.log("Hi!");
setTimeout(sayHi, 2000); }
setTimeout(sayHi, 2000);
</script></body></html> </script></body></html>
5/functioncalledcallback.html
+18 -18
View File
@@ -1,19 +1,19 @@
A function with no parameters that prints how many times it’s A function with no parameters that prints how many times it’s
been called. Hint: define a variable outside of the function to been called. Hint: define a variable outside of the function to
keep track of the number of calls, like we did in the “Side keep track of the number of calls, like we did in the “Side
Effects” section on page 77. Effects” section on page 77.
<html><body><script> <html><body><script>
let a = 0 let a = 0
let b = 0 let b = 0
let c = 0 let c = 0
function calledcallback (){a++;console.log(`calledcallback calls: ${a}`)} function calledcallback (){a++;console.log(`calledcallback calls: ${a}`)}
callback = function () {b++;console.log(`callback calls: ${b}`)} callback = function () {b++;console.log(`callback calls: ${b}`)}
cb = () => {c++;console.log(`cb calls: ${c}`)} cb = () => {c++;console.log(`cb calls: ${c}`)}
calledcallback() calledcallback()
callback() callback()
cb() cb()
</script></body></html> </script></body></html>
5/functiondate.html
+10 -10
View File
@@ -1,11 +1,11 @@
A function that prints the current date and time. Hint: you can A function that prints the current date and time. Hint: you can
get the current date and time with new Date(). get the current date and time with new Date().
<html><body><script> <html><body><script>
function datetime (){let t = Date();console.log(t)} function datetime (){let t = Date();console.log(t)}
date = function () {let t = Date();console.log(t)} date = function () {let t = Date();console.log(t)}
d = () => {let t = Date();console.log(t)} d = () => {let t = Date();console.log(t)}
datetime() datetime()
date() date()
d() d()
</script></body></html> </script></body></html>
5/functionnumberdic.html
+50 -50
View File
@@ -1,51 +1,51 @@
A function that takes a number from 0 to 5 and returns the A function that takes a number from 0 to 5 and returns the
English word for that number. For example, 1 should return "one". English word for that number. For example, 1 should return "one".
Hint: use an array to define the mapping from numbers to Hint: use an array to define the mapping from numbers to
strings. strings.
<html><body><script> <html><body><script>
function numdict (numb) { function numdict (numb) {
dict = { dict = {
0 : "Zero", 0 : "Zero",
1 : "One", 1 : "One",
2 : "Two", 2 : "Two",
3 : "Three", 3 : "Three",
4 : "Four", 4 : "Four",
5 : "Five" 5 : "Five"
} }
word = dict[numb] word = dict[numb]
console.log(word) console.log(word)
return word return word
} }
let numberdictionary = function (numb) { let numberdictionary = function (numb) {
dict = { dict = {
0 : "Zero", 0 : "Zero",
1 : "One", 1 : "One",
2 : "Two", 2 : "Two",
3 : "Three", 3 : "Three",
4 : "Four", 4 : "Four",
5 : "Five" 5 : "Five"
} }
word = dict[numb] word = dict[numb]
console.log(word) console.log(word)
return word return word
} }
let nd = (numb) => { let nd = (numb) => {
dict = { dict = {
0 : "Zero", 0 : "Zero",
1 : "One", 1 : "One",
2 : "Two", 2 : "Two",
3 : "Three", 3 : "Three",
4 : "Four", 4 : "Four",
5 : "Five" 5 : "Five"
} }
word = dict[numb] word = dict[numb]
console.log(word) console.log(word)
return word return word
} }
numdict(1) numdict(1)
numberdictionary(2) numberdictionary(2)
nd(3) nd(3)
</script></body></html> </script></body></html>
5/wrapper.html
+12
View File
@@ -0,0 +1,12 @@
<html><body><script>
function makeWrapper (prefix, suffix) {
return function (string){
console.log(prefix + string + suffix)
return prefix + string + suffix
}
}
let itsawrap = makeWrapper("[","]")
itsawrap("let me out")
</script></body></html>
6/class.html
+37
View File
@@ -0,0 +1,37 @@
<html><pre id="log"></pre><body><script>
!function(){var n=document.getElementById("log");console.log=function(){for(var i=0;i<arguments.length;i++)"object"==typeof arguments[i]?n.innerHTML+=(JSON&&JSON.stringify?JSON.stringify(arguments[i],void 0,2):arguments[i])+"<br />":n.innerHTML+=arguments[i]+"<br />"}}();
class Player {
constructor(startX, startY) {
this.x = startX;
this.y = startY;
}
move(dx, dy) {
this.x += dx;
this.y += dy;
}
}
let player1 = new Player(0,0);
let player2 = new Player(0,0);
console.log(player2.x)
console.log(player2.y)
console.log(player2.move(-3,10))
console.log(player2.x)
console.log(player2.y)
console.log(player2.move(4,-7))
console.log(player2.x)
console.log(player2.y)
console.log(player1.x)
console.log(player1.y)
console.log(player1.move(-20,4))
console.log(player1.x)
console.log(player1.y)
console.log(player1.move(16,-9))
console.log(player1.x)
console.log(player1.y)
</script></body></html>
6/pets.html
+35
View File
@@ -0,0 +1,35 @@
<html><body><script>
function Cat(name) {
this.name = name;
}
Cat.prototype.sayHello = function () {
console.log(`Miaow! My name is ${this.name}.`);
};
let kiki = new Cat("Kiki");
kiki.sayHello();
class Dog {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Woof! My name is ${this.name}.`);
}
}
let felix = new Dog("Felix");
let moona = new Cat("Moona");
moona.sayHello = function () {
console.log(`HELLO!!! I'M ${this.name.toUpperCase()}!`);
};
moona.sayHello();
let yappy = new Dog("Yappy");
yappy.sayHello = function (){
console.log(`Bark Bark! I'M ${this.name.toUpperCase()}!`)
}
yappy.sayHello();
felix.sayHello();
</script></body></html>
6/subclass.html
+64
View File
@@ -0,0 +1,64 @@
<html><pre id="log"></pre><body><script>
!function(){var n=document.getElementById("log");console.log=function(){for(var i=0;i<arguments.length;i++)"object"==typeof arguments[i]?n.innerHTML+=(JSON&&JSON.stringify?JSON.stringify(arguments[i],void 0,2):arguments[i])+"<br />":n.innerHTML+=arguments[i]+"<br />"}}();
class Actor {
constructor(startX, startY) {
this.x = startX;
this.y = startY;
}
move(dx, dy) {
this.x += dx;
this.y += dy;
}
distanceTo(otherActor) {
let dx = otherActor.x - this.x;
let dy = otherActor.y - this.y;
return Math.hypot(dx, dy);
}
}
class Player extends Actor {
constructor(startX, startY) {
super(startX, startY);
this.hp = 100;
}
move(dx, dy) {
this.x += dx;
this.y += dy;
}
}
class Enemy extends Actor {
attack(player) {
if (this.distanceTo(player) < 4) {
player.hp -= 10;
return true;
} else {
return false;
}
}
}
class Follower extends Actor{
constructor(startX,startY, player){
super(startX,startY)
this.player = player
}
follow(player){
this.x = player.x
this.y = player.y
}
}
let player = new Player(0,0);
let follower = new Follower(0,0);
let enemy = new Enemy(0,0);
player.move(10,10)
console.log(player.x, player.y)
console.log(follower.x,follower.y)
follower.follow(player)
console.log(follower.x,follower.y)
</script></body></html>
7/helloworld.html
+10
View File
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1 id="main-heading">Hello! My name is slim shady.</h1>
<p id="pp">Welcome to my document.</p>
</body>
</html>
7/index.html
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello, JavaScript!</title>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 id="main-heading">Hello, <strong>JavaScript</strong>
!</h1>
<p class="highlight">This is my first <strong>paragraph
</strong>.</p>
<p>This is my second <strong>paragraph</strong>.</p>
<h1>Here's another heading.</h1>
<p class="highlight">This is my third <strong>paragraph
</strong>.</p>
<p class="em">This is my <em>fourth</em> paragraph.</p>
<p class="pre"> This is my <pre>fifth</pre> paragraph.</p>
</body>
</html>
7/script.js
+1
View File
@@ -0,0 +1 @@
console.log("Hello, HTML!")
7/style.css
+28
View File
@@ -0,0 +1,28 @@
h1 {
color: green;
font-style:italic;
font-family: system-ui;
}
#main-heading {
font-size: 48px;
}
strong {
color: yellowgreen;
}
p strong {
font-size: 24px;
}
.highlight {
background-color: burlywood;
}
.highlight strong {
background-color: thistle;
}
em {
background-color: aqua;
}
pre{
color: blueviolet;
}