[JavaScript] 함수 호출 기능
2024. 4. 27. 23:17ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 함수(Function) ]
- 혼자서 특정 기능을 처리하도록 구성된 코드 덩어리로, 원할 때 실행 가능
- 화면에서 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요
[ Event Binding/Handling ]
- 미리 작성해둔 JavaScript 함수를 태그의 특정 상황에 연결 지음
- 예) onclick : 클릭했을 때, oninput : 입력했을 때

(+) 콘솔 내에서도 hello(); 함수를 호출할 수 있다!
[ 주요 코드 ]
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
function hello() {
console.log("안녕");
}
//hello(); //호출 함수(call)
function sum(){
var total = 0;
for(var i=1; i<=100; i++) {
total += i;
}
console.log(total);
}
function seven(){
var count = 0;//카운트 측정을 위한 변수를 선언
for(var i=1; i<=100; i++) {//1
if(i % 7 == 0) {//2
count++;
}
}
console.log("7의 배수 개수 = " + count);//최종 결과 확인
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>자바스크립트 함수</h1>
</div>
<div class="cell">
<button onclick="hello();">안녕</button>
</div>
<div class="cell">
<h2 onclick="hello();">안녕</h2>
</div>
<!-- 다음 글자를 누르면 콘솔 화면에 결과가 나오도록 함수와 호출 구현 -->
<div class="cell">
<p onclick="sum();">1부터 100까지 합계는?</p>
</div>
<div class="cell">
<span onclick="seven();">1부터 100사이의 7의 배수 개수는?</span>
</div>
</div>
</body>
</html>
(+) 버튼을 누르면 콘솔 화면에 결과가 나오도록 function()을 설정해주고, onclick() 속성을 활용하여 사용자가 클릭했을 경우 해당 함수가 호출되도록 구현.
(+) 함수 호출은 스크립트 내에서도 가능하다 (이를 활용하여 함수 내에서 다른 함수를 가져올 수 있다. 확장성!)
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
/*
함수(function)
- 혼자서 특정 기능을 처리하도록 구성된 코드 덩어리
- 원할 때 실행할 수 있어야 한다
- 화면에서의 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요
*/
function hello() {
console.log("안녕");
}
//hello(); //호출 함수(call)
function sum(){
var total = 0;
for(var i=1; i<=100; i++) {
total += i;
}
console.log(total);
}
function seven(){
var count = 0;//카운트 측정을 위한 변수를 선언
for(var i=1; i<=100; i++) {//1
if(i % 7 == 0) {//2
count++;
}
}
console.log("7의 배수 개수 = " + count);//최종 결과 확인
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>자바스크립트 함수</h1>
</div>
<!--
미리 작성해둔 Javascript 함수를 태그의 특정 상황에 연결(event binding/handling)
- onclick은 클릭했을 때
- oninput은 입력했을 때
-->
<div class="cell">
<button onclick="hello();">안녕</button>
</div>
<div class="cell">
<h2 onclick="hello();">안녕</h2>
</div>
<!-- 다음 글자를 누르면 콘솔 화면에 결과가 나오도록 함수와 호출 구현 -->
<div class="cell">
<p onclick="sum();">1부터 100까지 합계는?</p>
</div>
<div class="cell">
<span onclick="seven();">1부터 100사이의 7의 배수 개수는?</span>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
[ JavaScript ] 전화 키패드 만들어 보기 (태그 제어 이해) (0) | 2024.04.30 |
---|---|
[ JavaScript ] 태그 제어 (0) | 2024.04.29 |
[ JavaScript ] 조건문과 반복문 (0) | 2024.04.26 |
[ JavaScript ] 변수 생성 및 데이터 정리 (0) | 2024.04.25 |
[ JS / ajax ] 첨부파일 이미지에 대한 정보를 통해 이미지를 불러오기 (0) | 2024.03.07 |