'Programming/javascript & HTML'에 해당되는 글 143건

  1. 2024.08.21 js DataView()
  2. 2024.08.12 javascript ... (rest parameter)
  3. 2024.04.19 qr decoder
  4. 2024.04.16 QR decoder로 로또 추첨하기
  5. 2024.04.16 javascript 집합(set) 내용 출력하기
  6. 2024.04.12 js split()
  7. 2024.04.08 자바스크립트 옵셔널 체이닝(optional chaining)
  8. 2024.04.07 qr decoder part 2
  9. 2024.03.12 javascript groupby map
  10. 2024.02.07 javascript 숫자
Programming/javascript & HTML2024. 8. 21. 15:40

js DataView()

웹 소켓으로 float 형을 보내고 받는 예제를 만들어 달라고 gpt에 요청했더니

처음보는 객체...? 메소드가 보여서 검색

 

그런데 push 하면 안느리려나? 조금 걱정되네

Int32Array나 Float32Array로 좀더 해보고 안되면 DataView로 해봐야겠다.

        socket.onmessage = function(event) {
            const data = event.data;
            const floatData = [];
            const intData = [];

            const floatSize = 4; // float32는 4바이트
            const intSize = 4;   // int32는 4바이트

            const floatArrayLength = 4;
            const intArrayLength = 4;

            const view = new DataView(data);

            // float32 배열 추출
            for (let i = 0; i < floatArrayLength; i++) {
                floatData.push(view.getFloat32(i * floatSize, true));
            }

            // int32 배열 추출
            for (let i = 0; i < intArrayLength; i++) {
                intData.push(view.getInt32(floatArrayLength * floatSize + i * intSize, true));
            }

            document.getElementById("floatData").textContent = JSON.stringify(floatData);
            document.getElementById("intData").textContent = JSON.stringify(intData);
        };

[링크 : https://chatgpt.com/share/fb063d40-1441-457c-a209-0f594d2c482d]

 

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

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat32]

저작자표시

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

javascript ... (rest parameter)  (0) 2024.08.12
qr decoder  (0) 2024.04.19
QR decoder로 로또 추첨하기  (0) 2024.04.16
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
Posted by 구차니
Programming/javascript & HTML2024. 8. 12. 14:27

javascript ... (rest parameter)

이건 연산자 인가 아닌가..

 

[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters]

[링크 : https://guiyomi.tistory.com/126]

저작자표시

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

js DataView()  (0) 2024.08.21
qr decoder  (0) 2024.04.19
QR decoder로 로또 추첨하기  (0) 2024.04.16
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
Posted by 구차니
Programming/javascript & HTML2024. 4. 19. 08:55

qr decoder

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

 

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

저작자표시

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

js DataView()  (0) 2024.08.21
javascript ... (rest parameter)  (0) 2024.08.12
QR decoder로 로또 추첨하기  (0) 2024.04.16
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
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' 카테고리의 다른 글

javascript ... (rest parameter)  (0) 2024.08.12
qr decoder  (0) 2024.04.19
javascript 집합(set) 내용 출력하기  (0) 2024.04.16
js split()  (0) 2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
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 구차니

티스토리툴바