Atelier BiCute

JavaScript의 배열에 관련된 메서드들입니다. 이들 메서드는 배열의 원소를 추가, 제거, 변경, 정렬, 조회 등의 작업을 수행할 수 있습니다. 배열에 요소를 추가 push() 배열의 끝에 요소를 추가합니다 const array = [1, 2, 3]; array.push(4); // 결과 [1, 2, 3, 4] unshift() 배열의 시작 부분에 요소를 추가합니다 const array = [1, 2, 3]; array.unshift(0); // 결과 [0, 1, 2, 3, 4] *push()와 unshift()는 배열의 길이를 반환합니다. const array = [1, 2, 3]; // Push const newLength = array.push(4); // 현재의 배열 = [1, 2, 3, 4]..

댓글, 게시물 작성 또는 다양한 인풋 창에서 해당 내용이 비어있는지 또는 스페이스만 입력해서 내용이 없는 공백만 입력되어있는 것들을 확인하고 제거하는 방법입니다. # 내가 원하는 결과 대충 아래와 같은 위지윅(WYSWYG)을 이용해 게시물을 작성한다고 했을때 제목과 내용이 비어있는 경우엔 글을 저장할 수 없게 하고 싶다. 1단계. JavaScript 제목의 문자열이 title에 저장된다고 가정했을 경우 입력된 내용이 있다면 문자열의 길이(length)가 0보다 길어지기 때문에 다음과 같은 방법으로 해결이 가능하다. if(!(this.title.length > 0)) { // title의 길이가 0보다 크지 않다면! alert(‘제목을 입력해 주세요’); return } sample. // 이런식으로 제목..

#1 console.log에 스타일 적용하는 방법 스타일을 주고싶은 위치에 %c라는 코드를 입력해줍니다. 그런 다음문자 끝에 쉼표(,)를 찍어주며 스타일을 지정해주면 되는데 스타일을 주고싶은 위치의 개수(%c)만큼 ,를 이용해 순서대로 각각의 스타일을 지정해주면 됩니다. 사용 방식은 일반 CSS의 코드 작성과 동일합니다. #2 console.log에 스타일 해제하는 방법 스타일을 해제하거나 공백이 필요하다면 ""로 스타일을 제거해 주는것도 방법입니다. #3 console.log에 복수의 스타일 적용하는 방법 스타일은 당연히 문자에 관한것 뿐만 아니라 패딩, 백그라운드 등 다양한 것들이 가능합니다. 또한 하나의 스타일 뿐만이 아니라 복수의 스타일도 줄 수 있는데, 이것 또한 CSS를 작성하듯이 하나의 스타..

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 CSS로 해당 속성을 미리 지정한 후, 클래스를 추가 삭제하는 방식으로 제어하는 것입니다. 아래는 클래스를 제어와 관계있는 classList 속성과 className에 관한 예시입니다.. - Setting - BUTTON bt1과 bt2라는 2개의 클래스를 가진 버튼을 생성. // JavaSciprt let $button = document.querySelector('button') $button.addEventListener('click', () => { // $button.classList.add("active", "add"); // $button.classList.remove("bt2"); // $button.classList.toggle("acti..

막상 사용해보면 비슷한데, 조금씩 용도가 다른 innerHTML / innerText / textContent 의 차이점입니다. - Setting - // HTML 헬로 월드 헬로 자바스크립트 숨겨놓은 글 // JavaScript let $textbox = document.getElementById('textbox'); innerHTML console.log($textbox.innerHTML); 해당 요소의 HTML값을 그대로 가져옵니다. 출력 결과 " 헬로 월드 헬로 자바스크립트 숨겨놓은 글 " ※ console.log나 alert 등으로 출력을 할경우 내부 태그도 함께 보이지만, 당연하게도 document.write로 출력할 경우엔 태그 속성이 적용된 [헬로 월드 헬로 자바스크립트]로 출력됩니다. i..

#1 map의 기본 동작 방식 [1,2,3].map(function(){ console.log('확인') }) (1) map은 array 자료의 개수만큼 함수안의 코드를 반복하여 실행해 줍니다. (2) 작성은 '배열.map.콜백함수' 이후 실행할 내용순으로 적습니다. *위와 같이 작성할 경우 배열[1,2,3]의 수만큼(3) console.log를 실행해 줍니다. 결과 #2 map의 첫번째 파라미터 [1,2,3].map(function(a){ console.log(a) }) (2) 함수안에 있는 파라미터 a는 배열에 있는 각각의 자료입니다. #3 map의 두번째 파라미터 [1,2,3].map(function(a, i){ console.log("자료" + a) console.log("인덱스" + i) }) ..

#1 일반 함수에서 사용될 경우 function 디스(){ console.log(this); } 디스(); this = Window 단, strict mode라면 undefined 'use strict' function 디스(){ console.log(this); } 디스(); #2 오브젝트 내에서 함수(Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: function(){ console.log(this) } } 오브젝트.디스(); this = 속해있는 object #3 오브젝트 내에서 화살표 함수(Arrow Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: () => { console.log(this) } } 오브젝트.디스(); this ..

#1 자료형(Data Type) 종류 설명 문자열 (string) 시작과 끝이 작은 따옴표('')나 큰 따옴표("")로 감싸진 값 숫자 (number) 따옴표를 사용하지 않은 숫자 논리형 (boolean) 참(true)과 거짓(false)을 나타냄 배열 (array) 하나의 변수에 여러 개의 값을 저장 객체 (object) 함수와 속성들이 함게 포함된 경우 undefined 데이터의 유형이 지정되지 않은 상태 null 데이터의 값이 유효하지 않은 상태 JavaScript에서의 False ① false, ② ''(빈 문자열), ③ 0, ④ NaN, ⑤ undefined, ⑥ null, ⑦ document.all(이건 거의 사용하지 않으니 몰라도 됨) #2 연산자 종류 설명 산술 연산자 +, -, *, /,..