Week 4

Homework: Calculators

Solution

Homework is due on Thursday, August 20th.

Your task is to write four functions that will make three calculators work:

• Celcius to fahrenheit: celcius * (9/5) + 32
• Fahrenheit to celcius: (fahrenheit - 32) * 5/9
• Radius to circumference: 2 * Math.PI * radius
• Pythagorean theorem: Math.sqrt((a * a) + (b * b))

Download the ZIP to get started. You'll see an index.html file. That's where your code will go. There's actually a place at the bottom that shows you exactly where to put your code. You have to use your developer tools to complete this assignment. The four functions you're writing can't just be called anything. They must be called certain things and they must take certain arguments. That's what you need to figure out. They also must each return a number. Once they return the right number, you'll see that number appear in the interface.

Still confused? Message Danaan ;^D j/k/j/k! Try putting this inside the script tag:

  
    function calcFahrenheitToCelcius() {
      return 5;
    }
  

For those that want a sneak peak of what's to come, study the interface.js.

Resources

• MDN on HTML Form Inputs
• A pretty good guide on preferred Javascript style
• CSS Quiz (view the source)
• CSS Specificity Calculator
• MDN on HTMl Link Element
• MDN on iframes
• MDN on Forms
• MDN on Labels
• Javascript Primitives
• Javascript Data Structures
• Javascript Grammar and Types

Forms

Forms are how we manage data we are going to send to the server. The entire form content is wrapped in a <form> tag. Forms have attributes that describe how they should interact with the server - the most important of these are method (which describes the HTTP method to use) and action (which describes where the data should be sent). See MDN's form reference for a complete list and more details

The form's data are stored in <input> tags to allow for user interaction. There are many types of <input> tags and related attributes, see MDN's reference on inputs for a comprehensive list of input types and other related input attributes.

<input> tags are labeled by <label> tags. You can use the for attribute on your <label> tag to reference the labeled input element's id.

Why do we need programming languages?

• branching/condtionals: if a certain state is observed, do a thing
• loops: doing the same thing to a whole list of things
• input/output: consuming data and doing something with it

Variables

In programming languages, information is stored in things called variables.

in Javascript variables are created using the keyword var. For example: var x = 1;

Variables can store different types of data, for example:

• Numbers: sometimes called integers (without a decimal) and floats (with a decimal). In Javascript we just call them all numbers
• Strings: some text, programming languages like Javascript are good at manipulating text

Operators

In the above example (var x = 1;), we call the equals sign (=) the "operator". The operator = assigns a value to a variable. The above example assigns the value 1 to the variable x.

There are other operators used to manipulate values, for example: +, -, *, etc.

Functions

Functions fundamentally have three parts:

• Take in some information. We call this input information 'arguments'. You can supply a function with as many arguments as you like.
• Do something, probably using the information that has been 'passed in' as arguments.
• Return something. Functions in Javascript always return something. If they don't return a specific value, they return a value called undefined.

For example:

function sum(a, b) {
  var result = a + b;
  return result;
}

Functions are called with parentheses, for example, the following returns the number 5:

sum(2, 3);

Javascript and the browser provide you with a bunch of functions you can use to do things. You can find a complete list at MDN. Some examples (try them out!):

• parseInt
• alert
• prompt

Javascript Language Rules

• Lines end with a semicolon (;)
• Some words are reserved, for example var.
• Variable names can't start with numbers, but they can contain numbers.
• Variable names should be camel case for example: forExample