Wednesday, December 11, 2013
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/
Tuesday, December 10, 2013
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">
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
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!
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")
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:
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 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!
Friday, December 6, 2013
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.
Monday, November 25, 2013
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
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
Thursday, November 21, 2013
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.
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!
Thursday, November 7, 2013
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!
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!
Monday, November 4, 2013
JavaScript Fundamentals I
Class Recap
We covered a lot of ground in this class! Maybe a little too much :)
- Functions
- Control Structures
- 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.
- Create an account at Codecademy
- 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
Subscribe to:
Posts (Atom)