자바스크립트

자바스크립트란?

• 1995년 넷스케이프에서 개발된 웹 프로그래밍 언어
• 웹 페이지에서 동작하는 프로그램을 만들 때 사용
  • 웹 페이지가 어떻게 보일지 제어
  • 사용자가 버튼을 클릭했을 때 페이지가 반응을 보이게 함
• 사용 분야
  • 웹 어플리케이션
    • 지도서비스, 게임 등 다양한 분야
  • 페이스북, 트위터 등의 사이트
    • 이메일 전송, 댓글 달기, 웹사이트 탐색 등
  • 서버 개발
    • Node.js

자바스크립트 프로그래밍 언어

• 배우기 쉬움
• 웹 브라우저만 있으면 작성 및 실행 가능
  • 모든 웹 브라우저는 자바스크립트 프로그램을 읽을 수 있는 자바스크립트 해석기가 내장
  • 컴파일 과정 없이 바로 실행

웹 페이지에서 자바스크립트의 역할

• 사용자의 입력 및 계산 처리
  • HTML은 입력창만 제공할 뿐, 입력을 받고 계산하는 기능은 없음
    • 예) 로그인창, 입력하는 UI만 제공하고 기능은 없음
  • 키나 마우스의 입력과 계산은 자바스크립트로 처리
• 웹 페이지 내용 및 모양의 동적 제어
  • 자바스크립트로 HTML 태그의 속성이나 컨텐츠의 값을 변경
• 브라우저 제어
  • 브라우저 크기나 모양 변경, 새 윈도우나 탭 열기
  • 다른 웹 사이트 접속 등
• 웹 서버와의 통신
  • 웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용
• 웹 어플리케이션 작성
  • HTML은 캔버스, 위치 정보 서비스 등 자바스크립트로 활용할 수 있는 많은 기능을 제공

자바스크립트 코드의 위치

• 자바스크립트 코드 작성 방법
  • 웹 문서 내에서 작성
    • <script> </script> 내에 작성
• 자바스크립트 파일에 작성
  • 예) main.js

자바스크립트 프로그램의 구조

• 여러 줄의 코드를 작성할 경우
  • Shift + 엔터키를 눌러 새로운 줄을 추가
  • 엔터키만 누르면 입력한 코드를 웹 브라우저가 실행

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

      function printNumber(count) {
          for (var i = 1; i <= count; i++) {
              console.log(i);
          }
      }
      
      printNumber(10);

자바스크립트 문법

자바스크립트 문법

• 프로그램이 정상 작동하도록 기호와 단어를 조합하는 자바스크립트의 규칙
• 소괄호(()), 세미콜론(;), 중괄호({}), 플러스 기호(+)
• var, console.log 등

식별자(Identifier)

• 개발자가 프로그램의 변수, 함수 등에 붙이는 이름
• 의미를 담을 수 있도록 만드는 것이 좋음
• 두 단어로 구성되는 식별자의 경우, 두 번째 이후 단어의 첫 글자는 대문자로 작성
  • numberOfStudents
  • studentID

식별자 작성 규칙

• 첫 번째 문자
  • 알파벳(A-Z, a-z), 언더바(_), $문자만 사용 가능
• 두 번째 이상 문자
  • 알파벳(A-Z, a-z), 언더바(_), 0-9, $문자 사용 가능
• 대소문자 구분
  • myHome과 myhome은 서로 다른 변수

식별자 예제

예제
6variable	(❌) 숫자로 시작할 수 없음
student_ID	(⭕️)
_CODE	(⭕️)
if	(❌) 예약어는 사용 불가
%calc	(❌) % 사용 불가
bar, Bar	(⭕️) bar와 Bar는 서로 다른 식별자

문장 구분

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

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

  • 한 줄에 한 문장만 있는 경우, 세미콜론은 생략 가능

    예제
    i = i + 1	(⭕️) 한 줄에 한 문장만 있는 경우 생략
    j = j + 1;	(⭕️) 문장 끝에 세미콜론 사용
    k = k + 1; m = m + 1;	(⭕️) 한 줄에 여러 문장
    n = n + 1 p = p + 1	(❌) 첫 번째 문장 끝에 세미콜론 필요

