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:

• Treehouse JavaScript Basics
• Treehouse JavaScript Loops, Arrays and Objects
• Treehouse jQuery Basics
• Required: Read chapters 1-3 Duckett
• Optional: Read chapter 7 Duckett
• Required: Do Introduction to javaScript and jQuery
• Required: Update your notebook project with one or more jQuery cards. Some cards should document what you’ve learned about jQuery. And at least one card should actualy use jQuery.

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

• Ducket Chapter 1 The ABC of Programming
• Duckett Chapter 2 Basic JavaScript Instructions (download ppt or keynote)
• Duckett Chapter 3 Functions, Methods, Objects (download ppt or keynote)
• First assignment: Introduction to javaScript and jQuery