Scribd
Upload
22 views54 pages

Section8 - HTML, CSS, JavaScript

The document discusses HTML, CSS, and JavaScript concepts like selectors, properties, and DOM manipulation. It shows how to build a basic scoreboard application with buttons that update scores stored in JavaScript variables and displayed in the HTML.

Uploaded by

Hoàng Minh Thắng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views54 pages

Section8 - HTML, CSS, JavaScript

The document discusses HTML, CSS, and JavaScript concepts like selectors, properties, and DOM manipulation. It shows how to build a basic scoreboard application with buttons that update scores stored in JavaScript variables and displayed in the HTML.

Uploaded by

Hoàng Minh Thắng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

This is CS50

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>

</title> head body

</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

title style table script

... ... ... ...


table

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... = function() { team2 = team2 + 1;

... document.querySelector
('#score2').innerHTML
= team2;
}
</script>
document.querySelector("#add1")
Document

html

head body

title style table script

... ... ... ...


Document

html

head body

title style table script

... ... ... ...


Document

html

head body

title style table script

... ... ... ...


Document

html

head body

title style table script

... ... ... ...


table

tr tr tr

td td td td td td

Team 1 Team 2 0 0 button


button
#add1

+1 +1
table

tr tr tr

td td td td td td

Team 1 Team 2 0 0 button


button
#add1

+1 +1
table

tr tr tr

td td td td td td

Team 1 Team 2 0 0 button


button
#add1

+1 +1
table

tr tr tr

td td td td td td

Team 1 Team 2 0 0 button


button
#add1

+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

You might also like