My Web Development Blog Posts

Javascript Basics

Posted: 10/06/18

How does JavaScript compare to HTML and CSS?

HTML and CSS are coding languages that describe the basic structure and the presentation or a website. They are a set of instructions created by the programmer that will be executed by the web browsing application and displayed as they are described on the screen of the user's computer. JavaScript by comparison allows for the construction of websites that are much more dynamic. The JavaScript code is executed on the user's computer and can change the look of the website based on inputs from the user.

In JavaScript what is control flow and what are loops?

Control flow refers to the order in which a computer will carry out JavaScript statements. An analogy that may help to understand this would be the instructions that come with kit set furniture. The normal "control flow" of these instructions is to follow their numbered order from top to bottom until the end of the instructions is reached and your furniture is assembled. Occasionally however you may come accross sections of the instructions that relate to a slightly different model of furniture than what you have in front of you, this would be an "if" statement in JavaScript. If you had that particular type of TV cabinet in front of you, you would carry out that step otherwise you would ignore this step of the instructions and move on to the next. This is a modification to the top to bottom "control flow" of JavaScript known as a conditional statement.

Another kind of change to your furniture instructions you may come across are repeated steps. For example, the instructions may specify to carry out the same set of steps for all 4 legs of a TV cabinet. Once you have completed this you can then move on further down in the instructions. In JavaScript this sort of behaviour is known as a "loop", this allows you to repeated the same block of code a particular number of times, or while a certain condition remains true.

It's also possible that you might see a combination of these two types of instruction. It might be specified that you have to follow the same steps for a particular number of hinges on the door of your cabinet but perhaps there is a slight variation to these steps if it is a top hinge or a bottom hinge. This should show that while the "control flow" for JavaScript does run from top to bottom like these furniture instructions, the order can change quite a bit through the use of conditional statements and loops.

How does accessing data differ for arrays and objects?

An array is a JavaScript variable that contains multiple pieces of data in one place. These pieces of data are essentially stored in a numbered list that starts at number 0 and carries on for as long as your list of data is. To access data stored within an array you just need to specify the array you want to look at and the number in the list of the item you want to retrieve, known as its index.

Objects are also a JavaScript variable that allows you to store multiple pieces of data but the way the data is stored, and the way it is retrieved is slightly different. Instead of storing data in a numbered list, an object stores data in "properties" of the object. For example if the object was a car its properties might be the colour, engine capacity, number of doors etc... To access data stored within an object you specify the object and the property that you want to retrieve the data for.

What are functions and why are they useful?

In computer programming a "function" is a set of tasks that are to be carried out together. Grouping a set of coding instructions together under a named function is an incredibly useful thing to do when coding. It allows you to later "call" upon this function by simply using its name and have all of those same tasks be carried out again. This allows you to reuse sections of your code which can both save a lot of time as well as greatly increase the clarity of your code.