Tegi Log : 블록체인, 축구, 소레어, Sorare 컨텐츠망상공간

💡 document.createElement()를 활용해 엘리먼트를 생성해서 랜덤한 이미지를 나오게 해봅시다. 0,1,2.png로 랜덤하게 선택되고 엘리먼트가 잘 생성된 모습을 볼 수 있습니다. 아직은 Javascript에만 존재하고 document에 존재하지 않으니 body 엘리먼트에 자식으로 붙혀봅시다. 폴더이름도 img와 같아야되고, 이미지를 꼭 코드와 같은 이름으로 해줘야 합니다.

💡 게임이든 웹사이트든 랜덤한 정수값은 어디든 자주 쓰입니다. 한번 구현해봅시다! Math.random(); Math.random();을 호출해보면 0.58, 0.245 , 0.97 등등 이런 실수들이 나오는데요. 지금은 0.단위로 나오기 때문에 10을 곱해주면 이렇게 7.4, 2.6, 9.1 등 단위가 바껴서 나오는 것을 볼 수 있습니다. 하지만 이것을 그냥 쓸 순 없죠. 때에 따라 다르지만, 저는 내림 Math.floor()을 써서 정수로 만들겠습니다. Math.floor(Math.random()*10); /* 1. Math.random()으로 랜덤한 값을 만들고 2. 그 값에 10을 곱해 자릿수를 바꿔준다음 3. Math.floor()로 감싸서 내림을 해준다. */ 랜덤한 정수값이 나오는 것을 확..

Math.floor(1.9) Math.floor()는 소숫점이 무엇이든 내림을 해서 1로 만들어주는 모습을 볼 수 있다. Math.round(1.6); Math.round()는 반올림을 해준다. Math.ceil(1.75) Math.ceil()은 올림을 해주는 것을 볼 수 있다.

💡 setInterval()함수는 일정시간동안 코드를 계속 반복시켜줍니다. 아주 유용하겠죠? 'hi'매개변수를 통해 '안녕 지금 시각은'인자가 들어간 모습. 그리고 반복을 종료시킬수가 있는데 const timer = setInterval(getClock,1000,'안녕 지금 시각은'); clearInterval(timer); 이처럼 clearInterval() 함수로 반복실행을 종료할 수 있습니다.

💡 new Date(); : 현실시간을 받아올 수 있는 객체 padStart(a,b); : 2,3,4 이런 1의자리 숫자들을 02,03,04 이런식으로 10자리로 만들 수 있음. 매개변수a는 어느정도 길이로 할것인지, 매개변수 b는 어떤 문자열로 채울것인지 적는다.

💡 classList.add, remove로 만든 토글함수 //h1태그의 엘리먼트를 변수에 담고 const heading1 = document.querySelector('h1'); //클릭하면 handleH1Click 함수를 호출하는 이벤트를 생성 heading1.addEventListener('click',handleH1Click); //함수생성 function handleH1Click(){ // 클릭드 클래스라는 변수를 만들어서 상태체크 const clickedClass = "clicked"; //클릭드 클래스가 classList에 포함되어있는지 체크 if(heading1.classList.contains(clickedClass)){ //포함 되어 있으면 classList에 있는 클릭드 클래스를 지운..

💡 자바스크립트 배열 특징(다른 언어들에 비해 엄격하지 않다.) 1. 배열안에 다양한 데이터 타입이 들어갈 수 있음. 2. 배열의 크기가 동적으로 변할 수 있다. //Array생성자 활용 const arr1 = new Array(); arr1[0] = '첫번째'; arr1[1] = 111; arr1[2] = true; //초기값 넣고 생성 const arr2 = new Array('두번째',222,false); //new Array생성자의 매개변수는 배열의 크기를 뜻함. 5개의 undefined가 출력됨. const arr3 = new Array(5); //----------------------------------------------------------------------------// // [..

💡 Array.from(document.querySelectorAll('className')); querySelectorAll을 써서 for문을 돌렸을때 계속 오류가 떠서 한참 헤맸다. querySelectorAll으로 반환된 값이 실제 배열이 아니라 '유사배열'이기 때문인데 querySelectorAll이 NodeList에 속해 있는 메소드이기 때문이다. HTMLCollection과 NodeList라는 유사배열객체는 배열과 같은 형태를 띄고 있지만 배열이 아니기 때문에 유사배열이라고 부른다. 유사배열이라는 객체는 배열이 아니기 때문에 배열에 관련된 메소드들을 사용할 수 없다. (NodeList는 foreach문이 가능함) 그러므로 진짜 배열로 변환시켜줄 필요가 있는데 Array.from(); 이것을 사..