Web Development Foundations logo

Web Development Foundations

Objectives:

  • JavaScript basics: statements, functions, objects
  • jQuery basics: Selection, Event Listeners, DOM manipulation
  • Tools Exploration: Using Developer Tools to see JavaScript in action

By the end of these lessons, students will be able to:

  1. Identify the basic elements of JavaScript
  2. Write JavaScript statements, variables, strings, numbers, and arrays
  3. Print JavaScript commands to an html page
  4. Write simple JavaScript functions that respond to clicks and change page content
  5. Use the Chrome Developer tools to do the following
    • Displaying the developer tools
    • Stopping code with breakpoints
    • Single stepping code
    • Seeing variables
    • Seeing the DOM

Necessary materials:

  • Duckett textbook

Process

  1. Opening
    • Review Primer Basic content overview
    • Describe Primer Pro content and expectations on assignments and homework
  2. Introduction to JavaScript
    • define: variables, strings, numbers, floating point number, integer, boolean, concatinate
    • idenfity: basic manipulation of strings with math
  3. Continue JavaScript introduction presentation
    • objects, DOM
    • methods to call objects (console.log(), document.write, prompt(), alert()
    • javaScript events
    • functions: definition, calling, syntax
  4. Assignment First assignment: Introduction to javaScript and jQuery

Homework:

  1. Add a script tag to include jQuery in your notebook file.
  2. Read this fun page of possible jQuery effects.
  3. Add one of these effects to your notebook card.

Assessment:

  • Collaborative quiz - pair up and use w3schools, MDN, and Chrome Developer Tools to answer the questions
  • Quiz in homework assignment

References