개발 잘하기

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)onkeydown, textContent, value HTML 요소들의 클래스명을 이용하여 각 클래스에 해당하는 요소들을 선택하고, 각각 header, input이라고 부르는 변수에 저장합니다. const header = document.querySelector(".header"); const input = document.querySelector(".input"); 키보드의 키를 누르는 이벤트(keydown)에 대한 정보를 구독하고, 해당 이벤트가 발생했을때 changeHeader라는 함수를 호출한다. changeHeader 함수가 호출되면, .header 요소의 텍스트 내용을 사용자가 입력한 입력칸의 내용으로 대체한다. input.onkeydown = function changeHeader () ..

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

#배열 두 배 만들기 문제 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. 접근 (1)Array.map() 또는 Array.reduce() 사용함. 참고로 아래 forEach()의 경우 콜백함수를 차례로 실행한 후 따로 반환한다는 내용이 없음. 이에 변수에 할당해 출력시 undefined 됨. 즉,실행문에 console.log 만 있지 return이 없음. ＃관련 학습 1)Array.map() for문에 push() 및 forEach()와 push() 활용한 방법도 있다. https://humahumahuma.tistory.com/75 자바스크립트 map으로 곱하기 값 array 만들기 cons..

#분수의 덧셈 문제 첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 접근 (1)유클리드 호제법(while문 및 재귀함수)을 통해 최대공약수를 구한 후, (2) 최대공약수로 약분한 분자와 분모를 배열 데이터로 출력함. 참고로 기약 분수는 분자 분모 최대공약수가 1인 경우를 말함. ＃관련 학습 1-1)while문 - while(조건식){반복할 코드} while문은 '조건식'의 결과가 true 인경우 코드 블록을 반복적으로 수행합니다. 추가로 초기화구문 및 종료조건(..