javascript day3

오늘은 자바스크립트를 이용한 본격적인 작업들을 해보았고
더 나아가 앞서 배운 배열과 난수 생성을 이용해서 좀 더 동적인 사이트 제작을 시작했다.

위와 같이 보이는 사이트를 오늘의 과제로 제출했다. 어떻게 만들었을까??? html의 구조는 상대적으로 쉬운편이다.

위와 같이 form과 그 내부 label input button으로 이루어진 html이다. 여기서 주의할 점이 있다면 form안에 input을 넣을 경우 자동으로 submit와 새로고침이 일어난다. 이러한 기능상 문제는 js를 이용해서 조정가능하다.

1단계 각 태그들을 변수로 가지고 오기

const myForm = document.querySelector('form');
const getNum = document.querySelector('form .get-box #get-num');
const getGuess = document.querySelector('form .guess-box #get-guess');
const notice = document.querySelector('p');
const myWon = document.querySelector('span.won');
const myLost  = document.querySelector('span.lost');
2단계 form의 기본동작 멈춤 및 값 출력

function stopRefresh(mike) {
	mike.preventDefault();
  	
  	const ranNum = Math.floor(Math.random()*getNum.value);
	const myAnswer = getGuess.value;
  	notice.classList.remove('hidden');
  	notice.innerText = `you chose: ${myAnswer}, the machine chose ${ranNum}`
    	if (ranNum === myAnswer ) {
        	myWon.classList.remove('hidden');
          	myLost.classList.add('hidden');
        } else {
        	myLost.classList.remove('hidden');
          	myWon.classList.add('hidden');
        }
}


myForm.addEventListener('submit', stopRefresh);

위의 이미지와 코드가 오늘 내가한 코드챌린지 내용이다.

다음 난수와 date.object를 이용해서 clock을 만들어보자.

1단계 : setInterval에 대한 이해

만약 우리가 어떤 함수를 실행시키고자 하며 해당 함수가 몇초마다 다시 한번 실행되길 원한다면 
어떻게 해야할까????
이러한 요구사항에 대한 해결책이 setInterval(func, delay);이다.

가령 우리가 localstorage에 저장한 값을 지속적으로 console영역에 나타나도록
하고자 한다면 어떻게 해야할까????

const var1 = localstorage.getItem('username');    
function inter() {
	console.log(var1);
}

setInterval(inter, 5000);

위와 같이 하면 된다. 

2단계 date object의 활용.

const date = new Date();

date.getDate()
date.getDay()
date.getHour()
date.getMinutes()
date.getSeconds()
date.getFullyear()

활용에 들어가보자. 만약 우리가 어떤 시계를 만들고 싶다면 어떻게 해야할까?????

function myOwnClock() {
	const myHour = Srting(date.getHour()).padStart(2,'0');
    	const myMin = String(date.getMinutes()).padStart(2,'0');
  	const mySec = String(date.getMinutes()).padstart(2,'0');
  
 	clock.innerText = `${myHour}:${myMin}:${mySec}`
}

setInterval(myOwnClock,1000);

3단계 : 배경화면이 변하는 html만들어 보기

우리가 가끔 어떤 홈페이지에 접속하면 일정한 간격마다 d이미지가 바뀌는 홈페이지를 볼 수 있다. 이러한 홈페이지는 어떻게 구현할 수 있을까?????????

1단계 : 이미지 모음 배열 

const images = ['a.jpeg','b.jpeg','c.jpeg'];

2단계 : html요소 생성

const img1 = document.createElement('img');


const bgimg = images[Math.floor(Math.random()*images.length)];

img1.src = `img/${bgimg}`

document.body.appendchild(img1);