자바스크립트(javascript)는 웹페이지에 생동감을 불어주는 언어입니다. 정적이여서 다소 식상할 수 있는 웹페이지를 동적으로 만들어 줄 수 있죠. 각 프로그래밍 언어마다 이런저런 유용한 기능을 구현해놓은 라이브러리가 있듯이, 자바스크립트도 이러한 라이브러리를 가지고 있습니다. jQuery가 그 중 하나입니다.
오늘은 jQuery를 이용해서 이미지를 클릭할 때마다 다른 이미지로 변경되는 코드를 소개해드리도록 하겠습니다. 구체적으로 말해서, 이미지를 클릭하면 다른 이미지로 바뀌고, 그 다른 이미지를 클릭하면 다시 원래 이미지로 변경됩니다. img1 -> img2 -> img1 -> img2 -> img1 -> ...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>아래 사진을 클릭해보세요!</h2>
<img id="img1" src="1.jpg" style="width:80%;">
<img id="img2" src="2.jpg" style="width:80%;">
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
/*웹페이지 열었을 때*/
$("#img1").show();
$("#img2").hide();
/*img1을 클릭했을 때 img2를 보여줌*/
$("#img1").click(function(){
$("#img1").hide();
$("#img2").show();
});
/*img2를 클릭했을 때 img1을 보여줌*/
$("#img2").click(function(){
$("#img1").show();
$("#img2").hide();
});
});
</script>
</html>
|
cs |
이 코드를 이용해서 만든 웹페이지는 다음과 같이 작동합니다. 이미지를 여러 차례 클릭해보겠습니다.
이미지를 클릭할 때마다 잘 변환되는 것을 확인할 수 있습니다. 컬러 사진에서 흑백 사진으로, 흑백 사진에서 컬러 사진으로, 컬러 사진에서 흑백 사진으로, ...
직접해보셨나요? 잘 되시던가요? ㅎㅎ 끝까지 읽어주심에 감사드립니다.^^
<참고자료>
[1] https://opentutorials.org/course/48, 생활코딩, "JavaScript"
'Dev > javascript' 카테고리의 다른 글
| [jquery] css() 메서드로 css 속성 추가하기 (6) | 2020.12.12 |
|---|---|
| [jquery] html 메서드 정리 (0) | 2020.12.11 |
| [javascript] 정의와 동시에 호출이 가능한 즉시실행함수 (0) | 2020.12.10 |
| [jquery] textarea 최대 100자까지만 입력 가능하게 하기 (2) | 2020.12.09 |
| [javascript] checkbox 체크되었을 때 1, 안 되었을 때 0을 제출하고 싶다면 (11) | 2020.12.08 |
| [javascript] 자료형을 알고 싶다면 typeof (0) | 2020.12.04 |
| [javascript] 숫자를 문자열로 바꿔주는 String 함수와 toString 메서드 (0) | 2020.12.04 |
| javascript를 이용해서 웹에서 오디오 재생하기(+무한재생) (4) | 2020.06.02 |