특정시점에 자바스크립트를 일괄수행하기 위해서는 함수가 필요하다.
자바 스크립트에서 함수 만들기! 어렵지 않다 코드를 보면서 이해해보자
<button onclick="clicked()">눌러보셈</button>
<br>
<img src="images/kim1.png">
<script>
function clicked(){
document.querySelector("img").setAttribute("src","images/kim2.png");
}
</script>함수를 사용하는 부분만 예제에서 가져왔다.
버튼을 누르면 사진이 바뀌는 예제이다.
먼저 함수를 정의해준다.
함수는 자바스크립트에서 정의해주어야하므로 <script></script>안에 정의한다.
함수를 선언할 때는 다른 언어와 비슷하다.
function 함수이름 (파라미터) {
// 함수 내용
}
함수를 정의해주었으면 함수를 호출해야한다!
버튼을 클릭할 때 함수를 호출하기 위해서는 onclicked를 사용해주면 된다.
예제는 document에서 img 쿼리를 찾아서 src속성을 kim2로 바꿔준다.
응용 버전으로 버튼 두개를 만들고 클릭하면 이미지가 변하게 만들어보자.
<!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>hello3.html</title>
</head>
<body>
<button onclick="clicked()">눌러보셈</button>
<button onclick="clicked2()">눌러보셈2</button>
<br>
<img src="images/kim1.png">
<script>
function clicked(){
document.querySelector("img").setAttribute("src","images/kim1.png");
}
</script>
<script>
function clicked2(){
document.querySelector("img").setAttribute("src","images/kim2.png");
}
</script>
</body>
</html>어렵지 않다. function을 두개를 만들어 하나는 kim1으로 바꾸고 하나는 kim2로 바꾸게 만들어주었다.
그리고 각각의 버튼에 호출해주었다.
이 예제는 버튼에 마우스를 올렸을 때 숫자가 올라가는 예제이다.
<!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>hello4.html</title>
</head>
<body>
<button onclick="clicked()">눌러보셈</button>
<button onmouseover="clicked()">마우스를 올리셈</button>
<p>0</p>
<script>
// 페이지 로딩시점에 num1 이라는 변수를 만들고 0을 대입하기
let num1 = 0;
//페이지 로딩 시점에 clicked 라는 이름의 함수 만들기
function clicked(){
// num1에 있는 값에 1을 더해서 다시 num1에 대입하기
num1 = num1 + 1;
// p 요소의 innerText에 num1에 있는 값을 넣어주기
document.querySelector("p").innerText = num1;
}
</script>
</body>
</html><script></script>안에 함수를 만들어준다. 이때 num1=0을 function안에 선언하면 버튼을 누를 때 마다 초기화가되기 때문에 밖에 선언해준다. 함수가 호출될때마다 num1이 1씩 더해지고 p를 찾아서 innerText에 num1을 대입한다.
'WEB' 카테고리의 다른 글
| [JavaScript] dataType / arrayType / splice() / push() / length (0) | 2021.10.08 |
|---|---|
| [JavaScript] 데이터 타입 / let / object / delete (0) | 2021.10.07 |
| [HTML] a / anchor / 하이퍼링크 / 책갈피 / 전화, 메일 화면 이동 (0) | 2021.10.07 |
| [HTML] form 폼 / 폼 요소 작성하기 / form, label, input (0) | 2021.10.07 |
| [CSS] border-collapse (collapse, separate) (0) | 2021.10.07 |
