Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Friday, May 23, 2014

Explain (not all) The Things/ It's Not Scary

   Well, howdy y'all! It's Friday and that means that I have a post to... post? Yeah, that's gotta be a thing. Today, for my "doozy" I decided to take some of the names of things in JavaScript and try to define them AND link to Mozilla. They know how to explain things really well. Sometimes. So, after having made it to the coffee shop and dealt with people, I'm ready to do this. My music is random things from Google and The Roots' latest album. So, let's plug in and plug away!


 JavaScript 

      So, the first things we should cover are the basics such as Values, variables and literals.

Variables
   Variables are just like in algebra. They store info. Of any type. For example: var x = 25 var x = "Hello" var x = true Notice that var is variable. Duh. The first var is a numeral. Numerals are numbers. Duh, again. Most of the names for things make sense which is good because there are a lot. The second var is a string. A string is anything (numbers, symbols, punctuation) surrounded by quotations. "this" "15" "A" "string..." those are all strings. the last var is a Boolean. You hear a lot about Booleans. A Boolean is just a true or a false. That's it.

Arrays
   Arrays are mainly just like variables, but there's usually more than one of them. The only difference is that they have brackets([]) surrounding whatever it is that is an array. For example: var x = ["French Roast", true, 25]; Notice that different types in the array. This can be very helpful when you need to call certain things multiple times.

   Now, I don't expect to show you all of the things that could be called. I'm just trying to show that everything makes sense and has its own way of working. It's not a scary foreign language. It's just something that can make really cool things happen.
   For a larger list with bigger words, check out this to realize that there is a lot of stuff. But, again, don't let it scare you. Just think of the dictionary. That's a really thick book, but you don't have issues communicating. Same thing with this. The words you need, you will memorize.
For now, that'll be all. See y'all on Monday.


 --Martin 

Wednesday, May 21, 2014

Back To The Basics/.js All Up In Your HTML

Hello, y'all! Yup, it's a Wednesday. Again. Darn thing keeps coming back! Today's post is going to cover JavaScript since we're back to the basics, all of y'all should be able to keep up. Today's music is NOT GrooveShark. Whoa, right? Not really. I'm a big Jimmy Fallon fan and watch the show all the time. The band that plays on there is called The Roots and they came out with a new album, so that's what I'm listening to! That took a while to explain. I love the album! It's called "... and the you shoot your cousin" Yup. On le Google Music. It's also on iTunes and whatnot. So, now that I overly explained my musical choice, let's plug in and plug away!


 JavaScript 




      This might have been covered before, but like I said, I'm going over some things again. Today, I'm working on using a .js script on an HTML5 webpage. Which is a lot like CSS. You can put in the <script> tags into the actual HTML page. The location of which can mean things. Not like, spiritually! Goof. Like when they when triggered and such. The easiest(for now) way to do it is how you call a CSS script from another page. For those of you that don't know how to do that, go here where it talks about other things getting called and how it can effect things. Affect things? Buh. Those two... ANYhoo, you just in a script like this:

<!DOCTYPE html>
  <head>
    <title> Hola al mundo</title>
    <script type = "text/javascript" src = "Day_One.js"> <!--The script for the .js stuff -->
    </script>
  </head>
</html>

   Notice the script tag calling out the type and source of the .js script from a separate file. Now, once things get going, the source can became quite convoluted especially if you're using a NAS drive or something fancy. So, always remember to get everything correct. Now, the .js side to this doesn't have to change anything, it just does its own thing, and gets called out by the HTML. So, the code that I'm using that is getting called out looks like this:

 for(i=0; i<10; i++)
      if(i===5){
        alert("there is a five");
      }else{
        document.write(i);

      }
Now, the fun thing to be noticed here is that the code will run from 0 to 4, throw the alert at you, and only AFTER you acknowledge it, the code will continue. Pretty nifty! So, there you have it, how to connect the two things. 

   I'm going to go find a doozy for y'all on Friday. See y'all then!


--Martin

Monday, March 24, 2014

Embed The Fact That I Finished

     I have made it back for another week! Not that I went far. I did venture out into meatspace a few times. Don't worry, I have virus protection (read Kleenex) and no one got hurt. The cool news is that I finished the XHTML/CSS section of the class! Now it's onto .js! I've been using Sublime Text 2 on the XFCE partition on my Chromebook and it's been so nice to use it, but Brackets has proven itself great when it comes te HTML/CSS so I think I'll use Sublime Text 2 mainly, but if I have something that is just HTML/CSS then it'll totally be Brackets. On Wednesday, expect some .js. Today I don't have Grooveshark going(such shock!!) Instead I'm listening to a live-stream of one of my favorite radio stations. Listener-supported FTW! I already had my coffee(French-press of awesome!) and the music is going so it's time to plug in and plug away!


HTML/CSS




      Today the first thing we're going to start off with some easy stuff; templates, and CMS's. CMS stands for Content Management System. That's a fancy way of saying pre-made website. CMS's are sometimes a good thing to use if you just want to create something really quickly, or it's a simple website for just a few things, and you don't think that you're going to be changing a lot, for example, a blog. There are a lot of free ones out there, but they aren't always the best, because; they are usually limiting, they're pretty much a template that lets you cheat. www.freecsstemplates.org is a good place to go to check some of them out. Something I forgot to cover in the forms section, is the <label> it is used to identify elements inside a form, but really you can use it any time you want, but it seems it's handy in that type of thing.

     Now we get to the embedding section. Embedding is pretty much just like linking, it just creates its own little space that shows whatever you're trying to link to. Here is an example of YouTube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/P3Of6vsIIA8" frameborder="0" allowfullscreen></iframe>

 The way you get the embed code, you just go to the 'share' section of the video, and either use the code right there, or select a size or do a custom size (the size can always be changed in the editor) and put the code where you wont it. One thing you have to know about this is that YouTube changed its code requirements, but of course their embed code didn't change. So, you have to add an http: in front of the //www. in the src. Even though it's a video and not text,  use text-align to  align it how you want.

     Google maps looks a little different now that they've taken the new Maps out of Beta(it looks so good on my Pixel's screen), you just click on the settings gear and you'll have the option to embed and all the things you need.
 With Twitter, you have to click on the three dots and it gives you embed. Twitter has a lot of way to embed. Go here for all the info about how to do widgets and all the things you can do with Twitter.

