쌓고 쌓다

document.addEventListener('DOMContentLoaded', () => {})의 코드는 document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라이다. 이벤트 연결 모든 문서 객체는 생성되거나 클릭, 마우스를 올리거나 할때 이벤트가 발생된다. 이 이벤트가 발생할 때 실행할 함수는 addEventListener()를 통해 실행한다. 형태는 아래와 같다. 문서 객체.addEventListener(이벤트 이름, 콜백 함수) 이벤트가 발생할 때 실행할 함수(콜백 함수)를 이벤트 리스너 또는 이벤트 핸들러라고 부른다. EX) h1 태그를 클릭할때 카운트 해보자. 클릭 횟수: 0 user-select 속성을 non으로 지정하면 ..

문서 객체 가져오기 document.body로 body의 요소를 읽어 들일 수 있고 아래와 같은 방법들로도 요소 읽기가 가능하다. document.head ducument.body document.title head, body, 요소 내부에 만든 다른 요소들은 별도의 메소드를 통해 접근한다. document.querySelector(선택자) document.querySelectorAll(선택자) querySelector 메소드는 요소를 하나만 추출하고, querySelectorAll 메소드는 문서 객체 여러 개를 추출한다. 선택자 부분에 CSS 선택자를 사용한다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소 추출 클래스 선택자 ..

HTML에서 html, head, body, title, h1, div 등을 요소(element)라고 부른다. JavaScript에서는 이를 문서 객체(document object)라고 부른다. 문서 객체 모델(DOM:Document Objects Model) : 문서 객체를 조합해서 만든 전체적인 형태 DOMContentLoaded 이벤트 html 페이지는 코드를 위에서 아래로 차례대로 실행한다. body 태그가 생성되기 전에 head 태그에서 body 태그에 무언가 출력은 한다면 문제가 발생한다. 아래의 코드를 보자. document.body.innerHTML로 body 안에 있는 html 코드를 조작한다. 1번째 h1 태그 2번째 h2 태그 실행 결과 head 태그 안에서 body 태그를 조작하는 ..

https://school.programmers.co.kr/learn/courses/30/lessons/92341 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 전체 코드 #include #include #include #include using namespace std; vector solution(vector fees, vector records) { vector answer; // fess : 기본시간(분), 기본요금(원), 단위시간(분), 단위 요금(원) // records : 시각, 차량번호, 내역 map total_m; // 차량번호, 총시간(..

새해를 맞아 롤 탈퇴를 했습니다! 저의 계정중 본캐인데 다이아입니다... 마스터는 결국 가지 못했지만 롤에 대한 흥미도 많이 떨어지도 했고 게임을 하루에 한 번 시작하면 하루종일 밥만 먹고 게임만 하는 스타일이라 게임을 끝내고 하루가 다 가고... 게임을해서 뭐 스트레스가 풀리거나 즐거움을 느낀 것도 아니라... 그냥 공허함을 느꼈습니다. 무의미하게 하루하루를 보내다보니 항상 허탈함만이 남더군요! 그래서 오늘 딱 또 공허함을 느끼고 마침 연말이기도 하고 새해를 맞아 계정들을 삭제했습니다. 시즌8때 한참 고3이라 공부해야 할 시기인데 수능전날까지 다이아 승급전을 치룬다고 계속 롤만 한 기억이 있네요 ㅎㅎ 결국 승격전은 여러 번 떨어지고 승격 못했습니다.. 본캐. 이게 저의 첫 계정은 아닌데 2017년도에 ..

https://school.programmers.co.kr/learn/courses/30/lessons/17684 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 전체 코드 #include #include #include #include using namespace std; vector solution(string msg) { vector answer; map m; /* A, B, ..., Z 사전 등록 */ for(int i=1; i0){ // 남아 있는 msg가 없을때까지 반복. string str; str=msg[0]; // str에 msg의 0번째 ..

배열의 얕은 복사(참조 복사) const 물건박스1 = ['우유', '식빵'] const 물건박스2 = 물건박스1 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) 배열을 다른 배열의 이름으로 할당해주면 같은 공간을 가리키는 이름만 다를 뿐 독립적이지 못하다. 배열의 깊은 복사 두 배열을 전개 연산자를 통해 완전히 독립적인 상태로 만들 수 있다. 전개 연산자 : [...배열] const 물건박스1 = ['우유', '식빵'] const 물건박스2 = [...물건박스1] 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) + 배열 요소 추가 const..

속성 존재 여부 확인 객체에 없는 속성에 접근하면 undefined 자료형이 나온다. 조건문을 통해 undefined인지 아닌지 확인하여 속성 여부를 확인한다. const object = { name: '책이름1', pirce: 777 } if(object.name !== undefined){ console.log('name 속성이 존재.') } else { console.log('name 속성이 없음.') } if(object.author !== undefined){ console.log('author 속성이 존재.') } else { console.log('author 속성이 없음.') } 이외 방법들 // 방법 if(object.name) { console.log('name 속성이 있음.') } e..