목록Development/JavaScript (14)
Tegi Log : 블록체인, 축구, 소레어, Sorare 컨텐츠망상공간
💡 Array.from(document.querySelectorAll('className')); querySelectorAll을 써서 for문을 돌렸을때 계속 오류가 떠서 한참 헤맸다. querySelectorAll으로 반환된 값이 실제 배열이 아니라 '유사배열'이기 때문인데 querySelectorAll이 NodeList에 속해 있는 메소드이기 때문이다. HTMLCollection과 NodeList라는 유사배열객체는 배열과 같은 형태를 띄고 있지만 배열이 아니기 때문에 유사배열이라고 부른다. 유사배열이라는 객체는 배열이 아니기 때문에 배열에 관련된 메소드들을 사용할 수 없다. (NodeList는 foreach문이 가능함) 그러므로 진짜 배열로 변환시켜줄 필요가 있는데 Array.from(); 이것을 사..
💡 코딩강의를 보다보면 자주 보이는 화살표 함수에 대해 알아보겠습니다. 매개변수가 없는 화살표함수 매개변수가 없다면 ()로 매개변수가 없는 것을 표현해주자. //매개변수가 없는 화살표함수. ()를 표시해준다. const noParameter = () => console.log('매개변수 없는 화살표함수'); //화살표로 표현한 익명함수이기 때문에 변수명으로 호출 noParameter(); 매개변수가 하나인 화살표함수 매개변수가 하나라면 () 대신 매개변수를 적어주면 된다. //매개변수가 하나일때 () 대신 매개변수를 써준다. const oneParameter = parameter => console.log(parameter); //변수명으로 호출하고 인자를 전달! oneParameter('매개변수가 하나..

💡 innerHTML는 태그 & 문자열을 인식 캡틴마블 hero 안에다가 innerHTML로 스파이더맨이라는 텍스트를 태그로 넣은 모습. 💡 innerText는 태그(x). 문자열로만 인식합니다. 캡틴마블 innerText로 하면 태그까지 문자열로 인식해서 스파이더맨으로 출력되는 모습입니다.
💡 변수에 직접 대입해서 이름이 필요 없는 함수를 뜻한다. 일반적인 함수 //선언 function walk(){ console.log("I'm walking!"); } //호출 walk(); 이름을 가진 일반적인 모습의 함수이다. 익명함수 const 변수명 = function(매개변수) { 실행문; }; //변수선언과 다를바 없기 때문에 뒤에 세미콜론을 붙혀준다. const walk = function(){ console.log("I'm walking!"); }; //변수이름으로 호출 walk(); 함수이름이 없는 대신 변수에 대입해서 선언하고, 호출할때도 변수이름으로 호출합니다. 익명함수 + 반환문 const walk = function() { const string ="안녕 익명함수"; return ..

querySelector() document.querySelector('인자'); '인자' 에 id, 클래스 등 선택할 요소들을 써넣으면 조회해서 우리가 쓴 '인자'와 일치하는 최상단 요소를 찾아서 가져옵니다. 시작하기 종료하기 도움말 똑같은 클래스 btnStyle1 를 공유하는 버튼 3개를 만든다음 스크립트에서 querySelector로 .btnStyle1 클래스를 반환해서 btyStyles 변수에 넣은 후 style.color에 접근해서 폰트컬러를 블루로 바꿔보면 이렇게 최상단에 있는 시작하기 버튼만 블루로 바껴있는 것을 확인할 수 있다. querySelectorAll() document.querySelectorAll('인자'); querySelector()와는 다르게 같은 요소들을 모두 조회해서 배..
setTimeout()이란? 일정시간이 지난 후 무엇인가 실행시키고 싶을때 쓰이는 함수입니다. (딜레이 시키고 싶을때) setTimeout()은 timeoutID라는 양의 정수를 반환하는데, setTimeout()이 생성한 타이머를 식별할 때 사용한다고 합니다. (이 값을 clearTimeout()에 전달하면 setTimeout()의 타이머를 취소할 수 있습니다.) 복잡한거같으니 일단 보죠. setTimeout(호출할 함수, 딜레이시간); setTimeout()의 딜레이시간은 밀리세컨드로 표현합니다. ( 1000 = 1초, 2000 = 2초 ) setTimeout(function(){ console.log('1초 지연 성공!'); }, 1000); 1초가 지나면 콘솔로그를 호출하는 것을 확인할 수 있다...