A little pro-tip for when you're working on creating your website:
Keep your different file types in their own folders/sections makes it easier to manage things and remember to save periodically. That way it's just easier to manage.

We have discussed the different types of things you can do to a link before, but there's an order to them so that they don't cancel each other out or cause some hinkery that gets annoying fast. When you do the active, visited, hover, link tags on a link  make sure to have them in this order: link, visited, hover, active. That way you can have different colors for different activities, and they won't overwrite themselves. You don't have to use any/all of them if you don't want to.

Last, but not least, we have the favicon. The favicon is the little picture that shows up in the tab. Sometimes it's just a piece of paper with a folded corner. That usually means that they didn't set up a favicon. The best place to get one is to go here. You can upload any image, and it will give you a favicon in .ico and .gif form. The .gif just scrolls constantly. If you use that, I will judge you.
The way to implement it is like this:
<link href="images/fav.ico" rel="shortcut icon"></link>

You just put it by your meta tags and your CSS tag at the top in the head.

And that's it for today! Today(3/24/2014) at 7:06pm I finished the XHTML/CSS section. Only took ten days! Whoo!! I powered right through it! Which just means I'll slam right into .js tomorrow. I'm sure that makes some of you happy. See y'all on Wednesday!


--Martin

Friday, March 21, 2014

Comment All The Input Types!

     Hey, it's Friday!!! Whoo! I'm here at the coffee shop(I've been here all day) and raring to go! I've had two coffees, so I'm totally on a caffeine/sugar high. Today I bring the gift of moar HTML/CSS. Yay, right? Well, maybe. I actually did some pretty fun stuff. I figured out that if I do five lessons a day on the weekdays, I should be finished this class in two months. So, the minimum is five a day. The music that I'm playing is, of course, Grooveshark. I'm playing a playlist of some of my favorites. Which is fun, for me. Not everyone is a fan of 8-bit music. I've had my coffee, my music is playing, it's time to plug in and plug away!



HTML/CSS



      Today, we have a few things relating to forms. Such as multiple options or drop-down menus. First up is the drop-down menu:

<select>
        <option value = "red">red</option>
        <option value = "blue">blue</option>
        <option value = "yellow">yellow</option>
        <option value = "green">green</option>
</select>
First, you have the HTML <select> tags. and then inside of them you have the <option> you can make them be whatever you want, but make sure that the value and the element that gets shown (the word between the >< tags) are the same that way when you use JavaScript that will take those as variable, or something, you will be able to tell what goes with what. And it just makes for clearer code, which is something you always want. The only thing you besides clear code, is comments. COMMENT ALL THE THINGS! You might think you know your code, and it's easy to understand, but wait a few weeks and you can get so lost! So, always always always comment! This message brought to you by the entire coding community.

Next we have the text input area. Again, this will later be used by JavaScript. The instructor has promised that it will get fun with this once .js gets involved. This one is even simpler than the option tags. You just write this:

<textarea name = "comments" rows = "3" cols = "30">

The rows = downward size, and cols(columns) = rightward size. It is naturally anchored on the left side, but of course, you can position it. This would be useful for anything where you want them to write out a free-of-restrictions response, or something the . js can react to.

After that you get these guys. They're all in the same element form, but they all look different. They're called input types and the code looks like this:

<form>Username:
<input type = "text" name = "werfwerf" value = "username here, please!"/>
</form>

Always make sure to have the <form> tags around the inputs. Let me break this down for you; you have the type, which in this case is text, and this would be applied to something like an email address. Something where it would be necessary to have them write the response, but it's just one line, or in a similarly short fashion. The name, is just the title for the input, it can be anything you want, or it can be the username you're looking for. the value is what would be shown in the text area. Here's an image of what the above code would look like:



Notice how the value is shown in the text box. A list of all the "type"s:
text = text input area.
button = button such as 'submit' or 'click here!'
radio = select between different things such as are you: male, female etc. <-- you can only select one.
checkbox = A...checkbox.<-- you can select as many as you want.
And last, but not least we have:
password = Put in text and it will show asterisks, or something similar. (******) used for... passwords. Duh.
That is all for today, folks! I'm going to go enjoy some daylight! It's almost 6:00pm and it's still light out! Crazy! And that's the last time I'll mention it. Don't need to be one of those people that points it out once a week! See y'all on Monday!


--Martin

Monday, March 17, 2014

Yeesh In A New Tab!

     Yeesh! This is sooo late! I did a lot of things today; it was crazy! I reeeaaalllyy wanted to say that I didn't feel good and that it's St. Patrick's day, but that was just an excuse, and those things suck when the next day shows up and you realize you didn't do what you were supposed to. Today, I'm working on a HTML/CSS project with Udemy.  It's actually pretty neat, you can make "websites" and use files on your computer to move around. Like, contact, home, and whatnot. Obviously, no coffee. It's almost 11pm... But, I've got Groovshark going, with the instructional videos cutting in every now and again. So, it's time to plug in and plug away!



HTML/CSS


     Yup, a website! The coolest things that I learned shall be brought forth into the light of your computer! First up is opening something in a new tab. I love it when a website opens something that I might just be checking out, but isn't a main feature, in a new tab. What you put is this:

<a target = "_blank">

  and that's it! It's super easy! And so freakin useful! Good thing I know about that now!    

 Next up is the redirect. If you want to show a warning, a statement, you don't want people to hang around, you use this! You set the time that the computer will wait, and then boom! Redirect!

 <meta http-equiv = "Refresh" content  = "12; url = http:www.bing.com"/>

 The number '12' refers to how long you want the client to wait before they go to the url.
     The next thing up is how to have a link go to a specific page on your website. Let's say you have a long article, and you want to be able to point out a certain area. Using this will open the link scrolled down to the area that you want them to see. You see this employed in FAQs and READMEs all the time.
     You give the section you want to go to with a tag like this: <a name = "example_name">

And then to call it, you use tags like this: <a href ="Example_page#example_name">Example</a>

Also, a good place to see a lot of other tags is to go here and just cruise around. It's w3; if you don't know what that is, look it up. Definitely worth knowing.

I just looked at the HTML version of this article. That was cray cray. Turns out it IS a good idea to do the html title thing in HTML because then you don't end up with a looott of completely unnecessary spans and divs. Anyhoo, back to the subject at... mouse? Not too sure what to call it when it's online.
The only thing left is: the different ways to call CSS, because; there's more than one way to do that! crazy, right? But, instead of me telling you, I'll let this guy do a better job than I could!

SO! That's going to do it for today, folks. I know, no .js. But never fear! I shall have some! At some point. I'm working with the HTML right now, but the class will be bringing in .js and PHP and some other cool stuff, so don't go crazy. I'll have some when I get some. See y'all on Wednesday!


--Martin

Friday, March 14, 2014

All-In-One Flip!

     There's new things! Olé! Well, new(ish). The other day I sort of had a break through. I'm still figuring out if it was good or bad, but that's not too big a deal. I was perusing the internet, as is my wont, and found many amazing places that do .js bootcamps, tests, free books. Many amazing things! And what they all told me is that I have seen a lot of lessons, but haven't really retained as much as I should. Which is sad. So, to combat this, I'm going to start creating stupid little program that use all the things I should know. The main problem is, I know what they are, I know what they do, but I haven't used them in anything besides following instructions. So, I'm going to create some small script things, and figure things out! So, what you'll see on here is stuff I came up with, if it's overtly simplistic, that's because (as the title says) I'm a total newb. I don't have any problems with that, but I don't want to be a total newb for too long. That would mean I'm not learning anything. Which would be sad. For today, I'm going to do the .js, HTML and the CSS all on one thing. I know! Crazy, right? I found a couple lines of code that make text flip around. If Blogger was able to use CSS as well as HTML I would show you and it would be awesome! But, instead, we shall look over the code in this all in one special! It's a Friday, so I'm at the coffee shop, I've had my coffee, Grooveshark is going, time to plug in and plug away!



 JavaScript&&HTML/CSS 



      The first thing we need to do is look at the code, obviously. So, here's the HTML: 
<html>
  <head>
    <title>Hey, wassup.</title>
    <script type = "text/javascript" src = "script.js"><!--script for the .js -->

    </script>
    <link rel = "stylesheet" type = "text/css" href = "thing.css"/>
     
  </head>
  <body>
      <!-- put whatever you want to here. -->
<p>Hey, this is a line of text with a border!</p>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content --><span>Hey,</span>
        </div>
        <span class="back">
            <!-- back content --><span>do you even <a href = "http://www.google.com"><g>G</g><o>o</o><t>o</t><h>g</h><l>l</l><e>e</e></a>, bro?</span>
    </span>
  </body>
</html>











Not exactly the cleanest layout, but it does some pretty nifty stuff! The thing with the bunch of tags in a row spells out Google and the CSS makes it turn into the Google colors. A little touch of fun, you know?
Speaking of CSS, here's the CSS:


p{
    clear: both;
    text-align: center;
    border-radius: 50%;
    border: 10px solid black;

}

a{
    text-decoration:none;
}

g{
    color: blue;
}
o{
    color: red;
}
t{
    color: yellow;
}
h{
    color: blue;
}
l{
    color: green;
}
e{
    color:red;
}


/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}


