<HTML 콘텐츠 출력>
자바스크립트 코드로 HTML 콘텐츠를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있다.
이때 document.write() 혹은 document.writeln()을 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write()</title>
</head>
<body>
</body>
<!--
<br>태그는 사용하지 않는다
덧셈의 결과는 직접 연산을 통해 출력한다.
document.write() 활용
---------------------- (hr태그)
Welcome!
2 + 5는
7입니다.
-->
<script>
/* 동일한 객체로 시작되면 with문을 사용하여 한 번만 작성한다. */
/* with(반복되는 객체명) */
with(document){
write("<h1>document.write() 활용</h1>");
write("<hr>");
write("<h2>Welcome!</h2>");
write("<pre>");
writeln("2 + 5는");
writeln(2 + 5 + "입니다.");
write("</pre>");
}
</script>
</html>※ writeln()은 줄바꿈(\n)문자가 삽입된다.
하지만 HTML에서 줄바꿈으로 표현되지 않기 때문에 write()와 동일하게 나온다(컴파일이 안되기 때문)
그러므로 writeln()을 사용할때는 <pre>태그를 활용하여 개행효과를 낼 수 있다. 그러나 디자인이 많이 깨지기 때문에 <pre>보다는 주로 <br>을 사용한다.
<다이얼로그 (입력)> => 사용자 입력 및 메세지 출력
사용자에게 메세지(주로 확인 또는 알림)를 출력하거나, 입력을 받을 수 있는 3가지 다이얼로그가 있다.
1. 프롬프트 다이얼로그 : prompt("메세지","디폴트 입력 값");
'디폴트 입력 값'은 생략이 가능하다.
사용자가 입력한 문자열 값을 리턴하지만, 아무 값도 입력되지 않으면""을 리턴, 취소나 강제로 닫으면 null을 리턴한다.
+) 사용자가 입력한 문자열 값이기 때문에 null을 "null"로 리턴한다(크롬이 주로 그럼)
그러나 매번 같은 동작을 하지 않기 때문에 버그가 일어난다. 그러므로 null값을 막고 싶다면
if(data == null || data == "null")로 둘 다 막아주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
<script>
var name =prompt("이름을 입력하세요", "홍길동");
if(name == "null" || name == null){
document.write("취소 버튼을 누르셨거나 강제로 닫았습니다.");
}else if(name == ""){
document.write("입력 값 없이 확인 버튼을 눌렀습니다.");
}else{
document.write("<h1>");
document.write("성함: "+name);
document.write("</h1>");
}
</script>
</html>
2. 확인 다이얼로그 : confirm("메세지");
확인/취소 버튼을 가진 다이얼로그를 출력한다.
확인 버튼 클릭 시 true를 반환, 취소 또는 강제로 닫을 시 false를 반환한다.
3. 경고 다이얼로그 : alert("메세지");
메세지 출력의 기능 또는 개발자들이 변수에 어떤 값을 가지고 있는지 확인 할 때 사용
(다만 주로사용하는것은 아래에 나오는 console을 사용한다.)
// confirm과 alert
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm, alert 사용</title>
</head>
<body>
</body>
<script>
var isOk = confirm("전송할까요?");
if(isOk){
alert("전송 완료");
}else{
alert("전송 실패");
}
</script>
</html>
+) console
console.log(출력 내용);
웹페이지가 아닌 F12를 누르고 console란에 출력이 된다
고객의 출력 쪽이 아닌 개발자들의 출력 쪽에서 확인이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상수 (let)</title>
</head>
<body>
</body>
<script>
console.log("안녕");
// for(var i = 0; i < 10; i++){
for(let i = 0; i < 10; i++){
console.log(i+1);
}
console.log(i);
</script>
</html>
'프로그래밍 공부 > JS' 카테고리의 다른 글
| [lesson] JS - 제이쿼리 (jQuery) (0) | 2023.01.10 |
|---|---|
| [lesson] JS - 데이터 타입과 변수 (0) | 2023.01.10 |
| [Lesson]JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} (0) | 2022.05.11 |
| [lesson] JS - 함수(function), 객체(Object) [일반 객체, core] (0) | 2021.09.02 |
| [lesson] JS - 기본 개요 (0) | 2021.09.01 |
