본문 바로가기

javascript69

html element의 data에 접근하기 엘리멘트에 data- 속성을 추가하고 javascript를 이용하여 속성 값을 가져올 때 dataset을 사용한다. ... var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN 데이터 속성 사용하기 HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디.. 2021. 4. 21.
storage에 객체 저장하고 꺼내기 setItem을 이용해 저장한 후 getItem으로 꺼내려고 하니 [object objectName] 으로 나온다. setItem 메소드에서 string 형태로 저장되는 것으로 보인다. storage에 저장할 때 string으로 변환한 다음 나중에 구문 분석을 해야 한다. var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject'); con.. 2020. 11. 8.
[Vanilla JS] 여러개의 요소에 AddEventListener 넣기 $('.an-article img').click(callback); 요소에 클릭 이벤트를 등록한다. jQuery로 했었다면 엄청나게 간단한 코드였을 것이 const articleImgs = document.querySelectorAll('.an-article img'); 바닐라 JS로 .an-article 안의 img 요소를 선택하는 것까지만 해도 코드가 더 길어진다. 이제 각 img에 클릭 이벤트를 줘야 한다. articleImgs.addEventListener 로 바로 하면 안 된다. forEach문을 사용하여 img 각각에 click 이벤트를 등록해야 한다! articleImgs.forEach(function(articleImg) { articleImg.addEventListener("click",.. 2020. 11. 8.
canvas context 학습내용1 mouseenter, mousedown 이벤트 if(!isDrawing) { // mousedown일 때만 실제로 그려짐 ctx.beginPath(); // 새로운 path 시작 ctx.moveTo(drawX, drawY); // 실시간 offset 감지, 안할시 마지막 path에서 이어짐 } else { ctx.lineTo(drawX, drawY); ctx.stroke(); // path에 stroke주기 } clearRect (x좌표, y좌표, 너비, 높이) function reset() { ctx.clearRect(0, 0, canvas.width, canvas.height); } developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D .. 2020. 11. 7.
javascript prototype 스터디 자바스크립트는 프로토타입 기반 언어이다. 클래스가 없기 때문에 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 같은 효과를 얻는다. 생성자 함수 Constructor를 new 연산자와 함께 호출하여 새로운 인스턴스를 만들 수 있다. 이 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 녀석은 Constructor의 prototype 프로퍼티를 참조한다. prototype도, 이를 참조하는 __proto__도 객체이다. prototype 객체 내부에 instance가 사용할 메서드를 저장하고 instance에서 __proto__를 통해 이 메서드를 사용한다. 실무에서는 __proto__ 대신 Object.getPrototypeOf() 혹은 Obje.. 2020. 11. 2.
Node.js 버전 변경하기 npm install -g n n 6.10.3 this is very easy to use. then you can show your node version: node -v v6.10.3 2020. 10. 22.
배열을 객체로, 객체를 배열로 배열을 객체로 Object.assign({}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"} { ...['a', 'b', 'c'] } 객체를 배열로 const obj = {foo : 'bar', baz : 45}; console.log(Object.entries(obj)); supplementary.tistory.com/4 2020. 10. 15.
TypeScript에서 Style 타입 명시하기 const textStyle: CSSProperties = { textDecoration: none }; {todo.text} const styles = { promAlert: { display: "flex", } as React.CSSProperties, } stackoverflow.com/questions/50960084/how-to-extends-cssproperties-in-react-project How to extends `CSSProperties` in react project I am from the javascript world and am new to typescript. I have a react project written in typescript. I declare an inlin.. 2020. 10. 7.
parameter(매개변수)와 argument(인자)의 차이 매개변수는 함수의 선언에서의 변수이며 인자는 함수에게 전달되는 변수의 실제 값 jhnoru.tistory.com/16 두 번째 질문. parameter(매개변수)와 argument(인자)의 차이가 뭔가요? 질문 ...더보기 The general consensus seems to be that it's OK to use these terms interchangeably in a team environment. Except perhaps when you're defining the precise terminology; then you can als.. jhnoru.tistory.com 2020. 10. 6.

티스토리툴바