태그 다루기

중간제목에서 말하는 태그를 다룬다는 것은 태그의 내부 속성을 수정한다는 것이다.

강의에서 나왔던 대로 h1태그를 사용하여 적어보면

1

h1.className = "";

가장먼저 클래스를 바꿀수 있는 속성인 .className이다.

“” 내부에 입력한 클래스로 바뀌게 되는데 문제는 원래 있던 클래스가 사라지고 입력한 클래스만 새로 추가되는 것이다.

1

h1.classList.(Element)

그래서 .classList를 불러와 클래스를 추가하는 방법이 있는데

추가는 h1.classList.add로 클래스를 추가 할 수 있으며,

삭제는 h1.classList.remove로 삭제가 가능하다.

여기에 if문을 추가해준다면 특정 이벤트(클릭 등)에 따라 클래스의 추가와 삭제가 반복되게 만들수도 있다.

그런데 이렇게 반복을 하게 할때는 add와 remove를 쓰면 코드가 길어지게 되는데 이럴때를 위해 있는게 toggle 속성이다.

1
2
3
4
5

if (h1.classList.contains("clicked")) { // .contains()는 괄호 내부의 클래스가 존재하는지 확인
	h1.classList.remove("clicked");
} else {
	h1.classList.add("clicked");
}

add 와 remove 를 쓰면 다섯줄이였던 코드가

1

h1.classList.toggle("clicked");

toggle을 사용하면 이정도로 줄어들게 된다.

설명에 생략이 매우 많지만 사용법은 대략 이렇다.

이외에도 태그별로 많은 속성이 있으며, MDN Web Docs 에서 찾아볼 수 있다.

.preventDefault

.preventDefault는 이벤트가 발생했을때 그 이벤트의 기본동작을 막는다.

예를들어 ‘submit’ 이벤트가 발생했을때 브라우저는 기본적으로 페이지를 새로고침한다.

이런것들이 기본동작인데 이를 막아주는것이 .preventDefault 이다.

사용 예는 다음과 같다.

1
2
3
4

function func(event) {
	event.preventDefault();
	console.log(event);
}

이렇게 이벤트의 동작을 막고 콘솔에서 이벤트의 로그를 볼 수 있다.

새로고침을 막는등의 기능 이외에도 클릭시 링크로의 이동을 막거나, form의 제출을 막는등 여러가지를 할 수 있다.

백틱(``)으로 문자열 작성

문자열과 변수를 합쳐서 출력하려면 언어를 처음 배우기 시작한 사람들은 보통 다음과 같이 출력할 것이다

1
2

const a = "world";
console.log("hello " + a;);

그런데 파이썬의 포맷함수처럼 사용할수 있는 기능이 JS에도 있다.

사용법은 다음과 같다.

1
2

const a = "world";
console.log(`hello ${a}`);

띄어쓰기를 따로 생각하지 않아도 되고 + 부호가 지저분해보였기 때문에 이 방법이 필자에게는 더욱 깔끔해 보였다.

document

자바스크립트는 기본적으로 HTML의 모든 항목을 읽고 변경이 가능하다.

HTML 파일의 모든것이 document 객체로 담겨있는데 자바스크립트는 document 객체를 object 타입으로 가져와 내부의 값을 변경 할 수 있다.

사용 예시는 다음과 같다.

1

document.title = "hello";

이렇게 한다면 HTML의 title태그에 내용이 있더라도 페이지의 제목이 hello로 바뀌게 된다.

document 내부에는 title, head, body 등 여러가지 태그가 object 타입으로 담겨있다.

getElementById

getElementById는 HTML의 특정 개체를 가져오는 기능이다.

사용예시를 먼저 보자.

1

<h1 id="title">hello</h1>

이런 HTML태그가 있다고 할 때

1

document.getElementById("title");

이라면 HTML에서 태그의 id값(태그값 자체가 아니다! <title>태그와 혼동하지 말자)이 title인 태그를 가져온다.

1
2

const h1Tag = document.getElementById("title");
h1Tag.innerText = "hi";

이처럼 변수에 저장해 객체처럼 사용 할 수도 있다.

console.dir

console.log가 console에 로그를 찍어주는 역할이라면 console.dir은 이를 통해 가져온 태그 내부의 모든 정보를 object 타입으로 가져온다.

