JavaScript 2020. 9. 11. 21:14

🎯 자바스크립트 DOM level0 이벤트 핸들링 문제를 연습해본다.

이벤트 핸들링 문제연습

1. 사용중인 웹 브라우저 정보 출력하기

[보기]버튼을 클릭하면 브라우저 이름,브라우저 버전, 브라우저 온라인 여부를 출력한다.

<body>
    <h3>사용중인 웹 브라우저 정보 보기</h3>
    <button onclick="info()">보기</button>
    <div>
        브라우저 이름:<span id="bName"></span><br> 
        브라우저 버전:<input type="text" name="bVersion" id="bVersion"><br> 
        브라우저 온라인 여부:<span id="bOnLine"></span><br>
    </div>

    <script type="text/javascript">
    function info() {
        console.log(navigator);
        document.getElementById('bName').innerText = navigator.appName;
        document.getElementById('bVersion').value = navigator.appVersion;
        document.getElementById('bOnLine').innerText = navigator.onLine;
    }
</script>
</body>

보기 버튼은 클릭이벤트로 info()함수를 호출한다. 자바스크립트의 info 함수는 span영역과 input 값을 셀렉해서 브라우저 정보를 입력한다. 브라우저 정보는 브라우저 관련 Navigator 객체를 사용하면 된다.

2. 특정 URL 접속하기

<a> 태그를 사용하지 않고 자바스크립트 코드를 사용하여 특정 URL로 접속해야 한다. [구글 사이트로 가기]버튼을 클릭하면 구글 홈페이지로 접속되고 사이트 주소입력: 란에 특정 URL주소를 입력하고 [바로가기]버튼을 클릭하면 입력된 URL주소로 접속된다.

<body>
<h3>자바스크립트로 특정 URL 접속하기</h3>
<button onclick="google()">구글사이트로 가기</button><br>
사이트주소입력:<input type="text" name="site" id="site">
<button onclick="site()">바로가기</button>
<script type="text/javascript">

    function google(){
        window.open("https://www.google.com/")
    //    location.href="https://www.google.com";
    }

    function site(){
        window.open(document.querySelector('#site').value);
    //    var url = document.querySelector('#site').value;
    //    location.href=url;
    }
</script>
</body>

사이트 새 창을 띄우기 위해 window 객체의 open()메소드를 사용할 수 있으며 다른 방법으로 location 객체의 href 프로퍼티를 사용할 수도 있다.

3. 입력받은 문자열 처리하기

문자열을 입력하고 [문자열 정보]버튼을 클릭하면 입력 문자열과 관련된 다양한 처리 결과를 출력한다.

<body>
  <h3>문자열 처리</h3>
  입력문자열<input type="text" name="str" id="str"><button onclick="info()">문자열 정보</button>
  <div>
    입력문자열 길이:<span id="str1"></span><br>
    입력문자:<span id="str2"></span><br>
    대문자로:<span id="str3"></span><br>
    소문자로:<span id="str4"></span><br>
    거꾸로 출력:<span id="str5"></span><br>
    첫글자만 출력:<span id="str6"></span><br>
    3번째 글자만 출력:<span id="str7"></span><br>
    1번째부터 5번째까지 글자만 출력:<span id="str8"></span><br>
  </div>
  
<script type="text/javascript">
   function info() {
       var str1 = document.getElementById('str').value;
       document.querySelector('#str1').innerText = str1.length;
       document.querySelector('#str2').innerText = str1;
       document.querySelector('#str3').innerText = str1.toUpperCase();
       document.querySelector('#str4').innerText = str1.toLowerCase();
       document.querySelector('#str5').innerText = "";
       for(var i = str1.length-1; i>=0; i--){
           str5 += str[i];
      	}
       document.querySelector('#str6').innerText = str1.charAt(0);
       document.querySelector('#str7').innerText = str1.charAt(2);
       document.querySelector('#str8').innerText = str1.substr(0,5);
   }
</script>
</body>

