Javascript Lesson Plan

lesson_plan_1-3.txt

#BASIC JAVASCRIPT 101
---

LESSON 1: Getting comfy

You'll need: 

* a web browser
* a text editor (I like https://macromates.com/download)
* a folder on your desktop called "development"
* a link to http://getbootstrap.com/getting-started/#template
* coffee

In this lesson, the objective is to get a simple Bootstrap 3 framework with local files set up so you'll be able to craft a "Hello World!" HTML page. 
No web server is required here: all the child files should be placed in tidy subfolders within /development. 
You'll need to download jQuery and link it into the page (no CDN files allowed at this point). 
At the end, your console + network inspector should have no errors.

Name this file "lesson1.html".

BONUS POINTS: Horizontally center the "Hello World!" text in the page, using divs with specific CSS classes. NO <CENTER> ALLOWED.

---

LESSON 2: My First Function

You'll need: 

* the Hello World! from LESSON 1
* coffee

In this lesson, you'll make a big button with an ID of "button" in the middle of the page, and when you click it an alert will come up and say "WOW".

You'll use these Javascript basics:

* a <script> section in your .html file http://www.w3schools.com/tags/tag_script.asp
* the function call http://www.w3schools.com/js/js_functions.asp
* an onclick event handler attached to your button http://www.w3schools.com/jsref/event_onclick.asp
* the alert function http://www.w3schools.com/js/js_popup.asp

Name this file "lesson2.html".

BONUS POINTS: More buttons that say or do different things.

---

LESSON 3: The jQuery Way Of Doing Lesson 2:

You'll need: 

* the Hello World! from LESSON 2
* coffee

In this lesson, you'll replace your onclick-activated functions with jQuery listener events.
You'll use the jQuery function that fires on DOM load, and within that function you'll assign "click" events to the button by targeting the ID of the button in the DOM. 
There should be no onclick placed into the HTML of the button itself.

You'll use these jQuery basics:

* The on.Ready function https://api.jquery.com/ready/
* The .click function https://api.jquery.com/click/

Name this file "lesson3.html".

BONUS POINTS: Make a couple buttons and make them different colors via Bootstrap's CSS.