nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

Javascript 30의 Day 8입니다. 오늘은 Canvas를 다뤄볼 차례입니다(두근두근) 예전에 잠깐 캔버스에 대해 네이버 포스팅을 한 적이 있긴 한데, 저도 다 까먹었네요 허허허. 일부 내용은 그대로 가져왔습니다. 아무튼 시작해보죠!╰(✧∇✧╰) 1. 캔버스 만들기 아묻따 캔버스를 html에 마크업합니다. canvas요소는 id값과 width, height 속성을 갖습니다. 저 너비와 높이값은 선택사항이며, 기본값은 300*150이라고 합니다. IE9 이하 브라우저라면 대체 컨텐츠가 필요하며, 닫는 태그를 잊지 않도록 합시다. 자, 캔버스에 그림을 그리려면 일단 자바스크립트를 써야합니다. 캔버스 요소 아래에 스크립트를 작성합니다. canva에 id값을 넣어준 이유는 이렇게 스크립트에서 캔버스를 참..

2019. 2. 15.

Blog/JavaScript

Javascript30 강의 중 Day 07에 해당하는 Array Cardio 2 입니다 :> Array.prototype.some() MDN에 따르면, some() 메서드는 배열 안의 어떤 요소가 주어진 판별 함수를 통과하는지 테스트한다고 합니다. (ES6 이상) 더 쉽게 풀어쓰면, some() 메서드는 콜백함수를 인자로 받아서, 배열 내 각 요소에게 한 번씩 그 콜백함수를 실행합니다. 이때 해당하는 요소를 발견하면 true를 반환하고, 모든 요소에게 함수를 실행했지만 해당하는 요소가 없다면 false를 반환합니다. 백문이 불여일견, 예제를 살펴보죠! 아래 코드는 배열 내에 10 이상인 숫자가 있는지 판단합니다. function isBiggerThan10(elem){ return elem > 10; }..

2019. 2. 11.

Blog/JavaScript

Document 🔥Javascript 30 - Day 06🔥이번에는 Javascript30의 Day 06에 해당하는 'Ajax Type Ahead'를 정리해봅니다@@@@ json 내용 가져오기 우선은 json 내용을 가져와 봅시다. const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); 이게 뭔 소린가 싶죠..... 하나하나 살펴보면 ..

2019. 2. 6.

Blog/JavaScript

🔥Javascript 30 - Day 04🔥 Day 04는 배열 관련 메서드를 갖고 노는 시간이 되겠습니당 :->기본 html, js 내용은 여기에서 확인 가능합니다. 1. filter() - 특정 조건을 만족하는 새 배열 만들기 const people = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },..

2019. 1. 7.

Blog/JavaScript

🔥Javascript 30 - Day 03🔥 1. 마크업/스타일링 이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?). 자세한 html, css코드는 Codepen 결과물 에 있어요! > 제어 가능한 옵션은 '폰트 사이즈/메인 컬러/이미지 블러처리' 요렇게 3가지입니다. Update CSS Variables With JS Option Font size Main Color Background Blur {텍스트} {텍스트} {텍스트} 2. :root 속성 작성하기 그 다음, 아래와 같이 CSS를 추가 작성해 줍니다. :root { /*코드 작성*/ } 잠깐!!! 도대체 :root가 뭐지?! 싶은 사람(바로 접니다)을 위해 짚고 넘어가죠! :root 선택자는 문..

2019. 1. 7.