CS638 – JavaScript and Web Programming – 2015 — Course Website

Some Answers to Lots of Questions (index cards)

by Mike Gleicher on October 15, 2015

The index cards (with questions people had) were very enlightening. There were some common questions that I thought I should answer. Class time is so limited that I need other mechanisms…

One comment a few people made: We spend class time on the tricky bits, not the basic parts. (said in various ways)

This is true. My reason is that I figure that the book is good at explaining the basic bits, so we should use class time for the trickier parts. In hindsight, I am realizing that there are some basic things that are difficult to get from the book. Of course, I’m not sure that there’s any way to get them other than experiencing them by trying. But, to those people who said “it would have been better to start with the basics” – I now agree.

To the people who said the assignment deadlines are clear (very few). I am working to keep the “Week in 638” widget (at the upper left of the course web page) up to date. It’s right there. If you are missing announcements, you can sign up to get an email whenever there is a posting to the web page. The Canvas page is admittedly a bit of a mess while we re-organize the course.

There were a lot of questions about manipulating the DOM from code. The basic “how do I learn about it” is “from the readings” (Chapter 13 of the book, which was part of last week’s reading) is quite good. I recommend reading it again. It talks about appendChild and replaceChild and other things that people asked about.

Some people asked about basic HTML structure. We probably could have spent more time on that. (but this is a JavaScript class, not an HTML class) Again, the book chapters are a good start. But, more generally, you will need to learn some HTML. I have created a new discussion topic on Canvas for people to leave suggestions of things they’ve found useful.

And yes … Part of web programming is using the web as a resource. Part of learning to do web programming is learning to make sense of those resources. Making searches to figure out details is part of the game. Hopefully from class and the book you know the right questions to ask, so you are only searching for the details (that are too numerous to discuss in class).

Anyway, this was really useful for me to understand where people were getting stuck. Clearly, there are some things I could be doing better. I’m delaying puzzle 2 until I can make some adjustments.

Follow-up on the Programming Puzzle

by Mike Gleicher on October 14, 2015

in News

I wasn’t so clear in class, so let me be more explicit about the expectations.

Just because we’ve discussed the puzzle in class doesn’t mean your done with it!

You can update your solution: if you didn’t get it before class, hopefully based on the class discussion and seeing other answers you’ll be able to get it. If you had a solution, maybe you can make it better. I’d prefer that you update your solution (post it as a reply to your original) than delete your old one.

You are still required to go back to the assignment (after making your initial post). Look at some other assignments and compare them to your own. Give some feedback to your classmates. Say something more than “it works”. While there are no “explicit” minimums, if everyone comments on 3-4 other programs, you’ll learn (by seeing what others do), and everyone will get a reasonable amount of feedback.

For the next puzzle, i’ll be more explicit in the instructions.

Also: I promised to post my solutions – I will post my answer to each of the 4 sub-groups. You are welcome to see how I did it, but be sure to look at others. Mine is quick and sloppy. Others I saw are much better.

The next puzzle will be coming soon. (well, as soon as I can think of something – it’s hard to come up with assignment ideas).

The Week in 638: Week 6, October 12-16

by Mike Gleicher on October 10, 2015

in News,Week in 638

Last week, we discussed doing stuff with the web browser – and hopefully you got to try doing it with the programming puzzle.

For this week:

Reading Assignment 5 and Programming Puzzle 1 are due on Monday 10/12. After Monday, go back and comment on other people’s answers to the programming puzzle! (reading other people’s code is part of the assignment)

In lecture, we’ll talk about object oriented programming.

Based on the results of programming puzzle 1, there will be a second programming puzzle assigned later in the week and due on Monday 10/19.

Reading 6: Language Gotchas

by Mike Gleicher on October 10, 2015

in News,Readings

For Monday, October 19th, I’d like you to read 3 more chapters of JavaScript the Good Parts. There will be no mandatory discussion. However, there will be another programming puzzle (announced later)

We’ve seen over the past few weeks how the flexibility of JavaScript can be handy. Maybe you’re guessing (or have experienced) that it also gives you plenty of ways to shoot yourself in the foot.

This week’s reading will point out some of these pitfalls again, and some ways of protecting ourselves.

Please read:

JavaScript, The Good Parts, Chapter 8 – Style (link to file on Canvas – yes, the file is named Chapter 8)
JavaScript, The Good Parts, Appendix A – Awful Parts (link to file on Canvas)
JavaScript, The Good Parts, Appendix B – Bad Parts (link to file on Canvas)

Lecture Notes 5 (10/6) – Web Pages (code and slides)

by Mike Gleicher on October 6, 2015

in Lecture Notes,News

I put all of the example code into a single jsbin: http://jsbin.com/wojutu/edit?js,output

You can read through it – see if you can figure out how it works! (Example 11 is the head start for the programming puzzle)

Slides (which are admittedly less useful this week): 05-dom-slides

Programming Puzzle 1: To Do List

by Mike Gleicher on October 6, 2015

in Assignments,News

This is the first of (what will hopefully be) a series of small programming assignments to get you thinking about what we’re learning about in class.

These should be easy enough that you can get the basic version done relatively quickly. If you find yourself getting stuck, ask for help.

I am trying to separate the mechanics of how we turn them in, evaluate them, and peer learn with them from the assignments themselves – but that is part of it.

For this time: we’ll try the mechanism of a Canvas discussion. Turn your program in as your initial posting on the Canvas discussion. Then your groupmates will be able to see your program and comment/discuss. If you are stuck, make your initial posting be a question explaining where you got stuck. And then either someone might be able to help you, or you’ll get to see other people’s solutions which will give you hints.

