JavaScript - Kitasio/MyWebDev GitHub Wiki

Big java documentation

JS almost always would be at the bottom of the body in the html file, but we don't want actually write it there, we only put a link to a JS file, like main.js, here's how it looks:

<html>
    <head>
        <title>my nigga</title>
    </head>
    <body>
        <header>
            <h1>hello world</h1>
        </header>
        <script src="main.js"></script>
    </body>
</html>

Variables

let and const

You can change let, const you cannot change, always use const unless you know you gonna make changes to the variable

const houses = 12;
// ----
let score;
score = 5;
console.log(score); // will show it in the browser console

Data types

String, Number, Boolean, null, undefined

const name = 'john';
const age = 30;
const rating = 4.5;
const isCool = true;
const x = null;
const y = undefined;
let z; // also indefined

console.log(typeof name);

const hello = `My name is ${name} and I am ${age}` //Concatenation

Methods

const s = 'Hello World';

console.log(s.length); // will show you the length of the string
console.log(s.substring(0,5).toUpperCase()); // note that you can chain them to each other like this

Arrays

Variables that hold multiple values

const fruits = ['apples', 'oranges', 'pears'];
fruits[3] = 'grapes'; // will add to the fourth position
fruits.push('mangos'); // will add to the end
fruits.unshift('strawberries'); // will add to the beginning
console.log(fruits);

Objects

const person = {
    firstName: 'Jon',
    lastName: 'Snow',
    age: 30,
    hobbies: ['music', 'movies', 'magic'],
    address: {
        street: '50 main st'
        city: 'Boston'
    }
}

console.log(person.firstName, person.hobbies[1]);

JSON

Data format used to exchange data between client and server

const todos = [
    {
        id: 1,
        text: 'take out trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting',
        isCompleted: true
    },
    {
        id: 3,
        text: 'Dentist',
        isCompleted: true
    },
];

const todoJSON = JSON.stringify(todos);
console.log(todoJSON);

// To loop through this array:

for(let t of todos) {
    console.log(t);
}

Loops

for and while

// For
for(let i = 0; i < 10; i++) {
    console.log(`For loop number: ${i}`);
}

// While
let i = 0;
while(i < 0){
    console.log(`While loop number: ${i}`);
    i++;
}

Complex loops

forEach, map, filter

// Filter
const todoCompleted = todos.filter(function(todo){
    return todo.isCompleted === true;
});

console.log(todoCompleted); // will filter only true values of the array

Conditions

const x = 20;

if(x === 10) {
    console.log('x is 10');
} else {
    console.log('x is NOT 10');
}

const x = 11;
const color = x > 10 ? 'red' : 'blue';
// Condition --> if it's true --> if it's not true
console.log(color);

switch

const color = 'green';

switch(color) {
    case 'red':
        console.log('color is red');
        break;
    case 'blue':
        console.log('color is blue');
        break;
    default:
        console.log('fuck off');
        break;
}

Functions

function addNums(num1 = 1, num2 = 1){
    return num1 + num2;
}

console.log(addNums(5,5));

// Arrow functions
const addNums = (num1, num2) => num1 + num2;
console.log(addNums(5,5));

OOP

// Constructor function
function Person(firstname, lastname, dob){
    this.firstname = firstname;
    this.lastname = lastname;
    this.dob = new Date(dob);
}

// Instantiate object
const person1 = new Person(jon , sonw, 07-05-1955);
const person2 = new Person(yigrette, jamalungma, 05-10-1975);

console.log(person2.lastname);

Class

Same as function but prettier

// Class
class Person{
    constructor(firstname, lastname, dob){
        this.firstname = firstname;
        this.lastname = lastname;
        this.dob = new Date(dob);
    }


    getBirthYear() {
        return this.dob.getFullYear();
    }

    getFullName() {
        return `${this.firstname} ${this.lastname}`;

    }
}

// Instantiate object
const person1 = new Person(jon , sonw, 07-05-1955);
const person2 = new Person(yigrette, jamalungma, 05-10-1975);

console.log(person2.getFullName());
console.log(person1);

querySelector

Use it to change code of your HTML from JavaScript

const ul = document.querySelector('.items');

ul.firstElementChild.textContent = 'Hi Mark';
ul.lastElementChild.innerHTML = '<h1>Hello world</h1>'