주석(Comment)

• 사람에게 설명을 제공하는 역할
• 주석 뒤에 나오는 내용은 자바스크립트 해석기가 무시
• 주석은 프로그램 실행에 어떠한 영향도 미치지 않음
• 한 줄 주석 작성 방법

  // 1부터 10까지 숫자를 출력
  printNumber(10);

• 두 줄 이상의 주석 작성

  /*
  1부터 10까지
  숫자를 출력
  */

자료형과 변수

자료형

데이터

• 컴퓨터 프로그램에 저장된 정보
• 예) 이름, 나이, 주소, 성별 등 모든 것이 데이터

데이터 타입

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

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

• 숫자 타입

  5;

• 문자열 타입

  • 반드시 따옴표로 묶여 있음

    '안녕하세요. 저는 문자열입니다.';

• 논리 타입

  // 참(true) 또는 거짓(false)이 될 수 있는 값
  true;

숫자와 연산자

• 덧셈, 뺄셈, 곱셈, 나눗셈 같은 기본 사칙연산 수행
  • 연산자(operator)라는 기호 +, -, *, /가 사용
• 연산자 우선순위
  • 곱셈, 나눗셈 > 덧셈, 뺄셈

변수

변수

• 데이터를 저장하는 공간의 이름
• C나 Java와 달리, 변수에 데이터 타입을 정하지 않음

변수 선언 방법

• var 키워드
• let 키워드
• const 키워드

var 키워드로 변수 선언

// var 변수 이름;
var score;
var year, month, day;

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

age = 21; // var 없이 변수 age 선언

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

let, const 키워드로 변수 선언

// let 변수 이름;
// const 변수 이름;

let score;
const year, month, day; // const는 선언하는 순간 값을 초기화해야 함, 실행X

var, let, const 비교

키워드	설명
var	이미 존재하는 변수와 같은 이름으로 변수 선언 시, 에러 발생하지 않음 변수 선언 전에 변수 사용 시, 에러 발생하지 않음 변수 생성 시, 초기값을 설정하지 않아도 됨 변수 값 재할당 가능
let	이미 존재하는 변수와 같은 이름으로 변수 선언 시, 에러 발생 변수 선언 전에 변수 사용 시, 에러 발생 변수 생성 시, 초기값을 설정하지 않아도 됨 변수 값 재할당 가능
const	이미 존재하는 변수와 같은 이름으로 변수 선언 시, 에러 발생 변수 선언 전에 변수 사용 시, 에러 발생 변수 생성 시, 반드시 초기값 설정 변수 값 재할당 불가능

변수 호이스팅(Hoisting)

• 밑에 있는 코드를 위로 끄집어 올리기
• var는 변수 호이스팅 가능

age = 5;
var age;
console.log(age);

• 실행 결과

5

• let 키워드를 사용할 경우

let age = 5; 
let phone;

phone = 1234;

console.log(age); 
console.log(phone);

• 실행 결과

5
1234

• let 키워드를 사용할 경우

  • 변수 호이스팅 불가능

    age = 5; 
    let age;
    
    console.log(age);

  • 실행 결과

    Uncaught ReferenceError: Cannot access 'age' before 
    initialization
    
    // 'age'를 초기화하기 전에 접근할 수 없음

변수 스코프(Scope)

• scope: 변수가 가질 수 있는 범위
• var - 함수 스코프

  • if문 내에서 var로 선언한 변수는 접근 가능(함수가 아니기 때문), 유리상자처럼 안이 보임

    if(true) {
    		var age = 5; 
    }
    
    console.log(age);

  • 실행 결과

    5

  • 함수 내에서 var로 선언한 변수는 해당 함수 내에서만 접근 가능, 종이상자처럼 안이 보이지 않음

    function person(){
    		var age = 5; 
    }
    
    console.log(age);

  • 실행 결과

    Uncaught ReferenceError: age is not defined
    // age가 정의되지 않음

• let, const - 블록 스코프(블록: 중괄호 안에 있는 코드)

  • let, const로 선언한 변수

    if(true) {
    		let age = 5;
    }
    
    console.log(age);

  • 실행 결과

    Uncaught ReferenceError: age is not defined
    // age가 정의되지 않음

