Sprint 3 Technical
Christopher Alba's Blog
The HTML file contains all the content of the webpage. This includes all the text, images, navbars and other things. The CSS file contains all the rules that you use to change the appearance of your content. Let's use an analogy. If you think of all the ocean as your webpage, all the things inside the ocean such as fishes, corals, caves, water, ocean floor are like all the content of your website. All the content is stored in your HTML file. For the fishes, their DNA contains the set of rules to how they appear. For your website, the CSS file contains all the rules to how your content appears.
Control flow is the order that code is executed. It is determined by the positioning of the code in the document. You can think of it as how you follow a daily routine, starting from waking up in the morning then going to sleep at night. The structure of the daily plan you follow corresponds to the positioning of the code in the document.
Loops are when you repeat code over and over again until a specified condition is met. For example, while a condition is true execute the code. The code stops executing when the condition is no longer true. Usually, there is a counter associated with loops, which increments by a specified amount. We can compare how loops function to an example in daily life. Imagine a party, where there are 6 empty glasses on the table. The host wants to fill all the glasses with wine. The action of pouring must be repeated until all the glasses are full. This means pouring must be repeated 6 times and then stop pouring after the 6th time. The code being executed repeatedly would be 'pour' and 'counter + 1.' The condition that must be true in order to keep looping would be 'while counter is less than 6' assuming the counter started at 0.
The DOM is the representation of your webpage as objects, where each element in your website is represented as an object. What this allows is the manipulation of your website's content and style using object's methods. An object is an abstract data type with properties and methods. A property is a characteristic stored in your object. An example of this in your web page is how the header object will have a property of colour and text. A method is a set of instructions that will be executed on the object it is called on. An example of this would be the method to change the text of the header to something new, where the header is the object that the method is called on. You can interact with the DOM using the developer tools in the Google Chrome inspector, where you will input code into the browser's console. Another way to interact with the DOM would be in a separate Javascript file that contains the same code used on the developer tools.
To access data in an array, you must access a specific column in the array. You can visualize an array as a one row table with many columns. Each column stores one piece of data that can be accessed.
To access data in an object, you must access a specific key value pair. The key is the name given to a property, and the value is the data stored in the property. A property is a key value pair and a characteristic of your object For example, the background of your website is a characteristic of the body object in the DOM.
A function contains code that can be called on repeatedly and executed. Using functions allows for less code repetition and makes one's code more elegant. A function can have parameters, which are the declared variables that are given a value at run time from outside the function that it uses in the code it contains. The actual values being passed into the parameters are called arguments. A function can return a value or return nothing and just execute some code.