개발 잘하기

문자열과 배열 데이터의 경우 '+' 연산자를 활용해 데이터를 합칠 수 있음. 그 외 '*'와 같은 산술 연산자는 적용되지 않음. 다만 숫자일 경우 형 변환되어 산술된다. 파이썬은 '*' 연산자를 통해 문자열과 배열 데이터 반복이 가능하다. console.log('20'+'10'); //'2010' (string) console.log('20'-'10'); // 10 (number) console.log('20'*'10'); // 200 (number) console.log('20'/'10'); // 2 (number) console.log('20'%'10'); // 0 (number)

1)arr.concat() 함수 인자로 받은 배열 데이터와 객체 배열 데이터를 합쳐서 새로운 배열 데이터를 반환함. const arr = [1, 2, 3]; const newArr = arr.concat('a', ['b', 'c'], 'abc'); document.writeln(newArr); // [1, 2, 3, 'a', 'b','c', 'abc'] document.writeln(newArr.length); // 7 2)arr1.push(...arr2) spread operator를 사용하면 push() 함수를 이용해서도 여러 개의 배열을 하나로 합칠 수 있습니다. (1)arr1.push() push() 함수는 배열 데이터의 마지막 item으로 추가하는 것으로, 파라미터로 전달된 배열은 연결이 되지 ..

