프론트엔드 (JavaScript)

Wonkyun Jung·2023년 3월 13일
JavaScript프론트엔드
1

프론트엔드

목록 보기
3/6
post-thumbnail

JavaScript 시작


JavaScript 선언

  • HTML에서 JavaScript를 사용하려면 <script> 태그를 사용

  • <script> 태그는 'src'와 'type'속성을 사용하여 JavaScript를 선언

  • src 속성은 외부의 JavaScript 파일을 HTML 문서에 포함할 때 사용하며 생략할 수 있다

  • type 속성은 미디어 타입을 지정할 때 사용. JavaScript 코드는 'text/javascript'로 지정


  • <script> 태그는 HTML 파일 내부의 <head>나 <body>안 어느 곳에서나 선언가능

  • 하지만 <body> 안의 끝부분에 <script> 태그를 둘 것을 권장함.

  • <head> 안에 위치한 JavaScript는 브라우저 각종 입/출력 발생 이전에 초기화 되므로 브라우저가 먼저 점검함

  • <body>안에 위치하면 브라우저가 HTML 부터 해석하여 화면 그리기 때문에 사용자가 빠르다고 느낄 수 있다


구구단 출력

  • 반복문을 이용하여 브라우저 콘솔창에 구구단을 출력하는 예제

  • 변수를 선언할 때는 숫자형이든 문자형이든 모두 var keyword를 사용

  • for문을 사용해서 연산을 9번 반복 수행하는 코드 작성

  • 연산 결과를 선언한 변수에 저장한다

  • console.log() 함수를 이용하여 브라우저의 콘솔창에 결과 출력


시계 구현

  • JavaScript의 Date 내장 객체로 현재 시간을 출력

  • date 객체의 toLocalTimeString() 함수를 호출하면 현재 시간을 return

  • <span> 태그에 시간을 출력하기 위해 innerHTML 프로퍼티에 값을 할당

  • setInterval() 함수를 이용하여 1초마다 현재 시간을 업데이트



JavaScript 기본 문법

JavaScript - 주석

  • 주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다

  • JavaScript 주석은 한 줄 주석과 블록 주석이 있다

  • 한 줄 주석인 //code로 표기하고 블록 주석은 /*code*/로 표기한다

  • 가능하면 블록 주석보다 라인 주석을 사용한다


JavaScript - 변수

  • JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언

  • JavaScript는 동적타입(Dynamic/Weak Type)언어. 변수 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 >> 같은 변수에 여러 타입의 값을 할당 가능

  • 변수 이름은 함수 이름과 혼동되지 않도록 유일한 이름을 사용

  • JavaScript는 ECMAScript 표준에 따라 낙타 표기법을 사용

  • 낙타 표기법이란 기본적으로 소문자로 작성하되 2개 이상의 단어일 경우 단어의 첫 글자는 대문자로 표기

  • 키워드, 공백 문자 포함, 숫자로 시작 X

  • 특수 문자는 _와 $허용


JavaScript - 자료형

  • 프로그램은 정적인 데이터 값을 동적으로 변환해 가면서 원하는 정보를 얻는다

  • 프로그램에서 다루는 데이터 값의 종류들을 자료형이라 표현

  • JavaScript에서는 자료형을 원시 타입과 객체 타입으로 분류

  • 원시 타입에는 숫자, 문자열 boolean,null,undefined와 같이 5가지가 있다. 이를 제외한 모든 값은 객체 타입이다

JavaScript - 자료형 - 숫자

  • JavaScript는 숫자를 정수와 실수로 나누어 구분하지 않는다
    • 모든 숫자를 8byte의 실수 형태로 처리 >> 실수로 처리(정수만을 표현하기 위한 데이터 타입은 없다)
    • 편의성을 위해 정수 리터럴과 실수 리터럴을 제공
    • 숫자의 연산 처리시 실수 형태로 하기 때문에 특정 소수점을 정확하게 표현하지 못함
  • 기본 연산 기호는 Java나 C++과 같은 일반 프로그래밍 언어와 같다

  • JavaScript는 언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않는다

  • JavaScript에는 숫자와 관련된 특별한 상수가 존재한다

    • Infinity: 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나 Infinity를 어떠한 수로 사칙연산한 결과.
    • NaN(Not a Number): 계산식의 결과가 숫자가 아님을 나타내는 상수


JavaScript - 자료형 - 문자열

  • JavaScript에서 문자열은 16비트의 Unicode 문자를 사용

  • 문자 하나를 표현하는 char와 같은 문자형은 제공하지 않는다. 'a'와 같은 한글자도 문자열로 표현

  • 작은 따옴표 또는 큰 따옴표 둘 다 사용가능. 혼용 불가

  • 이스케이프 시퀀스()도 사용가능


JavaScript - 자료형 - boolean, null과 undefined

  • boolean은 비교 연산의 결과값으로 true 또는 false중 하나의 값을 갖는다

  • 비어 있는 문자열, null, undefined, 숫자 0은 false로 간주 된다

  • null은 값이 없거나 비어 있음을 뜻하고, undefined는 값이 초기화 되지 않았음 (정의되지 않음을 의미)

  • null과 undefined는 의미가 비슷하지만 값을 할당하지 않은 변수는 undefined가 할당되고(시스템 레벨), 코드에서 명시적으로 값이 없음을 나타낼 때(프로그램 레벨)는 null을 사용


