수업/자바스크립트
유수봉 교수의 WEB-10
seung_ho_choi.s
2024. 5. 8. 17:58
728x90
1. 마우스 올리기
<html>
<head>
<title>#1 - 이벤트 리스너 속성에 자바스크립트 코드</title>
</head>
<body>
<h3> 마우스 올려 보세요</h3>
<hr>
<img src="circle1.png" alt="그림파일이 없습니다."
onmouseover="this.src='circle2.png'"
onmouseout="this.src='circle3.png'"
onmousedown="this.src='circle4.png'"
onmouseup="this.src='circle1.png'">
</body>
</html>
2. script 태그에 자바스크립트 작성
<html>
<head>
<title>#2 - script 태그에 자바스크립트 작성</title>
<script>
function over(obj) { obj.src = "circle2.png"; }
function out(obj) { obj.src = "circle3.png"; }
</script>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="circle1.png" alt="0|0|X|" onmouseover="over(this)" onmouseout="out(this)">
</body>
</html>
3. 외부 자바스크립트 파일작성
<html>
<head>
<title>#3 - 외부 자바스크립트 파일 작성</title>
<script src="jsfile2.js">
</script>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="circle1.png" alt="0|0|X|" onmouseover="over(this)" onmouseout="out(this)">
</body>
</html>
function over(obj) { obj.src = "circle2.png"; }
function out(obj) { obj.src = "circle3.png"; }
4. URL에 자바스크립트 작성
<!DOCTYPE html>
<html>
<head>
<title>#4 - URL에 자바스크립트 작성</title>
</head>
<body>
<h3>링크의 href 에 자바스크립트 작성</h3>
<hr>
<a href="javascript:alert('클릭하셨어요?')">
클릭해보세요</a>
</body>
</html>
5. document.write 및 prompt
<!DOCTYPE html>
<html>
<head>
<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>
<script>
var ret = prompt("이름을 입력하세요", "윤수봉");
if (ret == null) {
// 취소 버튼이나 다이얼로그를 닫은 경우
}
else if (ret == "") {
// 문자열 입력 없이 확인 버튼 누른 경우
}
else {
d.write(ret);
// ret에는 사용자가 입력한 문자열
}
</script>
</html>
6. confirm 사용
<!DOCTYPE html>
<html>
<head>
<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>
<script>
var ret = confirm("전송할까요");
if(ret == true) {
// 사용자가 "확인" 버튼을 누른 경우
}
else {
// 취소 버튼이나 다이얼로그를 닫은 경우
}
</script>
</html>
7. alert & prompt & confirm 사용
<!DOCTYPE html>
<html>
<head><title>Lab_js01 DialogWindow</title></head>
<body>
<h3>DialogWindows</h3>
<hr>
<script> var x;
</script>
<script>
x=alert("Step-1 : alert")
document.writeln("Step-1");
document.writeln("alert=[" + x + "]" + "<br>")
</script>
<script>
x=prompt("Step-2: prompt","하이");
document.writeln("Step-2");
document.writeln("prompt=[" + x + "]" + "<br>")
</script>
<script>
x=confirm("Step-3 : confirm");
document.writeln("Step-3");
document.writeln("confirm=[" + x + "]" + "<br>");
</script>
</body>
</html>
느낀점
오늘은 본격적으로 자바스크립트 수업을 시작했다 ㅎㅎ 재밌당 ㅎㅎ
728x90