[JavaScript] 기본문법 / 함수 / 이벤트

Backend/Web

[JavaScript] 기본문법 / 함수 / 이벤트

해로몬 2024. 11. 6. 16:34

자바스크립트 - 기본문법

1. 변수 선언

JavaScript에서는 데이터를 저장하기 위해 변수를 사용합니다. 변수를 선언할 때는 let, const, var를 사용합니다.

let: 블록 스코프를 가지며, 값이 변경 가능한 변수를 선언할 때 사용합니다.
const: 상수로, 값을 변경할 수 없는 변수를 선언할 때 사용합니다.
var: 함수 스코프를 가지며, 과거에 사용하던 변수 선언 방식입니다.

let age = 25;             // 블록 스코프 변수
const birthYear = 1995;   // 상수, 값 변경 불가
var name = "홍길동";       // 함수 스코프 변수

2. 데이터 타입과 형 변환

JavaScript의 주요 데이터 타입에는 Number, String, Boolean, null, undefined, Object 등이 있습니다. 필요에 따라 데이터를 다른 타입으로 변환할 수 있습니다.

형 변환 예제:

  let str = "123";
  let num = Number(str); // 문자열을 숫자로 변환

3. 연산자

JavaScript에는 산술 연산자, 비교 연산자, 논리 연산자 등 다양한 연산자가 있습니다.

산술 연산자: +, -, *, /, % 등
비교 연산자: ==, !=, ===, !==, >, <, >=, <=
논리 연산자: && (AND), || (OR), ! (NOT)

let a = 10;
let b = 20;
let result = a + b;       // 30
let isEqual = (a === b);  // false

4. 조건문

조건문을 사용하여 특정 조건에 따라 다른 코드를 실행할 수 있습니다. JavaScript에서는 if-else 문과 switch 문이 주로 사용됩니다.

let age = 18;
if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

let day = 2;
switch (day) {
    case 0:
        console.log("일요일");
        break;
    case 1:
        console.log("월요일");
        break;
    default:
        console.log("주중");
}

5. 반복문

반복문을 사용하여 같은 코드를 여러 번 실행할 수 있습니다. 자주 사용되는 반복문으로는 for, while, do-while이 있습니다.

// for
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

// while
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// do-while
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

<추천 사이트>

W3Schools

W3Schools는 간단한 예제와 설명을 통해 JavaScript를 쉽게 이해할 수 있도록 구성된 웹 개발 학습 사이트입니다. JavaScript뿐 아니라 HTML, CSS, SQL 등 다양한 웹 기술을 학습할 수 있으며, JavaScript 예제와 연습 문제가 많아 초보자가 기초를 다지기에 좋습니다.

W3Schools JavaScript Tutorial

MDN Web Docs (Mozilla Developer Network)

MDN은 JavaScript에 대한 공식 문서로, 기본 문법부터 고급 개념까지 체계적으로 정리되어 있습니다. JavaScript뿐만 아니라 HTML, CSS, 웹 API에 대한 설명도 제공하므로 웹 개발 전반에 걸쳐 학습하기에 좋습니다.

JavaScript 시작하기: JavaScript 기초 - MDN
JavaScript 전체 개요: JavaScript Reference - MDN

JavaScript.info

JavaScript.info는 실습 중심의 JavaScript 학습 사이트로, 초급부터 고급까지의 개념을 잘 다룹니다. 특히, ES6 이후의 최신 JavaScript 문법과 기능들이 자세히 설명되어 있어 모던 JavaScript 학습에 큰 도움이 됩니다.

JavaScript.info - JavaScript 튜토리얼

수업코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <!-- 화면 크기에 따라 레이아웃을 조정하도록 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">
        'use strict';  // 엄격 모드 활성화 - 오류를 예방하고 코드를 안전하게 작성하기 위해 사용

        // 변수 선언
        let num1 = 'Hello';  // let으로 선언한 변수 (블록 스코프)

        // 상수 선언
        const NUM2 = 'Hello';  // const로 선언한 상수 (값을 변경할 수 없음)

        console.log(num1);     // 예상 출력: Hello
        console.log(NUM2);     // 예상 출력: Hello

        // 구형 변수 선언
        var num3 = 'Hello';  // var로 선언한 변수 (함수 스코프, 재선언 가능)
        console.log(num3);     // 예상 출력: Hello

        // 더 구형 변수 선언 (변수 선언 없이 사용, 엄격 모드에서는 오류 발생)
        num4 = 'Hello';
        console.log(num4);     // 예상 출력: Hello (엄격 모드에서는 ReferenceError 발생)

        // 내용 변경 예제
        num3 = 'Hello2';       // var 변수는 값 변경 가능
        console.log(num3);     // 예상 출력: Hello2
    </script>

</body>

</html>

함수

함수 선언 : 기본 구조

function 함수명(매개변수1, 매개변수2, ...) {
    // 함수가 수행할 코드
    return 반환값;  // (선택 사항) 함수의 결과를 반환
}

1. 함수 선언문 (Function Declaration)

함수 선언문을 사용하여 함수를 정의할 수 있습니다. 함수 선언문은 function 키워드로 시작하며, 함수 이름, 매개변수, 함수 본문으로 구성됩니다.

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("홍길동");  // 출력: Hello, 홍길동!

