까막눈코딩

1. Copying // start with strings, numbers and booleans let age = 100; let age2 = age; console.log(age, age2); age = 200; console.log(age, age2); let name = 'wes'; let name2 = name; console.log(name, name2); name = 'wesley'; console.log(name, name2); 문자열, 숫자, 불린 자료형을 변수로 할당하면, 해당 값은 메모리에 저장된다. 위 코드에서, age에 100을 할당하고, age2에 age를 할당한 후 콘솔 창에 나타내 보면 100과 100으로 출력될 것이다. 이후, age의 값을 200으로 바꾸고 콘솔 창에 출력..

Experience/[Javascript] JS 30 2021. 4. 25. 16:13

1. 배경 스크롤을 내리면 삽입된 그림이 슬라이드 되면서 삽입되는 애니메이션 효과를 추가한다. 2. HTML Slide in on Scroll Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos. Lorem ipsum cupidita..

Experience/[Javascript] JS 30 2021. 4. 24. 00:10

1. 배경 브라우저에서 키를 인식하고 방향키에 따라서 스크롤이 움직이는 등의 특별한 기능을 실행할 수 있도록 한다. 2. Javascript const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { pressed.push(e.key); pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); if (pressed.join('').includes(secretCode)) { console.log('Ding Ding'); cornify_add(); }; }); 먼저 눌러진 키들을 모으기 위해 빈 배열인 pressed를 만든다. 또..

Experience/[Javascript] JS 30 2021. 4. 22. 23:33

1. 배경 간단한 비디오 플레이어를 만들었다. 화면이나 플레이 버튼을 누르면 재생되거나 일시정지되고, 이에 따라 버튼의 모양이 바뀐다. 풀 스크린 버튼, 10초 전, 25초 뒤로 이동하는 스킵 버튼, 재생 상황에 따라 이를 나타내는 바를 만들었으며, 재생 바를 클릭하면 이에 비례하여 재생 상황이 이동되도록 하였다. 2. HTML ► « 10s 25s » 🔲 3. CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; display: flex; background: #7A419B; min-height: 100vh; background: linear-gradien..

Experience/[Javascript] JS 30 2021. 4. 22. 14:42

1. 배경 Shift 키를 누른 상태로 두 개의 체크박스를 클릭하면, 그 사이에 있는 체크박스도 모두 체크되도록 하는 기능을 만들기로 했다. 2. HTML This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything in between should also be set to checked Try to do it without any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 3. CSS html { font-family: sans-serif; background: #ffc600; } .inbox {..

Experience/[Javascript] JS 30 2021. 4. 21. 00:39

콘솔 창을 잘 활용하기 위한 팁이다. 1. HTML ×BREAK×DOWN× 2. Javascript const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; function makeGreen() { const p = document.querySelector('p'); p.style.color = '#BADA55'; p.style.fontSize = '50px'; } 3. console // Regular console.log("hello"); // Interpolated console.log("hello. I am a %s string!", "🐥"); // Styled console.log("%c I am some great text"..

Experience/[Javascript] JS 30 2021. 4. 20. 22:27

1. 배경 마우스를 누른 상태로 움직이면 이를 따라 색칠이 되는 캔버스를 구현하고자 한다. 마우스가 이동됨에 따라 크기와 색깔이 변한다. 2. HTML, CSS 3. Javascript 먼저 querySelector를 이용해 HTML의 canvas 태그를 선택하고, canvas 변수에 할당한다. 또, 여기에 getContext 매소드를 사용해 드로잉 컨텍스트를 반환한다. 매개변수를 2d로 하여 2차원 렌더링 컨텍스트를 반환하고, 이를 변수 ctx에 할당한다. 여기부터는 초기 설정과 같다. 캔버스의 넓이를 window.innerWidth, window.innerHeight 를 통해 윈도우의 크기에 맞게 설정한다. strokeStyle로 도형의 윤곽선 색을 설정하고, linecap으로 선의 모양을 둥글게, ..

Experience/[Javascript] JS 30 2021. 4. 20. 00:42

1. Array APIs 배열 API에 관한 연습 문제들이다. // ## Array Cardio Day 2 const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nic..

Experience/[Javascript] JS 30 2021. 4. 18. 11:20