Javascript_with HTML

이제 Javascript를 본격적으로(?) 들어가는 단계이다.
HTML과 연동하여 사용하는 것인데, 물론 이때까지도 연동하여 사용한 것이지만,
실제로 값을 넣고 빼는 등의 활동을 포함할 것이다.

1. HTML의 태그 호출

HTML의 요소를 호출하는 방법에는 무엇을 이용해 부를것인가에 따라 크게 3가지로 나뉜다.

그전에 HTML은 Javascript내에서 document로 통칭된다는 점을 알아두자.

1) document.getElementById('id')

호출하고자하는 구역 즉, 태그의 id속성을 활용하는 방법이다.
id는 문서당 유일값으로 주어지기때문에 하나의 태그에 이벤트를 제공하기 좋은 방법이다.

이 방법은 element를 하나의 값으로 가져오며, id가 속한 태그의 시작과 끝을 그 값으로한다.

<h1 id="world">Hello World!</h1>

와 같은 태그가 html에 존재한다면, 이를 Javascript에서 불러올때 다음과 같은 코드를 사용한다.

document.getElementById("world");

그러면 이 호출의 결과값은 할당할 수 있으며, 그 결과값은 다음과 같다.

let world = document.getElementById("world");
console.log(world);

>> <h1 id="world">Hello World!</h1>

2) document.getElementsByClassName('className')

이 방법은 id대신 class의 값으로 호출하는 방법인데, 그 반환값이 배열이라는 점에서 id와 차이가 있다. 그 힌트는 이름에도 있다.

• document.getElement's'ByClassName('className')

배열을 반환값으로 갖는 다는 것은 불러오는것이 1개라해도, 값을 정상적으로 활용하기위해서는 인덱싱을 통해 불러와야한다는 것이다.

let clsName = document.getElementsByClassName("world")
console.log(typeof clsName); // 배열이니까 object
console.log(clsName[1]);
console.log(clsName.length); //원소의 갯수

3) document.getElementsByTagName('tagName')

이 방법은 태그로 호출하는 방법으로 전체적인 의미는 className과 동일하다

let tags = document.getElementsByTagName("h1");
console.log(typeof tags); // 배열이니까 object
console.log(tags.length); //원소의 갯수
console.log(tags[0]); 

2. 값 호출하기

이렇게 호출된 태그에서 특정 값을 호출하는데는 크게 3가지 방법이 있다.
여기서 호출이라는 단어를 사용한 이유는 값을 가져올수도 있고(reading), 다시 세팅할수도 있기(writing)때문이다.

world가 앞서 id를 통해 호출한 태그일때 다음과 같이 사용할 수 있다.

1) world.innerText

호출된 태그의 텍스트 값만 가져오는 것이다.
world는 <h1 id="world">Hello World!</h1> 라는 값을 가지고있다.
그러므로 world에 innerText를 적용하면 그 값은 Hello World!가 나오게 된다.

만약 world가 <h1 id="world">Hello<span>(안녕)</span> World!</h1> 라는 값을 가졌다해도, 여전히 결과는 Hello World!가 된다.

2) world.innerHTML

호출된 태그의 태그를 포함한 모든 값을 가져오는 것이다.
그러므로 상기와는 다르게 world가 <h1 id="world">Hello<span>(안녕)</span> World!</h1> 라는 값을 가졌다면,결과는 Hello<span>(안녕)</span> World!가 된다.

----------------------- 작성 중 ------------------------------

3. HTML의 태그의 속성 호출

world가 앞서 id를 통해 호출한 태그일때 해당태그의 속성을 다루는 방법이다.

1) world.getAttribute('src')

2) world.setAttribute('id','hello')

3) .value

value는 특별히 input와 같이 value속성을 가진 값에서 사용될 수 있다. 이는 사용자가 입력한 값을 출력하는 것으로 값을 할당하여 계산하거나, 대입하는 등의 용도이다.

*여기서 사용자의 입력값은 모두 string으로 인식된다

*value를 사용하지 않고도 바로 값을 꺼낼 수 있는 방법은 prompt인데, alert처럼 띄워져, 답변을 하면 그 값이 string으로 넘어온다.