input의 입력값을 변수에 담은 뒤 각각의 span 태그를 id로 셀렉하고 innerHTML을 사용해 문자열을 출력했다.

4. 합계 출력하기

input 태그에 입력된 “10/20/30” 문자열 값을 “/” 구분자로 구분하고, 각 값을 더한 합계를 출력한다.

<script type="text/javascript">
    function sum() {
        var data = document.getElementById("v1").value;
        var arr = data.split("/");
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += parseInt(arr[i]);
        }
        document.getElementById("result").innerText = sum;
    }
</script>
</head>
<body>
    <h3>합계 구하기</h3>
    값:
    <input type="text" name="v1" id="v1" value="10/20/30">
    <button onclick="sum()">합계</button>
    <br> 합계:
    <span id="result"></span>
</body>

split()은 문자열을 잘라서 배열에 넣는 메소드이며 인자 첫번째 자리에 구분자를, 두번째 자리에 갯수를 지정한다. 배열에 담은 3개의 문자를 정수로 형변환하고 합계 변수에 하나씩 더해준다. 마지막으로 결과 영역에 합계를 추가한다.

5. 배열 생성하기

[배열생성] 버튼을 클릭하면 배열을 생성하고 값을 입력후 [배열에 값 저장] 버튼을 클릭하면 생성된 배열에 값을 저장한다. 이후 [배열에 값 출력]버튼을 클릭하면 저장된 배열을 출력하고, [배열삭제] 버튼 클릭시 배열에 저장된 모든 데이터를 삭제한다.

<body>
	<h3>배열 관리</h3>
	<button onclick="create()">배열생성</button>
	<button onclick="remove()">배열삭제</button><br>
	값:<input type="text" name="v1" id="v1">
	<button onclick="save()">배열에 값 저장</button><br>
	<button onclick="show()">배열에 값 출력</button><br>
	<div id="result"></div>
</body>

<script type="text/javascript">
	var arr;
	function create() {
		arr = [];
	}
	function remove() {
		arr = [];
		show();
	}
	function save() {
		var v1 = document.getElementById("v1").value
		arr.push(v1);
	}
	function show() {
		var mesg = "";
		for (var i = 0; i < arr.length; i++) {
			mesg += arr[i] + "<br>";
		}
		document.getElementById("result").innerHTML = mesg;
	}
</script>

create는 배열을 생성하고, remove는 다시 빈 배열을 만든다. save는 인풋에 입력된 값을 배열에 넣는다. show는 배열값을 반복문 돌려서 모두 꺼낸 뒤 브라우저에 출력한다.

6. 배열 데이터 분석하기

제공된 데이터를 분석하여 합계, 평균, 중앙값을 출력한다. (평균은 소수점 2 자리까지 표현한다.)

<body>
    <h3>배열 관리</h3>
    값:
    <input type="text" name="v1" id="v1" value="1,5,10,9,3,7,23,4,6,8">
    <button onclick="check()">데이터 분석</button>
    <br>
    <div id="result"></div>
    <script type="text/javascript">
        function check() {
            var v1 = document.getElementById("v1").value;
            var data = v1.split(",");
            var sort = data.sort(function(a, b) {
                return a - b;
            });
            var sum = 0;
            for (var i = 0; i < sort.length; i++) {
                sum += parseInt(sort[i]);
            }
            console.log(sum);
            var avg = sum / sort.length;
            var median = 0;
            if (data.length % 2 == 0) {
                var n = sort.length;
                var f = parseInt(sort[n / 2 - 1]);
                var l = parseInt(sort[n / 2]);
                var i = (f + l) / 2;
                console.log(f, l, i);
                median = i;
            } else {
                var i = ((sort.length + 1) / 2);
                console.log(i);
                median = parseInt(sort[i - 2]);
            }
            var mesg = "합계:" + sum + "<br>";
            mesg += "평균:" + avg.toFixed(2) + "<br>";
            mesg += "중앙값:" + median + "<br>";
            console.log(sort);
            document.getElementById("result").innerHTML = mesg;
        }
    </script>
