HTML에서 Javascript 실행문들을 사용자가 특정한 event를 발생시켰을 때 호출되도록 작성한 실행문들의 집합.
function 식별자(매개변수) {
실행문; 반환문;}
함수의 기본적인 형태. 매개변수 / 반환문은 있는 유형도 없는 유형도 있으며 코드 작성자가 필요에 따라 정한다.
<button type="button" onclick="myAlert();">클릭</button>
<script>
function myAlert() {
alert("필요할 때마다 실행됩니다.");
}
</script>
myAlert() 함수가 버튼 클릭시 호출되어 alert 메시지를 실행하게 된다.
<button type="button" onclick="addNum(3, 5);">클릭</button>
<script>
function addNum(a, b) {
alert("두 수의 합: " + (a + b));
}
</script>
버튼을 클릭하면 addNum(3, 5); 실행문이 실행된다. function addNum(a, b) 에서 a, b는 매개변수, 3은 a라는 매개변수에, 5는 b라는 매개변수에 각각 전달되는 인수라고 한다.
<script>
function addNum2(a, b) {
var addResult = a + b;
return addResult; //반환문. 반환값은 변수, 계산식 또는 리터럴이 될 수 있다.
}
addNum2(3, 5); //함수 실행문. 아직 화면에 표시되지는 않는다.
document.write("addnum2(3,5): " + addNum2(3, 5)); //실행 결과를 화면에 표시한다.
</script>
<input type="number" id="inputNum1">
<input type="number" id="inputNum2"><br>
<button type="button" onclick="yourMainAdd();">클릭</button>
<script>
var inputNum1 = document.getElementById("inputNum1");
var inputNum2 = document.getElementById("inputNum2");
function yourAdd() {
var inputNum1 = Number(document.getElementById("inputNum1").value);
var inputNum2 = Number(document.getElementById("inputNum2").value);
//document.getElementById() 메서드로 가져온 input의 속성값은 String 타입이므로
//Number() 함수를 통해 number타입으로 변환한다.
return (inputNum1 + inputNum2);
}
function yourMainAdd() {
var yourResult = yourAdd();
console.log("실행결과: " + yourResult);
inputNum1.value = "";
inputNum2.value = "";
//실행결과를 표시한 뒤 input란에 입력된 내용을 지운다(빈 문자열로 대체한다).
}
</script>
각 input에 입력한 숫자를 버튼 클릭시 yourMainAdd() 함수를 호출하고 yourMainAdd() 함수 내부에서 yourAdd() 함수를 호출해 두 수를 더한 결과값을 반환받는다.
반환받은 값은 콘솔창을 통해 출력된다.