[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(2) (250102)

mini_bang·2025년 1월 2일

LG헬로비전 DX DATA SCHOOL 4기

목록 보기

3/36

JavaScript 기초 실습

조건문과 함수 사용 (switch 문 활용):
- 점수에 따라 학점을 반환하는 함수 getgrade(score).
반복문 활용:
- for와 while 문으로 숫자를 출력.
- for 문을 활용하여 1부터 100까지의 합을 계산.

HTML & JavaScript 연동 예제

구구단 출력 프로그램:
- 사용자 입력값(input)에 따라 선택된 단의 구구단을 출력.
팩토리얼 계산 프로그램:
- 입력값에 대해 팩토리얼을 계산하여 출력.
break와 continue 활용:
- 반복문에서 특정 조건 만족 시 동작 제어.
키보드 이벤트 처리:
- keydown 이벤트로 눌린 키를 실시간으로 표시.
폼 이벤트 처리:
- submit 이벤트로 입력값 처리 후 결과를 출력.

JavaScript 객체와 클래스 실습

객체 생성 방식:
- 객체 리터럴
- Object 생성자
- 함수 생성자(constructor)
- 클래스(class) 사용
객체 속성 조작:
- 속성 조회, 추가, 수정, 삭제 예제.
클래스와 메서드:
- 클래스 생성, 메서드 정의, 그리고 인스턴스 생성.

// 실습 코드
function getgrade(score) {
    switch (true){
        case score >= 90:
            return "A";
        case score >= 80:
            return "B";
        case score >= 70:
            return "C";
        case score >= 60:
            return "D";
        default:
            return "F";
    }
}
console.log(getgrade(95));

// 실습 코드
for (let i=1; i<=5; i++) {
    console.log(i);
}

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

// 실습코드
let i = 1;
let sum = 0;

for (i = 1; i <= 100; i++) {
    sum += i;
}
console.log('1부터 100까지의 합', sum);

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단 출력</title>
</head>
<body>
    <h1> 구구단 출력</h1>

    <!-- 사용자로부터 단을 입력 받는 곳 -->
    <label for="numberInput">단을 입력하세요 (1~9):</label>
    <input type="number" id="numberInput" placeholder="1부터 9까지" onchange="generateMultiplication()">

    <h2>결과:</h2>
    <div id="result"></div>
    
    <!-- JavaScript 코드 -->
    <script>
    // 구구단 출력 함수
    function generateMultiplication() {
        const number = parseInt(document.getElementById("numberInput").value,10);
        const resultDiv = document.getElementById("result");

        // 결과를 초기화 (이전에 출력된 내용 지우기)
        resultDiv.innerHTML = "";

        // 입력값이 1~9 범위에 있는지 확인
        if (isNaN(number) || number < 1 || number > 9) {
            resultDiv.innerHTML = "1부터 9까지의 숫자만 입력해주세요.";
            return;
        }

        // 구구단 출력
        let resultText = "";    // 구구단 결과를 저장할 변수
        for (let i = 1; i <= 9; i++) {
            resultText += `${number} x ${i} = ${number * i}<br>`;
        }
        resultDiv.innerHTML = resultText; // 결과를 화면에 한번에 출력
    }
    </script>
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>팩토리얼 계산</title>
</head>
<body>
    <h1> 팩토리얼 계산</h1>
    <label for="numberInput">숫자를 입력해주세요.</label>
    <input type="number" id="numberInput" placeholder="양의 정수">
    <button onclick="calulateFactorial()">계산하기</button>
    
    <h2>결과:</h2>
    <div id="result"></div>
    
    <script>
    function calulateFactorial() {
        const number = parseInt(document.getElementById("numberInput").value,10);
        const resultDiv = document.getElementById("result");

        // 결과를 초기화 (이전에 출력된 내용 지우기)
        resultDiv.innerHTML = "";

        // 숫자가 양의 정수인지 확인
        if (isNaN(number) || number < 0) {
            resultDiv.innerHTML = "양의 정수를 입력해주세요.";
            return;
        }

        // 팩토리얼 계산(while문 사용)
        let factorial = 1;
        let i = number;
        while (i > 1) {
            factorial *= i;
            i--; // i를 1씩 줄여가며 곱셈을 진행
        }

        // 0!은 1이므로 처리
        if (number === 0) {
            factorial = 1;
        }

        resultDiv.innerHTML = `${number}! = ${factorial}`; // 결과 출력
    }
    </script>
</body>
</html>

// 실습 코드
// break 예제: 숫자 3을 찾기
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        console.log("3을 찾았어요! 반복을 종료합니다.");
        break; // 3을 찾으면 반복문을 종료
    }
    console.log(i);   // 1, 2 출력
}

