1. 변수
자바스크립트 변수를 선언할 때에는 기본적으로 두 가지 형태로 사용할 수 있다. 첫 번째는 변하지 않는 변수인 constant -> const이고 (이 변수로 선언할 경우, 변수의 값을 바꾸려고 해도 에러가 뜬다) 두 번째는 변하는 변수인 let이다. 예를 들면 다음과 같다.
const age = parseInt(prompt("How old are you?"));
let age1 = parseInt(prompt("How old are you?"));
age = age + 2; //에러가 뜬다
age1 = age1 + 2; //정상작동
console.log(age);
console.log(age1);아마 위의 코드 전체를 돌리면 4번째 줄에서 에러가 뜰 것이다. const 변수는 값을 변동시킬 수 없기 때문이다.
이런 형태로 나눌 수 있는 변수 외에도 기본적으로 정수형, 문자열 등 다른 언어와 동일하게 자료형들이 있다.
2. 객체
자바스크립트의 객체는 파이썬의 딕셔너리와 비슷한 형태로 구성되는 것처럼 느껴졌다. 일단 겉보기에는 그렇다. 객체를 설명할 때는 주로 게임 속 캐릭터와 비유를 하는데, 하나의 캐릭터가 존재할 때 캐릭의 능력치, 체력 이런 부분들이 있는 것처럼 하나의 객체를 만들면 해당 객체의 속성들을 지정할 수 있도록 하는 것을 의미한다. 객체를 만들어 표현하면 다음 코드처럼 작성할 수 있다.
const player1 ={
name : "Anna",
power : 50,
hp : 100,
};
const player2 = {"name": "Elsa", "power":300, "hp":100};
console.log(player1.name);
console.log(player2.name);
player1.name = "Olaf";
console.log(player1.name);파이썬의 딕셔너리 자료형처럼 앞의 부분은 키(key)로, 뒤의 부분은 값(value)로 이해하면 된다. 위의 코드를 실행하는 데에 있어서 의문이 생길 수 있다. const를 이용하면 변수 값이 바뀌지 않는다고 했는데, 여기서는 player1의 name부분을 바꾸는 코드를 작성했다. const가 변수를 고정되도록 하는 것은 맞지만, 객체 변수의 경우에는 해당 객체의 속성을 바꿀 수 있다.
자바스크립트 기초 문법에 당연히 반복문이나 조건문 같은 것들이 있지만, 이는 다른 언어의 반복문, 조건문을 알면 쉽게 이해할 수 있으니 넘어가도록 한다.
자바스크립트의 좋은 점은 html 파일과 연결되어 쉽게 html 내의 내용들을 읽어올 수 있다는 것이다.
1. Document 객체
자바스크립트에서의 document 객체는 html 파일을 의미한다. 예를 들어 index.html 파일 안에 다음과 같은 코드가 적혀 있다고 해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
<div class="hello">
<h1 id="title">This is title.</h1>
</div>
</body>
</html>이 때 연결된 app.js 파일은 다음과 같은 내용이 있다.
console.log(document.title);
document.title = "Frozen2";이러한 js 파일을 저장하면 콘솔창에는 Momentum이, 그리고 html 라이브 서버 페이지의 제목에는 Frozen2가 적혀 있을 것이다. 이렇게 document 객체를 이용하면 html 파일 내에 있는 다양한 요소들을 불러올 수 있다.
만약 id가 title인 저 h1 태그("This is title.")를 가져오고 싶으면 어떻게 해야 할까?
js 파일에 다음과 같이 적어주면 된다.
const title = document.getElementById("title");
console.log(title);마찬가지로 Id를 이용해서만 불러올 수 있는게 아니라 class나 tag 등을 이용해서 여러 요소들을 array 형태로 불러올 수도 있다.
또한, querySelector를 이용하면 css 선택자를 이용해서 요소를 불러올 수도 있다.
const title1 = document.querySeletor(".hello h1");
const title2 = document.getElementsByClassName("hello");
console.log(title1);
console.log(title2);위의 결과는 title1 과 title2가 똑같다. 하지만 class2는 클래스의 이름에 따라 불러올 것을 정한다는 기준을 알고 있기 때문에 클래스명만 적은 것과 달리 querySelector은 무엇을 기준으로 불러올 지 모르기 때문에 css에서 .className{} 과 같은 형태로 진행했던 것과 동일하게 .hello h1 이라고 명확히 얘기 해준다. querySeletor의 특징은 hello 클래스 안에 h1 태그가 여러 개 있어도 가장 첫 번째 것만 return 해 준다는 것이다. 만약 조건에 해당하는 모든 요소를 불러오고 싶다면 document.querySeletorAll()을 이용하면 된다.
※복습해보는 css 선택자
tag : tagName
class : .className
id : #idName
하위 선택자 : .className h1 과 같은 형태 (해당하는 h1 전체를 불러옴)
부모 선택자 : .className>h1 (부모의 바로 아래 자식만 선택)
'TIL > JavaScript' 카테고리의 다른 글
| 2021.7.13 TIL : [JavaScript] 자바스크립트 기초-4 (1) | 2021.07.13 |
|---|---|
| 2021.7.5 TIL : [JavaScript] 자바스크립트 기초-3 (0) | 2021.07.05 |
| 2021.7.4 TIL : [JavaScript] 자바스크립트 기초-2 (0) | 2021.07.04 |
댓글