SMALL
함수
- 프로그램내에서 특정작업을 수행하기 위해 독립적으로 만들어진 하나의 단위
-어떤 목적을 위해 만들어진 코드를 하나로 묶어 반복되는 작업을 효율적으로 관리하기 위한 구조
- 주어진 입력에 의해 처리를 한 후 결과를 돌려주는 구조
---내장함수 (자바스크립트에 미리 만들어진 함수)
log()
alert()
getElementById()
--- 사용자함수 (사용자가 필요에 의해 정의하고 저장하여 사용하는 함수)
함수의 정의
함수는 예약어인 function()으로 정의하고
함수의 시작과 끝은 {}로 표현합니다.
--- 함수호출 사용
함수정의 --- 함수 호출 사용
1. 선언적 함수
function 함수이름() {
실행코드;
}
호출
함수이름(); -> 함수에 들어있는 코드를 실행...
2.익명함수 선언 (함수의 변수화)
-익명함수 / 함수 리터럴 / 함수의 변수화
let 변수명 = function() {
실행코드;
}
함수호출사용
변수명()
3. 매개변수와 인자(인수)값 사용
매개변수 = parameters
인자값 = arguments
function test(변수) {
console.log(변수 변할수있는값);
}
tset(값);
a = 매개변수 ( parameters )
10 = 매개변수에 입력되는 값, 인수, 인자값 (arguments)
function tset(a) {
console.log(a);
}
test(10);
-매개변수 2개이상 사용하기
function 함수이름(num1,num2) {
console.log(num1+num2);
}
함수이름(10,20)
num1 = 10
num2 = 20
//NaN = Not a number
//숫자와 숫자이외의 데이터를 연산하려고 시도했을때 NaN
//잘못된 수학연산의 결과값
///이벤트
1. click / mouseover / mouseout
mousedown / mouseup / mousemove
contextmenu (우클릭)
2. keyboard
keydown /keyup / keypress
3. form
focus / blur / change / submit / reset / select
4. document
load / unload / abort
5. wiwdow
scroll / resize
//이벤트 사용법
1. 인라인 이벤트
(html코드에 직접 작성) -> 보안상의 이유로 권장X
2. object.on이벤트명
object이벤트명 = function() {
실행코드
}
초보자용 / 옛날방식
--> 이벤트 하나만 연결 가능.
3. 이벤트리스너 사용하기(권장)
--> 이벤트 여러개 연결 가능.
object.addEventLister('이벤트명', function(){
실행코드;
});
이벤트 프로세스
-- Event Trigger 이벤트 트리거
이벤트를 발생시켜주는 요소
마우스, 문서, 창
클릭, 로딩 ,스크롤
--Event Trigger 이벤트 트리거
--Evnet addEventLister , Event Handler 이벤트 리스너, 이벤트 핸들러
[자바스크립트 함수선언]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
//선언적 함수
function test() {
console.log('함수선언 테스트')
}
//함수호출
test();
//익명함수 선언, 함수의 변수화
let test1 = function() {
console.log('익명함수 테스트')
}
console.log(test1);
test1();
//매개변수와 인자값 사용하기
function test2(a) {
console.log(a);
}
test2(10);
//매개변수를 활용한 덧셈 계산기 만들기
function sum(num1, num2){
console.log(num1 + num2);
}
sum (111,222);
let num = 1+1;
console.log(num);
let num3 = 1 + 'hello world';
console.log(num3);
</script>
</body>
</html>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 (0) | 2023.03.31 |
|---|---|
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(2) 이벤트사용하기 (0) | 2023.03.31 |
| 자바스크립트 javascript 2. 변수,배열오브젝트,연산자,if 조건문,for 반복문DOM(2) 반복문 , list요소 가져오기 (0) | 2023.03.31 |
| 자바스크립트 javascript 2. 변수,배열오브젝트,연산자,if 조건문,for 반복문DOM(1) (0) | 2023.03.31 |
| 자바스크립트 javascript 1. 변수선언과 스타일변경 (0) | 2023.03.31 |
댓글