Posted Updated  minkuen frontEnd / javascript5 minutes read (About 773 words)

JavaScript AJAX

프로그램 언어별 포지션

  • Front-End : Web Browser 등 사용자와 접점을 가지고 있는 부분을 개발
  • Back-End : 데이터 기반의 로직을 기반으로 솔루션의 엔진을 담당

Untitled

JAVA 언어의 단계

  • 현재 취업시장에서 가장 많은 것은 웹 프로그래머
  • 웹 프로그램은 서블릭 ➔ JSP ➔ Spring의 단계로 교육이 진행될 예정

Untitled

비동기(Asynchronous) 통신이란?

  • AJAX (Asynchronous Javascript And XML) : XHR(XMLHttpRequest), AXIOS, FETCH 방식
  • 비동기 애플리케이션을 만들기 위해 클라이언트에서 단에서 쓰이는 웹개발 기술들.

Untitled

비동기 통신의 탄생배경

  • 기존 웹문서는 구조가 바뀌면 모든 문서를 변경해야 하는 한계가 있음. (유지관리 비용 증가)
  • 한계를 극복하고자 비동기 통신이 탄생함

Untitled

비동기 통신 구현 원리

  • innerHTML을 활용하여 이벤트 발생시 article 태그에 문서를 삽입한다
  • 문서 삽입은 querySelector를 활용
  • ajax_01.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <ol>
        <li><a onclick="document.querySelector('article').innerHTML='<h1>HTML</h1><P>HTML is ....</P>';">
            HTML</a></li>
         
        <li><a onclick="document.querySelector('article').innerHTML='<h1>CSS</h1><P>CSS is ....</P>';">
            CSS</a></li>
        
        <li><a onclick="document.querySelector('article').innerHTML='<h1>JAVA Script</h1><P>JAVA Script is ....</P>';">
            JAVA Script</a></li>
    </ol>
    <article>
    </article>
</body>
  • 결과

Untitled

비동기 통신 구현을 위한 TEST - 1

  • callback 함수를 통한 로그 확인. (JAVASCRIPT 문서 확인함.)
  • 로그가 먼저 찍히고, response OK가 됨. (비동기식이므로)

Untitled

비동기를 결과를 확인

  • 먼저 1 2 3 출력
  • 그 다음에서야 response.OK!! 출력

Untitled

비동기 통신 구현을 위한 TEST - 2

  • CSS 문서 확인하여 text란 변수에 넣어라.
  • response.status = 200은 통신에 성공했다는 의미임

Untitled

5.4.3. 비동기 통신 구현을 위한 TEST - 3

  • FETCH API는 전달하는 문서를 text로 받고, inner HTML을 통해 article tag에 문서를 포함
  • 이 때 response 객체를 통해서 성공여부를 확인할 수 있음 (AJAX의 기본은 마무리)

Untitled

  • 여기까지 작성했을 때의 코드
  • ajax_02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>
</head>
<body>
   <input type ="button" value = "click callbackMe" 
        onclick="fetch('JAVASCRIPT').then(callbackme);
                function callbackme(){
                    console.log('response. OK!!');
                };
                console.log(1);
                console.log(2);
                console.log(3);
                "
    >
    <!-- JAVASCRIPT 문서를 읽으면, response라는 변수에 담아와라. -->
    <!-- response 변수의 text함수를 통해서 읽어온 값을 alert 해라.-->
    <input type="button" value="click AJAX" 
        onclick="fetch('HTML').then(function(response){
                    response.text().then (
                        function(text) {
                            alert(text);
                            console.log(response);
                            console.log(response.ok);  // true, false
                            console.log(response.status);// 200은 성공, 404는 페이지 못찾음
                    })
        });"
    >
    <input type="button" value="click AJAX_ERROR처리" 
        onclick="fetch('HTML').then(function(response){
                    response.text().then (
                        function(text) {
                            if (response.ok) {
                                // alert(text);
                                document.querySelector('article').innerHTML=text;
                                console.log('success');
                            }
                            else {
                                console.log('ERROR');
                            }
                    })
        });"
    >
    <article>

    </article>

</body>
</html>
  • CSS
  • 확장자 없이 해당 이름으로만 만든 파일이다
1
<h1>CSS</h1><P>CSS is ....</P>
  • JAVASCRIPT
  • 확장자 없이 해당 이름으로만 만든 파일이다
1
<h1>JAVA Script</h1><P>JAVA Script is ....</P>
  • HTML
  • 확장자없이 해당 이름으로만 만든 파일이다
1
<h1>HTML</h1><P>HTML is ....</P>
  • 결과
  • 버튼을 1번씩 클릭했을 때 다음과 같은 결과가 출력된다

Untitled

비동기 통신 구현을 위한 TEST - 4

  • 공통된 부분을 하나로 합쳐서 처리
  • 위 코드를 다음 형태로 정리할 수 있다

Untitled

실습

  • Do it! 웹 사이트 따라 만들기 7장 p.214
  • 우선 chrome → 우클릭 : 속성 → 대상에 다음 내용을 붙여넣는다.
    • exe” 이후에 띄어쓰고 붙이면 된다
    • -allow-file-access-from-files

Untitled

Posted Updated  minkuen frontEnd / javascript8 minutes read (About 1222 words)

JavaScript JQuery

jQury를 사용해보자

JQuery란?

  • JQuery 사용이유 : 브라우저간 호환성 문제, CSS지원, 복잡한 HTML 문서를 단순화하는 용도
  • 기본적으로 JAVA Script 문법을 기반으로 활용이 가능하다

Untitled

  • 이 기종으로 관리되는 모든 Browser의 기능을 숨긴다
  • Jquery Object를 통해서 Document Object를 관리

Untitled

Jquery 셋업

  • Jquery 라이브러리는 서버에 다운로드 하여 사용하는 방법과 CDN을 활용하는 방법이 있음
  • CDN : Content Delivery Network
  1. 각 주요 사이트별로 호스팅하고 있는 CDN이 있음
  2. CDN을 이용하는 것이 효율적인 이유는
    다른 사이트도 Jquery로 개발된 사이트가 많다보니
    Cash에 대부분 CDN 사이트 로부터 받아놓은 것이 있을 수 있음.
  3. 단, 다운로드도 받아놓는 것은 인터넷이 끊기거나.
    호스팅 사이트가 사라질 수도 있는데. 이 때 주소만 바꾸면 되며
    보험용으로 라이브러리로 다운로드 받아서 관리하고 있으면 좋음

설치

  • Jquery

https://jquery.com/

Untitled

Untitled

  • Download 탭에서 아래로 스크롤
  • Google CDN 이동

