팝업창
: window.open('url', 'window name', 'option(size, scroll..)' );
- 열기버튼을 누르면 ) 팝업창이 열리고
- 닫기버튼을 누르면 ) 팝업창이 닫힘
<body>
<button type="button" onclick="openWindow();">열기</button>
<button type="button" onclick="closeWindow();">닫기</button>
<h3 id="msg"></h3>
<script>
let myWindow;
function openWindow(){
myWindow = window.open("","mywindow", "width=400, height=500");
// myWindow = open("","mywindow", "width=400, height=500"); //window. 이 없어도 사용은 가능
}
function closeWindow(){
if(myWindow){ //myWindow가 true이면 (열려있으면)
myWindow.close();
}
}
</script>
</body>
== 메서드 ==
alert(); 경고창
<button type="button" id="alert">alert</button>
<h3 id="msg2"></h3>
<script>
let print = document.getElementById('msg2');
document.getElementById('alert').addEventListener('click',()=>{
alert('alert창');
print.innerHTML += `alter창 <br>`;
})
</script>
prompt(); input값 받는 창
<button type="button" id="prompt">prompt</button>
<h3 id="msg2"></h3>
<script>
let print = document.getElementById('msg2');
document.getElementById('prompt').addEventListener('click',()=>{
let p = prompt('prompt 입력을 받는 창');
print.innerHTML += `prompt창 내용: ${p} <br>`;
})
</script>
confirm(); 확인/취소 창
<button type="button" id="confirm">confirm</button>
<h3 id="msg2"></h3>
<script>
let print = document.getElementById('msg2');
document.getElementById('confirm').addEventListener('click',()=>{
let c = confirm('확인/취소를 누르는 창');
if(c){
print.innerHTML += `confirm창 확인/취소 : 확인 (${c})`;
} else {
print.innerHTML += `confirm창 확인/취소 : 취소 (${c})`;
}
})
</script>
setInterval( function, millseconds ) ; 일정 간격으로 지속적 실행문을 실행
setTimeout ( function, millseconds ) ; 일정 시간동안 실행 시키는 경우 사용
== 사용예시 ==
- 버튼을 누르면 창이 뜨고, 창에 입력한 값이 출력되도록 하기
<script>
let print = document.getElementById('msg2');
document.getElementById('alert').addEventListener('click',()=>{
alert('alert창');
print.innerHTML += `alter창 <br>`;
})
document.getElementById('prompt').addEventListener('click',()=>{
let p = prompt('prompt 입력을 받는 창');
print.innerHTML += `prompt창 내용: ${p} <br>`;
})
document.getElementById('confirm').addEventListener('click',()=>{
let c = confirm('확인/취소를 누르는 창');
if(c){
print.innerHTML += `confirm창 확인/취소 : 확인 (${c})`;
} else {
print.innerHTML += `confirm창 확인/취소 : 취소 (${c})`;
}
})
</script>
'JS > JS 공부' 카테고리의 다른 글
| [JS] setInterval 정해진 시간주기로 지속적 함수 호출 (0) | 2023.04.21 |
|---|---|
| [JS] setTimeout 정해진 시간후 함수 실행 (0) | 2023.04.21 |
| [JS] BOM, DOM 높이 / 너비 (0) | 2023.04.20 |
| [JS] 비표준 속성 non_standard (0) | 2023.04.20 |
| [JS] 비동기통신 ( async await ,promise Chain ) (0) | 2023.04.20 |