JavaScript Basics

Summary

Below you will find a collection of tutorials teaching the basics of JavaScript.

Before You Start

These tutorials assume you have a basic understanding of HTML and CSS.

Exercises

You can download exercises to go along with these tutorials on our JavaScript exercises GitHub repo. Just click the green Code button in the corner and click the Download ZIP option.

Tutorials

Introduction

Why should I use JavaScript?

Learn how to use JavaScript.

Linking a JavaScript file to an HTML file

<script src="main.js" defer></script>

Inline scripts

<script>
  console.log("Test message");
</script>

Basic Syntax

Comments

// Single line comment

/*
  Multi-line
  comment
*/

Logging to the console

console.log("This sentence will appear in the browser console");

Constants

const myConstant = 10;

Variables

let myVariable = "This is a variable";

Data Types

Strings

const singleQuoteString = 'This is a string wrapped in single quotes';
const doubleQuoteString = "This is a string wrapped in double quotes";

Numbers

const positiveNumber = 1234;
const negativeNumber = -1234;
const floatingPointNumber = 1.234;

Booleans

const trueBoolean = true;
const falseBoolean = false;

Arrays

const myArray = [12, true, "A string"];

Objects

const myObject = {
  name: "Simple Dev",
  description: "A site designed to teach coding",
  age: 1,
  active: true
};

Intermediate Syntax

Conditional statements

if (condition) {

} else {

}

switch statement

const myString = 'First';

switch (myString) {
  case 'First':
    // Insert code here
    break;
  case 'Second':
    // Insert code here
    break;
  default:
    // Insert code here
}

for loops*

for (let i = 0; i < 5; i++) {
  // Insert code here
}

while loops

let i = 0;

while (i < 5) {
  // Insert code here
  i++;
}

do…while loops

let i = 0;

do {
  // Insert code here
  i++;
} while (i < 5);

Functions*

function myFunction() {
  // Insert code here
}

// Call function
myFunction();

DOM

Select element

const myParagraph = document.querySelector('p');

Modify element text

element.textContent = 'value';

Modify styles

element.style.property = 'value';

Create element

Learn how to create an element.

Remove element

Learn how to remove an element.

Events

element.addEventListener('click', () => {
  
});

Other

JSON

Learn how to write JSON.

* work in progress

** coming soon!