Fundamentals of JavaScript; event-based programming. The class will combine lecture-like presentation of material and hands-on programming activities.

This class is relevant to all the future programming assignments and project 2, where you will have to implement an interactive prototype of your product concept.

Bring a computer & install Chrome!

Required reading (post your written response before class):

• JavaScript Basics

Optional readings:

• JavaScript: The Good Parts (electronic version of this book is available through Harvard library); relevant parts include Ch 3 (through 3.4), Ch 4 (through 4.5), Ch 6 (through 6.5)
  
• JavaScript Guide from the Mozilla Developer Network

Slides with description of activities

Skeleton code

Code (to be gradually revealed during class):

var team = {
 teamName: "CS 179 staff",

 teammates: [
 {
 name: "Bernd",
 confidence: 3,
 popularity: 0,
 photo: "t5.jpg"
 },
 {
 name: "Krzysztof",
 confidence: 2.5,
 popularity: 0,
 photo: "k.jpg"
 },
 {
 name: "Ofra",
 confidence: 3,
 popularity: 0,
 photo: "t4.jpg"
 },
 {
 name: "Sarah",
 confidence: 3,
 popularity: 0,
 photo: "t2.jpg"
 },
 {
 name: "Winston",
 confidence: 3,
 popularity: 0,
 photo: "t3.jpg"
 },
 {
 name: "Yujie",
 confidence: 3,
 popularity: 0,
 photo: "t1.jpg"
 }
 ],
}

function displayTeam() {
 $("#teamName").html(team.teamName);
 var html = "";
 for (var i=0; i<team.teammates.length; i++) {
 html += '<div class="teammate" data-index="' + i + '">';
 html += '<div class="name">' + team.teammates[i].name + '</div>';
 html += '<img src="' + team.teammates[i].photo + '" alt="' + team.teammates[i].name + '" width="150px"/>';
 html += '<div class="popularity">Popularity: <span class="popularityValue">' + team.teammates[i].popularity + '</span></div>';
 html += '<div class="confidence">Confidence: ' + team.teammates[i].confidence + '</div>';

 html += "</div>";
 }
 $("#teamMembers").html(html);
 $(".confidence").hide();

 $(".teammate").mouseenter(function(event) {
 $(this).addClass("spotlight");
 $(".confidence", this).show()
 });
 $(".teammate").mouseleave(function(event) {
 $(this).removeClass("spotlight");
 $(".confidence", this).hide()
 });

 $(".teammate").click(function() {
 incrementPopularity($(this).attr("data-index"))
 });
}

function incrementPopularity(teammateIndex) {
 team.teammates[teammateIndex].popularity++;
 $(".teammate[data-index=" + teammateIndex + "] .popularityValue").html(team.teammates[teammateIndex].popularity);
}

$(function() {
 displayTeam(team);
});