자바스크립트 다이얼로그 : 사용자 입력 및 메세지 출력, 그림 6-2. 프롬프트 다이얼로그로 문자열 입력, 그림 6-3. 확인 다이얼로그를 출력하여 확인과 취소 중 선택, 그림 6-4. 경고 다이얼로그..
WEB/JAVASCRIPT-CONCEPT 2017. 11. 13. 09:11 |1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트로 사용자 입력 및 대화</title> </head> <body> <h3>자바스크립트로 사용자 입력 및 대화</h3> <hr> <div id="result"></div> <script> var result = document.getElementById("result"); // 프롬프트 다이얼로그, prompt("메세지","디폴트 입력값") - prompt() 함수는 다이얼로그를 출력하고, 사용자로부터 문자열을 입력받아 리턴한다. - prompt() 함수는 '메세지'와 '디폴트 입력값'을 출력하며, '디폴트 입력값은' 생략 가능하다. - prompt() 함수는 사용자가 입력한 문자열을 리턴하지만, 아무 값도 입력되지 않았으면 ""를, 취소 버튼이나 강제로 다이얼로그를 닫은 경우 null을 리턴한다. function promptEX() { var ret = prompt("이름을 입력하세요", "황기태(디폴트값, 생략가능)"); if(ret == null) { // 취소 버튼이나 다이얼로그를 닫은 경우 result.innerHTML = "취소나 그냥 닫았군요" } else { // ret에는 사용자가 입력한 문자열 // 아무 값도 입력하지 않으면, ret="" result.innerHTML = ret; } } // 확인 다이얼로그, confirm("메세지") - confirm() 함수는 '메시지'와 확인/취소 버튼을 가진 다이얼로그를 출력한다. - 사용자가 확인버튼/취소버튼을 누르면 true/false를 리턴한다. function confirmEX() { var ret = confirm("전송할까요"); if(ret == true) { // 사용자가 "확인" 버튼을 누른 경우 result.innerHTML ="확인을 눌렀군요"; } else { // 취소 버튼이나 다이얼로그가 닫힌 경우 result.innerHTML ="취소나 그냥 닫았군요"; } } // 경고 다이얼로그, alert("메세지") - alert() 함수는 다이얼로그를 출력하여 단순히 메세지를 전달한다. function alertEX() { alert("클릭하였습니다."); } </script> <button onclick="promptEX()">프롬프트 다이얼로그</button> <button onclick="confirmEX()">확인 다이얼로그</button> <button onclick="alertEX()">경고 다이얼로그</button> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
예제 6-7. 상수 (0) | 2017.11.13 |
---|---|
예제 6-6 지역변수와 전역변수. 자바스크립트 식별자. (0) | 2017.11.13 |
예제 6-5. document.write()로 웹 페이지에 HTML 콘텐츠 출력 (0) | 2017.11.13 |
예제 6-1. HTML 태그의 이벤트 리스너 속성에 자바스크립트 코드 작성, 예제 6-2. <script> 태그에 자바스크립트 코드 작성, 예제 6-3. 자바스크립트 파일 작성 및 불러오기, 예제 6-4. 링크의 href에 자.. (0) | 2017.11.13 |
예제 13-5. getCurrentPosition()로 현재 위치 파악. 예제 13-6. watchPosition()으로 반복 위치 서비스 (0) | 2017.11.04 |