본문 바로가기
ICIA 수업일지

2021.07.27 수업일지

by 주성씨 2021. 7. 31.

- Java Script Review

18_arrayTest

<body>
    <!-- 정수입력 -->
    <input type="text" id="in" />
    <input type="button" value="insert" onclick="input()" />
    <input type="button" value="Max" onclick="getMaxMin(this)" />
    <input type="button" value="Min" onclick="getMaxMin(this)" />

    <script>
        var arr = [];

        function input() {
            //arr 배열에 정수를 저장
            arr.push(parseInt(document.getElementById("in").value));
            console.log(arr);
            document.getElementById("in").focus();
            document.getElementById("in").value = "";
        }

        function getMaxMin(obj) {
            // 최대값 또는 최소값 구해서 콘솔에 출력
            // for, if문으로 구하거나 정렬로 구하거나 편한대로
            // 정렬문 해보기
            // 숫자 정렬문으로 해야한다.
            if (obj.value == "Max") {
                arr.sort((a,b)=>a-b);
                console.log(arr[arr.length - 1]);
            } else {
                arr.sort((a,b)=>a-b);
                console.log(arr[0]);
            }

            // let max, min;
            // max = min = arr[0];
            // if (obj.value == "Max") {
            //     for (let val of arr) {
            //         if (max < val) {
            //             max = val;
            //         }
            //     }
            //     console.log("최대값 : "+max);
            // } else {
            //     for (let val of arr) {
            //         if (min > val) {
            //             min = val;
            //         }
            //     }
            //     console.log("최소값 : "+min);
            // }
        }
    </script>
</body>

ㄴ 숫자 정렬시 일반 정렬문 sort();를 사용하면 유니코드 순으로 정렬하기 때문에 제대로된 원하는 정렬값이 안나온다. 그렇기에 위와 같이 (a,b)=>(a-b)와 같은 함수를 이용해서 숫자 정렬을 해야 원하는 값이 나온다.

 

- DOM(Document Object Model) ***

- Event - 특정 액션에 일어나는 기능

  • 사용 방법 1 - 태그에 직접 등록한다.
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

 

  • 사용 방법 2 - 태그에 메서드 명만을 입력한다.
<button onclick=‘getDay()'>The time is?</button>
<script>
fuction getDay(){
'getElementById("demo").innerHTML=Date();
}
</script>

 

  • Event의 종류(아래는 단편적인 것이니 또 뭐가 있는지 확인해보자)
Event Description
onchange HTML 문서가 변경이 
onclick 클릭 시
onmouseover 마우스가 위로 올라왔을 경우
onmouseout 마우스가 특정 영역을 벗어 났을 경우
onkeydown 키가 눌렀을 경우
onload 브라우저가 모든 페이지를 로딩 한 후(가장 처음 일어나는)

 

08_event

1. 날짜 추출

    <h3>오늘의 날짜: <span id="demo"> </span></h3>
    <button onclick="getDay()">날짜 추출</button>
    <script>
        function getDay(){
            document.getElementById("demo").innerHTML = new Date();
        }
    </script>

날짜 추출 버튼 클릭 시 위와 같은 결과물이 나온다.

 

2. select 값 추출 onchange

    <h4 id="typing"> </h4>
    <select id="mySelect" onchange="myFunction()">
        <option value="Audi">Audi</option> <!-- value 서버에 넘어가는 값-->
        <option value="BMW">BMW</option>
        <option value="KIA">KIA</option>
        <option value="Benz">Benz</option>
    </select>
        function myFunction(){
            let msg=document.getElementById("mySelect").value;
            document.getElementById("typing").innerHTML = msg;
            // 위를 짧게 쓰고 싶다면
            // typing.innerHTML = mySelect.value;
            // 배열일 경우 에러가 난다.
        }

- select문을 통해서 선택된 option 값을 id="typing" h4에 넣는 function을 만들었다.
- function은 onchange를 통해서 해당 HTML문을 바꿀 수 있다.

 