The code s commented quite nicely so that you may understand it easily. The basic idea is that it's activated by the mouse and once you go below the div, it flips over. 


Now, if you noticed, which I'm sure you did, there was this:  

<script type = "text/javascript" src = "script.js"><!--script for the .js -->

Which my comment tells you about. Yesterday I found something I probably should have known about a looonnngg time ago!
document.write()

It writes to the, you guessed it, the document! Whoo!
So, today, I just did a simple line of text, and a FizzBuzz, because those are fun:

document.write("&nbsp;Hey this is a thing, now! You can write with .js! <br />\
 and have it print out to the webpage.<br /> I knew that was a thing. <br />\
 I just couldn't find it till now!<br />");

 for(var i =1; i<=71; i++){
      if(i%15===0){
        document.write("FizzBuzz <br />");
      }else if(i%3===0){
        document.write("Fizz <br />");
      }else if(i%5===0){
        document.write("Buzz <br />");
      }else{
        document.write(i + "<br />");
      }
    } 


Also, notice the fact that both &nbsp; and <br /> are used in the .js text. Yup, that's right folks, you can use those HTML elements in .js text. Pretty nifty, if I do say. 

     All of this texts makes for a pretty lackluster page with a spinning dealie on it. Told you the scripts were going to be stupid. Expect better each time! Well, that's what I'm hoping. Next time I'm going for a better looking page with more spinning and motion!!
See y'all on Monday!


--Martin

Monday, March 10, 2014

Links to the past/Linux, Baby!

     In the grand wisdom that is Codecadamy, I did and also did not finish the JavaScript course. Turns out they have two courses, and the second one is only half way through by the end of the first one. So, that was slightly disheartening. I got over it in typical heroic fashion. I'm afraid I don't have much for y'all today. I was busy putting Crouton onto my Pixel. Gotta love that xfce sweetness. Now I have the Sublime text editor of awesome and Brackets for HTML/CSS because it does live preview. There's a Chrome ext. called Tailor, and it's a port of brackets, but I didn't have any success with it on ChromeOS. Then again, I'm on the dev channel, that might be why. So, that's what I was up to today. Getting all the things done. I did do some more .js, so that's a bonus. The first is a retrospective. I happened to see some of my code from a few months ago, and it was interesting to me in the ways the that the format had changed. I saw this:

var isEven = function(n)
{
    if (n % 2 === 0)
    {
        return true;
    }else
    {
        return false;
    }
};

The way that I would do it(if I was to use an <if/else> and not a ternary operator) it would look like this:
var isEven = function(n){
     if(n%2===0){
         return true;
     }else{
         return false;
     }
};

