Examius
🌍 CS50x: Introduction to Computer Science · flashcards
CS50x: Introduction to Computer Science Web Programming Flashcards
51 question-and-answer cards covering Web Programming as it is examined in CS50x: Introduction to Computer Science. 24 of them are printed below, taken from across the deck — no signup, no paywall on the preview.
24 sample cards from the Web Programming deck
Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.
In modern JavaScript, how do let and const differ when declaring variables?
let declares a block-scoped variable whose value can be reassigned. const declares a block-scoped variable that cannot be reassigned after initialization. Both are preferred over the older var, which is function-scoped and prone to bugs. Example: let counter = 0; const MAX = 10;
In JavaScript, what is the difference between the == and === comparison operators?
== is loose equality: it converts operands to a common type before comparing, so '5' == 5 is true. === is strict equality: it compares both value and type with no coercion, so '5' === 5 is false. Best practice is to use === (and !==) to avoid unintended type-coercion bugs.
Write the structure of a JavaScript for loop and an if / else if / else conditional.
Loop: for (let i = 0; i < n; i++) { ... } — initialization; condition checked before each iteration; update after each iteration. (JavaScript also has while and do...while loops.) Conditional: if (x > 0) { ... } else if (x < 0) { ... } else { ... } — branches chosen by the first true condition.
What is the syntax of addEventListener in JavaScript, and what does it do?
element.addEventListener('event', function) — e.g., button.addEventListener('click', function() { alert('Clicked!'); }); It registers a callback (event handler/listener) that the browser invokes whenever the named event (like 'click') occurs on that element. This attaches behavior in JS instead of inline onclick attributes.
Why do developers wrap DOM-manipulating JavaScript inside a listener for the DOMContentLoaded event?
Because a <script> in <head> runs before the page's HTML below it has been parsed, so querySelector would return null for elements that don't exist yet. document.addEventListener('DOMContentLoaded', function() { ... }) delays the code until the entire HTML document has been parsed and the DOM is built, guaranteeing elements are available.
Name five common browser events you can listen for and when each fires.
click — user clicks an element; submit — a form is submitted; change — a form control's value changes (e.g., a <select> choice); keyup / keydown — a keyboard key is released / pressed (used for as-you-type features); mouseover — the cursor moves onto an element. Others include load, blur, focus, and scroll.
What is the DOM?
The DOM (Document Object Model) is the browser's in-memory, tree-structured representation of a web page: the document is the root, and every element, attribute, and piece of text is a node in a hierarchy mirroring the HTML nesting. JavaScript can read and modify this tree via the global document object, changing the page dynamically without reloading.
What do document.querySelector and document.querySelectorAll do?
document.querySelector(selector) returns the first element in the DOM matching a CSS selector — e.g., querySelector('#greeting'), querySelector('.item'), querySelector('h1'). document.querySelectorAll(selector) returns all matching elements as a NodeList you can iterate over. They are the standard way to grab elements before reading or modifying them in JavaScript.
After selecting a DOM element in JavaScript, how can you change its content, style, and attributes?
Content: element.innerHTML = '<b>Hi</b>'; or element.textContent / element.innerText for plain text. Style: element.style.property, e.g., element.style.color = 'red';. Attributes: element.setAttribute('href', url) or direct properties like element.value for inputs. You can also toggle classes with element.classList.add/remove/toggle.
In Flask, how do you associate a URL with a Python function? Give the syntax.
With the @app.route decorator applied to a view function: @app.route("/") def index(): return render_template("index.html") When a request arrives for that path, Flask calls the decorated function and sends back whatever it returns as the HTTP response.
What is a decorator in Python, as used by Flask's @app.route?
A decorator is a function that takes another function and extends or modifies its behavior, applied with the @ syntax above a function definition. @app.route("/path") registers the decorated function in Flask's URL map, so Flask knows to invoke it whenever an HTTP request matches that path.
By default, which HTTP method does a Flask route accept, and how do you allow POST as well?
By default a route accepts only GET. To accept others, pass the methods argument: @app.route("/login", methods=["GET", "POST"]). Inside the function you branch on request.method — commonly rendering a form on GET and processing the submission on POST.
In Flask, what is the difference between request.args and request.form?
request.args holds parameters from the URL's query string, i.e., data sent via GET (e.g., request.args.get("q")). request.form holds parameters sent in the body of a POST request, such as submitted form fields (e.g., request.form.get("username")). Using .get(key) returns None instead of erroring when the key is missing.
What happens when a Flask view function returns render_template("page.html", name=value)?
Flask loads page.html from the templates/ folder, has Jinja substitute the passed keyword variables into the template's placeholders, and returns the resulting HTML as the body of an HTTP response (status 200 by default) that is sent back to the client's browser.
In Flask, what do redirect() and url_for() do, and how are they used together?
redirect(location) returns an HTTP redirect response telling the browser to request a different URL. url_for("function_name") generates the URL registered for a given view function. Combined — return redirect(url_for("index")) — they send the user to another page after an action, e.g., after a successful POST (the post/redirect/get pattern).
In Jinja templates, what is the difference between {{ ... }} and {% ... %}?
{{ expression }} is an output placeholder: the expression's value (a variable passed from Flask, e.g., {{ name }}) is substituted into the rendered HTML. {% statement %} performs template logic without direct output: conditionals ({% if x %}...{% endif %}), loops ({% for item in items %}...{% endfor %}), and inheritance tags like {% extends %} and {% block %}.
How does Jinja template inheritance eliminate duplicated HTML across pages?
A base template (layout.html) contains the shared boilerplate and declares insertion points: {% block body %}{% endblock %}. Each child template starts with {% extends "layout.html" %} and supplies only its unique content inside {% block body %} ... {% endblock %}. Rendering the child merges its blocks into the layout, so headers/footers live in one file.
What is an HTTP cookie and how does the server set one?
A cookie is a small piece of key=value data that a server asks the browser to store, via the Set-Cookie: key=value response header. On every subsequent request to that server, the browser automatically sends it back in a Cookie header. Cookies commonly carry a session identifier so the server can recognize a returning user (which also enables tracking).
What is a session in web programming, and how do cookies make sessions possible?
A session is per-user state kept on the server (e.g., who is logged in, a shopping cart) across multiple requests — necessary because HTTP itself is stateless. The server stores the data under a unique session ID and sends only that ID to the browser as a cookie; each later request carries the cookie, letting the server look up that user's data.
In Flask, how do you use sessions to remember a logged-in user?
Configure Flask-Session (or Flask's signed cookie sessions), then treat session as a dictionary: on login, session["name"] = request.form.get("name"); to read, session.get("name"); to log out, session.clear(). Flask handles the underlying cookie automatically, so each visitor sees only their own session data.
What is AJAX, and why is it useful?
AJAX (Asynchronous JavaScript and XML) is the technique of having JavaScript make HTTP requests in the background, after the page loads, and update parts of the page with the response — without a full page reload. It enables dynamic features like live search suggestions, infinite scroll, and chat, and today typically exchanges JSON rather than XML.
How do you make an AJAX request with the JavaScript fetch API and use the JSON response?
fetch(url) returns a Promise for the response; chain conversions and handlers: fetch('/search?q=' + query) .then(response => response.json()) .then(data => { /* update the DOM with data */ }); Or with async/await: const response = await fetch(url); const data = await response.json(); — then modify the page using the parsed data.
When designing a web project, what is scope, and what is the recommended way to define it (as in CS50's final project advice)?
Scope is the boundary of what the project will actually do. Best practice: define a good outcome (the MVP — minimum viable product you're confident you can finish), a better outcome (what you expect to achieve), and a best outcome (stretch goals). Start deliberately small and add features incrementally, rather than over-promising and failing to finish.
During implementation of a web project, what development practices help you make steady, verifiable progress?
Build iteratively: implement and fully test one small feature at a time rather than everything at once. Keep concerns separated (HTML structure, CSS styling, JS behavior, server logic in distinct files/layers). Use version control (git) to save working checkpoints, test in the browser frequently, and only move on when the current piece works — making bugs easy to localize.
What this deck covers
The Web Programming deck follows the CS50x: Introduction to Computer Science Web Programming syllabus — 6 chapters and 19 topics — so questions land on material that is genuinely examinable rather than trivia around it. That works out to roughly 8.5 cards per chapter.
Answers are written to be recallable, not just readable — averaging about 323 characters, which is long enough to carry the reasoning and short enough to say out loud.
A deck like this earns its keep on the second and third pass. Read the syllabus first so you know the shape of the subject, then use the cards to find the specific facts that have not stuck.
Web Programming flashcards FAQ
How many Web Programming flashcards are in this CS50x: Introduction to Computer Science deck?
51 cards. This page previews 24 of them, sampled evenly across the deck so you can judge the difficulty before installing anything.
Are these CS50x: Introduction to Computer Science flashcards free?
Yes. The preview here is free to read with no signup, and the full 51-card deck is free inside the Examius app.
What do the Web Programming cards cover?
They follow the CS50x: Introduction to Computer Science Web Programming syllabus — 6 chapters and 19 topics — so the questions track what is actually examinable.
How should I use these flashcards?
Read the syllabus first so you know the shape of the subject, then drill the deck. Examius schedules each card with spaced repetition, so cards you keep missing come back sooner and ones you know drift further apart.