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.