Untitled

Untitled

  • 다음과 같은 형태로 사용
1
2
3
4
5
6
7
8
9
<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>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

Jquery 시작하기

  • Jquery 맛보기
  • jquery는 chain의 형태로 대상과 대상이 해야할 일에 대해서 처리

Untitled

선택자

  • 선택자를 활용하여 선택된 대상에 CSS를 적용할 수 있다

Untitled

선택자 실습

  • 선택자를 사용해본다
  • jquery_test_02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면..
        $(function(){
            // 직접선택자
            $(".wrap-1").css("border","1px solid orange");
            $(".wrap-1 p").css("background","yello");
            // 근접선택자
            $(".active").next("p").css("background", "aqua");
            // 위치선택자
            $(".wrap-1 p").eq(1).css("font-size","5px");
            // 속성선택자
            $("input[type-text]").css("background","orange");
            // 객체조작 ==> class="active" 제거. aqua 컬러 미적용
            $(".wrap-1 p").eq(1).removeClass("active");
            $(".active").next("p").css("background", "aqua");
            // 객체조작 ==> class="active" 추가. aqua 컬러 적용
            $(".wrap-1 p").eq(1).addClass("active");
            $(".active").next("p").css("background", "aqua");
            // 객체조작 ==> tag를 추가함
            
            $(".wrap-1 p").append("<p>휴먼교육센터</p>");
        });
    </script>
</head>
<body>
    <div class="wrap-1">
        <p>텍스트1</p>
        <p class="active">내용2</p>
        <p><a href="https://www.naver.com/">네이버</a></p>
        <p><input type="text" value="hello"></p>
    </div>
    <div class = "wrap-2">
        <p>내용5</p>
        <p>내용6</p>
    </div>
</body>
</html>
  • 결과

Untitled

이벤트 핸들링

  • Jquery 는 발생하는 이벤트를 체크하여 문서를 관리할 수 있음

Untitled

이벤트 핸들링 실습

  • jquery_test_03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면..
        $(function(){
            // $(".btn1 a").mouseover(function(){
            //     alert("휴먼교육센터");
            // })
            
            // 2개 이상의 이벤트를 동시에 적용 가능 
            // $(".btn1 a").on("mouseover focus", function(){
            //     // 선택된 대상
            //     let ts = $(this);
            //     ts.css("background-color", "yellow");
            // });

            $(".btn1 a").on("mouseover focus", function(){
                // 선택된 대상
                let ts = $(this);
                // 선택된 대상의 ul 태그 중 visible이 포함된 것이라면 hide(숨기고)
                $(".btn1").next("ul").filter(":visible").hide();
                // 선택된 부모(p)의 다음 것을 출력
                ts.parent().next().show();
                return false;
 
            });
        });
    </script>
</head>
<body>
    <p class="btn1"><a href = "#">이벤트 대상1</a></p>
    <ul style="display:none">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>

    <p class="btn1"><a href = "#">이벤트 대상2</a></p>
    <ul style="display:none">
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
    </ul>

</body>
</html>
  • 결과

Untitled

효과 및 애니메이션

  • Jquery 는 이벤트 발생시 효과 및 애니메이션 기능을 수행함
  • 효과 메서드
    • 요소를 역동적으로 숨겼다 보이도록 해주는 매서드가 있다
    • 선택한 요소에 동적으로 적용 가능
  • 효과 메서드 사용법
    • $(요소 선택).효과 메서드(효과소요시간, 가속도, 콜백함수)
  • 애니메이션 사용법
    • $(요소 선택).animate({적용할 속성과 값}, 가속도, 콜백함수);

애니메이션 실습02

  • jquery_04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면...
        $(function(){
            $(".btn1").on("click", function(){
                let ts = $(this);
                if(ts.text() == "숨김") {
                    // 1000은 1초를 의미.
                    $(".wrap").slideUp(1000, function(){
                        $(".btn1").text("노출");
                    })
                }
                else{
                    $(".wrap").slideDown(1000, function(){
                        $(".btn1").text("숨김");

                    })
                }
            });
        });
    </script>
</head>
<body>
    <p class="btn-wrap">
        <button class="btn1">숨김</button>
    </p>
    <div class="wrap">
        <p class="txt1">내용1</p>
        <p class="txt1">내용2</p>
    </div>

    
</body>
</html>
  • 결과
  • 숨김 버튼을 누르면 텍스트가 사라지고 노출 버튼으로 전환
  • 노출 버튼을 누르면 텍스트가 출력되고 숨김 버튼으로 전환

Untitled

애니메이션 실습01

  • 버튼을 누름으로써 이동하는 객체를 구현해본다
  • jquery_05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding: 20px;
        }
        .btn-wrap{
            margin-bottom : 10px;
        }
        .wrap{
            max-width:600px;
            border : 1px solid black;
        }
        .txt1{
            width:10%;
            text-align: center;
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            let txt1=$(".txt1");
            let count = 1;
            $(".btn-wrap button").on("click", function(){
                let ts = $(this);
                if(ts.hasClass("back-button")){
                    count--;
                    
                    if(count < 1){
                        count = 1;
                        return;
                    }
                    txt1.animate({marginLeft:"-=10%"}, 500);
                }
               else{
                    count++;
                    if(count > 10){
                        count = 10;
                        return;
                    }
                    txt1.animate({marginLeft:"+=10%"}, 500);
                }
            });
        });
    </script>
</head>
<body>
    <p class="btn-wrap">
        <button class="back-button">back</button>
        <button class="go-button">go</button>
    </p>
    <div class="wrap">
        <p class="txt1">내용1</p>
    </div>
    
</body>
</html>
  • 결과
  • back에 의해 뒤로, go에 의해 앞으로 이동한다

Untitled

Posted Updated  minkuen frontEnd / javascript8 minutes read (About 1209 words)

JavaScript Event

이벤트 객체

  • Keyboard 및 Mouse 등의 입력장치에서는 이벤트가 발생함
  • 발생한 Event의 속성값들을 대상으로 문서의 변경을 활용할 수 있음

Untitled

이벤트 관리

  • 이벤트는 Window라는 객체가 모든 객체를 대상으로 관리하고 있음.
  • 최하단의 객체의 이벤트는, 상위로 이벤트를 발생시키고 있음. (상위 객체에서 관리 가능함)

Untitled

이벤트 객체의 메서드(1)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있다

Untitled

이벤트 객체의 메서드(2)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Mouse는 X,Y의 좌표를 확인할 수 있도록 인터페이스 제공함

Untitled

