[새싹 프론트엔드] 3주차 - 1 자바스크립트 개념 / 자료형과 변수

Javascript

자바스크립트 

웹 페이지에서 동작하는 프로그램을 만들 때 사용

웹 페이지가 어떻게 보일지 제어

사용자가 버튼을 클릭했을 때 페이지가 반응을 보이게 함 

 

사용 분야

• 웹 어플리케이션
• 지도 서비스, 게임 등 다양한 분야
• 페이스북, 트위터 등의 사이트
• 이메일 전송, 댓글 달기, 웹사이트 탐색 등
• 서버 개발 (Node.js)

 

자바스크립트의 역할

사용자의 입력 및 계산 처리

   • HTML은 입력 창만 제공할 뿐, 입력을 받고 계산하는 기능은 없음

   • 키나 마우스의 입력과 계산은 자바스크립트로 처리

웹 페이지 내용 및 모양의 동적 제어

   • 자바스크립트로 HTML 태그의 속성이나 컨텐츠의 값을 변경

브라우저 제어

   • 브라우저 크기나 모양 변경, 새 윈도우나 탭 열기

   • 다른 웹 사이트 접속 등

웹 서버와의 통신

   • 웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용

웹 어플리케이션 작성

  •  HTML은 캔버스, 위치 정보 서비스 등 자바스크립트로 활용할 수 있는 많은 기능을 제공

 

자바스크립트 코드 작성 방법

• 웹 문서 내에서 작성

<script>… </script>내에 작성

• 자바스크립트 파일에 작성

예)  main.js

 

자바스크립트 프로그램 작성

크롬 자바스크립트 콘솔 실행

• 윈도우/리눅스 : Ctrl + Shift + J

• 맥 OS : Command + Option + J

 

 

여러 줄의 코드를 작성할 경우

• Shift+엔터키를 눌러 새로운 줄을 추가

• 엔터키만 누르면 입력한 코드를 웹 브라우저가 실행

 

예) 1부터 10까지 출력하는 프로그램

 

결과)

console 화면에 1~10까지 출력

 

 

자바스크립트 문법

프로그램이 정상 작동하도록 기호와 단어를 조합하는 자바스크립트의 규칙

• 소괄호( () ), 세미콜론( ; ), 중괄호( {} ), 플러스 기호( + )

• var, console.log 등

 

식별자(identifier)

개발자가 프로그램의 변수, 함수 등에 붙이는 이름

• 의미를 담을 수 있도록 만드는 것이 좋음

• 두 단어로 구성되는 식별자의 경우, 두 번째 이후 단어의 첫 글자는 대문자로 작성

   • numberOfStudents

   • studentID

 

작성규칙

• 첫 번째 문자

   • 알파벳(A-Z, a-z), 언더바(_), $문자만 사용 가능

• 두 번째 이상 문자

   • 알파벳(A-Z, a-z), 언더바(_), 0-9, $문자 사용 가능

• 대소문자 구분

   • myHome과 myhome은 서로 다른 변수

* 예약어 (키워드)는 이름으로 쓸 수 없음

 

예시)

 

문장구분

자바스크립트 프로그램의 기본 단위는 문장

• 세미콜론(;)으로 문장과 문장을 구분

• 한 줄에 한 문장만 있는 경우, 세미콜론은 생략 가능 (but, 습관적으로 모든 문장 끝엔 찍어주는 것이 좋다)

 

주석 (Comment)

• 사람에게 설명을 제공하는 역할

• 주석 뒤에 나오는 내용은 자바스크립트 해석기가 무시

• 주석은 프로그램 실행에 어떠한 영향도 미치지 않음

 

한 줄 주석 작성 방법

두 줄 이상의 주석 작성

 

---

자료형

데이터

컴퓨터 프로그램에 저장된 정보

예) 이름, 나이, 주소, 성별 등 모든 것이 데이터

 

데이터 타입

• 자료형

• 자바스크립트 언어로 다룰 수 있는 데이터의 종류

자바스크립트의 기본 자료형

숫자와 연산자

덧셈, 뺄셈, 곱셈, 나눗셈 같은 기본 사칙 연산 수행

• 연산자(operator)라는 기호 +, -, *, /가 사용

 

연산자 우선순위

• 곱셈, 나눗셈 > 덧셈, 뺄셈

---

변수

데이터를 저장하는 공간의 이름

C나 Java와 달리, 변수에 데이터 타입을 정하지 않음

 

변수 선언 방법

• var 키워드

• let 키워드

• const 키워드

 

var 키워드로 변수 선언

변수이름 여러개 선언 시 콤마 활용

var 키워드 없이 변수 선언 가능

만약 age가 이미 선언된 변수라면, 새로운 변수를 생성하지 않고 이미 존재하는 age에 21 저장

하지만!! var 없이 변수선언하는 것은 안 좋은 습관이기 때문에 없다고 치자

let, const 키워드로 변수 선언

 

