Technical Blog Part 4. JavaScript Basics
- How does JavaScript compare to HTML and CSS?
- Explain control flow and loops using an example process from everyday life, for example 'waking up' or 'brushing your teeth'.
- Explain the difference between accessing data from arrays and object literals.
- Explain what functions are and why they are useful.
HTML, CSS and JavaScript work together on a background of a webpage, so browser know how to load the data. While HTML is a structure, CSS is a style, Javascript adds interactive elements to a webpage, and also makes a webpage to react on user's actions. So basically JS is able to change web page content or style in response to events coming from user's side.
Javascript supports control flow statements, e.g. if, for, while. Example from real life: IF today is Saturday, THEN get up at 9am, otherwise get up at 7am. In this example "if today is Saturday" is a control flow statement.
Loops allows you to execute the same blosk of code a number of times. Example from real life: WHILE baking bread, set the temperature at 200 °C. It means that every time you are making bread, you know the temperature, and your cookbook doesn't need to repeat it every time for different bread recipes.
It is easier to explain the difference on the following examples:
Accessing data from arrays:
Array: var countries = ["Canada", "Japan", "Italy", "Vanuatu"];
To access data we use bracket [ ] notation and refer to index: countries [0] // returns "Canada".
Object literals:
Object: var giraffe = {name: "Melman", age: 10, height: 6, color: "yellow"};
To access data we can use literal notation: giraffe.name // returns "Melman".
Function is a set of rule where we tell computer what to do. A function takes an input (an argument), does something with it and gives you back a result (an output). And later you can use this result in your code. You need to use functions to stick with one of the main programming rules: "Don't Repeat Yourself".