Programming/javascript & HTML2024. 4. 12. 18:57

js split()

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

split('')

 

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

저작자표시

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

자바스크립트 옵셔널 체이닝(optional chaining)  (0) 2024.04.08
qr decoder part 2  (0) 2024.04.07
javascript groupby map  (0) 2024.03.12
javascript 숫자  (0) 2024.02.07
마우스로 테이블 열 변경하기  (0) 2024.02.02
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' 카테고리의 다른 글

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
마우스로 테이블 열 변경하기  (0) 2024.02.02
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 구차니
Programming/javascript & HTML2023. 7. 27. 12:31

숫자에 콤마 찍기(자릿수 표현)

어떻게 보면 당연한데 얘는 number가 아니라 text 다

그래서 <input type="text"> 로 해주어야 한다.

 

const a = 3540000;
console.log(a.toLocaleString('ko-KR'))  //"3,540,000"

[링크 : https://mong-blog.tistory.com/entry/input에-입력된-숫자에-콤마-찍기]

저작자표시

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

마우스로 테이블 열 변경하기  (0) 2024.02.02
html video 재생종료 event  (0) 2023.09.02
canvas 없는 getcontext  (0) 2023.07.12
html canvas와 시간 그래프 흘리기  (0) 2023.07.06
javascript 정수는 정수가 아니다  (0) 2023.04.06
Posted by 구차니
Programming/javascript & HTML2023. 7. 12. 14:05

canvas 없는 getcontext

document 객체를 이용해서 element를 생성만 하고 추가하지 않으면 되는건가?

// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;

// Get the drawing context
var ctx = canvas.getContext('2d');

// Then you can do stuff, e.g.:
ctx.fillStyle = '#f00';
ctx.fillRect(20,10,80,50);

 

var offscreen = new OffscreenCanvas(256, 256);

[링크 : https://stackoverflow.com/questions/3892010/create-2d-context-without-canvas]

 

크롬에서 확인해보니 먼가 되는것 같긴 하다?

버전 114.0.5735.198(공식 빌드) (64비트)

var offscreen = new OffscreenCanvas(256, 256);
undefined
ctx = offscreen.getContext("2d")
OffscreenCanvasRenderingContext2D {canvas: OffscreenCanvas, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …}

 

+

OffscreenCanvas() 에는 toDataURL()이 없나보다.

 

+

getContext("2d").canvas 로 하면 굳이 복잡하게 하지 않아도 바로 imf로 떨어지는 듯.

var first = document.getElementById('first').getContext('2d');
var sec = document.getElementById('second').getContext('2d');

// draw on first canvas
first.fillStyle = '#07C';
first.fillRect(0, 0, first.canvas.width, first.canvas.height);

// draw image on second canvas
var img = new Image();
img.src = "http://lorempixel.com/300/300";
img.onload = function() {
   sec.drawImage(img, 0, 0, sec.canvas.width, sec.canvas.height);
   sec.drawImage(first.canvas, 100, 100, 100, 100); // draw first canvas on a portion of second canvas
};

[링크 : https://stackoverflow.com/questions/44574228/copying-and-pasting-one-canvas-inside-another-canvass-corner]

저작자표시

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

html video 재생종료 event  (0) 2023.09.02
숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
html canvas와 시간 그래프 흘리기  (0) 2023.07.06
javascript 정수는 정수가 아니다  (0) 2023.04.06
websocket binarytype  (0) 2023.04.04
Posted by 구차니
Programming/javascript & HTML2023. 7. 6. 12:36

html canvas와 시간 그래프 흘리기

canvas에 먼가 그려져 있어야 테스트를 하니 일단 줄을 그리고

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Draw the Path
ctx.stroke();

[링크 : https://www.w3schools.com/jsref/canvas_lineto.asp]

 

여기서 나오는 waterfall display를 canvas로 간단하게 그려보려고 하니

[링크 : https://www.arc.id.au/Spectrogram.html]

 

간간히 아래와 같은 경고? 에러가 나지만 일단 무시하고 실행은 가능하니 나중에 찾아봐야 할 듯.

tt.html:27 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

[링크 : https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently]

 

getImageData를 이용하여 좌상단으로 부터 가장 아래 1줄 빼고 복사하고

putImageData를 이용하여 복사한 그림을 위에 1줄 비우고 붙여넣는다.

결과적으로 가장 왼쪽 위 1픽셀은 남은채 나머지는 아래로 흘러내리는 애니메이션 완성!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="sepctrograph" height=500 width=1800></canvas>
    <script>
        function init_canvas()
        {
            canvas = document.getElementById("sepctrograph")
            ctx = canvas.getContext("2d");

            // Start a new Path
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(300, 150);

            // Draw the Path
            ctx.stroke();
        }

        function flow_canvas()
        {
            console.log("ing");
            canvas = document.getElementById("sepctrograph")
            ctx = canvas.getContext("2d");
            imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);
            ctx.putImageData(imgObj, 0, 1); // next line draw
        }

        init_canvas();
        setInterval(flow_canvas, 1000);
        
    </script>
    </body>
</html>

 

 

+

새로 생성하지 않고 getImageData로 받은건 이상하게 편집이 안되는 느낌이라..

그냥 높이 1짜리로 새롭게 만들어서, 가장 위에 한줄 넣는게 무난한 듯.

const myImageData = ctx.createImageData(width, height);

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas]

저작자표시

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

숫자에 콤마 찍기(자릿수 표현)  (0) 2023.07.27
canvas 없는 getcontext  (0) 2023.07.12
javascript 정수는 정수가 아니다  (0) 2023.04.06
websocket binarytype  (0) 2023.04.04
자바스크립트 소수점 자르기  (0) 2023.03.13
Posted by 구차니

티스토리툴바