HTML/CSS
Animations! That's what we're working on today. It's a simple animation, really. We're just going to do model of the solar system. Sadly, there doesn't seem to be a cool scientific name that goes with that. Anyhoo, to start out with, it's just the sun and earth. I'll see if I can get more in there afterwards.The first new thing is this:
#earth {
/* Style your earth */
position: absolute;
top: 25%;
left: 25%;
}
The %'s make the image in the earth tag adhere to a grid. It's much easier to use the % when you just need something in a general area. You can still use the <px> method if you need more accuracy.
The next new thing is:
box-shadow: 0 0 64px 10px white;
That's a line of CSS. Box-shadow does pretty much what you would expect. It gives a shadow to any element that you want. Here's what Mozilla tells us about the box-shadow's parameters:
"1st <length>
Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd <length>
Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd <length>
Specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
4th <length>
Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract."
The 4<length> also is the part that deals with brightness.
You know things are about to get fun when the lesson starts off with this:
"The next couple of steps are going to be a little tricky, so hang in there."
JavaScript
Today, we get to deal with a new method called <hasOwnProperty> it gives back a boolean response as to what is in an element. Search for what you think is there, and it'll tell you. Example:
var myObj = {
// finish myObj
name:"john"
};
console.log( myObj.hasOwnProperty('name') ); // should print true
console.log( myObj.hasOwnProperty('nickname') ); // should print false
This might seem stupid now, but when you're dealing with thousands of lines of code, where the object is more complex, or it's not easy to be sure, this is what you want. It'll tell you straight up!
And here we have a use-case in an <if/else> statement:
var suitcase = {
shirt: "Hawaiian"
};
if(suitcase.hasOwnProperty("shorts")){
console.log("You remembered to pack!");
}else{
suitcase.shorts="blue";
console.log(suitcase.shorts);
}
So, as you can see, it's got quite a lot of good uses!
I've already gone over the <for> loop and I might have talked about the <for-in> loop? Not sure. Let me recapitulate: the <for-in> loop is like the <for> loop, but it's more simple. Here's a comparison:
The <for> loop that would print out the contents of an array:
var array = ["hey", 2, true,"dude"];
for (var i = 0; i<array.length; i++){
console.log(array[i]);
}
It's cycling through each element of the array, and printing it out to the console.
And here's a <for-in> loop doing the same thing:
var array = ["hey", 2, true,"dude"];
for (var i in array){
console.log(array[i]);
}
notice how less verbose it is.
Now, you might be thinking that having these two loops that are practically the same is just stupid. Why not just have one? Actually, if you look at the first loop, you'll notice that it has a specific end-point. It's only going to go as far as the end of the array, and when you're using it to do something else that needs a specific end-point, like creating a long list of numbers that doesn't crash, that would be the <for> loop. The <for-in> loop works better for these types of use-cases. Something where you're worried about the properties in an element and you need them printed out, numbered, or anything else you can think of.
