자스 심화 강의 너무 어려워요... this 그게 먼데.. 클로저 그게 먼데...
그래도 이번주는 새로운 팀원들 덕에 아침 코테 스터디도 생겨서 열심히 참여하고 아주아주 알차게 보냄..
유노윤호 빙의해서 코테 슬쩍 꺼내 풀어봅니돠...
DOM
- Document를 Object로 바꾸는 Model
- HTML 파일을 자바스크립트가 알아들을 수 있는 Object형태로 모델링한 것
- 브라우저에 기본적으로 내장된 API
- DOM이 브라우저에 내장되어 있으므로, HTML 내용을 javascript로
1. 접근할 수 있음
2. 제어할 수 있음 - 모든 DOM node들은 '속성', '메서드'를 갖고 있음
document.getElementById('demo').innerHTML
getElementById - 메서드 (호출의 주체가 있음)
innerHTML - 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom 연습</title>
</head>
<body>
<h1 id="headerText">JAVASCRIPT DOM 강의</h1>
<p class="subText">설명은 보통 P태그</p>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ul>
<button onclick="buttonClickEvent()">클릭하면 heading이 바껴요!</button>
<script>
//1.버튼을 눌렀을 때
//2. h1태그 불러와서
//3. h1태그 내용 바꾸기
let buttonClickEvent = function () {
//이 안에서 선택 후 내용을 바꿔주면 된다
//2,3
// document.querySelector('h1').innerText = '바뀐 내용이 들어가는 heading';
//위처럼 해도되고 변수에 담는 과정 추가하면 아래처럼
let h1Tag = document.querySelector('h1');
h1Tag.innerText = '바꼈어용 헤더부분';
}
</script>
</body>
</html>childNodes는 인덱스를 지정해줘야함
parentNode로 갈 때는 s가 붙지 않음을 ..
* selector 선택자
- 태그
- id
- class
* id/class 차이
id : 고유 식별자
class : 특성을 공유하는 것들의 군집
- getElementById
- getElementByClassName
- 몇 번째 클래스를 갖고오는지, 인덱스가 필요함
- querySelector / querySelectorAll
새로운 노드 생성 -> tree에서 가지치기를 더해보겠다
* .append
* innerHTML
- 하위요소로 들어감
document.querySelector('h1').innerHTML = '<h2>Test</h2>'
* innerText
- 따옴표 안에 들어간 걸 단순히 text로 인식
document.querySelector('h1').innerText = '<h2></h2>'
* setAttribute(qualifiedName, value)
document.querySelector('h1').setAttribute('class', 'toYellowClass');
프로그래머스 코테
각도기
문제 설명
각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.
너무 어이없이 풀린 각도기 문제
//이게 원래 내 풀이
function solution(angle) {
if(0< angle <90) return 1;
if(angle === 90) return 2;
if(90< angle <180) return 3;
if(angle === 180) return 4;
}//테스트케이스에서 계속 걸려서 수정한 코드
function solution(angle) {
if(angle<90) return 1;
else if(angle == 90) return 2;
else if(angle < 180) return 3;
else if(angle == 180) return 4;
}보통 위 코드처럼 쓰면 풀릴 거라 생각하지 않나..?
근데 아닌가보다.. 테스트 케이스에서 제대로 동작하지않았다 따흑..
결국 else if문으로 바꾸고 안의 조건은 위의 if문들이 걸어준 것을 제외하고 다시 작성했더니 그제서야 정답 처리가 되었다😅 띠용..
꽤나 여러가지를 생각하고 문제에 임해야겠다는 깨달음..
중복된 숫자 개수
문제 설명
정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요.
//처음 풀이 - 테스트 1번에서 에러!
function solution(array, n) {
var num = 0;
let idx = 0;
//해당 인덱스가 없으면 -1 리턴
if(array.indexOf(n) == -1) return 0;
while(idx != -1){
idx = array.indexOf(n, idx);
num++;
}
return num;
}✅ Array.indexOf()
indexOf 메소드에 대해 너무 대강 알고있었던 것 같다..
문서 정독 후 다시 풀어봄
function solution(array, n) {
var num = 0;
//처음 서치 후 index 값
let idx = array.indexOf(n);
//해당 인덱스가 없으면 -1 리턴
if(idx == -1) return 0;
while(idx != -1){
//다음 시작 인덱스를 바꿔줘야함
// idx + 1 -> 다음 인덱스로 이동
idx = array.indexOf(n, idx +1);
num++;
}
return num;
}짝수의 합
문제 설명
정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.
function solution(n) {
var arr = [];
var sum = 0;
var i = 2;
while(i <= n){
if(i % 2 == 0){
arr.push(i);
}
sum += arr[i];
i++;
}
return sum;
}이러면 결과값으로 null이 나온다.. why..? 아직도 모름..
function solution(n) {
var arr = Array.of(n);
// console.log(arr);
var i = 0;
while (i < n) {
if (i % 2 == 0) {
arr.unshift(i);
}
i++;
}
let sum = arr.reduce((a,b)=>a+b,0);
return sum;
}
테스트케이스는 통과하지만 정답은 아닌 코드.. 그니까 why!!!
function solution(n) {
var arr = [];
var i = 2;
while (i <= n) {
if (i % 2 == 0) {
arr.push(i);
}
i++;
}
let sum = arr.reduce((a,b)=>a+b,0);
return sum;
}
드디어 정답으로 인정된 코드
대체 이건 왜..
✅ Array.reduce()
✅ Array.unshift()
이게 왜...? 아니 왜...? 여러 케이스에 걸려있으시군요! ㅎㅎㅎ
하나씩 해결해가시면서 정진해나가시는 모습이 너무 멋집니다
이해가지 않으셨던 부분들 꼭 시간내셔서 체크하시고 넘어가시면 좋을듯해요!