所有文章
分类
学习 阅读 生活 网站
标签 关于

目录

Harvard CS50 学习笔记（八）

 收录于 学习 计算机
     约 576 字   预计阅读 2 分钟  次阅读    条评论
摘要
Harvard CS50 学习笔记（八）。

8 HTML, CSS, JavaScript

8.1 Lecture

8.1.1 The Internet

8.1.2 Routers

8.1.3 TCP/IP

8.1.4 Fragmentation

8.1.5 DNS

8.1.6 HTTP Requests and Responses

/images/Harvard_CS50/Lecture_8/request.png
request
/images/Harvard_CS50/Lecture_8/response.png
response

8.1.7 HTML

8.1.8 http-server

8.1.9 hello.html

8.1.10 HTML Tags and Attributes

/images/Harvard_CS50/Lecture_8/html_1.png /images/Harvard_CS50/Lecture_8/html_2.png /images/Harvard_CS50/Lecture_8/html_3.png /images/Harvard_CS50/Lecture_8/html_4.png
/images/Harvard_CS50/Lecture_8/html_5.png
html_5

8.1.11 HTML Validation

8.1.12 paragraphs.html

/images/Harvard_CS50/Lecture_8/paragraphs.png
paragraphs

8.1.13 headings.html

/images/Harvard_CS50/Lecture_8/headings.png
headings

8.1.14 list.html

/images/Harvard_CS50/Lecture_8/list.png
list

8.1.15 table.html

/images/Harvard_CS50/Lecture_8/table.png
table

8.1.16 image.html

/images/Harvard_CS50/Lecture_8/image_1.png /images/Harvard_CS50/Lecture_8/image_2.png

8.1.17 video.html

/images/Harvard_CS50/Lecture_8/video.png
video
/images/Harvard_CS50/Lecture_8/iframe.png
iframe

8.1.18 link.html

/images/Harvard_CS50/Lecture_8/link.png
link

8.1.19 responsive.html

/images/Harvard_CS50/Lecture_8/responsive.png
responsive

8.1.20 URL Parameters

/images/Harvard_CS50/Lecture_8/url_parameter.png
url_parameter

8.1.21 home.html

8.1.22 Style Attributes

/images/Harvard_CS50/Lecture_8/style_attributes.png
style_attributes

8.1.23 CSS

/images/Harvard_CS50/Lecture_8/css.png
css

8.1.24 CSS Classes

/images/Harvard_CS50/Lecture_8/css_class_1.png
css_class_1
/images/Harvard_CS50/Lecture_8/css_class_2.png
css_class_2

8.1.25 Linking CSS

/images/Harvard_CS50/Lecture_8/link_css.png
link_css

8.1.26 ID Selectors

/images/Harvard_CS50/Lecture_8/id_selector.png
id_selector

8.1.27 Developer Tools

/images/Harvard_CS50/Lecture_8/selectors.png
selectors

8.1.28 Pseudo-classes

/images/Harvard_CS50/Lecture_8/attribute_selector_1.png
attribute_selector_1
/images/Harvard_CS50/Lecture_8/attribute_selector_2.png
attribute_selector_2

8.1.29 Frameworks

8.1.30 JavaScript

8.1.31 onsubmit

8.1.32 querySelector

/images/Harvard_CS50/Lecture_8/query_selector.png
query_selector

8.1.33 Event Listeners

/images/Harvard_CS50/Lecture_8/event_listener.png
event_listener

8.1.34 Anonymous Functions

/images/Harvard_CS50/Lecture_8/anonymous_function.png
anonymous_function

8.1.35 JavaScript Examples

8.1.36 geolocation.html

8.2 Shorts

8.2.1 Internet Primer

/images/Harvard_CS50/Lecture_8/Internet_Primer/internet_primer_1.png
internet_primer_1
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_1.png
ip_address_1
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_2.png
ip_address_2
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_3.png
ip_address_3
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_4.png
ip_address_4
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_5.png
ip_address_5
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_6.png
ip_address_6
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_7.png
ip_address_7
/images/Harvard_CS50/Lecture_8/Internet_Primer/ip_address_8.png
ip_address_8
/images/Harvard_CS50/Lecture_8/Internet_Primer/dhcp_1.png
dhcp_1
/images/Harvard_CS50/Lecture_8/Internet_Primer/dhcp_2.png
dhcp_2
/images/Harvard_CS50/Lecture_8/Internet_Primer/dns_1.png
dns_1
/images/Harvard_CS50/Lecture_8/Internet_Primer/dns_2.png
dns_2
/images/Harvard_CS50/Lecture_8/Internet_Primer/dns_3.png
dns_3
/images/Harvard_CS50/Lecture_8/Internet_Primer/dns_4.png
dns_4
/images/Harvard_CS50/Lecture_8/Internet_Primer/dns_5.png
dns_5
/images/Harvard_CS50/Lecture_8/Internet_Primer/access_point_1.png
access_point_1
/images/Harvard_CS50/Lecture_8/Internet_Primer/access_point_2.png
access_point_2
/images/Harvard_CS50/Lecture_8/Internet_Primer/internet_primer_2.png
internet_primer_2
/images/Harvard_CS50/Lecture_8/Internet_Primer/internet_primer_3.png
internet_primer_3
/images/Harvard_CS50/Lecture_8/Internet_Primer/internet_primer_4.png
internet_primer_4
/images/Harvard_CS50/Lecture_8/Internet_Primer/internet_primer_5.png
internet_primer_5

