Glossary

Document object represents the structure of the HTML file. Using it, we can find a specific document element and change it with our code.

If you are curious of how it works - you can read it later here: What is the DOM? - on CSS Tricks

querySelector is one of the document object method that allows us to interact with document elements:

document.querySelector( condition ) - selects the first element for which the condition is true.

This method selectors work the exact same way as CSS selectors, for example:

// select the level 3 header:
document.querySelector( 'h3' )
// select the element with the "my-class" class
document.querySelector( '.my-class' )
// select the element with the "#article-1" id:
document.querySelector( '#article-1' ) 

You can find a selector for any element on the page when going to dev tools and clicking the mouse right button on it (option: Copy > Copy selector).

classList.add is one of the method that every DOM tree element has. We use it like this:

element.classList.add( 'class-name' ) - adds given class to the selected element.

document.querySelector( '#button' ).classList.add( 'big' );
// adds "big" class to the element with the "button" id

classList.remove is one of the method that every DOM tree element has. We use it like this:

element.classList.remove( 'class-name' ) - removes given class from the selected element.

document.querySelector( '#button' ).classList.remove( 'big' );
// removes "big" class from the element with the "button" id

addEventListener is a method of a tree DOM element, that allows to bind an event on this element with an action that should take place when the event happens.

We use it like this:

addEventListener( 'event', action ) - executes given action, when the event happens on the element. Example:

document.querySelector( '#button' ).addEventListener( 'click', myFunction );
// invoke myFunction when the button with the "button" id is clicked

Variable is a kind of a storage, where we can save and store information, so we can read them later and from other places in our code. In JavaScript a variable can store basically anything - text, number, document element, a complex object and even a function.

In order to create a variable in JavaScript we use the keyword let:

// text variable
let courseTitle = 'JavaScript gallery';

Such created variable we can then use in the code by just giving its name, for example:

// number variable - text length
let titleLength = courseTitle.length;

Numbers

Math calculations (+, -, % and /) write in this order result = computation, for example:

let newNumber = oldNumber + 4;

To compare which of the given numbers is bigger or smaller, we use > and <, >= and <=.

if ( a > 1 ) {
	// execute the code, if a is bigger than 1.
}

To compare two numbers with each other we use a triple equal sign ===.

if ( a === 1 ) {
	// execute the code, if a is equal to 1.
}

Text

In JavaScript text we wrap in quotation marks or apostrophes, eg:

let name = "Anna";

Text fragments we can join together with a + sign, for example:

let greeting = 'Hi ' + 'Anna' + '!';

We can join a number or a variable with a text the exact same way:

let greeting = 'Hi ' + name + '!';

Boolean

Boolean value is only one of these two values: true or false.

let isJavaScriptAwesome = true;

We can compare boolean values using a triple equal sign, for example:

if ( isJavaScriptAwesome === true ) {
	let doWeHaveEnoughYet = false;
}

Function is a group of instructions that are executed in a given order to achieve a final goal.

In JavaScript there is few ways to create a function and the simplest one is:

function functionName( ) {
   /* function body */
}

Such function we can then execute in a different place in our code by giving its name with parentheses, for example:

functionName( );

An event can be anything, that happens on the website: events created by the user (clicking, dragging mouse cursor over an element, clicking a button, maximizing the window, scrolling, etc) and events that happen automatically like webpage being loaded.

All events can be handled in the code meaning we can bind an action to them. For that we use an addEventListener method.

Conditional statements are parts of code that are executed only when a given statement is true.

The simplest example would look like this:

if ( statement ) {
	// execute this code.
}

If we want to execute a different part of the code for a situation when the statement is not met we can add to the logical statement the else part:

if ( condition ) {
	// execute this code when the statement is true.
} else {
	// execute this code when the statement is false
}

Function parameters are parts of data given to a function when invoking it. Thanks to parameters, the same function instructions can be executed on different data. We pass the parameters in the parentheses.

Example - a function that takes a name as a parameter and writes to the console a greeting for a person with this name:

function hi( name ) {
	console.log( 'Hi ' + name + '! Nice to meet you!' );
}

Now, we can invoke this function several times with different parameters, for example:

hi( 'Magda' );
// writes: 'Hi Magda! Nice to meet you!'
hi( 'Ania' );
// writes: 'Hi Ania! Nice to meet you!'
					

Interval repeats given instructions in cycles in a given time span.

You can create it with a function:

setInterval( action, time ) - executes the action every given time (given in miliseconds).

setInterval( myFunction, 2000 );
// invoke the myFunction every 2 seconds.

To clear Interval we need to do two things:

1. Bind the created interval to a variable,
2. use this variable in a
   clearInterval( variable ) function - stops the given interval.

let savedInterval = setInterval( myFunction, 2000 );
// invoke the myFunction every 2 seconds.
clearInterval( savedInterval );
// stop invoking this interval