Programming/javascript & HTML2024. 4. 19. 08:55

qr decoder

이전 예제는 모바일 크롬에서 안되서 다시 찾아봄

 

[링크 : https://github.com/LazarSoft/jsqrcode/tree/master/src]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

QR decoder로 로또 추첨하기  (0) 2024.04.16
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
Posted by 구차니
Programming/javascript & HTML2024. 4. 16. 11:58

QR decoder로 로또 추첨하기

 qr 디코더 소스는 아래의 npm 으로 공개된 녀석을 이용

[링크 : https://github.com/yugasun/qrcode-decoder]

 

 

귀찮으니 최대한 대충 짜기

그나저나 요즘 크롬은 https 로 강제로 돌려서 http로 해두면 되질 않고

그렇다고 사설 인증서 쓰면 또 경고 띄우고 겁나 짱나네?!

$ cat lotto.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Lotto from QR</title>
</head>
<body>
  <span id="result1">decode</span><br />
  <span id="result2">set</span><br />
  <span id="result3">random</span><br />
  <input type="button" onclick="rand();" value="추첨"/><br />
  <input type="file" onchange="previewFile();" /><br />
  <img id="lotto" src="" alt="이미지 미리보기..." />
</body>
<script src="./lib/index.min.js"></script>
<script>
function rand() {
    e = new Set()
    var val = 0;
    for(i = 0; i < 6; i++)
    {
        do {
            val = parseInt(Math.random() * 45 + 1)
        } while(d.has(val) ||  e.has(val))
        e.add(val)
    }

    var result3 = document.querySelector("#result3");
    result3.innerHTML = Array.from(e).sort((a, b) => a - b)
}
  
  async function qr_decode() {
    var qr = new QrcodeDecoder();
    var img1 = document.querySelector("#lotto");
    const code = await qr.decodeFromImage(img1);
    console.log(code);

    var result = document.querySelector("#result1");
    result.innerHTML = code.data;

    a = code.data.split('v=')
    b = a[1].split('q')
    c = b[1]+b[2]+b[3]+b[4] +b[5].slice(0,12) 
    d = new Set()
    for(i = 0; i < c.length ; i+=2)
        d.add(parseInt(c.slice(i, i+2)))
 
     var result2 = document.querySelector("#result2");
    result2.innerHTML = Array.from(d).sort((a, b) => a - b)

    rand();
  }

  function previewFile() {
    var file = document.querySelector("input[type=file]").files[0];
    var reader = new FileReader();
    reader.onload =
      function () {
        var preview = document.querySelector("#lotto");
        preview.src = reader.result;
        preview.onload = function () {
          qr_decode();
        }
      }

    if (file) {
      reader.readAsDataURL(file);
    }
  }
</script>

</html>
저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

qr decoder  (0) 2024.04.19
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
Posted by 구차니
Programming/javascript & HTML2024. 4. 16. 11:12

javascript 집합(set) 내용 출력하기

개발자 도구에서 집합을 만들고 console.log()로 출력하면 잘 나오는것 같은데

console.log(d)
Set(6) [ 1, 4, 29, 39, 43, 45 ]

var result2 = document.querySelector("#result2");
undefined
result2.innerHTML = d
Set(6) [ 1, 4, 29, 39, 43, 45 ]

 

정작 html에 넣어 버리면 object set 이라고만 나오지 내용이 나오지 않는다.

[object Set]

 

그럴땐 배열로 바꾸고 join을 이용하여 합치면 된다.

result2.innerHTML = Array.from(d).join(' ');

[링크 : https://bobbyhadz.com/blog/javascript-convert-set-to-string]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

qr decoder  (0) 2024.04.19
QR decoder로 로또 추첨하기  (0) 2024.04.16
js split()  (0) 2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
Posted by 구차니
Programming/javascript & HTML2024. 4. 12. 18:57

js split()

홀따옴표임, 알파벳 하나하나 끊어내는데 쓸 수 있다.

split('')

 

[링크 : https://miiingo.tistory.com/292]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

QR decoder로 로또 추첨하기  (0) 2024.04.16
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
javascript groupby map  (0) 2024.03.12
Posted by 구차니
Programming/javascript & HTML2024. 4. 8. 18:03

자바스크립트 옵셔널 체이닝(optional chaining)

간단하게

해당 필드(?)가 있는지 확인하고 읽을 필요 없이 바로 확인해서 출력해주는 연산자

편리하긴 한데.. 위험하지 않나 생각되네

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

if( adventurer.dog != undefined) console.log(adventurer.dog); else console.log(undefined);
undefined

adventurer?.dog
undefined

 

Optional chaining
optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining]

 

함수나 객체에도 접근 가능하다.

?.()
?.[]

[링크 : https://ko.javascript.info/optional-chaining]

[링크 : https://coding-farmer.tistory.com/4]

 

ES2020에 추가된 기능이라고

[링크 : https://pewww.tistory.com/27]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
qr decoder part 2  (0) 2024.04.07
javascript groupby map  (0) 2024.03.12
javascript 숫자  (0) 2024.02.07
Posted by 구차니
Programming/javascript & HTML2024. 4. 7. 08:29

qr decoder part 2

xzing이 가장 원본인것 같고

그것의 javascript 버전이 jsqrcode

 

[링크 : https://github.com/zxing/zxing]

[링크 : https://github.com/LazarSoft/jsqrcode]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

js split()  (0) 2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
javascript groupby map  (0) 2024.03.12
javascript 숫자  (0) 2024.02.07
마우스로 테이블 열 변경하기  (0) 2024.02.02
Posted by 구차니
Programming/javascript & HTML2024. 3. 12. 17:12

javascript groupby map

오오.. 이런 좋은 함수가 생겨나다니!

 

[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy]

[링크 : https://mong-blog.tistory.com/entry/array-object를-그룹화하는-방법reduce-group]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
javascript 숫자  (0) 2024.02.07
마우스로 테이블 열 변경하기  (0) 2024.02.02
html video 재생종료 event  (0) 2023.09.02
Posted by 구차니
Programming/javascript & HTML2024. 2. 7. 16:48

javascript 숫자

_로 자릿수를 표현할 수 있다는걸 처음 알았다

 

[링크 : https://cotnmin.dev/4]

[링크 : https://www.javascripttutorial.net/es-next/javascript-numeric-separator/]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

qr decoder part 2  (0) 2024.04.07
javascript groupby map  (0) 2024.03.12
마우스로 테이블 열 변경하기  (0) 2024.02.02
html video 재생종료 event  (0) 2023.09.02
숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
Posted by 구차니
Programming/javascript & HTML2024. 2. 2. 18:24

마우스로 테이블 열 변경하기

웹 테이블을  마우스 드래그로 열 위치 변경하는 스크립트.

 

[링크 : https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

javascript groupby map  (0) 2024.03.12
javascript 숫자  (0) 2024.02.07
html video 재생종료 event  (0) 2023.09.02
숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
canvas 없는 getcontext  (0) 2023.07.12
Posted by 구차니
Programming/javascript & HTML2023. 9. 2. 19:35

html video 재생종료 event

video 태그에서 비디오 재생 종료시, onended 이벤트가 발생한다고 한다.

대충(?) 이걸 이용해서 video tag에 재생목록 기능이 없으니, 순차적으로 다른 파일을 재생은 가능한 듯.

 

let aud = document.getElementById("myAudio");
aud.onended = function() {
    alert("The audio has ended");
};

[링크 : https://www.w3schools.com/tags/av_event_ended.asp]

[링크 : https://www.w3schools.com/tags/ref_av_dom.asp]

 

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 숫자  (0) 2024.02.07
마우스로 테이블 열 변경하기  (0) 2024.02.02
숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
canvas 없는 getcontext  (0) 2023.07.12
html canvas와 시간 그래프 흘리기  (0) 2023.07.06
Posted by 구차니

티스토리툴바