개발자는 언제나 맑은 뒤 흐림

콘솔창에서 console.log() 말고 다른것도 좀 찍어보기. (https://github.com/KIMSG/javascript30/blob/master/day9/index.html) Console API : https://developer.mozilla.org/ko/docs/Web/API/Console 콘솔에서 가장 많이 사용되는 기능은 데이터와 텍스트를 출력하는 것이다. console.log(), console.info(), console.warn(), console.error() 와 같은 출력 메소드를 이용하여 4종류의 출력 카테고리를 지정할 수 있다. 각각의 출력 결과물들은 로그에 다른 형식으로 스타일링되며, 브라우저에서 제공하는 필터링 기능을 이용하여 관심있는 종류의 출력만 확인할 수 있다. ..

재미있는 캔버스 사용하기. (https://github.com/KIMSG/javascript30/blob/master/day8/index.html) 하이브리드 어플을 만들때 사인을 받기 위해서 canvas를 사용할 수 있다고 배웠다. 실제로 사인도 해보고 canvas로 사인하여 그 화면 자체를 이미지로 저장하는 것도 했었다. 그런데 이분은 알록달록하게 canvas를 활용하시네... 대단하다. Canvas 기본 사용법 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage canvas는 처음에는 비어있다. 그래서 getContext(‘2d’)를 사용해서 선언을 해야 한다. 이때, 2d는 그래픽이다. 1 2 const canv..

some() : callback의 함수중에서 값이 ture인 것이 있으면 true를 return합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some 1 const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19 ); cs New Date 는 현재의 날짜와 시간을 받을 수 있는 선언자입니다. getFullYear() : 현지 시간에 따라 지정된 날짜의 연도를 리턴합니다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_O..

javascript를 활용해서 실시간으로 검색 정보를 받아오자. (https://github.com/KIMSG/javascript30/tree/master/day6) 소스에 기본 json데이터는 포함되어 있고 문법만 배우면 된다. 1 2 3 function numberWithCommas(x){ return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } Colored by Color Scripter cs 숫자가 들어오면 3단위씩 나누어 , 를 표시한다. 1 2 3 fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)) cs fetch API를 이용해서 AJAX를 대체 하는..

Flex-box 활용하기. (https://github.com/KIMSG/javascript30/blob/master/day5/index.html) 1 2 3 4 5 .panels { min-height:100vh; overflow: hidden; display: flex; } cs Flexbox레이아웃을 구성할 땐 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다. 지원현황 : 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 IE10+(hybrid) FF2~21(old), FF22이상(modern) SF3.1 이상(old), iOS3.2 이상(old) CH21 이상(modern), CH20 이하(old), An2.1 이상(old) O12 이상(modern) Blackberry 브라우저 10 이상은 moder..

array의 중요 함수와 기능들에 대해서 실습해 봅니다. (https://github.com/KIMSG/javascript30/blob/master/day4/index.html) 기본예제 소스 : https://github.com/wesbos/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/index-START.html 처음에 예제소스에 선언된 배열이 있기 때문에 예제 소스를 우선 다운받아서 시작합니다. 1 2 3 4 5 6 7 8 9 10 11 // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen..

Update CSS Variables with JS #css, js 변수를 업데이트 할 수 있다. (https://github.com/KIMSG/javascript30/blob/master/day3/index.html) input 태그를 이용하여 값이 변화할 때마다 style을 변화할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 const inputs = document.querySelectorAll('.controls input'); function handleUpdate(){ const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty('--${this.name}', this.value + suff..

javascript를 시작하는 (아주 기초는 알고 있는) 사람들에게 유용한 사이트 입니다. https://javascript30.com/ https://github.com/wesbos/JavaScript30 하루에 하나씩 배워가면서 javascript의 심화 단계로 발전하는 사이트 입니다. 강사님의 강의를 돈을 지불하고 배울수도 있지만, 우선은 무료 강좌 부터 하나씩 보고 단계를 밟아보려고 합니다. #시계만들기 (https://github.com/KIMSG/javascript30/tree/master/day2) 위와 같은 시계 화면을 만들기 위해 css와 javascript 코드를 적용했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2..

웹접근성을 위해서 웹페이지의 태그에 해당 페이지의 내용을 나타내야만 한다. 예를 들어본다. 아래와 같은 페이지에서 탭의 제목이 'title을 바꾸는 스크립트'라고 표시가 된다. 이처럼 사용자가 보고 있는 페이지의 title을 항상 바꿔줘야 하는 것이다. 대부분의 사이트는 메인화면에 메뉴탭에서 원하는 메뉴를 선택하여 세부 항목으로 들어간다. 때문에 ' 대메뉴 > 중메뉴 > 소메뉴' 의 방식으로 페이지의 상단에 적어 놓는 부분이 있을 것이다. 웹페이지의 전체적인 경로 또는 현재 페이지의 설명이 될 수 있는 내용을 꼭 title에 기입해야 한다. 123$(function($){ document.title = '수정하고 싶은 제목';});cs 웹접근성을 준비 하다보니 페이지가 이동할 때, 해당 페이지의 메뉴를 ..

1234567891011121314151617window.location = "/main.do";index 이렇게 해두면 location을 걸어둔 곳으로 바로 이동 합니다.Colored by Color Scriptercs