본문 바로가기
CS 잡지식

JS 기본(Feat.JS 코드는 <body>젤 밑에 적자)

JIN_YOUNG _KIM 2023. 6. 2. 00:38 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	
    ## BOOTSTRAP 라이브러리의 링크 주소
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    
    <div class = "container">

     <div> 이름: <input type = "text" id="name"></div>   
     <div>지역: 
        <select id="city">
            <option value = "02">서울</option>
            <option value = "064">제주도</option>
        </select>
     </div> 

    </div>



 ## JS의 라이브러리들!
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
 crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
 crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" 
integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" 
crossorigin="anonymous">
</script>

 

HTML, JS 모두 웹 브라우저에서 실행되는 언어이다. 

웹 브라우저는 위에서 아래로 마치 인터프리터처럼 한 줄 한 줄 파싱하여 실시간으로 렌더링을 한다. 

근데 만약 <head> 부분에 JS 코드가 있다면 어떤 문제가 있을까??

JS는 프로그래밍 언어이다.

웹 브라우저는 HTML보다 JS를 실행할 때 훨씬 시간이 더 많이 걸린다. 

고로, 클라이언트가 웹 페이지를 요청하게 되면, JS 실행할 동안에 화면에 그 어떠한 HTML 결과가 안 보여 질 수도 있다. 

(웹 브라우저가 JS를 다 처리하고 나서야, 그 밑의 HTML을 렌더링하기 때문!)

 

JS의 주 역할 3 가지

1. <input> 태그에 들어가는 입력값을 알기 위해서 or 특정 field에 우리가 원하는 입력값을 넣기 위해서!

2. 웹 페이지 화면, 즉 DOM을 구성하는 Element들을 동적으로 보였다 안 보였다 하기 위해! 

3. 사용자가 웹 화면에서 어떠한 이벤트를 발생을 시켰을 때, 그 이벤트를 동적으로 실행시키기 위함!

