티스토리 뷰
지난 기수에 신청하려다 기한을 놓쳐 아쉬웠던 혼공단을 이번에는 빠르게 신청했고 선정될 수 있었다!
기대하던 시간이니만큼 끝까지 열심히 자바스크립트를 공부해보겠다 😀"
자바스크립트는 공부해 본 적이 아예 없어서
이번 13기 혼공단 시간이 매우 유익하고 도움이 되는 시간이었으면 좋겠다...!!!
Chapter 01.
1. 자바스크립트란?
자바스크립트는 웹 브라우저에서 사용하는 프로그래밍 언어입니다. 비슷한 이름 때문에 자바와 같은 언어로 오해하기 쉽지만, 실제로는 완전히 다른 프로그래밍 언어입니다. (저도 처음엔 비슷한 언어인 줄 알았어요! 😆)
자바스크립트는 다양한 분야에서 활용됩니다:
- 웹 클라이언트 애플리케이션 개발
- 웹 서버 애플리케이션 개발
- 모바일 애플리케이션 개발
- 데스크톱 애플리케이션 개발
- 데이터베이스 관리
2. 모바일 애플리케이션 종류
① 네이티브 앱
- 특정 플랫폼(Android, iOS 등)에서 실행되도록 각 플랫폼의 고유 언어와 도구를 사용하여 개발된 애플리케이션입니다.
② 하이브리드 앱
- 네이티브 앱과 웹 앱의 특징을 결합한 유형입니다.
- 한 번의 개발로 다양한 플랫폼(Android, iOS 등)에서 실행할 수 있어 개발 효율성과 비용 절감에 유리합니다.
- 예: 쿠팡, 위메프 등 쇼핑 애플리케이션
- 특징: 모바일 사이트와 동일한 기능을 제공하면서도 스마트폰 고유의 모습도 구현할 수 있습니다.
참고: 네이티브와 하이브리드는 완전히 독립된 개념이 아니며, 함께 사용될 수도 있습니다.
3. 개발환경 설치와 코드 실행
개발환경은 텍스트 에디터(코드작성)와 코드 실행기(웹 브라우저)가 필요!!
이 책에서는 텍스트 에디터로 비주얼 스튜디오 코드를 사용하고, 코드 실행기는 구글 크롬이라는 웹 브라우저를 사용한다.
비주얼 스튜디오 코드 설치 후 코드를 실행해보자.
<기본숙제>
html 파일을 먼저 만든 후에
아래와 같은 코드를 작성하고
페이지를 실행해보면 아래와 같이 출력된다.
4. 알아두어야 할 기본 용어
1. 표현식, 문장, 프로그램
- 표현식: 값을 만들어 내는 간단한 코드
- 문장: 하나 이상의 표현식이 모인 코드 단위. 문장 끝에는 세미콜론(;) 또는 줄바꿈으로 종결을 표시
- 프로그램: 여러 문장이 모여 이루어진 코드 집합
2. 키워드
자바스크립트가 미리 정의한 특별한 의미를 가진 단어들로, 개발자가 임의로 사용할 수 없습니다.
- 예: await, break, case, catch, class, const, continue 등
3. 식별자
프로그래밍에서 이름을 붙일 때 사용하는 단어로, 주로 변수명, 함수명 등에 사용됩니다.
식별자 작성 규칙
- 키워드는 사용할 수 없음
- 숫자로 시작할 수 없음
- 특수문자는 _(밑줄)와 $만 허용
- 공백 문자를 포함할 수 없음
일반적인 관례
- 클래스 이름은 항상 대문자로 시작!
- 변수, 인스턴스, 함수, 메소드 이름은 항상 소문자로 시작!
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 표기
- 예: myVariable, MyClassName
식별자의 종류
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
4. 주석
프로그램 코드를 설명할 때 사용하며, 실행에는 영향을 주지 않습니다.
HTML 주석
<!-- 주석 -->
자바스크립트 주석
- 한 줄 주석:
// 주석 - 여러 줄 주석:
/* 여러 줄에 걸친 주석 */
5. 출력 방법
- 구글 크롬 콘솔창
- F12를 눌러 콘솔에서 결과 확인 가능
- 경고창에 출력하기
alert("경고창 메시지"); - 콘솔에 출력하기
console.log("출력 메시지");
Chapter 02. 자료와 변수
1. 기본 자료형
1) 문자열 자료형
- 문자들의 집합으로, 문자 하나만 나타내는 자료형은 없음.
- 문자열 표기: "문자열"
- 이스케이프 문자
- \n: 줄바꿈
- \t: 탭
- \\: 역슬래시(\)
- 예: "Hello\nWorld" → 줄바꿈된 문자열
- 문자열 연산자
- +: 문자열 연결
- '안녕하세요'[0] → '안' (문자 선택 연산자)
- 문자열.length: 문자열 길이 확인
2) 숫자 자료형
- 자바스크립트는 정수와 소수를 같은 자료형으로 처리함.
- 숫자 연산자
- +: 더하기
- -: 빼기
- *: 곱하기
- /: 나누기
- %: 나머지
3) 불 자료형 (Boolean)
- 참(true) 또는 거짓(false) 값만 가짐.
- 비교 연산자
- ===: 같다
- !==: 다르다
- 예: 10 === 10 → true
- 조건식과 사용
- if (조건식) { 실행문; }
- 논리 연산자
- &&: 논리곱 (양쪽이 true일 때 true)
- ||: 논리합 (하나라도 true이면 true)
- !: 부정 연산자
4) 자료형 검사
- typeof(자료)로 자료형 확인
- 예: typeof('문자열') → "string"
- 결과값: string, number, boolean, undefined, function, object 등
2. 상수와 변수
1) 상수와 변수의 차이
- 상수: 변하지 않는 값 (const)
const PI = 3.14; - 변수: 변할 수 있는 값 (let)
let age = 25;
2) 변수 연산자
- 복합 대입 연산자
- a += 1 → a = a + 1
- 증감 연산자
- 변수++ 또는 ++변수 (후위와 전위 연산)
3. 자료형 변환
1) 문자열 입력
- prompt(메시지)를 사용해 사용자로부터 문자열 입력 받기
const name = prompt("이름을 입력하세요:");
2) 불 자료형 입력
- confirm(메시지)를 통해 true(확인) 또는 false(취소) 반환
const isAgree = confirm("동의하시겠습니까?");
3) 자료형 변환 방법
- 숫자 변환: Number(자료)
- 문자열 변환: String(자료)
- 불 변환: Boolean(자료)
- ! 연산자로도 간접 변환 가능
Boolean(0); // false Boolean('Hello'); // true