'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 |
자바스크립트 옵셔널 체이닝(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 |
간단하게
해당 필드(?)가 있는지 확인하고 읽을 필요 없이 바로 확인해서 출력해주는 연산자
편리하긴 한데.. 위험하지 않나 생각되네
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]
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 |
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 |
오오.. 이런 좋은 함수가 생겨나다니!
[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy]
[링크 : https://mong-blog.tistory.com/entry/array-object를-그룹화하는-방법reduce-group]
자바스크립트 옵셔널 체이닝(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 |
_로 자릿수를 표현할 수 있다는걸 처음 알았다
[링크 : https://cotnmin.dev/4]
[링크 : https://www.javascripttutorial.net/es-next/javascript-numeric-separator/]
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 |
웹 테이블을 마우스 드래그로 열 위치 변경하는 스크립트.
[링크 : https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/]
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 |
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]
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 |
어떻게 보면 당연한데 얘는 number가 아니라 text 다
그래서 <input type="text"> 로 해주어야 한다.
const a = 3540000; console.log(a.toLocaleString('ko-KR')) //"3,540,000" |
[링크 : https://mong-blog.tistory.com/entry/input에-입력된-숫자에-콤마-찍기]
마우스로 테이블 열 변경하기 (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 |
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 }; |
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 |
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]
숫자에 콤마 찍기(자릿수 표현) (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 |