TIL / 20211012 / className, classList,padStart,setInterval,깃 연동 에러

장정윤·2021년 10월 12일
0

TIL

목록 보기
34/41
post-thumbnail

📌배운내용

className과 classList 차이

className

Element.className = '이름';
Element.className 속성에 직접 값을 지정해 줄 수 있음

classList

Element.classList.toggle
: 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드

Element.classList.add
: 명시된 클래스를 추가하는 메서드

Element.classList.remove
: 명시된 클래스를 제거하는 메서드

cf) ID와 class 차이
ID는 한요소에만 사용, CLASS는 여러요소에 중복사용가능한 스타일 정의법

전체코드


const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick1(){//기존 클래스 이름 font-style이 사라지지 않고 클래스명을 추가하는 코드
    const clickedClass = "active"; 
    if (h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }else{
        h1.classList.add(clickedClass);
    }
}

function handleTitleClick2(){//handleTitleClick1과 동일하게 동작하는 코드
   h1.classList.toggle("active");
}

function handleTitleClick3(){//기존 클래스 이름 font-style이 사라지며 className이 바뀜
    const clickedClass = "active"; 
    if (h1.className === clickedClass){
        h1.className = "";
    }else{
        h1.className=clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick1);
//h1.addEventListener("click", handleTitleClick2);


/*
const title = document.querySelector("div.hello:first-child h1");

function handleWindowResize(){
    title.style.color= "blue";
}

function handleWindowCopy(){
    title.style.color= "tomato";
}

function handleWindowOnline(){
    alert("all Good");
}

function handleWindowOffline(){
    alert("there is no wifi!");
}


h1.addEventListener("click", handleTitleClick);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("offline", handleWindowOnline);
*/

/*


const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    console.log(h1.style.color);
    h1.style.color = "blue";
    console.log(h1.style.color);
}

h1.addEventListener("click", handleTitleClick);



*/

기본동작을 막는 것

  • event.preventSubmit();

  • event.preventDefault();

clock

interval: 몇초 간격으로 무엇인가 반복되도록 하고 싶을 때 ex.)setInterval(호출하려는 함수,5000);
timeout: 일정시간이 흐른뒤 딱 한번만 실행되도록 하고 싶을 때 ex.)setTimeout(호출하려는함수,5000);

padStart(2,"0"): 문자의 길이를 늘려야할 때 사용. 0이라는 문자를 앞에 추가시켜 두자리로 만듦
const seconds = String(date.getSeconds()).padStart(2,"0");

깃 연동 에러

원격저장소에 연동하는데 아래와 같은 에러가 발생했다.

fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

해결 방법

연결되었는데 안되는 경우 다시 등록해본다.

git remote add origin https://github.com/Jeongyun-Jang/chrom-clone.git

연결후에 다시 push를 해보니 된다.

크롬 클론코딩 링크

📌참고자료

노마드코드 크롬앱 클론코딩
className: 링크
clasList: 링크

profile
꾸준히 꼼꼼하게 ✉ Email: jjy306105@gmail.com

0개의 댓글