개발자입니다

-그림 파일 추가 accept="image/*" : 이미지 파일만 허용한다. video 등도 가능하며 .pdf 등으로 확장자 제한을 걸 수도 있다. multiple 속성 추가시 여러 파일을 등록할 수 있다. // index.html 추가 const fileInput = document.getElementById("file"); function onFileChange(event) { console.dir(event.target); } fileInput.addEventListener("change", onFileChange); 콘솔 확인은 다음과 같다. 브라우저의 자바스크립트는 유저의 파일을 읽을 수 없다. 유저가 선택했을 때 메모리에 있게 된다. 그러면 브라우저가 파일을 활용할 수 있다. 메모리에 있는 파..

-클릭시 x, y 좌표 얻어내기 아래 코드로 콘솔에서 클릭 위치 얻어낼 수 있다. function onClick(event) { console.log(event); } canvas.addEventListener("click", onClick); 클릭시마다 (0, 0) 에서 시작되는 직선을 그릴 수 있다. ctx.lineWidth = 2; function onClick(event) { ctx.moveTo(0, 0); ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener("click", onClick); addEventListener에서 "click"을 "mousemove"로 바꾸면 이렇게 나온다. function ..

태그 : js로 그래픽 그릴수 있게 하는 API /* style.css */ canvas { width: 800px; height: 800px; border: 5px solid black; } body { display: flex; justify-content: center; align-items: center; } // app.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 2d 그림 그리기 위해 canvas.width = 800; canvas.height = 800; // 기본 세팅 fillRect(x 시작위치, y 시작위치, 너비, 높이) ctx.fillRect(50, 50, 100,..

VS code에서 ! + 엔터시 html에 필요한 코드 자동으로 나온다. VS code에서 Live Server 설치 - 우하단 Go Live 클릭 - index.html 파일 생성해야 자동 업데이트 /* style.css */ body { background-color: turquoise; } // app.js alert('Hello');

예컨대 123.456 이라는 숫자가 있을때 const num = 123.345; num.toFixed(2) // 소수점 셋째 자리 반올림한다. >> 123.35 const num = 123.345; num.toFixed(1) // 소수점 둘째 자리 반올림한다. >> 123.3

내 다음과 같이 을 삽입하였다. 그랬더니 author 항목이 나오지 않았다. 개발자 도구로 확인하니 'cannot set property of null innertext' 에러가 발생했다. 해결 순서 1. 태그 위치 변경 검색했을때 대부분 태그를 의 바로 위에 배치하면 해결된다고 했다. 그러나 해결되지 않았다. 2. 로 감싸기 태그로 감쌌더니 quote.js에 입력된 모양대로 나와 정렬이 예쁘지 않았다. 3. 대신 입력 대신 입력 해보았으나 현상은 동일했다. 내용이 없는 객체가 있어서 문제가 생기는건가 싶다. 4. quote.js 파일 수정 author의 텍스트 자체에 엔터를 삽입하게 수정했다. 아래와 같이 수정하니 잘 작동했다. author.innerText = "\n" + todaysQuote.aut..