Section8 - HTML, CSS, JavaScript
Section8 - HTML, CSS, JavaScript
Section - Week 8
HTTP
HTML
Team 1 Team 2
0 0
CSS
+1
+1 +1
+1
team1 = team1 + 1;
JavaScript document.querySelector(
'#score1').innerHTML =
team1;
HTTP
http://cs50.harvard.edu/...
http://cs50.harvard.edu/...
HTTP
200
HTTP
404
HTTP
500
http-server
HTML
<!DOCTYPE html> Document
<html>
html
</html>
<!DOCTYPE html> Document
<html>
<head> html
head body
</head>
<body>
</body>
</html>
<!DOCTYPE html> Document
<html>
<head> html
<title>
</head>
<body> title hello, body
hello, body
</body>
</html>
<!DOCTYPE html> Document
<html>
<head> html
<title>
hello, title
</title> head body
</head>
<body> title hello, body
hello, body
</body>
</html> hello, title
<!DOCTYPE html> Document
<html>
<head> html
<title>
hello, title
</title> head body
</head>
<body> title p
<p>hello, body</p>
</body>
</html> hello, title hello, body
wget https://cdn.cs50.net/2022/fall/sections/8/scoreboard.html
Document
html
head body
tr tr tr
td td td td td td
Team 1 Team 2 0 0
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
tr tr tr
td td td td td td
Team Team
0 0
1 2
button button
+1 +1
table
Team 1 Team 2
tr tr tr
td td td td td td
0 0
Team
1
Team
2
0 0
button button +1 +1
+1 +1
Scoreboard
In scoreboard.html, experiment by adding the following elements:
• h1
•p
• main
• header
• ul
• li
CSS
selector
{
property: value; Team 1 Team 2
}
0 0
+1 +1
button
{
background-color: red; Team 1 Team 2
}
0 0
+1 +1
button
{
background-color: red; Team 1 Team 2
border: 4pt dashed;
}
0 0
+1 +1
#team1-button
{
background-color: red; Team 1 Team 2
border: 4pt dashed;
}
0 0
#team2-button
{ +1 +1
background-color: blue;
border: 4pt dashed;
}
#team1-button ...
{
background-color: red; <button id="team1-button">
border: 4pt dashed; Team 1
} </button>
#team2-button ...
{
background-color: blue; <button id="team2-button">
border: 4pt dashed; Team 2
} </button>
...
td
{
background-color: gray; Team 1 Team 2
}
0 0
+1 +1
td
{
background-color: gray; Team 1 Team 2
}
0 0
+1 +1
+1
.title
{
background-color: gray; Team 1 Team 2
}
0 0
+1 +1
+1
.title ...
{
background-color: gray; <tr> Team 1 Team 2
} <td class="title">
Team 1
</td>0 0
<td class="title">
Team
+1 2 +1
+1
</td>
</tr>
...
Scoreboard
In scoreboard.html, experiment with using an id selector and a class
selector. Try using the following properties or go nd more yourself!
• color
• background-color
• text-align
fi
JavaScript
team1 team2
<script> 0 0
let team1 = 0;
let team2 = 0;
</script>
team1 team2
<script> 0 0
let team1 = 0;
let team2 = 0;
team1 = team1 + 1;
document... = function() { document.querySelector
... ('#score1').innerHTML
= team1;
</script>
team1 team2
<script> 0 0
let team1 = 0;
let team2 = 0;
team1 = team1 + 1;
document... = function() { document.querySelector
... ('#score1').innerHTML
= team1;
</script>
team1 team2
<script> 0 0
let team1 = 0;
let team2 = 0;
team1 = team1 + 1;
document... = function() { document.querySelector
... ('#score1').innerHTML
= team1;
... document.querySelector
('#score2').innerHTML
= team2;
}
</script>
document.querySelector("#add1")
Document
html
head body
html
head body
html
head body
html
head body
tr tr tr
td td td td td td
+1 +1
table
tr tr tr
td td td td td td
+1 +1
table
tr tr tr
td td td td td td
+1 +1
table
tr tr tr
td td td td td td
+1 +1
document.querySelector("#add1").onclick = function() {
...
}
Scoreboard
In scoreboard.html, alert the user when a team has won the game with
a certain number of points.
• alert("This is an alert!")
This was CS50
Section - Week 8