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

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>
function sayHello(name){
return `Hello ${name}, it is good to see you.`
}
let a = sayHello("jon".toLocaleUpperCase())
console.log(a)
// sayHello("meli")
// sayHello("sammie")
// sayHello("lucy")
<html><body><script>
function sayHello(name){
return `Hello ${name}, it is good to see you.`
}
let a = sayHello("jon".toLocaleUpperCase())
console.log(a)
// sayHello("meli")
// sayHello("sammie")
// sayHello("lucy")
</script></body></html>

11
5/function.html
View File

@@ -1,6 +1,7 @@
<html><body><script>
function sayHi() {
console.log("Hi!");
}
setTimeout(sayHi, 2000);
<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 />"}}();
function sayHi() {
console.log("Hi!");
}
setTimeout(sayHi, 2000);
</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
been called. Hint: define a variable outside of the function to
keep track of the number of calls, like we did in the “Side
Effects” section on page 77.
<html><body><script>
let a = 0
let b = 0
let c = 0
function calledcallback (){a++;console.log(`calledcallback calls: ${a}`)}
callback = function () {b++;console.log(`callback calls: ${b}`)}
cb = () => {c++;console.log(`cb calls: ${c}`)}
calledcallback()
callback()
cb()
A function with no parameters that prints how many times it’s
been called. Hint: define a variable outside of the function to
keep track of the number of calls, like we did in the “Side
Effects” section on page 77.
<html><body><script>
let a = 0
let b = 0
let c = 0
function calledcallback (){a++;console.log(`calledcallback calls: ${a}`)}
callback = function () {b++;console.log(`callback calls: ${b}`)}
cb = () => {c++;console.log(`cb calls: ${c}`)}
calledcallback()
callback()
cb()
</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
get the current date and time with new Date().
<html><body><script>
function datetime (){let t = Date();console.log(t)}
date = function () {let t = Date();console.log(t)}
d = () => {let t = Date();console.log(t)}
datetime()
date()
d()
A function that prints the current date and time. Hint: you can
get the current date and time with new Date().
<html><body><script>
function datetime (){let t = Date();console.log(t)}
date = function () {let t = Date();console.log(t)}
d = () => {let t = Date();console.log(t)}
datetime()
date()
d()
</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
English word for that number. For example, 1 should return "one".
Hint: use an array to define the mapping from numbers to
strings.
<html><body><script>
function numdict (numb) {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
let numberdictionary = function (numb) {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
let nd = (numb) => {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
numdict(1)
numberdictionary(2)
nd(3)
A function that takes a number from 0 to 5 and returns the
English word for that number. For example, 1 should return "one".
Hint: use an array to define the mapping from numbers to
strings.
<html><body><script>
function numdict (numb) {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
let numberdictionary = function (numb) {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
let nd = (numb) => {
dict = {
0 : "Zero",
1 : "One",
2 : "Two",
3 : "Three",
4 : "Four",
5 : "Five"
}
word = dict[numb]
console.log(word)
return word
}
numdict(1)
numberdictionary(2)
nd(3)
</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;
}