JS 기초_1

항해99 14기 온보딩 커리큘럼 1일차

 

자바스크립트 개요

• 자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어
• ECMAScript란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭
• 웹 애플리케이션이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지를 말한다.

 

개발환경 설치와 코드 실행

• 개발환경이란 개발을 할 수 있는 환경을 의미
• 텍스트 에디터란 코드를 작성할 수 있는 프로그램 ex) vs code(비주얼 스튜디오 코드)
• 구글 크롬 개발자 도구란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 고두

 

기본용어

• 표현식이란 값을 만들어내는 간단한 코드를 말한다
• 문장이란 하나 이상의 표현식이 모여 구성되는 것으로, 코드를 읽어 들이는 기본 단위
• 키워드란 프로그래밍 언어가 처음 만들어질 때 정해진 특별한 의미가 있는 단어이다
• 식별자란 이름을 붙일 때 사용하는 단어이다
• 주석은 프로그램 코드를 설명하는 문장으로 프로그램 진행에는 영향이 없다

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

• 알파벳으로 의미 있는 단어 사용 ex) input, output
• 클래스(class)의 이름은 항상 대문자로 시작
• 변수/인스턴스/함수/메소드는 항상 대문자로 시작
• 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 입력

식별자의 종류

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

 

자료와 변수

기본 자료형

• 자료형이란 자료의 종류를 의미
• 문자를 표현할 때는 문자열 자료형 사용
• 숫자를 표현할 때는 숫자열 자료형 사용
• 참과 거짓을 표현할 때는 불(Boolean) 자료형 사용

따옴표를 문자 그대로 사용하고 싶다면 이스케이프 문자(\)를 사용

ex)

>"This is \"string\""

"This is "string""

 

이스케이프 문자의 특수 기능

• \n: 줄바꿈 의미
• \t: 탭을 의미
• \\: 역슬래시(\) 자체를 의미

 

상수와 변수

• 상수는 변하지 않는 값을 저장하는 식별자. const 키워드를 사용해 선언
• 변수는 변하는 값을 저장하는 식별자. let 키워드를 사용해 선언
• 상수 또는 변수를 생성하는 것을 선언
• 생수 또는 변수에 값을 넣는 것을 할당

 

자료형 변환

• 사용자로부터 글자를 입력받을 때는 prompt() 함수를 사용
• 어떤 자료형의 값을 다른 자료형으로 변경하는 것을 자료형 변환이라고 함
• 숫자 자료형으로 변환할 때 Number() 함수 사용
• 문자열 자료형으로 변환할 때 String() 함수 사용
• 불 자료형으로 변환할 때 Boolean() 함수 사용
  대부분의 자료는 불로 변환했을 때 true로 변환된다.
  다만 0, NaN, '...' 혹은 "..."(빈 문자열), null, undefined라는 5개의 자료형은 false로 변환된다.
  추가로 논리 부정 연산자(!)를 두번 사용해서 다른 자료형을 불 자료형으로 변환할 수 있다.

과제

Q1. 사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램 만들기

(1cm = 0.39370inch)

<script>
const rawInpu = prompt('cm 단위의 숫자를 입력해주세요.')

const cm = Number(rawInput)
const inch = cm*0.393701inch

alert( `${cm}cm는 ${inch}inch 입니다.` )
</script>

 

Q2. 사용자로부터 원의 반지름을 입력받아 원의 넓이와 둘레를 구하는 프로그램 만들기

(넓이 = 3.14*반지름*반지름, 둘레 = 2*3.14*반지름)

<script>
const rawInpu = prompt('원의 반지름을 입력해주세요.')

const r = Number(rawInput)

let output = ''
output += `반지름: ${r}\n`
output += `넓이: ${3.14 * r * r}\n`
output += `반지름: ${2 * 3.14 * r}\n`
alert(output)
</script>

 

 

Q3. 현재 환율을 기반으로 사용자에게 숫자를 입력받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램 만들기

<script>
const rawInput = prompt('달러 단위의 금액을 입력')

const dollar = Number(rawInput)

let output = ''
output += `달러: ${dollar}\n`
output += `원: ${dollar * 1298}`
alert(output)
</script>