Skip to content

HW 2 | Front end Development

Jump to bottom Edit New page
HackYale edited this page Jan 29, 2014 · 1 revision

Part 1: Background

We've started the basics of Javascript, now it's time to learn more about it. To do so, we're going to use an awesome code learning site: Codecademy. In particular, the assignment this week is to do the last three sections of the Javascript track (http://www.codecademy.com/tracks/javascript—Data structures, Objects I and Objects II). If you feel that those are two hard, go back and do some of the previous sections. From now on, we'll assume that you're comfortable reading and writing Javascript.
Total time: 30-45 minutes

Part 2: Implementation

It's time to include Javascript on your own pages.

  • Duplicate your entire hw1 directory and name the copy hw2.
  • In hw2, make a directory called scripts. See if you can do this from the command line!
  • Create a file in scripts called script.js. Like style.css, this is the conventional name for your first javascript file (some people use main.js or <the app name>.js (i.e. hackyale.js))
  • To include Javascript on your page, include the following line in your <head>. Note that unlike the link tag, <script> is not self-closing. <script src="scripts/script.js"></script>.
  • Try the following exercises to see if you can get Javascript active on your page. See my hw2 example for reference before you start.
    • Explore the functions console.log, alert, confirm and prompt. What does each do, and what does each return?
      • Using javascript, make all your paragraphs (or divs, or links) pink.
        • Hint: check W3Schools for how to change style with javascript.
      • Using javascript, make each paragraph colored a successively darker shade of grey, with the first one being white and the last one being black.
        • Hint: colors that look like rgb(x, x, x), where x is between 0 and 255, are shades of grey.
        • Hint: You may also need to learn about hex values for colors.
      • Use getElementById to select one element on the page and make it disappear.

As usual, after you're done coding, add, commit and push your code to your repo, and submit a link to it on Lore. Total time: 20-40 minutes

Part 3: Tricks

As I mentioned in class, there are some insider tips and tricks to help you code faster and make your life easier. Try one or two of them out! You can find them on this wiki page.
Total time: 5 minutes

Help!!

If you need help, first consult your best friend, Google (or Bing, or Yahoo! search...)
Then check out the [class page](https://github.com/hackyale/hackyale.github.io/wiki/Front-end-Development-(Fall-2013\)) or the lore.com site for information.
If you're still stuck, ask rafi@hackyale.com or alex@hackyale.com for help.

Add a custom footer
Add a custom sidebar
Clone this wiki locally