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.