Daily Pogle

Javascript 로 그림판을 만들기 전에 기초기능부터 살펴보려고 한다. 만들기 전에 활용할 기초기능들을 정리해보았다. Javascript 의 canvas 위치는 이전 포스팅과 같다. 이 포스팅에서는 다음과 같은 기능을 한다. = 특정한 위치로부터 사용자가 클릭한 위치까지 각기 다른색의 선을 그릴 수 있게한다. HTML 삽입 미리보기할 수 없는 소스 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 캔버스에 그림그릴때 context canvas.width = 800; //css 뿐만 아니라 js에서도 표시 canvas.height = 800; ctx.lineWidth = 2; // 그릴 선 두꼐..

프론트엔드에 역동적인 애니메이션이나 그림을 그리고 싶을 때 Javascrpipt 에서 canvas API 를 제공합니다. 앞서 HTML 에 만 먼저 추가해주시면 됩니다.이후에 동작들은 모두 Javascript 에서 진행합니다. 1. 다양한 모형 그리기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 캔버스에 그림그릴때 context canvas.width = 800; //css 뿐만 아니라 js에서도 표시 canvas.height = 800; ctx.rect(50, 50, 100, 100); //canvas(50,50) 위치에서 width 100, height 100 인 사각형그리기 ctx.re..

내가 있는 장소의 날씨 정보를 얻기 위하여 weather API 를 활용할 것이다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 해..

To do list 를 만들기 위한 기능을 고려한다. [요구사항] 1. 사용자 입력 2. 시계 기능. 3. 입력을 통한 "오늘 할일" 추가. 4. "오늘 할일" 삭제기능. 5. Local Storage(내부 DB)를 통한 기능. [주의점] - submit 시 발생하는 기본 브라우저 기능 정지 필요.(submit 시 웹페이지 초기화 등) - 입력, 삭제 시 각 element 를 기억해서 수정할 수 있도록 구현 필요.(아니면 원하는 element 수정 불가) 주요 function 모음 function operation return const date = new Date(); Date object 생성 object String(date.getHours()).padStart(2,"0"); 현재 Hour 를 st..

// required: 반드시 채워야함. // maxlength: 입력의 최대길이. // placeholder: 입력전 예시문구. Login

Javascript 가 일어나는 event에 대하여 반응할 수 있도록 구현하는 방법. 사용자가 웹페이지에 나타난 My name is Pogle 을 클릭하면 경고창으로 "Hi (user이름)"을 출력 ** index.html DOCTYPE html> Momentum My name isPogle ** app.js const getName = document.getElementById("name") function handleTitleClick() { alert("Hi", getName.innerText); } getName.addEventListener("click", handleTitleClick); [Event] element.addEventListener("event명", 실행할 함수) ** eleme..

javascript에서 HTML을 읽고 수정하기 위해 사용하는 객체가 document, 즉 document는 javascript에서 HTML을 의미한다. document.getElementById("A") 는 의미 그대로 document(HTML)에서 ID가 A인 element를 가져오는 것을 의미한다. HTML에서 특정 ID는 유일하므로 해당 ID가 있는 코드 전체을 전체 가져온다. 예를 들어 ** index.html DOCTYPE html> Momentum My name isPogle ** app.js const getName = document.getElementById("name"); console.log(getName) [console] My name is Pogle [Method 정리] met..

Javascript 에서는 카멜표기법이 권장됨. - 단어가 여러개 붙을 때, 앞 단어를 제외한 첫자를 대문자로 표기 const 재선언 금지, 재할당 금지 상수 let 재선언 금지, 재할당 가능 생성시 사용, 업데이트 필요 var 재선언 가능, 재할당 가능 javascript 초기 방법(사용x) const pi = 3.14 >> 프로그램 내에서 바뀌지 않을 변수 let myName = "pogle" >> 이후 업데이트 될 변수 * var >> javascript 초기 변수선언, 할당 방법으로 const, let이 업데이터 되기전 사용했었다. const와 let과 달리 var가 가지고 있는 의미가 없기에 프로그램 개발 및 유지보수에 혼란 초래, 현재는 사용하지 말아야함. undefined = 변수를 선언했으..