이벤트 객체의 메서드(3)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Keyboard는 눌려진 Key 및 ALT/SHIFT 등을 확인할 수 있도록 인터페이스 제공함

Untitled

마우스 이벤트 실습

  • 마우스 이벤트는 e.target이란 객체로 속성값들을 사용할 수 있음

Untitled

  • event_01.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <section id = "section">
        <!-- 세번째 방법으로 bubbling 효과를 확인 -->
        <div id ="img-list">
            <img class="img" src="images/img1.jpg">
            <img class="img" src="images/img2.jpg">
            <img class="img" src="images/img3.jpg">
            <input type="text">
        </div>
        <div>
            <img class="current-img" src="images/img1.jpg">
        </div>
    </section>
</body>
  • event_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let imgList = section.querySelector("#img-list");
    let imgs = section.querySelectorAll(".img");
    let currentImg = section.querySelector(".current-img");

    /*  첫번째 방법 : 이미지들 중 클릭된 것만 대상으로 src 변경하여 이미지 변경
    imgs[0].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[1].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[2].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    */

    /*  두번째 방법 : 첫번째 방법을 for문을 활용하여 코드 간결화
    for (let i=0 ; imgs.length ; i++) {
        imgs[i].onclick = function(e) {
            currentImg.src = e.target.src;
        }
    }
    */

    // 세번째 방법 : 상위 객체에서도 이벤트를 bubbling을 통해서 받기 때문에.
    //              상위 객체에서도 관리가 가능합니다. 
    //              다만, img가 아닌 것은 제외하면서 이미지의 경로를 변경 작업함.
    imgList.onclick = function(e) {
        console.log(e.target.className);
        if (e.target.className != 'img') {
            return; 
        }
        currentImg.src = e.target.src;
    }

});
  • 결과
  • 클릭한 이미지가 아랫 열에 출력되도록 구현되었다

Untitled

마우스 이벤트 실습 - trigger

  • 특정 Element 이벤트는 다른 Element 이벤트를 호출할 수 있음 (트리거)
  • Span tag의 클릭이 file 선택하는 input Tag를 클릭하게 함.

Untitled

  • trigger_01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>event</title>
    <style>
        .file-button{
            /* 버튼은 숨김. */
            display:none;
        }
        .file-trigger-button {
            background-color: green;
            border : 1px solid lightgreen;
            border-radius: 5px;
            /* 상하는 5px, 좌우는 10px */
            padding : 5px 10px;
            color : white;
            /* 버튼 위로 마우스가 올라가면 클릭을 유도하는 포인터 */
            cursor : pointer;
        }
        .file-trigger-button:hover {
            background-color: lightgreen;
        }
    </style>
    <script src="trigger_01.js"></script>
</head>
<body>
    <section id="section">
        <input type="file" class="file-button">
        <span class="file-trigger-button">파일선택</span>
    </section>
</body>
</html>
  • trigger_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let fileButton = section.querySelector(".file-button");
    let fileTriggerButton = section.querySelector(".file-trigger-button");

    // fileButton.onclick에 대해서는 미정의
    fileButton.onclick = function(e) {
    };
    fileTriggerButton.onclick = function(e) {
        let event = new MouseEvent("click", {
            'view':window,
            'bubbles' : true,
            'cancelable' : true
        })
        // 숨겨진 fileButton은 event(위에서 정의한 마우스이벤트)를 수행한다.
        fileButton.dispatchEvent(event);
    }
});
  • 결과
  • 파일 선택 후 의도한 결과가 출력되었다

Untitled

마우스 이벤트 실습 - X,Y 좌표 이용

  • 마우스 이벤트 발생시 X,Y 좌표를 활용할 수 있음
  • X,Y 좌표는 여러가지의 형태로 존재함.

Untitled

  • 사각형을 만든다
  • 클릭한 곳으로 사각형이 이동하도록 작성해보자
  • event_02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>event 실습</title>
    <style>
				body{
            margin : 0px 0px;
        }
        .container{
            width: 800px;
            height: 400px;
            border: 1px solid gray;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: blue;
        }
    </style>
    <script src="event_02.js"></script>
</head>
<body>
    <section id = "section">
        <div class = "container">
            <div class="box"></div>
        </div>
    </section>
</body>
</html>
  • event_02.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let container = section.querySelector(".container");
    let box = section.querySelector(".box");

    container.onclick = function(e){
        console.log("(x,y) = " + e.x, e.y);
        console.log("(client) = " + e.clientX, e.clientY);
        console.log("(page) = " + e.pageX, e.pageY);
        console.log("(offset) = " + e.offsetX, e.offsetY);

        box.style.position = "absolute";
        box.style.left = e.x + "px";
        box.style.top = e.y + "px";
    }
});
  • 결과
  • 클릭한 위치로 사각형이 이동한다

Untitled

  • 이번에는 사각형을 드래그하여 움직히에 한다
  • event_02.js에 다음 코드를 추가한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let offset = {x:0, y:0};

// on mounse down = 마우스가 눌린 상태
container.onmousedown = function(e){
    // 석택된 객체가 box라면, dragging을 true로 처리
    if(e.target == box){
        dragging = true;
    }
};

// 마우스가 떨어진 상태
container.onmouseup = function(e){
    // 선택된 객체가 box라면 dragging을 false로 처리
    if(e.target == box){
        dragging = false;
    }
};

box.onmousedown = function(e){
    offset.x = e.offsetX;
    offset.y = e.offsetY;
}
  • 캡처로만 봤을 때는 차이가 없지만 클릭 후에만 이동하도록 구현되었다

Untitled

Posted Updated  minkuen frontEnd / javascript11 minutes read (About 1626 words)

JavaScript DOM

DOM 모델

  • DOM : Document Object Model
  • 문서내의 Node는 객체이고, 각 객체의 속성값을 통해 문서를 제어

Untitled

DOM 모델 실습 – img 모델 (1)

  • img 속성값을 통해서 자바스크립트로 문서 변경하기

Untitled

실습01

  • 우선 이미지를 다운받아서 images 폴더에 넣어놓는다.

  • 예시) images/img1.jpg

  • 다운받은 이미지를 출력해보자

  • 입력한 이미지를 새로 띄울 수 있도록 구현해보자

  • dom_01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>실습</title>
    <script src="dom_01.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class = "src-input" type="text">
            <input class = "change-button" type="button" value="변경">
        </div>
        <div>
            <img class="img" src="images/img1.jpg">
        </div>
    </section>
</body>
</html>
  • dom_01.js
1
2
3
4
5
6
7
8
9
10
11
window.addEventListener("load", function(){

    let section = document.querySelector("#section1");
    let srcInput = section.querySelector(".src-input");
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");

    changeButton.onclick = function(){
        img.src = "images/" + srcInput.value;
    }    
});
  • 지정한 경로의 이미지가 출력되었다

