[JavaScript] 화면출력 함수 document.write(), with(document){}, alert(), confirm(), prompt(), console.log()

JavaScript 데이터 출력

JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다.
다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다.

 

• document.write()
• with(document){}
• alert()
• confirm()
• prompt()
• console.log()

---

👉 document.write()

document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다.

document객체로써 document는 웹 문서를 의미한다.
웹페이지에 존재하는 HTML요소에 접근하고자 할때는 반드시 Document 객체를 사용해야한다.

 

📝 document.write() 형태

document.write("Hello, World!");

 

 

사용예시

코드

화면

---

 

텍스트필드로 이름 입력받고 출력

 

화면

---

👉 with(document){}

보통은 write는 모두 document.write()라고 썻어야 했지만
with 구문에 document를 명시 해 줌으로써

이를 생략해도 자동적으로 함께 쓴 것처럼 인식이 됩니다.

객체가 가진 기능이나 속성을 참조하기 위해 사용한다.

주어진 객체의 속성이나 기능을 with문의 영역을 통해서 간편하게 다뤄줄 수 있다.

 

📝 with(document){} 형태

with(document) { //document가 속성 앞에 붙게 됩니다.
   write("with 명령문을 사용하면<br>");
   write("반복 사용할 특정객체를<br>");
   write("여러번 사용하지 않고도<br>");
   write("편리하게 사용할 수 있습니다");
}

---

👉 alert(), confirm(), prompt()

alert(), confirm(), prompt()은 사용자와의 간단한 상호작용을 위해 사용됩니다.

 

📝 alert(), confirm(), prompt() 형태

alert("경고 메시지입니다!");
var result = confirm("계속하시겠습니까?");
var name = prompt("당신의 이름은 무엇입니까?");

---

alert()

alert는 알림창으로 가장 많이 사용하는 간단한 대화 상자이다. 

사용자가 확인버튼을 클릭하기 전까지는 아무 작업도 할 수 없다.

코드

 

화면

---

confirm()

confirm 은 확인창으로 사용자가 [확인] 이나 [취소] 버튼 중에서 직접 클릭할 수 있다. 

confirm()함수는 사용자가 "예"를 선택하면 true값을 반환한다.

                          사용자가 "아니오" 선택하면 false값을 반환한다.

 

코드

 

화면

---

prompt()

프롬프트 창은 텍스트 필드가 있는 창이다.
이 텍스트 필드 안에 간단히 메시지를 입력할 수도 있고, 그 메시지를 가져와 프로그램에서 사용할 수도 있다.  

prompt()함수로 웹문서에서 입력받은 데이터를 변수에 담아서 사용할 수 있다.

let 변수명 = prompt("출력해주고싶은 문자열");

 

기본값으로 '아무개' 지정

 

화면

---

 

기본값 없는 경우

 

화면

---

👉 console.log()

console.log()는 브라우저의 개발자 콘솔에 메시지를 출력합니다.

 

📝 console.log() 형태

console.log("이 메시지는 콘솔에 출력됩니다");

 

 

사용예시

코드

 

개발자도구에서 console로 확인가능