풀스택 개발자 과정 56일차

너구·2026년 7월 28일

풀스택 성장과정

목록 보기
59/79

함수

<!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>
    <script>
        function addNumber(num1, num2) {
            var sum = parseInt(num1) + parseInt(num2);
            alert("결과 값: " + sum);
        }

        var a = prompt('첫번째 숫자');
        var b = prompt('두번째 숫자');
        addNumber(a, b);
        
    </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>
    <script>
        var x = 10;

        function displayNumber() {
            console.log("x is " + x);
            console.log("y is " + y);
            var y = 20;
        }
        
        displayNumber();
    </script>
</body>
</html>

Function - Variable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function - Variable</title>
</head>
<body>
    <script>
        var a = 10;
        function calcSum(n) {
            let sum = 0;
            for (let i = 1; i < n + 1; i++) {
                sum += 1;
            }
            // let sum;
            console.log(sum);
        }
        calcSum(10);
    </script>
</body>
</html>

Function - Variable 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function - Variable</title>
</head>
<body>
    <script>
        const currentYear = 2020;
        console.log(currentYear);
        currentYear = 2100;
        console.log(currentYear);
    </script>
</body>
</html>

기본 매개변수(Default Parameters)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본 매개변수(Default Parameters)</title>
</head>
<body>
    <script>
        function multiple(a, b = 5, c = 10) { // b = 5, c = 10으로 기본값 지정
            return a * b + c;
        }

        var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
        document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")

        var result2 = multiple(10, 20); // a = 10, b = 20, c = 10 (기본값)
        document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " 
                        + result2 + "입니다. <br>")

        var result3 = multiple(30); // a = 30, b = 5 (기본값), c = 10 (기본값)
        document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result3 + "입니다. <br>")
    </script>
</body>
</html>

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>즉시 실행 함수(IIFE, Immediately Invoked Function Expression)</title>
    <style>
        body {
            padding-top: 20px;
            text-align: center;
        }

        .accent {
            font-weight: bold;
            font-size: 1.2em;
            color: #00f;
        }
    </style>
</head>
<body>
    <script>
        (function(num) {
            var userName = prompt("이름을 입력하세요.");
            document.write("안녕하세요? <span class='accent'>" + userName + num + "</span>님!");
        }(5));
    </script>
</body>
</html>

화살표 함수(Arrow Function, =>)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화살표 함수(Arrow Function, =>)</title>
</head>

<body>
    <script>
        // const hi = function() {
        // return "안녕하세요?";
        // }
        // 매개 변수 없는 경우
        const hi = () => { return "안녕하세요"; };
        hi();
        // 매개 변수 있는 경우
        const hi1 = user => {
            document.write(user + "님, 안녕하세요?");
        }
        hi1("경희");
        // const sum = function(a, b) {
        // return a + b;
        // }
        let sum = (a, b) => a + b;
        document.write("두 수의 합: " + sum(10, 20));
    </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>
    <link rel="stylesheet" href="css/function.css">
</head>
<body>
    <ul>
        <li><a href="#" onclick="changeBg('green')">Green</a></li>
        <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
        <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
    </ul>
    <div id="result"></div>

    <script>
        function changeBg(color) {
            var result = document.querySelector('#result');
            result.style.backgroundColor = color;
        }
    </script>
</body>
</html>