3. input에 넣은 값을 onchange

    <input id="keyOn" type="text" onfocus="focusEvent('focus')" onblur="focusEvent('blur')" onchange="change()">
    <h4 id="typing"> </h4>
    <script>
        function change(){
            let msg = document.getElementById("keyOn").value;
            document.getElementById("typing").innerHTML = msg;
        }
    </script>

- 2번과 마찬가지고 input에 값을 입력시 onchange의 change() function을 통해서 "typing"의 값을 변경할 수 있다.

 

4. 마우스 on off를 통해 console 창에 onfocus, onblur 값 출력

    <input id="keyOn" type="text" onfocus="focusEvent('focus')" 
    onblur="focusEvent('blur')" onchange="change()">
    <script>
        function focusEvent(msg){
            console.log(msg);
        }
    </script>

- input 칸에 마우스를 클릭하게 공란에 클릭할 경우에 console 창에 functionEvent를 통해서 원하는 문자열을 출력할 수 있다.

- focus는 마우스 on, blur는 마우스 off

 

 

5. onmouseover, onmouseout 마우스가 위로 올라왔을때 특정 문자를 출력하고 벗어 났을때도 특정 문자를 출력

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
    <div id="over" onmouseover="mouseEvent('over')" onmouseout="mouseEvent('out')">
    </div>
        function mouseEvent(msg){
            if(msg=="over"){
                document.getElementById('over').innerHTML = "mouse over!!";
            }
            if(msg=="out"){
                document.getElementById('over').innerHTML = "mouse out!!";
            }
        }

- div tag 영역 안에 마우스를 올려 놓으면 특정 문자열을 html에 삽입하여 마우스의 over, out 상태를 알 수 있다.

 

 

 

6. onkeydown ; 키보드 값이 input 되었을때 눌렸을 경우

    <input id="keyOn" type="text" onkeydown="going()" onfocus="focusEvent('focus')" onblur="focusEvent('blur')"
        onchange="change()">
    <h4 id="typing"> </h4>
        function going() {
            // keydown, keyup
            // document.getElementById("typing").innerHTML="key down!!";
            let msg = document.getElementById("keyOn").value;
            document.getElementById("typing").innerHTML = msg;

            // 위를 한줄로 한다면
            // typing.innerHTML=keyOn.value;
            // 아이디가 중복될경우 배열로 값을 받게되니 되도록 사용 지양하자.
        }

ㄴ onchange는 입력 완료시 html을 교환한다면 onkeydown은 key 값을 넣을 떄마다 약간의 delay는 있지만 바로바로 html이 입력된다.

※ 참고

 

- addEventListener - 이벤트 핸들링을 보다 깔끔하게 할 수 있다. (단, 완벽한 클로스 브라우징 지원하지 않는다.)

document.addEventListener('event', function)
// Event : 인식할 이벤트(필수)
// Function : 실행할 기능(필수)
Event Description
focus 포커스(in, out)
keydown 키를 눌렀을때
keyup 키를 떼었을때
click 클릭
dblclick 더블 클릭
mousedown 마우스 버튼을 눌렀을 때
mouseup 마우스 버튼을 때었을 때
mouseover(이벤트 버블링 적용) 마우스 오버
mousemove 마우스가 움직일 경우
mouseenter(이벤트 버블링 미적용) 마우스가 특정 영역 진입 시
mouseout 마우스가 특정 영역 이탈 시

