Web Design Explorations

Bouncing Ball example

How does JavaScript compare to HTML and CSS?

I think first and foremost has similarities with java and other languages like C in terms of its syntax. But because Javascript is designed with HTML and CSS in mind, it gives you extended control of the content of the your website. With HTML and CSS, its use of variables and classes is less obvious and more practical.

Explain control flow and loops using an example process from everyday life, for example 'waking up' or 'brushing your teeth'.

In javascript, we can call for the DOM elements that are set in an HTML file. For example, the 'document' function tells javascript that we are calling for the DOM (Document-Object-Model)

and we access the functions within the document function by using the 'getElementByID', 'getElementByClassName', or 'getElementByTagName'.


function run() { 

  var title = document.getElementByClassName("header-title");

}

We could create functions which activates whatever code is included in that function. For example, we could take that example using "take a shower" or "brushing teeth" and build a function like so: 


var timesTakenShower = 0;
var timesBrushedTeeth = 0;

function takeShower() {
  timesTakenShower = timesTakenShower + 1;
}

function brushTeeth() {
  timesBrushedTeeth = timesBrushedTeet + 1;
}

Shower:

Bath:

var dogs = ["Snoop", "Clifford", "Lassie", "Toto"];
var text = ""

function showDogList() {

for (var i = 0;i < dogs.length; i++) {
    text += dogs[i]+"<br>";
}
document.getElementById("elem3").innerHTML = text;

//The dogs array is declared and
//a loop is initialized in the function showDogList.
}

Bath

Explain the difference between accessing data from arrays and objects.

An array uses a numeric index, which can be used to store data such as numbers, in the numeric index. Usually the index starts at 0 or called zero-based.

So for Example:

  var testArray = [1,4,3,2,4];    
var dogNames = ["Snoop", "Clifford", "Lassie", "Toto"];

//This will replace Toto as the third dog.
dogNames[3] = "Snowy";

With objects, they're similar to arrays except instead of using indexes to access and store data, you can store data in objects with the use of properties. Like the properties of an object such as an apple. It has a color, a size, and a geneaology. These are all properties which can be used to define an object.

// Example
var myDog = { 
    "name": Clifford"
    "legs": 4,
    "tails": 1,
    "color": red,
    "friends": ["everything!"]
}
Explain what functions are and why they are useful.

Functions (or methods) is a mechanism that holds a set of properties defined by the code. This will usually have its own local variables etc that can only be used inside the function and global variables can be initialized inside functions. This mechanism can be activated by "running" the function.

You can also set some parameters, and these parameters will be calculated based on the code in side the function. Some functions are built into the engine and can be called on request for example: document.getElementByID.innerHTML I think of document as the object and innerHTML as the function.

Example with celsius conversion to Fahrenheit:

function convertToF(celsius) {
  var fahrenheit = (celsius * (9/5)) + 32;
  
  if ( typeof fahrenheit !== 'undefined' ) {
  return fahrenheit;
  } else {
    return 'fahrenheit not defined';
  }
}
convertToF(30);
}