Author: christinacannito

for in loop

russian_doll

Objects in JavaScript are a lot like hashes and we can access their content the same way we would access content from a hash. What if we wanted to print out all the keys from an object? I wrote about “for loops” in a previous post and today I am going to go over a “for in” loop.


var theater = {

     name: "Angelika",

     location: "Houston",

     showing: "The Lunchbox"

};

To print all the keys to the screen you would write the following:


for(var theKeys in theater) {
     console.log(theKeys);
};
  • The “for” is a JavaScript keyword that tell us that this is a “for loop”.
  • Inside the parenthesis we see the “var” keyword, which is how we define a variable. The “theKeys” is the name of our variable.
  • Next is the word “in” which is how we can tell that this is a “for in” loop!
  • The last word we see is “theater” which is how we tell the loop what object we want to loop through.

Inside the loop in between the curly braces is where we have all the code for our loop. Above we are just writing to print our keys “theKeys” to the screen. What if we wanted to print out the values in our object? We can use the “for in” loop again.


for(var theKeys in theater) {
     console.log(theater[theKeys]);
};

for loop javascript

forloop

A “for loop” is going to allow you to run a block of code a specific number of times. Let’s say that you wanted to run a method a certain number of times, without using a “for loop” you would have to write the method multiple times. You would not want to do that, because it is not making your code very DRY (short for don’t repeat yourself). If you use a “for loop” you would be able to specify how many times you want the method to run.

Here is an example of a “for loop”, printing the numbers 10 – 20 to the screen:


for(var i = 10; i < 21; i++) {
     console.log(i);
}

If you did not use a loop here is what the code would look like:


console.log(10);

console.log(11);

console.log(12);

console.log(13);

console.log(14);

console.log(15);

console.log(16);

console.log(17);

console.log(18);

console.log(19);

console.log(20);

The “for loop” is saving us from doing a lot of writing! How is the “for loop” doing this? We have the “for” keyword which tells us that this is a “for loop” in JavaScript. Next we see are parentheses which hold three different sets of code. Let’s look at each set of code in the parentheses:

  •  var i = 10
    • Here  we have the var keyword, which is how we identify variables. After the var keyword we have the name of our variable, ‘i’. You are able to name the variable anything you would like. This variable is set to equal 10. This number can be set to any number you would like. Think of this as your starting point, where do you want the counting to begin.
  • i < 21
    • This  is how the “for loop” is going to know when to stop. As long as ‘i’ is less than 21 the loop is going to continue to run. Once ‘i’ is no longer greater than 21 the loop is going to stop. This can be thought of as the end point. We know that the loop is going to end at 20, because 20 is the last number that ‘i’ is going to be less than 21.
  • i++
    • This looks confusing, but this is really just short hand for the following:
    • i = i + 1
    • This is how we want to increment our count. Once the value of ‘i’ equals 20 the loop is going to stop.
  • { }
    • These curly braces are very common in JavaScript. Here they are going to hold all the code that we want to run inside our “for loop”.
  • console.log(i);
    • This is how we see the value of ‘i’ printed to the screen as the loop is running.

What if we wanted to count down from 20 to 10?


for(var i = 20; i > 9; i--) {
     console.log(i);
}

We have our variable (var) set to our starting point (20). Next we are saying when we want the loop to stop. As soon as ‘i’ is no longer greater than 9 the loop will stop. The last thing we see is how to decrease the numbers by one. Before we saw the shorthand for increasing numbers by one (i++), here we see how to decrease numbers by one (i- -).

What if you don’t want to increment the count by one, but by a larger number? Here how to increment the loop by 20.


for(var i = 100; i < 220; i += 20) {
     console.log(i);
}

Above  we have our “for loop” set up the same as the first example except for how the loop increments. Every time the loop is run ‘i’ is going to have 20 added to it instead of 1. This “i += 20” is short hand for “i = i + 20”. Here the loop is going to stop running when ‘i’ is no longer less than 220. Since we are adding 20 every time the loop goes through the last number that is going to be printed to the screen is going to be 200.

