ex6-01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
ex6-02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
ex6-04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URL에 자바스크립트 작성</title>
</head>
<body>
<h3>링크의 href에 자바스크립트 작성</h3>
<hr>
<a href="javascript:alert('클릭하셨어요?')">
클릭해보세요</a>
</body>
</html>
ex6-05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write() 활용</title>
</head>
<body>
<h3>document.write() 활용</h3>
<hr>
<script>
document.write("<h3>Welcome!</h3>");
document.write("2 + 5 는 <br>");
document.write("<mark>7 입니다.</mark>");
</script>
</body>
</html>
ex6-12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
ex6-23.html
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>자바스크립트 전역함수</title>
<script>
function evalParseIntIsNaN() {
let res = eval("2*3+4*6"); // res는 30
document.write("eval(\"2*3+4*6\")는 " + res + "<br>");
let m = parseInt("32");
document.write("parseInt(\"32\")는 " + m + "<br>");
let n = parseInt("0x32");
document.write("parseInt(\"0x32\")는 " + n + "<br><br>");
// "hello"는 정수로 변환할 수 없으므로 parseInt("hello")는 NaN 리턴
n = parseInt("hello");
if(isNaN(n)) // true
document.write("hello는 숫자가 아닙니다.");
}
</script>
</head>
<body>
<h3>eval(), parseInt(), isNaN()</h3>
<hr>
<script>
evalParseIntIsNaN();
</script>
</body>
</html>
ex6-24.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 만들기</title>
<script>
function gugudan(n) { // 함수 작성
let m = parseInt(n); // 문자열 n을 숫자로 바꿈
if(isNaN(m) || m < 1 || m > 9) {
alert("잘못입력하셨습니다.");
return;
}
for(let i=1; i<=9; i++) { // i는 1~9까지 반복
document.write(m + "x" + i + "=" + m*i + "<br>");
}
}
</script>
</head>
<body>
<h3>구구단 출력 함수 만들기</h3>
<hr>
<script>
let n = prompt("구구단 몇 단을 원하세요", ""); // n은 문자열
gugudan(n); // 함수 호출
</script>
</body>
</html>
댓글