📚 JavaScript

유저가 웹페이지에 접속해서 클릭, 스크롤, 키보드 입력, 드래그 등을 사용할 수 있는데 이걸 이벤트라고 부름이벤트리스너는 이벤트가 일어나면 내부 코드를 실행해주는 기본 문법이다.이벤트 리스너를 쓰면 다양한 이벤트도 체크 가능!예시1) 셀럭터찾은요소에 마우스를 갖다대면

이번엔 부트스트랩을 사용해서 버튼 누르면 등장하는 서브메뉴를 만들어볼거임Bootstrap css 파일을 설치해놓으면 버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있다.구글에 bootstrap검색해서 나오는 맨 처음 사이트에 들어가서 get started버튼 클릭우선

버튼 클릭 시 모달창 띄우고 추가로 애니메이션을 적용해보기 ## 모달창 띄우기 --- ### 1. class 만들기 버튼 누를 때 display:block을 줘도 되지만 나중을 위해 class 부착식으로 만들어보겠음. ```css .black-bg { (생략)

setTimeout()은 n초 후에 코드를 실행해줍니다. ▲ 이렇게 쓰면 1초 후에 콘솔창에 '안녕'이 뜹니다.시간은 ms단위로 적으면 됨.(1ms는 1000분의 1초)setIntervel()은 n초 마다 코드를 실행해줍니다.▲ 이렇게 쓰면 1초 마다 콘솔창에 '안녕'

위 코드는 제대로 작동하지 않는데 그 이유를 알아보도록 하겠습니다. 컴퓨터는 위에서부터 한줄한줄 코드를 해석합니다. for반복문을 발견해서 안에 있는 코드를 반복실행하려고 합니다. 이벤트리스너를 만납니다. 이벤트리스너 안의 코드는 바로 실행이 되지 않습니다. (사용자가

여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형입니다. 대괄호를 열고 자료를 콤마로 구분하여 넣어주면 됩니다.array 자료를 수정하고 싶으면 등호를 이용하면 됩니다. 자료 추가도 됩니다.array 자료에서 데이터를 뽑을 땐 대괄호를 뒤에 붙여 인덱싱해주면

.creadteElement()<div>안에 <p>태그를 생성해보았습니다. document.createElement()를 쓰면 html자료를 하나 생성해줍니다. 그걸 맘대로 조작한 다음 appendChild()를 써서 원하는 곳에 넣으면 html이 생성됩니다

대부분의 언어에서 'this'는 클래스가 인스턴스화 한 현재 객체에 대한 참조인 반면, 자바스크립트에서 'this'는 일반적으로 함수를 호출하는 객체에 대한 참조입니다.이번 글에서는 자바스크립트의 this에 대해서 많이 사용되는 케이스의 예제 위주로 다루어 보겠습니다.

화살표 함수(Arrow Function)은 ES6에 추가된 것으로, 기존 일반 함수 표현보다 짧은 구문으로 가독성 높은 코드를 작성할 수 있게 도와줍니다. \[일반 함수 선언]기존 일반 함수(regular function) 선언은 다음과 같이 'function'을 이용

이번 글에서는 Array Method 중 비슷한 성격의 every와 some에 대해서 살펴보도록 하겠습니다. 이 두가지 Array Method는 배열의 요소들이 주어진 조건을 만족하는지 여부에 대한 검증을 수행합니다.

Ajax는 서버와 데이터를 주고받는 방법 중 하나인데 서버가 뭔지 모르겸 아무리 ajax문법을 외워봤자 응용을 못하기 대문에 서버가 뭔지 정리부터 하겠습니다. 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램입니다. 서버에 데이터를 요청할 때는 1\. 어떤 데

배열을 loop돌면서 무언가 하고싶을때 for loop문보다 간편하게 쓸 수 있는 함수들을 정리해보려고 합니다. : 하나씩 돌면서 무언가 하기: 조건에 맞는것만 새로운 배열로: 조건에 맞는것만 배열로 만들어, 한개씩 돌면서 무언가 처리하기: 한개씩 돌면서 연산한 결과를

이번에는 sort함수 사용 방법에 대해 알아보겠습니다. sort함수로 내림차순 하는 방법을 먼저 알아보도록 하겠습니다.오름차순 정렬되어 있는 arr을 '다', '나', '가'로 내림차순정렬해보겠습니다.sort함수의 작동원리는a, b는 arary안에 있는 자료들임. re

DOM Document Object Model 자바스크립트는 HTML조작에 특화된 언어이지만 HTML과 자바스크립트는 다른 언어입니다. 그래서 자바스크립트에선 ``이런 html을 직접 해석하고 조작할 수 없습니다. 자바스크립트는 를 못알아듣는데 어떻게 html태

개발자도구 -> application탭 여기에 정보를 저장할 수 있음 local sesseon : 키 verlue형탤 ㅗ index L 구조화된 대용량 데이터 저저아 cookie: 보통 로그인 정보 저장 cache html, css, js 파일 저장한느 곳 loca

오늘은 마우스를 떼었을 때 일정거리 이상 이동했으면 2번 사진을 보여주고, 아니면 1번 사진을 보여주는 ui를 만들어 보자!ㅜ

배열 특정 값을 찾아 리턴하는 함수find()함수는 특정 값을 찾는 조건을 callback 함수를 통해 전달하며, 조건에 맞는 값 중 첫번째 값을 리턴함.만약 조건에 만족하는 값이 없으면 undefincd리턴callback(element, index, array) 함수

배열에서 값을 찾는 조건을 callback 함수로 전달하고,배열에서 조건에 맞는 값의 '첫번째 index'를 리턴하는 함수callback(element, index, array) 함수조건을 비교할 callback함수이고, 3개의 파라미터가 전달됨.callback함수에서

layout,paint를 모두 재실행positionwidthheighttoprightbottommarginpaddingborderborder-widthdisplayfloatfont-sizeline-heightoverflowpaint를 재실행backgroundbackgr

구 조 분 해 할 당 완.전.정.복

\*\*/대/\*\* :  '대'를 '하나'만 찾는다. => 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!/대/g: '대'를 '모두' 찾는다=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 C

ES6 신문법 ) let, const와 기존에 있던 var키워드까지 같이 비교하면서 호이스팅에 대해 알아보자! var, let, const 간단정리 + 호이스팅 개념 + TDZ의 자세한 설명까지! #js #var,let,const차이 #호이스팅 #TDZ

