[항해14기] 온보딩 개발일지1 2023/03/06

 

2023/03/06 온보딩 과제1 링크

https://jujiprogram.tistory.com/2

 

JavaScript 입문주차

공부한 내용 위주로 기술

 

1. JavaScript 개요

 

1-1. JavaScript란

1) 웹브라우저에서 사용하는 프로그래밍언어

2) 표준명칭 ECMAScript

3) JavaScript로 개발 가능한 것 : 웹클라이언트 어플리케이션, 웹서버 어플리케이션, 데스크톱 어플리케이션,  데이터베이스관리

 

1-2. 개발환경 설정

1) 개발환경 : 텍스트 에디터와 코드 실행기 필요

2) VisualStudioCode(텍스트 에디터) 와 GoogleChrome(코드 실행기) 선정

3) 언어설정 필요시 VisualStudioCode 확장탭에 Korean 검색 후 한글팩 설치

 

1-3. 실행

1) 실행1 : 크롬에서 콘솔실행. 주소창에 about:blank입력 후 f12 또는 ctrl+shift+i

2) 실행2 : VisualStudioCode에서 새파일 생성 후 html:5 명령어로 기본서식 제작. 이후 저장된 파일 크롬으로 실행

 

1-4. 기본 오류들

1) 크롬에서 자체 오류검사 수행가능(ctrl+shift+i)

2) 예외처리(ReferenceError)

- Uncaught ReferenceError : OO i not defined

- 오타시 발생

3) 구문오류1(SyntaxError)

- Uncaught SyntaxError : Invalid or ubexpected token

- 토큰(기호) 따옴표 기입 실수 시 발생

4) 구문오류2(SyntaxError)

- Uncaught SyntaxError : missing ) after argument list

- 토큰(기호) 괄호 기입 실수 시 발생

 

1-5. 표현식과 문장

1) 표현식

- 값을 만들어내는 간단한 코드

- ex) 273, 10+10, 'Hello'

2) 문장

- 표현식이 모여서 구성

- 세미콜론(;) 또는 줄바꿈으로 문장 종결

- ex) 273+10 = 'Hello';

3) 키워드

- JavaScript의 특별한 의미있는 단어

- ex) await, break, case, catch 등

4) 식별자

- 변수명이나 함수명 등 프로그래밍 언어에서 이름을 붙일때 사용

- 키워드사용 불가, 숫자로시작 불가, 특수문자_와$만 허용, 공백포함 불가

- 관례 : 클래스는 대문자 시작, 변수/인스턴스/함수/메소드는 소문자 시작, 여러 단어가 붙은경우 각단어 대문자 시작

- 식별자종류

구분	단독 사용	다른 식별자와 사용
식별자 뒤에 괄호 X	변수	속성
식별자 뒤에 괄호 O	함수	메소드

5) 주석

- 특정 부분 설명 시 사용, 프로그램에 영향X

- HTML 태그 주석 : <!-- 주석내용 -->

- 자바스크립트 주석 : 문장뒤에 //주석내용 또는 /* 주석내용*/(여러줄의 주석 기입시)

 

1-6. 출력 방법

1) 구글 크롬에서 직접 코드입력 후 console창에 출력

2) alert()함수를 이용하여 경고창 출력

3) console.log() 메소드 이용하여 출력

 

 

 

2. 자료와 변수

 

2-1. 자료 개요

1) 자료 : 프로그램이 처리할 수 있는 모든 것

2) 자료형 : 자료 형태 분류, ex) 숫자, 문자열, 불

 

2-2. 문자열 자료형

1) 'hello' 등 문자들의 집합. 작은따옴표 또는 큰따옴표 기입

2) 이스케이프 \(따옴표 표현), \n(줄바꿈), \t(탭), \\(역슬래시 표현)

 

2-3 문자열 연산자

1) 문자끼리 +를 이용해 연결가능 ex) 'Hi'+'Hello' = 'HiHello'

2) 인덱스 : 문자열 내에 문자위치 선택 ex) '안녕하세요'[0] = '안', '안녕하세요'[1] = '녕'

3) 문자열길이length ex) '안녕하세요'.length = 5

 

2-4. 숫자 자료형

1) 숫자들(소수포함)

2) 숫자 연산자(사칙연산+, - , /, *)(나머지 연산자%)

 

2-5. 불 자료형

1) boolean(불린)

2) true와 false 2가지

3) 비교연산자

===	양변 같음
!==	양변 다름
<, >
<=, >=

4) 불 부정 연산자

!true = false, !false=true

5) 논리합, 논리곱 연산자

||(논리합,or), &&(논리곱,and)

 

2-6. 자료형 검사

1) typeof O

'문자열', 숫자, 불 등 입력시 해당 타입값을 알려줌

ex) typeof 10 === 'number' -> true값 출력

 

2-7. 템플릿 문자열

1) `${}` : 표현식 안에서 문자열 계산

 

2-8. ===와 == 차이

1) ===, !=== : 값과 자료형이 같은지 비교

2) ==, !== : 값이 같은지 비교

3) false == ''== [] == 0

 

2-9. 상수

1) const로 선언, 선언 이후 값변경 불가 ex) const a = 10

 

2-10. 변수

1) let으로 선언, 변경 가능 ex) let a = 8 -> a = 7

2) 변수에 적용 가능 연산자

+=, *=, -=. /=, %=

3) 증감 연산자

변수++, ++변수, 변수--, --변수

연산자가 뒤에오는경우 후위(자료값을 출력후 계산), 앞에오는 경우 전위(자료값을 계산후 출력)

 

2-11. undefined 자료형

1) 상수와 변수로 선언하지 않은 식별자

2) 값이 없는 변수

 

2-12. 문자열 입력

1) prompt(메시지 문자열, 기본 입력 문자열)

ex) prompt('message', '_default')와 alert사용

 

2-13. 불 입력

1) confirm(메시지 문자열)

ex) confirm('수락하시겠습니까?')와 alert사용

 

2-14. 숫자 자료형 변환

1) Number(자료)

2) 숫자로 변환 불가한 문자열의 경우 NaN 출력

3) true = 1, false = 0

4) 숫자연산자(-,/,*)를 이용해 다른연산자를 숫자 자료형으로 변환가능

ex) '50'-0, true-1

 

2-15. 문자열 자료형으로 변환

1) String(자료)

ex) String(99) -> '99', String(true) -> 'true'

2) +연산자를 이용해 변환가능(2.14참조)

 

2-16. 불 자료형으로 변환

1) Boolean(자료)

2) 대부분의 자료는 true로 변환

3) 0, NaN, '', "", null, undefined 는 false로 변환