Post

0808 HTML5 & JavaScript 수업

작성일 :
작성자 : sseung
views 6 min read

0808 수업

index.html

설명 : 메인 인덱스 역할을 한다. 다양한 HTML 예제로 이동할 수 있는 링크가 포함되어 있다.

주요 코드:

1
2
3
4
5
6
7
8
9

<body>
    <h1>JavaScript and HTML Examples</h1>
    <ul>
        <li><a href="convertion.html">Data Conversion</a></li>
        <li><a href="function.html">Functions</a></li>
        <li><a href="loop.html">Loops</a></li>
        <!-- More links to other files -->
    </ul>
</body>

convertion.html

데이터 타입 간의 변환을 다루는 예제다. JavaScript에서 문자열, 숫자, 불리언 타입 간의 변환을 설명하고 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
    <h1>Data Conversion in JavaScript</h1>
    <p id="demo">Click the button to convert data types.</p>
    <button onclick="convertData()">Convert</button>

    <script>
        function convertData() {
            let num = "123";
            let str = Number(num);
            document.getElementById("demo").innerHTML = "Converted to number: " + str;
        }
    </script>
</body>

function.html

JavaScript 함수의 기본적인 사용법을 다룬다. 함수 정의, 호출, 그리고 매개변수를 사용하는 방법을 설명하고 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10

<body>
    <h1>JavaScript Functions</h1>
    <button onclick="myFunction()">Click me</button>

    <script>
        function myFunction() {
            alert("Hello World!");
        }
    </script>
</body>

function1.html

여러 함수와 매개변수를 다루는 예제다. 함수 간에 데이터를 전달하고, 반환값을 사용하는 방법을 보여준다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11

<body>
    <h1>Function Parameters</h1>
    <button onclick="displaySum(5, 10)">Show Sum</button>

    <script>
        function displaySum(a, b) {
            let sum = a + b;
            alert("Sum: " + sum);
        }
    </script>
</body>

function2.html

이 파일에서는 함수의 복잡한 로직을 다룬다. 조건문과 반복문을 사용하여 함수 내에서 복잡한 연산을 수행하는 방법을 설명한다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
    <h1>Complex Function Logic</h1>
    <button onclick="calculate()">Calculate</button>

    <script>
        function calculate() {
            let result = 1;
            for (let i = 1; i <= 5; i++) {
                result *= i;
            }
            alert("Factorial of 5: " + result);
        }
    </script>
</body>

loop.html

반복문을 사용하는 방법을 다룬다. for, while, do...while 문을 통해 반복적인 작업을 수행하는 방법을 보여준다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
    <h1>JavaScript Loops</h1>
    <button onclick="displayLoop()">Run Loop</button>

    <script>
        function displayLoop() {
            let text = "";
            for (let i = 0; i < 5; i++) {
                text += "Number " + i + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>

object.html

JavaScript 객체를 사용하는 방법을 설명한다. 객체 생성, 속성 접근, 메서드를 정의하는 방법을 다루고 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
    <h1>JavaScript Objects</h1>
    <button onclick="showObject()">Show Object</button>

    <script>
        const person = {
            firstName: "John",
            lastName: "Doe",
            age: 30,
            fullName: function() {
                return this.firstName + " " + this.lastName;
            }
        };

        function showObject() {
            alert("Full Name: " + person.fullName());
        }
    </script>
</body>

operator.html

JavaScript 연산자를 사용하는 방법을 다룬다. 산술 연산자, 비교 연산자, 논리 연산자를 예제를 통해 설명한다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
    <h1>JavaScript Operators</h1>
    <button onclick="operate()">Operate</button>

    <script>
        function operate() {
            let x = 10;
            let y = 5;
            let result = x + y;
            alert("10 + 5 = " + result);
        }
    </script>
</body>

primitive.html

기본 데이터 타입을 다루는 예제다. 문자열, 숫자, 불리언, null, undefined와 같은 원시 데이터 타입을 설명하고 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
    <h1>JavaScript Primitive Types</h1>
    <p id="demo">Click the button to see different data types.</p>
    <button onclick="showTypes()">Show Types</button>

    <script>
        function showTypes() {
            let str = "Hello";
            let num = 123;
            let bool = true;
            let undef;
            let nl = null;
            document.getElementById("demo").innerHTML = `String: ${str}, Number: ${num}, Boolean: ${bool}, Undefined: ${undef}, Null: ${nl}`;
        }
    </script>
</body>

variablescope.html

변수의 스코프를 다루는 예제다. 전역 변수와 지역 변수의 차이를 설명하고, 함수 내에서 변수의 범위가 어떻게 적용되는지 보여준다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
    <h1>JavaScript Variable Scope</h1>
    <button onclick="checkScope()">Check Scope</button>

    <script>
        let globalVar = "I am a global variable";

        function checkScope() {
            let localVar = "I am a local variable";
            alert(globalVar + " and " + localVar);
        }
    </script>
</body>

css/style.css

HTML 파일에 적용되는 CSS 스타일을 정의한 파일이다. 텍스트 정렬, 배경 설정, 버튼 스타일링 같은 것들이 포함되어 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

js/calc.js

JavaScript 계산기를 위한 스크립트 파일이다. 사용자가 입력한 값을 받아 간단한 계산을 수행하는 로직이 포함되어 있다.

주요 코드:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    if (b == 0) {
        return "Cannot divide by zero";
    } else {
        return a / b;
    }
}
Front-End, JavaScript
JavaScript front
This post is licensed under CC BY 4.0 by the author.

© sseung. Some rights reserved.