8.2.2 IP

/images/Harvard_CS50/Lecture_8/IP/ip_1.png
ip_1
/images/Harvard_CS50/Lecture_8/IP/ip_2.png
ip_2
/images/Harvard_CS50/Lecture_8/IP/ip_3.png
ip_3
/images/Harvard_CS50/Lecture_8/IP/ip_4.png
ip_4
/images/Harvard_CS50/Lecture_8/IP/ip_5.png
ip_5
/images/Harvard_CS50/Lecture_8/IP/ip_6.png
ip_6
/images/Harvard_CS50/Lecture_8/IP/ip_7.png
ip_7
/images/Harvard_CS50/Lecture_8/IP/ip_8.png
ip_8
/images/Harvard_CS50/Lecture_8/IP/ip_9.png
ip_9
/images/Harvard_CS50/Lecture_8/IP/ip_10.png
ip_10
/images/Harvard_CS50/Lecture_8/IP/ip_11.png
ip_11
/images/Harvard_CS50/Lecture_8/IP/ip_12.png
ip_12
/images/Harvard_CS50/Lecture_8/IP/ip_13.png
ip_13
/images/Harvard_CS50/Lecture_8/IP/ip_14.png
ip_14
/images/Harvard_CS50/Lecture_8/IP/ip_15.png
ip_15
/images/Harvard_CS50/Lecture_8/IP/ip_16.png
ip_16

8.2.3 TCP

/images/Harvard_CS50/Lecture_8/TCP/tcp_1.png
tcp_1
/images/Harvard_CS50/Lecture_8/TCP/tcp_2.png
tcp_2
/images/Harvard_CS50/Lecture_8/TCP/tcp_3.png
tcp_3
/images/Harvard_CS50/Lecture_8/TCP/tcp_4.png
tcp_4
/images/Harvard_CS50/Lecture_8/TCP/tcp_5.png
tcp_5
/images/Harvard_CS50/Lecture_8/TCP/tcp_6.png
tcp_6

8.2.4 HTTP

/images/Harvard_CS50/Lecture_8/HTTP/http_1.png
http_1
/images/Harvard_CS50/Lecture_8/HTTP/http_2.png
http_2
/images/Harvard_CS50/Lecture_8/HTTP/http_3.png
http_3
/images/Harvard_CS50/Lecture_8/HTTP/http_4.png
http_4
/images/Harvard_CS50/Lecture_8/HTTP/http_5.png
http_5
/images/Harvard_CS50/Lecture_8/HTTP/http_6.png
http_6
/images/Harvard_CS50/Lecture_8/HTTP/http_7.png
http_7
/images/Harvard_CS50/Lecture_8/HTTP/http_8.png
http_8
/images/Harvard_CS50/Lecture_8/HTTP/http_9.png
http_9
/images/Harvard_CS50/Lecture_8/HTTP/http_10.png
http_10
/images/Harvard_CS50/Lecture_8/HTTP/http_11.png
http_11
/images/Harvard_CS50/Lecture_8/HTTP/http_12.png
http_12
/images/Harvard_CS50/Lecture_8/HTTP/http_13.png
http_13

8.2.5 HTML

/images/Harvard_CS50/Lecture_8/HTML/html_1.png
html_1
/images/Harvard_CS50/Lecture_8/HTML/html_2.png
html_2
/images/Harvard_CS50/Lecture_8/HTML/html_3.png
html_3
/images/Harvard_CS50/Lecture_8/HTML/html_4.png
html_4
/images/Harvard_CS50/Lecture_8/HTML/html_5.png
html_5
/images/Harvard_CS50/Lecture_8/HTML/html_6.png
html_6
  1. ul — unordered list.
  2. ol — ordered list.
  3. li — list item.

/images/Harvard_CS50/Lecture_8/HTML/html_7.png
html_7
/images/Harvard_CS50/Lecture_8/HTML/html_8.png
html_8
  1. tr — table row.
  2. td — table data. (table column)

/images/Harvard_CS50/Lecture_8/HTML/html_9.png
html_9
/images/Harvard_CS50/Lecture_8/HTML/html_10.png
html_10
/images/Harvard_CS50/Lecture_8/HTML/html_11.png
html_11
/images/Harvard_CS50/Lecture_8/HTML/html_12.png
html_12

