JavaScript

개발 툴VSCODE플러그인Live Server (RUN시 브라우저가 열리면서 결과 확인 가능)code runner자바스크립트도 다른 언어와 비슷하다.처음에 자바스크립트를 봤을 때 웹을 만들기 위한 부가적인요소인 줄 알았다. CSS HTML과 함께 쓰여야 하는줄 알았음그

http://blog.naver.com/PostView.nhn?blogId=missjin_k&logNo=220806025058&categoryNo=34&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=

특정한 시점에 호출되는 함수이벤트가 발생했을 때 그 처리를 담당하는 함수객체나 요소에 등록되어야만 호출이 가능하다.이벤트 리스너 등록방법은 두가지가 있다.객체, 요소에 프로퍼티로 등록객체, 요소의 메소드에 이벤트리스너를 전달프로퍼티 등록은 다음과 같다.이벤트 타입별로

자바스크립트는 호출스택을 가지고 있다.호출 스택의 역할은 함수가 실행되면 해당 함수는 호출 스택의 최상단에 위치하게 되고, 함수의 실행이 종료될 때 스택에서 제거하게된다.이 호출 스택에 쌓이고 빠지고 하는 방식으로 이벤트가 처리되지 않는다. 순서대로 수행되는 동기방식과

자바스크립트는 호출스택을 가지고 있다.호출 스택의 역할은 함수가 실행되면 해당 함수는 호출 스택의 최상단에 위치하게 되고, 함수의 실행이 종료될 때 스택에서 제거하게된다.이 호출 스택에 쌓이고 빠지고 하는 방식으로 이벤트가 처리되지 않는다. 순서대로 수행되는 동기방식과

foreach는 반복문이다.매개변수로 들어온 array의 요소값만큼 반복되고currentValue는 배열 내의 현재 값,index는 현재 값의 인덱스이다.이를 통해 2차원배열의 값들을 초기화할 수 있다.2차원배열인 tdArr의 원소인 tr은 총 3개 삽입했으므로 3번

로또번호는 45개이다.이 번호들을 담는 배열부터 만들어보자.해당 번호를 콘솔을 해봤을 때 45개의 모든 요소는 empty로 초기화되어있다.empty에는 접근할 수 없으므로 undefined로 초기화 시켜준다. 초기화를 시켜주기 위해서 fill()메소드를 사용한다.emp

이미지스프라이트란 이미지를 로드할 때 한 장의 이미지를 로드하고 위치를 바꾸어 출력해주는 것을 말합니다.예전에 사양이 좋지않을때 많이 사용했던 방법이라고 합니다.가위바위보 사진 한장전체를 로드하고, 위치를 바꾸어 가위, 바위, 보를 순차적으로 띄워보겠습니다. 먼저 사진

지뢰찾기게임 구현10 by 10의 크기를 가지는 지뢰찾기를 구현합니다.틱택토때 했던 2차원배열을 이용한 테이블 구성을 작성합니다.hor, ver에 데이터를 입력받으면, 해당 크기만큼의 테이블을 구성합니다.이후 입력받은 갯수만큼의 지뢰를 생성합니다.이때 지뢰는 10 by

우클릭을 통해 깃발을 꼽는 기능을 작성합니다.td에 대해 클릭 이벤트리스너를 등록해야하고, 클릭된 부분을 ! 문자로 변경합니다.우클릭에 대한 이벤트는 contextmenu이벤트 입니다.비동기함수로 실행되므로 td를 생성할 때 모든 td객체에 대해 contextmenu

최신문법이다!nullish coalescing operator ->??를 사용하면 짧은 문법으로 여러 피연산자중 그 값이 확정되어있는 변수를 찾을 수 있다.=> ??확정되어있는 변수라는 것이 좀 와닿지 않는다.일단 진행해보자a ?? b는 다음과 같다.a가 null도 아

자바스크립트는 객체지향언어, 프로토타입 기반 언어라고 불린다JS에는 클래스가 없다. Class라는 예약어가 있지만 함수의 한 종류일 뿐이다.따라서 Class가 없으니 상속기능도 없다.상속을 구현해 사용하는 것이고 이를 함수와 new를 통해 흉내내는 것이다.프로토타입을

keyCode는 deprecated. 대신 key를 사용함9개의 키를 눌렀을 때 각 키에서 드럼 소리를 나도록 이벤트를 작성해라연속으로 눌렀을 때 한번만 실행되지 않고 누른 숫자만큼 끊김없이 실행되도록해라키 클릭시 눌른 키가 무엇인지 확인할 수 있도록 애니메이션추가특정

시, 분, 초를 갖는 시계를 만들 것JS와 CSS만으로!transform, rotate degreetransform-origin ->transition 속성transition-timing-functionsetInterval현재시간을 반환할 Date 객체의 메소드들CSS

array 메소드에 대해 다룸filter, map, sort, reduce 등을 이용해 주어진 문제를 해결array 메소드들에 대한 이해prototype에 map메소드가 없으면 유사배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array 객체로 만들어 순회할 수 있

flexbox.iodisplay:flex에 대해 학습flex로 grid형태로 만들고 각 영역을 조정함으로써 애니메이션 추가translateY 로 애니메이션을 만듦JS로 각 패널을 클릭했을 때 toggle로 on, offclassList.toggleflex, justif

검색했을 때 새로고침 없이 검색결과가 입력한 글자마다 나오도록api에서 데이터를 가져오고, 가공해서 원하는 결과로 parsing정규표현식promise, fetchapi call

array 메소드에 대해 학습some :every:find:findIndex:some, Date를 사용하여 19살이상인 성인인지 확인하는 함수를 작성\-> 적어도 하나가 성인이므로 true의 결과를 출력every를 사용하여 모두가 성인인지 확인하는 함수를 작성\-> 모

canvas 요소를 사용해 그림판을 만듦canvas요소 사용width, height요소만 존재고정크기의 드로잉 영역을 생성하고 하나 이상의 랜더링 컨텍스트를 노출해 컨텐츠를 생성, 출력함getContext()를 이용해 그리기 함수를 사용할 수 있음

메소드를 호출한 객체가 저장되어있는 속성으로 함수를 호출하는 방법에 의해 결정됨일반 함수에서 this -> window중첩 함수에서 this -> window이벤트에서 this -> 이벤트 객체메소드에서 this -> 메소드 객체메소드 내부의 중첩 함수에서 this -

여기서 한가지 염두에 두고 글을 읽어야할 것이 있는데, JS엔진이 행하는 컴파일과정, 실행과정을 나누어서 생각을 해야한다.컴파일은 말 그대로 실행전, 인터프리터가 코드를 실행할 수 있도록 준비해놓 단계이고 실행은 바이트코드로 이루어진 기계어를 실행하는 것이다.코드 실행

실행컨텍스트는 코드가 실행되기 위해 필요한 환경이미지출처, 내용참고사이트자바스크립트가 call Stack으로 코드를 처리하는 것은 알고있다.이 Call Stack에 쌓이는 것은 함수다. 쌓인다고 해서 내부 로직이 실행되는 것이 아니다.이 함수가 실행되려면 필요한 것들이