[새싹 프론트엔드] 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) , "입니다" 로 풀려고 하다가 옆자리 귤님이 조언을 주셔서 ,, 아,,, 요렇게 푸는 것이구나 함
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