JavaScript 기초 용어 정리

• JavaScript

HTML-정보 내용 및 구조 & CSS-디자인 & JavaScript-동적 기능

- 클라이언트에서 웹페이지의 동작을 담당

 

• <script> 태그

HTML 문서 내에 자바스크립트 코드를 삽입

<h1>JavaScript</h1>
<script>document.write(1+1);</script>

<h1>HTML</h1>
1+1

 

• Event

웹 브라우저의 이벤트(사용자 동작)을 감지하고, 이에 반응하여 JavaScript 코드를 실행

<h1>Event</h1>
<input type="text" onchange="alert('Text Entered')">
<input type="button" value="Button" onclick="alert('Clicked')">
<input type="text" onkeydown="alert('Key Pressed')">

 

• Console

파일을 만들지 않고 JavaScript 코드를 실행하고 테스트하는 개발자 도구 (F12)

 

• 기본 문법

- Data Type: number, string 등

- 변수(var), 상수, 대입 연산자(=)

- 웹 브라우저 제어 (DOM 조작)

- DOM(Document Object Model) : HTML 문서를 객체로 표현한 것. HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할 (참고: https://docs.tosspayments.com/resources/glossary/dom)

 

• 제어문

- 비교 연산자(===, <, >), Boolean(true, false)

- 조건문(if-else)

- 배열( [ ] )

- 반복문 (while, for)

 

• 구조화

- 함수 (parameter: 매개변수, argument: 인자)

<script>
    // 'a','b' : parameter(매개변수) (정의할 때)
    function add(a, b) {
    return a + b;
    }

    // 5, 10 : argument(인자) (호출할 때)
    var result = add(5, 10);

    document.write(result+"<br>") // 15 출력
</script>

 

- 객체 (property: 객체에 소속된 변수, method: 객체에 소속된 함수)

<script>
    var 객체명 = {
        "키1":"값1",
    };

    document.write("1: " + 객체명.키1 + "<br>"); // '1: 값1' 출력

    객체명.키2 = "값2"; // [키2]에 '값2' 추가
    document.write("2: " + 객체명.키2 + "<br>"); // '2: 값2' 출력

    객체명["키3"] = "값3"; // [키3]에 '값3' 추가
    document.write("3: " + 객체명["키3"] + "<br>"); // '3: 값3' 출력


    for(var key in 객체명) {
        document.write(key + ": " + 객체명[key] + "<br>");
    }

    객체명.메소드명 = function(){
        for(var key in this) {
            if (typeof this[key] !== 'function') {
                document.write(key + ": " + this[key] + "<br>");
            }
        }
    }
    객체명.메소드명();
 </script>

 

- 파일 분리 : .js 파일로 분리하고, HTML 문서에서 <script src="..."></script>로 불러오기

- 리팩토링 : 코드의 동작 결과는 변경하지 않고, 내부 구조를 개선하여 가독성과 유지보수성을 높이는 작업

• 라이브러리 vs 프레임워크

- 라이브러리 : 이미 만들어져 있는 함수나 클래스들의 집합체. 내 코드가 라이브러리를 호출. (React, jQuery 등)

- 프레임워크 : 전체적인 구조와 동작 방식을 미리 정해놓은 틀. 프레임워크가 내 코드를 호출. (Next.js, Vue.js, Django 등)

• UI vs API

- UI (User Interface) : 사람이 프로그램을 제어하기 위한 모든 시각적/물리적 수단

- API (Application Programming Interface) : 프로그램 간(BE와 FE간)에서 기능/데이터를 요청/사용하기 위한 규칙/프로토콜

 

 

REFERENCE : 생활코딩 JavaScript(https://opentutorials.org/course/3085)