비디오 플레이어 활용하기 (https://github.com/KIMSG/javascript30/tree/master/day11) Html, css, js 파일 총 3개가 있다. 1 2 3 4 5 /* Build out functions */ function togglePlay() { const method = video.paused ? 'play' : 'pause'; video[method](); } Colored by Color Scripter cs paused 속성은 동영상이 재생중이면 true, 정지되어 있으면 false를 반환합니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused 1 2 3 function skip..
shift키를 눌러서 checkbox 연속 선택하기 https://github.com/KIMSG/javascript30/blob/master/day10/index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handleCheck(e) { let inBetween = false; if(e.shiftKey && this.checked){ checkboxes.forEach(checkbox => { console.log(checkbox); if(checkbox ..
콘솔창에서 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..
- Total
- Today
- Yesterday
- textcleaver
- 정규식
- 아파치
- 소년아저씨
- server.xml
- Mac
- html
- floating button
- 톰캣
- input
- 위잇딜라이트
- 관리자설정
- juso.go.kr
- 성수뚝떡
- 터미널
- 이클립스
- 힘냉면록
- 성수밥
- 맥
- Eclipse
- globals.properties
- LTFViewr
- Lalavel
- 르프리크
- 오라클
- Apach
- 최고심
- Tomcat
- 또오류
- 토라식당
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |