JS에서, <script> 블록에서는 주석을 자바와 같이 // 와 /**/ 를 이용한다.
document.write()의 경우는 기존의 HTML 문서를 지우고 새 HTML 빈 문서에 테스트를 할 때 쓰인다.
document.write("<h1>안녕 헤드라인!</h1>") 과 같이 쓰면 기존의 화면이 지워지고
안녕 헤드라인! h1 태그가 화면에 보여진다.
주로 테스트 할 때 사용하는 키워드이다.
inner HTML은 바디에 생성한 개체들의 내용을 읽거나 바꿀 때 사용한다.
console.log의 경우는 자바 이클립스에서 실행하면 코드 아래쪽의 실행창과 비슷하며
원하는 문구를 출력할 수 있고 오류같은 메시지도 볼 수 있다. f12의 개발자 모드 하단에서 찾을 수 있다.
다음은 예제이다.
javaScript02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//한줄 주석입니다.
/*
여러줄 주석입니다.
*/
function start(){
alert("문서가 로딩완료되었습니다.");
}
</script>
<style>
.area {
width:300px;
height:100px;
border:1px solid black;
}
</style>
</head>
<!-- <body onload="start();"> -->
<body>
<h1>자바스크립트의 데이터 입/출력</h1>
<script>
// 웹페이지의 모든 내용이 로딘된 후에 실행되면, 로딩된 데이터를 지우고 출력하기 때문에
// 주로 테스트 용도로만 사용한다.
document.write("<h1>document.write()로 출력함</h1>");
</script>
<h3>inner HTML로 요소의 내용 변경하기</h3>
<div id="area1" class="area">자바스크립트에서 태그 앨리먼트의 값을 읽어가거나,
값을 변경할 때 inner HTML 속성을 사용한다.</div>
<br>
<button onclick="checkvalue();">innerHTML 확인</button>
<script type="text/javascript">
// text/javascript는 생략가능
function checkvalue(){
var area1 = document.getElementById("area1");
alert(area1.innerHTML);
console.log(area1.innerHTML);
console.log(area1);
area1.innerHTML = "innerHTML 속성으로 값 변경함";
}
</script>
<hr>
<h3>console.log()로 개발자 도구 콘솔 화면에 출력하기</h3>
<p>개발자 도구 콘솔 화면에 출력을 하고자 할 때 사용하며,
디버깅 할 때 주로 사용한다.</p>
<button onclick="printConsole();">콘솔에 내용 출력</button>
<script>
function printConsole(){
var num1 = 3;
var num2 = 4;
var sum = num1 + num2;
window.console.log(sum);
// window는 생략가능
}
</script>
<hr>
<h3>window.confirm()을 이용한 데이터 입력</h3>
<p>어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용한다.</p>
<p>확인 버튼과 취소 버튼이 나타나며, 확인 버튼을 클릭시 true.
취소 버튼을 클릭시 false를 리턴한다.</p>
<button onclick="checkgender();">성별 확인하기</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function checkgender() {
var result = confirm("남자면 확인, 여자면 취소 버튼을 눌러주세요");
console.log(result);
var gender = "";
if(result == true){
gender = "남자";
}else{
gender = "여자";
}
console.log(gender);
var area2 = document.getElementById("area2");
area2.innerHTML += "당신은 " + gender + "입니다.<br>";
}
</script>
<hr>
<h3>window.prompt()를 이용한 데이터 입력</h3>
<p>텍스트필드와 확인/취소 버튼이 있는 대화상자를 출력하고,
입력한 메세지 내용을 리턴값으로 돌려받는다.</p>
<button onclick="testPrompt();">이름 입력</button>
<div id="area3" class="area"></div>
<script>
function testPrompt() {
var result = window.prompt("당신의 이름은 무엇인가요?");
var area3 = document.getElementById("area3");
area3.innerHTML += "앗! 당신이 " + result + "군요! 반가워요!";
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-005.변수 및 자료형(+typeof, 동적 타입 변경 ) (0) | 2018.11.07 |
|---|---|
| [JS]04-004.HTML 태그에 접근하는 방법(Id, 태그 명, name) (0) | 2018.11.06 |
| [JS]04-002.html 기본 사용 예 및 js 파일 생성 및 예 (0) | 2018.11.05 |
| [JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행 (0) | 2018.11.05 |
| [JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법 (0) | 2018.10.19 |