WEB 150 - Winter 2015

Intro to JavaScript

Assignments

#1 - Hello, World - Due: Jan. 13

This week, you've learned a bit about JavaScript, and a bit about GitHub. Let's put that knowledge to work by creating a simple page containing some JavaScript, and committing it to your repository.

In your repo, which was forked from SCCC/web150-w15 and then cloned to your computer, add a directory named assignment-1. In that directory, create two files: index.html, and script.js. The index file should include the script, but also include an inline script as well. In the external script.js file, define a variable named myName that contains (surprise!) your name. In the inline script, log this variable to the console.

Once you've created these files, commit them to your repository and then synchronize it with GitHub. Use the website to verify that they've been uploaded, and then send me an e-mail at scc@thomaswilburn.net and let me know what your GitHub username is. If your e-mail address doesn't make it obvious, give me your real name as well, so that I can match them up.

#2 - Choose Your Own Adventure - Due: Jan. 20

We now know how to make decisions on a page in response to user input (that is to say, prompt() and confirm()). That means we can write a digital version of one of Western civilization's great innovations in literature: the Choose Your Own Adventure story. Create a page on a story or topic of your choice, using JavaScript to ask questions and then output to the console in response to the answers. The resulting decision tree should involve the following characteristics:

  • At least one nested choice — meaning an if or switch inside of another conditional statement.
  • At least one choice based on a string comparison.
  • At least one choice based on a numerical comparison, with at least three potential outcomes.

You can make this "adventure" anything you want. It can be a fictional story, or it can be a walkthrough a given topic. Past students have done things like a guide to local restaurants (delicious!), a tax calculator (helpful!), or a trip planner (jealousy-inducing!).

#3 - Earthquake Analysis - Due: Jan. 27

This weekend we're going to do some data analysis. Include this script file in your page. It'll create three arrays for you with information about earthquakes in the previous week, matched across arrays by index (i.e., depth[101] is the same earthquake as magnitude[101]):

  • depth - the depths of each quake
  • magnitude - the size of each quake
  • type - the type of each quake

Using these arrays and your new knowledge of loops, answer the following questions:

  • What was the size of the biggest earthquake this week?
  • What is the average depth where a quake takes place?
  • How many quakes have a type other than "earthquake" (e.g., "quarry blast" and "explosion")

If you are feeling confident, answer the following questions (not for credit):

  • What's the depth of the biggest earthquake?
  • What's the average magnitude of quakes with a type of "explosion"?
  • How many earthquakes had a magnitude greater than 2.0?

#4 - Top Companies - Due: Feb. 3

Just as with last week, I've put together a data file for you. In this case, companies.js defines a variable named companies, containing data pulled from the Seattle Times' "Top Northwest Companies" rankings. Each object in the array contains the following properties:

  • rank - Rank for this year
  • previous - Rank for last year (if listed, otherwise "")
  • company - Name of the company
  • hq - Location of headquarters
  • sector - Business sector ("computer", "travel", "business")
  • symbol - Stock symbol
  • roic - Return on invested capital
  • marketCap - Current market capitalization
  • freeCash - Free cash
  • sales - Total sales
  • profit - Total profit
  • profitDelta - Change in profit from last year's value
  • roa - Return on assets (I think?)
  • employees - Employee count
  • pe - Price/Earnings ratio

Don't worry if you don't understand the financial jargon — I don't understand all of it myself, and we won't be using the more esoteric columns. Answer the following questions using the information in this array:

  • What's the smallest company (in terms of employee count) on the list?
  • Several companies lost money this year: they had a negative profit. What were these companies?
  • What's the average market cap for companies in the manufacturing sector?
  • (optional, not for credit) Which sector has the highest number of employees? Which has the lowest?
  • (optional, not for credit) Which company had the highest gain in ranking from the previous year, and which had the highest drop in ranking?

#5 - Test-driven Selectors - Due: Feb. 10

It's time to pass some tests: I've assembled a document with some True Facts about Hedgehogs and some automated testing in the upper-right corner. Save that file to your hard drive as a plain HTML file (DO NOT SAVE AS "COMPLETE") and then open it up in your text editor. You'll find that, after a some lines of HTML, there's a script tag with some incomplete code, waiting for you to fill it in.

If there's a variable for the test, use that variable and assign the desired value to it. If there is not a variable, you can make one, but the test will pass or fail based on changes you need to make to the page. All questions require you to use jQuery, possibly including the manipulation functions that we've covered in class, like css() and html(). The tests are not always perfect, so let me know if you think you've got a correct answer but you can't get it to turn green.

#6 - Dog Solution - Due: Feb. 17

