1 of 120

2 of 120

This is CS50

  • Visit cs50.ly/screen to view projector on your laptop and ask questions via chat.
  • Today's snack, rice krispie treats!
  • Like to attend CS50 Lunch this Fri 11/10 at 1:15pm? RSVP at cs50.ly/lunch!
  • Do say hi or ask questions (or ask for stress ball 🔴) during break or after class!

3 of 120

4 of 120

5 of 120

6 of 120

internet

7 of 120

8 of 120

9 of 120

routers

10 of 120

11 of 120

TCP/IP

12 of 120

IP

13 of 120

#.#.#.#

14 of 120

0 1 2 3

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|Version| IHL |Type of Service| Total Length |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Identification |Flags| Fragment Offset |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Time to Live | Protocol | Header Checksum |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Source Address |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Destination Address |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Options | Padding |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

​

Example Internet Datagram Header

15 of 120

TCP

16 of 120

ports

17 of 120

80 HTTP

443 HTTPS

...

​

18 of 120

0 1 2 3

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Source Port | Destination Port |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Sequence Number |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Acknowledgment Number |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Data | |U|A|P|R|S|F| |

| Offset| Reserved |R|C|S|S|Y|I| Window |

| | |G|K|H|T|N|N| |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Checksum | Urgent Pointer |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| Options | Padding |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

| data |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

​

TCP Header Format

19 of 120

DNS

20 of 120

Fully Qualified Domain Name

IP Address

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

21 of 120

Fully Qualified Domain Name

IP Address

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

22 of 120

DHCP

23 of 120

HTTP

24 of 120

HTTPS

25 of 120

https://www.example.com

26 of 120

https://www.example.com/

27 of 120

https://www.example.com/path

28 of 120

https://www.example.com/file.html

29 of 120

https://www.example.com/folder/

30 of 120

https://www.example.com/folder/file.html

31 of 120

https://www.example.com/folder/file.html

32 of 120

https://www.example.com/folder/file.html

33 of 120

https://www.example.com/folder/file.html

34 of 120

https://www.example.com/folder/file.html

35 of 120

https://www.example.com/folder/file.html

36 of 120

GET

POST

...

37 of 120

GET / HTTP/2

Host: www.harvard.edu

...

38 of 120

HTTP/2 200

Content-Type: text/html

...

39 of 120

developer tools

40 of 120

HTTP/2 301

Location: https://www.harvard.edu/

…

41 of 120

GET / HTTP/2

Host: harvard.edu

...

42 of 120

HTTP/2 404

Content-Type: text/html

...

43 of 120

200 OK�301 Moved Permanently�302 Found�304 Not Modified�307 Temporary Redirect�401 Unauthorized�403 Forbidden�404 Not Found�418 I'm a Teapot�500 Internal Server Error�503 Service Unavailable�...

44 of 120

GET / HTTP/1.1

Host: safetyschool.org

...

45 of 120

HTML

46 of 120

tags

attributes

47 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

48 of 120

http-server

49 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

50 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

51 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

52 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

53 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

54 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

55 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

56 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

57 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

58 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

59 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

60 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

hello, title

hello, body

61 of 120

https://www.example.com

62 of 120

https://www.example.com/path?key=value

63 of 120

https://www.example.com/path?key=value&key=value

64 of 120

break

65 of 120

66 of 120

67 of 120

68 of 120

69 of 120

70 of 120

https://www.youtube.com/watch?v=jjR0nsb9Kmw

71 of 120

regular expressions

72 of 120

regexes

73 of 120

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

74 of 120

. any single character (except line terminators)

* zero or more times

+ one or more times

? 0 or 1 time

{n} n occurrences

{n,m} at least n occurrences, at most m occurrences

…

75 of 120

[0123456789] any one of the enclosed characters

[0-9] any one of the range of characters

\d any digit

\D any character that is not a digit

…

76 of 120

^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$

77 of 120

developer tools

78 of 120

validator.w3.org

79 of 120

CSS

80 of 120

properties

81 of 120

type selector

class selector

ID selector

attribute selector

...

82 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

​

​

​

83 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<style>

</style>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

84 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<link href="styles.css" rel="stylesheet">

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

​

​

85 of 120

frameworks

86 of 120

Bootstrap

87 of 120

getbootstrap.com

88 of 120

developer tools

89 of 120

JavaScript

90 of 120

conditionals

91 of 120

if (x < y)�{

}

92 of 120

if (x < y)�{

}

93 of 120

if (x < y)�{

}

else

{�

}

94 of 120

if (x < y)�{

}

else

{�

}

95 of 120

if (x < y)�{

}

else if (x > y)

{�

}

else

{�

}

96 of 120

if (x < y)�{

}

else if (x > y)

{�

}

else

{�

}

97 of 120

variables

98 of 120

let counter = 0;

99 of 120

let counter = 0;

100 of 120

counter = counter + 1;

101 of 120

counter = counter + 1;

102 of 120

counter += 1;

103 of 120

counter++;

104 of 120

loops

105 of 120

for (let i = 0; i < 3; i++)

{

}

106 of 120

for (let i = 0; i < 3; i++)

{

}

107 of 120

while (true)

{

}

108 of 120

while (true)

{

}

109 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

​

​

​

hello, title

hello, body

110 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

​

​

​

111 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<script>

​

</script>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

112 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<script src="scripts.js"></script>

<title>

hello, title

</title>

</head>

<body>

hello, body

</body>

</html>

113 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

<script>

​

</script>

</body>

</html>

114 of 120

<!DOCTYPE html>

​

<html lang="en">

<head>

<title>

hello, title

</title>

</head>

<body>

hello, body

<script src="scripts.js"></script>

</body>

</html>

​

​

115 of 120

blur�change�click�drag�focus�keyup�load�mousedown�mouseover�mouseup�submit�touchmove�unload�...

116 of 120

Bootstrap Table

117 of 120

bootstrap-table.com

118 of 120

119 of 120

120 of 120