// continue 예제: 짝수만 출력하기
for (let i = 1; i <= 5; i++) {
    if (i%2 !== 0) {
        continue;   // 홀수일 경우 건너뛰기
    }
    console.log(i); // 2, 4 출력
}

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>키 이벤트 예시</title>
</head>
<body>
    <h1>키보드 이벤트</h1>
    <input type=""text" id="textInput" placeholder="여기에 입력...">
    <p id="output">키 입력 결과가 여기에 나타납니다.</p>

    <script>
        document.getElementById('textInput').addEventListener('keydown', (event) => {
            document.getElementById('output').textContent = `누른 키: ${event.key}`;
        });
    </script>
    
</body>
</html>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 이벤트 예시</title>
    <style>
        body{
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        input{
            font-size: 16px;
            padding: 10px;
            width: 300px;
            margin-bottom: 10px;
        }
        #output{
            margin-top: 20px;
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>폼 이벤트 예시</h1>
    <p>아래 입력창에 텍스트를 입력하고 버튼을 클릭해 보세요.</p>

    <!-- 입력 필드 -->
    <form id="myForm">
        <input type="text" id="textInput" placeholder="여기에 입력...">
        <button type="submit">전송</button>
    </form>

    <!-- 폼 결과 출력 영역 -->
    <div id="output">이벤트 결과가 여기에 나타납니다.</div>

    <script>
        // 입력 필드와 출력 영역 선택
        const textInput = document.getElementById('textInput');
        const output = document.getElementById('output');
        const form = document.getElementById('myForm');

        // 폼 제출 이벤트 처리
        form.addEventListener('submit', (event) => {
            event.preventDefault();     // 폼의 기본 동작(페이지 새로고침)을 막음
            output.textContent = `폼이 제출되었습니다! 입력값: ${textInput.value}`;
            textInput.value = '';       // 입력 필드 초기화
        });
    </script>
    
</body>
</html>

// 실습 코드
// 리터럴(Literal) 방식: {}를 선언하면 됨. name과 age는 속성
const Person = {
    name: "라이언",
    age: 25,
}

// 객체 리터럴로 객체 생성
let person = {
    name: "John"
    age: 30,
    greet: function() {
      console.log(`Hello, my name is ${this.name}.`);
    }
};

console.log(person);

person.greet();

// Object 생성자(constructor) 방식
const Person = new Object()
Person.name = "어피치"
Person["age"] = 28

console.log(Person)

// 실습 코드
// 함수 생성자(constructor) 방식
function Person(name, age) {
    this.name = name
    this.age = age
}

const person = new Person("뉴코", 30)
console.log(person)

// 인스턴스 생성
// 컨테이너를 받는 새로운 상자로 보면 됨
let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

console.log(person1)
console.log(person2)

// 실습 코드
// 객체 속성 조회, 추가, 수정, 삭제

const Person = {
    name: "라이언",
    age: 25,
}

// 조회
console.log(Person.name)  // 라이언
console.log(Person.age) // 25

// 추가
Person.job = "개발자"
console.log(Person) // { name: '라이언', age: 25, job: '개발자' }

// 수정
Person.name = "어피치"
Person["age"] = 28

console.log(Person.name) // 어피치 -> 값이 수정됨
console.log(Person.age) // 28 -> 값이 수정됨

// 삭제
delete Person.age

console.log(Person.age) // undefined -> 값이 삭제 됨

// 실습 코드
class Person{
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

// 인스턴스 생성
let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

console.log(person1);   // Person { name: 'John', age: 30 }
console.log(person2);   // Person { name: 'Jane', age: 25 }

person1.sayHello();   // Hello, my name is John.
person2.sayHello();   // Hello, my name is Jane.

mini_bang

이전 포스트

[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(1) (241231)

다음 포스트

[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(2) (250102)

LG헬로비전 DX DATA SCHOOL 4기

JavaScript 기초 실습

HTML & JavaScript 연동 예제

JavaScript 객체와 클래스 실습

[LG헬로비전 DX DATA SCHOOL 4기] HTML/CSS/JS(1) (241231)

[LG헬로비전 DX DATA SCHOOL 4기] MySQL(1) (250103)

0개의 댓글