앱 만들기/JavaScript study

15강-2. 버튼 만들기 (함수 이용)

나도처음이야 2024. 7. 30.
반응형

 

 

15강. 버튼 만들기

14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. func

soo0100.tistory.com

 

지난 시간 onlick 속성에 alert() 함수를 사용해서 팝업을 띄웠다.

이번 시간에는 onclick 속성에 함수를 연결해 본다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼 만들기</title>
  <script>
    function popup(){
      alert('클릭되었습니다');
    }
  </script>
</head>
<body>
  <input type="button" value="클릭하세요" onclick="popup();">  
</body>
</html>

 

위와 같이 popup() 이라는 함수를 만든 후 onclick 속성에서 함수를 호출한다.

결과 동작은 15강 과 동일하게 팝업창이 잘 나온다.

함수를 연결하여 HTML요소의 동작요소를 처리 할 수 있다.

 

버튼 클릭시 함수호출 됨.

 

반응형

댓글