18 Jan 2024 - Thursday

• Discuss Readings / Watchings / Projects
• Introduce Javascript
• Code Interview Practice
  • TAs will interview Paul following format
• Code Interviews Begin

a language to add interactivity and dynamic behavior to web apps. Let's first see how Javascript views the HTML and CSS aspects we've learned about so far, through the Document Object Model (DOM)

Javascript is an interpreted, prototypal-inheritance, imperative programming language that is available in all browsers, and is the universal language (for better or worse) for web development.

• Open any website in your browser.
• Right click on any element and Inspect to open your Web Inspector.
• Click the Console. This is a REPL.
• const tags = document.getElementsByTagName("*")
• You've now gotten a list-like HTMLCollection of all tags on the page.
  • You can find the length by evaluating tags.length
  • How many tags does your chosen page have?
• Pick a tag at random, say tag[73] if your page has more than 74 tags.
• Find out what styles it has by evaluating tags[73].style
  • This is an Object, or a dictionary in Python, or a hashmap that we learned about in DSA. It maps keys to values, using the index operator [] (square brackets)
• Change its style, e.g. its border, by setting
  • tags[73].style['border'] = "10px solid green" or whatever your preferred color is.
  • You may try "dashed" or "dotted" style instead of "solid"
• Now we're going to write a loop. When you press enter, the console knows not to evaluate right away if you open a new scope with {

for (let i = 0; i < tags.length; i += 1) {
  console.log(tags[i]);
}

With a pair programming partner, discuss how you might use the beginnings of what we've learned so far to convert a CSV data file into tags, as preparation for our final project.

Continue working on your Week 1 assignments in pairs.

• 12noon - 1pm with Dr. Catherine Kehl

• 1:00 Your CSV into Divs: The First Steps to Web Visualization
• 1:30 - 2:30 Dr. Kehl teaching demonstration
• 2:30 curl / DNS activity
  • Introduction to Week 2 assignments.