상세 컨텐츠

본문 제목

25.01.02 목요일 3회차........................

Data School

by 넨! 2025. 1. 3. 09:04

본문

JavaScript_switch

  • if-else if 구조를 단순화
  • 여러 조건을 처리할 때 유용
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));
console.log(getGrade(82));
console.log(getGrade(55));

 

 

JavaScript_for(고정된 횟수의 반복), while

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

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

 

***********

<!DOCTYPE html>
<html lang="ko">
<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()">
    <!--'onchange' event occurs when the value of an HTML element is changed-->

    <h2>결과:</h2>
    <div id="result"></div>


    <!--JavaScript 코드-->
    <script>
        //구구단 출력 함수
        function generateMultiplication() {
            const number = parseInt(document.getElementById("numberInput").value,10);
            const resultDiv = document.getElementById("result");
            //const is a keword used to declare a variable that cannot be reassigned a new value.
            //parseInt function converts its first argument to a string, parses that string, then returns an integer or NaN.

            
            //결과를 초기화 (이전에 출력된 내용 지우기)
            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>`; //줄바꿈을 위해 <br> 추가

            }
            resultDiv.innerHTML = resultText; // 결과를 화면에 한번에 출력
        }
    </script>
</body>
</html>

 

do while문

let sum=0;
for (let i=1;1<=100;i++){
    sum+=i;
}
console.log('합',sum)

 

 

break문

  • 반복문을 강제로 종료
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 출력
}

 

키 이벤트

이벤트 설명
keydown 키를 눌렀을 때 이벤트가 발생
keyup 키를 떼었을 때 이벤트가 발생
keypress 키를 누른 상태에서 이벤트가 발생

 

<!DOCTYPE html>
<html lang="ko">
<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>

 

 

폼 이벤트

이벤트 설명
focus 요소에 포커스가 이동되었을 때 이벤트 발생
blur 요소가 포커스가 벗어났을 때 이벤트 발생
change 요소에 값이 변경 되었을 때 이벤트 발생
submit submit 버튼을 눌렀을 때 이벤트 발생
reset  reset 버튼을 눌렀을 때 이벤트 발생
select  input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 이벤트 예시</title>
    <style>
        body {
            font-family: Arial, Helvetica, 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>

 

객체

  • 객체: 실체화된 '실제의 물체'

1. 객체 리터럴 (Object Literal) 방식

: 중괄호를 선언하면 된다. 안에 name과 age는 속성(property)

 

2. 객체 생성자(Object Constructor) 방식

: new Object()를 먼저 선언하고 속성을 나중에 정의

 

3. 함수 생성자(function Constructor) 방식

: 인스턴스 생성 => 컨테이너를 받는 새로운 상자

MySQL

 

 

저작자표시 비영리 변경금지

'Data School' 카테고리의 다른 글

2025.01.07 화요일 꺅!  (0) 2025.01.07
2025.01.06 월 요 일...........  (0) 2025.01.07
2025.01.03 금요일!!!!4일차  (1) 2025.01.03
2024.12.31 화요일 2일차악!  (2) 2024.12.31
2024.12.30 월요일 1일차..빅데이터 기초  (3) 2024.12.30

관련글 더보기

티스토리툴바