조건문(conditional)은 true인지 false인지 알려주기 때문에 아주 중요하다 무언가를 확인해야할 때 거의 대부분 사용한다. - 사용자가 로그인되어 있으면 무언가를 보여준다던가 - 사용자가 무언가를 할 때 반응하는 것을 보여준다던가
prompt() : 사용자에게 창을 띄울 수 있게 해준다.
- 조건문을 사용한 함수라고 보면 된다.
사용은 잘 안한다고 한다
* prompt 함수가 실행되면 자바스크립트 전체가 일시적으로 정지된다고 한다.
Document에 대해
- console.dir(document) 로 document에 대한 Object 정보를 볼 수 있다. * document는 우리가 JavaScript에서 HTML에 접근할 수 있는 방법 이렇게 document에 대한 정보도 볼 수 있고 document.title 을 입력하여 html의 title 태그를 확인할 수도 있다.
이건 정말 놀라운 일이다. 왜냐 HTML에 있는 title을 자바스크릅트로 가져다 쓸 수 있는것이게 됨.
그런데 다시 생각해보면 object에서 properties를 가지고 올 수 있다. 그리고 요렇게 JS에서 HTML을 읽어올 뿐만 아니라 HTML을 변경할 수도 있다
그리고 Elements를 확인해보면 <title>안의 데이터가 hello로 변경될 것을 볼 수 있다. 이건 자바스크립트를 통해 변경되었다. 물론 새로고침을 하면 원상복귀된다. (일시적이라는 말씀)
그렇지만 여기서 알 수 있는 부분은 이 모든 설정들이 다 준비되어 있다는 것! HTML과 JavaScript를 연결하기 위해 아무것도 하지 않아도 된다. (이미 연결되어있다는 뜻)
또한 - document.body로 <body> ... </body> 안에 있는 정보들을 확인 할 수 있다. * Js로 HTML 항목을 불러올 수 있다. - document.location으로 파일 위치 등의 정보도 확인 가능하다. (해당 object는 어디에 위치하고 있는지 알려준다. ) 얼마나 신기한가 !
요약 - HTML에서 여러 정보를 가져올 수 있다는 것과 - JavaScript에서 그 항목들을 볼 수 있다는 것 - JavaScript는 HTML에 접근하고 읽을 수 있다. - 모든 것들은 document로 시작한다(시작점) - document는 web site를 의미한다.
<!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>
<!-- Vanila Study BEGIN -->
<h1 autofocus class="hello" id="title">Grab me!</h1>
<!-- vinila Study END -->
<script src="app.js"></script>
</body>
</html>
해당 코드를 분석해보자
HTML에서의 id는 엄청나게 중요하다 앞으로도 많이 쓸 예정
h1 태그안의 id
우리는 JavaScript를 통해 작업을 해보자.
* document.getElementById(); // string을 전달받는 함수 * console.dir(""); // element를 좀 더 자세히 보여주는 함수 dir
생성한 app.js에서 하고있는건 HTML을 가져오는 거지만, 그걸 JavaScript에서 하고 있는 것이다. 그리고 Js는 HTML element를 가지고 오지만 HTML 자체를 보여주진 않는다. - Javascript에서 이 HTML을 표현하는 object
우리는 HTML 파일 안에서가 아닌 JavaScript를 통해 태그안의 내용을 바꿔보는 작업을 할 것이다.
js 적용 전
코드
const title = document.getElementById("title");
title.innerText = "Got you!";
console.log(title.id);
console.log(title.className);
js 적용 후
Javascript로 인해 HTML이 변경됨. * 이것이 가능한 이유 여기에 id를 추가했기 때문 * getElementById란 함수로 element를 가져왔기 떄문 * document는 HTML을 뜻한다. * JavaScript 관점에서의 HTML을 말한다.
위의 코드로 알 수 있듯 JavaScript에서 title이란 항목을 가져오고 있다. 또 이 h1의 className을 확인 가능하다. (id도..)
원리, 흐름을 잘 이해해야 한다.
이제 HTML에서 항목들을 가져와 JavaScript를 통해 항목들을 변경할 것이다.
- 이 부분에서 기억할것은 getElementById를 통해 id로 element를 가져올 수 있다는 점이다. ( html에서 항목을 가져올 수 있는 다른 방법도 있긴하다 )
1. document에서 항목들을 가져오는 것 2. 해당 document 항목들을 변경하는 것
우선적으로는 JavaScript에서 HTML을 가져올 수 있는 다른 방법들을 알아보자
HTML 항목 중 하나의 태그 안의 정의된 id와 JavaScript가 가져올 getElementById의 string 값이 같아야 데이터를 가져오거나 Text를 변경할 수 있다.
* 실행결과를 console에서 보면 h1의 hello element를 array로 가져오게 된다.
- 코드 구조를 보면 이렇게 element를 가져올 것인데 보통은 이렇게 하지 않는다. 다르게 바꿔보자
<div class="hello">
<h1>Grab me!</h1>
</div>
- 하고자하는건 div 태그 안의 h1을 가져오는 것이다.
const title = document.getElementsByTagName("h1");
console.log(title);
- 가져오긴 하지만 원하는 형태의 추출법이 아니다. - 노마드의 element를 가지고 오는 좋은 방법은 querySelector와 querySelectorAll이라고 한다.
querySelector : element를 CSS 방식으로 검색할 수 있다. - hello란 class 내부에 있는 h1을 가지고 올 수 있다는 것을 의미한다. - CSS selector를 사용해서 class hello를 찾고 그 안에 있는 h1을 가져올 것이다.
const title = document.querySelector(".hello h1");
console.log(title);
- JS에서는 getElementsByClassName이 자동적으로 class 이름은 OO이다를 인식해준다. - 하지만 querySelector에는 hello가 class name이라는 것과 그 안의 h1을 명시해줘야 한다. - 이것은 단 하나의 element를 return(반환)해준다.
또한
const title = document.querySelector(".hello"); const title = document.getElementById("hello"); - 두개의 기능은 같다.
const title = document.querySelector(".hello");
console.log(title);
title.innerText = "hello"
댓글