자바 스크립트 기본 구조
- HTML 문서에 <script>자바스크립트 코드 </script> 태그 삽입
자바스크립트 사용법 3가지
- Internal 방식
- External 방식
- Inline 방식
Internal 방식
- HTML 문서에 삽입
- 일반적으로 <head> 부분에 삽입하지만 <body> 안의 임의의 부분에 삽입해도 됨
<script type="text/javascript">
alert("알림창");
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Internal 방식</title>
<script type="text/javascript">
alert("경고창입니다");
</script>
</head>
<body>
</body>
</html>
External 방식
- 별도의 자바스크립트 파일(.js) 파일을 만들어 HTML 문서에서 소스 지정
<script src="a.js"></script>
external.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript External 방식</title>
<script src="js/a.js"></script>
</head>
<body>
</body>
</html>
a.js
alert("경고창 입니다");
Inline 방식
- 자바스크립트 코드가 짧을 때 HTML 태그의 이벤트 핸들러 속성을 사용하여 함수 호출
- 비효율적인 방식
- 추천하지 않음
<body onLoad="start()"><button onClick="show()">
inline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Internal 방식</title>
<script type="text/javascript">
function start(){
alert("inline 방식으로 start() 함수를 호출하여 \n 출력된 알림창입니다.");
}
</script>
</head>
<body onload="start()">
</body>
</html>
데이터를 출력하는 방법
- window.alert(내용) : 내용을 알림창(경고창)으로 출력
- console.log(내용)
- document.write(내용) : 화면(문서)에 내용 출력
- DOM(문서 객체 모델) 사용 ex) body
write.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 데이터 출력</title>
<script type="text/javascript">
document.write("Hello");
/* h2 태그 효과 */
document.write("<h2>제목</h2>");
</script>
</head>
<body>
<h1>body 본문에서 출력</h1>
</body>
</html>
console.html
- 웹 브라우저로 열고
F12 눌러서 console 창 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
console.log("hello");
console.log("<h2>태그출력</h2>");
</script>
</head>
<body>
<h1>태그</h1>
</body>
</html>
document2.html
- document.body.innerHTML +=
~
- 작성 시, 위에 있는 내용에 이어서 작성하게 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
document.write("<h2>제목</h2>");
document.body.innerHTML += "DOM 객체 innerHTML 속성 사용해서 출력";
</script>
</head>
<body>
</body>
</html>
document3.html
- document.body.innerHTML =
~
- 으로 바꾸게 되면 document.write에 썼던 내용을 덮어쓰게 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
document.write("<h2>제목</h2>");
document.body.innerHTML = "DOM 객체 innerHTML 속성 사용해서 출력";
</script>
</head>
<body>
</body>
</html>
자바스크립트 코드 입력 시 주의점
- 대소문자 구별
- 문장 끝에 세미콜론(;) 사용
- 문자열에 따옴표 겹침 오류 주의
- 문자열 큰 따옴표, 작은 따옴표 모두 사용 가능
document.write("이름은 홍길동입니다");- 큰 따옴표 안에 큰따옴표 불가 (작은따옴표도 동일)
- 괄호 짝이 맞아야 함
데이터 입력 방법
- confirm() : 함수로 입력 받기
- prompt() : 함수로 입력 받기
- getElementsByTagName() : 태그 이름 사용
- <input> 태그의 value 속성 사용
- DOM (문서 객체 모델) 사용
confirm() 함수로 입력받기
- 자바스크립트 내장 함수
- [확인]/[취소] 버튼이 있는 대화상자를 출력하고
- [확인] 버튼을 누르면 true 값 반환
- [취소] 버튼을 누르면 false 값 반환
cofirmInput.html
- OK 누르면 : true
- Cancel 누르면 : false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
// 변수 선언하고 반환값 저장
var isStudent = confirm("당신은 학생입니까?");
document.write("isStudent값 :"+isStudent);
</script>
</head>
<body>
</body>
</html>
confirmInputEx.html
- 학생일경우 -> 학생입니다. 할인율 : 50%
- 학생이 아닐경우 -> 학생이 아닙니다. 할인율 없음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
// 변수 선언하고 반환값 저장
var isStudent = confirm("당신은 학생입니까?");
if(isStudent == true) {
document.write("학생입니다.");
document.write("<br>");
document.write("할인율 : 50%");
// 한 줄로 입력해도 상관 없음
// document.write("결과 : 학생입니다. <br> 할인율 : 50%");
} else{
document.write("학생이 아닙니다.");
document.write("<br>");
document.write("할인율 : 없음");
}
</script>
</head>
<body>
</body>
</html>
prompt() 함수
- 자바스크립트 내장 함수
- 사용자로부터 입력 받은 값을 반환
prompt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript prompt() 함수로 입력받기</title>
<script type="text/javascript">
var answer = prompt("가장 좋아하는 과일은?");
alert("가장 좋아하는 과일 : " + answer + "입니다.");
document.write("가장 좋아하는 과일 : " + answer + "입니다.");
</script>
</head>
<body>
</body>
</html>
promptInputEx.html
- 카드로 결제합니까?
- 확인 : 카드번호를 입력하세요
- 카드번호를 입력하세요 (기본값 xxxx-xxxx-xxxx-xxxx 설정하기)
- 취소: 카드로 결제하지 않습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript prompt() 함수로 입력받기</title>
<script type="text/javascript">
var answer = confirm("카드로 결제합니까?");
if(answer == true){
answer = prompt("카드번호를 입력하세요",'xxxx-xxxx-xxxx-xxxx');
document.write("카드번호 : " + answer);
}else {
document.write("카드로 결제하지 않습니다.");
}
</script>
</head>
<body>
</body>
</html>