Week 6

Examples

• Triangle with CSS
• Working with arrays: starting point · solution
• Conditionals: starting point · solution

JavaScript Recipes

Adding/changing an element's attribute:

// If the element is already on the page:
var el = document.querySelector("img");
el.setAttribute("src", "http://example.com/logo.png");

// If the element is NOT on the page (new el):
var el = document.createElement("img");
el.setAttribute("src", "http://example.com/logo.png");

Adding/changing an element's textContent:

// If the element is already on the page:
var el = document.querySelector("p");
el.textContent = "The quick brown fox...";

// If the element is NOT on the page (new el):
var el = document.createElement("p");
el.textContent = "The quick brown fox...";

Adding an element to the page with text content

Here's the first attempt:

var el = document.createElement("li");
el.textContent = "Go grocery shopping...";
var parentEl = document.querySelector("ul");
parentEl.appendChild(el);

Notice how there are a bunch of hard-coded values? Let's move those out into variables:

var name = "li";
var text = "Go grocery shopping...";
var parent = "ul";

var el = document.createElement(name);
el.textContent = text;
var parentEl = document.querySelector(parent);
parentEl.appendChild(el);

Now we have a pretty good candidate for a function:

function addElement(name, parent, text) {
  var el = document.createElement(name);
  el.textContent = text;
  var parentEl = document.querySelector(parent);
  parentEl.appendChild(el);
}

addElement("li", "ul", "Go grocery shopping...");

In that last example, you could imagine now putting that function in a helpers.js file and reference it from any program:

<script src="helpers.js"></script>

Arrays

In javascript, when we want to store a list of things, we use an object called Array. Arrays can be created in javascript using square braces ([) like so: ['Avand', 'Rob', 'Sandi']

Like the other javascript objects we've looked at so far, Arrays have properties and methods that you'll probably find useful:

• properties:
  • length: a count of the number of items in the array
• methods:
  • push: adds an item to the array
  • pop: removes an item from the array
  • sort: sorts the items in the array

For Loops

In javascript, when we want to execute some code some number of times, we use a for loop. for loops are particularly helpful for doing something with each item in an array.

For example, the following code will add a list item to a list for each item in the array instructors:

var instructors = ['Avand', 'Rob', 'Sandi'];
var list = document.querySelector('ul');
var item;

for (var i = 0; i < instructors.length; i++) {
  item = document.createElement('li');
  item.textContent = instructors[i];
  list.appendChild(item);
}

Conditionals

Conditionals are how we branch our code based on some condition in programming languages.

Often times, the condition in a conditional is based on a comparison of some values. In javascript, we use the following operators to compare values:

• == (or ===): equal to
• != (or !==): not equal to
• >: greater than
• >=: greater than or equal to
• <: less than
• <=: less than or equal to

Conditionals are simply blocks of code wrapped in some condition statement. If this statement is true, then the code executes, otherwise it does not. They also provide a way to include alternative logic in an else block. In javascript, they look something like this:

var a = 1;
var b = 2;
if (a === b) {
  // this will NOT execute...:
  alert('how could this be!?!?!');
} else {
  // ...but this will execute:
  alert('naturally...');
}

Comparisons return booleans. We can combine booleans using the && (and) and || (or) operators. The following tables show how these operators will combine different boolean values:

In-Class Photos