변수 값 초기화

• 변수에 값을 할당하는 것
• 변수 나이의 값을 12로 초기화

var 나이 = 12; // 나이라는 변수를 생성과 동시에 초기화

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

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

    나이 = 13;
    ⇠ 13

변수 타입과 값

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

var score // 정상적인 변수 선언
int score // 에러, 변수 타입을 사용하지 않음

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

score = 66; // 정수 저장 가능
score = 'high' // 문자열 저장 가능

증가/감소 연산자

증가와 감소

• 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와 같은 의미

var 점수 = 10;
점수 += 7; // 점수 = 점수 + 7
⇠ 17

점수 -= 3;
⇠ 14

불리언(Boolean)

논리 연산자

• 참이나 거짓, 둘 중 하나의 값
• 참(true), 거짓(false)

불리언 연산자

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

불리언 연산자 종류

연산자	값
&&	AND
||	OR
!	NOT

&& (AND)

• 두 개의 불리언 값이 모두 참인지 확인

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

• 하나는 true, 다른 하나는 false인 경우

var 샤워하기 = true;
var 가방챙기기 = false;
샤워하기 && 가방챙기기;

⇠ false

• 둘 다 true인 경우

var 샤워하기 = true;
var 가방챙기기 = true;
샤워하기 && 가방챙기기;

⇠ true

|| (OR)

• 두 개의 불리언 값이 하나라도 true인지 확인

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

var 사과챙기기 = true;
var 오렌지챙기기 = false;
사과챙기기 || 오렌지챙기기;

⇠ true

! (NOT)

• false는 true로, true는 false로 바꿈

A	!A
참	거짓
거짓	참

var 주말인가요 = true;
var 샤워해야하나요 = !주말인가요;
샤워해야하나요;

⇠ false

논리 연산자 결합

• 논리 연산자 우선 순위

  • && > ||

    var 주말인가요 = false;
    var 샤워하기 = true;
    var 사과챙기기 = false;
    var 오렌지챙기기 = true;
    var 나가야하나요 = !주말인가요 && 샤워하기 && (사과챙기기 || 오렌지챙기기); 
    나가야하나요;
    
    ⇠ true

불리언으로 숫자 비교

• 불리언 값은 간단한 숫자 문제에 활용할 수 있음
  • 초과/이상 연산자
  • 이하/미만 연산자
  • 삼중 등호
  • 이중 등호

비교 연산

비교 연산자

• 두 값을 비교한 결과가 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 키 = 165;
var 키제한 = 150; 
키 > 키제한;
⇠ true

var 키 = 150;
var 키제한 = 150; 
키 > 키제한;
⇠ false

비교 연산자

• 이상 연산자

var 키 = 150;
var 키제한 = 150; 
키 >= 키제한;
⇠ true

• 이하/미만 연산자

var 키 = 150;
var 키제한 = 120; 
키 < 키제한;
⇠ false

var 키 = 120;
var 키제한 = 120; 
키 <= 키제한;
⇠ true

삼중 등호(일치 연산자)

• 두 숫자가 같은지 확인
  • 삼중 등호(===) 사용

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

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

      var 비밀숫자 = 5;
      var 아이언맨추측 = 3; 
      비밀숫자 === 아이언맨추측;
      ⇠ false

      var 헐크추측 = 7; 
      비밀숫자 === 헐크추측;
      ⇠ false

      var 토르추측 = 5; 
      비밀숫자 === 토르추측;
      ⇠ true

이중 등호(동등 연산자)

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

  • 이중 등호(==) 사용

    var 문자열숫자 = "5";
    var 진짜숫자 = 5;
    문자열숫자 === 진짜숫자;
    ⇠ false
    // 원본 데이터의 타입까지 생각해서 비교(엄격하게 비교)

    문자열숫자 == 진짜숫자;
    ⇠ true

조건 연산

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

• 삼항 연산자

조건 ? 참일_때의_결과 : 거짓일_때의_결과

var x = 5;
var y = 3;
var big = (x > y) ? x : y;
big;
⇠ 5

