노마드코더10 그림판 최종 완성본 https://github.com/parkchae/MEMEMAKER_MYSELF 2022. 12. 15. MEME MAKER 밈 메이커 기능을 만들기 시작해 볼껀데 이 기능으로 canvas에 이미지를 넣을 수도 있고 이미지 위에 텍스트도 넣을 수 있다. html에 input 태그를 추가하고 시작해보자. 비디오, 사진 모든 파일을 업로드 가능한데 accept라는 속성을 통해 이미지만 업로드 할 수 있게 해준다. js파일로 넘어와서 이벤트를 주고 사용자가 올린 파일을 console.dir(event.target);으로 확인해보았다. files의 항목에 유저가 올린 파일의 정보가 나와있다. 이것을 아는 것이 매우 중요한게 브라우저는 항상 유저의 실제 파일 시스템과 격리되어있다. 예를들어, 자바스크립트 애플리케이션은 유저의 파일을 읽을 수 없다. 그걸 가능하게 해주는 코드가 존재하지 않는다. 파일들은 유저가 파일을 선택했을 때만 자바.. 2022. 12. 9. PAINTING BOARD (2) 현재는 이쁜 색상을 찾기가 어렵기 때문에 이제 사용자가 색상에 다른 옵션을 줄 수 있도록 해보자. https://flatuicolors.com/palette/defo Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 위의 링크들의 색상을 html로 복사해서 그리고는 vscode로 각각의 색상별로 버튼을 만들어 누르면 색상이 지정이 되는 식으로 만들어 볼 것이다. 이런 식으로 쭉 html에 코드를 작성 하면 화면에 색상들이 보인다. 참고로 data-* 속성이란 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로.. 2022. 12. 9. PAINTING BOARD (1) 우리가 만들 그림판의 프로토타입을 만들어 보자. 목표는 내가 보드를 클릭할 때마다 선을 그리는 것이다. function onClick(event){ console.log(event); } canvas.addEventListener("click", onClink); JS는 항상 event라는 것을 준다. event를 console.log하여 원하는 정보를 볼 수 있다. 우리가 필요한 정보는 클랙했을 때의 위치이다. function onClick(event){ ctx.lineTo(event.offsetX,event.offsetY); ctx.stroke(); } 지금 문제는 처음 클릭했을 때 선이 그려지지 않는다는 점이다. 왜냐면 처음에 moveTo를 쓰지 않았기 때문이다. ctx.moveTo(0,0); 위의.. 2022. 12. 8. THE CANVAS API canvas html element는 canvase API의 창이다. canvase API는 우리가 javascript로 그래픽을 그릴 수 있게 해주는 API이다. WebGL API로 2D 그래픽이나 3D 그래픽을 그릴 수 있다. html 쪽에서는 convas element를 쓰는 것이 전부이다. javascript 쪽에서는 이 element에 접근할 것이다. 그림을 그리기 위해 context라는 것을 얻어야 한다. context라는 이름이 엄청 좋은 이름은 아니지만 근데 이게 문서에서 찾게 될 이름이다. context는 기본적으로 붓(브러쉬)이다. const ctx = canvas.getContext("2d"); //두가지 옵션이 있다. 하나는 2d 다른 하나는 => 이것들은 3d를 위한 것. 캔버스에.. 2022. 12. 6. weather 여기서는 이전 수업에서 사용하지 않았던 함수 두개를 배운다. navigator.geolocation.getCurrentPosition() getCurrentPosition은 두개의 argument가 필요하다. 하나는 모든 게 잘 됐을 때 실행되는 함수, 다른 하나는 에러가 발생했을 때 실행 될 함수이다. function onGeoOk(position){ const lat = position.coords.latitude; const lag = position.coords.longitude; console.log("You live in",lat,lag); } function onGeoError(){ alert("can't find you. No weather for you."); } navigator.geo.. 2022. 10. 9. To do list 이전 로그인이랑 비슷하게 form 안에 input태그를 넣어 text를 입력할 수 있도록 하였다. 그리고 form의 기본적으로 동작하는 엔터를 누르면 새로고침이 되는 현상도 막았다. 이제 text를 입력하고 엔터를 누르면 입력칸에 text가 사라 지는 것을 하고 싶다. 그러기 위해서 toDoInput.value 에 빈값("")을 넣는다. 그리고 paintToDo 라는 함수를 만든다. 이 함수는 todo를 그리는 역할을 할 것이다. 이 함수 안에 아까 html에 있는 ul태그 안에 li를 추가하는 코드를 작성한다. const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); co.. 2022. 10. 9. quotes and background 앞써 진행한 페이지에 내가 추가한 명언과 배경화면을 새로고침 할 때마다 랜덤하게 나오게 하는 결과를 만들어 보겠다. 이것을 하기 위해서 Math module을 사용할 것이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN **Math**는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. developer.mozilla.org Math 의 function 중 rondom() 함수를 사용할 것이다. random()은 0과 1사이에 랜덤한 숫자를 제공한다. 그럼 내가 필요한 0 - 10까지의 랜덤한 숫자를 하기 위해서 어떻게.. 2022. 9. 29. Clock setTimeout() 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용한다. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연시간 밀리초(ms) 단위로 받는다. setTimeout(() => console.log("2초 후에 실행됨"),2000); 예를들어, 위의 코드는 2초를 기다린 후 콘솔에 출력된다. setIntervar() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용한다. setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. setIntervar(() => console.log(new Date()),2000);.. 2022. 9. 26. Log In addEventListener addEventListener()는 document의 특정요소( id, class, tag 등등)event(ex - click함수를 실행하라, 마우스를 올리면 함수를 실행하라 등..) 를 등록할 때 사용된다. 자주 사용되는 이벤트 종류 click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mo.. 2022. 9. 26. 이전 1 다음 728x90
