WHAT IS JAVASCRIPT

JavaScript is a language that lets you dynamically update the content of your page, control media and basically do most actions on the page that HTML and CSS can’t . You can compare it to the process of making a dress, for example you can dye your fabric in any colour you like, you lay your pattern and cut your pieces, then you use your sewing machine that can do various functions just as javascript does.

[ARRAYS] AND {OBJECTS}

It’s always good to keep your process well planned and working space organised and you should do the same with your code. If the order comes in a first place that you should store your data in array:

var makeDress = [‘choosePattern’, prepareFabric’, ‘cutPatternPieces’, ‘cutFabric’, ‘assembleDressPieces’]

When you retrieve information from an array you get it by index of each element. Arrays always start counting from zero, so the first element (‘chosePattern') in our array is 0 and the last one (‘assembleDressPieces’) is 4. If you wanted to find out what is the third action you need to do you would use:

makeDress[2]

There’s another way to organise your code, especially if data label is more important for you than the order. Let’s organise our storage using objects:

thingsNeeded = {
 fabric: '2m',
 threads: ['brown', 'white'],
 scissors: 'one',
 buttons: 10 }

console.log(thingsNeeded)
{fabric: "2m", threads: Array(2), scissors: "one", buttons: 10}

Our object represents key/value pairs. If you want to access amount of buttons you have you’d try:

thingsNeeded.butttons Or
thingsNeeded[‘buttons’]

We can also store arrays inside of objects and objects inside of arrays. To get the information we can use both key and index:

console.log(thingsNeeded['threads'][1]) //white

CONTROL FLOW

So to start making a dress we need some kind of plan so we know where to start and what our next actions would be. In JavaScript we have control flow, it’s an order on which all the statements are being executed. Normally all the code is being run from left to right, top to bottom unless it meets some statements such as loops, conditionals or functions.

FUNCTIONS

Functions is a set of statements that performs a task that often takes the input and returns the output. Let’s make a function of assembling our dress pieces together. We can have out bodice, skirt and sleeves as parameters :

//DECLARING FUNCTION FOR SEWING A DRESS//
function sewDress(bodiceFront,bodiceBack, skirt, sleeve1, sleeve2){
 let dress = bodiceFront + bodiceBack + skirt + sleeve1 + sleeve2;
 return dress; }
//CALLING OUR FUNCTION//
sewDress('front','back','skirt','sleeve1','sleeve2')

The cool thing about functions is that we can use the same one but by changing parameters we can get different results, for example if we want a shorter sleeve instead of long one or no sleeve at all.

CONDITIONALS

If/else statement lets us check if the condition has been met or not. For example, If we were assembling the pieces of our dress and had to check if we still have enough thread we could write such statement:

let lengthOfThread = 500;
if (lengthOfThread >= 5){
 console.log('Keep sewing')
} else if (lengthOfThread > 0){
 console.log("You're close to running out of thread, please replace it.")
}else{
 console.log("Sorry, you're out of thread")
}

LOOPS

Loops are iteration statements that keep running until the loop is over or the condition becomes false. Let’s make a loop that helps us attach buttons to our dress.

let amountOfButtonholes = 10
for (let button = 0; button <= amountOfButtonHoles; button++){
 console.log('Attaching ' + button + ' button')
}

DOM

So all these things can’t be made without something connecting them together. In programming this function is taken over by DOM(Document Object Model). Specifically the HTML API connects your javascript to your HTML and CSS. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. It can be modified with a scripting language like JavaScript. For example, to select all the paragrafs in your document you’d use querySelectorAll method and the code would look like this :

let paragraf = document.querySelectorAll(‘p’)