자바스크립트 함수 함수 정의 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것 변수에 저장할 수 있는 한가지 자료형 함수 구조 형식 : var {함수명}=function(){//저장할 코드 } 축약 형식 : function{함수명}(){//저장할 코드 } 함수 실행 : {함수명}()
var sayHello = function () {
console.log('Hello~');
}
sayHello();
// 같은 코드
function sayHello() {
console.log('Hello~');
}
함수에 값 전달하기 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음 매개변수 사용 함수 형식 : function{함수명}(값1,값2,…){} 값1,값2,…매개변수라고 함 코드 블럭 안에서 전달 받은 값 사용 가능 함수에 전달하는 값을 함수 인자라고 함
function square(x) {
console.log(x * x);
}
square(2);
square(0.1);
값을 반환하는 함수 함수의 실행 결과를 반환 함수 코드 블록 안에서 return{값} 형식 사용 반환된 값은 다른 표현식들과 같은 취급
function square(x) {
return x * x;
}
var vaule = square(4);
함수를 인자로 전달받는 함수 함수의 인자로 함수명을 전달 함수 내부에서 전달받은 함수를 실행 ex) setInterval(tick, 1000);
function operator(x, y, func) {
return func(x, y);
}
function add(a, b) { return a+b; }
function substract(a, b) { return a-b; }
console.log(operator(4, 2, add));
console.log(operator(4, 2, substract));
<script>
var element = document.getElementById("text");
setTimeout(function() {
element.innerText = '삭제됨';
}, 3000);
</script>
배열 객체의 함수 CRUD HTTP 메서드 URI 책들의 목록을 표시 GET /books 책 한권의 정보를 표시 GET /books/{id} 새 책을 생성 POST /books 책을 수정 PUT /books/{id} 책을 삭제 DELETE /books/{id}
var balls = ['축구공', '야구공', '배구공', '농구공'];
balls.forEach(throwBall);
function throwBall(ball) {
console.log(ball + '을(를) 던졌습니다.')
};
var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index) {
return value*2;
});
console.log(twice);
var even = numbers.filter(function(value, index) {
return value % 2 == 0;
});
console.log(even);
이벤트 자바스크립트 이벤트
사용자의 입력을 처리 HTML태그 마다 다양한 이벤트가 발생됨 click, focus, blur 등이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음 이벤트 처리기 등록
자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출 형식 : addEventListner(이벤트이름, 실행할 함수)첫 번째 인자-이벤트의 이름 두 번째 인자-이벤트가 발생했을 때 실행할 함수 Click이벤트
HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음
var button = document.getElementById("button");
var element = document.getElementById("count");
var count = 0;
button.addEventListener('click', function() {
count++;
element.innerText = count + '회 클릭';
});