Skip to content

Commit fe92cb3

Browse files
RassibassiRassibassi
committed
js2 week3 inclass files
1 parent e82df3a commit fe92cb3

File tree

8 files changed

+246
-0
lines changed

8 files changed

+246
-0
lines changed

‎javascript2/week3/inclass/anonymousFunctions.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
function multBy2(x){
2+
// body of the function
3+
// scope of the function
4+
return 2 * x
5+
}
6+
7+
console.log(typeof multBy2)
8+
console.log(typeof multBy2(4)) // HERE WE CALL/EVALUATE THE FUNCTION
9+
console.log(multBy2)
10+
console.log(multBy2(4))
11+
12+
13+
const multBy2AsVariable = x => 2 * x
14+
console.log(typeof multBy2AsVariable)
15+
16+
17+
// anonymous function!
18+
const arrayOfNumbers = [1, 2, 3, 4]
19+
const mappedValues = arrayOfNumbers.map(x => 4 * x) // anonymous function
20+
console.log(mappedValues)
21+
22+
const arrayOtherNumbers = [6, 7, 8, 9]
23+
const otherMappedValues = arrayOtherNumbers.map(multBy2) // named function`
24+
console.log(otherMappedValues)

‎javascript2/week3/inclass/every_some.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const array = [True, True, True]
2+
3+
// array[0] && array[1] && array[2]
4+
if(array.every(x => x)){
5+
console.log("Waiting for...")
6+
}
7+
8+
// array[0] || array[1] || array[2]
9+
if(array.some(x => x)){
10+
console.log("... Pizza")
11+
}

‎javascript2/week3/inclass/exercise1.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<button id="btn1">Click me</button>
8+
<button id="btn2">Click me, too</button>
9+
<button id="btn3">Call me later!</button>
10+
<script type="text/javascript">
11+
const btn1 = document.getElementById("btn1")
12+
const btn2 = document.getElementById("btn2")
13+
const btn3 = document.getElementById("btn3")
14+
const btns = [btn1, btn2]
15+
16+
let counter = 0
17+
const countUp = () => {
18+
counter++
19+
console.log(counter)
20+
}
21+
22+
btns.forEach(btn => {
23+
btn.addEventListener("click", countUp)
24+
})
25+
26+
const callMeLater = () => {
27+
console.log("I am here now!")
28+
}
29+
30+
btn3.addEventListener("click", () => {
31+
setTimeout(callMeLater, 3000)
32+
})
33+
34+
</script>
35+
</body>
36+
</html>

‎javascript2/week3/inclass/exercise2.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<style type="text/css">
6+
#follower{
7+
position: absolute;
8+
color: white;
9+
top: 0;
10+
left: 0;
11+
width: 120px;
12+
text-align: center;
13+
background-color: rgb(0, 123, 255);
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="follower"></div>
19+
<script type="text/javascript">
20+
const follower = document.getElementById("follower")
21+
const mouse = {x: 0, y: 0}
22+
const offset = 10
23+
24+
const mouseTrace = []
25+
// const avgNumbers = numbers => {
26+
// const sum = numbers.reduce((a, b) => a + b, 0)
27+
// return sum / numbers.length
28+
// }
29+
30+
Array.prototype.sum = function() {
31+
return this.reduce((a, b) => a + b, 0)
32+
}
33+
Array.prototype.avg = function() {
34+
return this.sum() / this.length
35+
}
36+
// Array.prototype.myMap = function(callback) {
37+
// const newArray = []
38+
// for (let i = 0; i < this.length; i++) {
39+
// newArray.push(callback(this[i]))
40+
// }
41+
// return newArray
42+
// }
43+
44+
document.addEventListener("mousemove", (event) => {
45+
mouseTrace.push({x:event.clientX, y:event.clientY})
46+
mouse.x = event.clientX
47+
mouse.y = event.clientY
48+
49+
follower.style.left = offset + mouse.x + "px"
50+
follower.style.top = offset + mouse.y + "px"
51+
follower.innerText = "x: " + mouse.x + ", y: " + mouse.y
52+
})
53+
54+
setTimeout(()=>{
55+
// const avgX = avgNumbers(mouseTrace.map(item => item.x))
56+
// const avgY = avgNumbers(mouseTrace.map(item => item.y))
57+
const avgX = mouseTrace.map(item => item.x).avg()
58+
const avgY = mouseTrace.map(item => item.y).avg()
59+
console.log(avgX, avgY)
60+
}, 5000)
61+
62+
</script>
63+
</body>
64+
</html>

‎javascript2/week3/inclass/functionInFunction.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const action = (x, y, callback) => {
2+
const result = callback(x, y);
3+
return result;
4+
}
5+
6+
const add = (x, y) => x + y;
7+
const sub = (x, y) => x - y;
8+
9+
console.log(add)
10+
console.log(add(4, 4))
11+
console.log(sub)
12+
console.log(sub(8, 4))
13+
console.log(action)
14+
15+
// named function into action
16+
console.log( action(8, 8, add) )
17+
console.log( action(16, 2, sub) )
18+
19+
// // anonymous function into action
20+
console.log( action(8, 8, (x, y) => x * y) )

‎javascript2/week3/inclass/setInterval.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<button id="stopInterval">Stop interval</button>
8+
<script type="text/javascript">
9+
let i = 1;
10+
console.log("Output 1")
11+
console.log(i)
12+
13+
let intervalPtr;
14+
const callMeLater = () => {
15+
// console.log("Hello, I think I am late!")
16+
i = i + 1;
17+
console.log("Output 2")
18+
console.log(i)
19+
20+
if(i === 21){
21+
clearInterval(intervalPtr);
22+
};
23+
}
24+
25+
i = 10;
26+
console.log("Output 3")
27+
console.log(i)
28+
29+
// setTimout, setInterval
30+
intervalPtr = setInterval(callMeLater, 2500);
31+
32+
// clear interval via button
33+
const stopInterval = document.getElementById("stopInterval");
34+
stopInterval.addEventListener("click", () => {
35+
clearInterval(intervalPtr);
36+
});
37+
38+
</script>
39+
</body>
40+
</html>

‎javascript2/week3/inclass/setTimeout.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<script type="text/javascript">
8+
let i = 1;
9+
console.log("Output 1")
10+
console.log(i)
11+
12+
const callMeLater = () => {
13+
// console.log("Hello, I think I am late!")
14+
i = i + 1;
15+
console.log("Output 2")
16+
console.log(i)
17+
}
18+
// setTimout
19+
setTimeout(callMeLater, 3000);
20+
21+
i = 10;
22+
console.log("Output 3")
23+
console.log(i)
24+
</script>
25+
</body>
26+
</html>

‎javascript2/week3/inclass/setTimeoutWithParameters.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<script type="text/javascript">
8+
console.log("Output 1")
9+
10+
// Closure
11+
const callMeLaterWrapper = (x) => {
12+
const callMeLater = () => {
13+
console.log("Output 2")
14+
console.log(x)
15+
}
16+
return callMeLater
17+
}
18+
19+
// setTimout
20+
setTimeout(callMeLaterWrapper(10), 3000);
21+
22+
console.log("Output 3")
23+
</script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)