JavaScript - 자료형 - 자동 형 변환(동적 타이핑)

  • JavaScript는 Java나 C++등과 같은 언어와는 달리 자료형에 대해 매우 느슨한 규칙이 적용

  • 어떤 자료 형이든 전달할 수 있고, 그 값을 필요에 따라 변환 가능

  • 서로 다른 자료 형의 연산이 가능

  • 모든 자료 형을 var로 선언하기 때문에 변수 선언은 쉽지만 이런 느슨한 규칙 때문에 혼란을 야기할 수 있다


변수 호이스팅(Variable Hoisting)

  • var 키워드를 사용한 변수는 중복해서 선언이 가능

  • 호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성, 즉 JavaScript는 모든 선언문이 선언되기 이전에 참조가 가능

  • 변수의 생성

    • 선언 단계: 변수 객체에 변수를 등록
    • 초기화 단계: 변수 객체에 등록된 변수를 메모리에 할당. undefined로 초기화 됨
    • 할당 단계: undefined로 초기화된 변수에 실제 값을 할당


상수

  • ECMAScript6 이전까지는 상수 표현을 지원하지 않음

  • ECMAScript6 에서는 const keyword가 추가되어 상수를 지원


ECMAScript6 - let 키워드와 const 키워드

  • ECMAScript5까지는 식별자에 값을 넣는 변수의 기능은 var 키워드만 사용

  • ECMAScript6부터는 let과 const 키워드를 추가


연산자

  • JavaScript에서 기본적으로 제공하는 약속된 문자의 표현식을 연산자라 함

  • 연산자는 산술 연산자, 비교 연산자, 논리 연산자, 기타 연산자 등을 제공

  • 표현식에서 2개 이상의 연산자를 동시에 사용했을 경우 우선순위별로 표현식을 해석

  • 괄호를 사용하여 우선순위 조절 가능

  • 연산자는 연산의 대상이 되는 값에 따라서 동작이 결정

  • '+' 연산자는 대상의 값이 모두 숫자인 경우 산술 연산을 수행

  • '+' 연산자는 대상 중에 문자열이 포함된 경우 모든 연산 대상을 문자열로 변환하고 문자열 결합

  • 연산자는 종류에 따라 1항 연산자, 2항 연산자, 3항 연산자로 구분

  • a++와 a--는 각각 a = a+1과 a = a-1 연산의 축약 형태로써 증감연산자라 한다

  • 증감연산자가 앞에 오면 선증감 후실행, 뒤에 오면 선실행 후 증감

  • !연산은 NOT의 의미로 boolean형의 값을 반대로 반환

  • typeof는 해당 변수의 타입을 반환


  • 논리값을 비교하여 참, 거짓을 판단

  • 비교연산자 ==, ===의 차이점은 자료형까지 비교하는지 아닌지의 여부

  • 비교연산자 &&는 둘 중 하나라도 거짓이면 false, ||는 둘 중 하나라도 참이면 true를 반환

  • 3항 연산자의 ? 앞 비교 >> 값이 참이면 : 앞의 값이 거짓이면 : 의 뒤의 값이 반환된다


조건문 - if, switch, while, do/while, for

JavaScript의 조건문은 Java의 조건문과 거의 동일한다 (생략)



JavaScript 객체

  • 객체는 이름과 값으로 구성된 프로퍼티의 집합

  • 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체

  • JavaScript의 객체는 키와 값으로 구성된 프로퍼티들의 집합

  • 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능

  • JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용가능

  • JavaScript 객체는 프로토타입이라는 특별한 프로퍼티를 포함

객체(Object) - 생성

객체(Object) - 생성(객체 리터럴)

- 가장 일반적인 방법
- { }를 사용하여 객체를 생성. { }내에 1개 이상의 프로퍼티를 추가하여 객체를 생성

- Object 생성자 함수 - new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성 - 빈 객체 생성 후 프로퍼티 또는 메소드를 추가하여 객체를 완성
- 생성자 함수 - 동일한 프로퍼티를 갖는 객체 생성시 위 두 방법은 동일한 코드를 반복적으로 작성 - 생성자 함수를 이용하면 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간단히 생성가능

객체(Object) - 생성(Object 생성자 함수)


생성자 함수

중복되는 코드를 줄이기 위해서 생성자를 통해서 객체를 생성 (결과 값)


객체(Object) - 속성 값 조회

  • 객체는 dot(.)을 사용하거나 대괄호([])를 사용해서 속성 값에 접근. 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다

  • 객체에 없는 속성에 접근하면 undefined를 반환

  • 객체 속성 값을 조회 할 때 || 연산자를 사용하는 방법도 가능


객체(Object) - 속성 값 변경, 추가, 제거

  • 속성 값을 변경할 때는 dot(.)이나 대괄호를 사용
    • 예: member['age'] = 25; or member.age = 25;
  • 객체에 값을 할당하는 속성이 없을 경우, 그 속성은 추가됨
    • 예: member.hobby = '코딩';
  • delete 연산자를 이용하여 속성 제거
    • 예: delete member.city;

