TITLE: And Then Came JavaScript
AUTHOR: Eugene Wallingford
DATE: November 24, 2023 12:17 PM
DESC: 
-----
BODY:

 It's been a long time again between posts.  That seems to be the new
 normal.  On top of that, though, teaching web development this fall
 for the first time has been soaking up all of my free hours in the
 evenings and over the weekends, which has left me little time to be
 sad about not blogging.  I've certainly been writing plenty of text
 and a bit of code.

 The course started off with a lot of positive energy.  The students
 were excited to learn HTML and CSS.  I made a few mistakes in how I
 organized and presented topics, but things went pretty well.  By all
 accounts, students seemed to enjoy what they were learning and doing.

 And then came JavaScript.

 Well, along came real computer programming.  It could have been
 Python or some other language, I think, but the transition to writing
 <em>programs</em>, even short bits of code, took the wind out of the
 students' excitement.

 I was prepared for the possibility that the mood of the course would
 change when we shifted from CSS to JavaScript.  A previous offering
 of the course had encountered a similar obstacle.  Learning to program
 is a challenge.  I'm still not convinced that learning to program is
 that much harder than a lot of things people learn to do, but it does
 take time.

 As I prepared for the course last summer, I saw so many different
 approaches to teaching JavaScript for web development.  Many assumed
 a lot of HTML/CSS/DOM background, certainly more than my students had
 picked up in six weeks.  Others assumed programming experience most
 of my students didn't have, even when the approach <strong>said</strong>
 'no experience necessary!'.  So I had to find a middle path.

 <figure style="float:right;margin-left:8px;margin-bottom:5px;">
   <img
     src="https://www.cs.uni.edu/~wallingf/blog-images/art/mdn-cube.png"
     alt="a colorful cube with sides labeled HTML, CSS, and JS" 
     style="width:200px;"
   >
   <figcaption style="font-style:italic;font-size:smaller">
     Source:
     <a href="https://developer.mozilla.org/en-US/">MDN</a>,
     <a href="https://creativecommons.org/licenses/by-sa/2.5/">CC BY-SA 2.5</a>
   </figcaption>
 </figure>

 My main source of inspiration in the first half of the course was
 <a href="https://blog.humphd.org/vocamus-2/">David Humphrey</a>'s
 WEB 222 course, which was explicitly aimed at an audience of CS
 students with programming experience.  So I knew that I had to do
 something different with my students, even as I used his wonderful
 course materials whenever I could.

 My department had offered this course once many years ago, aimed at
 much the same kind of audience as mine, and the instructor &mdash;
 a good friend &mdash; shared all of his materials.  I used that
 offering as a primary source of ideas for getting started with
 JavaScript, and I occasionally adapted examples for use in my class.

 The results were not ideal.  Students don't seem to have enjoyed
 this part of the course much at all.  Some acknowledged that to me
 directly.  Even the most engaged students seemed to lose a bit of
 their energy for the course.  Performance also sagged.  Based on
 homework solutions and a short exam, I would say that only one
 student has achieved the outcomes I had originally outlined for this
 unit.

 I either expected too much or did not do a good enough job helping
 students get to where I wanted them to be.

 I have to do better next time.

 But how?

 Programming isn't as hard as some people tell us, but most of us
 can't learn to do it in five or six weeks, at least not enough to
 become very productive.  We don't expect students to master all of
 CSS or even HTML in such a short time, so we can't expect them to
 master JavaScript either.  The difference is that there seems to be
 a smooth on-ramp for learning HTML and CSS on the way to mastery,
 while JavaScript (or any other programming language) presents a
 steep climb, with occasional plateaus.

 For now, I am thinking that the key to doing better is to focus on
 an even narrower set of concepts and skills.

 If people starting from scratch can't learn all of JavaScript in five
 or six weeks, or even enough to be super-productive, what useful
 skills <strong>can</strong> they learn in that time?  For this course
 I trimmed down the set of topics that we might cover in an intro CS
 considerably, but I think I need to trim even more and &mdash; more
 importantly &mdash; choose topics and examples that are even more
 embedded in the act of web development.

 Earlier this week, a sudden burst of thought outlined something like
 this:
<ul>
<li> <code>document.querySelector()</code> to select an element in
     a page </li>
<li> simple assignment statements to modify <code>innerText</code>,
     <code>innerHTML</code>, and various style attributes </li>
<li> parameterizing changes to an element to create a function </li>
<li> <code>document.querySelectorAll()</code> to select collections of
     elements in a page </li>
<li> <code>forEach</code> to process every element in a collection </li>
<li> guarded actions to select items in the collection using
     <code>if</code> statements, without <code>else</code> clauses </li>
</ul>

 That is a lot to learn in five  weeks!  Even so, it cuts way back on
 several topics I tried cover this time, such as a more general
 discussion of objects, arrays, and boolean values, and a deeper look
 at the DOM.  And it eliminates even mentioning several topics altogether:
<ul>
<li> <code>if-else</code> statements </li>
<li> <code>while</code> statements </li>
<li> counted <code>for</code> loops and, more generally, map-like
     behavior </li>
<li> any fiddling with numbers and arithmetic, which are often used
     to learn assignment statements, <code>if</code> statements,
     and function </li>
</ul>

 There are so many things a programmer can't do without these
 concepts, such as writing an indefinite data validation loop or
 really understanding what's going on in the DOM tree.  But trying
 to cover all of those topics too did not result in students being
 able to do them either!  I think it left them confused, with so many
 new ideas jumbled in their minds, and a general dissatisfaction at
 being unable to use JavaScript effectively.

 Of course I would want to build hooks into the course for students
 who want to go deeper and are ready to do so.  There is so much good
 material on the web for people who are ready for more.  Providing
 more enriched opportunities for advanced students is easier than
 designing learning opportunities for beginners.

 Can something like this work?

 I won't know for a while.  It will be at least a year before I teach
 this course again.  I wish I could teach it again sooner, so that I
 could try some of my new ideas and get feedback on them sooner.
 Such is the curse of a university calendar and once-yearly offerings.

 It's too late to make any big changes in trajectory this semester.
 We have only two weeks after the current one-week Thanksgiving break.
 Next week, we will focus on input forms (HTML), styling (CSS), and a
 little data validation (HTML+JavaScript).  I hope that this return
 to HTML+CSS helps us end the course on a positive note.  I'd like for
 students to finish with a good feeling about all they have learned
 and now can do.
-----