[1] 스크립트 코드의 지역화
: 중복되는 명명들을 하나로 줄이고, 함수가 바로 대입되어 실행할 수 있게 한다
: 함수 내에서 이벤트 함수들이 준비되도록 한다
<script>
window.onload = function(){ // init()으로 별도 이름 붙일 필요가 없으므로 onload와 메소드 연결
var btnPrint = document.getElementById("btn-print");
// 함수 내에서 이벤트 함수들이 준비됨
btnPrint.onclick = function(){ // 익명함수화. 함수가 바로 대입되도록 한다
//var btnPrint = document.getElementById("btn-print"); 중복되므로 제거
var x = prompt ("x값을 입력하시오",0);
var y = prompt ("y값을 입력하시오",0);
x=parseInt(x);
y=parseInt(y);
btnPrint.value=x+y;
};
}
</script>
[2] 코드분리와 이벤트 바인딩 방법 2가지
: html 과 스크립스 작성하는 사람이 나눠진 경우, 한 문서를 두 사람이 작성하면 어려움이 있으므로 스크립트 코드분리진행
2-1) view와 Controller를 물리적으로 나누기
: 스크립트는 파일 확장자 .js로 만들어서 분리. 원래 인덱스에 <script src="index.js"></script>로 연결.
: 스크립트는 여러개 연결 가능하며 순서대로 실행된다.
2-2) 여러 스크립트파일을 함께 사용할 때 초기화 함수 문제 (중첩으로 덮어씌워짐)
: 각 js파일에서 onload(초기화)함수를 정의했을 시, 나중에 시작한게 앞의 함수를 덮어씌워서 작동을 못하게 한다
: 이벤트가 누적되도록 해야 함 👉 window.addEventListner()
👉 window.addEventListner("load",function(){ 해당 메소드 포함 } );
[3] 하위 엘리먼트 선택하기
3-1) 태그명으로 선택하기 (getElementById, getElementsByTagName)
: 아이디는 전 문서에서 유니크한 이름이어야하고 반복되면 안되므로 불편함
: 결과적으로 input이 추가될 수 있기 때문에 좋은 방법은 아님
: 인덱스로 가져오므로 각 순서가 맞는지 비교하게되는 불편함이 있음
<section id="section2"> // 아이디 부여
<h1>Ex2: 엘리먼트 선택방법 개선하기</h1> // html
<div>
<input id="txt-x" type="text" value="0" dir="rtl"/>
+
<input id="txt-y" type="text" value="0" dir="rtl"/>
<input id="btn-add" type="button" value="="/>
<input id="txt-sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
--------------
// ex2:엘리먼트 선택방법 개선하기js
window.addEventListener("load",function(){
var section2 = document.getElementById("section2");
var inputs = section2.getElementsByTagName("input");
var txtX = inputs[0];
var txtY = inputs[1];
var btnAdd = inputs[2];
var txtSum = inputs[3];
btnAdd.onclick = function(){
var x = parseInt(txtX.value); // 문자열을 받았으므로 숫자로 변환
var y = parseInt(txtY.value);
txtSum.value = x+y; // 문자열로는 자동변환됨
};
});
3-2) class를 사용하기 (getElementsByClass)
: elements는 배열 형태이므로 인덱스 붙여줘야 함
: 의미있는 식별자로 하지 않아도 됨
<section id="section2">
<h1>Ex2: 엘리먼트 선택방법 개선하기</h1> // html
<div>
<input class="txt-x" type="text" value="0" dir="rtl"/> // class명 지정
+
<input class="txt-y" type="text" value="0" dir="rtl"/>
<input class="btn-add" type="button" value="="/>
<input class="txt-sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
---------
// ex2:엘리먼트 선택방법 개선하기 js
window.addEventListener("load",function(){
var section2 = document.getElementById("section2");
var txtX = section2.getElementsByClassName("txt-x")[0]; // elements는 배열값이므로 [0]붙이기
var txtY = section2.getElementsByClassName("txt-y")[0];
var btnAdd = section2.getElementsByClassName("btn-add")[0];
var txtSum = section2.getElementsByClassName("txt-sum")[0];
btnAdd.onclick = function(){
var x = parseInt(txtX.value); // 문자열을 받았으므로 숫자로 변환
var y = parseInt(txtY.value);
txtSum.value = x+y; // 문자열로는 자동변환됨
};
});
[4] Selectors api
✔ querySelector() : 하나만 찾을때
✔ querySelectorAll() : 전체를 찾을때
<section id="section3">
<h1>Ex3: Selectors API Level 1 </h1> // html
<div>
<input class="x" type="text" value="0" dir="rtl"/>
+
<input class="y" type="text" value="0" dir="rtl"/>
<input class="btn-add" type="button" value="="/>
<input class="sum" type="text" value="0" readonly dir="rtl" />
</div>
</section>
<hr />
-----------
// ex3:Selectors API Level 1 js
window.addEventListener("load",function(){
var section3 = document.getElementById("section3");
var txtX = section3.querySelector(".txt-x"); // .은 클래스명
var txtY = section3.querySelector(".txt-y");
var btnAdd = section3.querySelector(".btn-add");
var txtSum = section3.querySelector(".txt-sum");
btnAdd.onclick = function(){
var x = parseInt(txtX.value);
var y = parseInt(txtY.value);
txtSum.value = x+y;
};
});
* css 의 selector를 활용하는 추가적인 방법
<input name="x" type="text" value="0" dir="rtl"/>
window.addEventListener("load",function(){
var section3 = document.getElementById("section3");
var txtX = section3.querySelector("input[name='x']"); // input 안의 name으로 정밀하게 지정 가능
});
[5] Node와 ElementNode 차이
: 문서를 구성하는 노드들의 계보를 표현하는 방법 = 부모/자식
5-1) childNodes, children
<section id="section4">
<h1>Ex4: childNodes를 이용한 노드 선택 </h1>
<div class="box"> // 다음줄까지 들어가는 공백란이 js에 영향을 줄 수 있음
<input />
<input />
</div>
</section>
-------------------
// Ex4: childNodes를 이용한 노드 선택
window.addEventListener("load",function(){
var section4 = document.querySelector("#section4"); // 아이디는 샾으로 표현
var box = section4.querySelector(".box");
var input1 = box.children[0]; //box.childNodes[0];
var input2 = box.children[1];
input1.value="hello";
input2.value="okay";
});childNodes : 태그 뿐만 아니라 주석,텍스트 등도 모두 노드에 포함하므로 공란이 들어간 경우 정확한 값 호출 불가
children: 태그형태의 노드만 자식으로 보고 반영
5-2) Node의 종류와 개체형식
W3C DOM 4.1
www.w3.org
In its original sense, "The DOM" is an API for accessing and manipulating documents (in particular, HTML and XML documents).
돔이란 다큐먼트를 제어하기 위한 API.
[6] 엘리먼트노드의 속성 사용
: HTML 태그의 속성과 객체 속성은 거의 일치
6-1) 이미지 소스를 반영한 사진 변경
<section id="section5"> // html
<h1>Ex5: Element노드의 속성 변경 </h1>
<div>
<input class="src-input" list="img-list" /> // srcinput에 이미지 리스트 연결. 선택하면 입력되게 함
//input에 직접 입력한 값을 가지고 이미지를 바꿀예정 (시점은 버튼이 눌렸을때)
<datalist id="img-list"> // 입력 칸 아래에 리스트가 나옴
<option value="img1.jpg">img1</option>
<option value="img2.jpg">img2</option>
<option value="img3.jpg">img3</option>
</datalist>
<select class="img-select"> // 토글박스에서 이미지를 직접 고르게 함
<option value="img1.jpg">img1</option>
<option value="img2.jpg">img2</option>
<option value="img3.jpg">img3</option>
</select>
<input class="change-button" type="button" value="변경하기" />
</div>
<div>
<img class ="img" src="imgs/img1.jpg"/> // 기본으로 떠있는 이미지
</div>
</section>
<hr />
------------
// Ex5: Element노드의 속성 변경 js
window.addEventListener("load",function(){
var section = document.querySelector("#section5");
var srcInput = section.querySelector(".src-input");
var imgSelect = section.querySelector(".img-select");
var changeButton = section.querySelector(".change-button");
var img = section.querySelector(".img");
changeButton.onclick = function(){ // 클릭시 value값이 src값으로 들어간다
img.src= "imgs/"+srcInput.value; // 빈칸 입력
img.src="imgs/"+imgSelect.value; // 옵션으로 선택
};
});
6-2) css 스타일 속성 변경
<section id="section5">
<h1>Ex5: Element노드의 속성 & css 속성 변경 </h1> //Css추가
<div>
<input class="src-input" list="img-list" />
<datalist id="img-list">
<option value="img1.jpg">img1</option>
<option value="img2.jpg">img2</option>
<option value="img3.jpg">img3</option>
</datalist>
<input type="color" class="color-input"/> // 컬러박스 추가
<input class="change-button" type="button" value="변경하기" />
</div>
<div>
<img class ="img" src="imgs/img1.jpg" style="border: 1px solid red;"/>
</div>
</section>
-------------------
window.addEventListener("load",function(){
var section = document.querySelector("#section5");
var srcInput = section.querySelector(".src-input");
var img = section.querySelector(".img");
var colorInput=section.querySelector(".color-input")
changeButton.onclick = function(){
img.src= "imgs/"+srcInput.value;
img.style["border-color"]=colorInput.value; // 1. js값들은 배열이므로 이렇게 쓰던가
img.style.borderColor= colorInput.value; // 2. 이렇게 쓰던가
};
});