javascript 지식
1.무작위 숫자 만들기
0 <= x < 1 범위의 랜덤한 숫자를 만든다( ) 안의 숫자를 올림( ) 안의 숫자를 내림( ) 안의 숫자를 반올림\-> 0 <= x < 1 범위의 숫자\-> 1 <= x < 10 범위의 숫자Math.random()은 암호학적으로 완
2.1~9 숫자 랜덤으로 4개 뽑기
1~9 숫자중 1개를 뽑는 것은 쉬운데 N개를 뽑는 것은 막상 생각을 해도 잘 안떠올랐다원래 나였다면 answer에 하나씩 push하면서 includes로 매 번 체크하면서 중복이 안되는 것이 나올 때까지 돌렸을 것 같다.
3.event.preventDefault()
form태그는 submit 이벤트가 발생할 때 기본으로 브라우저를 새로고침하는데, event.preventDefault를 사용하면 이를 막을 수 있다.
4.input 태그를 form 태그로 감싸는 이유
입력창이 있으면 form 태그로 감싸서 submit 이벤트를 사용하는 것이 좋은데, 그래야 버튼을 클릭하지 않고도 Enter 버튼을 눌러 값을 제출할 수 있다!
5.createTextNode, createElement
innerHTML ** 홈런 홈런 createTextNode & appendChild > append를 사용하면 textContent로 불러와서 + 로 더해주지 않아도 추가를 좀 더 편하게 할 수 있다 createElement
6.random으로 숫자 n개 뽑기
렛츠기릿 자바스크립트 강의에서 배운 2 가지의 random으로 숫자 뽑기 방식을 정리하였습니다.1~45 중 random으로 숫자를 1개씩 7번 뽑기※ splice는 배열을 반환함에 유의하자!1~45 숫자를 random으로 섞은 후 앞에서 7개를 빼내기
7.배열 내장 메소드 - 원본을 바꾸는가?
splicesortslicemapslice()를 통해 깊은 복사를 통하여 사용!예) arr.slice().sort((a, b) => a - b);
8.setTimeOut 인자 주의할 점
setTimeOut(함수, 시간)예제) 다음 func 함수를 3.5초 후 실행되게 해보세요항상 setTimeOut(() => {}, 시간) 처럼 화살표 함수 형태로 사용하다보면 이렇게 작성하기가 쉽다.하지만 첫 번째 인자는 함수 자리임을 생각하면 좀 더 간단하게 코드를
9.var과 let의 차이, 그리고 closure
함수 스코프 : 함수를 경계로 접근 여부가 달라지는 것<실행 결과>: 함수 바깥으로 빠져나오면 접근이 되지 않는다.<실행 결과>: 함수가 아니므로, 접근이 가능하다.당연히 i = 4라고 예상되겠지만, i = 4일 때 i++가 마지막으로 실행되므로 i = 5가
10.javascript로 HTML 태그 생성하고 클래스 만들어주기
<생성된 HTML 코드><생성된 HTML 코드>
11.closure에 대하여 araboza
다음 글은 생활코딩 - 클로저 글을 바탕으로 작성되었습니다.closure는 내부함수가 외부함수의 context에 접근할 수 있는 것을 가리킨다.다음의 코드를 살펴보자.'내부함수는 외부함수의 지역변수에 접근할 수 있다'는 것이 무엇인지 와닿을 것이다.<실행 결과>외
12.이미지 스프라이트(Image Sprite)
ZeroCho님의 렛츠기릿 자바스크립트 책을 공부하며 작성한 글입니다.이미지 스프라이트란 서버에 이미지를 요청하는 횟수를 줄이는 방식을 말한다.다음의 사진을 가위 / 바위 / 보 로 잘라서 이미지를 사용하면 한 번만 그림을 요청하면 된다.다음과 같이 객체로 묶어서 응용
13.setTimeOut과 setInterval (가위바위보 예제)
setTimeOut은 hello()내의 console.log의 실행이 끝난 후 실행되므로, 이전의 코드가 늦게 끝나면 1000ms가 맞춰지지 않을 수도 있다(1초 이상이 될 수도 있다)setInterval의 경우 최대한 1000ms을 맞추고자 노력한다.
14.if 안의 || 코드 좀 더 간결하게 쓰기
이렇게 긴 if문안의 조건을처럼 배열과 includes()메소드를 이용하여 간결하게 작성할 수 있다.
15.특정 tag의 class C.R.U.D
: 해당 클래스가 들어있다면 true, 들어 있지 않다면 false를 반환한다.예시 코드
16.redcuce는 단순 누적합을 위한 것이 아니다!
<실행 결과><실행 결과>
17.Date 객체 정보 가져오기
Date객체 메소드 Date.getFullYear() Date.getMonth() Date.getDate() Date.getHours() Date.getMinutes() Date.getSeconds() Date.getMilliseconds() Date.toLocaleString() Date.toLocaleDateString()
18.구조분해 할당 (destructuring assignment)
객체의 속성과 그 속성을 담는 변수명이 동일할 때위 코드는 아래의 코드와 동일하다구조분해 할당을 이용하여 아래와 같이 표현할 수 있다.위 코드는 아래의 코드와 동일하다.위의 코드를 구조분해 할당을 사용하여 한 줄로 표현하면 다음과 같다.a, b, c, d, e 모두를
19.이벤트 버블링 (Event Bubbling)
이벤트 버블링 이벤트 버블링이란? > HTML에서 event가 발생할 때, 부모 태그에도 순차적으로 동일한 이벤트가 발생하는 것을 말한다. (수면으로 올라가는 것처럼 이벤트가 부모에게도 순차적으로 퍼져 나가는 현상) 예시 > table태그에만 EventListe
20.EventCapture
Event Bubbling과는 반대로 부모의 event를 자식에게 전달해주는 것을 말한다.예) 팝업창이 뜬 경우 팝업창 외부의 공간을 클릭하더라도 팝업창이 닫히게끔 하는 기능 (아직 실제 사용은 하지 않았지만 언젠가 사용할 경우를 대비해 글을 작성함)
21.table의 index 쉽게 찾기
ZeroCho - 렛츠기릿 자바스크립트 틱택토 강의의 예제를 공부하며 작성한 내용입니다.한 칸(td)을 클릭했을 때에 원래는 다음과 같이 코드를 작성해 주었다.하지만 table은 자체적으로 index를 찾는 기능을 갖고있기 때문에 코드를 다음처럼 간단하게 작성할 수 있
22.parentNode, children, 그리고 유사 배열 객체(array-like object)
table의 index 쉽게 찾기 글에서 다룬 내용이다.event.target.parentNode처럼 사용하여 부모 태그를 선택할 수 있다.event.target.children처럼 사용하여 자식 태그들을 가져올 수 있다.유사 배열 객체란 배열처럼 생긴 객체를 말한다.
23.flat, every, some
배열의 차원을 낮추는 메서드이다. n차원 배열을 n-1차원 배열로 낮춘다.반복문의 일종으로, 요소를 순회하면서 조건 함수의 반환값이 모두 true이면 true를 반환하는 메서드. 조건 함수의 반환값이 하나라도 false이면 false를 반환하게 된다.조건에 만족하지 않
24.false가 되는 6가지
그냥 외워버리자!빈 문자열( '' )false0nullundefinedNaNdocument.all
25.filter 메서드
입력된 함수의 조건에 맞는 원소들을 찾아 반환해 준다.렛츠기릿 자바스크립트 틱택토 예제에서 자동으로 컴퓨터가 X를 입력해주는 코드입니다.filter 메서드는 1차원 배열에서만 사용이 가능하므로 flat()메서드로 차수를 내려준다.
26.parse, stringify, 그리고 깊은 복사
문자열 -> 객체 로 만드는 메서드객체 -> 문자열 로 만드는 메서드두 과정을 떼서 분해해 보면,
27.참조, 얕은 복사, 깊은 복사
얕은 복사는 겉의 껍데기만 복사한다!문자열, 숫자, boolean, null 등은 원시값이므로 참조의 개념이 사용되지 않고,a, b는 각각 배열, 객체 이므로 참조가 된다.내부의 객체도 참조를 끊어주고 싶을 때 깊은 복사를 사용한다.
28.Map 자료형
new Map()map.set(key, value) : key를 이용해 value map.get(key) : key에 해당하는 value 반환 (없으면 undefined)map.set(key, value) : key를 이용해 value 변경map.delete(
29.인프런 - 자바스크립트 알고리즘 문제풀이 문제 정리
강의에서 공부했던 문제들을 정리해보며 꼭 다시 풀 문제들을 선별하는 과정을 가지려고 한다.★ : 조금이라도 생소한 것이 있었던 문제★★ : 풀 수는 있었으나 새로운 접근을 배워야 하는 문제★★★ : 꼭 여러번 풀어서 내 것으로 만들어야 할 문제그냥 최소값을 구하는 간단
30.함수 메서드 삼총사 bind, call, apply 그리고 arguments
ZeroCho 블로그 - '함수의 메소드와 arguments' 글을 바탕으로 작성한 글입니다.원래 함수는 선언을 한 후 호출을 해야 실행이 된다.여기서 호출하는 방법에는 3가지가 있다.1\. () 붙이기2\. call3\. apply여기서 call과 apply가 공통적
31.this에 대하여...
ZeroCho 블로그의 '자바스크립트의 this는 무엇인가?' 글을 참조하여 작성하였습니다.크롬의 콘솔창에서 this;를 입력하면 Window 객체를 가리키게 된다.기본적으로 Window 객체를 가리키는 것을 알 수 있다.객체 메서드 안의 this는 해당 객체를 가리킨
32.배열의 중복 요소 제거하기
배열의 중복 요소 제거하기
33.<script> 태그의 defer와 async 속성
참조 블로그일반적으로 <script> 태그는 html의 <head> 태그 안에 작성한다.<script>를 <head>에 작성하면 css 등 외부로부터 불러오는 리소스 파일을 한 군데에서 관리할 수 있는 장점이 있다.하지만 이 방식은 브라우저가 HT
34.객체 만들기 - 클래스(class), 공장 함수(factory function)
객체 만들기 공장 함수 (factory function) 공장 함수? > 클래스는 2015년에 Javascript에 추가된 문법으로, 이전에는 함수로 객체를 만들었다. 생성자(constructor) 함수 > new를 붙여 호출하는 함수를 생성자 함수 라고 한다
35.arguments 객체
arguments 객체는 함수에 전달된 인수에 해당하는 유사 배열 객체 이다. (즉, forEach, map 등의 배열 메서드들을 사용할 수 없다/)
36.화살표 함수는 뭐가 다른가?
Zerocho 님의 ES2015(ES6) Function(함수) 글을 보고 작성한 글입니다.this에 대하여...(https://velog.io/@frenchkebab/this%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACforEach함수