자바스크립트를 쓰는 이유 :
웹문서를 좀더 동적으로 표현하기 위해서 그리고 웹브라우저에서 실행되니 서버의 과부하를 막을수 있다. 또 HTML 문서내에 포함돼 사용하기 편하고 배우기 쉽다. 속도가 빠르다는 장점이있다.
전체 코드
in-out.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 입출력</title>
</head>
<body>
<h2>출력 방법</h2>
<p>1. html 문서에 출력 - document.write() <!-- 현제 해당 페이지의 내용을 내가 원하는 걸로(괄호 안에 내용으로) 덮어쓰기해주는 기능 -->
<button onclick="document.write('출력')">출력</button><!-- "" 안에 ""또쓰면 문자열이 갈라지기때문에 ""안에는 ''를 사용한다 -->
</p>
<p>2. html 요소에 출력 - element.innerHTML() <!-- 검색된 요소에 내용을 추가해줌 -->
<button onclick="document.getElementById('print').innerHTML='출력'">출력</button><!-- print라는 id로 검색되는 요소를 구한다. 그 요소에 내가 원하는 innerHTML에 내용을 넣는다 -->
</p>
<div id="print" style="border: 1px solid #a5f6c8;">버튼 누르면 여기에 출력됨</div>
<!-- onclick 속성의 값은 javascript 코드 -->
<p>3. 대화상자(경고창)에 출력 - alert()
<button onclick="alert('출력')">출력</button>
</p>
<p>4. 개발자 도구의 콘솔에 출력 - console.log()
<button onclick="console.log('출력')">출력</button><!-- 개발자 도구에서만 확인할 수 있는 부분, log역할 -->
</p>
<hr>
<h2>입력 방법</h2>
<p>1. 확인/취소 대화상자로 입력 - confirm('메시지')
<button onclick="func1()">입력</button>
</p>
<script type="text/javascript">
//자바스크립트 코딩 영역
function func1() {
//var : 변수임을 선언해줌
var r = confirm('메시지 출력');// r은 변수
console.log(r);//변수 r에 저장된 값을 콘솔에 출력
if (r == true) {
alert("확인을 누르셨습니다.")
}
else {
alert("취소를 누르셨습니다.")
}
}
</script>
<p>2. 입력(문자열) 대화상자로 입력 - prompt('메시지')
<button onclick="func2()">입력</button>
</p>
<div id="pp" style="border: 1px solid #a5f6c8;">입력이 여기에 출력됨</div>
<script type="text/javascript">
var r2;
function func2() {
r2 = prompt("이름을 입력하세요.")
alert(r2 + "님 환영합니다")
document.getElementById('pp').innerHTML= r2 + ' 님 환영합니다'
}
</script>
</body>
</html>
세부 설명
html에서 javascript 출력 방법
1. document.write()
- onclick 속성의 값은 javascript 코드
- 현제 해당 페이지의 내용을 내가 원하는 걸로(괄호 안에 내용으로) 덮어쓰기해주는 기능
- "" 안에 ""또쓰면 문자열이 갈라지기때문에 ""안에는 ''를 사용한다
<p>1. html 문서에 출력 - document.write()
<button onclick="document.write('출력')">출력</button>
</p>
브라우저에서 출력 버튼을 누르면 페이지 전체(body부분)가 document.write() 안에 있는 내용으로 변경되어서 새로고침 된다.
2. element.innerHTML()
- 검색된 요소에 내용을 추가해줌
- onclick 속성의 값은 javascript 코드
- print라는 id로 검색되는 요소를 구한다. 그 요소에 내가 원하는 innerHTML에 내용을 넣는다
<p>2. html 요소에 출력 - element.innerHTML()
<button onclick="document.getElementById('print').innerHTML='출력'">출력</button>
</p>
<div id="print" style="border: 1px solid #a5f6c8;">버튼 누르면 여기에 출력됨</div>
바디 부분이 전체가 변경되는게 아니라 지정해준 id에 해당하는 요소만 찾아서 그 영역에 해당하는 값을 수정해준다.
3. alert()
- 경고창에 내용 출력됨
<p>3. 대화상자(경고창)에 출력 - alert()
<button onclick="alert('출력')">출력</button>
</p>
경고창에 입력된 데이터 내용 출력되고 확인 버튼으로 구성되어 있음
4. console.log()
- 개발자 도구에서만 확인할 수 있는 부분
- log역할
<p>4. 개발자 도구의 콘솔에 출력 - console.log()
<button onclick="console.log('출력')">출력</button><!-- 개발자 도구에서만 확인할 수 있는 부분, log역할 -->
</p>
<hr>
개발자 도구(F12)에 있는 콘솔창에서 로그를 확인 할 수 있다.
html에서 javascript 입력 방법
1. confirm('메시지')
- 기본값으로 확인/취소가 있는 대화상자로 (확인/취소) 입력 -> 변수에 저장
<p>1. 확인/취소 대화상자로 입력 - confirm('메시지')
<button onclick="func1()">입력</button>
</p>
<script type="text/javascript">
//자바스크립트 코딩 영역
function func1() {
//var : 변수임을 선언해줌
var r = confirm('메시지 출력');// r은 변수
console.log(r);//변수 r에 저장된 값을 콘솔에 출력
if (r == true) {
alert("확인을 누르셨습니다.")
}
else {
alert("취소를 누르셨습니다.")
}
}
</script>
입력 버튼을 누르면 func1()이 실행되고..
함수에 있는 명령문들이 실행된다. confirm()으로 메시지 출력과 함께 확인/취소 값을 받아서 변수에 저장하고
콘솔창에 변수에 들어있는 값을 출력해주고
확인/취소인지 if문으로 조건으로 판별하여 alert()를 실행해준다.
2. prompt('메시지')
- 대화상자에 입력창이 함께 있어서 입력 받은 데이터를 저장함 -> 변수에 저장
<p>2. 입력(문자열) 대화상자로 입력 - prompt('메시지')
<button onclick="func2()">입력</button>
</p>
<div id="pp" style="border: 1px solid #a5f6c8;">입력이 여기에 출력됨</div>
<script type="text/javascript">
var r2;
function func2() {
r2 = prompt("이름을 입력하세요.")
alert(r2 + "님 환영합니다")
document.getElementById('pp').innerHTML= r2 + ' 님 환영합니다'
}
</script>
대화상자가 열리고 입력창에 데이터를 입력한다.
alert()창이 먼저 뜨고
document.getElementById('pp').innerHTML을 실행해서 id가 pp인 영역이 수정되어서 출력됨.
자바스크립트가 올 수 있는 다양한 위치
- 스크립트 위치는 여러곳에 위치할 수 있음
- 스크립트가 나뉘어져있어도 코드상 내용을 유지되기때문에 이어짐, 하나의 변수를 모든 영역에서 공유해서 사용함
- 변수 var 선언을 안해도 변수에 데이터형이 변해도 자동으로 데이터형이 바뀜
- 자바스크립트 실행 순서는 작성 순(위에서 아래)
- 분할된 스크립트 영역은 한 문서이기 때문에 하나의 문서 영역으로 통합되어 사용됨.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 위치</title>
<script type="text/javascript">
//head 영역 1
var num = 0;
document.write("head 태그 내 실행 : " + num + "<br>");
</script>
<script type="text/javascript">
//head 영역 2
//var num = 1;
document.write("head 태그 내 실행 : " + num + "<br>");
</script>
</head>
<body>
<script type="text/javascript">
//body 영역 1
var num = 2;
document.write("body 태그 내 실행 : " + num + "<br>");
</script>
<div></div>
<script type="text/javascript">
//body 영역 2
var num = 3;
document.write("body 태그 내 실행 : " + num + "<br>");
</script>
</body>
<script type="text/javascript">
//제 3의 영역
var num = 4;
document.write("제 3의 영역 내 실행 : " + num + "<br>");
</script>
</html>
외부 스크립트 불러오기
ex_js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 스크립트 불러오기</title>
<script src="myscript.js"></script>
<style type="text/css">/* 외부 js파일에 있는 html에 스타일 적용도 가능*/
div {
border: 1px solid red;
}
</style>
</head>
<body>
<p>그냥 단락입니다.</p>
<script src="myscript.js"></script>
<script type="text/javascript" src="./ejs/myscript02.js"></script><!-- "." 점이 프로젝트를 의미하고 물리적인 공간으로 치면 WebContents를 의미함 -->
<button onclick="ck01(100)">버튼</button>
</body>
</html>
myscript.js
/**
* 외부에 만든 스크립트 파일
*/
document.write("<script src='ejs/myscript02.js'></script>");
document.write("<div style='color:red; font-size:24px;'>외부 자바스크립트 출력</div>");
myscript02.js
document.write("<div style='color:green; font-size:36px;'>외부 자바스크립트 출력</div>")
function ck01(ival) {
alert(ival);
}