For handing things in, give a link to a place where the code is running. It can be a link to an online IDE (like JSBin), or a link to a place where the code is running (if you have access to a web server. you can always use your CS account – which provides web access in the “public/html” directory of your AFS home directory). If you do put it on JSBin, I recommend writing your code somewhere else first (so you have a debugger) and then move it there. (that’s what I am starting to do).

This is an experiment… we’ll see how it works.

Due date: make your initial posting (with either your working program, or a question to help you get unstuck) by Monday, October 12. You are also required to comment on other people’s code (by replying to their posting) – which might be answering a person’s question. So you’ll have to look at things after the 12th as well.

The Canvas things:

The discussion for this puzzle (where you put your answer and discuss other people’s)
A discussion for clarifications about puzzles (if you don’t understand the problem description)
A discussion for Reading 5 (if you have questions about manipulating web pages with JavaScript)

Now for the puzzle…

The Puzzle: To Do List

Your task is to make a simple to do list. Everything is stored on the web page (no server) – so it’s not that practical. But it will get you making and re-arranging elements, and using closures to write functions that respond to events.

You program should make a to-do list. At the top of the page, there should be a type-in box (an “input” element of type text), and a button that causes what has gotten typed in to be made into a to-do list item. If you want to just have the user press enter after typing something, that’s fine too.

When a todo list item is created, it should be added to a list on the web page. With a checkbox.

When the checkbox for an item is checked off, that item should be moved to the “Done” list.

My basic one is 26 lines of JavaScript, and a shorter HTML file. It’s really basic.

If you get the basic one working, add some bells and whistles!

allow the user to set a priority for each item, and have the list be sorted appropriately
make it look nice
add a due time to each to do item, and allow the list to be sorted by either time or priority
something creative

This is not meant to be a big project. (as I said, mine was 26 lines of code – although its quite basic). The important thing is to try to use some of the functional mechanisms we discussed to give behaviors to the checkboxes, and to see how to manipulate the web page programmatically.

Some hints (if you need them):

If you know JQuery, it is less code to manipulate the web page with JQuery than with plain JavaScript functions. For this, don’t try to learn JQuery. In fact, don’t even use JQuery.
I think it’s easier to create a function (with a closure) that handles the “click” of a checkbox when the checkbox is created.
We haven’t discussed event handling much in class. But, for a checkbox element, you can set its “onchange” field to be a function that gets called.
For some reason, my program doesn’t always work in JSBin.

The week in 638: Week 5 October 5-9

by Mike Gleicher on October 2, 2015

in News,Week in 638

Last week, we tried to do some peer review (and found bugs in Canvas), looked at what we might do with functions, and puzzled over what “this” means.

And I realized that class might not be worked as I had hoped… Please read the new plan.

For next week:

We’ll still have Reading 4 (about Objects) due on Monday, October 5. It won’t be the topic of lecture discussion (we’ll come back to it later).
You might want to look ahead at Reading 5 (about the web browser) – we’ll discuss this in class
There won’t be a big programming assignment due on October 12. But expect a stream of little programming assignments to start.

Reading 5: JavaScript and the Web Browser

by Mike Gleicher on October 2, 2015

in Assignments,News,Readings

In order to try out some of the ideas we’ve learned in the early part of class, we need to know how to make our programs do stuff in the web browser, so we can write programs that do something.

The readings for this part are 3 chapters in Eloquent JavaScript.

Don’t expect to get all the pesky details. In practice, when you do this kind of programming you are constantly searching the web for a reference (what is that attribute called again?)

For these readings, there will be no discussion. But, there will be some small programming puzzles so you can try out the ideas.

Even though there is no check that you’ve done the readings, please:

Give them a quick skim either before the October 6 lecture, or shortly after
Really read them before the October 13th lecture

I’ve created a Canvas discussion for people to ask (and hopefully answer) questions. We’ll see if that works.

Change of Plans…

by Mike Gleicher on October 2, 2015

in News

I am realizing that the way class has been working might not be working.

Right now, I have you read about stuff. Then you watch me work through little code snippets that untangle the concepts. This is great for me (writing those snippets really helps me understand), but I can’t imagine that this is a “learn by watching” kind of thing.

Ideas:

First, I think we need to talk a little bit about programming for the web browser. That way we can make programs that do things so we can really try things out. And see how little pieces fit into something complete.

Second, I’d like to start having you write the little snippets to work out the concepts. Of course, I am not sure how to make the mechanics of this work. It would be easier if I could recommend people write them in JSBin or something like that – but without a debuggers it’s harder. Plus since Canvas peer review isn’t working…

Third, I’m having a hard time thinking of “bigger” programming assignments that are interesting enough and pedagogical enough.

What this means:

I am not going to change Reading 4 (due Monday, Oct 5). I want you to read it and we’ll use the existing discussion mechanism. But after this, we’ll slow down the readings a bit to let people digest it.

In class Tuesday, and (for the next reading) we’ll talk about how web pages work in the web browser, and how we manipulate them from JavaScript. This will let us write some more interesting programs.

After class Tuesday, I am going to start assigning smallish “programming puzzles” – these will be little programs for you to try writing. The idea is that if you’re not getting it after a short amount of time, you should “cheat” and look at a solution. Rather than trying peer review, maybe we’ll try using a discussion – so you can post a link to your program (whether it works or not). If you say “I’m stumped someone please help” maybe a classmate will be able to help you (figuring out other people’s bugs is good practice).

Hopefully, these programs won’t be too hard to write (less than an hour) – so if they are boring, it won’t matter as much. Later in the semester, I want to ask people to write more interesting things.

Thanks again for bearing with the experiments.