[JavaScript][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 자바스크립트 입문

[ 언어·프레임워크/JavaScript ]

2021년 11월 20일 17시 40분 23초에 업로드 된 글입니다.

작성자: DandyNow

728x90

학습동기

최근 웹 프론트엔드 개발에 관심을 가지게 되었다.

프론트엔드 개발은 기본적으로 HTML, CSS, JavaScript 기술을 갖춰야 하고,

React, Vue, Angular 와 같은 framework를 다룰 수 있어야 된단다.

또한 하이브리드 앱개발 framework인 React Native도 JavaScript 언어를 기반하고 있어 배워 두면 쓰임새가 많겠다 생각했다.

학습내용

1. 강의영상

https://youtu.be/hLhHFiwhRfA

2. 부트스트랩의 CSS, JS 가져오기

https://getbootstrap.kr/docs/5.1/getting-started/introduction/

시작하기

세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.

getbootstrap.kr

※ 강의 영상에는 Bootstrap 페이지에서 JS 관련 코드를 가져왔지만, 학습을 진행한 시점에서 찾아본 페이지의 내용은 영상과 달랐다. 그래서 https://code.jquery.com/ 에서 필요한 코드를 가져왔다.

3. 학습 중 작성한 코드

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

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

    <!-- bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>
    <div class="container">
        <div>이름 : <input type="text" id="name" value=""/></div>
        <div>지역 :
            <select id="city" onchange="changeCity();">
                <!-- <option value="02" selected>서울</option>
                <option value="064">제주</option> -->
            </select>
        </div>
        <div>동네 :
            <select id="region_02">
                <option value="">강남</option>
                <option value="">서초</option>
            </select>
            <select id="region_064" style="display:none;">
                <option value="">제주시</option>
                <option value="">서귀포시</option>
            </select>
        </div>
        <div>테스트 : <input type="text" id="test" value=""/></div>
        <button type="button" onclick="regist();">등록</button>
    </div>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    
    <script>
        function regist() {
            // alert(document.getElementById("name").value);
            // alert(document.getElementById("city").value);

            // jQuery 표현
            // alert($("#name").val());
            // alert($("#city").val());

            // let obj = {
            //     name: "",
            //     city: "",
            // };
            let obj = {}; // 키를 잡아두지 않아도 위와 동일하게 작동함.

            obj.name = $("#name").val();
            obj.city = $("#city").val();

            // console.log(obj);
            printConsole(obj);
            printConsole2(name, city); // obj 사용하지 않는 방식으로 값이 많아질수록 비효율적임.

        }

        function loadCity() {
            let city = [{
                code: "02",
                name: "서울"
                },
                {
                code: "064",
                name: "제주"
                },
                {
                code: "051",
                name: "부산"
                }
            ];

            for(let i=0 ; i<city.length ; i++) {
                if(i==0) {
                    $('#city').append('<option value="' + city[i].code + '" selected>' + city[i].name + '</option>');
                } else {
                    $('#city').append('<option value="' + city[i].code + '">' + city[i].name + '</option>');
                }

            // $('#city').append('<option value="02" selected>서울</option>');
            // $('#city').append('<option value="064">제주</option>');
            }
        }

        loadCity();

        function printConsole(data) {
            console.log(data);
        }

        function printConsole2(name, city) {
            console.log(name, city);
        }
        
        function changeCity() {
            // let city = document.getElementById("city").value;
            // document.getElementById("region_02").style.display = "none";
            // document.getElementById("region_064").style.display = "none";
            // document.getElementById("region_"+city).style.display = "";
            
            // jQuery 표현
            let city = $('#city').val();
            $('#region_02').hide();
            $('#region_064').hide();
            $('#region_' + city).show();
        }
        
        // var, let, const 세 유형으로 변수를 선언할 수 있다.
        var x = 1;
        x = x + 2;
        
        let y = 1;
        y = y + 2;
        // let y = 2; let은 이미 선언된 변수명을 선언할 수 없다!
        
        const z = 1; // z = z + 2와 같이 절대 재할당 안됨. 변하지 않은 값!
        
        // 정수, 실수, 문자, 참/거짓(boolean), 오브젝트, 배열
        let a = 1;
        a = 1.231;
        a = "문자";
        a = true; //false

        document.getElementById("test").value = y;

    </script>
</body>

</html>

4. 코드 실행 화면

[그림2] C:\workspace\javascript에 위치한 index.html 코드 실행

학습소감

bootstrap, jquery를 살짝 맛 봤고,

JavaScript의 alert, console, browser 출력,

3가지 변수 타입, 함수, 조건문, 반복문 등을 간단히 익힐 수 있었다.

1시간 안에 핵심만 매우 잘 담은 입문 강의로 강추 할 만하다!

728x90

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

'언어·프레임워크 > JavaScript' 카테고리의 다른 글

[JavaScript] "Do it! 자바스크립트 입문" - 9, 10장 \| 폼 , 브라우저 객체 모델 (0)	2022.03.16
[JavaScript] "Do it! 자바스크립트 입문" - 8장 \| 문서 객체 모델(DOM) (0)	2022.03.14
[JavaScript] "Do it! 자바스크립트 입문" - 6장, 7장 \| 객체, Array 객체 (0)	2022.03.14
[JavaScript] "Do it! 자바스크립트 입문" - 4장, 5장 \| 제어문, 함수, 변수, 이벤트 (0)	2022.03.12
[JavaScript] "Do it! 자바스크립트 입문" - 3장 변수와 자료형 그리고 연산자 \| 템플릿 문자열, 아스키코드 테이블, 연산자 계산 순서 (0)	2022.03.11

다음글이 없습니다.

이전글이 없습니다.

학습동기

학습내용

학습소감

'언어·프레임워크 > JavaScript' 카테고리의 다른 글

티스토리툴바