반응형
자바 스크립트란? (js)
- 웹페이지에 생동감을 불어넣기 위해 만들어진 언어!!!!!!
자바 스크립트로 할 수 있는 것?
1.웹의 요소 제어
• HTML, CSS로 처리할 수 없는 것들을 JS로 처리
2. 다양한 프레임워크, 라이브러리 사용
• React, Vue
3. 백엔드(서버) 개발
• Node JS ‒ Express JS
자바스크립트 사용 방법
html 내부
<script>
console.log("Hi");
</script>
html 외부
<!ㅡㅡ index.html ㅡㅡ>
<body>
<script src="test.js"></script>
</body>
// test.js
console.log("Hi");
자바스크립트 문법
실행문은 세미콜론(;)으로 구분
let str1 = "Hi";
let str2 = "World";
console.log(`${str1} ${str2}`);
let a = 1
let b = 2
(a + b).tostring()
주석
let a; //주석
let /* 여러줄
주석 */ b;
변수 선언
변수 이름 규칙
1. 예약어 사용 금지 (if, for 등)
2. 문자, _, $, 숫자 사용 가능
3. 숫자는 맨 앞 불가능
변수 스코프
JavaScript에서 변수 스코프는 변수가 유효한 범위를 나타냅니다. JavaScript의 변수 스코프는 두 가지 유형으로 나눌 수 있습니다:
- 지역 스코프 (Local Scope): 변수가 특정 함수 또는 블록 내에서 정의되었을 때 해당 함수 또는 블록 내에서만 유효합니다. 이는 보통 지역 변수라고 불리며, 해당 함수 또는 블록을 벗어나면 접근할 수 없습니다.
- 전역 스코프 (Global Scope): 변수가 함수 또는 블록 내부가 아닌 최상위 레벨에서 선언되었을 때 전역 스코프를 갖습니다. 이러한 변수들은 프로그램 전체에서 접근할 수 있습니다.
타입
JavaScript에서는 변수를 선언할 때 타입을 명시적으로 지정할 필요가 없으며, 변수에 어떤 종류의 데이터든 할당할 수 있습니다.
- 원시(기본) 타입(Primitive Types):
- 숫자(Number): 정수나 부동 소수점 숫자를 나타냅니다. 예를 들어, 5, 3.14 등이 있습니다.
- 문자열(String): 문자의 집합을 나타냅니다. 예를 들어, 'Hello', 'JavaScript' 등이 있습니다.
- 불린(Boolean): true 또는 false 값을 나타냅니다.
- undefined: 값이 할당되지 않은 상태를 나타냅니다.
- null: 값이 없음을 나타냅니다.
- 심볼(Symbol): 유일한 식별자를 생성하는 데 사용됩니다.
- 참조(Reference) 타입:
- 객체(Object): 키-값 쌍으로 구성된 속성의 모음입니다. 예를 들어, { name: 'John', age: 30 }과 같은 객체가 있습니다.
- 배열(Array): 순서가 있는 요소의 집합입니다. 예를 들어, [1, 2, 3]과 같은 배열이 있습니다.
- 함수(Function): 코드 블록을 나타내는 객체입니다. JavaScript에서 함수는 일급 객체로 취급되며 변수에 할당하거나 다른 함수에 전달할 수 있습니다.
연산자
- 산술 연산자:
- +: 덧셈을 수행합니다.
- -: 뺄셈을 수행합니다.
- *: 곱셈을 수행합니다.
- /: 나눗셈을 수행합니다.
- %: 나머지를 계산합니다.
- 할당 연산자:
- =: 변수에 값을 할당합니다. 예: x = 5;
- +=, -=, *=, /=, %= 등: 더하고, 빼고, 곱하고, 나누고, 나머지를 할당합니다. 예: x += 5; (x에 5를 더한 값을 할당)
- 비교 연산자:
- ==: 값이 같으면 참입니다.
- ===: 값과 타입이 모두 같으면 참입니다.
- !=: 값이 다르면 참입니다.
- !==: 값과 타입이 다르면 참입니다.
- >, <: 크기를 비교합니다.
- >=, <=: 크거나 같음, 작거나 같음을 비교합니다.
- 논리 연산자:
- &&: 논리 AND 연산자로, 모든 조건이 참일 때 참입니다.
- ||: 논리 OR 연산자로, 하나 이상의 조건이 참일 때 참입니다.
- !: 논리 NOT 연산자로, 조건의 반대를 반환합니다.
- 비트 연산자:
- &, |, ^, ~, <<, >>, >>> 등: 이진수 비트에 대한 연산을 수행합니다.
- 조건(삼항) 연산자:
- condition ? expr1 : expr2: 조건이 참이면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.
- 타입 연산자(Type Operators):
- typeof: 피연산자의 타입을 문자열로 반환합니다.
- instanceof: 객체가 특정 클래스(또는 생성자 함수)의 인스턴스인지 확인합니다.
- 문자열 연산자(String Operators):
- +: 문자열을 연결합니다.
- 쉼표 연산자(Comma Operator):
- ,: 연산자를 여러 개 사용할 때, 왼쪽에서 오른쪽으로 피연산자를 평가하고 마지막 피연산자의 값을 반환합니다.
조건문
if 문:
- 가장 기본적인 형태의 조건문입니다. 주어진 조건이 참이면 코드 블록을 실행합니다.
if (condition) {
// 조건이 참일 때 실행될 코드
} else {
// 조건이 거짓일 때 실행될 코드
}
if-else 문:
- 조건이 참일 때는 하나의 코드 블록을 실행하고, 거짓일 때는 다른 코드 블록을 실행합니다.
if (condition1) {
// condition1이 참일 때 실행될 코드
} else if (condition2) {
// condition1이 거짓이고, condition2가 참일 때 실행될 코드
} else {
// 모든 조건이 거짓일 때 실행될 코드
}
반복문
for 문:
- for 문은 주어진 iterable(반복 가능한 객체)의 각 요소에 대해 코드 블록을 실행합니다.
for item in iterable:
# 각 요소에 대해 실행될 코드
while 문:
- while 문은 주어진 조건이 참일 때 코드 블록을 실행하고, 조건이 거짓이 될 때까지 반복합니다.
- 주로 반복 횟수를 미리 알 수 없을 때 사용됩니다.
while condition:
# 조건이 참일 때 실행될 코드
함수
JavaScript에서 함수는 코드 블록을 하나의 단위로 그룹화하여 재사용 가능한 코드 조각을 만드는 데 사용됩니다.
function functionName(parameter1, parameter2, ...) {
// 함수가 실행될 코드
return result; // 선택적으로 결과를 반환할 수 있음
}
- function: 함수를 정의하기 위한 키워드입니다.
- functionName: 함수의 이름입니다. 이 이름을 사용하여 함수를 호출합니다.
- parameter1, parameter2, ...: 함수가 호출될 때 전달되는 값들을 받는 매개변수(parameter) 목록입니다. 매개변수는 선택적입니다.
- { ... }: 함수의 몸체(body)로, 함수가 실행될 코드 블록을 포함합니다.
- return: 함수가 결과 값을 반환할 때 사용됩니다. 선택적으로 사용할 수 있습니다.
반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 김민서 #4주차 (0) | 2024.05.15 |
|---|---|
| [2024 신입부원 기초 스터디] 김태일 #4주차 (0) | 2024.05.15 |
| [2024 신입부원 기초 스터디] 강보경 #3주차 (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 황수민 #3주차 (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 백채린 #3주차 (JS) (0) | 2024.05.13 |