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.

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');

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!

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.