1

console.dir(document);

이렇게 하면 document의 모든 정보가 object 타입으로 콘솔에 출력된다.

출력된 정보를 보고 수정, 추가, 삭제, 이벤트 등 여러방면으로 활용이 가능하다.

querySelector

querySelector 역시 태그를 가져올수 있는태그이다.

먼저 사용 예제를 보자

1
2
3

<div class="hello">
        <h1>hello!</h1>
</div>

1
2
3

const h1 = document.querySelector(".hello h1");

console.log(h1)

각각의 HTML, JS코드가 있고 JS의 querySelector 를 통해 div태그 내부의 h1태그를 가져온 후 콘솔에 출력한 코드이다.

만약 위 코드에 상응하는 값이 여러개라면 어떻게 되는지 한번 보자.

1
2
3
4
5
6
7
8
9

<div class="hello">
        <h1>hello 1!</h1>
</div>
<div class="hello">
        <h1>hello 2!</h1>
</div>
<div class="hello">
        <h1>hello 3!</h1>
</div>

1
2
3

const h1 = document.querySelector(".hello h1");

console.log(h1)

결과는 한개만 나오며 제일 앞의 것이 출력되는것으로 나왔다.

모두 출력하고 싶을경우 querySelectorAll을 사용하면 된다.

querySelectorAll을 사용하면 결과는 리스트로 반환된다.

코드에서 살짝 알수 있었듯이 querySelector는 CSS선택자를 지원한다. (예시에서의 .hello)

그래서 title을 쓸때 #title을 쓸때 .title을 쓸때 모두 다르며 각각 태그, ID, 클래스를 의미한다.

addEventListener

addEventListener는 이벤트를 감지하는 역할을 한다.

여기서 이벤트란 마우스를 움직이거나 키를 입력하거나 브라우저 창 크기를 조정하거나 텍스트를 복사하거나 와이파이연결을 해제하는등 PC의 대부분의 IO에 관한 모든것을 말한다.

다음은 사용예시이다.

1
2

// 객체가 h1태그, 이름은 name, 함수이름은 func 라 가정
name.addEventListener("click", func);

위 코드가 뜻하는 바는 ‘name의 h1 태그를 클릭할 경우 func 함수를 실행한다.’ 이다.

코드에서 주의할 점이 있는데 func()가 아닌 그냥 func인 것이다.

func()를 하게되면 클릭이라는 조건이 갖춰지지 않아도 페이지 로딩중에 함수가 실행된다.

그렇기 때문에 함수는 괄호를 제외한 함수 이름만 입력해 주어야 한다.

여기서 click같은 조건을 더 많이 알고싶다면 구글링으로 (태그명) HTML event MDN 등을 검색하거나, console.dir(객체)를 통해 콘솔에서 더 찾아볼 수 있다. 객체의 내부 구성요소중 앞에 on이 붙은것들이 모두 이벤트라보면 된다.

이벤트 종류는 매우 많으니 다 외울수도 없을뿐더러 외울 필요도 없다.

파생형으로 name.onclick = func;이렇게 사용할 수도 있다.

그러나 addEventListener를 통해 이벤트를 감지한다면 이후 removeEventListener를 통해 event listener를 제거할 수도 있다.

필자는 addEventListener를 주로 사용할듯.

prompt()

자바스크립트는 브라우저를 통해 사용자와 상호작용한다. 마우스의 위치가 어디인지, 어떤값을 받아오는지, 스크롤이 어디쯤인지에 따라 각각의 이벤트를 지정할 수 있다.
그런데 당연하게도 그런 값을 받아오는건 브라우저나 자바스크립트가 별도의 코딩없이 척척해주지는 않는다. (적어도 내가 아는선에서는)
그런 자바스크립트에는 값을 받아오는 명령어가 있는데 그것이 바로 prompt()이다.

1

ex) prompt("What your name?")

prompt()는 alert() 처럼 팝업창이 뜨는데 alert와 다르게 값을 입력받을수 있다.

일단 입력은 모두 String타입으로 받아진다.
하지만 커스텀이 자유롭지못해서 요즘엔 잘 쓰이지 않고 있다고 한다.

typeof

