Sprint 3 - Technical

JavaScript + The DOM


Difference between HTML & CSS

I always think about HTML and CSS like they are a Caterpillar and a Butterfly. HTML is the Caterpillar as that is what you start off with and its not very pretty. Which obviously makes CSS the Butterfly as CSS transforms the HTML just like a Caterpillar transforms into a Butterfly.


Control Flow & Loops

Control flow is as the name says controls the flow of statements, instructions or functions. Control flow usually begins with a choice needing to be made or a criteria needing to be met and then based off that decision will execute a number of instructions in a specific order. And a loop incorporated means that this control flow (routine) would loop every time the starting criteria has been met (Morning) and would break when the routine has been executed.

For example say you have two specific morning routines, one for the weekdays and one for the weekend. Depending on what day it is would determine which morning routine you would follow. Say its a weekday your alarm is set a certain time, you have breakfast, get ready, make coffee and then go to work but on the weekend you routine is to have no alarm and wake up whenever, make coffee, clean up, get ready, brunch with the girls. These routines would then loop every morning based off the criteria that is met (which day) and would break when the routine executed ends.


What is the DOM?

DOM stands for ‘Document Object Model’. The DOM is what makes webpages interactive, it is an interface that allows you to manipulate the content, style and structure of your webpage using JavaScript.

You will interact with the DOM whenever you want to make anything on your webpage interactive using JavaScript like creating a slideshow or even any type of interactive game on a webpage.


Accessing data from Arrays & Objects

The main difference between arrays and objects is the way in which the data they contain is stored which therefore affects how you access the data from each.

An array is a grouping of like information. Unlike objects it won’t have properties defining different values it is just a set of values that will all relate to the same thing. For example an array containing your shopping list will list off all the items you need in one simple list with no organising of data.

You can access data from an array by calling the array and using the index [1] to access specific parts of an array or you can access data from an army by using a loop function by looping through the array until it finds the data you are looking for.

An object is a grouping of information that will contain multiple properties that contain their own values within it. For example an object about a person could contain properties like their name, age, gender and occupation. The properties would then be able to contain values like Tia, 25, Female and student. These properties and values are defined as “key”: “value”.

You can access data from an object by calling on the key which will return to you the value. For example using the data above calling (person.gender) would return “Female” or calling (person.age) would return 25.


What are Functions?

A function is basically a group of reusable code that you can use anywhere in your code by calling on the function. A function groups together a sequence of statements that perform a specific task which you give a name. The name you give a function is what you use to call on a function whenever you want to use that specific set of code.

Functions are really useful because being able to call on a function means that you don’t have to rewrite the same code over and over again.