2021.11.18 - 국비수업 18일차 / javascript

카테고리 없음

2021.11.18 - 국비수업 18일차 / javascript

기묜몬 2021. 11. 18. 21:44

갑자기 선생님이 개별 프로젝트 과제를 내주신다고 한다.
다음 주에 있을 조 편성에 참고한다고 하는데..
과제야 뭐.. 그렇다쳐도 발표는 조금 싫다.
허엉엉
그리고 갑자기 잘되던 블루투스 키보드가 먹통이라 맥북으로만 수업을 듣고 있는데
팔도 아프고 좀 불편하다.
근데 학원 다니면 어차피 노트북만 들고다녔어야 했으니까..
불편하더라도 적응해야겠다..

아 그리고 오늘 중간평가를 했는데
오픈북이라 너무 쉬웠다ㅋㅋㅋ60점 안되면 과락이라던데
그냥 구글링 잘하면 모두 100점 아닌가요..
오픈북 감사합니다,,, (- -) (_ _ ) ( - -)

[오늘 수업 요약]
- 11/17 과제 리뷰
- 자바스크립트 함수
(setTimeout, setInterval)
- forEach()문
- BOM(browser object model)
- 중간평가 (오픈북)
- 이벤트 수행

<11/17 과제 리뷰>
1) DOM 쓸때 주의사항
DOM을 쓸때에는 해당 태그가 스트립트 상단에 반드시 선언 되어있어야한다.
2) innerHTML = , innerHTML+= 의 차이점
(=) : 기존 table의 구성태그를 아예 삭제하고, 반복문에 의해 추가된 것만 할당.
타이틀이 있다면, 타이틀까지 삭제되고 데이터만 추가된다.
(+=) : 기존에 있는 table하위의 태그들에 추가하여 태그를 처리.

<자바스크립트 함수>
1) setTimeout
어떤 액션을 특정한 시간 후에 최초 1회 실행하고싶을 때 사용한다. (ex_10초 후 경고창 띄우기...)

ex1)

body>

<h2 align="center" onclick="startTest(this)">시험 시작</h2>

function startTest(obj){
//(1)클릭 시=>시험중 이라는 것이 뜸 클릭하는 순간this의 h2 내용이 전달됨.
// h2메모리가 매개변수를 통해서 이쪽으로 전달됨. =>h2의 출력내용 시험중 으로 변경
obj.innerText = " 시험 중 ";
//1,000이 1초, 10,000은 10초
var set01=setTimeout(function(){ //(3)
alert("시험 종료!!");
obj.innerText = " 시험이 종료되었습니다.(다시 할까요?) ";
//선언된 자원을 set01기능메서드에 의해 종료
clearTimeout(set01);
},10000);
}
===>
1) function startTest(obj){}
obj.innerText="시험 중";
을 입력
2) <h2 align="center" onclick="startTest(this)">시험 시작</h2>
선언하고, 클릭 실행하는 순간 this의 h2내용이 시험시작에서 시험중으로 바뀐다.
3)  var set01=setTimeout(function(){
    alert("시험 종료!!");
    obj.innerText = " 시험이 종료되었습니다.(다시 할까요?) ";
    clearTimeout(set01);
    },10000);
  }
10000 => 10초
10초 이후 "시험 종료" 라는 팝업 창이 뜬다.
여기서 끝내도 되지만, 선언된 자원을 set01기능메서드에 의해 종료까지 시켰다.

ex2)
<input type="text" name="id" value=""/>
<input type="button" value="아이디 입력" onclick="regId(this)"/>

function regId(obj){
//1. 입력한 DOM 객체 호출 .
var idObj = document.querySelector("[name=id]");
// 버튼의 레이블은 value이므로 속성을 value로 할당해야한다.
obj.value="아이디 입력 중!!";
var set02=setTimeout(function(){
alert("입력이 종료되었습니다.");
if(idObj.value==""){
alert("아이디가 입력되지 않았습니다. ");
}else{
alert(idObj.value+"입력 및 전송 성공!!");
}
obj.value = "아이디 입력"; // 다시 초기값으로 변경 처리
clearTimeout(set02); //선언된 자원의 해제 처리..

},5000);
}
===>
함수의 경우 화면이 로딩된 상황에서 이벤트로 호출하기때문에 DOM 객체로 인식이 가능해서 상단에 선언해도 무방하다.
input쪽에 name="id" 으로 DOM객체 호출.
function regId(obj) / 입력한 DOM 객체 호출받음 .
if(idObj.value==""){
    alert("아이디가 입력되지 않았습니다. ");
    }else{
    alert(idObj.value+"입력 및 전송 성공!!");
    } //입력값이 없을경우 " 아이디가 입력되지 않았습니다" 라고 띄우고
