자바스크립트
웹 브라우저에서 사용하는 프로그래밍 언어이다.
'자바'와 이름이 비슷하지만 완전히 다른 프로그래밍 언어임 ..!!
- 웹 클라이언트 애플리케이션 개발
- 웹 서버 애플리케이션 개발
- 모바일 애플리케이션 개발
- 데스크톱 애플리케이션 개발
- 데이터베이스 관리
01 - 2
코드 실행 (1) : 구글 크롬 콘솔에서 실행하기
코드 실행 (2) : 파일 만들고 실행해 저장해보기 ✅기본숙제
<!DOCTYPE html>
<html>
<head>
<script>
alert('Hello World')
</script>
</head>
<body>
</body>
</html>
01 - 3 알아두어야 할 기본 용어
표현식과 문장
- 표현식
→ 값을 만들어내는 간단한 코드 - 문장
→ 하나 이상의 표현식이 모이면 문장이 된다. - 프로그램
→ 문장이 모여 프로그램을 이룬다.
키워드
→ 자바스크립으가 처음 만들어질 때 정햊놓은 특별한 의미가 있는 단어
→ await, class, const, continue, export, default 등 ..
식별자
→ 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어
→ 주로 변수명이나 함수명 등으로 사용된다.
✅ 지켜야할 규칙
- 키워드를 사용하면 안 된다.
- 숫자로 시작하면 안 된다.
- 특수 문자는 _와 $만 허용한다.
- 공백 문자를 포함할 수 없다.
✅ 식별자를 만드는 일반적인 관례
- 클래스의 이름은 항상 대문자로 시작한다.
- 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작한다.
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
✅ 식별자의 종류
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
주석
→ 프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않는다.
02 - 1 기본 자료형
- 자료 : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
- 자료형 : 자료 형태에 따라 나눠 놓은 것
→ 숫자, 문자열, 불 자료형이 가장 기본적이면서도 많이 사용하는 자료형이다.
문자열 자료형
→ 문자들의 집합
→ 문자가 하나든 여러 개든 모두 문자열 자료형이다.
✅ 문자열 만들기
- 큰따옴표 사용
- 작은 따옴표 사용
교재처럼 출력되진 않지만
통일되어 나타나는 것이 같은 의미임을 알 수 있다.
따옴표를 문자 그대로 사용할 때는 이스케이프 문자(\) 사용
일단 계속 가보자고요
- \n : 줄바꿈
- \t : 탭
- \\ : 역슬래시(\) 그 자체를 의미
✅ 문자열 연산자
📢 문자열도 기호를 사용해 연산 처리 할 수 있다 ~~~ → 문자열 연결 연산자
- 문자 선택 연산자 : 문자열 [숫자]
→ 이때 위치를 나타내는 숫자를 인덱스(index)라고 부른다.
✅ 문자열 길이 구하기
→ 문자열 길이 : 문자열 내부의 문자 개수
✅ 구문 오류
숫자 자료형
자바스크립트는 소숫점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식한다.
✅ 숫자 연산자
→ 숫자 자료형을 사용하면 숫자 연산자로 기본적인 사칙 연산을 할 수 있다.
→ 연산자 우선순위를 고려한다.
→ 나머지 연산자(%연산자)는 좌변을 우변으로 나눈 나머지를 출력하는 연산자이다.
불 자료형
✅ 불 만들기
→ 자바스크립트에서 참과 거짓 값을 표현할 때 불 자료형을 사용한다.
→ true / false
→ 비교 연산자를 사용해도 불을 만들 수 있다.
| 연산자 | 설명 |
| === | 양쪽이 같다. |
| !== | 양쪽이 다르다. |
| > | 왼쪽이 더 크다. |
| < | 오른쪽이 더 크다. |
| >= | 왼쪽이 더 크거나 같다. |
| <= | 오른쪽이 더 크거나 같다. |
✅ 불 부정 연산자
→ 논리 부정 연산자는 ! 기호를 사용하며 참을 거짓으로, 거짓을 참으로 바꾼다.
✅ 불 논리합/논리곱 연산자
| 연산자 | 설명 |
| && | 논리곱 연산자 |
| || | 논리합 연산자 |
→ && : 양쪽 변의 값이 모두 true일 때 true를 결과로 낸다.
→ || : 양쪽 변의 값 중 하나만 true여도 true를 결과로 낸다.
자료형 검사
→ 자바스크립트는 숫자, 문자열, 불 같은 자료형을 확인할 때는 typeof 연산자를 사용한다.
→ typeof 연산자도 논리 부정 연산자 (!), 플러스 (+), 마이너스 (-)처럼 피연산자를 1개만 갖는 단항 연산자이다.
typeof (자료)
뒤에 괄호가 없어도 상관없다
✅ 템플릿 문자열
백틱(`) 기호로 감싸 만든다.
문자열 내부에 `${}`기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산된다.
✅ == 연산자, !=연산자
===, !==연산자 : '값과 자료형이 같은지' 비교하는 연산자
==, != 연산자: '값이 같은지' 비교하는 연산자
3번) 빈 문자열은 false,
비어있는 배열 [ ]은 false로 변환된 뒤에 비교한다.
02 - 2 상수와 변수
상수
→ 어떠한 자료에 이름을 붙여서 사용하는 방법
→ 상수를 만드는 과정을 '선언'이라고 표현한다.
→ const 이름 = 값
변수
→ 변수 생성: let 이름 = 값
→ 변수의 값 변경 시 : 변수 = 값
변수에 적용할 수 있는 연산자
→ 변수는 복합 대입 연산자와 증감 연산자를 사용할 수 있습니다.
✅ 복합 대입 연산자
→ 대입 연산자와 다른 연산자를 함께 사용하는 연산자
| 복합 대입 연산자 | 설명 |
| += | 기존 변수의 값에 값을 더한다. |
| -= | 기존 변수의 값에 값을 뺀다. |
| *= | 기존 변수의 값에 값을 곱한다. |
| /= | 기존 변수의 값에 값을 나눈다. |
| %= | 기존 변수의 값에 나머지를 구한다. |
✅증감 연산자
→ 복합 대입 연산자를 약간 간략하게 사용한 형태
| 증감 연산자 | 설명 |
| 변수++ | 기존의 변수 값에 1을 더한다.(후위) |
| ++변수 | 기존의 변수 값에 1을 더한다(전위). |
| 변수 -- | 기존의 변수 값에 1을 뺀다(후위). |
| --변수 | 기존의 변수 값에 1을 뺀다(전위). |
alert 창 확인 버튼을 누르면 10 - 11 -12 연달아 나옴! (예 2, 3번)
alert창에 11-12-13 연달아 뜬다!
02 - 3 자료형 변환
문자열 입력
→ 문자열 자료형을 입력할 때 사용하는 함수는 prompt( )이다.
→ prompt( 메시지 문자열, 기본 입력 문자열 )
input에 저장된 문자열을 '안녕하세요'로 출력하게 되는 것.
→ 함수를 실행한 후 값을 남기는 것을 '리턴'이라고 표현한다.
불 입력
→ confirm( ) 함수 사용
→ confirm(메시지 문자열)
'확인' 클릭 시 : true 출력
'취소' 클릭 시: false 출력
숫자 자료형으로 변환하기
→ 다른 자료형을 숫자 자료형으로 변환할 때는 Number( )함수 사용
→ Number (자료)
✅ 숫자 연산자를 사용해 자료형으로 변환하기
→ Number()함수를 쓰지 않고도 다른 자료형을 숫자 자료형으로 변환하는 방법
→ 숫자 연산자 -, *, / 를 사용하는 것
문자열 자료형으로 변환하기
→ 다른 자료형을 문자열 자료형으로 변환할 때는 String ( ) 함수를 사용
→ String ( 자료 )
✅ 문자열 연산자를 사용해 자료형 변환하기
→ String() 함수를 사용하지 않고도 다른 자료형을 문자열 자료형으로 변환하는 방법
→ 문자열 연결 연산자 (+) 를 사용
불 자료형으로 변환하기
→ 다른 자료형을 불 자료형으로 변환할 때는 Boolean( )함수를 사용
→ Boolean(자료)
✅ 논리 부정 연산자를 사용해 자료형 변환하기
→ Boolean() 함수 사용 않고
→ 논리 부정 연산자 (!)를 사용해 변환
➕ inch를 cm 단위로 변경하기
굿 ..!
'혼공스(자바스크립트)' 카테고리의 다른 글
| [혼공스] 6주차 _ Chapter 07 ~ 08 (0) | 2024.08.20 |
|---|---|
| [혼공스] 5주차 _ Chapter 06 (0) | 2024.08.13 |
| [혼공스] 4주차 _ Chapter 05 (0) | 2024.07.29 |
| [혼공스] 3주차 _ Chapter 04 (0) | 2024.07.22 |
| [혼공스] 2주차_Chapter 03 (2) | 2024.07.14 |