Untitled

  • 출력할 이미지의 경로를 입력하면 다음과 같이 변경된다
  • 예시) img1.jpg

Untitled

실습02

  • 텍스트를 직접 입력하지 않아도 이미지를 바꿀 수 있게 해보자
  • dom_02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>실습</title>
    <script src="dom_02.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class = "src-input" type="text">
            <select class = "img-select">
                <option value="img1.jpg">img1</option>
                <option value="img2.jpeg">img2</option>
                <option value="img3.jpg">img3</option>
            </select>
            <input class = "change-button" type="button" value="변경">
        </div>
        <div>
            <img class="img" src="images/img3.jpg">
        </div>
    </section>
</body>
</html>
  • dom_02.js
1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener("load", function(){

    let section = document.querySelector("#section1");
    // let srcInput = section.querySelector(".src-input");
    let imgSelector = section.querySelector(".img-select")
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");

    changeButton.onclick = function(){
        img.src = "images/" + imgSelector.value;
    } 
});
  • 이미지 이름을 선택하고 변경할 수 있게 되었다.

Untitled

실습03

  • 이미지에 테두리 색을 입혀보자
  • 테두리 색을 변경가능하게 작성한다
  • dom_04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>dom실습</title>
    <script src="dom_04.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class="src-input" type="text" list="img-list">
            <datalist id="img-list">
                <option value="img1.jpg">img1</option>
                <option value="img2.jpg">img2</option>
                <option value="img3.jpg">img3</option>               
            </datalist>
            <input class="color-input" type="color">
            <input class="change-button" type="button" value="변경">
        </div>
        <div>
            <br>
            <img class="img" src="images/img1.jpg" style="border-width:5px; border-style:solid; border-color:red;">
        </div>
    </section>
</body>
</html>
  • dom_04.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let srcInput = section.querySelector (".src-input");
    // let imgSelector = section.querySelector(".img-select");
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");
    let colorInput = section.querySelector(".color-input");

    changeButton.onclick = function(){
        img.src = "images/" + srcInput.value;
        // img.style["border-color"] = colorInput.value;
        img.style.borderColor = colorInput.value;
    }
});
  • 결과
  • 테두리를 변경 가능하게 구현되었다.

Untitled

실습04

  • 리스트에 내용을 추가/삭제하는 기능을 만들어보자
  • dom_5.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <section id = "section1">
        <div>
            <input class="title-input" type="text" name="title">
            <input class="add-button" type="button" value="추가">
            <input class="del-button" type="button" value="삭제">
        </div>
        <div class="menu-list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <!-- <li>휴먼</li>  ==> 신규 생성됨.-->

        </div>
    </section>
</body>
  • dom_05.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let titleInput = section.querySelector(".title-input");
    let addButton = section.querySelector(".add-button");
    let delButton = section.querySelector(".del-button");
    let menuList = section.querySelector(".menu-list");
    
    addButton.onclick = function(){
        let textNode = document.createTextNode(titleInput.value);
        let liNode = document.createElement("li"); //li 태그를 만듦

        liNode.appendChild(textNode);   //li 태그에 textNode를 추가
        menuList.appendChild(liNode);   // menuList에 li 태그 추가
    };
    delButton.onclick = function(){
        let liNode = menuList.children[0]; // 자식중 첫번째 태그
        menuList.removeChild(liNode);   // li 태그를 부모에서 연결 제거
    };
});
  • 결과

Untitled

실습 05

  • 테이블을 만들고 복사,입력, 템플릿 기능을 구현해보자
  • dom_06.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
    <section id = "section1">
        <template>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </template>
        <div>
            <input class="clone-button" type="button" value="복사">
            <input class="input-button" type="button" value="입력">
            <input class="temp-button" type="button" value="템플릿">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
            </tbody>
        </table>
    </section>
</body>
  • dom_06.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
window.addEventListener("load", function(){
    let notices = [
    {"id":5, "title":"가입인사3", "content":"가입인사3", "writer":"강*혁"}
    ,{"id":6, "title":"가입인사4", "content":"가입인사4", "writer":"강*혁"}];
    let section = document.querySelector("#section1");
    let cloneButton = section.querySelector(".clone-button");
    let inputButton = section.querySelector(".input-button");
    let tempButton = section.querySelector(".temp-button");
    let noticeList = section.querySelector(".notice-list");

    tempButton.onclick = function(){
        let tempNode = section.querySelector("template");
        console.log(tempNode);
        // true는 하위 전체를 import함.
        let cloneNode = document.importNode(tempNode.content, true);
        let tds = cloneNode.querySelectorAll("td");
        tds[0].textContent = notices[0].id;
        tds[1].textContent = notices[0].title;
        tds[2].textContent = notices[0].content;
        tds[3].textContent = notices[0].writer;
        // tbodyNode 하위로 cloneNode를 붙여넣음.
        let tbodyNode = noticeList.querySelector("tbody");
        tbodyNode.appendChild(cloneNode);
    };    
    inputButton.onclick = function() {
        let tbodyNode = noticeList.querySelector("tbody");
        let trNode = noticeList.querySelector("tbody tr");
        // cloneNode는 trNode와 같은 형태.
        let cloneNode = trNode.cloneNode(true);
        // querySelectorAll로 인해서 td[0]~td[4]
        let tds = cloneNode.querySelectorAll("td");
        // td의 값을 notice의 값으로 바꿔치기 함.
        tds[0].textContent = notices[0].id;
        tds[1].textContent = notices[0].title;
        tds[2].textContent = notices[0].content;
        tds[3].textContent = notices[0].writer;
        // tbodyNode 하위로 cloneNode를 붙여넣음.
        tbodyNode.appendChild(cloneNode);
    };
    cloneButton.onclick = function(){
        let tbodyNode = noticeList.querySelector("tbody");
        // querySelector (먼저 있는 것 1개) 
        // querySelectorAll (모든 것을 배열로 가져옵니다.)
        let trNode = noticeList.querySelector("tbody tr");
        console.log(trNode);
        let cloneNode = trNode.cloneNode(true); 
        // true : tr하위까지 포함 복제하여 엘리먼트 생성
        // false : tr본인만 복제하여 엘리먼트 생성
        console.log(cloneNode);
        tbodyNode.appendChild(cloneNode);
        // tbody 엘리먼트 하위로 복제된 것을 연결함.
    };
});
  • 결과
  • 빈 상태에서 템플릿을 누르면 행 하나가 입력된다
  • 입력하면 미리 설정한 행이 삽입된다
  • 복사를 누르면 행 하나가 복사된다

