CS50W - Lecture 5 - JavaScript

TABLE OF CONTENTS

00:00:00 - Introduction
00:00:15 - JavaScript
00:05:05 - Events
00:09:16 - Variables
00:13:18 - querySelector
00:22:53 - DOM Manipulation
01:19:11 - Intervals
01:21:27 - Local Storage
01:29:38 - APIs

This course picks up where Harvard University's CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. Topics include database design, scalability, security, and user experience. Through hands-on projects, students learn to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku. By semester’s end, students emerge with knowledge and experience in principles, languages, and tools that empower them to design and deploy applications on the Internet.

***

This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.

***

HOW TO SUBSCRIBE

HOW TO TAKE CS50

HOW TO JOIN CS50 COMMUNITIES

HOW TO FOLLOW DAVID J. MALAN

***

CS50 SHOP

***

LICENSE

CC BY-NC-SA 4.0
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License

David J. Malan

[spanishflew]

This guy is one of the best lecturers I 've seen. His presenting style is brilliant. He makes everything so clear.

[o.y.]

I am starting a petition to get this guy a bottle of water so that he can continue creating this kind of courses

[preyankjain]

26:11 formatted string in JS
29:00 assigning button to function without calling it
36:00 addEventListener & DOMContentLoaded
38:00 load JS file in header
40:20 <form> autofocus
44:14 querySelector using id & class
50:48 change css on click\
54:30 querySelectorAll
57:34 forEach
58:15 access dataset properties of button
1:03:00 select dropdown HTML
1:04:15 onChange for select dropdowns
1:05:26 “this.value”
1:06:01 all Events in JS
1:08:00 tasks website start
1:09:34 print something in console in JS
1:11:05 createElement in HTML using JS
1:13:00 keep input field empty after submitting form
1:15:00 disable submit button
1:15:15 listen for keystrokes to enable submit button
1:20:07 setInterval
1:22:15 local storage
1:38:29 convert response to JSON
1:42:15 round float numbers in JS
1:44:30 querySelector.onsubmit
1:45:26 use variable to access JSON data
1:49:53 catch error

[marccccoo]

This is, in my opinion the best JavaScript course available on the internet. Everything from the structure to the content is top notch. Thanks so much Brian!

[new]

(1:37:10) For those watching this video in 2024 or later:
The API website Mr. Yu used in the lecture now requires an API key. You need to sign up (for the free tier) to obtain one.

Note that there are some major restrictions in the free tier, such as:
1) You can ONLY make 100 requests per month.
2) The base currency is fixed to EUR (it cannot be changed to USD).

API URL would look like:
(address on the

[JamesScottGuitar]

Geeezzzz…as someone learning about this stuff on their own, this is SO GREAT!

Love how clear the instruction is...and how you address the questions that naturally arise as you present each concept.

I cannot thank you enough for doing this teaching.

THANK
🙏

[isachells]

This is absolutley amazing. There is NO content out there with this quality level. Good job, you handsome knowledgeable legend.

[adnanamin]

Halfway through the video I'm wondering why YouTube did not recommend this video before on my feed?

Excellent teaching style. Very easy to understand. This teacher should make more videos. I'd love to learn more from him. 🤞💯

[ranjeetnbittu]

I am completely speechless, the way Brian is teaching. I believe he is an awesome teacher, presenter, and what not. Thank you so much Brian for all this content. I know thank you is not an enough to express my feelings 😊😊 Awesome..Awesome..Awesome..

[theoglossa]

Wow. Such a superb teacher. I understand APIs now. To God be the glory!

[tusharubale]

Super easy explanation. How can he speak continuously and accurately without any mistake and that too without a glass of water.

[vyvy]

18:50 Change the innerHTML + ifelse statements
30:30 DOMContentLoaded
46:35 Take values from input field
53:00 data-color
55:00 Arrays
58:00
1:09:00 Task
1:18:00 disabled & check value's length

[Degenerated]

CS50 courses are extremely good. I can't believe I'm learning at such an extremely fast rate. Just half a year ago, I coded my first "Hello, World" and fast-forward, I wouldn't be too intimidated taking up a job as a web dev.

[Muyiwamighty]

Just 10min into the video, I knew he was born a teacher. Thanks !!

[qwertyui]

The best Javascript course I have ever seen. Finally, someone explaining the anonymous functions short syntax in a way I understand and I will never forget.

[cagri]

Starting from Django this course is not about coding but knowing what you can do meaningful with coding skills so a missing link in any other training. After this courses API part I can imagine how, many mobile applications can be created using weather forecast or many more.Take data some reliable source, make "perfect", meaningful, cute visualisation and ta daaa. You have something people want to see on their mobile.

[GhoulDad]

I like how by looking at where the most replayed part is, you can determine which part is going to be the most difficult. Brian is an amazing teacher. He deserves a raise.

ALSO the API exchange rate site now requires payment and an access key.

[linchen]

Thank you, Brian! Even though I'm not a newbie in Javascript, I still learned something in your course!!

[alainrouleau]

Great introduction to JavaScript, thanks.

In terms of APIs and what most people probably don't realize is that there's this trend to create APIs all the time. Even if it's just local and all you're doing is just accessing a simple SQLite database, for example.

Why? Because, even if you don't need the added layer of security, the idea is the interface of your API won't change very much over time. So, even if you upgrade to a totally different database system then you don't actually have to rewrite the code for your app.

Tools like FastAPI in Python, for example, allow you to quickly create an API even if it's just for local use.

So many great tools out there!

[yasirfarooq]

Please give Brian Nobel Price because with this video i am about to became a developer, the way Brian explain is so easy to understand this is a gift Brian posses because you can have al the knowledge or master degree but are you able to provide knowledge to other people so other people can benefit from your knowledge. This is Amazing with 0 experience in programming after watching this video from Brian i learn so much it is incredible even i am surprised by how much i was able to learn from this video. THANK YOU BRIAN.