1)indexOf(), lasatIndexOf() arr.indexOf(searchElement[, fromIndex]) arr.lastIndexOf(searchElement[, fromIndex]) (1)indexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는'첫번째' element의 index를 리턴합니다. (2)lastIndexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는 '마지막' element의 index 를 리턴합니다. (3)두 함수 모두 찾으려는 값이 배열에 없으면 -1을 리턴합니다. (4)예시 const arr = [1, 2]; let elementExistYn = true; if(arr.indexOf(3)..

반복문을 실행하다가 종료하는 방법으로 아래 세 가지가 있으며 각각 종료되는 범위가 다르다. 1)continue 반복문 실행 중 특정 i에 대한 실행문을 종료한다. 반복문 내 그 외 i에 대해선 명령문이 반복적으로 실행된다. const forContinue = () => { let sum = 0; for (let i = 0; i { let sum = 0; for (let i = 0; i 100) { break; } sum += i; } console.log(sum); // 105 }; forBreak(); 위 코드는 0부터 100까지의 수를 모두 더하는 함수이다. 그러나 sum이 100보다 커질 때 break문을 만나 이후 반복문은 종료되고 console.log(sum) 명령문으로 넘어가는 걸 알 수 있음..

1)문자열에 표시하려는 따옴표와 다른 따옴표로 문자열 표현하기 let str = "'안녕하세요?'"; 2)escape 문자('\') 사용하기 문자열에서 따옴표를 표현하기 위해서, 따옴표 앞에 '\' 문자를 붙여준다. let str1 = "\"홍길동님\" 안녕하세요?"; let str2 = '\'홍길동님\' 안녕하세요?'; 3)템플릿 문자열[back-tick(`)]로 감싸기 let str2 = `'홍길동님' 안녕하세요?`; let str3 = `'홍길동'님 "안녕하세요?"`; 4)참고 URL

1)개요 연산자에는 크게 산술, 문자열, 증감, 비교, 대입, 상함, 논리 연산자 등이 있음 2)산술 연산자 (+,-,*,/%) -,*,/의 경우 문자열로 표현된 숫자도 계산해준다. +는 안 되는데 아래 이유가 있음. "3" * "2" == 6 3)문자열 연산자('+' 심화) (1)+ 연산자는 숫자 외에 문자열과 다른 데이터도 연결해준다. (2)문자열이 아닌 데이터의 경우 연결되는 과정에서 문자열 형태가 된다. var string1 = 'hi' + 9; // 'hi9' var string2 = 3 + 4 + 'wow'; // '7wow' 재밌는 사실은 string2의 경우 '7wow'가 된다. 3과 4 먼저 연산하기 때문에 7이 되었다가 문자열이 만나 문자열 형태가 되었다. 컴퓨터는 순서대로 연산한다. ..

1)문제 This Month - Starter Kit 📌 현재 날짜를 기준으로, 이번 달의 일수가 1일부터 표시되어야 합니다. book.vanillacoding.co 2)결과 3)풀이 더보기 (1)HTML 일 월 화 수 목 금 토 (2)CSS table { //크기 설정 width:500px; height:500px; //본인 가로세로 가운데 정렬 position:absolute; top:0; right:0; left:0; bottom:0; margin:auto ; //자식요소 가로세로 가운데 정렬 display:flex; align-items:center; justify-content:center; } td { width:50px; height:50px; //글자 가운데정렬 text-align:cent..

1)FirstDay (1)문제 First Day - Starter Kit 📌 1일을 기준으로 하는 요일의, 이후 날짜가 보여져야 합니다. book.vanillacoding.co (2)풀이 오늘 자 요일 찾은 후 해당 요일을 시작으로 숫자 나열하였다. 특정 요일을 찾는 데 부모요소를 객체로 querySelector() 사용하였음. 숫자 나열시 데이터 type을 숫자로 하기 위해 innerHTML 속성을 사용하였음. //오늘 자 요일 찾기 const date = new Date('2023-03-01'); let firstDay = date.getDay(); console.log(firstDay); let tbodyEle = document.querySelector('tbody') let thEles = tb..

1)firstChild와 firstElementChild - firstElementChild가 유용함 (1)개요 모두 선택된 객체의 첫 번째 자식 요소를 반환한다. (2)비교 firstChild는 first childe node를 element node 또는 text node, comment node로 반환한다. firstElementChild는 first child node를 element node로만 반환을 한다 (text와 comment nodes를 무시). 따라서 textContent에 접근하거나 style을 바꾼다든지 등등 HTML code에 반영을 위한 접근이 필요하다면 firstElementChild을 쓴다. The difference boils down to the difference be..

append() 관련 검색 중 제목에 담긴 메소드를 모두 활용한 코드 예시가 있어 보관 목적으로 가져왔다. HTML에 요소를 직접 생성하지 않고 JS로만 아래 사항을 구현했다. ①HTML 요소를 생성함. ②row class 요소 안의 자식 요소로 추가삽입함. ②innerHTML을 활용해 태그와 배열 item을 객체로 title 및 price property 활용함 ③배열 item을 객체로 순회할 수 있도록 forEach() 사용함. (1)HTML (2)JS let products = [ {id: 0, price: 70000, title: "꽃무늬 원피스"}, {id: 1, price: 50000, title: "데님 셔츠"}, {id: 2, price: 60000, title: "트러커 재킷"}, ]; ..

1) 요소 생성하기 - createElement() 인수로 "HTML 태그"를 입력한다. const hello = document.createElement( "h1" ) // 코드가 생성된다. 2) 부모자식관계로 요소 추가하기 - appendChild() 유용함 (1) append()와 appendChild() 둘 다 선택한 객체의 자식 요소로 인수를 (뒤에) 추가한다. document.body.appendChild(hello); // 태그 코드를 가진 hello라는 변수가 body태그 내부에 생성된다. 상기 메소드는 아래와 같은 차이가 존재한다. ①append() - 인수로 요소 외에 문자열(String)을 사용할 수도 있음. // DOMString 삽입 const parent = document.cr..

1) Date() 생성자 Date 객체를 생성한다. 인수로는 다양한 형태가 올 수 있다. 아래는 MDN에서 제공한 구문 예시다. new Date() new Date(value) new Date(dateString) new Date(year, monthIndex) new Date(year, monthIndex, day) new Date(year, monthIndex, day, hours) new Date(year, monthIndex, day, hours, minutes) new Date(year, monthIndex, day, hours, minutes, seconds) new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds) 실제 연..

1) 개요 Object 메소드에는 어떠한 타입을 문자열로 변환해주는 toString()가 있는데 Object가 JS에서 모든 타입의 조상이란 걸 생각하면 모든 타입은 어떤 형태로든 toString()이라는 메서드가 있다는 의미가 된다. 2) object의 toString() 실질적으로 object.prototype.toString()은 property 상관없이 [object Object] 문자열만 반환되므로 의미 없음. 그보다 문자열과 더하기 연산을 하면 문자열이 앞에 있든 뒤에 있든 문자열 아닌 타입이 문자열로 변환(toString())한다는 것에 의의가 있음. var o = new Object(); console.log('--> ' + o); // --> [object Object] 예를 들어, 위 ..

1-1) Javascript에서 기본 데이터 타입인 boolean, number, string 그리고 특별한 값인 null, undefined 빼고는 모든 것이 객체이다. 사용자가 정의한 함수도 객체이고, new란 연산자를 통해 생성된 것도 객체이다. 객체 안엔 proto 속성이 있다. 이 속성은 객체의 원형인 프로토타입 객체를 참조하는 역할을 한다. 1-2) 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만든다. 2) 프로토타입 객체에 getType()이라는 함수를 추가하면 멤버를 추가하기 전에 생성된 객체에서도 추가된 함수를 사용할 수 있다. 같은 프로토타입을 이용하여 생성된 joon과 jisoo 객체는 getType()을 사용할 수 있다. 3) 단, 프로..

1.Number 1) Number는 String, Array 등과 달리 관련 메소드를 실행하기 위해선 해당 숫자를 변수에 먼저 할당해야한다. //Number let a =123 console.log(a.valueOf()); // 123 console.log(1234.valueOf()); // 오류 발생함 //String console.log('갤럭시'.valueOf()); //'갤럭시' console.log('갤럭시'[1]) //'럭' //Array console.log([1,2,3].reverse()); //[3,2,1] 2-1) Number()를 함수로 사용하면 문자열이나 다른 값을 Number 타입으로 변환합니다. 즉, 다른 타입의 값은 Number() 함수를 사용하여 숫자로 바꿀 수 있습니다. 만..

1)Background Changer (1)문제 Background Changer - Starter Kit 0~9까지의 숫자와 A~F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드를 의미합니다. 예를 들면 000000, 3474FF 등 모두 유효한 Hex Code입니다. CSS에서는 Hex Code앞에 #를 붙여 색상값으로 이용할 book.vanillacoding.co (2)풀이 ①내 풀이 임의의 요소를 추출해서 새 배열의 item으로 push하였으며 해당 배열 데이터 내 item들을 문자열로 합쳤다. //DOM 객체 설정 let NumString = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'] let buttonElement = document.querySel..

1)DOM Introduction (1)MDN 정의 The Document Object Model (DOM) is a programming interface for HTML. An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. (2)Vanilla Coding 주어진 인터페이스를 이용하여 원하는대로 TV를 조종할 수 있습니다.마찬가지로 DOM이라는 인터페이스를 이용한다면, 자바스크립트를 이용하여 HTML 문서를 조종할 수 있습니다. 단, 자바스크립트의 DOM으로 HTML 문서에 접근하고 조종하게 되는 것이 HTML ..

1)자바스크립트의 객체 모델 DOM, BOM (1)브라우저 객체 모델 BOM (Browser Object Model) 브라우저에 대한 모든 내용을 담고있는 객체로서 브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하도록 제공되는 객체들이다. 대표적으로 아래와 같은 객체들이 존재한다. window 객체(최상위 객체) - location 객체 (url 주소와 관련) - navigator 객체 - history 객체 (앞뒤 페이지 이동정보를 기록) - screen 객체 - document 객체 - string, boolean, object, number, function, array 등의 자료형 ①window 객체 ⑴개요 window 객체는 모든 BOM 객체들의 조상, 즉 최상위 객체(=전역 객체 =글..

1)Function(함수) 소개 여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미함 2)함수 선언 방식 // Function Declaration (함수 선언식) function foo () { // function body.. } // Function Expression (함수 표현식) const foo = function () { // function body.. }; Function (함수)는 위와 같이 크게 두 가지 방법으로 선언하여 만들 수 있습니다. 각자 선호하는 방식으로 선언하여 사용해도 무관하지만, 단일 프로젝트 내에서 일관된 스타일을 유지하는 것은 중요하므로, 한 가지 방식을 선택하여 사용하셔야 합니다. 3)함수 선언과 실행의 구분 (1)함수 선언 function f..

#중앙값 구하기 문제 중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요. 접근 (1)배열 데이터를 오름차순으로 정렬한 후 (2) 중간 값을 indexing함. ＃관련 학습 1)Array.sort() 두 개의 element를 가진 compareFunction을 파라미터로 한다. 해당 함수의 return 값에 따라 Array 정렬이 바뀐다. [Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) 1. sort() 함수 ..