728x90
반응형
앞으로 CSS와 HTML 태그에 다른 이벤트를 입력하지 않고 독립적으로 운영할수 있게 하는거다
자바스크립트의 동작을 CSS나 HTML 에서 실행하게되면 실행은 가능하지만 선을넘는행위이다.
전에 작성햇던 css 와 hmt javascript 먼저 실행되는 순서를 알아봤을때
브라우저마다 실행되는 순서가 다르다는걸 확인햇다.
그래서 winodw.addEventListener명령어를 사용하여 페이지가 완전 로딩후 명령어가
실행되도록하엿다.
지금은 여러항목을 선택하려면 반복문이 등장하지만 jquery를 시작하게되면 반목문이 등장하지 않으니
자세히 알아보진 않겟다
(강사님은 jquery보다 pure js를 좀더 공부하는게 좋을거다 라고 말씀해주셧다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener("load", function () {
//로딩이 완료되면 이미지를 보여줘라.
var button = document.querySelectorAll("button"); //버튼을 타겟으로 이벤트를 발생
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function () {
var image = document.querySelector("img");
if (this.textContent == "작게") {
image.width = 100;
image.height = 100;
} else if (this.textContent == "크게") {
image.width = 300;
image.height = 300;
} else {
image.width = 200;
image.height = 200;
}
});
}
});
</script>
</head>
<body>
<button >작게</button>
<button >보통</button>
<button >크게</button>
<hr>
<img src="./image/kakao.gif" width="200" height="200" id="sample" />
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9번 문제 독립형으로 변경</title>
<script src="31.size.js"></script>//
<script>
</script>
</head>
<body>
<button id="btn-small">작게</button>
<button id="btn-normal">보통</button>
<button id="btn-large">크게</button>
<hr>
<img src="./image/kakao.gif" width="200" height="200" id="sample">
</body>
</html>css에서 link로 css타입파일을 불러왓듯이
자바스크립트는 src로 해당 파일을 불러와서 사용할수잇다.
jquery를 불러올떄도 저명령어를 사용하니 알아두자
'[LANG] > - JavaScript' 카테고리의 다른 글
| [JS]Object 객체 (0) | 2022.06.03 |
|---|---|
| [JS] 자바스크립트 배열 array (0) | 2022.06.03 |
| [JS] 자료형 let /Const / var 의 차이는 무엇일까? (0) | 2022.06.02 |
| [JS] javascript vs html vs CSS 누가먼저 실행될까 (0) | 2022.06.02 |
| [JS]내부글자제어 (0) | 2022.06.02 |
댓글