I never realized hov spread out my code was. Yes, I know it acn be more compact, but this is the easiest way for me to read it.

     The other thing we have is this:

//using typeof in <for/in> loop to print what we want.

var languages = {
    english: "Hello!",
    french: "Bonjour!",
    notALanguage: 4,
    spanish: "Hola!"
};

// print hello in the 3 different languages
for (var i in languages){
    if(typeof languages[i]==="string"){
        console.log(languages[i]);
    }
}

     How cool is that?? using a <for-in> loop and the <typeof> method, we're able to print out just what we want and ignore the rest. That could be super useful. Ok. Well kids, this a rather short post today, but fret not mein Kinder, ther will be plenty for you on Wednesday! See y'all!


--Martin

Friday, March 7, 2014

Just Methodical Penguins

     Coffee! It happened! Olé! I've been making it a habit to not go to the coffee shop during the week and have a French press at home when I need the caffeine. However, getting out of the house on occasion is good for me. That's why I come to the coffee shop on Friday. It's good for everyone. I don't scare people/ get ridiculed because of my beard, I save money, I get to sleep longer, win-win really. I wear my +Jupiter Broadcasting  sweatshirt, (which will soon have a  matching shirt(whoo!)) and get things done! I've got a salad waiting for me when I need a break, I've had my coffee, I have Grooveshark (again. Such a creature of habit.) playing a Piano Guys playlist because I love the cellos and piano together, so it's time to plug in and plug away!


But first, a link: https://developer.mozilla.org Seriously, it's just a good place to go when you need some info on . js, HTML, CSS, and of course Firefox and all those things that they do. Also, Persona. Seriously. Sign up, get the newsletter, it's just a good idea.

HTML/CSS



      So, (again)there isn't much to report on this front. Mainly I'm getting through things and reading a lot of the stuff on Mozilla. So, if you want some HTML for today, head over there and check out some of that stuff. It's always a good idea.


JavaScript



      Now onto methods. Yup. Moar methods! This time it's something that helps us with a lot of things. It's such a long list, just go here and they'll tell you everything. Here's an example of prototype with penguins!


// create a Penguin constructor here
function Penguin(name, numLegs){
    this.name = name;
    this.numLegs = numLegs;
}

// create a sayName method for Penguins here
Penguin.prototype.sayName = function(){
    console.log("Hi my name is " + this.name);
};

// our test code
var theCaptain = new Penguin("Captain Cook", 2);
theCaptain.sayName();

And that means that we can create as many penguins as we want! You can also inherit from another Method so that you only need to add to something instead of creating an entirely new one. Example:

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Pengiun(name){
    this.name= name;
    this.numLegs = 2;
}

// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
var tux = new Penguin("Tux");
console.log(tux);

     Notice on the first one that we had to say how many legs it had, but on the second one, we just have the name as a parameter, and the legs are always going to be two, because; well, penguins only have two legs. Unless they lost one to a seal, or something. We can also call tux with <sayName> and it'll do the whole script. Do this:

tux.sayName();

and you get this:

"Hi my name is Tux"

 The reason that happens is because we added it as a new Animal et voila! It does the magic.

     As an aside, this section was so full of bugs it that I am seriously going to need a walk. They just ignore the needs of their students and don't give a <censored> about anything. I'm just glad I'm almost done with them. At least in the .js and HTML area. That'll about for me folks. Don't forget to check out the Mozilla stuff. Seriously, tons of cool stuff over there. See y'all on Monday! If the lessons aren't TOO buggy, I should be celebrating the end of the course!


--Martin

Wednesday, March 5, 2014

Chippy Animation/New Method For You In There.

     Rejoice! There is HTML/CSS today! Olé!  I am here at the house up at way too early an hour for my liking, but I'm up and done with the necessities of the day, so let's get this going. You'll be happy to know that I'm listening to something else besides GrooveShark. I found some free ChipTunes albums thanks to MakeUseOf. They proved themselves worthy of my followingness. Followingness is now a word by the way. I didn't have any coffee today. Yet. So, if you see any grammar errors, blame it on that. I'll probably get a water later. 

     

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."

Let's see what they're about to throw at us.

     
     The first thing we had to do was to surround the <img> tag with a div with the id "earth-orbit" I guess that means we're about to get some movement here! I was right! We have movement! Earth is spinning away because of webkit stuff. I won't really get into that right now, but it's pretty much what moves things around. To see the finished code/product plus a few planets, go here.  I'm pretty sure that they're going the wrong way, and I know that the scale for size and distance is off. I just did it for fun. 

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.



     That'll about do for me today, folks! I had a lot of fun with this one! There was a lot of new stuff going on. I like new stuff. See y'all on Friday!

--Martin

Monday, March 3, 2014

Lines of HTML/ Typeof For Your Noggin

In case you don't do much internet, you'll know that Texas got crazy ice and frozen stuff. Good thing I have no where to go! I'm going to stay inside and get some solid study time in! Also, I found out how to do lines! No, not cocaine, HTML! You just use <hr /> who knew! Well, obviously a lot of people do, so... I know now! yeah, that's better.

Heh. Lines.

Today's music is... Electro Chill. I know, not very informative, but that's pretty much what it is. Anyways, I'm cold. So, I'm going to make some coffee and get a sammich, or something and then I'm going to plug in and plug away!






JavaScript




      Today, we're doing fun with functions. I know; lame play on words. If you can even call it that. Blame the class. They're the ones that used it. AAANYhoo, Here's a little something for you:

/*Add a speak method to the Person constructor. Whenever speak is called, it should print "Hello!" to the console.*/

function Person(job, married) {
    this.job = job;
    this.married = married;
    // add a "speak" method to Person!
    this.speak = function(){
        console.log("Hello!");
    };
}

var user = new Person("Codecademy Student",false);
user.speak();

