728x90
JavaScript
이벤트를 처리하기 위해서 자바스크립트를 사용한다.
위치는 head 태그 안에 위치해 있거나 body태그 안에 위치해야한다.
html이 다 수행되고 스크립트가 수행되어야 하기 때문에
수행 순서가 스크립트가 아래에 있는게 더 추천한다.
* 스크립트를 아래로 두지만 스크립트가 body 태그 안에 있어야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id="hello"></h1>
<script type="text/javascript">
//JavaScript 구문
</script>
</body>
</html>
변수
변수의 자료형은 값이 할당될 때 자동으로 결정된다.
변수의 자료형 종류 : var, let, const
| 자료형 | 특징 |
| let | 자바의 지역변수와 같은 의미이다. 지역변수, 구역단위로 살아있다. 하지만 구역이 끝나면 사라진다. |
| var | 자바의 전역 변수와 같은 의미이다. 다른 구역에 있어도 같은 변수로 바라본다. 변수명이 동일한 변수를 같은 파일 안에 선언이 가능하지만 하나의 변수로 보고 값을 덮어버린다. |
| const | 재할당이 되지 않는 변수의 자료형이다. 새로운 값이 들어올 수 없으며 let과 같은 구역단위이다. 값이 한번 주어지면 절대 변하지 않는다. |
함수
어떤 기능을 구현해놓은 명령어들의 집합
함수의 사용방법은 "정의"와 "호출"의 두 부분으로 나뉜다.
호출한 함수는 반드시 호출한 곳으로 되돌아온다
함수를 사용하는 이유는 코드 중복을 방지하기 위함이다.
정의
function 함수이름(){
명령문;
}
자바의 public void 메소드명(){ } 과 같은 의미이다.
호출 : 함수이름();
재사용 가능 함수
function 함수이름(x, y) {
return x + y;
}
호출 : 함수이름(10,30);
매개변수 기본값 지정하기
function 함수이름(x, y = 6) {
return x + y;
}
함수 표현식
익명 함수, 즉시 실행 함수, 화살표 함수
익명 함수
이름 없는 함수를 말한다.
function (x, y) {
return x + y;
}
익명 함수 실행하기
let num = function (x, y) {
return x + y;
}
document.write(`함수 실행 결과 : ${num(10,20)}`);
즉시 실행 함수
(function(){
명령어;
});
화살표 함수
매개변수 없는 함수
const num = () => { return "안녕" };
중괄호 생략 가능하다.
const num = () => "안녕";
매개변수 있는 함수
const num = (x,y) => { return x+y };
const num = (x,y) => x+y ;
이벤트 처리
특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것
JavaScript를 사용하는 이유는 <body> 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위함이다.
종류
| 이벤트 종류 | |
| onBlur | 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때 |
| onClick | 링크, 이미지맵 영역, 폼 요소를 클릭되었을 때 |
| onFocus | 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때 |
| onLoad | 이미지, 문서, 프레임이 로드될 때 |
| onMouseOver | 태그의 요소 위로 마우스 커서가 들어갈 때 |
| onMouseOut | 태그의 요소 위에서 마우스 커서가 빠져나갈 때 |
document.querySelector(".outer").addEventListener('mouseover', (event) => {
document.querySelector(".desc").innerHTML += '<div>마우스올릴때</div>';
});
728x90
'프런트엔드 > JavaScript' 카테고리의 다른 글
| JS, 템플릿 리터럴 / 문자열 합치기(join) / 새창열기 / 새로고침 / 뒤로가기(history) / 확인창(confirm) (0) | 2024.08.23 |
|---|---|
| JS, 로또 당첨 숫자 뽑기(+ 보너스 숫자도 포함) (0) | 2024.08.22 |
| JS, 디데이(D-DAY) 계산하기 (0) | 2024.08.22 |
| JS, 숫자 입력 받아서 3의 배수인 숫자 찾기(+ 합) (0) | 2024.08.22 |
| JS, 객체 / 내장객체 (Array, Date, Math) (4) | 2024.08.22 |
