JavaScript/1. 자바스크립트 언어

Day 44 : 자바 스크립트 시작

pancakemaker 2021. 12. 17. 18:03

1. 자바스크립트 언어란?

- 조각난 소스 코드 형태로 HTML 페이지에 내장됨

- 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행됨

- C언어 구조를 차용하고 단순화

2. 자바스크립트 코드의 위치

① HTML 태그의 이벤트 리스너 속성에 작성

- 리스너 속성 : 마우스가 클릭되는 등 이벤트가 발생할 때 처리되는 코드를 등록하는 속성

<img src="apple.png" alt="img" onclick="this.src='banana.png'">

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이벤트 리스너 속성에 자바스크립트 코드</title>
</head>
<body>
	<h3>마우스를 올려 보세요</h3>
	<hr>
	<img src="media/apple.png" alt="이미지"
		onmouseover="this.src='media/banana.png'"
		onmouseout="this.src='media/apple.png'">
</body>
</html>

 

② <script></script> 내에 작성

- <head></head>나 <body></body> 내 어디든 작성 가능

- 웹 페이지 내에 <script></script> 여러 번 작성 가능

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>script 태그에 자바스크립트 코드</title>
	<script>
		function over(obj) {
			obj.src="media/banana.png";
		}
		function out(obj) {
			obj.src="media/apple.png";
		}
	</script>
</head>
<body>
	<h3>마우스를 올려 보세요</h3>
	<hr>
	<img src="media/apple.png" alt="이미지"
		onmouseover="over(this)"
		onmouseout="out(this)">
</body>
</html>

 

③ 자바스크립트 파일에 작성

- 확장자가 .js인 별도의 파일로 작성 후 <script> 태그의 src 속성으로 불러옴

<script src="파일이름.js">
	//HTML5부터 이곳에 자바스크립트 코드를 추가 작성하면 안됨
</script>

 

lib.js 파일

function over(obj) {
	obj.src="media/banana.png";
}
function out(obj) {
	obj.src="media/apple.png";
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>외부 파일에 자바스크립트 작성</title>
	<script src="lib.js">
	</script>
</head>
<body>
	<h3>마우스를 올려 보세요</h3>
	<hr>
	<img src="media/apple.png" alt="이미지"
		onmouseover="over(this)"
		onmouseout="out(this)">
</body>
</html>

 

④ URL 부분에 작성

- <a> 태그의 href 속성에 코드 작성

<a href="javascript:자바스크립트 코드">링크</a>

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>URL에 자바스크립트 작성</title>
</head>
<body>
	<h3>링크의 href에 자바스크립트 작성</h3>
	<hr>
	<a href="javascript:alert('클릭하셨어요?')">클릭해보세요.</a>
</body>
</html>

3. 자바스크립트로 HTML 콘텐츠 출력

document.write("<h3>Welcome!</h3>");

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>document.write() 사용</title>
</head>
<body>
	<h3>document.write()로 HTML 콘텐츠 출력</h3>
	<hr>
	<script>
		document.write("<h2>Welcome!</h2>");
		document.write("2 + 5 는 <br>");
		document.write("<mark>7 입니다.</mark>");
	</script>
</body>
</html>

4. 자바스크립트 다이얼로그 : 사용자 입력 및 메시지 출력

① 프롬프트 다이얼로그 : prompt("메시지", "디폴트 입력값")

var ret = prompt("이름을 입력하세요", "황기태");
if(ret == null) {
	//취소 버튼이나 다이얼로그를 닫은 경우
}
else if(ret == "") {
	//문자열 입력 없이 확인 버튼 누른 경우
}
else {
	//ret에는 사용자가 입력한 문자열
}

 

② 확인 다이얼로그 : confirm("메시지")

- 메시지와 확인/취소 버튼을 가진 다이얼로그 출력

var ret = confirm("전송할까요?");
if(ret == true) {
	//사용자가 "확인" 버튼을 누른 경우
}
else {
	//취소 버튼이나 다이얼로그를 닫은 경우
}

 

③ 경고 다이얼로그 : alert("메시지")

alert("클릭하였습니다.");