자바스크립트

값 출력

document.write('<p class="colBlue">안녕</p>');

변수 선언하기 (초기화)

var eleName = '변수 이름';
var eleNumber = '1';

document.write('<p class="colBlue">' + eleName + ' / 번호:' + eleNumber + '</p>');

데이터의 형태

숫자 number 문자 string 논리 boolean

var val1 = 24;
var val2 = '안녕';
var val3 = true;

document.write('<p class="mt10 colBlue">숫자 : ' + typeof(val1) + '<br />문자 : ' + typeof(val2) + '<br />논리 : ' + typeof(val3) + '</p>');

배열 Array

var stit = ['제목1','제목2','제목3']

var stit = ['제목1','제목2','제목3'];

document.write('<p class="colBlue">2번째 값 : ' + stit[1] + '</p>');

변수 & 상수

변수 : 변경 가능
상수 : 변경 불가능 (재선언X)

[변수] var : 어디서나 사용 가능 / 재선언 가능
[변수] let : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가
[상수] const : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가

const zzzz = '상수 const입니다.';

document.write('<p class="colBlue">' + zzzz + '</p>');

선택자

getElementById()
getElementsByClassName()
getElementByTagName()
querySelector()
querySelectorAll()

이벤트

onclick : 마우스 왼쪽 클릭
ondbclick : 마우스 왼쪽 더블 클릭
onmousedown : 마우스 왼쪽 또는 오른쪽 클릭
onmouseup : 마우스 왼쪽 또는 오른쪽 놓았을때 발생
onmouseover : mouseenter
onmouseout : mouseleave
onchange : 요소 변경될 때
onselect : 값 선택되었을 때
onfocus : 포커스가 갔을 때
onblur : 포커스를 잃었을 때

[이벤트] click

색 변경

var btn_color = document.getElementById("btn1");

btn_color.addEventListener('click', () => { asd(); });

function asd(){
    btn_color.style.background='red';
    btn_color.style.color='white';
}

[이벤트] onclick

버튼 클릭해줄래?
선택자 querySelector로 적용
선택자 querySelectorAll로 적용
위 버튼 초기화

var ele_btn = document.getElementsByClassName("btn_cn")[0];
var ele_btn_qs = document.querySelector(".btn_qs");
var ele_btn_qsa = document.querySelector(".btn_qsa");
var ele_btn_reset = document.getElementById("btn_reset");

ele_btn.addEventListener('click', () => {
    ele_btn.innerText = ":::클릭했지롱~:::";
});

ele_btn_qs.addEventListener('click', () => {
    ele_btn_qs.innerText = ":::클릭했지롱~:::";
});

ele_btn_qsa.addEventListener('click', () => {
    ele_btn_qsa.innerText = ":::클릭했지롱~:::";
});

ele_btn_reset.addEventListener('click', () => {
    ele_btn.innerText = "버튼 클릭해줄래?";
    ele_btn_qs.innerText = "선택자 querySelector로 적용";
    ele_btn_qsa.innerText = "선택자 querySelectorAll로 적용";
});

[이벤트] toggle

완료

var btn_tog = document.getElementById("btn2");

btn_tog.addEventListener('click', () => { text_tog(); });

function text_tog(){
    btn_tog.classList.toggle("on");

    if(btn_tog.classList.contains("on")){
        btn_tog.innerText = "처리중";
    }else{
        btn_tog.innerText = "완료";
    }
}