HTML, JavaScript, jQuery, CSS

Key Ideas

Make a page, make it come to life, make it beautiful

Let’s build a $2,000 calculator!

But first, recall some key ideas….

Key HTML Ideas

A web page is a collection of HTML elements:

• paragraphs
• headings
• buttons
• anchors
• input fields
• (divisions)
• (spans)
• etc.

<h1>Important News</h1>

<p>This just in. Spam spam and beans contains spam!</p>

​

<button>like</button>

<button>don’t like</button>

​

<h1>Talk back</h1>

Would you like to leave us a comment?

​

<input type=text></input>

​

See our <a href=”www.photos.com”>photos page</a>

​

Key HTML ideas (2)

• Elements can contain text and/or other elements.� <table>� <tr>� <td><img src=”puppy.png”></td>� <td><img src=”kitten.png”></td>� </tr>� </table>�
• Elements can have attributes:
• check boxes can be checked or unchecked
• lists can be 1,2,3, or a,b,c, or bullets

​

Key HTML ideas (3)

• Elements can be given identifiers. This is really useful if you want to inspect or modify one.�<p>� Welcome <span id=“name”>Dr. Hopper</span>.� Your next appointment is at <span id=“time”>� 1:30pm</span>.�</p>�
• Elements can be given behaviors with javascript:
• what to do when clicked.
• what to do when changed.
• what to do when data entered.

​

​

​

Key JavaScript Ideas

• JavaScript is a full-fledged programming language. It can
• do things in a sequence
• remember things
• repeat things
• make decisions.

​

• Use built-in "blocks" or make your own "custom blocks" a.k.a. functions.

​

​

Key JavaScript Ideas (functions)

function getRandomFlavor() {

var flavors = [“chocolate”, “vanilla”, “strawberry”];

var flavorNumber = Math.floor(Math.random(flavors.length));

return flavors[flavorNumber];

}

​

Functions with parameters

function hasChocolate(flavorList) {

for (var i = 0; i < flavorList.length; i++) {

if (flavorList[i] == “Chocolate”) {

return true;

} else {

return false;

}

}

}

Key jQuery ideas

• jQuery is a collection (“library”) of functions that somebody made and you can load.
• Actually, many, many somebodies.�
• The key jQuery function is the selector: grab one or more elements of a page and inspect or modify them.

​

Example jQuery Selector

HTML

<p><span id=”day”></span> the weather will be

<span id=”forecast”></span>.</p>

​

<button id=”next”>Next</button>

JavaScript + jQuery

var days=[“Monday”, “Tuesday”, “Wednesday”];

var forecast=[“sunny”, “rainy”, “cloudy”];

var dayNumber = 0;

​

function showForecast(i) {

$(“#day”).text(days[i]);

$(“#forecast”).text(forecast[i]);

}

​

$(“#next”).click(function(){

dayNumber = (dayNumber+1) % 3;

showForecast(dayNumber);

});

​

​

http://jsfiddle.net/davidrhmiller/Lj9qubba/

CSS Key Ideas

• Cascading Style Sheets lets you control how things look based on their id or class.
• color, font, size, alignment, etc.

​

• jQuery mobile API defines a bunch of styles you can use
• Just add class attributes to standard HTML elements.
• These styles look good on mobile devices.

​

Now Let’s Try This