Skip to content

JavaScript

Jump to bottom
Kitasio edited this page Oct 12, 2019 · 4 revisions

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>'
Clone this wiki locally