[JavaScript] - JavaScript 기초 복습

 

 

Arrays

let daysArray = ["Mon", "Tue"] 이런식으로 사용

true같은 자료형이 다른 것들도 같은 array 에 넣을 수 있음

daysArray = ["Mon", "Tue", true]; 와 같이 사용 가능.

접근은 daysArray[1] 와 같이 사용

JS에서의 Object는 key:value 형식으로 묶어서 사용한다. python 의 dict와 같은 방식.

const myInfo = {
    name:"myName",
    age:25,
    gender:"male",
    isHandsome:true,
    favMovies:["Django", "Oldboy"],
    favFood:[
        {
            name:"Kimchi",
            fatty:false}, 
        {
            name:"Cheese burger",
            fatty :true
        }
    ]
}

console.log(myInfo.name)

//MyInfo는 const이지만 내부 값은 변경 가능.
myInfo.name = "test" 
console.log(myInfo.name)

console.log(myInfo)

Backtick

// js 에서 `` 는 backtick 이라고 읽는다. 
function sayHello(name, age){
    return `Hello ${name} you are ${age} years old`;
}

const userInfo = sayHello("ddingg", 21);

console.log(userInfo);

function 활용

const calculator = {
    plus: function(a,b){
        return a+b;
    }
}

const plus = caculator.plus(5,5)
console.log(plus)

DOM(Document Object Model)

참고 문서에 잘 설명 되어 있음

문서 객체 모델(The Document Object Model)은 HTML, XML 문서의 프로그래밍 XML 이다. 웹 페이지에 대한 프로그래밍 인터페이스 이다.

위의 참고 문서의 내용을 인용함.

• HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴때 사용하는 설계도)
• DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

Console 활용

console.log()
console.error()
console.dir() <!-- 해당 object의 내부 구조를 볼 수 있음. js로 값을 변경할 때 내부 구조를 봐야할 때 유용 -->

document 객체 활용

document.querySelector('#title') // querySelector는 노드의 첫번째 자식을 반환함 여기서는 document에서 title이라는 id를 가진 object를 검색해라 라는 뜻. .title 이라고 쓰면 class 명으로 찾음.

event 처리

// js에서 event listener에 등록된 함수의 매개변수에는 event라는 매개변수가 자동으로 들어간다.(js 기본 옵션)
function handleResize(event){
    console.log(event);
}

// 만약 handlerResize가 아닌 handlerResize() 로 호출하게 되면 이벤트가 발생하지 않아도 최초 1회는 무조건 실행한다는 뜻.
window.addEventListenter("resize", handlerReesize);

const title = document.querySelector('#title');
const BASE_COLOR = '#34495e';
const OTHER_COLOR = '#7f8c8d';

function titleClick(event){
    const currentColor = title.style.color;
    if(currentColor === BASE_COLOR){
        titile.style.color = OTHER_COLOR;
    }else{
        title.style.color = BASE_COLOR;
    }
}

function init(){
    title.style.colro = BASE_COLOR;
    title.addEventListener("click", titleClick);
}

init();

다른 event listener가 궁금할때는 항상 MDN 을 찾아 볼 것.

classList

const title = document.querySelector('#title');
const CLICKED_CLASS = "clicked"; // css class

function titleClick(event){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(hasClass){
        title.classList.remove(CLICKED_CLASS);
    }else{
        title.classList.add(CLICKED_CLASS);
    }

    //위의 과정과 똑같은 기능을 하는 toggle메서드
    //title.classList.toggle(CLICKED_CASS); 
}

function init(){
    title.addEventListener("click", titleClick);
}

init();