한 걸음씩

▷ canvas HTML 태그를 사용하려면 body 안에 canvas 태그를 아래와 같이 넣어줘야 한다. // index.html ▷ css 파일에서 canvas 사이즈를 정하고 테두리를 만들어 준다. // styles.css canvas{ width: 700; height: 700; border: 5px solid black; background-color: skyblue; } ▷ JS 파일에서 canvas에 그림을 그릴 수 있도록 코드를 작성하면 된다. ▷ 우선 canvas 태그를 불러와서 getContext로 2d를 가져와야 한다. ▷ 그리고 css에서 너비와 높이를 설정했지만 js파일에서 한 번 더 설정해줘야 한다. const canvas = document.querySelector('canvas..

◆ keydown 사용자가 키보드의 키를 누를 때 발생하며 누르고 있는 동안 계속해서 발생한다. ex) 'A'키를 누르면 keydown 이벤트가 발생한다 ◆ keyup 사용자가 키보드의 키를 눌렀다가 놓는 순간에 발생하는데 한 번만 발생한다. 키 입력 동작의 완료를 의미하며, 추가적인 동작을 수행하거나 입력된 내용을 처리하는 데 사용된다. ex) 'A' 키를 눌렀다가 놓을 때 keyup 이벤트가 발생한다. ◆ keypress 키가 실제로 입력되었을 때 발생하며 음절이 결정된 시점에서 작업을 수행한다. 사용자가 키를 누르고 놓을 때 발생하며, 입력된 키에 대한 문자 코드를 반환한다. 조합 키, 특수 키에는 반응하지 않는다. 주로 사용자가 텍스트를 입력하는 용도로 사용한다 음절이 조합되는 언어에서 사용한다...

// 객체 생성 const person = { name: "John", age: 30, greet: function() { console.log(`Hello, my name is ${this.name}. I am ${this.age} years old.`); } }; // 객체의 메소드 호출 person.greet(); // 출력: Hello, my name is John. I am 30 years old. 《 변수명을 사용하지 않고 'this' 키워드를 사용하는 이유 》 ① 변수명을 변경하더라도 'this'는 여전히 현재 실행 중인 객체를 참조하기 때문에 코드의 유연성과 확장성을 높일 수 있다 → 만약 'this'가 아니라 변수명을 사용할 경우 변수명을 변경했을 때 참조한 모든 부분을 수정해야하기 때문..

▶ continue문 var string = 'Hello World.'; var count = 0; // 방법1 // 문자열은 유사배열이므로 for 문으로 순회할 수 있다. for (var i = 0; i < string.length; i++) { // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다. if (string[i] !== 'l') continue; count++; // continue 문이 실행되면 이 문은 실행되지 않는다. } console.log(count); // 3 // 참고로 String.prototype.match 메소드를 사용해도 같은 동작을 한다. console.log(string.match(/l/g).length); // 3 // 방법2 : 방법1과 ..

▶ 함수 레벨 스코프 일반적으로 var 키워드를 사용하여 변수를 선언하면 해당 변수는 함수 스코프를 갖게 된다. var로 선언된 변수는 함수 내에서 어디서든 접근할 수 있습니다. function example() { var x = 10; // 함수 레벨 스코프에서 변수 선언 if (true) { var y = 20; // 함수 레벨 스코프에서 변수 선언 console.log(x); // 10: 함수 내에서 x에 접근 가능 console.log(y); // 20: 함수 내에서 y에 접근 가능 } console.log(x); // 10: 함수 내에서 x에 접근 가능 console.log(y); // 20: 함수 내에서 선언된 y에 접근 가능 } example(); console.log(x); // Refer..