Now, here's the thing; not all of that code applies to what they wanted me to do, but I think I can point out where and why you need it. This code is called a Constructor and we have a Method inside of it. Notice that there is the new Peron and the user.speak. They just wanted me to add the speak part. The whole function applies to user, but when you call a specific section like user.speak, it doesn't matter what else you have wrong as long as what you're calling is correct. Everything else applies to the variable user, and if I was to call that and anything was wrong, I would get errors.

     Woah. That was crazy. I'm always amazed when I know what they're talking about in the lessons. I figured it out with the hint, and usually those things are no help at all. This time I got it! I'll count that as a victory for me.

     Well, that was just stupid. Apparently, the lesson has a bug, and the devs don't seem to care to fix it. The forum was filled with people that couldn't figure it out. So, I posted the working code that I found/figured out in the forum. Hopefully that'll help some people.  Definitely a WTF moment.

     And, last, but least, I leave with a new built-in operator. <typeof>  //angel voices
It's actually really helpful! Here's Mozilla's definition on it: "The typeof operator returns a string indicating the type of the unevaluated operand." Basically, if you don't know what type of code you're dealing with, you use typeof, and there you go! it'll tell you!

     There you have it, folks! a whole bunch of .js. for your noggin. I'm still getting through the HTML. The only new thing I've learned is the <hr /> thing that makes a line. I'll see y'all on Wednesday! Hopefully the ice will be gone.

--Martin

Friday, February 28, 2014

Links/Do You Even Do Age, Bro?

  Today, as I'm sure the job-weary are aware, is Friday! And that means I'm at the coffee shop! I had a big frappé, and it was delicious! Now to capitalize on this energy! As I said in the last post, I finished the HTML course(olé!) and this has a good side and a bad side. The good side is that I am happy with what I learned, the bad news is that in the next course HTML course that I'm taking starts with the basics. While I appreciate going over the fundamentals, it means that I really don't have anything HTML/CSS related to report today. Bear with me while I slog through and get to a place that I don't know about. I should have something by Monday unless they really want to explain elements, or something along those lines. The new course is on Udacity (<<--link)for those of you looking for a place to learn HTML. They don't cover CSS, sadly. I'll have to look for somewhere that does. Now that the frappé has been imbibed, and Grooveshark is going(again). It's time to plug in and plug away!