https://m.blog.naver.com/magnking/220972680805

return VS return false VS void VS href="#", "#none", "#javascript:;", "javascript:void(0);"

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B

https://karismamun.tistory.com/66

https://mond.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EB%8A%94-%EB%A6%AC%EB%88%85%EC%8A%A4-%EA%B8%B0%EB%B0%98%EC%9D%B4%EB%

https://ingnoh.tistory.com/48

https://ko.javascript.info/size-and-scroll-window

https://become-a-developer.tistory.com/entry/jquery-inputbox-text-%EB%B3%80%EA%B2%BD-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EA%B0%90%EC%A7%80

http://greenteafrog.tistory.com/73

https://pa-pico.tistory.com/20

https://www.zerocho.com/category/JavaScript/post/5b2b45cf1350f9001b662ba6

https://ko.reactjs.org/docs/composition-vs-inheritance.html

https://lynmp.com/ko/article/ncbf5b1ad3af

https://sanghaklee.tistory.com/3

https://sozerodev.tistory.com/190

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Make-useSate-hook/#\_1-%E1%84%8B%E1%85%B4%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8B%E1%85

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Make-useSate-hook/#\_1-%E1%84%8B%E1%85%B4%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8B%E1%85

https://hoonzi-text.tistory.com/136https://findawayer.tistory.com/entry/IIE%EC%9D%98-%EC%9D%98%EB%AF%B8%EB%8A%94

https://hoonzi-text.tistory.com/136https://findawayer.tistory.com/entry/IIE%EC%9D%98-%EC%9D%98%EB%AF%B8%EB%8A%94

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

https://deonggi.tistory.com/57 droppedFiles(allFiles: File\[]): void { this.allFiles = \[]; const filesAmount = allFiles.length; }

https://deonggi.tistory.com/57 droppedFiles(allFiles: File\[]): void { this.allFiles = \[]; const filesAmount = allFiles.length; }

https://academind.com/tutorials/reference-vs-primitive-values

const emailReg = 'a-z0-9+@a-z+.a-z{2,3}';emailReg.test(val);

&& 연산자는 논리 AND 연산자로, 왼쪽 피연산자와 오른쪽 피연산자를 평가하고, 두 값 모두가 true일 때만 오른쪽 피연산자를 반환함. 예를 들어, A && B에서 A가 true이면 B를 반환하고, 그렇지 않으면 A를 반환함.반면에 삼항조건연산자는 조건을 평가하고,

https://ko.javascript.info/proxy

this바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정이 되는데요, 주의할 점은 동일한 함수도 다양한 방식으로 호출될 수 있음에 따라 this가 변하게 된다는 점입니다. 일반 함수 호출메서드 호출생성자 함수 호출Function.protot

가장 큰 차이는 순회한 값을 반환하는지 여부은듯이런 코드가 있을 때 순회를 돌고 난 값을 반환하는건 mapforEachArr에는 undefined가 들어있다.

여러해결 방법이 있음요롷게 해도 되고 문자를 안쓰는 방법도 있음젤 쉬운 방법은 이거인듯\+를 쓰면 js는 string으로 인식해서 텍스트끼리 붙여버림 그래서 object Object이런식으로 나오는거,로 붙이면 문자로 인식하지 않고 object로 인식해서 콘솔에 obj