Introduction to Web Programming - Midterm Study Guide

Midterm Format

The midterm will be administered through Canvas on Wednesday Oct 21. It will be available all day but you will have 3 hours to complete the exam once you start. It is open book and open computer but all work must be completed independently. It will contain a mix of freeform concept questions, JavaScript function writing, "find the bug" type problems, and "recreate this target web page" problems similar to what you've seen on quizzes so far.

What is not on the test?

  • Regular Expressions
  • Specific CSS frameworks. I won't ask questions about Bootstrap specifically but you should know how and why CSS frameworks are included in a web page.

Topics

This may not be a 100% complete list of topics but it should get you most of the way to what you need. The slides are your friends and some of the interactive slides / code examples might be really helpful.

HTML Topics

  • Structure and Syntax. How do you write valid HTML? Know the verbiage (elements, attributes, classes, IDs, etc)
  • Purpose / Goal - Structure over presentation. Using the right tags
  • Know how to use the developer tools to inspect a given web page's HTML
  • Some Elements - You don't need to know every single HTML element for the test. A good "toolbox" of tags includes:
    • html: parent element for your page
    • body: where the page content goes
    • head: where the page metadata (title, stylesheets, etc) goes
    • script: include JavaScript
    • link: include CSS files
    • style: include CSS in your HTML directly
    • p: paragraph
    • a: link
    • span: inline text
    • div: generic container
    • section: another container type
    • ul: unordered list
    • table: like it sounds (also includes tbody, tr, td, thead, th)
    • input: user input field (often a textbox)
    • h1-h6: headings, titles of sections

CSS Topics

  • CSS Selectors - You should know the basic selector parts (. for class, # for id, plain text for tags) as well as combinators (eg. div #my-input looks for an element with an id of my-input somewhere inside a div)
    • You do not need to memorize all the weird possible selector types but you should be able to look them up if needed
  • Purpose of CSS - Why do we use CSS? Advantages over inline styles?
  • Selector Specificity - If two selectors try to apply the same style to an element, which wins?
  • How to include CSS in HTML
  • Responsive Design
    • What is a breakpoint?
    • Media queries
    • Using media queries to change a grid / flexbox layout
    • Flexbox properties: parallel and perpendicular position, direction
  • How to include CSS Frameworks. What kinds of things do they provide?
  • Some CSS Styles - You don't need to know every single possible CSS Style. Here are a few important ones
    • color, background-color: guessing a few named colors will be fine for the exam if you're trying to match a color. You should know what the other color types are though
    • border
    • margin, padding: margin is outside the border, padding is inside
    • display: inline, block, inline-block, flex, grid
    • position: absolute, fixed, relative
    • width, height

JavaScript Topics

  • Data Types
  • Variables (const vs let)
  • Variables are labels and not buckets to store data. Understand the evil twin example
  • if/else if/else Conditions
  • Loops
  • Functions - Know the syntax and the difference between defining a function and calling a function
    • 95% of the time you'll want to return a value. Unless the question asks otherwise, return rather than console.log
    • Returning ends the function. Returning a value too early will stop your code. Maybe you need to store something in a variable rather than just returning?
  • Arrays - Know how to read elements in a loop. Know how to add to the end. Know how to look at specific positions (myArray[0])
  • Objects - Remember the evil twin example
  • Practice writing functions
  • Know how to include JavaScript in HTML
  • Know what document.querySelector does
    • It uses a CSS selector and returns a reference to an element from your HTML
  • Know a few things you can do once you get a reference to an HTML element in JavaScript
    • Change element text: myElement.innerText = "something"
    • Get the value from an input: const username = myInputElement.value
  • Know how to respond to user input:
    • Add an onxyz attribute to an element. A couple handlers to know for now are onclick, onchange, oninput
  • Can you build this into a user input validation web page?
  • Read some of the examples at https://github.com/RyanKadri/cis1052-fall2020-examples/tree/master/c7-reacting-to-input
  • Know how to use the developer tools console to run and test your JS functions

Tips

  • Set up a template web page in Visual Studio Code. Make sure you can get Live Server working with your template before the midterm. This will help shorten setup time during the test
  • Make sure you know how to run your function in your browser's developer tools. The midterm is open book / open computer so you should be able to try out any functions you write
  • Use Visual Studio Code to write your code. It might feel easier to write code directly into Canvas but VSCode's syntax highlighting will help you know if you've made JavaScript errors
  • The exam is 3 hours long. Hopefully it doesn't take that long for everyone to complete. That said, remember to skim over all the problems and make sure you're not spending a huge amount of time on hard problems if you know the answers to easy problems right off the bat.
  • It is not strictly necessary but could be super beneficial to understand how to use the JavaScript debugger in the browser's developer tools (script tag). It will let you step through your code line by line and figure out what's happening if there's an error. We haven't covered this super deeply in class yet so you might need to do a little self-study for that.