8.2.6 CSS

/images/Harvard_CS50/Lecture_8/CSS/css_1.png
css_1
/images/Harvard_CS50/Lecture_8/CSS/css_2.png
css_2
/images/Harvard_CS50/Lecture_8/CSS/css_3.png
css_3
/images/Harvard_CS50/Lecture_8/CSS/css_4.png
css_4
/images/Harvard_CS50/Lecture_8/CSS/css_5.png
css_5
/images/Harvard_CS50/Lecture_8/CSS/css_6.png
css_6
/images/Harvard_CS50/Lecture_8/CSS/css_7.png
css_7
/images/Harvard_CS50/Lecture_8/CSS/css_8.png
css_8
/images/Harvard_CS50/Lecture_8/CSS/css_9.png
css_9

8.2.7 JavaScript

/images/Harvard_CS50/Lecture_8/JavaScript/java_script_1.png
java_script_1
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_2.png
java_script_2
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_3.png
java_script_3
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_4.png
java_script_4
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_5.png
java_script_5
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_6.png
java_script_6
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_7.png
java_script_7
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_8.png
java_script_8
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_9.png
java_script_9
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_10.png
java_script_10
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_11.png
java_script_11
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_12.png
java_script_12
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_13.png
java_script_13
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_14.png
java_script_14
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_15.png
java_script_15
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_16.png
java_script_16
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_17.png
java_script_17
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_18.png
java_script_18
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_19.png
java_script_19
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_20.png
java_script_20
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_21.png
java_script_21
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_22.png
java_script_22
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_23.png
java_script_23
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_24.png
java_script_24
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_25.png
java_script_25
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_26.png
java_script_26
/images/Harvard_CS50/Lecture_8/JavaScript/java_script_27.png
java_script_27

8.2.8 DOM

/images/Harvard_CS50/Lecture_8/DOM/dom_1.png
dom_1
/images/Harvard_CS50/Lecture_8/DOM/dom_2.png
dom_2
/images/Harvard_CS50/Lecture_8/DOM/dom_3.png
dom_3
/images/Harvard_CS50/Lecture_8/DOM/dom_4.png
dom_4
/images/Harvard_CS50/Lecture_8/DOM/dom_5.png
dom_5
/images/Harvard_CS50/Lecture_8/DOM/dom_6.png
dom_6
/images/Harvard_CS50/Lecture_8/DOM/dom_7.png
dom_7
/images/Harvard_CS50/Lecture_8/DOM/dom_8.png
dom_8
/images/Harvard_CS50/Lecture_8/DOM/dom_9.png
dom_9
/images/Harvard_CS50/Lecture_8/DOM/dom_10.png
dom_10

8.3 Lab 8

  • 不是自己写的，看答案的。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let correct = document.querySelector('.correct');
                correct.addEventListener('click', function() {
                    correct.style.backgroundColor = 'green';
                    document.querySelector('#feedback1').innerHTML = 'Correct!';
                });

                let incorrects = document.querySelectorAll('.incorrect');
                for (let i = 0; i < incorrects.length; i++) {
                    incorrects[i].addEventListener('click', function() {
                        incorrects[i].style.backgroundColor = 'red';
                        document.querySelector('#feedback1').innerHTML = 'Incorrect!';
                    });
                }

                document.querySelector('#check').addEventListener('click', function() {
                    let input = document.querySelector('input');
                    if (input.value === 'Switzerland') {
                        input.style.backgroundColor = 'green';
                        document.querySelector('#feedback2').innerHTML = 'Correct!';
                    } else {
                        input.style.backgroundColor = 'red';
                        document.querySelector('#feedback2').innerHTML = 'Incorrect!';
                    }
                });
            });
        </script>

    </head>
    <body>

        <div class="jumbotron">
            <h1>Trivia!</h1>
        </div>

        <div class="container">

            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr></hr>
                    <h3>
                        What is the approximate ratio of people to sheep in New Zealand?
                    </h3>

                <button class="incorrect">6 people per 1 sheep</button>
                <button class="incorrect">3 people per 1 sheep</button>
                <button class="incorrect">1 people per 1 sheep</button>
                <button class="incorrect">1 people per 3 sheep</button>
                <button class="correct">1 people per 6 sheep</button>

                <p id="feedback1"></p>
            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr></hr>
                <h3>
                    In which country is it illegal to own only one guniea pig, as a lone guniea pig might get lonely?
                </h3>

                <input type="text"></input>
                <button id='check'>Check Answer</button>

                <p id="feedback2"></p>
            </div>

        </div>
    </body>
</html>

8.4 Problem Set 8

  • 没写。
更新于 2021/12/22
阅读原始文档
 Harvard CS50
返回 | 主页