새소식
반응형
Programming Language/JavaScript
[JavaScript] 자바스크립트 onclick
- -
반응형
자바스크립트 onclick
onclick은 JavaScript에서 HTML 요소에 사용되는 이벤트 속성 중 하나이다. 이 속성은 사용자가 해당 HTML 요소를 클릭할 때 실행되는 JavaScript 코드를 지정하는 데 사용된다.
onclick 함수를 사용하는 방법은 크게 3가지가 있다.
- 직접 함수 호출
- 익명 함수 사용
- 이벤트 핸들러 함수 등록
위의 3가지 방법에 대해 자세히 알아보는 시간을 가져보자.
직접 함수 호출
onclick을 사용하여 직접 함수를 호출하는 방법은 매우 간단하다. 아래의 해당 예제 코드를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct Function Call</title>
</head>
<body>
<button onclick="sayHello()">Click me</button>
<script>
// 클릭 시 호출될 함수
function sayHello() {
alert("Hello, world!");
}
</script>
</body>
</html>- <button> 요소에 onclick 속성을 추가하고, 속성 값으로 클릭 시 호출될 함수인 sayHello()를 지정한다.
- JavaScript 코드에서 sayHello() 함수를 정의하고, 이 함수는 클릭 시 "Hello, world!" 알림 창을 띄우도록 설정한다.
따라서 직접 함수 호출은 미리 정의해 놓은 함수를 요소의 onclick 속성의 값으로 설정하여 함수를 호출하는 방식이다.
이렇게 하면 해당 버튼을 클릭했을 때 sayHello() 함수가 직접 호출되어 원하는 동작을 수행하게 된다.
onclick 직접 함수 호출 방식의 또 다른 예제를 한 번 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct Function Call Example</title>
</head>
<body>
<button onclick="displayMessage()">Click me</button>
<script>
// 클릭 시 호출될 함수
function displayMessage() {
let userName = prompt("Please enter your name:");
if (userName) {
alert("Hello, " + userName + "!");
} else {
alert("Hello, anonymous!");
}
}
</script>
</body>
</html>- 첫 번째 예제와 마찬가지로 <button> 요소에 onclick 속성을 추가하고, 속성 값으로 클릭 시 호출될 함수인 displayMessage()를 지정한다.
- JavaScript 코드에서 displayMessage() 함수를 정의하고, 이 함수는 사용자에게 이름을 입력받은 후 해당 이름을 포함한 인사 메시지를 표현한다.
이 예제에서는 클릭 시 사용자에게 이름을 물어보고, 입력된 이름이 있으면 해당 이름과 함께 인사 메시지를 표시하며, 이름이 입력되지 않았을 경우 "Hello, anonymous!"를 표시한다.
익명 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anonymous Function Example</title>
</head>
<body>
<button onclick="function() { alert('Hello, world!'); }">Click me</button>
</body>
</html>- <button> 요소에 onclick 속성을 추가하고, 속성 값으로 익명 함수를 직접 작성한다.
- 익명 함수 내부에는 클릭 시 실행될 코드가 포함되어 있다. 이 예제에서는 alert('Hello, world!')가 실행된다.
이 방법은 간단한 기능을 수행할 때 함수를 별도로 정의하지 않고 직접 작성할 수 있어 편리하다. 하지만 코드가 길어지거나 재사용성이 필요한 경우에는 별도의 함수를 정의하는 것이 더 유용할 수 있다.
이벤트 핸들러 함수 등록
onclick 이벤트 핸들러 함수를 등록하는 방법은 JavaScript에서 이벤트를 처리하는 일반적인 방법 중 하나이다. 아래에서 해당 방법에 대한 간단한 설명과 예제 코드를 한 번 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Event Handler Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 이벤트 핸들러 함수 등록
document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
};
</script>
</body>
</html>- <button> 요소에 id를 부여하고, JavaScript에서 해당 요소를 가져온다.
- 가져온 요소에 onclick 속성을 설정하여 클릭 시 실행될 함수를 등록한다.
- 등록된 함수에서는 간단한 alert 함수를 사용하여 "Button clicked" 메시지를 출력한다.
또한, 함수 내에서 다른 함수를 호출하는 것도 가능하다. JavaScript에서는 함수가 함수를 호출하는 것이 일반적이고 자주 사용되는 패턴 중 하나이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Function Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 외부 함수
function outerFunction() {
alert("Outer function called!");
// 내부 함수 호출
innerFunction();
}
// 내부 함수
function innerFunction() {
alert("Inner function called!");
}
// 이벤트 핸들러 함수 등록
document.getElementById("myButton").onclick = function() {
// 외부 함수 호출
outerFunction();
};
</script>
</body>
</html>위의 예제에서는 버튼 클릭 시에 outerFunction이 호출되고, 그 안에서는 innerFunction이 호출된다. 함수 내에서 함수를 호출함으로써 코드를 모듈화 하고 재사용성을 높일 수 있다.
읽어주셔서 감사합니다.
728x90
반응형
Contents
소중한 공감 감사합니다