var, let, const 비교 ( 이 표를 무조건 기억해야함! )

* 절대로 바뀔리 없는 변수 const(주민번호)  값 이렇게 만들면 됨

  만약 var이나 let을 쓴다면 변경이 될 수 있음

 

변수 호이스팅(Hoisting)

아래있는 변수를 끌어올리는 것

하지만 하지 않는 것이 좋음 무조건 선언 → 할당 순서대로!

 

var 키워드를 사용할 경우

변수 호이스팅 가능

실행 결과

 

let 키워드를 사용할 경우

실행 결과

 

 

변수 스코프(Scope)

var - 중괄호 밖에서도 가능

let, const - 중괄호 안에서만 가능

 

 

초기화

변수 값 초기화

변수에 값을 할당하는 것

 

변수 나이의 값을 12로 초기화

 

변수 값을 바꾸고 싶으면 다시 등호를 사용

이미 ‘나이’라는 변수가 존재하기 때문에 var 키워드를 사용 하지 않음

변수 타입과 값

자바스크립트에는 변수의 타입이 없음

따라서, 아무 값이나 저장할 수 있음

 

증가 / 감소 연산자

1씩 늘어나는 것은 증가, 1씩 줄어드는 것은 감소

증가 연산자(++), 감소 연산자(--)

 

전위 연산자

연산자를 변수 앞에 작성 

증가 또는 감소한 후의 값이 반환

후위 연산자

연산자를 변수 뒤에 작성 

증가 또는 감소하기 전의 값이 반환

 

증감 연산자

연산자	내용
++a	a를 1 증가한 후, a 값 사용
--a	a를 1 감소한 후, a 값 사용
a++	a를 사용한 후, a 값 1 증가
a--	a를 사용한 후, a 값 1 감소

 

대입 연산자

오른쪽 식의 결과를 왼쪽에 있는 변수에 대입

연산자	내용
a = b	b 값을 a에 대입
a += b	a = a + b와 동일
a -= b	a = a - b와 동일
a *= b	a = a * b와 동일
a /= b	a = a / b와 동일 (몫만 구함)
a %= b	a = a % b와 동일 (나머지값만 구함)

 

 

✔️ x += 5는 x = x + 5와 같은 의미 

✔️ x -= 9는 x = x – 9와 같은 의미

 

불리언

논리연산자

참이나 거짓, 둘 중 하나의 값 

참(TRUE), 거짓(FALSE)

 

불리언 연산자

숫자를 산술 연산자(+, -, *, / 등)와 함께 사용하듯이 불리언 값(TRUE, FALSE)은 불리언 연산자와 함께 사용

 

불리언 연산자 종류

&&	AND
||	OR
!	NOT

 

&& (AND)

두 개의 불리언 값중에 하나라도 false이면 fase

(반드시 모두 true여야 true)

A	B	A && B
참	참	참
참	거짓	거짓
거짓	거짓	거짓
거짓	참	거짓

 

 

|| (OR)

두 개의 불리언 값이 하나라도 true이면 true

A	B	A || B
참	참	참
참	거짓	참
거짓	거짓	거짓
거짓	참	참

 

 

! (NOT)

false는 true로, true는 false로 바꿈

A	!A
참	거짓
거짓	참

 

 

논리 연산자 결합

논리 연산자 우선 순위

&& > ||

불리언으로 숫자 비교

불리언 값은 간단한 숫자 문제에 활용할 수 있음

 • 초과/이상 연산자

 • 이하/미만 연산자

 • 삼중 등호

 • 이중 등호

 

비교 연산

두 값을 비교한 결과가 true 또는 false인 연산

연산자	내용
a < b	a가 b보다 작으면 true
a > b	a가 b보다 크면 true
a <= b	a가 b보다 작거나 같으면 true
a >= b	a가 b보다 크거나 같으면 true
a == b	a가 b와 같으면 true
a != b	a가 b와 같지 않으면 true

 

 

 

 

삼중 등호 (일치 연산자)

두 숫자가 같은 지 확인

삼중 등호(===) 사용 (타입까지 같은 지 확인 - 엄격한 비교)

  • 두 값이 완전히 같습니까? 라는 뜻

  • 등호 한 개(=)는 변수 오른쪽에 있는 값을 왼쪽에 저장하라는 뜻

 

이중 등호 (동등 연산자)

자료형의 유형이 다른 두 개의 값이 같은 지 비교

이중 등호(==) 사용

 

조건 연산

조건의 결과에 해당하는 값을 반환

삼항연산자라고도 부름
물음표 - 조건이 참이냐 거짓이냐를 판별
콜론 - 조건이 참이면 콜론을 기준으로 왼쪽의 값이 결과로 나옴

           조건이 거짓이면 콜론을 기준으로 오른쪽 값이 결과로 나옴

 

var x = 5;
var y = 3;
var big = (x > y) ? "x가 크다" : "y가 크다";

 

문자열

자바스크립트에서 문자열은 문자를 의미

