2024.12.31 화요일 2일차악!

Data School

by 넨! 2024. 12. 31. 17:40

행(row) - 가로, 열(column) - 세로 => 행렬(matrix)

열의 데이터 하나하나가 모여서 행이 되는 것이다.

행이 많은게 좋을까? 아니면 열이 많은게 좋을까?

변수값보다 데이터가 많은 것이 좋다.

thead: 표의 헤더 부분을 정의함. 보통 열 제목이 들어감. (정보)
tbody: 표의 본문 데이터를 정의함. (컨텐츠)
tfoot: 표의 푸터 부분을 정의하며, 총합이나 요약 정보를 포함함. (총계)
**header = 내비게이션, content = 사용자가 볼 핵심 내용, footer = 사이트 정보

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>thead, tbody, tfoot 태그 예시</title>
    <style>
        table {
            width: 60%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        tfoot {
            background-color: #f9f9f9;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>thead, tbody, tfoot 태그 예시</h1>

    <table>
        <caption>2024년 1분기 판매 보고서</caption>
        <thead>
            <tr>
                <th>제품명</th>
                <th>판매량</th>
                <th>가격(단위: 원)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>스마트폰</td>
                <td>500</td>
                <td>800, 000</td>
            </tr>
            <tr>
                <td>태블릿</td>
                <td>200</td>
                <td>500, 000</td>
            </tr>
            <tr>
                <td>노트북</td>
                <td>150</td>
                <td>1, 200, 000</td>
        </tbody>
        <tfoot>
            <tr>
                <td>합계</td>
                <td>850</td>
                <td>-</td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

HTML 기본_행이나 열을 합치기

rowspan: 행(row)을 병합할 때 사용됨.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width:60%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Rowspan 예시</h1>

    <table>
        <caption>부서별 직원 목록</caption>
        <thead>
            <tr>
                <th>부서</th>
                <th>직원 이름</th>
                <th>직책</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">기획팀</td>
                <td>김철수</td>
                <td>팀장</td>
            </tr>
            <tr>
                <td>이영희</td>
                <td>사원</td>
            </tr>
            <tr>
                <td>박민효</td>
                <td>인턴</td>
            </tr>
            <tr>
                <td rowspan="2">개발팀</td>
                <td>최지훈</td>
                <td>팀장</td>
            </tr>
            <tr>
                <td>유진아</td>
                <td>사원원</td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

colspan: 열(colum)을 병합할 때 사용됨.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colspan 예시시</title>
    <style>
        table {
            width:60%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Colspan 예시</h1>

    <table>
        <caption>2024년 1분기 매출 보고서서</caption>
        <thead>
            <tr>
                <th>지역</th>
                <th colspan="3">매출 정보</th>
            </tr>
            <tr>
                <th></th>
                <th>제품 A</th>
                <th>제품 B</th>
                <th>제품 C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>서울</td>
                <td>1,000</td>
                <td>800</td>
                <td>600</td>
            </tr>
            <tr>
                <td>부산</td>
                <td>700</td>
                <td>500</td>
                <td>400</td>
            </tr>
            <tr>
                <td>대구</td>
                <td>500</td>
                <td>400</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>합계</td>
                <td colspan="3">6,200</td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

HTML_이미지 삽입하기

img src="이미지 파일 경로"
alt ="대체용 텍스트" *이미지를 표현할 수 없을때 하는 표현

<!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>
    <img src="https://example.com/image/photo.jpg" alt="여행 사진">
</body>
</html>

<!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>
    <img src="./Berlin.webp" alt="여행 사진" width="300" height="200">
</body>
</html>

HTML_하이퍼링크 삽입

<a href="링크할 주소"> 텍스트 또는 이미지 </a>
a는 위치를 저장
target은 속성이 여러가지가 있는데, blank는 새 탭에서 실행된다. parent 창에서 그대로, self는 창에서 그대로...

<!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>
    <p><a href="https://www.google.com" target="_blank"> 구글로 이동 </a></p>
</body>
</html>

<!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>
    <p><a href="mailto:berryshine2u@gmail.com"> 이메일 보내기 </a></p>
</body>
</html>

HTML_form 태그

HTML에서 사용자로부터 데이터를 입력받기 위한 폼을 만드는 데 사용됨.
<form [속성="속성 값"]> 여러 폼 요소 </form>
/submit ->
로컬서버: 내 컴퓨터에서만 돌아감, 그래서 내가 만든 파일로 다른 사람이 접속을 못함(배포를 안했음)
www는 전체공개

<!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>
    <form action="/submit" method="post">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required><br><br>

        <input type="submit" value="제출">
    </form>
</body>
</html>

<!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>
    <form action="/submit" method="post">
        <label>취미를 선택하세요:</label><br>
        <input type="checkbox" id="hobby1" name="hobby" value="독서">
        <label for="hobby1"> 독서</label><br>
        <input type="checkbox" id="hobby2" name="hobby" value="여행">
        <label for="hobby2"> 여행</label><br><br>

        <label>성별을 선택하세요:</label><br>
        <input type="radio" id="male" name="gender" value="남성">
        <label for="male"> 남성</label><br>
        <input type="radio" id="female" name="gender" value="여성">
        <label for="female"> 여성</label><br><br>

        <input type="submit" value="제출">
    </form>
</body>
</html>

HTML_input

<input type="submit" | "rest" value = "서버로 넘길 값">:
type="submit": 사용자가 폼을 제출할 때 사용됨. 폼에 작성한 데이터를 서버로 전송하거나 처리할 떄 사용됨.
type="reset": 사용자가 폼에 입력한 모든 데이터를 초기화(리셋)하는 버튼.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 폼 예시</title>
</head>
<body>
    <h1>사용자 정보 입력 폼</h1>

    <!-- 폼 시작 -->
    <form action="/submit" method="post">
        <!-- 사용자 이름 입력 -->
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required><br><br>

        <!-- 이메일 입력 -->
        <label for="email">이메일:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <!-- 비밀번호 입력-->
        <label for="password">비밀번호:</label><br>
        <input type="password" id="password" name="password" required><br><br>

        <!-- 성별 선택 (라디오 버튼)-->
        <label>성별:</label><br>
        <input type="radio" id="male" name="gender" value="남성">
        <label for="male"> 남성</label><br>
        <input type="radio" id="female" name="gender" value="여성">
        <label for="female"> 여성</label><br><br>

        <!-- 취미 선택 (체크박스) -->
        <label>취미:</label><br>
        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">독서</label><br>
        <input type="checkbox" id="travel" name="hobby" value="travel">
        <label for="travel">여행</label><br>
        <input type="checkbox" id="movies" name="hobby" value="movies">
        <label for="movies">영화 감상</label><br>

        <!-- 파일 업로드 -->
        <label for="profile_pic">프로필 사진:</label>
        <input type="file" id="profile_pic" name="profile_pic" accept="image/*"><br><br>

        <!-- 제출 및 리셋 버튼 -->
        <input type="submit" value="제출">
        <input type="reset" value="초기화"><br><br>
    </form>
    <!-- 폼 끝 -->
</body>
</html>

HTML_input

<input type="hidden" name="이름" value="서버로 넘길 값">:
사용자가 볼 수 없고, 웹 폼에서 데이터를 서버로 전송하는 데 사용되는 입력 필드.
주로 폼의 데이터를 서버로 전송하는데 필요하지만 사용자에게 표시되지 않는 값을 전달할 때 사용됨.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hidden Input 예제</title>
</head>
<body>
    <h1>사용자 정보 폼</h1>

    <!-- 폼 시작 -->
    <form action="/submit" method="post">
        <!-- 사용자 이름 입력 -->
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required><br><br>

        <!-- 숨겨진 필드 -->
        <input type="hidden" name="user_id" value="12345">
        <input type="hidden" name="referrer" value="homepage">

        <!-- 제출 및 리셋 버튼 -->
        <input type="submit" value="제출">
    </form>
    <!-- 폼 끝 -->
</body>
</html>

HTML_input

<input type="text placeholder = "ㅇㅕ기에 이름을 입력하세요">:
placeholder 속성은 사용자가 입력 필드에 값을 입력하지 않았을 때, 입력 필드 안에 회색으로 나타나는 예시 텍스트를 지정하는데 사용됨.
이 텍스트는 사용자가 필드에 데이터를 입력하기 전까지 보이며, 사용자가 입력을 시작하면 사라짐.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placehodler 예제</title>
</head>
<body>
    <h1>사용자 정보 입력</h1>

    <!-- 폼 시작 -->
    <form action="/submit" method="post">
        <!-- 사용자 이름 입력 -->
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" placeholder="이름을 입력하세요" required><br><br>

        <!-- 이메일 입력 -->
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" placeholder="example@domain.com" required><br><br>

        <!-- 제출 및 리셋 버튼 -->
        <input type="submit" value="제출">
    </form>
    <!-- 폼 끝 -->
</body>
</html>

HTML_datalist_option

<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id"
- <option value="서버로 넘길 값1">선택 옵션1</option>
- <option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>

CSS(Cascading Style Sheets)

HTML로 뼈대를 잡아준 문서에, style을 입혀주는 역할을 함.

CSS문서 내 주석 처리는 /* 주석으로 표시할 내용 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS세상</title>
    <style>
        /* CSS */
        p { color: red; }
    </style>
</head>
<body>
    <h1>CSS세상</h1>
    <p>CSS 기본 사용방법 입니다.</p>
</body>
</html>

타입 선택자(Type Selector): 특정 HTML 태그(요소)에 스타일링을 적용하는 방법, 타입 선택자는 선택한 태그 이름을 그대로 사용하여 스타일을 지정함.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 타입 선택자 예시</title>
    <style>
        h1 {
            color: blue; /* set h1 text color in blue */
            font-size: 36px; /* set font size to 36px */
        }

        p {
            color: green; /* set p text color in green */
            font-family: Arial, Helvetica, sans-serif; /* set font to Arial*/
            line-height: 1.5; /* set line height 1.5 */
        }

        ul {
            list-style-type: square; /* mark the square icon in front of the list item */
            margin-left: 20px; 
        }

        a {
            text-decoration: none; /* hyperlink's underline is deleted */
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>타입 선택자 예시시</h1>
    <p>이 문장은 green색으로 표시됩니다.</p>
    <ul>
        <li>아이템 1</li>
        <li>아이템 2</li>
        <li>아이템 3</li>
    </ul>
    <a href="https://www.example.com">여기를 클릭하세요</a>
</body>
</html>

클래스 선택자(Class Selector): 특정 클래스에 속한 HTML 요소에 스타일을 적용하는 방법

클래스 선택자는 .(닷) 기호를 사용하여 정의합니다.
클래스 선택자는 여러 요소에 동일한 스타일을 적용할 수 있기 때문에 매우 유용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 클래스 선택자 예시</title>
    <style>
        .highlight {
            color: orange; /* set h1 text color in blue */
            font-weight: bold; /* set font size to 36px */
        }

        .intro {
            font-size: 20px;
            font-family: 'Arial', sans-serif;
        }

        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>클래스 선택자 예시</h1>

    <p class="highlight">이 문장은 오렌지색이고 굵게 표시됩니다.</p>
    <p class="intro">이 문장은 Arial 폰트로 20px 크기로 표시됩니다.</p>

    <div class="fotter">
        <p>이것은 푸터입니다.</p>
    </div>
</body>
</html>

아이디 선택자(Id Selector): 특정 HTML 요소에 대해 고유한 스타일을 적용할 때 사용됨.

아이디 선택자는 # 기호를 사용하여 정의합니다.
클래스는 한 영역(계층적 구조), 아이디는 고유의 영역
하나의 페이지에서 각 아이디는 유일해야 하므로, 같은 아이디를 여러 번 사용할 수 없습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 아이디 선택자 예시</title>
    <style>
        #main-title {
            color: blue;
            font-size: 40px;
            text-align: center;
        }

        #header {
            background-color: lightblue;
            padding: 20px;
        }

        #footer {
            background-color: darkgray;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 id="main-title">아이디 선택자 예시</h1>
    </div>

    <p>이 예시는 아이디 선택자를 사용하여 스타일을 적용한 예시입니다.</p>

    <div id="footer">
        <p>이것은 푸터입니다.</p>
    </div>
</html>

폰트 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 폰트 예제</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?fmaily-Nanum+Pen+Script&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Nanum Pen Script', Arial, sans-serif;
        }
        body {
            margin: 20px;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-weight: 400;
            font-size: 2em;
        }
        label {
            font-size: 18px;
            margin-right: 10px;
        }
        input {
            padding: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>옵션 입력 또는 선택하기</h1>
    <form>
        <label for="options">옵션을 입력하거나 선택하세요:</label>
        <input list="options" id="optionInput" name="optionInput" placeholder="옵션 입력">
        <datalist id="options">
            <option value="옵션 1">
            <option value="옵션 2"> 
            <option value="옵션 3">             
        </datalist>
    </form>
</body>
</html>

JavaScript

객체(Object) 기반의 스크립트 언어.

웹의 동작을 구현.

HTML의 내용을 변경할 수도 있고, 속성과 스타일도 변경이 가능하다.

저장은 느려도 호출은 빠르다.

JavaScript_기초

이벤트 처리: onclick 속성을 이용해 버튼을 클릭했을 때 자바스크립트 함수가 실행되도록 해보자.

<!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>
    <button onclick="greet()">인사하기</button>

    <script>
        function greet() {
            alert("안녕하세요, 자바스크립트!");
        }
    </script>
</body>
</html>

JavaScript_변수

Var: 함수 스코프를 가지며, 재선언과 재할당이 가능함. / 선언된 변수는 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없음.
let: 블록 스코프를 가지며, 재할당은 가능하지만 재선언은 불가능함 / {} 감싸진 코드 블록 내에서만 유효함.
const: 블록 스코프를 가지며, 재선언도 재할당도 불가능함 / 상수로 사용할 때 사용하며 초기값을 반드시 할당해야 함.

Var: 함수 스코프를 가지며, 재선언과 재할당이 가능함.

선언된 변수는 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없음. / 중복 선언 가능 / 같은 이름의 변수를 다시 선언할 수 있다.

전역변수: 함수 밖에 있는거, 전역변수는 지역변수에 영향을 줌

지역변수: 함수 안에 있는거, 지역변수는 전역변수에 영향을 주지 않

-> 변수의 재활용 때문에 한다.

Scope: the current context of code, which determines the accessibility of variables to JavaScript

console.log -> 프린트 문

function testVar() {
    if (true) {
        var a = 5;
    }
    console.log(a); // 5: 함수 전체에서 접근 가능
}
testVar();

var x = 10;
var x = 20; // 중복 선언 가능
console.log(x); //20

let

블록 스코프를 가지며, 재할당은 가능하지만 재선언은 불가능함.
{} 감싸진 코드 블록 내에서만 유효함
중복 선언 불가
같은 스코프 내에서 동일한 이름의 변수를 다시 선언할 수 없다.

function testLet() {
    if(true) {
        let b = 10;
        console.log(b); // 10: 블록 내부에서만 이용
    }
    // console.Log(b); // ReferenceError: b is not defined
}

testLet();

let y = 15;
// let y = 25; // SyntaxError: indentifier 'y' has already been declared
y = 25; // 재할당은 가능
console.log(y); //25

const

블록 스코프를 가지며, 재선언도 재할당도 불가능함.
상수로 사용할 때 사용하며 초기값을 반드시 할당해야 함.
중복 선언 불가
- 같은 스코프 내에게 동일한 이름의 변수를 다시 선언할 수 없습니다.
재할당 불가
- 선언된 변수에 새로운 값을 할당할 수 없습니다.
- 하지만 객체나 배열의 내부값은 변경 가능함

function testConst() {
    if(true) {
        const c = 30;
        console.log(c); // 30: 블록 내부에서만 이용
    }
    // console.Log(b); // ReferenceError: b is not defined
}

testConst();

const z = 15;
// z = 50; // TypeError: Assignment to constant variable

const obj = {name: "Alice"};
obj.name = "Bob"; // 객체 내부 값은 변경 가능
console.log(obj); // {name: "Bob"}

JavaScript_기초

입력받기: document.getElementById('nameInput').value -> 입력된 값을 가져오는 방법.
결과 표시하기: document.getElementById('result').innerText => 결과를 특정 위치에 출력하는 방법.

<!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>
    <p>이름을 입력하고 "확인" 버튼을 눌러보세요!</p>
    
    <input id="nameInput" placeholder="여기에 이름 입력">
    <button onclick="showName()">확인</button>
    <p id="result"></p>

    <script>
        //버튼을 누르면 실행될 함수
        function showName() {
            //이름 입력받기
            var name = document.getElementById('nameInput').value;

            //이름이 입력되지 않았을 때
            if (name === "") {
                document.getElementById('result').innerText = "이름을 입력해주세요!";
            }
            
            //이름이 입력되었을 때
            else {
                document.getElementById('result').innerText = "안녕하세요,  "+ name + "님!";
            }
        }
    </script>
</body>
</html>

JavaScript_자료형

//1. 숫자(Number)
let age = 25;
console.log("나이:", age);

//2. 문자열(String)
let name = "철수";
console.log("이름:", name);

console.log(age+name) //객체이기 때문에 붙을 수 있고, 연산은 일어나지 않는다.

// 3. 불리언 (Boolean)
let isStudent = true;
console.log("학생인가요?", isStudent);

// 4. 배열 (Array) //순서가 있다 (0부터)
let favoriteFoods = ["피자", "초밥", "치킨"];
console.log("좋아하는 음식:", favoriteFoods);

// 5. 객체(Object)
let person = {
	name: "철수",
    age: 25,
    isStudent: true,
};
console.log("사람 정보;", person);

//6. null (빈공간)
let car = null;
console.log("자동차:", car);

//7. undefined
let job;
console.log("직업:", job);

JavaScript_산술연산자(Arithmetic Operators)

let a = 10;
let b = 3;

console.log("더하기:", a+b);
console.log("빼기:", a-b);
console.log("곱하기:", a*b);
console.log("나누기:", a/b);
console.log("나머지:", a%b);

JavaScript_대입연산자(Assignment Operators)

값을 변수에 저장할 때 사용됨.

//학생 점수를 입력 받아 성적(A, B, C, F)를 출력하는 프로그램 작성

function calculate(gpa){
    if (gpa===null || gpa===undefined || isNaN(gpa)) {
        return "유효한 숫자 값을 입력하세요."
    } if (gpa>=90 && gpa<=100) {
        return `${gpa}점이므로, A학점입니다.`
    } else if (gpa>=80) {
        return `${gpa}점이므로, B학점입니다.`
    } else if (gpa>=70) {
        return `${gpa}점이므로, C학점입니다.`
    } else {
        return `${gpa}점이므로, F학점입니다.`
    }
} 

let gpa = 82;

console.log(calculate(gpa));
console.log(calculate(null));
console.log(calculate('안뇽'));
console.log(calculate(50));

// 나이와 키를 입력받아 놀이기구 탑승 가능 여부를 판단하는 프로그램 작성
	//조건1. 나이는 10세 이상
    //키는 120cm이상이어야 함

function carRide(age, height){
    if (age>10 && height>=120){
        return "탑승 가능합니다.";
    } else if (age<10){
        return "나이가 부족합니다.";
    } else{
        return "키가 작습니다.";
    }
}

let age = 12;
let height=115;

console.log(`나이 ${age}, 키 ${height}cm`); //백틱사용
console.log(carRide(age, height));

//3의 배수 확인하는 함수를 작성해보세요.
	//조건. null 값에 대비해 보세요.

function tri(num){
    if (num===null || num ===undefined || isNaN(num)){
        return "유효한 숫자를 입력하세요"
    } if (num%3===0){
        return `${num}은 3의 배수입니다`;
    } else {
        return `${num}은 3의 배수가 아닙니다.`;
    }
}

let num = 5;

console.log(tri(null));
console.log(tri(undefined));
console.log(tri(9));
console.log(tri(10));

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

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

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

Curation Ꙭ̮

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

HTML 기본_행이나 열을 합치기

HTML_이미지 삽입하기

HTML_하이퍼링크 삽입

HTML_form 태그

HTML_input

HTML_input

HTML_input

HTML_datalist_option

CSS(Cascading Style Sheets)

폰트 바꾸기

JavaScript

JavaScript_기초

JavaScript_변수

let

const

JavaScript_기초

JavaScript_산술연산자(Arithmetic Operators)

JavaScript_대입연산자(Assignment Operators)

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

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바