Chapter 01

01장

---

☘️ 01-1 자바스크립트의 활용

- 자바스크립트 : 웹 브라우저에서 사용하는 프로그래밍 언어

- 자바스크립트로 할 수 있는 것들 

• 웹 클라이언트 애플리케이션 개발
• 웹 서버 애플리케이션 개발
• 모바일 애플리케이션 개발
• 데스크톱 애플리케이션 개발
• 데이터베이스 관리

 

☘️ 01-2 개발 환경 설치와 코드 실행

개발 환경 (development environment)

• 개발을 할 수 있게 해주는 환경
• 코드를 작성하는 텍스트 에디터 & 코드를 실행하는 코드 실행기가 필요
• 텍스트 에디터 : 비주얼 스튜디어 코드
• 코드 실행기 : 구글 크롬

 

코드 실행하기

첫 번째 방법 : 구글 크롬 콘솔에서 실행하기

1. about:blank 입력하기
2. [마우스 오른쪽 클릭] -> [검사] 선택 //단축키 : Ctrl + Shift + I(i)
3. Console 탭 누르기
4. 코드를 입력하고 [Enter]누르기

 

두 번째 방법 : 파일 만들고 저장해 실행하기

1. [파일] -> [새파일(Ctrl + N]을 선택
2. 곧바로 [파일] -> [저장(Ctrl + S)] 선택
3. "파일_이름.html"라는 형태로 저장
4. html:5입력하고 엔터[또는 탭]
5. head 태그 안에 script 태그 생성
6. script 태그 안에 코드 입력
7. 코드를 모두 입력했다면 저장
8. 크롬에 드래그앤드롭해서 실행

 

+ 오류를 확인하는 방법

Reference Error : 예외처리

ex) 단어 오탈자가 발생하면 나옴

Uncaught ReferenceError : ~~~ is defined

상황 : ~~~ 부분을 잘못 입력했을 경우 발생. alert를 alrt로 잘못 입력했을 때 만날 수 있는 오류

<script>
	arlt('Hello World') //alert를 arlt로 잘못 입력한 경우
</script>

해결 : 이 오류는 ~~~부분을 수정하면 해결됨. 위의 코드에서 alrt를 alert로 수정

 

Syntax Error :구문 오류

ex) 일반적으로 기호에서 오탈자가 발생하면 나옴 

 

구문오류1

Uncaught SyntaxError: Invalid or unexpected token

상황 : 토큰9기호)을 잘못 입력했을 때의 오류. 다음 코드는 'Hello World'를 입력하기 위해서 따옴표를 열었으나 따옴표를 닫지 않은 코드

<script>
	alert('Hello World' //따옴표(')를 열고서 닫지 않은 경우 
</script>

해결 : 따옴표를 제대로 닫아주면 해결됨

 

구문오류1

Uncaught SyntaxError: missing ) after argument list

상황 : 토큰(기호를) 잘못 입력했다는 오류. 다음 코드는 괄호를 열었으나 닫지 않은 코드.

<script>
        alert('Hello Wolrd' //괄호를 열고서 닫지 않은 경우
</script>

해결 : 괄호를 제대로 닫아주면 해결됨

 

+자바스크립트 표준 스타일

코딩 스타일 

• 개발자마다 다른 코드 작성 방식을 통일한 코드 작성 규칙.
• 코딩컨벤션이라고도 부름.
• 언어마다 있는 표준 스타일을 따르거나 팀이나 회사에서 정한 스타일을 따를 수 있음.
• ex) 들여쓰기를 2개 할 것인지 4개 할 것인지, 중괄호의 위치는 어떻게 할 것인지, 키워드 뒤에 괄호를 바로 붙일지 공백을 줄지 등

 

☘️ 01-3 알아두어야 할 기본 용어

- 표현식 : expression

어떠한 값을 만들어 내는 간단한 코드, 숫자, 수식, 문자열 등

273
10 + 20 + 30 *2
'RintIanTta'

 

- 문장 : statement

표현식이 하나 이상 모인것. 문장 끝에는 마침표를 찍듯이 세미콜론 또는 줄바꿈을 넣어준다.

//세미콜론을 사용한 문장 구분
10 + 20 + 30 * 2; var JinRoSoJu = 'Jin' + 'Ro' + 'Soju'; alert('hello javascript...!');9303;

// 줄바꿈을 사용한 문장 구분
10 + 20 + 30 * 2
var JinRoSoJu = 'Jin' + 'Ro' + 'Soju'
alert('hello javascript...!')
273

 

- 프로그램 : 문장이 모인 것

10 + 20 + 30 * 2;
var JinRoSoJu = 'Jin' + 'Ro' + 'Soju';
alert('hello javascript...!');
273;

+일반적인 '문장'은 영어로 sentence.

BUT 프로그래밍에서 '문장'은 statement의 의미로 쓰임

 

- 키워드 :  특별한 의미가 있는 단어

언어 내에서 문법적인 용도로 사용되고 있는 단어로 사용자가 지정하는 이름에는 사용할 수 없다.

JavaScript Reserved Words (w3schools.com)

 

- 식별자 : 프로그래밍언어에서 이름을 붙일 때 사용되는 단어. 

주로 변수명이나 함수명 등으로 사용

자바스크립트 식별자를 만들 때 규칙

• 키워드를 사용하면 안됨
• 숫자로 시작하면 안됨
• 특수 문자는 _와 $만 허용
• 공백 문자를 포함할 수 있음

식별자로 사용 가능한 단어	식별자로 사용 불가능한 단어
alph alpha10 _alpha $alpha AlPha ALPHA	break //키워드라서 안됨 273alpha //숫자로 시작해서 안됨 has space //공백을 포함해서 안됨

 

_
$

밑줄 문자(_), 달러 기호($)와 같은 한 글자 특수 문자도 식별자임

 

+ 식별자를 만드는 일반적인 관례

• 의미 있는 단어 사용하기
• 클래스의 이름은 항상 대문자로 시작
• 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작
• 여러 단어로 이루어진 식별자는 각 단어의 첫글자를 대문자로 함

will out  → willOut
will return → willReturn
i am a girl → iAmGirl

 

- 식별자의 종류 4가지

구분	단독으로 사용	다른 식별자와 사용
식별자 뒤에 괄호 없음	변수	속성
식별자 뒤에 괄호 있음	함수	메소드

 

- 주석 : 프로그램 코드를 설명할 때 사용하는것.

프로그램 진행에는 전혀 영향을 주지 않음

 

HTML 주석 
<!--주석-->

JavaScript 주석
// 한줄 주석
/*
범위
주석
*/

 

TIP.

[파일] -> [기본설정] -> [색 테마]

Ctrl + K Ctrl + T : Ctrl + K 누르고, Ctrl + T를 누르라는 의미

#멀티 커서 : 마우스 사용 형태 Alt : 마우스 클릭

#멀티 커서 : 키보드 사용형태 Ctrl : Alt : 방향기 (위/아래)

1. Shift + 방향키_위/아래 : 위 아래 줄 선택

2. Tab/Shift +Tab으로 들여쓰기 추가 제거