자바 스크립트 태그
<script></script>
<script> 태그는 </body> 바로 위에
이유는 웹브라우저 엔진이 위에서부터 차근차근 분석하게 되는데 script 태그를 먼저 분석하게 되면 script의 양이 많을 경우 분석이 늦어지며 html이 사용자 입장에서 체감상 느리게 느껴진다. 그러므로 html 먼저 분석 후 script를 분석할 수 있게 </body> 태그 바로 위에 적어주는 것을 추천한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script></script>
</body>
</html>
만약 외부 자바스크립트를 가져올 경우 </body> 태그 위에 자신이 짜고 있던 script태그 위에 붙여주면 된다. 이것도 헤드가 아니라 바디에 써주는 이유는 위에 설명한 것과 같은 이유이다.
<input type="text" id="text1" value="helloworld">
<script>
var x = document.getElementById("text1");
console.log(x.value);
</script>값을 가져오는 연습을 하기 위해 텍스트 박스를 하나 만들어 그 값을 가져와 콘솔 로그에 띄우도록 코딩을 하였다.
위에서는 getElementById로 했지만 getElementsByClass 등 여러 가지로 값을 가져올 수 있다.
<label><input type="checkbox" name="chk" value="seoul"/>서울</label>
<label><input type="checkbox" name="chk" value="busan"/>부산</label>
<label><input type="checkbox" name="chk" value="jeju"/>제주</label>
<button type="button" onclick="getChk()">제출</button>
<script>
function getChk(){
var chk= document.getElementsByName("chk");
for(var i=0;i<chk.length;i++){
if(chk[i].checked){
console.log(chk[i].value);
}
}
}
</script>
그리고 위처럼 하게 되면 체크박스에 체크된 요소의 값만 가져올 수 있다. 하지만 저렇게 하게 되면 스크립트 안의 코드
가 너무 길어지게 된다. 이를 해결하기 위해선 querySelectorAll() 함수를 이용하면 된다.
<script>
function getChk(){
var checked = document.querySelectorAll("[name=chk]:checked")
//name으로 가져올 땐 [name=이름]으로 입력하면 된다.
//".클래스명"로도 쓸 수 있다.
console.log(checked)
}
</script>
이 밖에도 querySelector() 함수도 있는데 이 함수는 하나의 값을 배열 형태로 가져오게 된다.
querySelectorAll(), querySelector()은 getElements 함수들을 대체할 수 있다.
<input type="text" id="chk" value="서울">
<script>
var x1 = document.getElementById("chk");
var x2 = document.querySelector("#chk");//id값을 가져오기 위해서는 앞에 #을 붙여야 한다.
console.log(x1.value);
console.log(x2.value);// 이렇게 하게 되면 x1 과 x2 모두 서울로 동일한 값이 나오게 된다.
</script>
'공부방 > JS' 카테고리의 다른 글
| 바닐라 자바스크립트 - Node.js로 input 값 불러오기 (0) | 2021.04.16 |
|---|---|
| 바닐라 자바스크립트 - 기본 문법 탐색 (2) (0) | 2021.04.13 |
| 바닐라 자바스크립트 - 체크박스로 display 제어 (0) | 2021.04.13 |
댓글