Java Script
1.Event Listener
- 특정 요소에 특정 이벤트를 감시하는 기능을 추가하는 개념이다.
- Element.addEventListener("event", function)
- 이벤트 객체를 받을 떄 이름은 임의로 지정가능하며 이벤트 당한 당사자 정보도 알 수 있다.
- 익명함수란 딱 여기서만 한번 쓰인다는 의미이다
- 버튼을 클릭하면 텍스트가 빨,주,노,초,파,남,보 순서로 변경되고 마지막 순서에서 다시 처음 순서로 반복하게 만들어보자
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
</style>
</head>
<body>
<!--버튼을 클릭하면 텍스트가 빨,주,노,초,파,남,보 순서로 변경되고
마지막 순서에서 다시 처음 순서로 반복하게 만들어보자 -->
<h1 id="txt" >글자 색상이 변경 됩니다.</h1>
<button id="btn">색상 변경</button>
<!--
1.색깔이 바뀔 텍스트와 이벤트를 일으킬 버튼을 만든다.
2.버튼을 클릭시 색깔이 변하는 이벤트를 만든다.
(id="btn"을 태그로가져와 이벤트리스너를 통해 클릭시 실행할 함수를 설정한다)
3.<h1>태그에 이벤트를 통해 변경된 색깔을 적용한 후 확인한다.
4.7가지 변수를 사용하기 위해 배열을 선언하고 값을 입력한다.
5.이벤트 발생시 원하는 순서로 색깔이 변하도록 조건식을 만든다.
6.<h1>태그에 적용한다.
-->
</body>
<script>
var colors = ["red","orange","yellow","green","blue","navy","purple"];
var i = 0;
document.getElementById("btn").addEventListener("click",function(){
var txt = document.getElementById("txt");
if(i==colors.length){
i=0;
}
console.log(i);
txt.style.color=colors[i];
i++;
});
</script>
</html>2.BOM / Window Object
BOM(Browser Object Model)은 DOM보다 한 단계 큰 개념이다.
- window object
- window는 브라우저창을 의미하며 window 객체를 이용해 open 과 close를 할 수 있다.
function mywindow(){
console.log('새창 열기');
// window.open(주소, 창제목, 옵션); window는 생략가능
// 새 창은 팝업 옵션에 의해서 뜨지 않을 수 있다.
win = open("https://www.w3schools.com/","",
"width=400, height=400, top=500, left=500");
// width, height : 넓이와 높이
// top, left : 창의 위치(y, x)
// resizable : 창 크기 변경 허용 여부(IE 에서만 된다.)
// scroolbar : 컨텐츠가 창보다 클때 스크롤 허용 여부(IE, Firefox, Opera)
}
function closewin(){
console.log('창 닫기');
// 누구를 닫을지 알려주지 않으면 나를 꺼버린다.
win.close();
}- location 객체
<script>
//href 는 현재의 위치를 알려준다.
//또는 특정 위치로 이동시킨다.<a href=""><a/>의 기능
var btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click",function(e){
location.href="https://www.naver.com";
})
console.log(location.href); //http://127.0.0.1:5500/08_location.html
console.log(location.protocol); //http:
console.log(location.hostname); //127.0.0.1
console.log(location.pathname); //08_location.html
console.log(location.port); // 5500
</script>- 부모창과 자식창
- 새 창을 열면 새 창은 "자식" 기존 창은 "부모"가 된다.
- 부모와 자식사이에 데이터를 전달할 수 있다.
- 새 창을 열면 새 창은 "자식" 기존 창은 "부모"가 된다.
- alert
browser에서는 "경고 창"을 제공한다.
<script>
function popup(){
console.log('popup');
//window.alert("message") : 경고창
alert("경고창 입니다.");
}
function conf(){
console.log('confirm');
//true|false = window.confirm("message");
var yn = confirm("정말로 삭제 하시겠습니까?");
console.log(yn);
if(yn == true){
alert("삭제 되었습니다.");
}else{
alert("삭제가 취소 되었습니다.");
}
}
function prom(){
console.log('prompt');
//사용자가 입력한 값 = window.prompt("message");
var name = prompt("당신의 이름을 입력해 주세요");
console.log(name);
if(name == ''){
alert("이름을 입력해 주세요!");
}else{
alert(name+'님 반갑습니다.');
}
}
</script>- timing
특정 시간마다 어떠한 일을 수행 할 수 있도록 할 수 있다.
<script>
var i =0;
var txt = document.getElementById("cnt");
var time;
function interval(elem){
console.log('setInterval');
elem.disabled=true;
//window.setInterval(실행함수, 간격);
time = setInterval(function(){
i++;
console.log(i);
txt.innerHTML=i;
}, 1000);
}
function stop(){
console.log('stop');
//window.clearInterval(멈출녀석);
clearInterval(time);
var btns = document.getElementsByTagName('button');
console.log(btns);
btns[0].disabled = false;
}
function timeout(){
//window.setTimeout(실행함수, 시간)
setTimeout(function(){
alert('경고');
},3000)
}
</script>