Untitled

실습06

  • 행이 테이블 내에서 위,아래로 이동할 수 있게 해보자
  • 위로 이동 버튼, 아래로 이동 버튼 구현
  • dom_07.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<body>
    <section id = "section1">
        <div>
            <input class="up-button" type="button" value="위로">
            <input class="down-button" type="button" value="아래로">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color: lightblue;">
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
                <tr>
                    <td>3</td>
                    <td>가입신청3</td>
                    <td>가입신청합니다.3</td>
                    <td>강*혁</td>
                </tr>  
            </tbody>
        </table>
    </section>
</body>
  • dom_07.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let upButton = section.querySelector(".up-button");
    let downButton = section.querySelector(".down-button");
    let tbodyNode = section.querySelector("tbody");
    
    let currentNode = tbodyNode.firstElementChild;

    downButton.onclick = function(){
        let nextNode = currentNode.nextElementSibling;
        if(nextNode == null) {
            alert ("더 이상 이동불가합니다.");
            return;
        }
        // insertBefore란, currentNode 앞으로 nextNode를 이동한다. 
        tbodyNode.insertBefore(nextNode, currentNode);
    };    
    upButton.onclick = function() {
        let prevNode = currentNode.previousElementSibling;
        if(prevNode == null) {
            alert ("더 이상 이동불가합니다.");
            return;
        }
        // insertBefore란, prevNode 앞으로 currentNode 이동한다. 
        tbodyNode.insertBefore(currentNode, prevNode);
    };
});
  • 결과
  • 버튼을 눌렀을 때, 1번 행이 아래로 이동하는 것을 확인

Untitled

실습07

  • 체크박스를 사용한다
  • 모두 체크하기, 체크한 행 삭제하기, 행 위치 교환 기능을 구현
  • dom_08.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
    <section id = "section1">
        <div>
            <input class="del-button" type="button" value="일괄삭제">
            <input class="swap-button" type="button" value="선택노드 바꾸기">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td><input type="checkbox" class="overall-checkbox"></td>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" unchecked></td>
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>가입신청3</td>
                    <td>가입신청합니다.3</td>
                    <td>강*혁</td>
                </tr>  
            </tbody>
        </table>
    </section>
</body>
  • dom_08.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let delButton = section.querySelector(".del-button");
    let swapButton = section.querySelector(".swap-button");
    let tbodyNode = section.querySelector("tbody");
    let allcheckbox = section.querySelector(".overall-checkbox");

    delButton.onclick = function(){
        // 체크된 것만 inputs에 포함됨.
        // 체크가 안된 것 만 포함할 경우는 "input[type='checkbox']:unchecked
        let inputs = tbodyNode.querySelectorAll
                            ("input[type='checkbox']:checked");
        for (let i=0 ; i<inputs.length; i++) {
            //체크박스는 input 태그임. input==>TD==>TR. 이시점에서 remove
            inputs[i].parentElement.parentElement.remove();
        }
    };    
    swapButton.onclick = function(){
        // 체크된 것만 inputs에 포함됨.
        let inputs = tbodyNode.querySelectorAll
                ("input[type='checkbox']:checked");
        if (inputs.length !=2) {
            alert("2개만 체크해주세요");
            return;
        }
        trs=[];
        for(let i=0; i<inputs.length; i++) {
            // trs에 선택된 2개의 input==>td==>tr의 내용을 넣음
            trs.push(inputs[i].parentElement.parentElement);
        }
        // 첫번째것을 복사해서 clone으로 생성
        let cloneNode = trs[0].cloneNode(true);
        // 두번째것과 복제된 것을 교체 
        trs[1].replaceWith(cloneNode);
        // 첫번째 것과 두번째 것을 교체 
        trs[0].replaceWith(trs[1]);
    };
    allcheckbox.onclick = function(){
        let inputs = tbodyNode.querySelectorAll("input[type='checkbox']");
        for (let i=0 ; i<inputs.length; i++) {
            // allcheckbox의 체크 형태를 기준으로 각 체크박스에 대입함.
            inputs[i].checked = allcheckbox.checked;
        }
    };    

});
  • 결과
  • 모두 체크, 체크한 행 삭제, 행 위치 교환 모두 정상 작동을 확인

Untitled

Posted Updated  minkuen frontEnd / javascript9 minutes read (About 1281 words)

JSON

  • JSON : JavaScript Object Notation
  • 2차원 데이터를 관리하기 쉬운 JavaScript 타입.

[실습 예제]

Untitled

데이터 관리의 방법 - CSV, XML, JSON

  • 데이터 관리 방법 : CSV, XML, JSON
  • 브라우져에서 해석하기 쉬운 JSON 방식으로 많이 사용함

Untitled

JSON Parse 예제

  • 문자열로 들어온 JSON 데이터를 Parse를 통해서 데이터 관리 할 수 있다
  • 파싱 : 각 문장의 문법적인 구성 또는 구문을 분석하는 과정.

[실습 예제]

Untitled

연산자

  • Java Script의 연산자

Untitled

  • 값의 비교 : == 또는 !=
  • 주소의 비교 : === 또는 !==

Untitled

제어구조

  • JavaScript의 제어구조

Untitled

  • 제어구조 예시

Untitled

함수

  • JAVA 스크립트는 함수는 있으나 다른 언어처럼 정의하지는 않고, 만드는 형태

Untitled

함수 사용해보기

  • 여러가지 방식으로 함수를 사용해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
        document.write("함수 사용하는 여러가지 방법")
        document.write("<BR>");

        let add1 = new Function ("x,y", "return x+y");
        document.write(add1(3,4));
        document.write("<BR>");
        
        let add2 = function (x,y){
            return x+y;
        }
        document.write(add2(3,4));
        document.write("<BR>");

        function add3(x,y){
            return x+y;
        }
        document.write(add3(3,4));

        function add4(x,y){
            document.write(arguments);
            document.write("<BR>");
            document.write(arguments[0], arguments[1], arguments[5]); 
            document.write("<BR>");
            return x+y;
        }
        document.write(add4(3,4,5,6,7,"HUMAN")); //7

    </script>
  • 다음과 같은 결과가 출력된다

Untitled

함수 - 지역변수, 전역변수

  • 변수 선언 : var, let, const임
  • var가 포함되지 않은 변수는 전역변수로 활용됨. (window.변수명)

Untitled

Browser 플랫폼

  • 브라우져 플랫폼 : 브라우져 객체를 활용
  • 브라우져 객체 핸들링을 통해서 브라우져의 활용이 가능함