객체(Object) - 참조

  • 객체는 복사되지 않고 참조된다

  • JavaScript에서 primitive 데이터 타입이 아닌 모든 값은 참조 타입이다.

  • 참조 타입은 Object, Array, Date, Error를 포함

  • 타입 확인 방법으로는 typeof 연산자가 있다 (null은 primitive 타입이지만 typeof 연산자에서 object를 반환)


객체(Object) - 분류


함수(function) - 선언, 호출

  • JavaScript에서 함수는 일급(first-class)객체이다

  • 함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자(콜백함수) 또는 리턴 값으로 사용가능

  • 함수는 프로그램 실행 중에 동적으로 생성 가능

  • 함수 정의 방법은 함수 선언문, 함수 표현식, Function 생성자 함수 세가지 방식 제공


함수(function) - 함수 호이스팅

  • 함수 선언문의 경우 함수 선언 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능

  • JavaScript는 모든 선언(var, function)을 호이스팅함

  • 함수 선언문으로 정의된 함수는 JavaScript 엔진이 스크립트가 로딩되는 시점에 이를 변수객체에 저장한다. 함수 선언, 초기화, 할당이 한번에 이루어진다

  • 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생

주의: 함수 선언문으로 함수를 정의하면 사용하기는 쉽지만 대규모 application을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체에 저장하므로 application의 응답속도를 저하시킬 수 있다


함수(function) - 매개변수

  • 함수의 정의 부분에 외부로부터 전달받을 변수를 매개변수라고 함

  • 함수를 호출할 때 전달하는 값을 전달인자라고 함

  • JavaScript에서 함수 정의 시 매개변수에 대한 타입은 명시하지 않는다

  • 함수를 호출할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출가능


함수(function) - 활용

  • 1부터 매개변수 num 까지의 합을 구하는 예제

  • 각각 함수 선언문과 함수 표현식, Function 생성자 함수 호출이다

  • 방식은 달라도 함수 호출 방식은 같다


함수(function) - 콜백 함수

  • 콜백 함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말함

  • 일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행됨

  • 콜백 함수는 주로 비동기식 처리 모델에서 사용됨 >> 처리가 종료되면 호출될 함수 (콜백함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출

  • Event Handler에서의 처리 예

<button id="btn">click!!</button>
    <script type="text/javascript">
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function () {
        console.log("안녕하세요 여러분!!");
      });
     </script>
  • setTimeout()의 예
	<script type="text/javascript">
      setTimeout(function () {
        console.log("3초후 실행됩니다.");
      }, 3000);
    </script>


Web Browser 와 Window 객체

Window 객체

  • window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체이다

  • window 객체에는 브라우저와 관련된 여러 객체와 속성 함수가 있다

  • JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함 (Number 객체, setInterval())

  • BOM(Browser Object Model)으로 불리기도 함


Window 객체 - alert, confirm, prompt

  • window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open

  • alert(): 브라우저의 알림 창

  • confirm(): 브라우저의 확인/취소 선택 창

  • prompt(): 브라우저의 입력 창


Window 객체 - navigator

  • navigator 객체는 브라우저의 정보가 내장된 객체

  • navigator의 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우저 별로 다르게 처리 가능


Window 객체 - location, history

  • location 객체를 이용하여 현재 페이지 주소(URL)와 관련된 정보들을 알 수 있다

    • location.href: 프로퍼티에 값을 할당하지 않으면 현재 URL을 조회하고 값을 할당하면 할당 된 URL로 페이지 이동
    • location.reload(): 현재 페이지를 새로고침

  • history 객체는 브라우저의 페이지 이력을 담는 객체

    • history.back()/history.forward(): 브라우저의 뒤로가기/ 앞으로 가기 버튼과 같은 동작


새 창 열기

  • window 객체의 open() 함수를 사용하면 새 창을 열 수 있다

  • window.open('페이지 URL','창 이름', '특성', 히스토리 대체여부);

    • 창 이름(string): open 할 대상(_blank,_self등) 지정 혹은 창의 이름
    • 특성(string): 새로 열릴 창의 너비, 높이 등의 특성 지정
    • 히스토리 대체여부(Boolean): 현재 페이지 히스토리에 덮어 쓸지 여부(true/false)


새 창 열기 - 창 열고 닫기

  • 이벤트를 이용하여 특정 시점에 창을 열 수 있다

    • 페이지 로딩 완료 후 새 창 열기, 클릭할 때 새 창 열기 등

    • window 객체의 close()함수로 창을 닫을 수 있다

    • 특히 브라우저에 내장된 창이 아닌 JavaScript로 자체 구현한 팝업에서 필요


profile
Wonkyun Jung
이전 포스트

프론트엔드 (CSS)

다음 포스트

프론트엔드 (Event,JSON/WebStorage)

1개의 댓글

comment-user-thumbnail
JIN
2023년 3월 14일

콜백함수 잘보고 갑니다~~!!👍

답글 달기