JavaScript and The DOM
In this sprint we learnt about JavaScript, The DOM (Document Object Model) and how its related to HTML and CSS documents.
The Differences Between HTML and CSS
HTML lets you create the structure of a website. CSS lets you make the website look nice. JavaScript lets you change HTML and CSS. Because it lets you change HTML and CSS, it can do tons of things.
Control Flow and Loops
In computer science, control flow (or flow of control) is the order in which individual statements, instructions or function calls of an imperative program are executed or evaluated.
One of the most powerful features of JavaScript (and every other programming or scripting language for that matter) is the ability to build intelligence and logic into your web pages. It is vital in constructing scripts to be able to have the script make decisions and repeat tasks until specified criteria are met. For example, if you are developing an e-commerce application you may want to repeatedly ask a user to enter a credit card number until a valid credit card number is entered. Alternatively, you may want your script to loop a specific number of times through a task before moving on to the next part of the script. All of this logic and flow control is achieved using some very simple structures. Which are if statements and loop statements.
For example we have accepted a logical code for dressing as human beings. We start by wearing underwears then pants, shirt and etc. This is a logical and socially accepted way of dressing up and we keep repeating it daily like a loop until we die!
What Is The DOM?
The Document Object Model is a platform and a language-neutral interface. When your browser loads a page it also creates a local Document Object Model on your computer which can be used to get hold of HTML and CSS elements of the page and Ultimately manipulate them. DOM defines the logical structure of documents and the way a document is accessed and manipulated.
The easiest way to interact with DOM is to right click on any element that you wanna check on the browser and select inspect. This will open the DOM and you can access it's tools to manipulate or debug the web page. A level of understanding of how the DOM works is required to be able to use it's tools
The Difference Between Accessing Data From Arrays and Objects
Properties in Objects can be accessed, added, changed, and removed by using either dot or bracket notation. , we’d write:
// Example 'person' object
var person = { name: 'Zac', age: 33, likesCoding: true };
// Dot notation person.age // returns 33
// Bracket notation person['age'] // returns 33
Arrays use zero-based indexing, so the first item in an array has an index of 0, the second item an index of 1, and so on. For instance, let’s say we wanted to access the third item (‘Mexico City’) in the following array:
var vacationSpots = ['Tokyo', 'Bali', 'Mexico City', 'Vancouver'];
To do so, we’d write:
vacationSpots[2]; // returns 'Mexico City'
Items can be added and removed from the beginning or end of an array using the push(), pop(), unshift(), and shift() methods:
// push() - Adds item(s) to the end of an array vacationSpots.push('Miami');
// pop() - Removes the last item from an array vacationSpots.pop();
// unshift() - Adds item(s) to the beginning of an array vacationSpots.unshift('Cape Town', 'Moscow');
// shift() - Removes the first item from an array vacationSpots.shift();
What Are Functions And Why They Are Useful
A function is almost like a mini-program that we can write separately from the main program, without having to think about the rest of the program while we write it. This allows us to reduce a complicated program into smaller, more manageable chunks, which reduces the overall complexity of our program.
Some of the benefits of using functions are:
Reusability -- Once a function is written, it can be called multiple times from within the program. This avoids duplicated code (“Don’t Repeat Yourself”) and minimizes the probability of copy/paste errors. Functions can also be shared with other programs, reducing the amount of code that has to be written from scratch (and retested) each time.
Testing -- Because functions reduce code redundancy, there’s less code to test in the first place. Also because functions are self-contained, once we’ve tested a function to ensure it works, we don’t need to test it again unless we change it. This reduces the amount of code we have to test at one time, making it much easier to find bugs (or avoid them in the first place).
Extensibility -- When we need to extend our program to handle a case it didn’t handle before, functions allow us to make the change in one place and have that change take effect every time the function is called.