</body>

인풋값을 split()으로 잘라서 배열에 넣고 sort함수를 사용하여 배열을 정렬한다. sort()는 배열의 문자열을 아스키 코드값 순서로 정렬하는 메소드이다. 인자로 함수에 a,b를 받고 a-b를 리턴하면 작은 것부터 오름차순 정렬한다는 뜻이다.

배열의 중앙값(median)은 인덱스로 구할 것이다. 배열 크기가 짝수라면 정렬된 배열을 절반으로 나눈 뒤 중앙에 있는 두 수의 평균을 구하면 되고, 배열 크기가 홀수라면 바로 중앙에 있는 인덱스값으로 요소를 찾을 수 있다.

toFixed()는 소수점 자릿수의 길이를 제한하는 함수다.

7. 정렬하기

제공된 배열값을 오름차순 정렬과 내림차순 정렬하는 버튼을 만든다.

<script type="text/javascript">
    function mySort(s){
        var str = document.getElementById("v1").value;
        var arr = str.split(",");
        if(s == "asc"){
            arr.sort(ascSort);
        }else{
            arr.sort(descSort);
        }
        var result = document.getElementById("result");
        result.value = arr;
    }
    function ascSort(a,b){
        return a-b;
    }
    function descSort(a,b){
        return b-a;
    }
</script>
</head>
<body>
입력값<input type="text" name="v1"  id="v1" value="1,2,3,2,7,5,6"><br>
<button onclick="mySort('asc')">오름차순 정렬 </button><br>
<button onclick="mySort('desc')">내림차순 정렬 </button><br>
결과값<input type="text" name="result" id="result">
</body>

onclick 속성값으로 인자를 담아서 함수를 호출했다. 일단 입력값을 split으로 쪼개서 배열에 담고 오름차순이면 오름차순 비교함수를 사용해서 정렬하고, 내림차순이면 내림차순 비교함수를 사용해서 정렬한다. 비교함수는 배열로부터 a와 b 값을 받아서 두 수를 마이너스한 결과를 리턴한다. 이제 sort함수는 리턴된 값이 0보다 큰지 작은지 확인해서 정렬 기준을 정한다.

8. JSON 객체

각 항목에 데이터를 입력하고 [저장]버튼을 클릭하면 저장된다. 이후 [출력] 버튼을 클릭하면 이전까지 저장했던 데이터가 출력된다.

<body>
    <h3>JSON 객체</h3>
    이름<input type="text" name="username" id="username"><br>
    나이<input type="text" name="age" id="age"><br>
    주소<input type="text" name="address" id="address"><br>
    <button onclick="add()">저장</button><br>
    <button onclick="show()">출력</button><br>
    <div id="result">
    </div>
</body>

<script type="text/javascript">

    var data = [];

    function add() {
        var username = document.getElementById("username").value;
        var age = document.getElementById("age").value;
        var address = document.getElementById("address").value;
        var person = { "username": username, "age": age, "address": address };
        data.push(person);
        document.getElementById("result").innerHTML = "<h3>저장 완료</h3>";
    }
    function show() {
        var mesg = "";
        for (var i = 0; i < data.length; i++) {
            var person = data[i];
            mesg += (i + 1) + " 번째 고객<br>";
            mesg += "이름:" + person.username + "<br>";
            mesg += "나이:" + person.age + "<br>";
            mesg += "주소:" + person.address + "<br>";
        }
        document.getElementById("result").innerHTML = mesg;
    }
</script>

저장완료 버튼을 누르면 add() 함수를 호출해서 인풋의 입력값을 person에 객체로 저장하고 data 배열에 넣어준다. 그런 다음 화면에 저장 완료를 출력한다. 출력버튼을 누르면 show() 함수를 호출해서 배열 요소를 전부 꺼내오고 빈 문자열에 배열의 모든 요소를 넣어서 화면에 출력한다.

9. 이미지 슬라이드

