Javascript beginning

source: https://www.youtube.com/watch?v=hdI2bqOjy3c

Node.js를 사용하기 전 JS 에 대해 알아야하기 때문에
JS 기본 문법 공부 !

let const

const age;
age = 12;
age = 11
console.log(age);

String, Numbers, Boolean, null, undefined, Symbol

const name   = 'John';
const age    = 30;
const rating  = 4.5;
const isCool = true;
const x      = null;
const y      = undefined;
let z;

console.log(typeof z);

Concatenation

const name = 'noah';
const age = 30;
console.log('my name' + name + 'and i am' +  age);

Template String
const hello = (`My name is ${name} and I am ${age}`);
console.log(hello);

console.log(`My name is ${name} and I am ${age}`);

const s = 'technology, computers, it, code';

console.log(s.split('t'))

Arrays - variables that hold multiple values

const numbers = new Array(1,2,3,4,5,6);
const fruits = ['apples', 'oranges','pears', 10 , true];

fruits[3] = 'grapes'

fruits.push('mangos')

fruits.unshift('straw')

fruits.pop();
console.log(fruits);
console.log(Array.isArray('hello'));

console.log(fruits.indexOf('oranges'));

const person = {
    firstName: 'noah',
    lastName : 'Shin',
    age : 29,
    hobbies : ['music','movies','sports'],
    address: {
        street: '50 main st',
        city : 'Boston',
        state : 'CA'
    }
}
console.log(person.firstName,person.hobbies[1], person.address.state);

const {firstName, lastName, address: {city}} = person;

console.log(firstName);
console.log(lastName);
console.log(city);

person.email = 'noah@mail.com'

console.log(person.email)

const todos = [
    {
        id: 1,
        text : 'Take out trash',
        isCompleted : true
    },
    {
        id: 2,
        text : 'Metting',
        isCompleted : true
    },
    {
        id: 3,
        text : 'Dentist appt',
        isCompleted : false
    },
];
json converter
console.log(todos[1].text);

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

For
for(let i = 0; i < todos.length; i++) {
    console.log(`For Loop number : ${i}`);
}
for(let i = 0; i < todos.length; i++) {
    console.log(todos[i].text);
}

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

forEach, map, filter

todos.forEach(function(todo){
    console.log(todo.text);
});

const todoText = todos.map(function(todo){
    return todo.text;
});

console.log(todoText);

const todoCompleted = todos.filter(function(todo)
{
    return todo.isCompleted === true;
}).map(function(toda)
{
    return toda.text;
})
console.log(todoCompleted);

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

const x = 7;
const y = 11;

if(x===10){
    console.log('x is 10'); 
} else if (x > 10){
    console.log('x is greater 10'); 
} 
else {
    console.log('x is less than 10');
}

if (x > 5 && y > 10 ){
    console.log('x is more than 5 and y is more than 10');
}
if (x > 5 || y > 10 ){
    console.log('x is more than 5 or y is more than 10');
}

const x = 1;
const color = x > 10 ? 'red' : 'blue';

// console.log(color);

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

function addNums(num1 =1 , num2 = 1){
    console.log(num1 + num2);
}
addNums(5, 5);

function addNums(num1 =1 , num2 = 1){
    return num1 + num2;
}
console.log(addNums(5, 5));

const addNums = (num1 = 1, num2 = 1 ) => num1 + num2;
console.log(addNums(5,5));

const addNums = num1 => num1 + 7;
console.log(addNums(5));

object oriented programming

Constructor function
function Person(firstName, lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
    // this.getFullName = function() {
    //     return `${this.firstName} ${this.lastName}`;
    // }
}

Person.prototype.getBirthYear = function(){
    return this.dob.getFullYear();
}

Person.prototype.getFullName = function(){
    return `${this.firstName} ${this.lastName}`;
}
클래스 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('Noah','Shin', '12-09-1993');
const person2 = new Person('Kinm','asds', '12-09-1923');

console.log(person1);
console.log(person2.dob.getFullYear());

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

=======================================================
=======================================================
=======================================================
=======================================================
=======================================================
=======================================================
================여기서부터는 이해를 위한 실습============================

  
  
Single element
console.log(document.getElementById('my-form'));
console.log(document.querySelector('h1'));

Multiple element
console.log(document.querySelectorAll('.item'));
console.log(document.getElementsByClassName('item'));
console.log(document.getElementsByTagName('li'));

const items =document.querySelectorAll('.item');
items.forEach((item) => console.log(item));

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

// ul.remove();
// ul.lastElementChild.remove();
ul.firstElementChild.textContent = 'hello';
ul.children[1].innerText = 'Brad';
ul.lastElementChild.innerHTML = '<h1>HELLO</h1>';

const btn = document.querySelector('.btn');
btn.style.background = 'red';

btn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log(e.target.className);
});

btn.addEventListener('mouseout', (e) => {
    e.preventDefault();
    document.querySelector('#my-form')
    .style.background = '#ccc';
    document.querySelector('body').classList.add('bg-dark');
    document.querySelector('.items').lastElementChild.innerHTML = '<h1>Hello</h1>'
});