What time is it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What time is it?</title>
    <style>
        body {
            font-size: 2em;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        var now = new Date();
        // 현재 날짜와 시간 표시하기
        document.write("현재 시각은 " + now);
        // 로컬 형식으로 표시하기
        document.write("현재 시각은 " + now.toLocaleString());
    </script>
</body>
</html>

Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
    <style>
        body {
            font-size: 2em;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        var season = ["봄", "여름", "가을", "겨울"];

        for (let i = 0; i < season.length; i++) {
            document.write(season[i] + (" "));
        }
    </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>
    <script>
        var nums = [1, 2, 3];
        var chars = ["a", "b", "c", "d"];

        // 배열 2개 합치기
        var numsChars = nums.concat(chars);
        var charsNums = chars.concat(nums);

        document.write("nums에 chars 합치면: ", numsChars,
                       "<br>chars에 nums 합치면: ", charsNums);
        document.write("<hr>");

        // 배열 안의 요소 합치기
        var String1 = nums.join();
        document.write("구분자 없이: ", String1);
        document.write("<br>");

        var String2 = chars.join('/');
        document.write("/ 구분자 지정: ", String2);
        document.write("<hr>");

        // 요소 추가하기 - 새로운 length 값 반환
        var ret1 = nums.push(4, 5); // 배열 끝에 추가
        document.write("length: ", ret1, " | 배열: ", nums);
        document.write("<br>");

        var ret2 = nums.unshift(0); // 배열 앞에 추가
        document.write("length: ", ret2, " | 배열: ", nums);
        document.write("<hr>");

        // 요소 추출하기 - 꺼낸 요소값 반환
        var popped1 = chars.pop(); // 마지막 요소 꺼냄
        document.write("꺼낸 요소: ", popped1, " | 배열: ", chars);
        document.write("<br>");

        var popped2 = chars.shift(); // 첫 번째 요소 꺼냄
        document.write("꺼낸 요소: ", popped2, " | 배열: ", chars);
        document.write("<hr>");
    </script>
</body>
</html>

Q1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>

    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid #222;
            background-color: #3bf;
            text-align: center;
        }

        h1 {
            margin-top: 70px;
        }

        .accent {
            font-size: 1.8em;
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>책 읽기</h1>

        <p>
            <span class="accent" id="resent"></span>일 연속으로<br>
            책 읽기를 달성했군요.
        </p>

        <p>축하합니다!</p>
    </div>

    <script>
        let now = new Date();
        let firstDay = new Date("2026-07-14");

        let toNow = now.getTime();
        let toFirst = firstDay.getTime();

        let passedTime = toNow - toFirst;

        passedTime = Math.round(passedTime / (1000 * 60 * 60 * 24));

        document.querySelector("#resent").innerText = passedTime;
    </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 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            width: 300px;
        }

        h1 {
            text-align: center;
            border: 1px solid #222;
            padding: 10px;
            border-radius: 10px;
            background-color: #eee;
        }

        p {
            font-size: 1.2em;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>당첨자 발표</h1>

        <script>
            let seed = prompt("전체 응모자 수: ", "");

            let picked = Math.floor((Math.random() * seed) + 1);

            document.write(`<p>전체 응모자 수: ${seed}명</p>`);
            document.write(`<p>당첨자: ${picked}번</p>`);
        </script>

    </div>

</body>

</html>

Window 객체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window 객체</title>
</head>
<body>
    <p>왼쪽에서 100 픽셀, 위에서 200 픽셀 떨어진 위치에 <br> 팝업창이 하나 표시된다.</p>
    <script>
        window.open("Q1.html", "pop", "width=500, height=400, left=100 top=200");
    </script>
</body>
</html>

Q2

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .clock {
            font-size: 2em;
            font-weight: bold;
        }

        .accent {
            color: blue;
        }
    </style>
</head>

<body>

    <div class="clock">
        현재 시각 <span id="clock"></span>
    </div>

    <script>
        function showTime() {
            let now = new Date();

            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();

            let ampm = "오전";

            if (hour >= 12) {
                ampm = "오후";
                if (hour > 12) {
                    hour -= 12;
                }
            }

            if (hour === 0) {
                hour = 12;
            }

            document.querySelector("#clock").innerHTML =
                `<span class="accent">${ampm} ${hour}시 ${minute}분 ${second}초</span>`;
        }

        showTime();

        setInterval(showTime, 1000);
    </script>

</body>

</html>

Q3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q3</title>

    <style>
        .detail {
            display: none;
        }
    </style>
</head>

<body>

    <div id="item">

        <img id="flower" src="images/flower.jpg" alt="">

        <button class="over" id="open" onclick="showDetail()">
            상세 설명 보기
        </button>

        <div id="desc" class="detail">
            <h4>등심붓꽃</h4>

            <p>
                북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.
                길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데
                바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다.
            </p>

            <button id="close" onclick="hideDetail()">
                상세 설명 닫기
            </button>
        </div>

        <button onclick="window.close();">
            닫기
        </button>

    </div>


    <script>

        function showDetail() {
            document.querySelector("#desc").style.display = "block";
        }

        function hideDetail() {
            document.querySelector("#desc").style.display = "none";
        }

    </script>

</body>

</html>

innerText와 innerHTML의 차이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerText와 innerHTML의 차이</title>
</head>
<body>
    <button onclick="inntext()">innerText로 표시하기</button>
    <button onclick="innhtml()">innerHTML로 표시하기</button>
    <h1>현재 시각: </h1>
    <div id="current"></div>
    <script>
        var now = new Date();

        function inntext() {
            document.getElementById("current").innerText = now;
        }

        function innhtml() {
            document.getElementById("current").innerHTML = "<em>" + now + "</em>";
        }
    </script>
</body>
</html>

DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css2/product.css">
    <title>DOM</title>
</head>
<body>
    <div id="container">
        <h1 id="heading">에디오피아 게뎁</h1>
        <div id="prod-pic">
            <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200"
            height="200" onclick="displaySrc()">
            <div id="small-pic">
                <img src="images/coffee-pink.jpg" class="small">
                <img src="images/coffee-blue.jpg" class="small">
                <img src="images/coffee-gray.jpg" class="small">
            </div>
        </div>
    </div>

    <script>
        var cup = document.querySelector("#cup");
        // querySelectorAll -> 전체를 다 가지고 온다.
        // 있는 만큼 배열에 담는다. smallPics 배열
        var smallPics = document.querySelectorAll(".small");

        for (let i = 0; i < smallPics.length; i++) {
            smallPics[i].addEventListener("mouseover", changePic);
        }

        function changePic() {
            // this.src
            var newPic = this.src;
            // cup -> 큰 이미지 src -> newPic
            cup.setAttribute("src", newPic);
        }

        function displaySrc() {
            var cup = document.querySelector("#cup");
            alert("이미지 소스: " + cup.getAttribute("width"));
        }
    </script>
</body>
</html>

DOM 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>
        #container {
            width: 500px;
            margin: 10px auto;
            padding: 20px;
        }

        #info {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>DOM을 공부합시다</h1>
        <a href="#" onclick="addP(); this.onclick='';">더 보기</a>
        <div id="info"></div>
    </div>

    <script>
        function addP() {
            // p 태그 엘리멘트를 생성 -> newP
            var newP = document.createElement("p");
            // TextNode를 생성 -> DOM은 Document Object Model의 줄임말입니다. -> txtNode
            var txtNode = document
                .createTextNode("DOM은 Document Object Model의 줄임말입니다.");
            // p태그에 txtNode를 담는다.
            newP.appendChild(txtNode);
            // <p></p>
            // "DOM은 Document Object Model의 줄임말입니다."
            // <p>DOM은 Document Object Model의 줄임말입니다.</p>
            // appendChild 자식을 추가한다 -> newP
            document.getElementById("info").appendChild(newP);
            // <div id="info"></div>
            // <div id="info"><p>DOM은 Document Object Model의 줄임말입니다.</p></div>
        }
    </script>
</body>
</html>

DOM 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>
        #container {
            width: 500px;
            margin: 10px auto;
            padding: 20px;
        }

        #info {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>DOM을 공부합시다</h1>
        <a href="#" onclick="addContents(); this.onclick='';">더 보기</a>
        <div id="info"></div>
    </div>

    <script>
        function addContents() {
            var newP = document.createElement("p");
            var txtNode = document
                .createTextNode("DOM은 Document Object Model의 줄임말입니다.")
            newP.appendChild(txtNode);

            var newImg = document.createElement("img");
            var srcNode = document.createAttribute("src"); // src 속성 만들기
            var altNode = document.createAttribute("alt"); // alt 속성 만들기

            srcNode.value = "images/dom.jpg" // 속성에 값넣기
            altNode.value = "돔 트리 예제 이미지"; // 속성에 값넣기

            newImg.setAttributeNode(srcNode); // img 태그에 src 속성 set
            newImg.setAttributeNode(altNode); // img 태그에 alt 속성 set

            document.getElementById("info").appendChild(newP);
            document.getElementById("info").appendChild(newImg);
        }
    </script>
