멋쟁이 사자처럼_1203

jojo·2021년 12월 3일

1기 DOM TIL math 기록 멋쟁이 사자처럼 프론트엔드

멋쟁이사자처럼

목록 보기

29/39

수업

||, &&

|| : 마지막 falsy 값 혹은 처음 만난 truthy 값을 반환한다.

&& : 마지막 truthy 값 혹은 처음 만난 마지막 falsy 값을 반환한다.

Truthy: 참 같은 값이란 불리언을 기대하는 문맥에서 true로 평가되는 값
Falsy: 거짓 같은 값은 불리언 문맥에서 false 로 평가되는 값
falsy 값 (JS에서 이거 빼곤 다 truthy )
0, NaN, false, null, undefined, "",

1 || 2 || 3 || 4 || 5
-> 1

0 || 0 || 0 || 0 || 5
-> 5

0 && 1 && 2
-> 0

DOM

html 내용을 트리형태로 구조화해서 웹페이지랑 자바스크립트를 연결한다.
이때 각각 요소, 속성, 콘텐츠를 표현하는 단위를 노드라고 한다.(element 아님!)

DOM트리에 접근

const container = document.getElementById('container')
Id로 접근

const item = document.getElementsByClassName('item-second');
클래스를 가진 모든 요소를 다 가지고 와서, 결과를 배열처럼 저장한다.
다만 배열은 아니다.(arrayLike라고 함.)

const item2 = container.getElementsByTagName('li');
tag로 접근. 다만 같은 tag를 가지고 있으면 모두 접근한다.

const item1 = document.querySelector('.item-second');
Id로 접근하려면 앞에 #을 붙이고, class로 접근하려면 앞에 . 을 붙인다.
css로 접근하듯이 접근이 가능하다.

클래스 제어

addEventListener - 이벤트를 붙이는 함수

	const myBtn = document.querySelector('button');

        myBtn.addEventListener('click', function () {

            // blue 라는 클래스의 속성 값을 지정 할 수 있습니다.
            myBtn.classList.add('blue');
            console.log(myBtn.classList.contains('blue'));

            // myBtn.classList.remove(“blue”);     클래스를 제거합니다.
            // myBtn.classList.toggle(“blue”);     클래스를 토글합니다.
            // myBtn.classList.contains(“blue”);   해당하는 클래스가 있는지 확인합니다.
		})

event - mozilla 참고링크:
https://developer.mozilla.org/ko/docs/Web/Events

Math.random()

로또 번호 만들기

방법1.

function lottoNum () {
    let lotto = [];
    let i = 0;
    while (i < 6) {
        let n = Math.floor(Math.random() * 45) + 1;
        if (! sameNum(n)) {
        lotto.push(n);
        i++;
        }
    }
    function sameNum (n) {
        for (var i = 0; i < lotto.length; i++) {
            if (n === lotto[i]) {
                return true;
            }
        }
        return false;
    }
    return lotto;
}

방법2.

	function randomFunc(min, max) {
  		return Math.floor(Math.random() * (max - min) + min);
	}
        let lottoSet = new Set();
        function lottoGenerator() {
            while (lottoSet.size < 6){
                let result = randomFunc(1, 46);
                lottoSet.add(result);
            return lottoSet;
        }
        console.log(lottoGenerator());

방법3.- include 버전


function randomFunc(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function lottoGenerator() {
    let lottoArr = [];
    while (lottoArr.length < 6) {
        let result = randomFunc(1, 46);
        // 중복 판단, 다만 include는 IE지원안됨
        // 중복되는 숫자가 없다면
        if(!lottoArr.includes(result)) {
            lottoArr.push(result);
        }
    }
    return lottoArr;
}
console.log(lottoGenerator());

생각

이번주 내내 자바스크립트가 어렵다고 쓴 것 같은데, 오늘도 다르지는 않다. 진도가 빠른건지, 내가 이해를 잘 못하는 건지..! 마음이 점점 조급해진다..

느낀점

잘한점

꾸준하게 운동을 나간 점. 자바스크립트가 너무 어려워서 복습하다가도 머리 싸매고 있게 되는데, 그럴 때 습관적으로 운동을 갔다가 들어오면 다시 집중이 잘 된다. 그리고 운동을 하니까 오래 앉아 있어도 초반만큼 많이 피곤하거나, 체력적으로 힘든게 줄어들었다. 앞으로도 열심히.. 해야지!