JavaScript




      Today we're going to be writing a validation script. It's going to check if a person(under the premise that they're being honest) is old enough to enter a website. It's about 8 lines of code, but it really shows how much you can do with just 8 lines of code in .js. We start off with this:

var userAge = parseInt(prompt());
Notice the new word: parseInt; it's a fairly obvious term. The variable <userAge> returns a string, so rather than setting userAge equal to the prompt, you put a function around the prompt that will return the value that prompt() gets from the user into a number, and that means you parse an integer with <parseInt>! pretty nifty, eh? I thought so.

Next up we have this:

if(isNaN(userAge)){
    console.log("Not a number,bro.");
}

It's checking to see if the response wasn't a number. ParseInt can only turn a string into a number if it is a number, obviously. So, you make an <if/else> that makes sure that the person entered what was wanted. This is a good practice for pretty much anything ever when it comes to this kind of thing.
You should also notice the use of <isNaN>. isNaN stands for is not a number. Like many things in .js there are tons of these little words that are so useful, and this is definitely one of them. So, next time you need to have something that checks if something is returning a number, it's <isNaN> to the rescue! You just stick your parameter in there, userAge in this case, and it's good to go.

The next step is a simple < else if/else> setup:

else if(userAge<18){
    console.log("You're not allowed in here, young whippersnapper!");
}else{
    console.log("Come on in!");
}

That pretty much explains itself, so here's the whole script:

var userAge = parseInt(prompt("Do you even do age, bro?"));
if(isNaN(userAge)){
    console.log("Not a number,bro.");
}else if(userAge<18){
    console.log("You're not allowed in here, young whippersnapper!");
}else{
    console.log("Come on in!");
}

That should be enough info to take in for now. I hope y'all have an amazing weekend, I'll see you on Monday! It might be a late post, it's possible I'll have a million things to do. See y'all!

--Martin

Monday, February 24, 2014

500, What?/Nothing Of Importance.

     It's Monday. Again. It keeps happening, man! No matter what I do, there's Monday! No-one gets away from Monday. I've had my coffee, but I'm still exhausted! I can barely keep my eyes open! I'll try to get this thing going quickly. Sound City is playing from G music. "From Can To Can't" is my favorite song in the album. Now, time to plug in and plug away!


HTML/CSS




      It seems that I've done 500 lessons! That's nifty. The lesson says I'm about 70% complete with HTML/CSS. Again, that's nifty. Really, I need to find out how to make a game with my new-found powers. Right now I'm working on positioning. Working with Margin, Padding, Border, and Content; you get abbreviations like 'TP' 'TM' 'TB' The 'T' stands for 'Top' the other are: 'Padding', 'Margin', and 'Border' respectably. I've already worked with margin somewhat, you have: auto, but you can also do something like:

div { 'margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}

Or, you can do:

div{margin:5px 10px 5px 10px;}

it's the same thing. You would use the first example when you're trying to specify less than all of the aspects of a tag's properties. Maybe just the left and the right, or something similar.
      You also have the same thing with Padding. You can also use negative positioning. Such as: div{margin-left:-20px;} instead of moving the object twenty pixel's worth to the right from the closest border, it would move it 20 pixels closer. Maybe even past it.
      Then there's float. You can move that left or right. Unfortunately, sometimes large floating elements get mixed with non-floating ones, and elements do end up on top of each other. To combat this, you use <clear> you can clear left, right, or both.
      If you don't specify an element's positioning type, it defaults to static. This is when you use <position>. You have absolute, which means that it's going to stay the same distance from its first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.
      Relative is another term, but also more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.
      Finally, we come to fixed positioning. Fixed anchors an element to the browser window; you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past. Hipster websites loved that trick for while there.


JavaScript




      Nothing of importance to report on this one. I'm working away, but it's just reinforcement. I'll have more on Wednesday. See y'all then!

--Martin

Friday, February 21, 2014

Groovy, Man!/ Friends In Address Books

     Here I am at the coffee shop once again. I've got GrooveShark going. Click the link for the playlist that I'm playing. I've been on this one for a while, and I still like it! Always a solid electronic song going on. I've had a latté, I may get a regular coffee at some point to keep my eyes open. Friday being its usual self, I'd rather get this over quickly, but I need to put some time in. So, time to plug in and plug away!


HTML/CSS





      I'm sorting my friends! It feels a bit like circles in g+. They're even using Google colors. Anyhoo, it's the CSS I'm looking at. they pretty much don't care to teach you how to make a circle border. It's just there. Seriously. Don't just throw things at me, tell me what they are! Good thing ye olde Personal Initiative is still around.
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius:100%;
border:2px solid black;
}
And that's how to do a circle border.
Now they teach me something cool. You can have an <id> and a <class> in the same tag. That is definitely nifty! Lots of uses for that. And I finished. That was quick. Looks like we're about to get into this:

I'll continue with that in the next post.












JavaScript




      Isn't it funny how normal it can become that a single letter being incorrectly capitalized eventually is not so stupid any more? It's perfectly logical that the computer would have a binary (heh. I made a play on words) track. It's either right, or it's wrong. There is no such thing as close. That's totally normal for me now! How strange... The Address Book of happening is still happening. I was trying to get it to print out a return on a search and it just wasn't working. It wasn't until I hunkered down and really scrutinized the code that I discovered my error. A lower-case 'l'. How thoughtless of me. I shall endeavour a better attempt at correct grammar today. After smashing my way Neanderthal-style through the lesson I moved on to adding more people in an easier method.
Starting off with this function:

var add = function(firstName,lastName,email,phoneNumber){
    contacts[contacts.length] = {
    firstName: firstName,
    lastName: lastName,
    phoneNumber: phoneNumber,
    email: email
};
It allows for any additions to be done with one line of code like this:

add("Mookie","Chess","example@example.com", 9003006000);

It doesn't print anything, it just adds that person to the address book. In order to see if actually worked, we use this:

list();

If you recall, that was part of the earlier code.
Turns out, it actually has a use.
And project Address Book is complete!










Olé!
Now it is time to bid you adieu. See y'all on Monday!

--Martin

Monday, February 17, 2014

Beautiful Weather/ Not A Walk In The Park

     It's a beautiful day here in Texas. I had to take a break from my studies and go for a walk to enjoy this gorgeous weather. One of my friends told me that Katie Herzig was giving all of her music away for free today. So, that's what I was listening to. It was pretty good. I actually got my studies on a roll today. So, this is actually going to go out on time! No coffee today. I'm awake enough from all the amazing weather. So, time to plug in and plug away!


HTML/CSS






      I've been doing HTML just long enough for that picture to make my eye twitch just a little. Ever since I started learning HTML I've been writing these posts in HTML and I'll get little error messages if a tag isn't closed, or something. So, I'm more perceptive to tags lately. Mainly because I don't like the error messages. I'm pretty sure that I don't really care for the <nth-child> tag when it comes to calling a specific element. I mean, what's wrong with class or id? Although, I suppose that maybe some tags can't have those in there. So, maybe that's when they're useful. Hopefully.
I earned a badge! Olé!





JavaScript




      JavaScript. So useful, and yet so daunting. I seriously need to start doing some real world applications to have some real knowledge under ye olde metaphorical belt. I have the most basic ideas of .js, but some of the more esoteric practices can be overtly foreign on such a frequent basis that the only way to retain knowledge is to do the lessons over and over and over and over... As long as it actually helps me attain something in the end, I suppose it's worth it. The code that I'm starting with today is pretty much just simple math. Which should be easy, except that it isn't always easier said than done











 If you want to do cool code snapshots like this, go here.  It's called Marmoset.
      Anyhoo, the age bit was OK. I just had to do an <if/else> statement. Although, I'm sure I could do a ternary operator and have it all done better. I'll try that next time I need an <if/else> statement.
Seriously, remembering the names to these things can be hard! I tried three different ways before I got this. Like I said. remembering things in .js is hard sometimes! Remembering all the operators and objects and whatnot. I'm going to eventually remember them all, but it isn't exactly a walk in the park. Not that anyone said it would be. OK. That's the end for today.
See y'all on Wednesday!


--Martin

Friday, February 14, 2014

Relocating/#smh

      Right now it is 12:11 pm and the internet is out. Again. If it doesn't get fixed soon, I'm going to have to go to the coffee shop. I didn't really want to do that, but I gotta do my studies, man! I was able do get some studies done before, it went out, but not enough to really count for anything. I do know that I found some interesting things in one of the .js lessons, and I'll cover that later. Right now, I'm going to wait thirty minutes. If there's no WiFi by then, I'm outta here!
There is no WiFi. My life is empty and meaningless. Time to go to the coffee shop! For me, that’s twenty minutes. For you, it’s the next character over -> Someone has my chair. I’m not happy about this. The light is all wrong, the pillows are weird, there’s only one armrest, I sound like Sheldon Cooper! haha! I’ll wait until they leave, and then strike!


HTML/CSS





      Psuedo--class selectors; that's what I'm starting with today. Lesson people say: "A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?). For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!" Example: You know how when you click on something, it usually changes color like, blue to purple? That's what this is. And then there's the CSS thing where something changes when you hover over it:
a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}       So, now that we have that weapon in our arsenal, let's take it to the battlefield; the console.
Alright, so now we have something to go with. Here's an e.g:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<a href = "https://www.google.com/">Google</a>
<a href = "https://www.yahoo.com/">Yahoo</a>
<a href = "https://www.bing.com/">Bing</a>
</div>
</body>
</html>
This looks just like regular HTML that has some links to some search engines. But when the CSS comes in, we get something else:
a:link{
    color:#008b45;
    text-decoration:none;
}
a:hover{
    color:#00ff00;
}
a:visited{
    color:#ee9a00;
}
If you want to test this out, go here. Unless you don't use Chrome. In that case go here follow the instructions, and then click the first link and be amazed. And with that, I'll leave this segment, and head over to the next.


JavaScript





      As I mentioned before, I found something interesting in my .js lessons. Yesterday, I was going over some lessons I'd already done. And realized something. I was looking at this code:

var bob = new Object();
bob.age = 30;
// this time we have added a method, setAge
bob.setAge = function (newAge){
  bob.age = newAge;
};

bob.getYearOfBirth = function () {
  return 2013 - bob.age;
};
console.log(bob.getYearOfBirth());

And I realized something. This section:

bob.setAge = function (newAge){
  bob.age = newAge;
};

is completely unnecessary! I took it out, and the lesson still worked! I seriously don't think these peopele really knew what they were doing. Their newer classes look better, but I think this one should still be in beta. Once I got past that I went on to the rest of the lessons. I'm still on the constructors because they're taking their time teaching this, which I'm totally OK with since they are difficult to learn. Here's what they said about constructors: "Constructors are a way to make objects with the keyword <new>. The most basic constructor is the <Object> constructor, which will make an object with no methods or properties."
     Ooooooh my. These people! Seriously shaking my head right now. I just passed my lesson using five different ways!! And most of them were just <undefined > or something similar. Which is just poop. There is no way that undefined is going to be ok in a real world situation. Here's the code:

function Rabbit(adjective) {
    this.adjective = adjective;
    this.describeMyself = function() {
        console.log("I am a " + this.adjective + " rabbit");
    };
}
var rabbit1 = new Rabbit("fluffy");
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");
rabbit1.describeMyself();

At first, I tried to use <console.log> but apparently I was defining something wasn't there by using that, and then I tried a whole bunch of things, and they all passed, but I wasn't getting the return that I wanted. That's how I ended up with the code you see above. Kind of nifty. You just have to define a rabbit, and the words are already done. You don't have to write out each one, you just do it once! How neat!
Ok, this post is getting a little long here guys, so I'm going to call an end here. Remember to visit the links! Also, huzzah for beards.

--Martin

Wednesday, February 12, 2014

I Got Glomped!/.js Is Hard!

      
     It's a Wednesday here in my timezone, and that means I gotta pump out some juicy coding goodness. Also, that's the nerdiest thing I've said since.... yesterday. My gf sent me an HTML script that said she loved me. Yup we're nerdy. There should be a nerd pride parade! that would be so cool with blinking lights and whatnot! Maybe make the GPS route that we follow spell out NERD. *Ahem! ANYhoo... I'm actually at the coffee shop today. I know, it's not Friday! You're wasting gas! ACtually, I have to run errends when I'm done, so I thought: why not study at the coffee shop today? And that's what I'm doing. I switched back to the dev channel on my Pixel because the beta channel was getting laggy, so now that I have a smoother UX I'm happier. The music of choice today is "Programming Electric&Alternative" on Grooveshark. It's actually OK as long as they don't hit me with some Drake or similar stuff. Alright, I have my coffee at hand, my music going, it's time to plug in and plug away!


HTML/CSS





      So, on this front, we have Class and ID selectors. I love these guys; they make my day so much easier! I can now call things directly without worrying about disrupting something, and still have differences in something with the same tag as something else. Here's an exapmle:
<h2 id="intro">Introduction</h2>
<h3 class="standout">Classes and IDs in CSS</h3>
<p class="standout">Classes and IDs are super easy in CSS.
                                                  You're using them right now!</p>
<h3>Regular HTML Selectors</h3>


      Notice that there are tags with the same name,but they have <id> or <class> inside the tag, and those equal a name. So, the CSS side to this would look like this:
#intro{
    color:#b83c3a;
}
.standout{
    color:#f7ac5f;
    font-family:Verdana;
}
     Again, notice a few things that are different. There's the <#intro>, but then there's <.standout> tag the <id> tags get the<#> in front of their name, and the <class>  tags  get a period<.> in front of them.  You can have the same name for an <id> and a <class> and they won't interfere with each other. Why have the two different types of ways to call something specifically? I have no idea. They both work the same way. But I suppose I'll figure that out at some point.