문자열

• 자바스크립트에서 문자열은 문자를 의미
  • 문자에는 글자, 숫자, 구두점, 공백이 포함
• 문자열 표현 방법

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

    "안녕하세요. 반갑습니다!"
    '안녕하세요. 반갑습니다!'

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

  var 숫자아홉 = 9;
  var 문자열아홉 = "9";

• 변수에 문자열 저장 가능

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

문자열 비교

• 비교 연산자(≠, ==, >, <, ≤, ≥) 사용 가능

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

    var name = "kitae";
    var res1 = (name == "kitae"); // res1 = true 
    var res2 = (name > "park"); // res2 = false

문자열 연결하기

• • 연산자

var 인사 = "안녕하세요."; 
var 내이름 = "정수아"; 
인사 + 내이름;
⇠ "안녕하세요.정수아"

• concat() 함수

var 인사 = "안녕하세요."; 
인사.concat("정수아입니다.");
⇠ "안녕하세요.정수아입니다."

• 따옴표 안 공백도 문자로 취급

var 인사 = "안녕하세요. "; 
var 내이름 = "정수아"; 
인사 + 내이름;
⇠ "안녕하세요. 정수아"

문자열 앞 뒤 공백 제거

• trim() 함수

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

  • 예시

    var name = " sooa "; 
    name = name.trim();
    ⇠ 'sooa'

• trim()은 어디에 사용될까?
  • 회원가입할 때 이름에 여백이 있을 경우 없애고 데이터에 저장

문자열 길이

• .length 속성
  • 문자열의 길이 값을 숫자로 반환
• 문자열 뒤에 붙이는 경우

"동해물과백두산이마르고닳도록".length; 
⇠ 14

• 문자열이 포함된 변수 뒤에 붙이는 경우

var 자바 = "자바"; 
자바.length;
⇠ 2

var 스크립트 = "스크립트";
스크립트.length;
⇠ 4

var 자바스크립트 = 자바 + 스크립트; 
자바스크립트.length;
⇠ 6

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

• 문자열의 특정 위치에 있는 글자 가져오기
  • 대괄호([ ])를 사용
  • 문자열이나 문자열이 포함된 변수 뒤에 대괄호를 쓰고, 그 안에 원하는 글자의 번호(인덱스)를 입력
    • 글자의 번호는 0부터 시작
• 예) 변수 인사의 첫 글자 가져오기

var 인사 = "안녕하세요"; 
인사[0];
⇠ "안"

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

  • charAt(n) 함수

    var 인사 = "안녕하세요.";
    인사.charAt(0);  // 안
    인사.charAt(1);  // 녕
    인사.charAt(2);  // 하
    인사.charAt(3);  // 세
    인사.charAt(4);  // 요
    인사.charAt(5);  // .

문자열 잘라내기

• 문자열의 일부를 잘라내기

  • slice(a, b) 함수

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

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

  • 문자열에서 2번 글자부터 5번 글자 전까지 잘라내기

    

문자열 변경

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

  • replace() 함수

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

• 예시

var every = "Boys and Girls";
var replace = every.replace("and", "or"); 
replace;
⇠ "Boys or Girls"

문자열 분할

• split(’구분자’) 함수
  • 하나의 문자열을 구분자를 기준으로 여러 개의 문자열로 분할한 배열 리턴
• 예시

  • 빈 칸을 기준으로 every 문자열을 "Boys", "and", "Girls"로 분할

    var every = "Boys and Girls";
    var sub = every.split(" ");

  • 결과

    sub[0] 
    ⇠ "Boys"

    sub[1] 
    ⇠ "and"

    sub[2] 
    ⇠ "Girls"

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

• 대문자로 바꾸기
  • toUpperCase() 함수

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

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

    • 예시

      "Hello there, how are you doing?".toUpperCase(); 
      ⇠ "HELLO THERE, HOW ARE YOU DOING?"

• 소문자로 바꾸기
  • toLowerCase() 함수

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

    • 예시

      "hELlo THERE, How ARE yOu doINg?".toLowerCase(); 
      ⇠ "hello there, how are you doing?"

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