JavaScript 기본
동적인 웹을 위해 자바스크립트가 할 수 있는 것들
1. 데이터를 저장
저장 공간 : var,let,const
저장할 값의 형태 : 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
코드의 뭉치 : 함수
2. 값을 계산
- 사칙 연산, 논리 연산, 조건문, 반복문, 자료형의 내장함수
3. 결과를 반영
- DOM, BOM API
4. 다른 컴퓨터와 통신하다.
- Ajax
JavaScript를 사용하는 여러가지 방법들
1. HTML 파일 내부 삽입
1) HTML 태그 내 삽입
<button onclick="window.alert('hello world');">hel
lo</button>
2) script 태그를 통해 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<script>
window.alert('hello world!');
</script>
</body>
</html>
2. HTML 파일 외부에 있는 스크립트 파일을 로드
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
3. 브라우저 콘솔창
변수
- 변수는 선언하고, 할당하고, 사용할 수 있다.
- 또한, 변수는 '변할 수 있는 수'이므로 const를 제외하고 지정된 값을 계속 바꿀 수 있다.
var x = 3;
let y = 4;
const z = 5;<!DOCTYPE html>
<html>
<head>
<title>변수</title>
</head>
<body>
<script>
let 나변수 = 10; //1번
나변수 = 20; // 2번
나변수 = 30; // 3번
</script>
</body>
</html>
변수의 특징
- 변수를 선언 할 때는 var, let, const의 키워드를 사용 가능
- var,let 두 가지 키워드는 변수를, const 키워드는 상수를 의미
- var 키워드는 초기화가 필요 없고 재할당이 가능
- var 키워드는 생략이 가능하다 var 키워드가 생략된 변수는 strict mode에서는 에러가 발생하므로 권장하지 않음
- let, const는 블록-레벨 선언으로 불리며, 선언된 코드 블록 밖에서 접근할 수 없으며 재정의가 불가능하다.
cost의 경우 반드시 초기화가 필요
'use strict'; // 자바스크립트를 엄격모드에서 실행
valueA = 1;
const my_name ="WADE";
if(true){ // -- 코드블록의 시작입니다. -- //
let valueB = 'Hello!';
const my_name ="WADE"; // 코드블록 밖의 my_name과 별
개의 상수입니다.
} // -- 코드블록의 끝입니다. -- //
valueB = 'nice to meet you!'; // 변수 정의 이전에 값을 할당 할
수 없습니다!
let valueB = 'Hi!'; // 코드블록 안의 valueB와 별개의
변수입니다.
함수
함수 구조
function 함수이름(파라미터1, 파라미터 2...) {//함수의 선언
//실행코드...
return 반환값
}
함수이름(인수1, 인수2..) //함수의 호출
매개변수와 전달인자
| 용어 | 번역 | 의미 |
| Parameter | 매개변수 | 함수와 메서드에 입력 변수 이름 |
| Argument | 전달 인자, 인자, 인수 | 함수와 메서드에 실제 입력되는 값 |
함수의 아규먼트에 따른 반환값
- 인자는 매개변수보다 적거나 많아도 에러가 발생하지 않는다.
함수를 선언하는 여러가지 방법
1) 함수 선언문과 함수 표현식
- 함수는 function + 제목 () + {}의 조합인 구문(statement)로 선언할 수 있고, 제목 없이 선언하여 값으로 할당하는 표현식(Expression)으로 선언하는 것도 가능하다
//함수 선언문
function sum(x, y) {
return x + y;
}
//함수 표현식
let sumXY = function (x, y) {
return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));
2) 화살표 함수
- 함수를 선언 시 function 키워드를 화살표 기호로 대체하여 표현할 수 있다. 화살표 함수는 선언 시 제목을 정할 수 없기 때문에 표현식으로 사용해야 한다.
function add(x, y) {
return x + y;
}
//화살표 함수
let add1 = (x, y) => x + y;
//함수 실행시 전달하는 인자가 한 개라면 소괄호 생략 가능
let add2 = (x) => x + 10;
//화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드 생략 가능
let add3 = (x) => x + 10;
let result = add3(2);
console.log(result); //12
3) 즉시실행함수(IIFE, Immediately Invoked Function Expression)
- 함수를 정의함과 동시에 즉시 실행하는 방법
- 즉시실행함수는 코드를 캡슐화하여 모듈화된 코드를 작성할 수 있게 함
'기타 > 글로컬청년취업사관학교' 카테고리의 다른 글
| [글로컬청년취업사관학교][TIL] 240702 (0) | 2024.07.03 |
|---|---|
| [글로컬청년취업사관학교][TIL] 240701 (0) | 2024.07.02 |
| [글로벌청년취업사관학교][TIL] 240627 (0) | 2024.06.27 |
| [TIL] 240626 (0) | 2024.06.26 |
| [TIL] 240625 (0) | 2024.06.25 |
