study 코딩하자

https://garenchoi.github.io/webs_class/javascript/typingGame/index.html Document garenchoi.github.io 수업시간에 내가 만든 타자연습게임

https://garenchoi.github.io/webs_class/javascript/musicPlayer/index.html Document expand_more Now Playing more_horiz 0:00 0:00 repeat skip_previous play_arrow pause --> skip_next queue_music repeat_one --> shuffle --> queue_music Music List close garenchoi.github.io 수업시간에 내가 만든 뮤직 플레이어

addEventListener 자주쓰는 속성 click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다. focus – HTML요소에 포커스가 갔을때 발생한다. blur – HTML요소가 포커스에서 벗어났을때 발생한..

break문 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 즉, break 문은 반복문을 강제로 종료할 때 사용합니다. 다음은 for문과 while 문에서 break 문이 사용된 기본형입니다. break 문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for 문과 while 문이 바로 종료됩니다. for(초깃갑; 조건식; 증감식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; } var 변수 = 초깃값; while(조건식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; 증감식; } 다음은 for 문을 이용하여 1부터 10까지 반복하도록 작성한 예제입니다. 그리고 break 문을 사용하여 변수 ..

setTimeout()과 setInterval()은 둘 다 자바스크립트에서 시간간격을 주는 함수입니다. 같은 목적의 함수이기는 하지만 둘 사이에는 약간의 차이가 있습니다. 헷갈려서 정리해 두려 합니다. setTimeout(function, delay)setInterval(function, delay) delay 시간 후에 딱 한 번 실행. delay 시간 마다 반복해서 호출 반복을 위해서는 재귀적으로 호출 한번만 호출하면 반복실행이 되기 때문에 코드가 간결 반복을 종료 : clearTimeout(timeoutName) 반복을 종료 : clearInterval(intervalName) setTimeout은 반복을 위해 함수를 재귀적으로 호출합니다. 따라서 함수 간의 딜레이가 정확하게 실행 될 수 있습니다...

this란? this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다. 첫..

정규 표현식의 용어들정규 표현식에서 사용되는 기호를 Meta문자라고 표현한다. 표현식에서 내부적으로 특정 의미를 가지는 문자를 말하며 간단하게 정리하면 아래의 표와 같다. 문법 /검색패턴/플래그 표현식 의미 ^x 문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다. x$ 문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다. .x 임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다. x+ 반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다. x? 존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다. x* 반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다. x|y or 를 표현하며 x 또는 y 문자가 존재함을 의미한다. (x) 그룹..

문자열을 다루는데 사용되는 객체 글자모양, 위치 이동, 문자열 다루기 등을 할수있게 다양한 메소드를 제공함 1) new 키워드로 이용해서 생성하거나 " " 문자열로 변수에 대입한 것처럼 생성할수있음 2) 변수에 문자를 대입하던 것이 사실 String객체로 생성한 것으로 숫자나 Boolean도 마찬가지임 String 객체의 HTML 관련 메소드 ; 글자 모양을 꾸밈 메소드 태그 명령 설명 big() 글자를 표준 크기보다 약간 크게 small() 글자를 표준크기 보다 약간 작게 bold() 볼드체(굵은체) italics() 이탤릭체 strike() 가운데 줄 그은 글자체 fixed() 타자기체 fontsize("크기") 글자크기 fontcolor("색상") 글자색 sub(),sup() , 아래첨자, 위첨자 ..