team Project)

• 12월 중순-말일 팀선정
  => (최대 9명, 최소 3팀)
• 일주일 1-2회 등원(팀원 미팅), 외 온라인 진행 예정.

---

JS HTML DOM

event

• addEventListner : event 등록 method

1. event 이름에 'on'이 없음.

2. 하나의 element에 동일한 event를 여러개 등록 가능함.
   => ex) click event를 여러개 등록 가능함.

3. 하나의 element에 다른 event를 여러개 등록 가능함.

4. removeEventListner("click", myFunction);을 통해 등록된 event 삭제 가능함.

<script>
document.getElementById("myBtn").addEventListener("click", displayDate, false);
document.getElementById("myBtn").addEventListener("click", displayHello, false);

function displayDate() {
	document.getElementById("demo").innerHTML = Date();
}

function displayHello() {
document.getElementById("demo1").innerHTML = "hello, 2nd click!";
}
</script>

node

• html document에 <p>궁시렁궁시렁</p>이 있을 때, 웹브라우저 dev- tool(F12)에서 DOM view를 확인해보면 <p>태그 안에 textnode가 있고 그 안에 궁시렁궁시렁이 있음.

• <p>태그를 생성해 내용을 새로 입력해야할 때,
  => .createTextNode로 텍스트 node를 생성해 내용을 담음.

<script>
const para = document.createElement("p"); 
  // p태그 생성
const node = document.createTextNode("This is new paragraph.");   
  // text node 생성

para.appendChild(node); 
  // para에 node를 자식으로 붙임.(p태그 안에 text를 자식으로 붙임.)

const element = document.getElementById("div1");    
  // element를 #div1로 가져옴.

element.appendChild(para);  
  // element에 para를 자식으로 붙임.(#div1 안에 p태그를 자식으로 붙임.)

function myFunction() {
	para.remove();
}
</script>

navigation Nodes

navigation Nodes는 노드의 관계로 위치를 찾는 것.
<p>궁시렁꿍시렁</p>을 예로 들자면,

• <p>의 .firstChild
  : .firstChild는 text Node를 의미함.

• <p>의 .childNodes[i]
  : <p>의 i번째 Node인 text Node임.
  -> nodes는 array(배열) 형식으로 작성됨.

• .nodeValue
  : 해당 Node의 value인 궁시렁꿍시렁을 보여줌.

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
// id01의 firstChild는 text이고 firstChild.nodeValue는 "My First Page"를 말함.
document.getElementById("id02").innerHTML =
	document.getElementById("id01").firstChild.nodeValue;
	document.getElementById("id01").childNodes[0].nodeValue;
</script>

<script>
document.getElementById("demo").innerHTML = 
  	document.body.innerHTML;
  	// document의 body 내용을 innerHTML함.
  	// -> body의 내용이 #demo 위치에 dispaly됨.
</script>

---

JS BOM window

window

• window.innerWidth
  : 현재 윈도우의 폭 길이 px를 display함.
• window.innerHeight
  : 현재 윈도우의 세로 길이 px를 display함.

<script>
document.getElementById("demo").innerHTML =
	"Browser inner window width : " + window.innerWidth + "px<br>" +
    "Browser inner window height : " + window.innerHeight + "px"; 
  
function myFunction() {
	window.open("https://www.google.com/");
}
</script>

• window.open(URL)
  : 입력된 URL을 다른 탭에서 새로 접속함.
• window.close()
  : 지정한 윈도우를 close함.

<script>
let myWindow;

function openWin() {
	myWindow = window.open("https://www.google.com/","","width=300,height=300");
	// 윈도우를 300*300px 사이즈로 open함.
} 
function closeWin() {
	myWindow.close();
}
</script>

screen

<script>
document.getElementById("demo").innerHTML = 
	"Screen width is " + screen.width;
</script>

location

• loaction.herf
  : 현재 window의 URL에 입력된 문자열.

<script>
document.getElementById("demo").innerHTML =
	"The full URL of this page is : <br>" + window.location.href;
</script>

<script>
function newGoogle() {
	window.location.assign("http://www.google.com/")
	window.location = ("http://www.google.com/")
}
</script>

history

<input type="button" value="<< Back" onclick="goBack()">
<input type="button" value="Forward >>" onclick="goForward()">

<script>
function goBack() {
	window.history.back()
}

function goForward() {
	window.history.forward()
}
</script>

timing

<!-- 3초 뒤에 onclick myFunction() 효과. -->
    <button onclick="myVar = setTimeout(myFunction, 3000);">Try it</button>

    <button onclick="clearTimeout(myVar)">Stop it</button>

    <script>
        function myFunction() {
            alert('Hello');
        }
    </script>

---

jQuery

1. $(document) => object data type return하고 method인 ready()를 실행함.
   .ready(callback Function) : onload event를 의미함, event 발생시 parameter로 넘긴 callback함수 실행함.

2. $("p") => $("css selector사용"), css selector에 해당하는 JS Object를 리턴함.
   .click(callback Function) : click event 발생할 때, callback Function 실행.
   => p.addEventListener(click, function(){}); 비슷함.
   => $("p")에 해당하는 모든 object들에 대하여 click event를 등록시켜 줌.

3. $(this) => this는 event가 발생한 p object를 의미함.
   .hide() => display:none;을 의미함.

<script>
$(document).ready(
	function() {
    	$("p").click(
        	function() {
            	$(this).hide();
			}
	    );
	}
);
</script>