2. 함수 표현식 (Function Expression)

함수 표현식은 함수 자체를 변수에 할당하는 방식입니다. 이 경우 함수에 이름을 붙이지 않으면 익명 함수가 됩니다.

const add = function (a, b) {
    return a + b;
};
console.log(add(3, 5));  // 출력: 8

3. 화살표 함수 (Arrow Function)

ES6에서 도입된 화살표 함수는 더 간결한 문법으로 함수를 작성할 수 있는 방식입니다. 특히 함수 본문이 한 줄일 경우 중괄호와 return 키워드를 생략할 수 있습니다.

const multiply = (a, b) => a * b;
console.log(multiply(2, 3));  // 출력: 6

        // 일반 함수
        const func1 = function () {
            console.log("func1");
        }

        // 화살표 함수
        const func2 = () => {
            console.log("func2");
        }

        // 화살표 함수 한줄
        const func3 = () => console.log("func3");

        // 화살표 함수 인자 한줄
        const func4 = (data1) => console.log("func4 ", data1);

수업코드

익명 함수 선언

<head>
   
    <script type="text/javascript">
        // 함수 표현식으로 func1 선언 - 익명 함수를 변수 func1에 할당
        const func1 = function () {
            console.log("func1"); // "func1" 출력
        }
    </script>
</head>

<body>
    <script type="text/javascript">
        // func1 함수 호출
        func1();                  // 예상 출력: func1
        
        // func1 함수 자체를 출력 (함수의 정의가 출력됨)
        console.log(func1);       // 예상 출력: function() { console.log("func1"); }

        // func1의 자료형을 출력 (자료형은 function)
        console.log(typeof func1); // 예상 출력: function

        // func2에 func1을 할당 (func2는 func1과 동일한 함수가 됨)
        let func2 = func1;
        func2();                  // 예상 출력: func1
    </script>

</body>

콜백 함수

<head>
    <script type="text/javascript">
        // 일급함수 : 함수를 변수에 담을 수 있고, 함수의 인자로 전달할 수 있고, 함수의 반환값으로 사용할 수 있는 함수

        // 콜백 함수 : 함수의 인자로 전달되는 함수
        const callback = function () {
            console.log("callback");
        }

        // 콜백 함수를 인자로 받아서 2번 호출하는 함수
        const mainfunc = function (data) {
            for (let i = 0; i <= 2; i++) {
                data();
            }
        }

        // 함수를 반환하는 함수
        const rfunc = function () {
            return function () {
                console.log("rfunc");
            }
        }
    </script>
</head>

<body>
    <script type="text/javascript">
        // 콜백 함수를 인자로 전달하는 함수 호출
        mainfunc(callback);

        // 함수를 반환하는 함수 호출
        rfunc()();
    </script>

</body>

이벤트

1. 이벤트의 기본 개념

이벤트는 웹 브라우저에서 발생하는 특정 상황을 의미합니다. 각 이벤트는 특정 동작에 반응하도록 설정된 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)를 통해 처리됩니다.

이벤트(Event): 사용자의 상호작용이나 페이지의 상태 변화(클릭, 키보드 입력, 로딩 등)입니다.
이벤트 핸들러(Event Handler): 특정 이벤트가 발생했을 때 실행되는 함수입니다.

2. 자주 사용하는 이벤트 유형

다양한 이벤트 유형이 있으며, 주요 이벤트는 다음과 같습니다.

마우스 이벤트
- click : 요소를 클릭할 때 발생
- dbclick : 요소를 더블 클릭할 때 발생
- mouseover : 요소 위로 마우스를 올렸을 때 발생
- mouseout : 요소에서 마우스를 벗어날 때 발생
키보드 이벤트
- keydown : 키를 눌렀을 때 발생
- keyup : 키를 뗐을 때 발생
- keypress : 키를 누르고 있는 동안 발생(권장 x)
폼(Form) 이벤트
- submit : 폼이 제출될 때 발생
- change : 입력 요소의 값이 변경될 때 발생
- focus : 요소의 포커스를 받을 때 발생
- blur : 요소가 포코스를 잃을 때 발생
문서/윈도우 이벤트
- load : 페이지가 로드될 때 발생
- resize : 창의 크기가 변경될 때 발생
- scroll : 사용자가 스크롤할 때 발생

저작자표시 비영리 변경금지 (새창열림)

'Backend > Web' 카테고리의 다른 글

JSP(Java Server Page)/Sevelt (1)	2024.11.07
[JavaScript] DOM 폼 (1)	2024.11.06
[JavaScript]배열 / 객체 / 내장클래스 (3)	2024.11.06
[HTML] Form (0)	2024.11.05
Apache Tomcat 실행 및 HTML 기본태그 (4)	2024.11.05

현재글[JavaScript] 기본문법 / 함수 / 이벤트

VIVA LA VIDA

조금씩 나아가는 🐣

오토언박싱, 2024, 기록, java, RBF, 김영한의 실전자바, 운영체제, SQLD 자격증, sql 개발자, SQL, Til, wrapper클래스, nullable, 실전 자바, 티스토리챌린지, 데이터베이스 백업, SQL개발자, 오블완, 데이터베이스 복원, 김영한,

Today :
Yesterday :

VIVA LA VIDA