<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> window 1-1 </title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
//목표 :
//버튼을 누르면 안녕!이라는 alert이 뜨게 해보자!
//단, onclick 안쓰고...
//1. 버튼을 선택한다
//2. 버튼에 클릭 이벤트를 설정한다
//3. 클릭 이벤트에서 함수를 실행한다
function welcome() {
alert("Hello!");
}
function init() {
var btn = document.querySelector(".btn");
//console.log(btn);
//.btn 을 클릭하면 welcome 함수를 실행하도록 예약할게요
btn.onclick = welcome;
}
//모든화면이 준비되면 init 함수를 실행하도록 예약할게요(콜백,callback)
window.onload = init;
</script>
</head>
<body>
<button class="btn">Click</button>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window 1-2</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
//목표 :
//버튼을 누르면 안녕!이라는 alert이 뜨게 해보자!
//단, onclick 안쓰고...
//1. 버튼을 선택한다
//2. 버튼에 클릭 이벤트를 설정한다
//3. 클릭 이벤트에서 함수를 실행한다
//window.addEventListener("이벤트종류", 함수);
window.addEventListener("load", function(){
var btn = document.querySelector(".btn");
btn.addEventListener("click", function(){
alert("Hello!");
});
});
</script>
</head>
<body>
<button class="btn">Click</button>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 글자크기 조절 문제 (2) | 2023.09.30 |
|---|---|
| 색상 변경 예제 (0) | 2023.09.27 |
| 예상 결제 금액 계산 (1) | 2023.09.25 |
| 이용약관 (0) | 2023.09.22 |
| 체크박스 제어 (0) | 2023.09.21 |