전, 후 버튼을 클릭하면 앞뒤로 다른 이미지를 보여준다.

<body>
    <img src="../images/a.png" width="200" height="200" id="flag">
    <button onclick="before()">전</button>
    <button onclick="next()">후</button>
    <script type="text/javascript">
        var arr = [ "a.png", "b.png", "c.png" ];
        var i = 0;
        function before() {
            var img = document.getElementById("flag");
            --i;
            if (i <= 0) {
                i = 2;
            }
            img.src = "../images/" + arr[i];
        }
        function next() {
            var img = document.getElementById("flag");
            ++i;
            if (i >= 3) {
                i = 0;
            }
            img.src = "../images/" + arr[i];
        }
    </script>
</body>

배열에 이미지 소스를 추가한다. 전 버튼을 누르면 before() 함수를 호출하여 인덱스값에 -1한 요소를 보여준다. 만약 계속 클릭해서 인덱스값이 0이하가 되면 배열의 맨 마지막 이미지를 보여준다. 후 버튼을 누르면 next() 함수를 호출해서 인덱스값을 증가시켜 다음 이미지 요소를 보여준다. 만약 인덱스값이 배열크기인 3을 넘어버리면 다시 첫번째 이미지를 보여준다.

10. 계산기 만들기

<body>
값1<input type="text" name="v1" id="v1"><br>
값2<input type="text" name="v2" id="v2"><br>
<button onclick="plus()">+</button>
<button onclick="minus()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>
<br>
결과값<input type="text" name="result" id="result">
<script type="text/javascript">
   function plus(){
       var v1 = document.getElementById("v1").value;
       var v2 = document.getElementById("v2").value;
       var result = document.getElementById("result");
       result.value = parseInt(v1) + parseInt(v2); 
   }
   function minus(){
    var v1= document.getElementById("v1").value;
    var v2= document.getElementById("v2").value;
    var result= document.getElementById("result");
    result.value= parseInt(v1)-parseInt(v2);
   }
   function multiply(){
       var v1 = document.getElementById("v1").value;
       var v2 = document.getElementById("v2").value;
       var result = document.getElementById("result");
       result.value = parseInt(v1) * parseInt(v2); 
   }
   function divide(){
       var v1 = document.getElementById("v1").value;
       var v2 = document.getElementById("v2").value;
       var result = document.getElementById("result");
       result.value = parseInt(v1) / parseInt(v2); 
   }
</script>
</body>

각 버튼은 계산 기능을 담당하는 함수를 호출한다. 두 개의 인풋값을 가져와서 더하고 빼고 곱하고 나눈 값을 결과 인풋값에 입력한다.

😜 NEXT : 자바스크립트 이벤트 핸들링 문제 더 연습해보기

'JavaScript' 카테고리의 다른 글

jQeury 제이쿼리 기본문법, 선택자, 필터 (0)	2020.09.24
자바스크립트 이벤트 핸들링 연습2 (0)	2020.09.13
자바스크립트 form 객체, 이벤트 핸들링 (3)	2020.09.10
자바스크립트 DOM 객체 제어 (0)	2020.09.09
자바스크립트 Built-In 내장객체 (0)	2020.09.08

ABOUT ME

미현 개발 TIL 미현 개발 TIL

이벤트 핸들링 문제연습

1. 사용중인 웹 브라우저 정보 출력하기

2. 특정 URL 접속하기

3. 입력받은 문자열 처리하기

4. 합계 출력하기

5. 배열 생성하기

6. 배열 데이터 분석하기

7. 정렬하기

8. JSON 객체

9. 이미지 슬라이드

10. 계산기 만들기

'JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

이벤트 핸들링 문제연습

1. 사용중인 웹 브라우저 정보 출력하기

2. 특정 URL 접속하기

3. 입력받은 문자열 처리하기

4. 합계 출력하기

5. 배열 생성하기

6. 배열 데이터 분석하기

7. 정렬하기

8. JSON 객체

9. 이미지 슬라이드

10. 계산기 만들기

'JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바