파이썬에서의 type() 과 같은 역할을 한다.
typeof a또는 typeof(a)처럼 객체나 변수의 타입을 출력해준다.

parseInt()

변수 a 가 있고, a가 숫자로만 이루어진 문자열(string)일 경우 parseInt(a) 는 내용은 같으나 타입은 number인 a를 반환해준다.
그러나 a 가 만약 문자로 이루어져있다면 대신 NaN(Not a Number)이 반환 된다.

조건문 (if만)

1
2
3
4
5
6
7

if (a<0) {
    console.log("a는 음수입니다.");
} else if (a=0) {
    console.log("a는 0입니다.");
} else {
    console.log("a는 양수입니다.);
}

기본적으로 자바와 크게 다르지 않아 패스….

비교연산자

다른부분만 빠르게 체크하겠다.
자바스크립트에는 같다 라는 뜻의 ==와 같지 않다 라는 뜻의 !=가 있다.
하지만 ===와 !== 도 존재하는데 이는 ‘엄격하게 같다’와 ‘엄격하게 같지 않다’이다.
‘엄격하게’가 뜻하는 바는 비교하는 변수의 타입까지 고려한다는 뜻이다.

굳이 예를 들자면 다음과 같다

1
2
3
4
5
6
7
8

const a = "10";
const b = 10;

a == b  # true
a === b # false

a != b  # false
a !== b # true

이처럼 ===와 !==는 변수의 타입까지 고려하며 비교를 하는 비교연산자이다.

전에 만들어 놓았던 카카오톡 클론코딩을 배포 하던 중 HTML과 CSS만으로는 부족해보이므로 Javascript로 기능을 추가해 보라는 강사님의 피드백에 따라 JS로 기능을 추가하기 위해 JS가 주인 클론코딩 강의를 듣고 카카오톡 클론코딩에 잘 버무려 보기로 했다.

그런데 HTML의 스크립트태그는 몇번 접해본적 있었지만 JS는 초면인지라 다른 언어들의 기초보다 문법이 복잡한지, 어떤 부분이 다른지 전혀 모르고 있었기에 기록 겸 가끔 보려는 용도로 포스팅 한다.

하루 배우고 하루 기록하는 토막글 형식이기에 한두번 만에 끝날것 같지는 않으니, 귀찮아 하지말고 매일 기록할것.

변수 선언 방식

자바에 여러개의 변수 타입이 있듯이 자바스크립트에도 변수 타입이 존재한다. 그러나 다른점이라면 자바는 변수의 크기, 타입에 따라 분류한다면 자바스크립트는 이후에 값을 수정 가능한지 아닌지로 분류한다.
일단 기본적인 변수 선언 방식은 다음과 같다.

1
2
3

const a = 1;
let b = 2;
var c = 3;

기본적으로 변수 선언 방식 이후 변수에 값을 넣고 닫아주는 형태이다.

갑자기 잡설을 풀어보자면
파이썬, 자바등을 공부할때 해당하는 언어를 설치해주어야 했는데 자바스크립트는 그렇지 않다.
다른 언어의 경우에는 버전이 올라감에 따라 이전버전의 문법을 사용하지 못하는 경우가 있다.
그러나 자바스크립트는 이전버전의 문법(const,let이 있음에도 var가 사용 가능한경우)이 여전히 혼용 가능하다.(그러나 쓰지않는걸 추천하는것 같다.)

각설하고, 총 세 개의 방식이 있는데 각각의 특징은 이렇다.

const

ES6 이후에 추가되었고 가장 기본적으로 사용되는 변수형이다, 상수(변수인데 상수;;)이며 그렇기 때문에 선언 이후에 변경이 불가하다.(할당된개체가 Array와 Objects등의 개체라면 내부의 값을 변경할 수는 있다. ) 선언할때 반드시 값을 할당해주어야 한다.

let

ES6 이후에 추가되었고 현재 사용되고 있는 가변 변수형이다, 선언 이후에도 변경이 가능하다. 선언할때 값을 할당하지 않을수 있지만 그럴경우 값은 undefined가 된다.

var

자바스크립트 초기에 사용되었던 변수형이며, 선언 이후에도 변경이 가능하다. 역시나 선언할때 값을 할당하지 않을수 있고, 이 경우 값은 undefined가 된다.

왜 let은 쓰는데 var는 쓰지 않는지, 왜 기본적으로 let이 아닌 const를 쓰는지 의문이 생길수 있다.
전자의 의문의 답은 세가지이다.

첫째는 변수명이 같아도 선언이 가능하다는것. (재선언 가능)
누군가는 장점이 아니냐 할 수 있겠지만 변수의 양이 매우 많거나, 다른사람과 협업을 한다면 이는 단점이 된다.

둘째는 호이스팅(Hoisting).
이는 변수의 정의가 선언과 할당으로 분리되는것을 말한다, 이게 무슨뜻인지는 다음 코드를 보자

1
2

console.log(name);
var name = "WJ";

이렇게 코드가 있을때 자바스크립트는 다음과 같이 해석한다.

1
2
3

var name;
console.log(name);
name = "WJ";

결국 출력은 초기화가 되지않았다는 메시지가 나오는 대신 정의되지 않았다는 뜻인 undefined 가 나오게 된다.
이는 직관적이지 못하기때문에 var보다 let을 쓰는것이 권장된다.

셋째는 const,let은 ‘블럭’수준 var는 ‘함수’수준으로 적용되기 때문이다.
이게 무슨말인지 처음엔 이해가 잘 되지 않을수 있다. (나는 그랬음..)
그러니 바로 예시를 보면

1
2
3
4
5
6
7
8
9

var a = 5;              # 전역변수 a 선언후 5 할당
console.log(a);         # 5 출력

function setA() {          
    var a = 10;         # '함수 내부'에서 지역변수 a 선언후 10 할당
    console.log(a);     # 10 출력
}

console.log(a);         # 5 출력

전혀 이상할것 없이 당연한 예시이다. 그럼 다음예시도 한번 보자

1
2
3
4
5
6
7
8
9

var a = 5;              # 전역변수 a 선언후 5 할당
console.log(a);         # 5 출력

if (true) {          
    var a = 10;         # 'if블럭 내부'에서 지역변수 a 선언후 10 할당
    console.log(a);     # 10 출력
}

console.log(a);         # 10 출력 <--  ???

if블럭 내부에서 지역변수를 할당 했음에도 전역변수로 선언했던 a의 값이 바뀌어 10이 되었다.

이는 위에서 말했듯 var의 범위는 ‘함수’수준으로 적용되기 때문이다.
즉, 블럭{}으로 감싸더라도 함수로 감싸진것이 아니기때문에 if블럭 내에서 재할당된 값이 출력된 것이다.

쓰면 안되는 이유 1,3번의 콜라보..

결국 요약하자면 var는 함수내부에서 쓰는것이 아니라면 전역변수와 같다는 것이다.

안쓰는데는 이유가있다

Array (배열, 리스트)

파이썬으로 처음 접했던 리스트 역시 자바스크립트에도 있다.
다음은 array를 선언하는 기본적인 방법이다.

1

const a = [1, 2, null, true, "hello"];

인덱싱은 a[2]; 처럼 가능하고, 값을 추가하고 싶을 경우 a.push(추가할 값) 해주면 해당 값이 가장 마지막의 인덱스에 추가된다.

Objects (파이썬 딕셔너리)

제목에도 적었듯이 키와 값으로 이루어진 것이 파이썬의 딕셔너리와 닮았다. 세세한기능까지 같은지는 모른다
오브젝트를 선언하는 기본적인 방법을 보면

1
2
3
4
5
6

const a = {
    name : "WJ",
    contry : "KR",
    lang : "Javascript",
    num : 123
}   

처럼 선언하는데 중괄호 내부의 프로퍼티 중 왼쪽을 이름, 오른쪽을 값이라 한다.

값 출력시엔 다음처럼 하면 된다.

1
2

a.name;
a["name"];

예시에서 배열과 오브젝트 둘다 const로 선언했지만 내부의 값은 바꿀 수 있다.

function (함수)

1
2
3

function a() {
    console.log("Hello!");
}

문법만 조금 다를 뿐 전체적으로 파이썬의 사용자 지정 함수나 자바의 메소드와 비슷하다.

함수호출은 a() 로 할수 있으며 결과는 Hello! 가 출력되게 된다.

Reference.

ES6의 변수 선언, const와 let - nana_log