# Exploring Basic JavaScript

First, the weird history of JavaScript

Javascript is a flexible language. This can be helpful or confusing depending on how look at it. Some of JS is imperative (for loops) and some is declarative (array methods). This will make sense later.

In this class, we'll learn through tutorials and live coding sessions. They will be feature-driven as opposed to language-driven. We will also start with vanilla JavaScript without jQuery to avoid any confusion. We'll introduce libraries formally in later classes—but if you are comfortable, feel free to use them now.

# Recap

With Simone, you've learned:

  • How to include a script via a tag in your html file, or as an external script linked from your html file (very similar to CSS in <head> vs. external stylesheet)
  • The console and console.log method
  • Primitives like strings, numbers booleans, objects, and arrays
  • How to define a variable
  • Operators (+, –, etc.)
  • Indexing an array (myArray[0])
  • Functions

!! What is everyone confused about so far? !!


# Let's do a walk through of dynamic content manipulation in JavaScript

# Objectives to cover over the next two weeks:

  • Manipulating existing static content vs. generating dynamic content
    • Static content = elements written in HTML manually
    • Dynamic content = using data (i.e., a list of image sources) to create HTML elements
  • Randomizing
  • Using HTML elements with JavaScript like buttons, sliders, dropdowns, etc.
  • How to use someone elses code + code commenting (learn how to NOT plagiarize!)

# What parts of the language we need to learn to meet our objectives:

  • Selecting elements from the document (HTML = document)
  • working with array and (maybe) objects
  • using JavaScript's built-in array methods manipulate and generate content
    • What's the difference between iteration with a method and looping? Why use one vs. the other?
  • setting the innerHTML of an element to set your generated/manipulated content
  • template literals
  • Math.random() and array shuffling for randomization
  • JavaScript events like onClick

In-Class Code

Check at the README file on Andrew's Site for our in-class coding examples. I'll maintain this throughout the semester so be sure to check when you need help remembering what we did in class

Last Updated: 2/29/2020, 3:33:43 AM