'WEB/Javascript' 카테고리의 글 목록 (6 Page)

키보드 입력시 유효성 검사를 위해 키보드 입력 제한을 처리할 필요가 있다.

간단하게 입력 제한을 막는 방법으로 속성값에 처리하는 방법이 있다.

$(document).on("keyup", "input[속성명 지정]", function() {$(this).val( $(this).val().replace( 정규식 ,"") );})

이러한식으로 키보드 입력이 있을때 input 태그에 지정한 속성이 있으면 정규식에 따라 처리하는 방법이다.

ex) 숫자만 입력

-Javascript

$(document).on("keyup", "input[numberOnly]", function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );})

-HTML

<input type="text" value="" class="number" numberOnly/>

numberOnly속성이 추가된 input태그에는 치환처리로 인해 더이상 숫자외에는 입력이 불가하다.

ex) 숫자 및 '-' 하이픈만 입력받기

$(document).on("keyup", "input[telOnly]", function() {$(this).val( $(this).val().replace(/[^0-9-]/gi,"") );})

ex) 특수문자 중에 쉼표만 허용하기

$(document).on("keyup", "input[commasOnly]", function() {$(this).val( $(this).val().replace(/[<>(){}[\]\-_=+|\/\\'\;.:\"`~!?@#$%^&*]/gi,"") );})

ex) 한글, 영문, 숫자만 받기

$(document).on("keyup", "input[noSpecial]", function() {$(this).val( $(this).val().replace(/[^ㄱ-힣a-zA-Z0-9]/gi,"") );})

정규식에 따라 자유롭게 수정하여 사용할 수 있다.

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 (0)	2020.01.22
Javascript - 전개구문, 전개연산자, ...문법, {...data} / rest, spread properties (0)	2020.01.10
Javascript - Free SVG 한국맵 제어 처리 (4)	2019.10.16
Javascript - 문자열 변경하기(replace, replaceAll) (0)	2019.10.02
HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08

한국 지도 사용에 대해 알아 보겠습니다.

https://www.amcharts.com/svg-maps/

Free SVG Maps - amCharts

www.amcharts.com

amchart에 가시면 각국 나라를 무료로 다운받아서 커스텀해서 사용할 수 있습니다.

그중 한국을 클릭하여 접근하여 svg파일을 다운로드합니다.

이동하여 원하는 파일(High, Low 버전)을 받으시면 svg파일을 다운로드 받으실 수 있습니다.

다운로드 받아서 열어보면 간단하게 특별시, 광역시, 도 정도로 된 한국맵을 볼 수 있는데,

간단하게 색상 변경이나 클릭이벤트를 추가해보겠습니다.

열어보면 굉장히 복잡한 태그들이 보일텐데 우린 여기서 중요하게 볼건

path 태그들입니다.

각각의 path들이 지도를 그리고 있으므로 해당부분의 아이디값에 click이벤트 또는 인라인 스타일 태그나 클래스값을

개별적으로 처리하여 색상처리를 하면 값을 바꿀 수 있습니다.

기본적으로 처리되어있던 클래스 title이 서울로 되어있는 부분에 class를 추가한 후 파란색으로 변경해보겠습니다.

SeoulLand라는 클래스를 추가한 후 style태그에서 fill을 추가하였습니다.

그럼 아래와 같이 지도가 변경된 걸 볼 수 있습니다.

좀 더 그럴싸 해보이도록 hover속성도 추가해보겠습니다.

모든 지역인 path태그들은 land 클래스가 처리 되어있으므로 land클래스에 hover속성을 추가하여 간단하게 변경이 가능합니다.

클릭 이벤트 또한 간단한 예시를 보겠습니다.

id에 이벤트 처리를 하셔도 되지만 간단한 예제를 보기 위해 태그 내부에 onclick속성을 주었습니다.

서울 부근을 클릭하게 되면 아래와 같이 alert가 동작하는 것을 볼 수 있습니다.

svg내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.

예제 변경처리의 파일로 첨부하도록 하겠습니다.

southKoreaHigh.svg

0.10MB

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - 전개구문, 전개연산자, ...문법, {...data} / rest, spread properties (0)	2020.01.10
Javascript - input 태그 입력 제한(숫자만, 한글만, 영문만 등) (2)	2019.11.25
Javascript - 문자열 변경하기(replace, replaceAll) (0)	2019.10.02
HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08

replace() 메소드

코딩을 하다보면 문자열에서 특정 부분만 변경을 하고 싶은 경우가 발생 할 것이다.

var str = "hello world";

라는 str 변수가 있을 때, replace()메소드를 활용하여 "world" 라는 문구를 찾아 원하는 문자열로 변경을 해보겠다.

replace 메소드

var str = "hello world";
str = str.replace("world", "stranger");
console.log(str);

이와 같이 replace() 메소드를 활용하면 원하는 형태로 문자열을 변경할 수 있다.

문자열.replace("대상 문자열", "변경할 문자");

정수형이나 다른 데이터 타입에는 사용이 불가능하며 문자열 타입에만 사용이 가능하다.

replaceAll() 메소드처럼 사용하기(모두 변경하기)

replcae()를 사용하면 이와 같이 변경이 가능하지만, 제일 처음 검색된 단어 한개만 변경을 하는 단점이 존재한다.

하지만 해당하는 모든 문자열을 변경하고 싶은 경우도 있을 것이다.

자바에서는 replaceAll()이라는 메소드가 존재하여 사용하면 전부 다 원하는 형태로 변경이 가능하지만

자바스크립트에서는 replaceAll() 메소드가 지원되지 않으므로 정규식을 활용하여 비슷하게 사용할 수 있다.

문자열.replace(/대상/gi,"변경할 문자열");

똑같은 replace 메소드를 사용하지만 / /gi 사이에 변경하고자 하는 문자열을 입력한다.

또 차이점이 있다면 대상부분의 파라미터에 ""으로 묶지 않는다는 것이다.

위 형태에서 gi는 이러한 의미이다.

g : 발생할 pattern을 모두 검색

i : 대문자, 소문자를 구분하지 않고 모두 검색

replaceAll 메소드 기능과 동일하게 사용 예시

var str = "hello world hello world hello world hello world hello world";
var a = str.replace(/world/gi, "stranger");
console.log("str >" + str);
console.log("a   >" + a);

str 변수의 모든 world 단어가 stranger로 변경 된 것을 확인 할 수 있다.

+) 특이케이스 "/" 모두 변경하기

var str = "/////";
var a = str.replace(/\//gi,"#");
console.log(a);

//gi 사이에 /만 입력하면 주석형태로 처리되어 정상동작이 되지 않으므로 "/" 앞에 \를 붙여서 처리한다.

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - input 태그 입력 제한(숫자만, 한글만, 영문만 등) (2)	2019.11.25
Javascript - Free SVG 한국맵 제어 처리 (4)	2019.10.16
HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08

배열에 객체를 담아 출력 후 최상단 테이블의 헤더를 클릭하면 해당하는 값으로 오름차순, 내림차순 정렬이 되는

간단한 엑셀형태의 데이터 출력을 해보자.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>성적표</title>
  </head>
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .report tr{
      background: #F4FFF0;
    }
    .report td{
      border: none;
      height: 50px;
      font-size: 16pt;
      text-align: center;
    }
    .report td.name{
      width: 170px;
    }
    .report td.class{
      width: 80px;
    }
    .report td.jum{
      width: 130px;
    }
    .titleTable td{
      cursor: pointer;
    }
    .titleTable tr td{
      font-size: 18pt;
      font-weight: bold;
      background: #00B700;
      color: #fff;
    }
    .total td, .avg td{
      color: #fff;
      background: #1DDB16;
    }
  </style>
  <script type="text/javascript" src="js-grade.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
  <body>
    <table id="grade" class="titleTable report">
      <tr>
        <td id="name" class="name title">이름</td>
        <td id="class" class="class title">반</td>
        <td id="kor" class="jum title">국어</td>
        <td id="math" class="jum title">수학</td>
        <td id="eng" class="jum title">영어</td>
        <td id="sci" class="jum title">과학</td>
      </tr>
    </table>
    <table id="data" class="report data">

    </table>
    <table id="result" class="report result">

    </table>
  </body>
</html>

js-grade.js

var orderBy = "asc";
window.onload = function(){
  init();
}

function init(){
  var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
  ];

  tagParsing(students, true);

  //click Evt
  $(".title").click(function(){
    var titleName = this.id;
    if(titleName == "name"){
      objSort(students, "name");
      tagParsing(students, false);
    }else if(titleName == "class"){
      objSort(students, "class");
      tagParsing(students, false);
    }else if(titleName == "kor"){
      objSort(students, "kor");
      tagParsing(students, false);
    }else if(titleName == "math"){
      objSort(students, "math");
      tagParsing(students, false);
    }else if(titleName == "eng"){
      objSort(students, "eng");
      tagParsing(students, false);
    }else if(titleName == "sci"){
      objSort(students, "sci");
      tagParsing(students, false);
    }
  })
}

function objSort(obj, sort){
  if(orderBy == "asc"){ //오름차순 정렬
    orderBy = "desc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return 1;
      else if (a[sort] < b[sort]) return -1;
    });
  }else{ //내림차순 정렬
    orderBy = "asc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return -1;
      else if (a[sort] < b[sort]) return 1;
    });
  }
}
function tagParsing(obj, init){
  var kTotal = 0;
  var mTotal = 0;
  var eTotal = 0;
  var sTotal = 0;
  var len = obj.length;
  var tag = '';
  for(i=0; i<obj.length; i++){
    tag += "<tr><td class='name'>"+obj[i].name+"</td>"
    +"<td class='class'>"+obj[i].class+"</td>"
    +"<td class='jum'>"+obj[i].kor+"</td>"
    +"<td class='jum'>"+obj[i].math+"</td>"
    +"<td class='jum'>"+obj[i].eng+"</td>"
    +"<td class='jum'>"+obj[i].sci+"</td></tr>";

    kTotal += obj[i].kor;
    mTotal += obj[i].math;
    eTotal += obj[i].eng;
    sTotal += obj[i].sci;
  }
  document.getElementById("data").innerHTML = tag;

  if(init){
    tag = '';
    //총점
    tag += "<tr class='total'><td class='name'>"+"총 점"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+kTotal+"</td>"
          +"<td class='jum'>"+mTotal+"</td>"
          +"<td class='jum'>"+eTotal+"</td>"
          +"<td class='jum'>"+sTotal+"</td></tr>";
    //평균
    tag += "<tr class='avg'><td class='name'>"+"평 균"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+(kTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(mTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(eTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(sTotal/len).toFixed(2)+"</td></tr>";

    document.getElementById("result").innerHTML = tag;
  }
}

최초 출력시엔 아무런 정렬없이 배열을 출력하고 이름을 클릭하면 이름별 정렬이 된다.

다시 한번 클릭하면 내림차순 정렬

sort() 메소드에 대하여 간단하게 정리한 링크

https://myhappyman.tistory.com/23

java jdbc등을 활용하여 디비에서 데이터를 가져와 출력 할 경우 sort() 메소드를 사용하지 않겠지만,(db에서 이미 orderBy를 처리하여 가져옴)

Redis 또는 Socket 통신등으로 JSON형태나 다른형태의 데이터를 받게 되면 정렬이 보장되지 않게 수신되는 경우가 많다.

이런 경우를 대비하여 javascript sort() 메소드를 활용하여 간단하게 작성하였다.

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - Free SVG 한국맵 제어 처리 (4)	2019.10.16
Javascript - 문자열 변경하기(replace, replaceAll) (0)	2019.10.02
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08

sort() 메소드는 배열을 원하는대로 정렬 후 정렬된 배열을 반환 한다.

sort() 메소드 사용예시

var alpha = ['d', 'e', 'c', 'a', 'f', 'b'];
alpha.sort();
console.log(alpha);

배열.sort([compareFunction])

정렬하고자 하는 배열.sort()를 통하여 정렬이 가능하다.

데이터는 따로 복제되는것이 아닌 원 배열을 정렬하는 것이므로 주의하자.

compareFunction : 정렬 순서를 정의하는 함수이다.

compareFunction이 정의되지 않으면 요소를 문자열로 변환하고 유니코드 포인터 순서로 문자열을 정리한다.

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉 a가 먼저 온다.

compareFunction(a, b)이 0을 반환하면 a와 b를 서로 변경하지 않는다.

compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 인덱스로 정렬한다.

숫자(Number)를 비교할 때는 빼기를 통해 정렬이 가능하다.

var num = [5,4,3,2,1];
num.sort(function(a, b){
	return a-b;
})
console.log(num);

배열에 담긴 객체는 키값을 지정하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// price 기준으로 정렬
products.sort(function (a, b) {
  if (a.price > b.price) {
    return 1;
  }else if (a.price < b.price) {
    return -1;
  }
});
console.log(products);

배열 인덱스 형태로도 접근하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// name 기준으로 정렬
products.sort(function (a, b) {
  if (a["name"] > b["name"]) {
    return 1;
  }else if (a["name"] < b["name"]) {
    return -1;
  }
});
console.log(products);

2가지 조건으로 정렬하기 (else if 문을 추가하면 된다.)

var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];

// 반별 정렬 후 이름별 정렬
students.sort((a, b) => {
  if (a.class > b.class) return 1;
  else if (a.class < b.class) return -1;
  else if (a.name > b.name) return 1;
  else if (a.name < b.name) return -1;
});
console.log(students);

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - 문자열 변경하기(replace, replaceAll) (0)	2019.10.02
HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08

for in 반복문은 객체에 사용하여 객체 내부의 데이터와 키값들을 출력할 수 있다.

문법)

for(var 키값 in 객체){

}

사용 예제 - 배열 출력하기

var arr = [1,2,3,4,5];
for(i in arr){
  console.log("key &gt;"+i+"    arr["+i+"] &gt;"+arr[i]);
}

사용 예제 - 객체 출력

var product = {
  name : "건조 망고",
  kind : "당절임",
  ingredient : "망고, 설탕, 메타중아황산나트륨, 치자황색소",
  origin : "필리핀"
}
for(i in product){
  console.log("key >"+i+"    product["+i+"] >"+product[i]);
}

사용 예제 - 배열 객체 데이터 출력하기

var students = [
  {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
  {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
  {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
  {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
  {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
  {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
  {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
  {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
  {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
  {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
  {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];
for(i in students){
  for(j in students[i]){
      console.log("key >"+j+"    students["+i+"]["+j+"] >"+students[i][j]);
  }
}

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

'WEB > Javascript' 카테고리의 다른 글

HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08

javascript(jquery)를 활용하여 재생, 일시정지, 멈춤 기능이 있는 스탑워치를 만들어 보겠다.

시간은 시 분 초만 표시한다.

1. 재생버튼은 시작한다.

2. 일시정지 버튼은 잠시 멈추는 기능으로 재생버튼을 다시 누르면 기존 시간을 이어서 진행한다.

3. 멈춤 버튼은 스톱워치를 초기화하고 정지시킨다.

아래는 실제 동작 스톱워치이다.

00:00:00

index.html

<!DOCTYPE html>
<html>
<head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
  	body{
		height: 100vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
 	}
 	.box{
		width: 200px;
		height: 200px;
	}
	.timerBox{
		width: 200px;
		outline: 2px solid black;
	}
	.timerBox .time{
		font-size: 30pt;
		color: #4C4C4C;
		text-align: center;
		font-family: sans-serif;
	}
	.btnBox{
		margin: 20px auto;
		text-align: center;
	}
	.btnBox .fa{
		margin: 0px 5px;
		font-size: 30pt;
		color: #FAED7D;
		cursor: pointer;
	}
</style>
<meta charset="UTF-8">
<title>StopWatch</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="stopwatch.js"></script>
</head>
<body>
	<div id='box' class="box">
		<div id='timerBox' class="timerBox">
			<div id="time" class="time">00:00:00</div>
		</div>
		<div class="btnBox">
			<i id="startbtn" class="fa fa-play" aria-hidden="true"></i>
			<i id="pausebtn" class="fa fa-pause" aria-hidden="true"></i>
			<i id="stopbtn" class="fa fa-stop" aria-hidden="true"></i>
		</div>
	</div>
</body>
</html>

버튼 이미지는 bootstrap cdn 이미지를 활용 하였다.

stopwatch.js

var time = 0;
var starFlag = true;
$(document).ready(function(){
  buttonEvt();
});

function init(){
  document.getElementById("time").innerHTML = "00:00:00";
}

function buttonEvt(){
  var hour = 0;
  var min = 0;
  var sec = 0;
  var timer;

  // start btn
  $("#startbtn").click(function(){

    if(starFlag){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      starFlag = false;

      if(time == 0){
        init();
      }

      timer = setInterval(function(){
        time++;

        min = Math.floor(time/60);
        hour = Math.floor(min/60);
        sec = time%60;
        min = min%60;

        var th = hour;
        var tm = min;
        var ts = sec;
        if(th<10){
        th = "0" + hour;
        }
        if(tm < 10){
        tm = "0" + min;
        }
        if(ts < 10){
        ts = "0" + sec;
        }

        document.getElementById("time").innerHTML = th + ":" + tm + ":" + ts;
      }, 1000);
    }
  });

  // pause btn
  $("#pausebtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
    }
  });

  // stop btn
  $("#stopbtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
      time = 0;
      init();
    }
  });
}

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08

보통 일정시간마다 특정 값을 출력하는 문구를 만들 때, setInterval() clearInterval() 메소드를 활용하여 구성하였던것 같다.

기존에 구성하던 로직)

var i = 1;
var timer = setInterval(function(){

  if(i>5){
    clearInterval(timer)
  }else{
    document.write(i+"<br/>");
    i++;
  }

}, 1000)

그러다 문득, 반복문인 for문 안에서 처리 할 수 없는지 궁금해졌다.

setInterval도 버리고 setTimeout으로 구성하여 봤다.

첫번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000);
}

1초마다 찍히는게 아닌 동시에 6이 찍혔다.

for문의 동작은 이미 끝났고 1초뒤에 동작하는 setTimeout 메소드가 5개가 동시에 동작한 것이다.

그래서 시간을 각각 별개로 쪼개어 보았다.

1초후... 2초후... 3초후...

두번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000*i);
}

이번에도 아쉽게 결과는 6만 5개가 찍혔지만, 1초 마다 6이 찍히는걸 볼 수 있었다.

for문의 동작이 끝나기전 값을 따로 처리 해줘야 할 것 같다.

이부분을 처리하기 위해선 자바스크립트의 클로저 개념이 필요하다.

세번째 도전)

for(i=1; i<6; i++){
  (function(x){
    setTimeout(function(){
      document.write(x+"<br/>");
    }, 1000*x);
  })(i);
}

클로저란 간단하게 말하면 내부함수가 외부함수에 접근할 수 있는 것을 말한다.

기존에 동작시키던 방식은 setTimeout 함수가 i를 참조할때 for문에서 이미 5번 돌고 마지막에 ++된 값에 의해 6으로 처리되어 찍히고 있었던 것이다.

즉시발동함수로 setTimeout 메소드를 감싸고 찍고 싶었던 i의 값을 매개변수에 처리한다.

i의 값은 이제 즉시발동함수의 매개변수로 지역변수가 되기 때문에 별도의 값으로 처리 되고, setTimeout의 메소드내 함수는 외부 함수의 지역변수 'x'값을 가져와 document.write()로 값을 찍고 시간도 각각 별개의 시간으로 연산될 것이다.

그래도 이해가 잘 안된다면 콘솔 창에 찍은 결과값을 다시보자.

for(i=1; i<6; i++){
  (function(x){
    
    console.log("즉시발동함수 > i="+i+"     x="+x)
    setTimeout(function(){
      console.log("setTimeout  > i="+i+"     x="+x)
    }, 1000*x);
  })(i);
}

빨간 네모안에 있는 콘솔창 값은 즉시발동함수에서 한번에 찍힌 결과이다.

처음 i는 1 매개변수로 처리된 x도 1이고 하나씩 차례대로 증가되는걸 볼 수 있고, 그 이후 setTimeout에서 처리된 값을 보면 i는 이미 for문으로 동작이 완료된 i의 값을 찍고 있기 때문에 계속 보이던 6의 값이 찍히고 있고 x는 클로저로 인하여 1부터 5까지 처리되고 있는 걸 볼 수 있다.

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

'WEB > Javascript' 카테고리의 다른 글

Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08
Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08

개발 흔적 남기기

WEB/Javascript

Javascript - input 태그 입력 제한(숫자만, 한글만, 영문만 등)

'WEB > Javascript' 카테고리의 다른 글

Javascript - Free SVG 한국맵 제어 처리

'WEB > Javascript' 카테고리의 다른 글

Javascript - 문자열 변경하기(replace, replaceAll)

'WEB > Javascript' 카테고리의 다른 글

HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기)

'WEB > Javascript' 카테고리의 다른 글

Javascript - sort() / 정렬 메소드 사용하기

'WEB > Javascript' 카테고리의 다른 글

Javascript - for in 반복문을 사용하여 출력하기

'WEB > Javascript' 카테고리의 다른 글

Javascript - 스톱워치(stopwatch) 만들기

'WEB > Javascript' 카테고리의 다른 글

Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure)

'WEB > Javascript' 카테고리의 다른 글

티스토리툴바