Tasks for Week 9 — JavaScript, March 9 – 13

When you come back from Spring Break, we will have a normal week in this class. That means a normal class meeting on Monday, an individual meeting, a quiz, and an assignment (in Canvas) due on Sunday night.

Please do not forget that your 15-point CSS assignment (in Canvas) is due on Sunday, March 8.

This week we start JavaScript. HTML is for structure, CSS is for design, and JavaScript is for action! Yay! See the Course Schedule under Week 9 for the list of exercises you need to show me in your weekly meeting. Try to remember the principles you learned in Python — those will help you make sense of JavaScript!

The quiz this week will be all about JavaScript. So will the assignment in Canvas.

Advertisements

Week 13 assignments: Practice with jQuery, JavaScript

For Monday, March 31, you will complete four (4) jQuery or JavaScript tutorials and produce your own version of the project(s) from each tutorial. So you will have at least four different Web pages (on your hard drive) to show me. Files from the Lynda.com downloads will not suffice. Make your own files.

Your files need not be as complex as the exercise files downloaded from Lynda.com! You can make a simple file with a very plain design to test and experiment with what the tutorial taught. That’s what I want to see.

This will definitely take seven hours, so please be sure to start early and work daily on these assignments.

Choose from ONLY these tutorials at Lynda.com (log in here for free access):

See the benchmark (Week 13). Do not substitute any other tutorials. Choose four from the list above only.

I recommend that you code along with the videos. Arrange the video window beside your TextWrangler and type everything that is typed in the video. Of course, you can pause the video as needed.

NOTE: When you show your work, I will need to be convinced that you did MORE than simply COPY the exercise files downloaded from Lynda.com. Make your own variations. Play with the code. 

Examples of interactive journalism – Week 10

As always, add your own example for extra credit by providing a link in a reply to this post.

This week’s example, The ‘Boys’ in the Bunkhouse, from The New York Times, has several not-so-flashy JavaScript effects that are worth thinking about. It uses the responsive Foundation framework — check out its features!

A very obvious use of JavaScript appears about one-fourth of the way down the page (see the third image below): click the gray-boxed text or the pullout text on the right side, and an image of a document reveals itself in-line with the main text.

Boys NYTimes March 2014

Boys 2 NYTimes March 2014

Boys 3 NYTimes March 2014

Boys 4 NYTimes March 2014

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Week 8 assignments: Learning JavaScript

Before class, read the assigned article linked on the Course Schedule page under Week 8.

That is also where you will find your benchmark for this week. The more exercises you have completed by Monday, Feb. 24, the more you will understand in the lecture.

I will be giving you several in-class assignments on Monday. If you have not completed most of the JavaScript exercises, you are likely to be very lost. So to use your class time well, please come prepared.

This will be our only lecture on JavaScript. We will go straight into jQuery (which relies on JavaScript) after Spring Break.

Do you feel like writing code is still hard for you?

In this very amusing blog post (you must read it to the end!), by student Michelle Bu, you’ll find out how hard her first coding experience was for her:

21 Nested Callbacks

I was laughing out loud as I read it.

I’ve realized that with each piece of code I’ve written since my triangles, I’ve only gotten better at “Googling it,” debugging, and being generally competent about miscellaneous programming topics–and it’s all because I saw each and every silly project through. — Michelle Bu

So 21 months ago, she didn’t even know how to write a loop. Now she’s a Ph.D. student in computer science.

Here is her first attempt (21 months ago), and here is her new, responsive, fabulous version.

Check out Michelle’s Projects.

Examples of interactive journalism – Week 12

To see all posts in the “Examples” series, view the category “Examples.”

This week’s example — Unfit for Work —  is a beautiful responsive article design from Planet Money, a program that runs on National Public Radio.

Screenshot: Unfit for Work

It has a very effective chapter format, and video, charts and other helpful media appear in and alongside the article text.

Compared with other examples we’ve seen this semester, I think this is one of the most responsive — it’s very flexible on different devices!

The article’s CSS uses HTML5 Boilerplate and Initializr (recommended).

The article’s JavaScript is linked at the bottom of the HTML page, above the closing BODY tag. It’s very short and mainly deals with the responsive elements.

Your Reply

Leave a comment on this post to submit your example for this week.

  • Post only ONE link.
  • Make sure your link is correct and functional.
  • Include the title or headline of the example you are linking to.
  • Write one sentence about why we should appreciate it.

Read the details and rules on the Required Work page, under the subheading “Extra credit.”

Week 13 assignments: jQuery tutorials at Lynda.com

For Monday, April 1, you will complete four (4) jQuery tutorials and produce your own version of the project from each tutorial. So you will have four different Web pages to show me.

Choose from ONLY these tutorials at Lynda.com (log in here):

  1. Create a Tooltip with jQuery
  2. Create a Rotating Carousel with jQuery
  3. Create a Sliding Tabbed Panel with jQuery
  4. Create an Interactive Map with jQuery
  5. Create an Animated Bar Chart with jQuery
  6. Create an Interactive Homepage Marquee with jQuery
  7. JavaScript and AJAX
  8. Create an Expandable FAQ Listing with jQuery

See the benchmark (Week 13). Do not substitute any other tutorials.

I recommend that you code along with the videos. Arrange the video window beside your TextWrangler and type everything that is typed in the video.

NOTE: When you show your work, I will need to be convinced that you did MORE than simply COPY the exercise files downloaded from Lynda.com. Make some variations. Play with the code.