• 문자에는 글자, 숫자, 구두점, 공백이 포함

 

문자열 표현 방법

• 문자열 앞뒤로 큰따옴표(”)를 붙임

“안녕하세요. 반갑습니다!”

 

큰따옴표 안에 숫자를 넣은 경우 문자열로 취급

var 숫자아홉 = 9; var 문자열아홉 = “9”;

 

변수에 문자열 저장 가능

var 나이 = 5;    // 숫자 저장 나이 = “다섯살”;    // 문자열 저장

 

문자열 비교

비교 연산자(!=, ==, >, <, <=, >=) 사용 가능

• 사전에서 뒤에 나오는 문자열이 크다고 판단

 

문자열 연결하기

 

문자열 앞 뒤 공백 제거

trim() 함수

• 문자열의 앞 뒤 공백을 제거

* trim - 회원가입 페이지에 데이터 앞 뒤에 공백이 들어가면 제거하고 데이터 베이스에 저장될 수 있도록 할 때 사용

 

문자열 길이

 length 속성

   • 문자열의 길이 값을 숫자로 반환

 

문자열에서 한 글자만 가져오기

문자열의 특정 위치에 있는 글자 가져오기

1) 대괄호([ ])를 사용

• 문자열이나 문자열이 포함된 변수 뒤에 대괄호를 쓰고, 그 안에 원하는 글자의 번호(인덱스)를 입력

• 글자의 번호는 0부터 시작

 

 

2) charAt(n) 함수

 

문자열 잘라내기

slice(a, b) 함수

매개변수	설명
첫 번째 매개변수(a)	잘라내기가 시작되는 부분의 인덱스
두 번째 매개변수(b)	잘라내기가 끝나는 글자의 바로 다음 인덱스

slice(a)

• a번부터 문자열의 끝까지 잘라내기

slice(a, b)

• a번부터 문자열의 (b-1)번까지 잘라내기

 

문자열의 일부를 잘라내기

• slice(2, 5) - 문자열에서 2번 글자부터 5번 글자 전까지 잘라내기

 

문자열 변경

replace() 함수

일부 문자열을 다른 문자열로 변경

사용 방법 :

replace(찾을_문자열, 변경할_문자열)

 

예시)

 

문자열 분할

split(“구분자”) 함수

하나의 문자열을 구분자를 기준으로 여러 개의 문자열로 분할한 배열 리턴

 

 

문자열 전체를 대소문자로 바꾸기

대문자로 바꾸기

toUpperCase() 함수

• 영어로 된 모든 글자를 대문자로 변경

• 숫자나 한글에는 적용 안됨

 

소문자로 바꾸기

toLowerCase() 함수

• 영어로 된 모든 글자를 소문자로 변경

 

예시) 첫 글자는 대문자, 나머지는 소문자로 변경

 

웹 브라우저에 이름 출력해보기

예시)

<head>
	<meta charset="UTF-8" />
	<title>이름 출력</title>
</head>
<body>
	<script>
        var name = "차은우";
        document.write(“<h1>안녕하세요.”);
        document.write(name);
        document.write(“입니다.</h1>");
	</script>
</body>
</html>

 

결과)

 

 

 

 

 

---

 

[실습회고]

오늘은 자바스크립트를 처음 배우는 날이라 그에 걸맞는 실습문제들을 풀어보는데 정말 익숙치 않아서 처음부터 어 ,,, 어떻게 하는거지 ,, 막 이랬음,, 아니 지인짜 간단한건데 그저 출력하기만 하는 건데 이리저리 해보다가 아,,, 그냥 값이 궁금한 변수를 맨마지막줄에 쓰고 세미콜론만 하면 되는 것을 진짜 돌아돌아 했다 ㅋㅋㅋ ㅜ 그리고 실습문제 양이 많다보니까 일일이 html파일을 만들지 않고 br태그와 hr태그로 나눠서 한페이지로 답을 내고싶었는데 또 그 방법을 몰라서 돌아돌아,,, 막 하다가 어떤 분의 것을 참고하여 방법을 알아냄. <script> 태그 안에 br, hr을 쓰고 싶으면 document.write("<br/>") ; 요렇게 하면 줄바꿈 됨 ㅎ hr도 마찬가지 

 

그리고 다른 건 다 잘 풀었는데 유독 안 먹히던,,게 있었다. 바로 concat함수를 쓰는 문제,,

concat을 사용하여 문자열을 연결하는 건데 죽어도 b에 "입니다"가 안붙는것이다

그래서 그냥 (a+b) , "입니다" 로 풀려고 하다가 옆자리 귤님이 조언을 주셔서 ,, 아,,, 요렇게 푸는 것이구나 함

답은 document.write((a + b).concat("입니다"));였는데 소괄호로 안 묶고 냅다 적용해버려서 안 되었던 것이었다 그냥 b.concat("입니다")만 하니까 당근 안 되쥐,,, 여튼 오늘도 여차저차 실습 완 ㅎ

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