개발공부일지

목차 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 && "안녕하..

목차 1. 객체 (object) 2. 배열 (array) 1. 객체(object) let obj = { a: "이것은 값입니다.", property: "value", key: "value", }; - 변수(obj)안에 변수(a)가 들어갔다는 의미로 {} 안에 묶여있어야 한다. - a를 property나 key라고 부른다. → property 값이 무엇인지, key 값이 무엇인지 console.log(obj); console.log(console); console.log(obj.obj2.a); - 객체들은 .을붙여 객체안의 내용들을 가져올수있다. console.log(window); console.log(navigator); - window객체로 브라우저에 대한 모든 정보를 가지고있다. (최상위 객체) -..

목차 1. 변수 (let, const, var) 2. 변수명 규칙 3. 연산 1.변수 (let, const, var) ① let - 한번 선언된 변수명에 대해 중복으로 사용할수없다. - 중복 사용됨을 알려준다 (작업하는데 있어 헷갈릴 일이 없어짐) - 자주 사용되는 변수이다. ② const - let처럼 중복으로 사용할수없고, 고정된것이라서 한번 정한 값을 바꿀수없다. - 정해진 값들을 넣을때 사용한다. ③ var - 한 번 선언된 변수명을 중복으로 사용이 가능한데, 중복 사용됨을 알려주지 않아서 혼용되면 문제가 생길수있다. - ES5 이전에 사용되었고 배우는데 있어 사용하지 않기로한다. - 호이스팅이라고 코드를 끌어올려 undifined를 넣었다고, 형식이라고 인식해두기 let num1 = 16; le..