FE/Javascript

[HTML][JS] script 태그는 어디에 위치해야 할까?

태그는 어디에 위치해야 할까? 브라우저의 구성 요소 렌더링 엔진은 HTML, CSS를 파싱한 결과물로 페이지를 화면에 표시한다. (대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko, 크롬, 오페라, edge의 Blink(webkit에서 파생)가 있다.) 자바스크립트는 자바스크립트 해석기에서 해석한다. 브라우저의 동작 방식 HTML을 읽기 시작 HTML을 파싱 DOM 트리 생성 Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성 Display에 표시 script를 html에 위치시키는 방법에는 script를 head 태그 안에 위치시키는 경우, body 태그의 맨 아래에 위치시키는 경우, async나 defer를 사용하는 경우가 있다...

[JS] Array.from을 통한 배열 초기화

배열의 각 인덱스에 1~10까지의 값을 초기화해준다고 했을 때 보통은 아래와 같은 방법을 생각했었다. let arr1=[]; for(let i=1;i x + x); // [2, 4, 6] //v는 할당할 value, i는 인덱스 Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] Array.from({length: 5}, (v, i) => i+1); // [1, 2, 3, 4, 5] Array.from을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, //배열 () => Array(10).fill(0) //각 배열에 적용할 함수 ); // 0으로 초기화된 20*10 짜리 2차원 배열을 리턴

[JS] splice()란? - 배열 요소 추가/삭제/교체

JS의 splice() 메서드에 대해서 정리해보려 한다. Array.prototype.splice() splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가해서 배열의 내용을 변경한다. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start: 배열의 변경을 시작할 인덱스. - 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다. 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정된다. deleteCount (Optional): 배열에서 제거할 요소의 수. - deleteCount를 생략하거나 값이 array.length - start 보다 크면 s..

[JS] substr(), substring(), slice()란? + 차이점

프로그래머스에서 자바스크립트 코딩테스트 문제를 풀고 다른 사람의 풀이를 보는데 어떤 풀이 밑에 이런 댓글이 달려있었다.(!!) 평소에 substr과 substring, slice를 구분하지 않고 썼었는데 무슨 차이가 있는건지, substr을 권장하지 않는 이유에 대해서도 더 알아보려 한다. 1. substr() str.substr(start, length) substr 함수는 특정 위치에서 시작해서 특정 문자 수 만큼의 문자들을 반환한다. 파라미터로 입력받은 start 인덱스부터 length 길이만큼 string을 잘라내어 반환한다. 첫 번째 글자의 인덱스는 0부터 시작한다. start가 양수일 때 문자열 전체 길이보다 크거나 같을 경우: 빈 문자열 반환 start가 음수일 때 문자열 끝에서 start ..

[JS] map 함수

공부는 하면 할수록 모르는 게 많은 것 같다.. 오늘은 자바스크립트의 map 함수에 대해서 공부한 내용을 정리해보려 한다. - map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수. 다음의 세가지 인수를 가진다. currentValue: 처리할 현재 요소 index(Optional): 처리할 현재 요소의 인덱스 array(Optional): map()을 호출한 배열 thisArg(Optional): Optionalcallback을 실행할 때 this로 사용되는 값 map은 callback..

[JS] 배열 정렬 sort() 함수

Javascript에는 배열의 요소들을 정렬해주는 sort() 함수가 존재한다. 이의 사용 방법을 정리해보려 한다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체, sortFunction은 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하고 arrayobj.sort()로만 쓰면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우: - 값 두 인수가 같을 경우: 0 첫 번째 인수가 두 번째 인수보다 클 경우: + 값 1. 문자 정렬 var fruit = ['orange', 'apple', 'banana']; fruit.sort(); // ..

자바스크립트로 난수 맞추는 게임 만들기

자바스크립트로 간단하게 컴퓨터가 생성시킨 난수를 사용자가 맞추는 게임을 만들어 보았다. 구현하면서 몰랐다가 새로 알게 된 내용들을 아래에 정리해보려 한다. (전체 코드는 맨 아래에!) 1. Range 바뀐 값을 실시간으로 보여주기 2. input안에 있는 값이 text인지 확인하기 3. 난수 발생시키기 4. 자식 노드 모두 없애기 1. Range 바뀐 값을 실시간으로 보여주기 range 값이 변경될 때마다 실시간으로 보여주는 것을 하고 싶었는데 addEventListener에서 값을 "change"로 하면 바뀌고 나서의 값만 떠서 그 방법을 찾아보았다. function init() { numberLabel.innerHTML = `Generate a number between 0 and ${numberRa..