입력되었을 경우 "입력 및 전송성공" 띄우기~

<forEach문>
forEach문이란?
배열의 반복문, 배열에서만 사용하는 메서드,배열의 처음부터 마지막요소까지 반복하여 실행한다.
querySelectorAll() 선택자를 주로 활용한다.
forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.
forEach()메서드는 파라미터로 콜백 함수를 받는데, 그 콜백 함수의 파라미터는 요소,index, 현재 메서드를 호출한 배열 이다.

ex)

var students=["김태희","홍길동","김길동"];
var points=[90,90,80];
var h3exam = document.querySelectorAll("h3");
students.forEach(function(name,idx){
h3exam[idx].innerText=idx+1+")"+students[idx]+" : "+points[idx];
});
==>
배열 두개 선언, 후 선택자 지정하고, idx값(+)해서 출력하기.
idx+1+")" => 숫자 증감으로 순번나열

<BOM(browser object model)>
: 모든 client의 최상위 객체이니 브라우저를 window창 단위로 처리하는 객체
기본 형식 [ window.open("url","윈도우이름","옵션-크기설정,위치,브라우저메뉴")]
ex)

function openWin(){
var win = window.open("a04_Date.html","","height=300,width=300");}
<body>
<h2 align="center" onclick="openWin()">창문을 열어다오. </h2>
</body>
==> 클릭 실행하면 a04_Date.html 의 창이 새로 뜬다.

<이벤트 처리>
: 웹페이지에서 마우스를 클릭했을때, 키를 입력했을때, 특정요소에 포커스가 이동되었을때
어떤 사건을 발생시키는 것.
이벤트의 종류?
1) 마우스이벤트
2) 키 이벤트
3) 폼 이벤트
4) 로드 및 기타 이벤트
이벤트 연결하는 방법?
: 사용자가 실제 이벤트를 발생시켰을때 그 이벤트에 대응하여 처리하는것을 말한다 ==> 이벤트 핸들러

ex)

function callEvent(){
alert("이벤트 수행");
}
h2 onclick="callEvent()">이벤트 대상은 h2,
클릭(click)은 이벤트명, 클릭을 통해 함수는 핸들러 </h2>

[11/18 과제]

내일 리뷰하면서 수정된 부분은 그날그날 수정해야겠다.
가능하면~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오늘도 화이팅~!</title>
<style>

</style>

</head>


<table width="40%" border>
<tr><th>[20]+[5]</th><td><input type="text" name="sum"/></td><td>
<input type="button" value="입력하세요." onclick="sum(this)"/></td></tr>

</table>

<body>
<script type="text/javascript">
function sum(obj){
var sumObj = document.querySelector("[name=sum]");
obj.value="입력 대기 중.."
var set01=setTimeout(function(){
// alert("입력 시간이 초과되었습니다. ");
if(sumObj.value==="25"){
alert("정답입니다!");
}else{
alert(sumObj.value+"오답입니다.");
}
obj.value = "입력하세요.";
clearTimeout(set01);
},5000);
}
</script>

<h1></h1>
<h1></h1>
<h1></h1>

<script type="text/javascript">

// 5. forEach 를 활용하여 멜론 차트 1~3위 음악을 배열로 선언하고,
var music=["회전목마","쉬어","Wake up"];
var top3=document.querySelectorAll("h1");
music.forEach(function(name,idx){
top3[idx].innerText=idx+1+"위 : "+music[idx];
});

</script>

<script type="text/javascript">
function openWin(){
var win = window.open("http://www.naver.com","","height=300,width=300");
}

</script>
<body>
<h2 align="center" onclick="openWin()">버튼대신 숫자(1)</h2>

</body>

<script type="text/javascript">
function openWin(){
var win = window.open("http://www.daum.net","","height=300,width=300");
}

</script>
<body>
<<h3 align="center" onclick="openWin()">버튼대신 숫자(2)</h3>

</body>
</html>