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!