</body>
</html>

Web Programming

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Programming</title>
    <link rel="stylesheet" href="css2/nodelist.css">
</head>
<body>
    <div id="container">
        <h1>Web Programming</h1>
        <p>공부할 주제를 기록해 보세요</p>
        <p>공부가 끝난 것은 클릭해서 삭제할 수 있습니다.</p>

        <form action="">
            <input type="text" id="subject" autofocus>
            <button onclick="newRegister(); return false;">추가</button>
        </form>
        <hr>
        <ul id="itemList"> </ul>
    </div>

    <script>
        function newRegister() {
            // 요소 노드 추가
            var newItem = document.createElement("li");
            // 폼의 텍스트 필드
            var subject = document.querySelector("#subject");
            // 텍스트 필드의 값을 텍스트 노드로 만들기
            var newText = document.createTextNode(subject.value);
            // 텍스트 노드를 요소 노드의 자식 노드로 추가
            newItem.appendChild(newText); // <li>Java</li>
            // 웹 문서에서 부모 노드 가져오기
            var itemList = document.querySelector("#itemList");
            // 자식 노드 중 첫번째 노드 앞에 추가
            itemList.insertBefore(newItem, itemList.childNodes[0]);
            /*
            <ul>
                <li>Java</li> -> click시 동작할 함수를 붙혀야 한다. function
                <li>C언어</li> -> function
            </ul>
            */

            subject.value = "";
            // 모든 항목 가져오기
            var items = document.querySelectorAll("li"); // li 배열
            for (i = 0; i < items.length; i++) {
                // 항목 클릭했을 때 실행할 함수
                items[i].addEventListener("click", function() {
                    if (this.parentNode) // 부모 노드가 있다면
                    this.parentNode.removeChild(this); // 부모 노드에서 삭제
                })
            }
        }
    </script>
