14강. HTML요소 클릭시 동작하도록 만들기.
13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. function 함수이름(){ 자바스크립트 구문}
soo0100.tistory.com
지난 시간 HTML 요소를 클릭 시 동작하는 onclick 속성에 대해서 다루어 보았다.
이번 시간은 한걸음 더 나아가 버튼을 만들고 버튼을 선택하면 어떤 액션을 수행하는 코드를 작성해 본다.
웹 페이지 또는 웹 게임을 만들더라도
버튼 클릭 시 동작을 하는 것이 프로그래밍의 기본이 된다.
1. 버튼 만들기
버튼을 만들기 위해서, 버튼 태그를 사용할 수도 있으나 여기서는 input 태그를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 만들기</title>
</head>
<body>
<input type="button" value="클릭하세요">
</body>
</html>
input 태그 속성으로 type과 value를 사용했다.
type = HTML 요소 중 button 을 코딩한다. 그러면 버튼이 만들어진다.
input 즉, 입력받을 수 있는 html 요소들을 적으면 된다. 일일이 다 외울 필요는 없다.
나올 때마다 하나씩 코딩해 보면 익히는 것이 좋다.
value = 버튼에 보여질 텍스트이다. 알맞은 텍스트를 코딩한다.
브라우저에서 실행해보면,
단순하지만 짧은 코드 한줄로 버튼이 만들어졌다.
2. 버튼 동작 시키기
지금은, 버튼을 클릭 시 아무런 동작을 하지 않는다.
당연히 onclick 속성을 코딩하지 않았기 때문이다. 인풋이 없으면 아웃풋도 없다. 세상의 단순 오묘한 이치와 맞닿아 있다.
<body>
<input type="button" value="클릭하세요" onclick="alert('클릭되었습니다');">
</body>
onclick 속성에 팝업창을 띄우는 빌트인 함수를 호출한다.
이제 버튼을 클릭하면 팝업창이 뜬다.
onclick 에는 직접 만든 함수를 연결할 수 도 있다.
15강-2. 버튼 만들기 (함수 이용)
15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는
soo0100.tistory.com
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 16강. 웹 페이지를 동적으로 만들기 (1) | 2024.08.03 |
|---|---|
| 15강-2. 버튼 만들기 (함수 이용) (1) | 2024.07.30 |
| 14강. HTML요소 클릭시 동작하도록 만들기. (1) | 2024.07.11 |
| 13강. 자바스크립트 함수 사용법 (1) | 2024.07.08 |
| 12강. 자바스크립트 if 조건문 사용방법 (0) | 2024.07.06 |
댓글