JavaScript





      I swear... Every time I'm about to get the .js going stuff happens. It's already 6:02 PM here, and I'm just getting this part going. I got glomped by a friend that I hadn't seen in a while and I regret nothing. We had a great time catching up. I believe I made the right choice. I had a ball and now I'm scrambling to get some .js going. So, if this part of the post is skimpy, you know why. Also, I need to ramp up my .js times of studies. It's getting into the technical part, so I have to study twice as much to get what I'm being taught.
      Alright here we go. Still on constructors, sadly. They're really giving me the run-around. I just can't seem to memorize how to do this. I'm going to get it, it just isn't going to be easy. Right now, I'm working on this:

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };

  function calcPerimeter(height, width){
      this.height = height;
      this.width = width;
      this.calcperimeter = function(){
          return this.height * 2 + this.width * 2;
      };
  }
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

I wrote the calcPerimeter Method, but I can't seem to call it right, or it's missing something... I don't know. Turns out I had a lot of fluff in there... Typical me, add too much junk. I need to get that under control! Here's the finished code:
function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };

this.calcPerimeter =function (){
    return this.height * 2 + this.width * 2;
  }
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

Notice the much smaller addition that I added. Pretty much, I just got carried away and added those two lines that got deleted because they said use the code already there as a model, but they didn't mean everything. Well, now that I got that out of the way, I done! I shall see y'all on Friday! Unless I get glomped again, but I doubt it since I'll be at home. So... bye! 


--Martin

Monday, February 10, 2014

Caret of Knowledge/Whoo Hexadecimal Color!

     Hello, all! I'm back again! Do I seem awake? That's because I am! French press FTW! So, Google music was being weird, I first played Foo Fighters radio on Pandora. I'm still in a Foo Fighters sort of jam, I suppose, but then I didn't want to make an account, so I'm on Grooveshark. Today I had an adventure in the world of ChromeOS! I downloaded about five text editors, but most of them just weren't my thing. I was down to Caret, and Tailor. I like Tailor better, but it's missing some key features like being able to save my work, but beside that and not being able to preview my work, I actually liked it. Yet, that was not to be, so I'm on Caret. Which is awesome. You can do HTML and CSS at the same time. Which I didn't think I'd be able to do on ChromeOS so, that saved me some bookoos (how DO you spell that word?) of money. Now I'm less poor than I could have been, it's time to plug in and plug away!