</body>
</html>

Q4

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Q4</title>
</head>
<body>

    <img id="photo" src="images/cup-1.png" width="300" onclick="changePic()">

    <script>
        function changePic() {
            let photo = document.querySelector("#photo");

            if (photo.src.includes("cup-1.png")) {
                photo.src = "images/cup-2.png";
            } else {
                photo.src = "images/cup-1.png"
            }
        }
    </script>

</body>
</html>

Q5

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q5</title>

    <style>
        * {
            box-sizing: border-box;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 200px);
            gap: 10px;
            justify-content: center;
        }

        .gallery img {
            width: 200px;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid #ccc;
        }

        #lightbox {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;

            justify-content: center;
            align-items: center;
        }

        #lightbox img {
            width: 500px;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="images/tree-1-thumb.jpg">
        <img src="images/tree-2-thumb.jpg">
        <img src="images/tree-3-thumb.jpg">
        <img src="images/tree-4-thumb.jpg">
        <img src="images/tree-5-thumb.jpg">
        <img src="images/tree-6-thumb.jpg">

    </div>

    <div id="lightbox">
        <img id="lightImage">
    </div>

    <script>
        let pics = document.querySelectorAll(".gallery img");
        let lightbox = document.querySelector("#lightbox");
        let lightImage = document.querySelector("#lightImage");

        for (let i = 0; i < pics.length; i++) {
            pics[i].addEventListener("click", showLightbox);
        }

        function showLightbox() {
            lightbox.style.display = "flex";
            lightImage.src = this.src;
        }

        lightbox.addEventListener("click", function() {
            lightbox.style.display = "none";
        });
    </script>
</body>

</html>

마무리

오늘도 js를 배웠다. 많이 복잡한데 java랑 비슷하기도 해서 java 처음 배울 때보단 낫다.

profile
너구
이전 포스트

풀스택 개발자 과정 55일차

다음 포스트

풀스택 개발자 과정 57일차

0개의 댓글