※ 이벤트 버블링 ; 풍선 효과 (부모에게도 영향이 있는지 자식에게만 영향이 있는지 / 찾아보기

 

09_addEventListener

<body>
    <h4 id="msg">FOCUS NULL</h4>
    <input id="txtInput" type="text">

    <script>
        let txtElem = document.getElementById("txtInput");
        // fcsin()를 사용하지 않는 이유는 호출하는게 아닌 주소참조이기 때문이다.
        txtElem.addEventListener('focusin', fcsin);
        txtElem.addEventListener('focusout', fcsout);

        function fcsin(evt) {
            //handler ; 이벤트 발생 시 처리 함수
            console.log(evt); // event 객체 출력
            document.getElementById('msg').innerHTML = "FOCUS IN";
            txtElem.style.backgroundColor = "red";
        }

        function fcsout() {
            //handler ; 이벤트 발생 시 처리 함수
            document.getElementById('msg').innerHTML = "FOCUS OUT";
            txtElem.style.backgroundColor = "blue";
        }

        // 익명함수
        txtElem.addEventListener('keyup', function (evt) {
            console.log(evt);
            // 키보드의 각 키값의 코드를 html안에 넣는 코드
            document.getElementById("msg").innerHTML = evt.keyCode;
            }
        ); // add end

        // Enter 입력시 input 창 clear
        txtElem.addEventListener('keyup', function(evt){
            console.log(evt);
            if(evt.keyCode == 13){
                txtElem.value = "";
            }
        })
    </script>
</body>

 

10_addEventListener

1. zone에 대한 특정 event 발동

<div id="eventZone"></div>
<script>
        let mouseZone = document.getElementById("eventZone");
        // console.log(mouseZone); // 변수가 잘들어갔는지 확인
        // click
        mouseZone.addEventListener('click',function(){
            mouseZone.innerHTML='click!';
            mouseZone.style.backgroundColor='orange';
        });
        // double click
        mouseZone.addEventListener('dblclick',function(){
            mouseZone.innerHTML='double click!';
            mouseZone.style.backgroundColor='red';
        });
        // mouse enter
        mouseZone.addEventListener('mouseenter',function(){
            mouseZone.innerHTML='mouse in!';
            mouseZone.style.backgroundColor='white';
            mouseZone.style.color="black";
            mouseZone.style.fontWeight="bold";
            console.log(mouseZone.style);
        });
        // mouse out
        mouseZone.addEventListener('mouseout',function(){
            mouseZone.innerHTML='mouse out!';
            mouseZone.style.backgroundColor='black';
            mouseZone.style.color="white";
        });

    </script>

 

2. button에 대한 이벤트 발동

    <button id="btn">click me</button>
    <span id="msg">button status: normal</span>
    <script>
    
        let btn = document.getElementById("btn");
        btn.addEventListener('mouseover', function(){
            document.getElementById('msg').innerHTML = "button status: active"
        })
        btn.addEventListener('mouseup', function(){
            document.getElementById('msg').innerHTML = "button status: mouse up"
        })
        btn.addEventListener('mousedown', function(){
            document.getElementById('msg').innerHTML = "button status: mouse down"
        })
        btn.addEventListener('mouseout', function(){
            document.getElementById('msg').innerHTML = "button status: inactive"
        })
        
    </script>

 

3. mousemove에 따른 position 출력

    <button id="btn">click me</button>
    <h4>mouse position <span id="pos"> </span></h4>
        // 마우스 이동에 따른 position 출력
        btn.addEventListener('mousemove', function(evt){
            console.log(evt);
            document.getElementById('pos').innerHTML=
            `X : ${evt.clientX}, Y : ${evt.clientY}`;
        })

 

4. 마우스 왼쪽, 오른쪽 클릭에 따른 팝업

    <h4>mouse position <span id="pos"> </span></h4>
        // 왼쪽 클릭(현재 document에 대한 이벤트 발동)
        // 쇼핑몰 복사 금지 설정?
        document.addEventListener('click', function (evt) {
            console.log(evt);
            alert('왼쪽 클릭');
            document.getElementById('pos').innerHTML =
                `X : ${evt.clientX}, Y : ${evt.clientY}`;
        })

        //오른쪽 클릭시 브라우저 팝업메뉴가 뜰때
        document.oncontextmenu = function (evt) {
            console.log(evt);
            alert("오른쪽 클릭");
            document.getElementById('pos').innerHTML =
                "X : " + evt.clientX + ", Y : " + evt.clientY;
            return false; // true: 팝업메뉴도 뜬다.                
        }

 

12_onSubmit

정규식 검사 확인해보기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

 

정규 표현식 - JavaScript | MDN

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.  이 패턴들은 RegExp의 exec 메소드와 test 메소드  ,

developer.mozilla.org

- 일반 전송

<body>
    <form action="url" name="frm" method="POST">
        아이디 : <input id="id" type="text" name="id" value="Leeeeeeeee"><br>
        비밀번호 : <input id="pw" type="password" name="pw"><br>

        <input type="button" id="btn" value="normalButton" onclick="check()">
    </form>

    <script>
        function check() {
            // 속성을 Id가 아닌 name으로 받을때
            let frm = document.frm;
            // console.dir(frm);
            // console.log(frm.id.value);
            if(frm.id.value == "" || frm.id.value.length<3){
                alert("ID를 잘못 입력 하셨습니다.");
                frm.id.focus();
                return false; // 생략 가능
            }
            if(frm.pw.value == ""){
                alert("PW를 잘못 입력 하셨습니다.");
                frm.pw.focus();
                return false; // 생략 가능
            }
            frm.submit(); // submit 이벤트 발생 -> 서버로 전송
        }
    </script>
</body>

 

- submit 전송 ; 서버 전송

<body>
    <form action="url" name="frm" method="POST" onsubmit="return check2()">
        아이디 : <input id="id" type="text" name="id" value="Leeeeeeeee"><br>
        비밀번호 : <input id="pw" type="password" name="pw"><br>

        <input type="submit" value="submit">
        <!-- <input type="button" id="btn" value="normalButton" onclick="check()"> -->
    </form>

    <script>
        function check2(){
            let frm = document.frm;
            console.log(frm.length);
            console.dir(frm[0]); // 아이디 객체
            console.dir(frm[1]); // 비밀번호 객체
            console.dir(frm[2]); // 버튼
            for(let i=0;i<frm.length-1;i++){
                if(frm[i].value==''){ // 정규식 넣는 부분
                    alert(frm[i].id + "를 입력하시오.")
                    frm[i].focus();
                    return false; // 서버 전송 불가
                }
            }
            return true; // 서버 전송 가능
        }
     </script>
</body>

 

- 로또 추출기

13_lotto_event

<head>
    <meta charset="UTF-8">
    <title>Lotto Event</title>
    <style>
        .number {
            width: 20px;
            height: 20px;
            float: left;
            border: 1px solid black;
            margin: 1px;
            text-align: center;
        }
    </style>

</head>

<body>
    <h2>로또 추출기</h2>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <button id="btn">추출</button>

    <script>
        let btn = document.getElementById("btn");
        // getElementsByClassName ; 반환값이 collection은 반환값이 여러개이다.
        let numbers = document.getElementsByClassName("number");
        let i = 0;
        let lotto = [];
        console.dir(numbers);

        btn.addEventListener('click', function () {
            if (i > 5) {
                alert("더이상 넣을 수 없습니다.");
                for (let idx in numbers) {
                    numbers[idx].innerHTML = "";
                }
                i = 0;
                lotto = [];
            } else {
                lotto[i] = Math.floor(Math.random() * 45) + 1;
                console.log(lotto[i]);
                numbers[i].innerHTML = lotto[i];
                i++; //1-->2
                console.log(lotto.length + "개");
                for (let j = 0; j < (i - 1); j++) {
                    if (lotto[i - 1] == lotto[j]) {
                        console.log('중복값 발생');
                        i--;
                        break;
                    }
                }
            }
        });
    </script>
</body>

 

14_randomNumber

<head>
    <meta charset="UTF-8">
    <title>Lotto Event</title>
    <style>
        .number {
            width: 20px;
            height: 20px;
            float: left;
            border: 1px solid black;
            margin: 1px;
            text-align: center;
        }
    </style>

</head>

<body>
    <h2>로또 추출기</h2>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <div class="number">0</div>
    <button id="btn">추출</button>

    <script>
        let btn = document.getElementById("btn");
        // getElementsByClassName ; 반환값이 collection은 반환값이 여러개이다.
        let numbers = document.getElementsByClassName("number");
        let i = 0;
        let lotto = [];
        console.dir(numbers);

        btn.addEventListener('click', function () {
            if (i > 5) {
                alert("더이상 넣을 수 없습니다.");
                for (let idx in numbers) {
                    numbers[idx].innerHTML = "";
                }
                i = 0;
                lotto = [];
            } else {
                lotto[i] = Math.floor(Math.random() * 45) + 1;
                console.log(lotto[i]);
                numbers[i].innerHTML = lotto[i];
                i++; //1-->2
                console.log(lotto.length + "개");
                for (let j = 0; j < (i - 1); j++) {
                    if (lotto[i - 1] == lotto[j]) {
                        console.log('중복값 발생');
                        i--;
                        break;
                    }
                }
            }
        });
    </script>
</body>

 

- DOM

15_elementFInder

<body>
    <h1>H1 Tag1</h1>
    <h1>H1 Tag3</h1>
    <h1>H1 Tag4</h1>
    <h1>H1 Tag5</h1>
    <h2 class="head2">head2 class</h2>
    <h2 class="head2">head2 class</h2>
    <h2 class="head2">head2 class</h2>
    <h2 class="head2">head2 class</h2>
    <h3 id="head3">head3 id</h3>

    <script>
        let tag = document.getElementsByTagName("h1");
        console.dir(tag);
        let cls = document.getElementsByClassName("head2")
        console.dir(cls);
        console.dir(document.getElementById("head3"));
    </script>
</body>

 

16_querySelector

<body>
    <p>쿼리 셀렉터는 css의 셀렉터를 차용한 것이다.</p>
    <p class="ex">하지만 복수개의 엘리먼트를 수용하지 못함.</p>
    <span id="sample">span Tag</span>
    <div>
        <p>특정 요소의 자식 요소를 선택 가능</p>
    </div>
    <a href="http://www.w3schools.com/jsref/met_document_queryselector.asp" target="_blank">관련 내용은 여기서 보세요</a>
    <br>
    <a href="http://www.w3schools.com/jsref/met_document_queryselector.asp" target="_blank">관련 내용은 여기서 보세요</a>

    <button> p태그</button>
    <button> p의 ex클래스</button>
    <button> 아이디</button>
    <br>
    <button> 자식요소</button>
    <button> 속성</button>

    <script>
        let btn = document.getElementsByTagName("button");
        console.dir(btn);

        // button이 배열로 들어가 있다.
        btn[0].addEventListener('click', function () {
            document.querySelector('p').style.backgroundColor="red";
        });
        btn[1].addEventListener('click', function () {
            document.querySelector('p.ex').style.backgroundColor="blue";
        });
        btn[2].addEventListener('click', function () {
            document.querySelector('span#sample').style.backgroundColor="yellow";
        });
        btn[3].addEventListener('click', function () {
            document.querySelector('div>p').style.backgroundColor="orange";
        });
        btn[4].addEventListener('click', function () {
            // 하나만 선택하고 싶을때
            // 'a[target="_blank"]' -> 속성 선택자
            // document.querySelector('a[target="_blank"]').style.border='5px solid red';
            
            // [target="_blank"] 모두를 선택하고 싶을때
            let list=document.querySelectorAll('[target="_blank"]');
            console.log(list);
            // for(let i in list){
            //     console.log(i);
            //     list[i].style.border='5px solid red';
            // }

            for(let value of list){
                console.log(value);
                value.style.border='5px solid red';
            }
        });

    </script>
</body>

 

17_elemChange

<body>
    <p id="p1"></p>
    <button id="btn">innerHTML</button><br>
    <img id="image" src="img/img01.jpg" alt="버섯돌이"><br>
    <button id="imgchanger">이미지 변경</button>
    <script>
        let elem = document.getElementById("p1");
        let btn = document.getElementById("btn");
        btn.addEventListener('click', () => elem.innerHTML = "새로운 <b>텍스트</b> 등장");
        
        let elem2 = document.getElementById('image');
        let btn2=document.getElementById("imgchanger");
        btn2.addEventListener('click', function(){
            console.dir(elem2);
            elem2.src = 'img/img04.jpg'; // 객체 속성
            // elem2.setAttribute("src","img/img04.jpg"); // html 태그의 속성 변경
        })
   </script>
</body>

 

 

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.07.29 수업일지  (0) 2021.07.31
2021.07.28 수업일지  (0) 2021.07.31
2021.07.26 수업일지  (0) 2021.07.31
2021.07.23 수업일지  (0) 2021.07.24
2021.07.22 수업일지  (0) 2021.07.24

관련글

티스토리툴바