코딩 6

[javascipt30]아날로그 시계 만들기

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작 //html 12 3 6 9 //css .hand 시계바늘에 있는 transition을 삭제했다ㅜㅠ 원래 무소음 시계로 만드려고 움직임을 부드럽게 했다가 강력새로고침 할 때마다 0도에서 돌아오는 것 때문에 포기. 그냥 초침 효과만 주려고 transition을 넣었는데 0초가 되면 바늘 위치가 이상해지는 오류가 난다. 그래서 일단 삭제.. 나중의 내가 고쳐보기로 //js const hoursHand = document.querySelector('.hours'); const minutesHand = document.querySelector('.minutes'); const secondsHand = document.querySelecto..

언어/JavaScript 2023.05.27

[javascipt30]자바스크립트 30일 챌린지

자바스크립트 공부를 위해 이것저것 알아보던 중 좋은 사이트를 발견했다. https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 사이트로 들어가면 간단한 이메일 가입을 통해 강의를 볼 수 있으며 깃허브도 존재한다. 근데 강의는 영어자막밖에 없어서 감안하고 봐야함.. 노마드코더 js강의를 듣고 다음은 어떤 강의를 들어야할까 고민했는데 예제 영상과 파일까지 있어서 혼자 연습해보기 딱일듯 파일을 보면 한 챌린지당 start와 ficished파일이 있는데 start파일에서 자바스크립트를 추가해서 finished파일을 만들어보면 될 듯 하다.

언어/JavaScript 2023.05.27

노마드 코더 - 바닐라 JS로 그림 앱 만들기- canvas로 그림 그리기

//.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; ctx.fillRect(200 - 40, 200, 15, 100); ctx.fillRect(350 - 40, 200, 15, 100); ctx.fillRect(252 - 40, 200, 60, 200); ctx.fillRect(212, 420, 25, 150); ctx.fillRect(246, 420, 25, 150); ctx.arc(280 - 40, 140, 50, 0, 2 * Math.PI); //num * Math.PI 원의 둘레 구하기 위한 공식 1이면 반원 ct..

노마드 코더 - 바닐라 JS로 그림 앱 만들기- 선그리기

누추한 조개껍데기 만드는방법 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; ctx.lineWidth = 2; const colors = [ "#FFAD9E", "#D7AFFF", "#B3D89C", "#9FE2BF", "#F0F0F0", "#A2B9F2", "#E2B1E1", "#B8E080", "#FFD1DC" ] function onclick(event){ console.log(event); ctx.beginPath(); ctx.moveTo(0,0); const color = colors[Math.floor(Math.ran..

따옴표와 백틱의 차이'',"",``

1."따옴표 사용했을 때" const name = "Alice"; const greeting = "Hello, " + name + "!"; console.log(greeting); // 출력값: "Hello, Alice!" 2. `백틱 사용했을 때` const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력값: "Hello, Alice!" - `` 백틱을 사용하면 코드를 더 간결하게 쓸 수 있고 html작성할 때의 구조로도 작업 가능함. 예제는 gpt에서 가져옴,,

언어/JavaScript 2023.05.24

var, let, const 변수 선언의 차이

요즘은 var를 권장하지 않는다. var를 사용하면서 발생하는 문제점 ​ 1. 상수인지 변수인지 구분이 안된다. ​ 2. 변수는 let으로 사용한다. var a = "1"; var a = "10"; var는 위에서 1이라고 정의했어도 아래에서 10이라고 재정의가 가능해 스크립트 오류가 발생할 확률이 높다. 3. scope의 차이 var x = 1; if (true) { var x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 2 let x = 1; if (true) { let x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 1 var는 블록문 안에서 선언되었어도 밖에서 참조할 수 있고 let이..

언어/JavaScript 2023.05.24