개발공부일지

목차 1. class 2. prototype 3. 객체지향 1. class - prototype을 고급화되게 만든것 ( prototype과는 다른 방식 ) , 객체지향 - class라는 명령어를 쓰고, 이름을 지어준 다음 객체에 들어갈 키를 정해준다. (사용할 것들을 선언해준것이다) - constructor() {} 생성자 함수를 만들고 그안에 매개변수에 this. 를 붙여준다. → this는 생성된 객체 자체를 뜻한다. class Fruits { color; weight; constructor(color, weight) { this.color = color; this.weight = weight; } getColor() { return this.color; } getWeight() { return th..

목차 1. 고차함수 2. 즉시실행함수, 익명함수 3. 재귀함수 4. setTimeout / setInterval 1. 고차함수 - 함수를 전달받거나 함수를 반환하는 함수 ( 콜백함수를 받는 함수 ) - forEach, array, findIndex, filter, sort ▼ 콜백함수를 받는 경우 function pleaseCallback(tempLog) { tempLog("고차함수"); } pleaseCallback(console.log); pleaseCallback((temp) => { console.log(temp); }); ▼ 함수 자체를 반환하는(리턴하는) 경우 - higherFunc()을 호출하면 그 리턴값이 console.log 라는 메서드라는것이다. → 그래서 higherFunc()("고차..

목차 1. event 2. addEventListener 3. forms 4. template-literal 5. mouseover, mouseout mouseenter, mouseleave 1. event onclick document.getElementById("btn").onclick = function (e) { console.log("클릭함"); console.log(e); }; - "btn"이란 이름의 아이디를 눌렀을때 console창에 "클릭함"이 뜨고 - (e) 이벤트의 PointerEvent를 보여준다. (pointerType, type 등등 정보를 알수있다) onload window.onload = function () { console.log("페이지 로딩완료"); }; - 웹페이지 ..

목차 1. 문자열관련 메서드 2. 숫자관련 메서드 3. new Date 4. 구조분해할당 5. spread 연산자 1. 문자열 관련 메서드 - indexOf : 문자열에서 몇번째 자리에 있는지 알려준다. - length : 문자열의 총 길이를 알려준다. - slice : 문자열에서 원하는 부분을 잘라서 보여준다.(원본을 훼손하지않는다) - split : 분해하다라는 뜻으로, 원하는 문자열을 잘라서 배열로 만들어준다. → ("") : 문자열 전부 하나씩 다 분해해서 배열로 만들어준다. → (" ") : 문자열을 전부 하나의 배열로 만들어준다. → 띄어쓰기가 있다면 띄어쓰기 기준으로 나눠져서 배열이 만들어진다. - replace : 특정문자를 바꿔준다. - toUpperCase : 문자열을 대문자로 바꿔준다..

function Fruit(name, sugar) { this.name = name; this.sugar = sugar; } const fruits = [ new Fruit("apple", 3), new Fruit("banana", 8), new Fruit("strawberry", 6), new Fruit("grape", 4), new Fruit("peach", 5), ]; const fruitBody = document.getElementById("fruits"); function addFruit(item) { const tempTr = document.createElement("tr"); const tempName = document.createElement("td"); const tempSugar ..

목차 1. scope 2. Object 클래스 3. 다양한 사용법들 3-1 push/ pop 3-2 indexOf 3-3 find/ findIndex 3-4 forEach 3-5 map 3-6 join/ toString 3-7 slice 3-8 unshift/ shift 3-9 sort/ reverse 3-10 filter 1.scope (스코프) { let a = 0; // 지역 변수, 지역 스코프 } let a = 0; console.log(a); //전역변수 , 전역 스코프 - scope는 { } 중괄호 의미로 코드를 묶어준다. - 스코프 내에서 선언된것은 지역변수 - 스코프 밖에서 선언된것을 전역변수 let a = 1; { let a = 3; console.log(a); } console.log(..

목차 1. document.getElementById() 사용 2. for문을 사용하여 css 스타일바꿔보기 3. 과일에 대해 input을 받아 리스트에 추가하기 1.document.getElementById() console.log(document.getElementById("list").children); console.log(document.getElementById("list").firstElementChild); - 아이디 "list" 의 자식들을 찾는 방법이다. const listChildren = document.getElementById("list").children; console.log(listChildren[0].parentElement); console.log(listChildren..

목차 1. DOM, BOM 2. prototype 3. js runtime 1. DOM, BOM DOM (Document Object Model) console.log(document); console.dir(document.head); console.dir(document.body); console.log(document.body.innerHTML); // html의 내용, 엘리먼트까지 다 나온다 console.log(document.body.innerText); // body에 적힌 내용, 엘리먼트없이 나온다 document.body.innerHTML += "추가중"; document.body.innerHTML = "위에 추가" + document.body.innerHTML; document.getE..

목차 1. 반복문 (for) 2. function 2-1 함수 선언식 2-2 함수 표현식 3. js runtime 1. for 반복문 - for 반복문은 소괄호 안에 변수를넣고; 조건을 넣고; 중괄호안의 코드가 끝나고나서 진행할 코드를 입력 for (let a = 2; a < 10; ++a) { console.log(a); for (let b = 1; b < 10; b++) { console.log(a + " * " + b + " = " + a * b); } } △ for반복문을 사용하여 구구단 만들기 2. function function sum(num1, num2) { console.log(num1 + "랑" + num2 + "랑 더해줄거야"); return num1 + num2; console.log..

목차 1. 연산자 2. 조건문 3. 반복문 4.git 1. 연산자 console.log(1 3); // 1이 3보다 크다 거짓 console.log(4 >= 2); //4가 2보다 크거나 작다 true console.log(4 false console.log(true && !false); // true console.log(true || false); // or 을 뜻함, 둘중에 하나라도 트루인지 -> true console.log(true && "안녕하세요"); //안녕하세요 // &&는 앞에 false가 오는이상 뒤에껄 볼필요도 없이 false가 나와 - > || or일때는 가능 console.log(false && "안녕하..