Let's turn our attention to the serious problem of dogs, and lists containing dogs. This week we have experimented with UI for showing and hiding an entire section of the page, but what if we wanted to be more granular? For your assignment, create a page that has the following characteristics:

  • A table (yes, a table!) listing a number of dogs that are available for adoption. Specify the name, breed, sex, size (small, medium, large), and color.
  • A set of buttons above the table that for at least one of these characteristics will allow you to filter the table. For example, you might have buttons marked "small," "medium," and "large" that will show only table rows matching those dogs fitting the category when clicked.
  • A "reset" or "all" button that will show all the dogs after the list has been filtered.

Hint: you will find this homework easy to do if you remember two things: first, that you can use classes to categorize elements in ways unrelated to style, and second, that you should probably show/hide the entire table row instead of individual cells or blocks inside the table.

If you would like an extra challenge, make the buttons behave like toggles, so that I can search for dogs matching multiple criteria ("large, black, female dogs"). If you attempt this, I would highly recommend first committing a working version of the default assignment, in case it turns out to be harder than you anticipate and you need to roll back to the earlier page.

#7 - Uptown Functions - Due: Feb. 24

Tonight in class, we built a simple animation where a character moved around the canvas, and could be relocated using a click. Using functions, we created "plugins" for that character's behavior. Your task is to take our existing code (either from what you did in class, or downloaded from the in-class page) and create at least one new kind of behavior for that character by writing a new function and assigning it to a button. You can create any behavior you want, but a few suggestions include:

  • Move toward the middle of the screen from any other point
  • Randomly wander in all directions
  • Drop to the bottom of the screen and then continue to slide horizontally
  • Drop to the bottom of the screen and bounce
  • Run away from the mouse cursor
  • Teleport to the cursor location when the canvas is tapped or clicked
  • Control the character directly using the arrow keys

#7B - Reader's Choice - Due: Week of Feb. 23

We are about half-way through the class now, and have covered enough material that you should be able to look at other people's code and understand large portions of it. It's time to start thinking about what you're going to write about for your end-of-quarter "book report." I'd like to make sure that you don't dive into something that's too complicated. At some point during the week ahead, send me an e-mail with at least two scripts that you'd like to report on, keeping the following points in mind:

  • You do not have to report on an entire, 1000+ line library like jQuery. You can pick out a specific function or section to comment on.
  • That said, you should be looking for something that's at least 50 lines of code and a decent amount of complexity — do not pick the outer loop of a game or something that only calls helper functions.
  • Pick something you find interesting or useful - a plugin that you regularly use, a flashy effect you've enjoyed on a website, or a technology that you haven't had a chance to use (such as HTML5 Video or Web Audio).
  • If possible, find the source code on GitHub and include a link to the repo.

#8 - Irregular Expression - Due: Mar. 3

This week we learned about using JavaScript to interact with HTML form elements, and using regular expressions to validate their input. For your homework, put together a page with the following text inputs:

  • An input that accepts only vowels. If other letters are entered, show an error message below the input.
  • An input that expects input ending in "ing". When the user tabs away or clicks elsewhere, if the input doesn't match this pattern, outline it in orange.
  • An input for numbers, including (but not limited to) those with commas, one decimal place, and a negative sign. If the input is not a number, set the "disabled" attribute on a nearby submit button.

#9 - The Social(ism) Network - Due: Mar. 10

I don't know about you, but my Facebook feed these days seems to consist entirely of fringe political opinions and horrible linkbait rumormongering--and you won't believe what happens next! Let's simulate the modern social network experience with a little AJAX magic. I've set up a server that publishes "status updates" combining lines from the Communist Manifesto with article titles from Snopes.com at thomaswilburn.net:8080/social. The JSON object that it returns looks something like this: { "updates": [ { "name": "Karl Snopes", "status": "Singer Beyoncé Knowles was killed in a car crash. This school of Socialism dissected with great acuteness the contradictions in the conditions of modern production." }, { "name": "Karl Snopes", "status": "President Obama has signed a new law lowering the minimum drinking age to 18. Let the ruling classes tremble at a Communistic revolution." } ] }

Your assignment is to create an "infinite scroll" page that loads this feed and places these items on the page, with a "load more" button at the bottom that adds more items to the list without refreshing the page. If you need an additional challenge, see if you can set the page to update simply when the user scrolls near the bottom, without requiring a button-press. Bear in mind: a templating system will make translating the feed data into HTML much easier.

Remember, you can't use AJAX on a page loaded from a file:// URL. You may choose to load it off of a server like Edison, or you can run it on your local machine using the Node http-server module. See these instructions for help setting up your local dev server as we did in class.