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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
.vscode/.DS_Store vendored Normal file
View File

Binary file not shown.

20
4/sayhello.html
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>

11
5/function.html
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>

36
5/functioncalledcallback.html
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>

20
5/functiondate.html
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>

100
5/functionnumberdic.html
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>

12
5/wrapper.html Normal file
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>

37
6/class.html Normal file
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>

35
6/pets.html Normal file
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>

64
6/subclass.html Normal file
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>

10
7/helloworld.html Normal file
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>

20
7/index.html Normal file
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>

1
7/script.js Normal file
View File

@ -0,0 +1 @@
console.log("Hello, HTML!")

28
7/style.css Normal file
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;
}