반응형
1.자바스크립트 특징
- 프로그래밍 언어 : 사이트에 기능을 넣어줌
- 인터프리터 언어(코딩 한 결과를 사용자에게 건네주기 전에 포장하거나 가공하는 과정, 즉 컴파일 과정을 거치지 않는 언어)
- 개발과정이 빠르고 유연
- 버그가 덜 걸러짐
- 실행이 조금은 느림
- 동적 자료형
- 코딩의 자유로움 ex) 숫자를 저장한 변수의 값을 문자열, 불리언, 객체나 배열, 함수로 바꾸기 가능
* 자바 스크립트 실습 환경 세팅
개발자 도구 열기
- 윈도우 : Ctrl + Shift + i
- 맥 : Command + Option + i
콘솔 내용 클리어
- 윈도우, 맥 : Ctrl + l
2. 콘솔과 주석
- 콘솔
console.log('출력할 값');
- 괄호 안에 출력할 값 입력 ( 타 언어의 print 와 같은 역할 )
- 개발자를 위한 메세지 출력
- 다양한 데이터 출력 가능
- 주석
console.log('Hello');
// 컴퓨터야, 너한테 하는 말이 아니야.
console.log('World');
- 컴퓨터가 무시하는 메세지 ( 코드를 읽는 사람들을 위한 메세지 )
- 윈도우 Ctrl + /
- 맥 Command + /
console.log(true); // 코드의 오른쪽에도 달 수 있음
// console.log(false);
- 코드 비활성화
/*
여러 줄의 주석을
작성하는 방법입니다.
하지만 이 방법보다는...
*/
- 여러 줄의 주석 작성 가능
3. 변수와 상수에 데이터 담기
-데이터를 변수/상수 라는 주머니에 넣는 것
let darkModeOn = true;
const PI = 3.1415926535;
- 데이터에 의미부여
- 한 데이터가 여러곳에 사용될 때
- 수정이 동일하게 적용되어야 할 때
- 고정된 값이 사용되어야 할 때
- let, const
- let : 변수 (넣은 데이터를 바꿀 수 있음)
- const : 상수 (넣은 데이터를 바꿀 수 없음)
- 식별자 명명 규칙
- 영문, 유니코드글자, 숫자 사용 가능
- 특수문자 ( $, _ )
- 숫자로 시작 X
- 공백, 예약어 X
4. 기본 자료형들과 연산자
-자료형 ( 프로그램에서 사용되는 데이터의 종류 )
- boolean : 참, 거짓 여부
- number : 숫자 ( 정수, 실수 용량 구분 X )
- string : 문자열
- undefined : 아직 값 지정 X / 데이터가 나올 자리 X
- null : 비어있다고 지정
-연산자
- ! : 뒤에 오는 불리언의 반댓값을 반환
- typeof : 해당 데이터의 자료형 반환
-비교 연산자
- == : 자료형에 관계없이 같은 값 ( != 반대 )
- === : 자료형, 값 같음 ( !== 반대 )
- > >= < <= : 크다 작다 크거나같다 작거나 같다
1 == '1'; // true
1 === '1'; // false
- 부수효과 연산자
- ~++ / ++~ ( -- ) : 값을 증가시킴
- ~++ : 값을 증가시키지 않은 채로 사용
- ++~ : 값을 증가시킨 채로 사용
let num1 = 1;
console.log(num1++); // 이때는 아직 1
console.log(num1); // 이제 2로 출력
console.log(++num1) // 바로 3으로
- 할당 산술 연산자
연산자 | 의미 |
x += y | x = x + y |
x -= y | x = x - y |
x *= y | x = x * y |
x /= y | x = x / y |
x %= y | x = x % y |
x **= y | x = x ** y |
- boolean 관련 연산자
- && : AND 양쪽이 모두 true 일 때만 true
- || : OR 한쪽만 true 면 true
console.log(
true && true,
true && false,
false && true,
false && false,
);
// true false false false false
console.log(
true || true,
true || false,
false || true,
false || false,
);
// true true true false
- 삼항 연산자
- (조건) ? ( 참일 시 값 ) : ( 거짓일 시 값 )
5. 객체와 배열
- 객체
- 데이터의 묶음 ( 키 : 값 의 조합 , property 라 부름 )
- 자료형 이외의 모든 데이터는 객체
- 값들에 접근하는 방법
console.log(
person1.name, // . 뒤에 키 이름 (식별자 명명 규칙에 맞을 시)
person1['name'] // [] 안에 키 이름을 문자열로
);
- 배열
- 다수의 데이터 저장
- 근본적으로 객체
6. if / else ( 조건에 따라서 실행할지 말지 결정 )
// open = !open;
if (open) {
console.log('안녕하세요.');
console.log('자리로 안내하겠습니다.');
} else {
console.log('영업종료되었습니다. 죄송합니다.');
}
- if 조건 이외는 else로 실행
- if안에 if를 또 넣은 중첩해서 사용 가능
- if ... else if
const a = 1;
const b = 2;
if (a < b) {
console.log('a가 b보다 작다.'); // {}는 블럭이라 하고 블럭으로 감싸야함
} else if (a > b) {
console.log('a가 b보다 크다.');
} else {
console.log('a와 b는 같다.');
}
- else if 여러번 사용 가능
7. swith
- 특정 변수/상수의 값 또는 변환값에 따라 작업을 실행할 때
- if - true 인지 false 인지 구분 후 실행, but swith는 숫자든 문자열이든 상관 X
const firePower = 1;
switch (firePower) {
case 1:
console.log('레어');
break; //break 없으면 시작부분부터 밑으로 쭉 다 나옴
case 2:
console.log('미디움');
break;
case 3:
console.log('웰던');
break;
default:
console.log('오류'); //default가 끝이니 break 안 적어도 됨
}
반응형
'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글
[2024 JS 심화 프론트 스터디] 정호용 #2주차 "JS 나머지" (0) | 2024.05.05 |
---|---|
[2024 JS 심화 프론트 스터디] 정호용 #1주차 "JS 첫주차" (0) | 2024.04.09 |
[2024 JS 심화 프론트 스터디] 김지나 #1주차 "JS" (0) | 2024.04.08 |
[2024 JS 심화 프론트 스터디] 박지민 #1주차 "JS" (1) | 2024.04.08 |
[2024 JS 심화 프론트 스터디] 한승훈 #1주차 (0) | 2024.04.07 |