(ex. 사용자가 버튼을 눌렀을 때, 일어나는 일들을 js로 function을 정의하여 이벤트를 실행시켜 준다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    
    <div class = "container">

     <div> 이름: <input type = "text" id="name"></div>   
     <div>지역: 
        <select id="city" onchange="changeCity();"> <!--button은 [클릭] 시 이벤트가 발생하는 것.그러나 select는 클릭할 때 이벤트가 발생하는-->
            <option value = "02">서울</option>  <!--것이 아니라, 지역을 예를 들어 서울에서 제주도로 [바뀔] 때, 반대로 제주도에서 서울로 바뀔 때-->
            <option value = "064">제주도</option><!--보여주는 [동네]를 동적으로 변화시켜야 하므로, onclick 속성이 아닌, onchange 속석을 사용해야 함-->
        </select>                                
     </div> 

     <div> <!--지역을 서울로 선택하면 [강남,서초]가 보이도록 하고, 제주도로 선택하면 [제주시,서귀포시]가 보이게 한다.-->
        동네:
        <select id="region_02">
            <option value="">강남</option>
            <option value="">서초</option>
        </select>

      <select id="region_064" style="display:none"> <!--디폴트는 서울의 동네를 보여주고 싶기에 display:none으로 한다-->
            <option value="">제주시</option>
            <option value="">서귀포시</option>
      </select>
     </div>

     <button type="button" onclick="regist();">등록</button><!--onclick이라는 이벤트 요청 시, regist() 실행-->



     <div>테스트:
        <input type="text" id = "test" value=""/> <!--value 속성에 JS로 값을 넣는 것도 가능!-->
     </div>


    </div>

    


<script
    src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
    crossorigin="anonymous">
</script>

<script
  src="https://code.jquery.com/jquery-3.7.0.slim.js"
  integrity="sha256-7GO+jepT9gJe9LB4XFf8snVOjX3iYNb0FHYr5LI1N5c="
  crossorigin="anonymous">
</script>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
    crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" 
    integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" 
    crossorigin="anonymous">
</script>


<script>
    function regist(){

        //alert('버튼을 클릭하셨습니다');
        //alert(document.getElementById("name").value); // 사용자가 입력한 [이름] 필드값을 얻을 수가 있다.
        //alert(document.getElementById("city").value);
    
        //위와 같은 쉬운 js 코드는 직접 코딩하면 된다. 
        // 그러나 실무에서는 복잡한 js 코드를 짜야 한다. 
        //[JQEURY]는 JS의 라이브러리로, 코어 JS만으로는 짜기 복잡한 것 그리고 개발자들이 많이 사용할 것 같은 
        //기능들을 미리 구현을 해 놓았다.(JQUERY는 JS를 한 번 Wrapping을 하였기에, 웹 브라우저가 달라도 제대로 동작을 한다.)


        //jQuery 사용 예시(최근에는 JQuery도 잘 안 쓰는 추세라고 한다)
        //alert($("#name").val()); // == alert(document.getElementById("name").value);
        
    
    }

    function changeCity(){

        /*let city = document.getElementById("city").value;

        //아래 2줄을 none으로 처리하지 않으면, onchange 이벤트 발생(서울->제주도) 시, 기존에 웹 화면에 있는 [동네:강남,서초]가 그대로 남은 상태에서
        //덧붙여서 [동네:제주시,서귀포시]가 보여 진다.
        //onchang 발생 시, 일단 모든 동네 element를 지우고 난 뒤, 선택된 시의 동네가 보이도록 한다. 
        document.getElementById("region_02").style.display="none";
        document.getElementById("region_064").style.display="none";

        document.getElementById("region_"+city).style.display=""; // 서울을 선택하면, id="region_02"에 해당하는 element를 가져와서
                                                                  // 그 값(강남,서초)를 동네란에 보여 주게 된다. */

        
        //순수 JS가 아닌, JQUERY로 똑같이 구현 가능
        let city = $('#city').val();
        $('#region_02').hide();
        $('#region_064').hide();
        $('#region_' + city).show();         
        
        
   

    }
    //JS의 자료형 : var,let,const(옛날에는 var 1개였음,var로 선언한 변수명은 나중에 똑같이 선언해도 중복 선언 허용!)
    var x = 3;
    document.getElementById("test").value = x; // element의 필드에 값을 삽입!
   

    //숫자, 소수점 숫자, 문자, 참/거짓(boolean). 오브젝트, 배열

    let a = 1;
    a=1.234;
    a="abc";
    a=true;


    //오브젝트(서버에 데이터를 던질 때, 주로 변수를 따로 따로 던지기 보다는 이렇게 오브젝트 형태를 선언하여,
    //서버에 넘길 데이터를 다 담아서 한번에,JSON 형태로 던진다.)
    //오브젝트는 <key,value>형태로 이루어짐!
    let obj1 = {
        name: "", // key: value
        city: ""
    };
    //이와 같이 값을 넣음. 
    obj1.name = $("#name").val();
    obj1.city = $("#city").val();

    console.log(obj1); // f12를 눌리면 출력됨.(서버로 데이터를 던질 떄, 던져야 하는 데이터를 다~~ 담아서 [obj]만 넘겨 주면 됨)

    //아래와 같이, {}안에 선언을 안 해도, 얼마든지 key,value 추가 가능!
    let obj2 = {};
    obj.name=1;
    obj.city=2;


    let obj3={

        //오브젝트 안에 오브젝트를 담을 수가 있다. 
        obj4: {

        },
        
        //오브젝트 안에 배열도 담을 수가 있다. 
        arr: []


    };


    // 함수의 매개변수든, 서버에 던지는 데이터든, 데이터 개수가 1,2개가 아닌 이상, 오브젝트로 받고 던지자!!!!



    
    //배열:
    // 우리는 아래와 같이 [하드코딩]을 하였다.
    //<select id="region_02">
     //       <option value="">강남</option>
     //       <option value="">서초</option>
     //   </select>
     //-> 그러나 실제로는 DB에서 백엔드로부터 데이터를 받아와서 만들어 낸다. 
    function loadCity(){
        //만약 서버에서 데이터를 넘겼으면, 오브젝트의 [배열] 형태로 주었을 것이며, 이를 html 요소에 값을 담았을 것이다. 
        let city = [
            
            {code:"02",name:"서울"}, // 오브젝트1
            
            {code:"064",name:"제주도"} // 오브젝트2
        ];

        // id=city인 요소에 아래의 html 코드를 [동적]으로 생성!(하드 코딩)
        //$('#city').append('<option value="02" > 서울</option>');
        //$('#city').append('<option value="064" > 제주도</option>');

        //하드 코딩이 아닌, 배열과 반복문을 사용하여 스마트하게 구현해보자. 
        for(let i=0;i<city.length;i++){

            $('#city').append('<option value="'+city[i].code + '">' + city[i].name + '</option>');

        }

    }

    loadCity(); // 함수 호출하여 html 코드 동적 생성 실행!


</script>

  
</body>
</html>
저작자표시 비영리 동일조건

'CS 잡지식' 카테고리의 다른 글

MongoDB의 장점(Feat. NoSQL...)  (0) 2023.06.26
반응형 웹(Feat. boot strap)  (0) 2023.06.02
[사용자 정의 인터페이스] with Spring Data JPA  (0) 2023.05.19
동적(dynamic) 쿼리 vs 정적(static) 쿼리  (0) 2023.05.19
연관 관계 세팅 TIP!!!  (0) 2023.05.19

'CS 잡지식' Related Articles

티스토리툴바