javascript

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.

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.

Examples of interactive journalism – Week 11

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

This week’s example, from The New York Times, uses two different techniques with JavaScript/jQuery — one simple, one advanced.

The first graphic on the page uses jQuery techniques you have already learned to animate the transitions between 10 different images. Below the screenshot, you can see the code that begins on line 1422 of the source — that’s where the JPGs appear in the HTML. Notice how each image has an ID and a class. Each image also has its own z-index embedded in the HTML (z-index is a CSS property that lets you control how images layer on top of one another).

NYT schools graphic 1

NYT schools graphic 2

The second graphic on the same page was created with D3.js — “a JavaScript library for manipulating documents based on data.” I’ve shown a little bit of the code, below the screen capture (the code shown here starts at line 1590 in the source). So the map (unlike the school floor plans above) is not a static image file but is actually generated by code. Like jQuery, D3 is a JavaScript library — but it has a different purpose. D3 creates images from pure data.

If you right-click on the school building graphic, you can view or save the image. But if you right-click on the map graphic, you can’t — because there is no image file.

The map has its own CSS, which starts at line 662 in the source.

NYT schools graphic 2

NYT schools graphic 4

To learn more about D3 and see examples, see the D3 home page.

A simple photo gallery, with jQuery

If you want to see an improved version of the photo gallery from last week’s class (March 11), I have uploaded the files to GitHub:

See all the files. You can also download a zipped package of all the files there — just find the button near the top that says “ZIP.”

You can also test-drive the four versions of the photo gallery.

  • Version 0 is the one we saw in class, where the big photos disappear from the DOM.
  • Version 1 fixes that problem.
  • Version 2 and 3 add captions to the photos.

The photo gallery uses only jQuery code you have already learned from Code School!

Other ways to learn Web stuff

CodePen’s Pattern Rodeo offers you a fun way to test your skills. The weekly contest ran for four weeks. Each week had a different theme. Check out the winners! When you click the winner’s name, you can see (and copy) his/her CSS and JavaScript.

CodePen is a website where you can view other people’s CSS and JavaScript and HTML. It’s a great place to explore. You can look around as much as you want without signing up for an account. Or sign up (it’s free) and play there yourself.

Another fun place to play around is Mozilla Thimble. Some of the stuff here is too simple for you now, but there’s lot’s of good HTML know-how here that might be new to you. For example, learn about CSS positioning by playing with zombies!

Another part of Codecademy is the APIs section. There are projects here that let you use Python. There are some other projects for JavaScript. In these projects, you can learn how to build apps. Yes, apps!