HTML/CSS





      Ah... Good 'ol coding! There's nothing quite like it! Well, the colors are coming out! the hexadecimal colors to be exact. I knew that this was gong to happen, I just thought it was going to a long time ago. But now that these colors have come out, I'll be coloring all the things!

     One of the things I was doing with Caret earlier was HTML. I had HTML and CSS running together. I save it to the computer and then open it and and it open up into the browser. You get a live preview of what you're working on. And that is so cool! I just have to figure out how to get .js into the mix. I assume that's coming down the road really fast. Also, I need to get Crouton going correctly so I can do some Linux stuff. Like Github. Anyhoo... back to the HTML/CSS. I am now on a review of the CSS that I've already done. It's pretty easy to remember the names of things in CSS because a lot of the names are the same.
     Now, if y'all remember, I said there would be more .js today, and there is! So, once I finish the review we'll head over there. Aaaaand yup. Nothing to write home about!


JavaScript





      We're still on <this>, folks. And I don't mind. This thing has a lot of different uses. I love it! Over the weekend, I did not get a chance to do any classwork(family birthdays, social protocols, yada yada yada) and this was the first weekend where I actually was excited to get back to my studies! I'm having so much fun doing this! Ok. The lesson that I'm working on had this:
var square = new Object();
square.sideLength = 6;
square.calcPerimeter = function() {
 return this.sideLength * 4; };
 // help us define an area method here

 var p = square.calcPerimeter();
 var a = square.calcArea();
The instructions said to create a <calcArea>  function that gave the area, and to use the square.calcPerimeter as a guide. All I had to do was:
var calcArea = new Object();
square.calcArea = function(){
    return this.sideLength * this.sideLength;
};
Which, in hindsight was easy, but what to return was an issue,  because I had the wrong idea about area. I got it in the end. They've got me working on constructors now. They're like an Object, but more global. Here's an example:
function Person(name,age, gender) {
  this.name = name;
  this.age = age;
  this.species = "Homo Sapiens";
  this.gender=gender;
}

var sally = new Person("Sally Bowles",39, "f'male");
var holden = new Person("Holden Caulfield",16,"f'male");
console.log("sally's species is " + sally.species + " and their age is " + sally.age + "and their gender is " + sally.gender);
console.log("holden's species is " + holden.species + " and their age is " + holden.age + " and their gender is " + holden.gender);
Notice that I just write out everything on one line. This way, if I were to be working on something that would need a lot of the same thing with changes applied to the individual, this would work a lot better than the regular Objects. So, we have constructors. But, Objects are still useful in a smaller case-use.Well, that'll about do it for me, folks! I've had a blast getting into things. See y'all on Wednesday!

--Martin

Friday, February 7, 2014

Powercord + Bad Memory = Two Trips/ Finally Using The 'This' Keyword

     I did it! I got the coffee, which saved my life, AND I got more of the JavaScript done than I said I was going to. It was very frustrating, but now I know how to use the <for/in> loop stuff. I think.Today, I finally get to see what the <this>  keyword does. I've seen it all over the place in other people's code, but I've never used it. So, now I finally get to learn about it. Today is Friday, so I'm at the coffee shop, for the second time... I got here, got some tea, because; I'm a rebel like that, aaaaand no power cord. Seriously. I can't believe that I forgot it; I was going to work without it, but my Chromebook was dead. So, I drank my tea in peace, and then I had to go all the way back home and get my power cord. I'm back now and jamming to the Foo Fighters thanks to +Tejas Richard . I've got four of their albums on random, so I should be good to go for a very long time. And now it's time to plug in and plug away!




HTML/CSS




      Today I'm getting my first real taste of CSS. Now to see that I can keep up. First, they're making sure I can do tables with HTML so that I can use the tables for pictures, I think. It would seem that I was right. I'm making a table of pictures that link to stuff. You know, <a href> and shtuff. So, now to do the nine cells in the table and get this thing imaged up! I now know something new. The image that you see when the picture hasn't loaded yet, or doesn't load, is the HTML bits doing their thing. Well, consider me impressed. Here is a page laid out with just HTML:

And here is the same thing except that this code(<link type="text/css" rel="stylesheet" href="stylesheet.css"/>) was added in. That's it. And you get this:
That is very cool! Not really sure how that all worked, so let's go study what they're telling me.  
     So, the stylesheet bit is actually referencing a page called stylesheet.css(it's one tab over from the one I'm working on.) I didn't see the tab that had all the CSS goodness. So, as I thought, the(<link type="text/css" rel="stylesheet" href="stylesheet.css"/>) bit was referencing the CSS tab not just one line of code that does amazing things. And I feel stupid for thinking that could ever be a thing. OK, so now that the confusion is out of the way...
      Time for a coffee break! Delicious delicious coffee. Yeah, I couldn't go without it.



JavaScript





     Now for that fabled <this> keyword does! According to the lesson:"The keyword this acts as a placeholder, and will refer to whichever object called that method when the method is actually used." That's clear enough, I suppose. So, to break it down even more for youse guise, here's an example of when to use the <this> keyword thingie:
// here we define our method using "this", before we even introduce bob
var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
bob.setAge = setAge;

// make susan here, and first give her an age of 25
var susan= new Object();
susan.age=25;
susan.setAge=setAge;


// here, update Susan's age to 35 using the method
susan.setAge(35);
So, anything with the (.age) at the end of it, is going to be run through the setAge function(if you do things correctly/ you want them to connect) it will patch you through and you have the magic of <this>! pletty cool, eh? I sure thought so! Which is where I'm going to end this! I know, I know, why so little on the .js, Martin? Well, it's hard that's why! Well, that and it's Friday. I promise to have more next time. So, I'm going to go study some more and report more on Monday. Have a nice weekend, y'all!

--Martin