Functions, variables and JSON.

Sorry this blog is so late!

Here is the plunk we should have gotten to by the end of the class.  We got most of the way there..
http://plnkr.co/edit/LbTLe8ya65xyjYOUPIsN?p=preview

So in the class, we got introduced to JSON, (Javascript object notation, which is the "new" XML, a way to pass data between OS platforms, programming languages, etc..).  We fiddled around a bit trying to capture JSON from Amazon.com and from assisted-living-communities.com using the Fiddler tool.
Fiddler acts as a proxy and captures all of the data that flows between your browser and websites.  The left pane in Fiddler shows all of this traffic and when you click on each line, and then click on the "inspectors" tab on the opposite pane, you can see the details of what was passed.  This ONLY can view HTTP traffic, not HTTPS.  If someone (a hacker) can place themselves between you and the webserver you are using, they can see all of your HTTP traffic with a tool like Fiddler.  This is a man-in-the-middle attack.  Scary!

Within the "inspectors" tab, certain requests have JSON (lower right pane).  If the request has JSON, go to the "raw" tab and copy the syntax that looks like stars off similar to :  [{"Images":[{"Id":"812","ThumbUrl":"http://www.choiceadvisory.com/images/listingimages/wa/812_images/thumb_812_0.jpg","Caption":"The Viewpointe on Queen .. etc..  Captured JSON data can be found in the data.js file in the plunk above.  After we capture this data, we can just assign it to a variable.

var data = Your_captured_JSON.

Who cares??

Well, this is how you might work with a "back end" developer.  She will tell you, "the JSON I will make available via my web service will look like this".  So, while she is still working, you can begin development on the front end.  When she is done, you get the JSON from her web service (programatically) instead of just putting it in a js (javascript) file.

There are comments throughout the plunk to get you more familiar with global variables, functions, page loads, etc..  Please post any questions.

For homework:
- The prev(ious) button doesn't work properly yet!  The page blows up when you are at the end of the properties and hit next.  Make the next button work.  There are hints in the scripts.js file on how to do this.
- Make some more attributes of properties appear on the page.  We at least need city, state and zip before we can launch this thing.
- Put latitude and longitude in the debug area for later use.  Maybe we could sell a map to the client of where these properties are.

Code Management & Homework assignment

Go Hawks!
Go Stanford (2 years in a row in Rosebowl!!!!)

Yesterday (Thursday 12-12-13) we talked about Code Management. 1st, we talked about a directory structure for your code. There are no hard-and-fast rules here, but for straight ahead client-side web development a common file structure is as shown below:

-ProjectDirectory (html files go here)
  -css sub directory
  -img sub directory
  -js sub directory

If we had a simple site named SpringsteenFanPage with a single index.html page, a css, js, and img file, the directory structure could look like this:

-SpringsteenFanPage
    -css
        |
        - stylesheet.css
    -js
        |
        - app.js
    -img
        |
        - logo.png
        - bruceEarlyDays.jpg
        - bruceCurrent.jpg
        - EStreetBand.png
 -index.html


After the brief discussion on File Structure, I asked you to look at the file structure for the HTML5 Boilerplate project on GitHub. There are a lot more files here, but the structure matches what I've listed above.

https://github.com/h5bp/html5-boilerplate

When then talked about version control systems. I'm not going to explain version control systems in the blog. Instead, I'm giving all of you a homework assignment of watching 4 short videos that explain Version Control and Git. Git is one of the most popular version controls systems in use today. It is what all the cool kids use.

HOMEWORK (you will need to GTS! to complete these assignments--feel free to post questions here if you need help).

0. Create a GitHub account if you haven't already

1. Install latest Git on your development machine

2. Watch Git videos here: http://git-scm.com/videos

3. Do this 15 minute Git online tutorial: http://try.github.io/levels/1/challenges/1

4. Download https://github.com/h5pb/html5-boilerplate

5. Create your own Git Repository named “Html5Boilerplate”

6. Edit index.html to say “Hello World from YearUp!”

6. Add all files to your repository

7. commit and upload

8. Post link to your repository

Learning HTML5 Boilerplate will server you well in creating your own client side web projects.

BTW, here is a good resource with online tutorials for learning software development skills: https://www.codeschool.com/. 

Go Hawks!

Go Stanford!!!

Hour of code

Here is an initiative sent to me by a friend that looks really interesting.  Check it out if you get a chance.  http://code.org/

More looping constructs

JavaScript - Loops Part Two

In the last JavaScript class we were doing
something like this in Plunker:

<html>
<head>
  <script>
      document.getElementById("btn")
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
  </script>
</head>
<body>
  <button id="btn">Push Me</button>
</body>
</html>

Actually, we were doing


  <script src="script.js">

And the code was in the script.js file, but I've simplified it by

just including the code itself, so it's all in one place.  Including

the code from the script.js file is equivalent.

Using the JavaScript console with Plunker

To debug JavaScript it's really useful to be able to type
or cut and paste code into the JavaScript console in the
Chrome Debugger.  But if we type or paste

document.getElementById("btn")

We get back null.  The reason is because of iframes.
The IFRAME tag in HTML is a way to include one
web page inside another web page.  So you say

<iframe src="http://google.com"></iframe>

and you've embedded the Google home page inside
your own web page.  And this is what Plunker is doing
when running your plunk.  It's creating an iframe to
run the code.  So when you bring up the JavaScript Console
you are looking at Plunker itself, and not your plunk.
Fortunately, the JavaScript debugger let's you select the
iframe that you want to debug.

Along the bottom after the clear button is a frame selector.
Just click on that and set the frame to plunkerPreviewTarget.

Now we can get our element ID

Okay, now let's back to our plunk above.

JavaScript Order of Operations

Our plunk above with the Push Me button isn't working.
The JavaScript Console (in the Chrome Debugger) reports:

Uncaught TypeError: Cannot call method 'addEventListener' of null    (index):5

So it's telling us that document.getElementById("btn") is returning null
so it's saying that button doesn't exist.    But it's right there in the code

  <button id="btn">Push Me</button>

And if we try to get it in the JavaScript console (using frame plunkerPreviewTarget)
we can get the button.  So why isn't it working.  For the same reason that
Jerry Seinfeld is a great comedian.  Timing.

Let's annotate our code with some timing info.

<html>
<head>
  <script>
      document.getElementById("btn")  // time t(0)
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
  </script>
</head>
<body>
  <button id="btn">Push Me</button>  // time t(1)
</body>
</html>

So the code is looking for the button before the button is created!  So how
do we fix it?  Well, we could just put the script after the button creation:

<html>
<head>
</head>
<body>
  <button id="btn">Push Me</button>   // time t(0)
  <script>
      document.getElementById("btn")  // time t(1)
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
  </script>
</body>
</html>

But we want to keep our code in the HEAD section?  In that case, we have
add an event listener for the "load" event on the window.

<html>
<head>
  <script>
    function onLoad(){                // time t(1)
      document.getElementById("btn")  // time t(4)
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
    }
    window.addEventListener("load", onLoad); // time t(2)
  </script>
</head>
<body>
  <button id="btn">Push Me</button>   // time t(3)
</body>
</html>

So now we create our onLoad() function, then bind it to the "load" event
on the window object.  Now our getElementById() isn't called until after
the window loads, which is after the button has been created.

Note: For performance reasons many sites are putting their script at the end
of the body.  This allows the page to start loading before the script loads
which can make the site load faster.

For Loops

Now let's get to some loopy goodness.  We looked at the document
cookies last time and if we split that into individual cookies we have
something to iterate.

<html>
<head>
  <script>
    function onLoad(){
      document.getElementById("btn")
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
    }
    window.addEventListener("load", onLoad);
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      console.log(i, cookies[i]);
    }
  </script>
</head>
<body>
  <button id="btn">Push Me</button>
</body>
</html>

Then we reviewed the simplified form:

    var cookies = document.cookie.split(';');
    for (var i in cookies) {
      console.log(i, cookies[i]);

We get the same result, but less typing and it's easier to read too!

But we don't want to have to look in the JavaScript console to
see the cookies.  Let's put them in our web page.

<html>
<head>
  <script>
    function onLoad(){
      document.getElementById("btn")
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
        var ul = document.getElementById("cookielist");
        for (c in cookies) {
          // cookies[c] looks like: __ga:GA1.2.3....
          var nameval = cookies[c].split("=");
          // nameval[0] now was the name, __ga
          // nameval[1] now has the value, GA1.2.3...
          var li = document.createElement("li");
          li.innerHTML = '<b>' + nameval[0] + '</b>' + ':' + nameval[1]
          ul.appendChild(li);
        }
    }
    window.addEventListener("load", onLoad);
    var cookies = document.cookie.split(';');
    for (var i in cookies) {
      console.log(i, cookies[i]);
    }
  </script>
</head>
<body>
  <button id="btn">Push Me</button>
  <ul id="cookielist"></ul>
</body>
</html>

Finally we talked briefly about the do-while loop.  It's typically
used when you want the loop to happen at least once.  Such as
when prompt the user for something.  So let's prompt the user
for a cookie name and keep prompting until they enter a valid
cookie name.

First, we'll introduce an object to hold the cookies so we can
look them up by name.

<html>
<head>
  <script>
    var cookieObject = {};
    function onLoad(){
      document.getElementById("btn")
          .addEventListener("click", function() {
              console.log("Button clicked");
          });
        var ul = document.getElementById("cookielist");
        for (c in cookies) {
          // cookies[c] looks like: __ga:GA1.2.3....
          var nameval = cookies[c].split("=");
          var name = nameval[0]; // the name, __ga
          var value = nameval[1] // the value, GA1.2.3...
          var li = document.createElement("li");
          li.innerHTML = '<b>' + name + '</b>' + ':' + value
          ul.appendChild(li);
          cookieObject[name] = value;
        }
    }
    window.addEventListener("load", onLoad);
    var cookies = document.cookie.split(';');
    for (var i in cookies) {
      console.log(i, cookies[i]);
    }
  </script>
</head>

Now we can prompt the user for a cookie.

<html>
<head>
  <script>
    var cookieObject = {};
    function onLoad(){
      document.getElementById("btn")
          .addEventListener("click", function() {
              nameprompt();
          });
        var ul = document.getElementById("cookielist");
        for (c in cookies) {
          // cookies[c] looks like: __ga:GA1.2.3....
          var nameval = cookies[c].split("=");
          var name = nameval[0]; // the name, __ga
          var value = nameval[1] // the value, GA1.2.3...
          var li = document.createElement("li");
          li.innerHTML = '<b>' + name + '</b>' + ':' + value
          ul.appendChild(li);
          cookieObject[name.trim()] = value;
        }
    }
    function nameprompt() {
      var name;
      do {
        name = prompt("Name?");
        if (cookieObject[name]) {
          alert(cookieObject[name]);
        }
      } 
      while (!cookieObject[name])
    }
    window.addEventListener("load", onLoad);
    var cookies = document.cookie.split(';');
    for (var i in cookies) {
      console.log(i, cookies[i]);
    }
  </script>
</head>
<body>
  <button id="btn">Push Me</button>
  <ul id="cookielist"></ul>
</body>
</html>

So now our button calls a new JavaScript function, nameprompt, that
runs a do-while loop to prompt the user for a cookie name.  And it
keeps prompting until the user enters a valid cookie name.

One other change we had to make was to deal with spaces in the name.
When we split the name/value string on '=' we get spaces at the beginning
of some of the names.  So we fixed that by calling .trim() on the name.

Well, that was what we covered.  Hope it all makes sense!

Code on!

Project Thursday

Sorry for the late start to the class, I hope I was able to provide a little assistance.  I would like to encourage you all to post questions to the blog about the personal projects you have been working on.  We are all willing to dig into any problem you just can't figure out, no matter how specific.  

The best things you can have for future employment is a decent resume of schooling and some projects you can share.  A portfolio of coding projects or a well established website is a great way to impress in an interviewer.

Intro to jQuery

In the class today we went over an introduction to jQuery.
Make sure you read all about jQuery for any questions you have here: http://jquery.com
For documentation on all the jQuery calls: http://api.jquery.com

We learned how to select elements by ID and by Class name.  The functions we learned about are: hide, show, click, val, text, and html.

For the in class exercises refer to these links:

#1: http://plnkr.co/edit/lHOBZJEpCJIqaYngzdsz

#2: http://plnkr.co/edit/gXFKuOQjrHxPm3qd92UR

Project preparation

In class today, we built a framework for our future projects.  We set up multiple pages that were all linked together.  We linked to Twitter Bootstrap, a CSS framework to use for our page layouts.  Here is a plunk showing the concepts we covered.  Feel free to use it to get started on creating something big!

Think about the website you want to build for your project.  And don't miss Monday, we are going to introduce JQuery, which makes certain things in javascript a whole lot easier.  From now on, Mondays are for Javascript and Thursdays we will introduce a few concepts and then help you with any projects you are working on.  

If you are wanting to learn some new skillz, Codecademy is a great site to learn all sorts of new things.

Thanks for a great class today guys!

Advanced CSS

Today, we went into CSS a little deeper.  We used this plunk.  We covered how when you write HTML, the browser styles this for you, WITHOUT any CSS.  When you are viewing a webpage and inspect an element or use F12 to view the Chrome debugger, it will tell you which elements were style by you directly, supplying the file and the line number.  It also shows you which rules were applied via the browser, the rules that are applied by your browser are referred to as "user agent stylesheet".  When you don't have a CSS rule that applies, the "user agent stylesheet" is used.  The "user agent stylesheet" is the default and anything more specific, supplied by you overrides these settings.  You can have multiple stylesheets.  If two rules collide, the LAST one that is applied wins.
I have found the best practice when setting up your rules is to first write your HTML as correctly as possible, then start applying your CSS directly to those HTML elements.  Initially instead of <p class="normal">some text</p> and it's corresponding css rule p.normal { font-size: 12px; }, try to just use <p>some text</p> and css rule p {font-size: 12px;}.  Use classes as exceptions to your normal CSS until you need more control over the element.
More specific rules win in CSS.  div#header wins over #header and div.  p.inverse wins over .inverse and p.  Keep this precedence in mind, and be ONLY AS SPECIFIC as you need to be.  This will help later.  As an example in the plunk, in the CSS I used the selector nav ul li.  This was enough to JUST target the ul (unordered list) from the navigation.  It didn't effect the ul on the bottom of the page.  We could have used classes to do this, but we didn't need to
During class, we downloaded and started using Twitter Bootstrap.  This CSS framework solves many annoying problems with browsers.  It does a reset so your pages should look the same in Chrome, Firefox, Internet Explorer, etc..  This wasn't the case before.  It also makes it easy to create pages with columns.  One of the largest benefits of Bootstrap is that if you follow their guidelines, your web page will work well on a desktop, ipad or smaller mobile device.
I put several divs on the page with twitter bootstrap classes.  These won't do anything until you download the latest version of Bootstrap and put it into your project. Make SURE you have the latest, version 3.0.2.  A couple students got version 2.3 accidentally and it didn't with our HTML.  So download it, look in the CSS directory and copy the contents of the file to bootstrap.css in your project (click "new file" on the left).  Make sure to link bootstrap.css to all of your HTML files.  Create another <link> tag, similar to the one in your index.html file.
There are a lot of things in Twitter Bootstrap.  Take a look at how I used it in the plunk.  You need to have divs nested within each other.  Start with a div like this:  <div class="container">  inside of that put a row <div class="row"> inside of that put your columns.  Each row can have 12 and only 12 columns.  You can use <div class="col-md-12"> to fill the whole page for that row, or you can split it up however you like, for example:  <div class="col-md-4"></div><div class="col-md-8"></div>.  Put your content inside the divs.  In the plunk, I put a border around the divs so it was clear what was happening.

Useful to remember:  Ctrl-F5 forces your browser reload CSS and Javascript.  Remember this when you CSS just isn't responding to what you are doing.

Ok, for homework, download Bootstrap, put it into your project and add a contact us page to the project.  Make sure your menu works to link to it and put some content on there Bootstrap style (container, row, column).  Post your plunks on the blog when you are done, OR if you have problems.  If you get stuck, post and ask what's wrong with the code.  You should have a mini website when you are done, good luck!

JavaScript Fundamentals I

Class Recap

We covered a lot of ground in this class! Maybe a little too much :)

1. Functions
2. Control Structures
3. Loops

We worked together to fill in the missing pieces of a partially complete Lottery web application:

• Partially complete Lottery Plunker: http://plnkr.co/edit/e20uES?p=info
• Completed Lottery Plunker: http://plnkr.co/edit/bGBk1W?p=info

Homework

If you missed this class, don't worry! You can catch up by doing the Homework.

1. Create an account at Codecademy
2. See how far you can get through Codecademy's Introduction to JavaScript track: http://www.codecademy.com/tracks/javascript

You can learn a ton by going through these lessons. Whether you attended or not, I encourage you to spend some time on this. It's worth it! (Lessons 1-10 cover material closely related to what we went over in class, plus some.)

Slides

Holloween class recap & Homework assignment

Thanks all who came to the Halloween class! I know you have a lot going on with your other classes, and with life in general, and probably Halloween in particular, so it is an honor to have you show up for an "optional" class about I subject I love.

Today we did some CSS layout exercises. We started with an undecorated sample resume (http://bit.ly/1dUTtzy) and over the course of the class we used the plunkr environment to turn it into something that looked decent.  We worked with CSS properties like font-size, font-weight, text-align, margin-bottom, margin-top, margin-left, margin-right and a few other things. We discussed the difference between using "em" and "px" for setting the font size and we create an anchor that used an "email href". There are many ways to do the same thing and we did a couple of small experiments to demonstrate that.

The homework assignment is to use the same CSS techniques we practiced in class to make the U.S. Constitution have a nice presentation. The link to the homework is below:

http://bit.ly/17vQMml

Doing this work should help cement the concepts and techniques we went through in class. Please post a link to your plunkr solution here on the blog. If you missed class, try to do it anyway. We're here to help...and remember you can always GTS!

Today we handed out a few $1 bills for laughs. Who knows, maybe next class I'll hand out $5 bills. Let you classmates who have been ditching class know they may not only be missing out on learning so lucrative skills, but they may be missing out on cash prizes ;)

I really love programming and development of all kinds (web, server, embedded systems). It is a lot of fun once you get going with it and people actually pay you good money to do it! Pretty fricking amazing! Anyway, love having you come to class and hope to see you all really develop your developer chops over the next couple months.

Have a great weekend!

-Dan

Exercise Day

We walked through two sample Google Chrome extensions.  The first one is called One-click Kittens and is described in Getting Started: Building a Chrome Extension.  We all created a Folder called ChromeExt on the Desktop and put the four files for One-click Kittens in the folder. We followed the instructions on the page getting started page for loading the chrome extension.

Then we briefly went over a few different types of Chrome Extensions on the Chrome Extensions Overview page.

• Browser extensions
• Always available
• Page extensions
• Only appear for specific web page
• Content extensions
• Can change the content of a web page every time it is loaded

One-click Kittens is a browser extension.  The most interesting are content extensions which can be used to automatically change the content of pages, to highlight things or remove things.

Finally, we walked through another browser extension sample called Page Redder described on the Sample Extensions.

First Javascript class!

CSS Next Steps

Good class tonight gang.  Could everyone send an email from their GMAIL ACCOUNT with their name and a picture profile picture to Derek.Dunnom@Gmail.com?  Would help to remember names, plus we need to get all your email addresses so we can send updates and give you access to the curriculum document.

Someone asked for the plunker url, here it is: plnkr.co

Here are the slides for class.  PLEASE SAVE YOUR PLUNKS AND PASTE THEM AS A RESPONSE TO THIS BLOG POST.  You will be doing this for homework for the rest of the class.  As always, post if there are any questions OR feedback for the instructors.

CSS

Sorry for the late posting! On Thursday we covered the remainder of the Lists & Tables lesson from Monday, and introduced CSS.
When coding up your CSS, remember to pay close attention to the brackets - { and } - and the semicolons at the end of each setting. CSS is much stricter on its syntax than HTML is!
To see some further examples of CSS, open up the Chrome Developer Tools and go to the Elements tab (leftmost). In the right pane you'll see all the CSS for the various elements on the page!

Lists & Tables

Great third day! You all picked up lists and tables very quickly. Sorry we didn't have enough time to do the second exercise, so consider this your homework: Read the slides and perform Table Exercises 1 & 2. If you get stuck, the HTML for each is in the notes of the exercise slide (check the gear button). See you guys on Thursday!

Nerds who care introduction class

Welcome to the second day of class.  Kris, JD and Derek are excited to meet the students and get them set up for the coming semester.  Today will be more about setting up your development environment online and making sure you have access to the tools you need. Here are the slides for reference

Web Development Intro

Great class today guys! Dan and I were both impressed with everyone. Your homework, if you get itch, is to play around with the tags we introduced you guys to and see what kinds of bookmark and picture pages you can make!
Be sure to show up Thursday to get the syllabus and class info, and help plan a project we'll be working on the whole term! As always, please ask questions if you have any. We're here to help!

Eight Nerds Who Care will be posting notes here from web development classes starting mid September.  Bookmark the page if you are a student in our classes or you are a developer and want to answer student questions.  The students are from Yearup.org, and take classes in Belltown, Seattle.  The instructors are web professionals who want to give back to their community.