Untitled

Browser 플랫폼 -사용자와 상호작용 가능한 메서드

  • alert : 사용자에게 알람을 주는 메서드
  • prompt : 사용자에게 입력을 받는 메서드
  • confirm : 사용자의 선택을 확인하는 메서드

Untitled

상호작용 - 입력 받은 값으로 실행

  • 코드를 작성해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
        let x,y;
        // x = window.prompt ("x값 입력 = ", 0);
        // y = window.prompt ("y값 입력 = ", 0);

        // window는 생략 가능
        x=eval(prompt("x 값 입력 = ", 0)); 
        y=eval(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        // 정수형으로 변환
        x=parseInt(prompt("x 값 입력 = ", 0)); 
        y=parseInt(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        // 실수형으로 변환
        x=parseFloat(prompt("x 값 입력 = ", 0)); 
        y=parseFloat(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        let answer;
        answer = confirm("정말로 삭제하시겠습니까?");
        document.write(answer);
        document.write("<BR>");
        if(answer) 
						document.write("삭제");
        else
						document.write("취소");
    </script>
  • 결과는 다음과 같다

Untitled

  • confirm이 어떤 식으로 적용되는지 확인

Untitled

Browser 플랫폼 -이벤트 기반 프로그래밍

  • 사용자 이벤트에 의해 처리하는 방식
  • 사용자 이벤트 : Keyboard 입력 / 마우스 move / 마우스 클릭 등

Untitled

Browser 플랫폼 – 이벤트 기반 함수호출

  • 사용자 이벤트를 함수적으로 호출하여 프로그램의 간소화 가능

Untitled

Browser 플랫폼 - 객체 활용하여 HTML 문서로 변경

  • 윈도우 객체에 값 전달하여 HTML 문서의 변경

Untitled

Button

  • 버튼을 사용해보자
  • 버튼을 누르면 함수가 적용되도록 작성
  • 버튼을 누르고 나면 텍스트창으로 변환되도록 의도
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
    <script>
        function printResult1(){
            let x, y;
            x = eval(prompt ("x값 입력 = ", 0));
            y = eval(prompt ("y값 입력 = ", 0));
            alert (x+y);
        }
        
        function printResult2(){
            let x, y;
            x = eval(prompt ("x값 입력 = ", 0));
            y = eval(prompt ("y값 입력 = ", 0));
            btn1.value = x+y;
            btn1.type = "text";
        }
    </script>
</head>
<body>
    <input type="button" value="클릭1" onclick="alert('안녕하세요');">
    <input type="button" value="클릭2" onclick="printResult1();">
    <input type="button" value="클릭3"
    onclick="printResult2();" id="btn1">
</body>
</html>

Browser 플랫폼 – 여러 스크립트 활용시 문제점

  • 윈도우 객체에 값 전달하여 HTML 문서의 변경

Untitled

Browser 플랫폼 – getElementById

  • getElementById : 엘리먼트(일반적으로 tag) ID를 통한 엘리먼트 객체 획득

Untitled

Browser 플랫폼 – onload시 2개의 함수 호출방법

  • onload를 통해 1개의 함수 호출은 가능하나 2개의 기능을 순차적 실행은 불가함.
  • 이럴 때는 addEventListener를 통해서 처리 가능

Untitled

  • addEventListener를 사용해보자
  • html파일을 작성하고 함께 사용할 js파일도 작성한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
    <script src="Js_Exam_15_1.js"></script>
    <script src="Js_Exam_15_2.js"></script>
</head>
<body>
    <input type="button" value="클릭5" id="btn5">
</body>
</html>
  • Js_Exam_15_1.js
1
2
3
4
5
6
7
8
9
10
11
12
// window.onload = function(){
window.addEventListener("load", function(){
    let printBtn = window.document.getElementById("btn5");
    printBtn.onclick = function(){
        let x,y;
        x=eval(prompt ("x값 입력 = ", 0));
        y=eval(prompt ("y값 입력 = ", 0));
        btn5.type = "text";
        btn5.value = x+y;
    };    
}
);
  • Js_Exam_15_2.js
1
2
3
4
5
// alert("Hi, 휴먼교육센터");

window.addEventListener("load", function(){
    alert("Hi, 휴먼교육센터");
});
  • 결과 - 두 js파일에 담긴 기능이 모두 구현되었다.

Untitled

계산기 만들기

  • 간단한 계산기를 만들어보자
  • 일단 (+) 기능부터 시작
  • calc_01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>계산기</title>
    <script src="calc_01.js"></script>
</head>
<body>
    <input type = "text" id = "txt1"> +
    <input type = "text" id = "txt2"> 
    <input type = "button" id = "add" value="="> 
    <input type = "text" id = "sum" value = 0> 
    
</body>
</html>
  • calc_01.js
1
2
3
4
5
6
7
8
9
10
window.addEventListener("load", function(){
    let btnPrint = this.document.getElementById("add");
    btnPrint.onclick = function(){
        let x, y;
        x = parseInt(document.getElementById("txt1").value);
        y = parseInt(document.getElementById("txt2").value);
        sum.value = x+y;

    };
});
  • (+) 기능이 구현되었다

Untitled

Posted Updated  minkuen frontEnd / javascript4 minutes read (About 541 words)

Java Script 실습01

Java Script란?

  • 1단계 : HTML 문서란 document 객체로 변환하여 로딩
  • 2단계 : document 객체 기반으로 화면에 보여짐
  • 중간에서 JAVA Script는 이 객체의 정보에 접근하여 관리가 가능

Untitled

JAVA Script 탄생배경

Untitled

데이터 - 값의 종류 및 변환

  • const = 상수. 변하지 않는다
  • 정수 = int
  • 실수 = double
  • 문자 = char
  • 문자열 = string

Untitled

Java Script 사용해보기

  • VSCord에서 다음 코드 작성
  • 를 이용한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>
    <script>
        alert("휴먼교육센터");
        console.log("휴먼교육센터");
        document.write("후먼교육센터")
    </script>
</head>
<body>
    
</body>
</html>
  • 해당 html 파일을 열어본다.
  • 작성한 코드가 반영된다. 다른 코드도 같은 방식으로 진행하자

Untitled

데이터 - 참조형 변수

Untitled

데이터 - 배열변수

Untitled

데이터 - 배열 변수 초기화

Untitled

데이터 - list 관리

Untitled

  • splice 까지 실습한 코드이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
    <script>
        let nums = new Array();
        nums.push(3);
        nums.push(13);
        nums.push(25);
        console.log(nums);  // 배열의 형태로 3,13,25
        
        let n1 = nums.pop(); // 가장 위에 있는 25 제거
        console.log("nums : ", nums);
        console.log("n1 : ", n1);

        let num2 = new Array(2,3,"hello", 7);
        console.log(num2);      // 배열
        console.log(num2[2]);   // "hello"
        let num3 = new Array(2, 3, "hello", 7, new Array(2,3,4));
        console.log(num3[4]);   // [2, 3, 4]
        console.log(num3[4][1]);    // 3

        num2.splice(2);         // 3~4번째가 삭제
        console.log(num2);
        num2.splice(2,1);       // 3번째에서 1개만 삭제 
        console.log(num2);
        num2.splice(2,1, "HUMAN");// 3번째에서 1개 삭제 후 HUMAN 삽입
        num2.splice(2,0, "COMP");
        // 3번째에서 0개 삭제 후 COMP 삽입
        

    </script>
</head>
<body>
</body>
</html>
  • 해당 html의 console 창이다

Untitled

데이터 - object 객체

Untitled

  • 객체에 관해 실습해보았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
     var exam = {"kor":90, "eng":80, "math":70}
     console.log(exam);
     console.log(exam.kor + exam.math);
     // 자바 스크립트는 배열변수 내에 여러 타입을 담을 수 있다
     var ar = [3, 4, 5, 6, exam, [7,8,9]];

     console.log(ar[1]);     // 4
     console.log(ar[4]);     // {"kor":90, "eng":80, "math":70}
     console.log(ar[4][0]);  // undifined
     console.log(ar[4]["kor"]);  // 90
     console.log(ar[4].math);    // 70
     console.log(ar[5]);     // [7,8,9]
     console.log(ar[5][1]);  // 8
 </script>

  • 결과는 다음과 같다

Untitled

Untitled

Posted Updated  minkuen frontEnd / javascript7 minutes read (About 980 words)

Java Script 실습3

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step05_js
    • 파일 생성 : ch03_variables.html

JavaScript 작성

  • ch03_variables.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "number"> 123 </h1>
    </center>
    <script>
        var firstName = "evan";
        var ageNum = 30;
        document.getElementById('string').innerHTML = firstName;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch03_variables.html을 오픈
  • 페이지가 출력된다.

Untitled

연산 결과 출력

  • ch04_math_js.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document4</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "addition"> 123 </h1>
    </center>
    <script>
        /*
            사칙연산 구현하기
        */
        var num_1 = 10;
        var num_2 = 20;
        document.getElementById('addition').innerHTML = num_1 + num_2;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch04_math_js.html을 오픈
  • 페이지에 연산 결과인 30이 출력된다.

Untitled

연산 결과 출력(boolean)

  • ch05_operators.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document4</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "addition"> 123 </h1>
    </center>
    <script>
        /*
            사칙연산 구현하기
        */
        var num_1 = 10;
        var num_2 = 20;
        document.getElementById('addition').innerHTML = num_1 + num_2;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch05_operators.html을 오픈
  • 페이지에 연산 결과인 true, false가 출력된다.

Untitled

조건문

  • ch06_conditional.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "demo"> your_domain </h1>
    </center>
    <script>
        firstName = "john";

        if(firstName = "john"){
            document.getElementById("demo").innerHTML = firstName;
        } else if (firstName = "ddd") {
            document.getElementById("demo").innerHTML = "Hello my name is!";
        } else {
            document.getElementById("demo").innerHTML = "이름이 다름!";
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch06_conditional.html을 오픈
  • 페이지에 조건문에 의한 결과 출력

Untitled

다중 조건문

  • ch07_multiple_condition.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "demo"> your_name </h1>
    </center>
    <script>
        firstName = "ABC";
        ageNum = 30;
        // %% --> AND
        // || --> OR

        if(firstName = "John" && ageNum == 30){
            document.getElementById('demo').innerHTML = firstName;
        } else if (firstName = "my name is") {
            document.getElementById("demo").innerHTML = "Hello my name is!";
        } else {
            document.getElementById("demo").innerHTML = "이름이 다름!";
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch07_multiple_condition.html을 오픈
  • 페이지에 조건문에 의한 결과 출력

반복문

  • ch08_arrays.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <center>
        <h1 id = "demo">arrays</h1>
    </center>
    <script>
        var pizzaToppings = ['Pepperoni', 'Mushroom', 'Sausage', 'cheese'];
        for (i=0; i < pizzaToppings.length; i++) {
            document.write(pizzaToppings[i] + '<br/>');
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch08_arrays 오픈
  • 반복문에 의한 결과 출력

Untitled

입력

  • ch09_prompt.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Prompt</h1>
    </center>
    <script>
        var yourName = prompt("이름을 적어주세요!!");
        console.log(yourName);
        document.write(hello(yourName));
    </script>
</body>
</html>
  • myscript.js 에 다음 코드 작성
1
2
3
4
5
document.getElementById('demo').innerHTML="자바스크립트";

function hello(firstName) {
    return "안녕하세요!" + firstName;
}
  • step05_js 폴더에서 ch09_prompt.html 오픈
  • 입력 프롬프트 출력

Untitled

난수

  • ch10_random_num.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Random Numbers</h1>
    </center>
    <script>
        document.write(Math.floor(Math.random() * 100 ) + 1);
    </script>
</body>
</html>
  • step05_js 폴더에서 ch10_random_num.html 오픈
  • 난수 출력

Untitled

입력과 출력

  • ch11_web_forms.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript2.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Input , Output</h1>
    </center>
    <p>안녕하세요, 이름을 입력하세요:</p>
    <input id = "name">
    <button type="button" onclick="hello()">제출</button>
    <p id = "output"></p>
</body>
</html>
  • 파일 생성
  • project/step05_js/js 아래에 생성
    • 파일 생성 : myscript2.js
    • 다음 코드를 작성한다.
1
2
3
4
5
// Functions
function hello() {
    var firstName = document.getElementById('name').value;
    document.getElementById('output').innerHTML = "정답 :  " + firstName;
}
  • step05_js 폴더에서 ch11_web_forms.htmll 오픈
  • 입력하면 후 출력이 가시적으로 표현된다.

Untitled

계산기(더하기)

  • ch12_flash_cards.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/myscript2.js"></script>

</head>

<body>
    <br />
    <center>
        <h1 id="demo">
            <script>
                var numOne = Math.floor(Math.random() * 10) + 1;
                var numTwo = Math.floor(Math.random() * 10) + 1;

                document.write(numOne + " + " + numTwo); 

                // 계산 결과
                // console.log(correctAnswer);

                var correctAnswer = numOne + numTwo;
                /*
                document.write(Math.floor(Math.random() * 10) + 1);
                document.write(" + ");
                document.write(Math.floor(Math.random() * 10) + 1);
                */
            </script>
        </h1>
    <p>답변을 입력하세요:</p>
    <input id="answer">
    <button type="button" onclick="addition()">제출</button>
    <input type="button" value = "새로운 문제 클릭!" onclick="newCard()">
    <br /><br />
    <p id="output"></p>
    <p id="solution"></p>
    </center>
</body>

</html>
  • myscript2.js 에 다음 코드 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Functions
function hello() {
    var firstName = document.getElementById('name').value;
    document.getElementById('output').innerHTML = "정답 :  " + firstName;
}

// addition()
function addition() {
    var ourAnswer = document.getElementById("answer").value;
    console.log(ourAnswer);

    // 문자열 처리
    if (isNaN(ourAnswer)) {
        document.getElementById("output").innerHTML = "입력한 " + ourAnswer + "는 숫자가 아닙니다!";

    // 숫자 처리
    } else {
        // 정답일 때,
        document.getElementById("output").innerHTML = ourAnswer;
        if(ourAnswer == correctAnswer) {
            document.getElementById("solution").innerHTML = "정답입니다!";
        } else { // 정답이 아닐 때,
            document.getElementById("solution").innerHTML = "정답이 아닙니다!";
        }
    }
}

function newCard() {
    document.getElementById('output').innerHTML = ""
    document.getElementById('answer').value = ""
    document.getElementById('solution').innerHTML = ""
    numOne = Math.floor(Math.random() * 10) + 1;
    numTwo = Math.floor(Math.random() * 10) + 1;

    document.getElementById('demo').innerHTML = numOne + " + " + numTwo;
    correctAnswer = numOne + numTwo;

}
  • step05_js 폴더에서 ch12_flash_cards.htm 오픈
  • 더하기 한정으로 계산 기능이 구현되었다.

Untitled

Untitled

Posted Updated  minkuen frontEnd / javascript3 minutes read (About 418 words)

Java Script 실습2

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step05_js
    • 파일 생성 : ch01_index.html

JavaScript 작성

  • ch01_index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <button type="button" onclick="document.getElementById"
        ('demo').innerHTML = Date()">
            버튼을 클릭하세요!
        </button>
        <p id="demo"></p>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch01_index.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_1_js.html

  • ch02_1_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script>
            document.getElementById('demo').innerHTML="자바스크립트";
        </script>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_1_js.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_2_js.html

  • 폴더, 파일 생성

  • step05_js 폴더 아래에 생성

    • 폴더 생성 : js
    • js 아래에 파일 생성 : myscript.js

  • ch02_2_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script src = "js/myscript.js"></script>
    </center>
</body>
</html>
  • myscript.js 에 다음 내용 작성
1
document.getElementById('demo').innerHTML="자바스크립트";
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.
  • html에 작성하지 않은 스크립트의 출력에 성공했다.

Untitled

버튼

  • ch02_2_js.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.getElementById('demo').innerHTML="자바스크립트";
    </script>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>
        <button type="button" onclick="myFunction()">
            버튼을 클릭하세요!
        </button>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.

Untitled

Posted Updated  minkuen frontEnd / javascript3 minutes read (About 498 words)

Java Script 실습1

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step04_js_dom
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 형식

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js 에 다음 내용 작성
1
console.log("new file!")
  • step04_js_dom 폴더에서 index.html을 오픈
  • 페이지가 출력된다.
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

Event

  • 이벤트를 감지하고 출력하는 코드를 작성해본다.
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const boxEl = document.querySelector(".box");
console.log(boxEl);

boxEl.addEventListener('click', function() {
    console.log('Click!');
    boxEl.classList.add('active');

    /*
    const hasActive = boxEl.classList.contains('active');
    console.log(hasActive);
    */
   // let hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);

   // boxEl.classList.remove('active');
   // hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);
});
  • 1을 마우스로 클릭하면 다음과 같이 출력된다.
  • Click이라는 이벤트를 감지하고 표시한다.

Untitled

div class

  • 파일 생성

  • PROJECT 아래에 생성

    • 파일 생성 : main2.js

  • index.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main2.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
});
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

JS 구조 파악

  • 다음 코드와 실행 결과로 구조를 파악해보자.
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    // div 클래스면을 box order-1
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
    console.log(boxE1.textContent);
    boxE1.textContent = "안녕";
    console.log(boxE1.textContent);
});
  • index.html 의 1 2 3 4를 건드리지 않았음에도 다음과 같이 출력되었다.
  • 이를 통해 페이지에 최종적으로 영향을 미치는 것은 JS임을 알 수 있다.

Untitled

Posted Updated  minkuen frontEnd / javascript4 minutes read (About 579 words)

Java Script 기초

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step03_js_basic
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 작성

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js에 다음 내용 작성
1
2
// hello world
console.log("hello!")
  • step03_js_basic 폴더에서 index.html을 오픈
  • 다음과 같이 페이지가 출력된다.

Untitled

시스템 로그

  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

key-value

  • key-value를 비롯한 여러 변수를 호출해본다.
  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);

// 숫자
const number = 123;
console.log(number)

// Boolean
let checked = true;
let isShow = false;
console.log(checked)
console.log(isShow)

//undefied
let abc;
console.log(abc);

//null
let name = null;
console.log(name);

//재할당
name = 'kmk';
console.log(name);

// 파이썬 딕셔너리와 비슷
// key-value
const user = {
    name: 'kmk',
    age: 20,
    isValid: true 
}

console.log(user.name);
console.log(user.age);
console.log(user.isValid);
// console.log(user.user.city);  undefined
  • 다음과 같이 시스템 로그가 출력된다.

Untitled

사칙 연산

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 사칙 연산
const a=2;
const b=5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
  • 연산 결과가 시스템 로그에 출력된다.

Untitled

함수 선언과 호출

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 함수의 선언과 호출
function helloFunc() {
    console.log(1234);
}

helloFunc();

function returnFunc() {
    return 123;
}

const fun_result = returnFunc();
console.log(fun_result);

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

const sum_a = sum(1, 2);
console.log(sum_a);

const sum_b = sum(4,5)
console.log(sum_b);

// anonymous(익명 함수)
const world = function(){
    console.log("We are the world");
}
world();
  • 결과가 시스템 로그에 출력된다.

Untitled

조건문

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 조건문
const isDone = false;
if (isDone) {
    console.log('done!')
} else {
    console.log('Not Yet')
}
  • 결과가 시스템 로그에 출력된다.

Untitled

Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×