Regular Expressions

Screen Shot 2014-05-20 at 9.03.42 AM

Regular expressions were really challenging for me. After we went over them in class I found that I needed to read a lot more about them to get a better understanding of how they work.

I found a lot of great online resources for them so I decided to put them all together on website called regexflashcards.com. While I was reading one of the websites about regular expressions they recommended to make flash cards to remember all the different symbols. I decided to make my own website to make this learning process fun! I am truly a visual learning so making this website really helped me a lot in learning about regular expressions.

The more I worked on the site the more I wanted to add to the content. I am excited to continuously work on the site adding new information about regular expressions as I learn about them!

Links coming soon!

Fun with Fonts

web_fonts

 

The fonts that you choose for your website are very important. You will want to choose a great font that matches the theme of your website from a design perspective, but you will also want to make sure it is web safe. What does it mean to have a web safe font? A web safe font is one that your user will also have on their computer system so when they go to your website the font that you choose will appear. If they do not have the font that you choose then the browser will try to show another similar font. Different fonts also have different load times so you will want to pick a font that will load quickly when users go to your site. What if you want to use a specific font for your website, but you aren’t sure if it is safe to use or not?

There are a couple of great resources that you can use to help you decide on whether or not to use that particular font. Today I am going to go over one of my favorite resources, Google Fonts!

  • This is a great place for you to view a lot of different web safe fonts. Search through the different fonts and when you find the one that you would like to use just click the “quick-use” button.Screen Shot 2014-05-04 at 1.07.20 PM
  • After you click the “quick-use” button there will be some different options for how to import that font onto your website.
  • I like to use the @import method. All you have to do is copy the code that they give you and paste it onto the top line of your CSS document.Screen Shot 2014-05-04 at 1.08.37 PM
  • Your CSS should now look like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
    • Once the code is pasted into your CSS you will be able to implement the font. You do this by writing:

p {

font-family: 'Open Sans', sans-serif;

}
    • Above will set all your paragraphs to your new font!

 

 

attr_reader, attr_writer, attr_accessor

curtains

 

In the last post I said I was writing out getter and setter methods the long way, so today I am going to write out the short way!

Here is a class called Movies:


class Movies

def initialize(name, location)
@name = name
@location = location
end

end
  • We have our instance variables all set up! The next thing we want to do is make them accessible outside of the class.
  • What if we ONLY want to be able to read these instance variables, but don’t want to let anyone change their values?
  • You would use attr_reader accessor. The ‘attr’ stands for attribute.

class Movies

attr_reader :name, :location

def initialize(name, location)
@name = name
@location = location
end

end
  • That’s it! Instead of writing out the getter method which would look like this:

class Movies

def initialize(name, location)
@name = name
@location = location
end

def name
@name
end

def location
@location
end 

end
  • This would save us a lot of time if this class had a lot of instance variables that we would want to access. What if we wanted to ONLY be able to change the value of our instance variables? We would use the attr_writer accessor!

class Movies

attr_writer :name, :location

def initialize(name, location)
@name = name
@location = location
end

end
  • This is great if we only want to just read or write to the instance variable, but what if we wanted to do both? It would be a lot of writing if we had to attr_reader and attr_writer for all our instance variables. This is when you would use attr_accessor. This will let you be able to both read or write with your instance variable.

class Movies

attr_accessor :name, :location

def initialize(name, location)
@name = name
@location = location
end

end
  • The code above is equivalent to the following code:
class Movies 

 def initialize(name, location)
 @name = name
 @location = location
 end 

 def name=(name) #this is the setter method
 @name = name
 end

 def name #this is the getter method
 @name
 end

 def location=(location) #this is the setter method
 @location = location
 end

 def location #this is the getter method
 @location
 end

end
  • So rather than writing all these methods out every time you would like to access your instance variables you can now use these attribute accessors!