[2022/02/10]국비지원 javascript 4-(2) function();

함수 : 실행문을 메모리에 저장했다가 필요할 때 함수 이름으로 소환

내장 함수
사용자 정의 함수
지역변수
전역 변수

수식 일반

function 함수명(매개변수1, 매개변수2){
	실행문;
}
함수명(인자값1, 인자값2);

비교 1 : 탭 새로고침 > 인사 띄우기

function greet1() {
	alert("Hello World");
}
greet1();

결과

비교 2 : 버튼 click > 인사 띄우기 : html + js

<!DOCTYPE html>
<html lang="ko">
<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>function 인사 띄우기</title>
</head>
<body>
  <button onclick="greet('Hello')">들어오기</button>
  <button onclick="greet('bye~')">나가기</button>
</body>

function greet(theText) {
	alert(theText);
}

1과 달리 2에서는 따로 function을 소환하는 greet(); 을 해줄 필요가 없는 이유
button.onclick = "greet( 'Hello / bye~' )"
- function greet(theText){ }에서 theText는 onclick실행에서 Hello와 bye~ 로 각각 정의가 내려졌고,
  다시 여기에서 function name인 greet가 onclick실행에서 greet의 Hello / greet의 bye~라고 이름을
  정확히 찍어줬기 때문에 js에서 따로 함수 실행을 위한 greet();을 꽂아 줄 필요가 없음

결과

예제 1. 이미지 1장 슬라이드 - a링크를 button처럼 = html + js

( 우리 강사는 동 url에서 url변경 또는 /xxx 같은 추가사항 없이 기능만 하는 button도 a를 주로 이용함 )

<!DOCTYPE html>
<html lang="ko">
<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>이미지 넘기기</title>
</head>
<body>
  <div id="gallerywrap">
    <h1>이미지 넘기기</h1>
    <div>
      <a href="#" onclick="prevGallery();"><img src="images/left_btn-31.png" alt="이전 그림버튼"></a>
      <img src="images/img1-31.jpg" alt="새" id="gallery">
      <a href="#" onclick="nextGallery();"><img src="images/right_btn-31.png" alt="다음 그림버튼"></a>
    </div>
    <div>
      <button onclick="prevPic();"><img src="images/left_btn-31.png" alt="이전"></button>
      <img src="images/img1-22.jpg" alt="" id="pic">
      <button onclick="nextPic();"><img src="images/right_btn-31.png" alt="다음"></button>
    </div>
  </div>

a링크 버튼 ( 역순 )

var num = 1
    function nextGallery() {
      if ( num < 7 ) num++;
      document.getElementById("gallery").src="images/img" + num + "-31.jpg";
      return false;
    }
    function prevGallery(){
      if ( num > 1 ) num--;
      document.getElementById("gallery").src="images/img" + num + "-31.jpg";
    }

button ( 같은 수식이지만 정순. 이미지와 function name을 다르게 설정해서 안 헷갈리게 함 )

var num = 1
    function prevPic() {
      if ( num > 1 ) num--;
      document.getElementById("pic").src="images/img" + num + "-22.jpg";
    }
    function nextPic() {
      if ( num < 7 ) num++;
      document.getElementById("pic").src="images/img" + num + "-22.jpg";
      return false;
    }

img 이름이 1-31, 2-31,... / 1-22, 2-22,...로 지정되어 있는 파일을 이용함
return : 함수 호출 때의 값을 반환
여기에서는 a와 button이 동일 기능이므로 동일 수식
return false; : 다음 실행문을 수행하지 않고 마침

위의 예제에서는 return false;가 필요 없는데,

prev~ 에서는 num = 1일 때, 1보다 큰 수 ( num > 1 )에서 1씩 빼면서 ( num--; ) 이전 이미지로 넘기도록 조건을 걸고,
next~ 에서는 num = 1일 때, 7보다 작은 수 ( num < 7 )에서 1씩 더하면서 ( num++; ) 다음 이미지로 넘기도록 조건을 걸었기 때문에 1과 7 사이에서만 이미지가 결정되므로 무한 반복될 수 없음

예제 2. 합산 / 곱

var num1 = 10;
    function theFnc(num2){
	var sum = num1 + num2;
	var mu1 = num1 * num2;
	return sum;
    }
var result = theFnc(30);
    document.write(result);

var result = function theFnc( num2 )에서 num2를 30이라고 정의한 상태
function theFnc(num2)는 각각 sum과 mu1을 도출할 수 있도록 되어 있는데,
이때 return sum; return mu1;를 입력해서 마! 둘 다 내놔!라고 한들 수식이 하나뿐이기 때문에
둘 중 먼저 입력된 return 명령만 불러올 수 있음
여기서 var result = theFnc(30);을 쓰지 않고 document.write(theFnc(30));으로도 직접 값을 출력할 수 있음

※ 주의할 점 ※

document.write();는 쓰지 않도록
: 브라우저 개발자 툴의 console 항목의 log창에서 [Violation] AVOID using document.write()라고 옐로카드 뱉음
그런 의미에서 결과물 출력해보고 싶을 땐 console.log(); 를 쓰는 게 낫다.

저작자표시 비영리 변경금지 (새창열림)

비교 1 : 탭 새로고침 > 인사 띄우기

비교 2 : 버튼 click > 인사 띄우기 : html + js

예제 1. 이미지 1장 슬라이드 - a링크를 button처럼 = html + js

예제 2. 합산 / 곱

티스토리툴바