🟰위와 같이 새로고침을 할 때 자동으로 다음 인용구가 랜덤으로 나오도록 만들어보는 연습을 하려고 한다. ⏬준비할 html코드(id가 quote인 div태그안의 span태그에 인용구를 넣으려고 한다) ⏬JS코드 ( quotes값에 넣고자 하는 인용구와 text를 넣어준다.) 🔆quote안의 두개의 span 을 first-child, last-child를 통해 불러온다 🔆Math.random()을 통해 랜덤정수를 가져온다.(quotes.length를 곱해서 해당 길이만큼 범위를 확장) 🔆Math.floor를 통해 소수점을 버린다. Math.random은 double타입으로 나오기 때문 🔆그렇게 생성된 랜덤 인덱스에 해당하는 quote와 text를 각 span에 넣어주기만 하면 끝! const quotes =..

🟰시간 출력하기에 필요한 개념 📌 어떠한 요소 안에 String타입의 변수를 출력할때 ☀️ 백틱이라는 기호(``)를 써서 변수를 표현한다. 일반적으로 숫자키 옆 ~에 있다. ☀️setInterval(함수,간격) : 해당 함수를 지정한 간격만큼 두고 실행한다. ☀️ new Date()를 호출할 경우 현재 날짜와 시간을 가져옵니다. ☀️ padStart,padEnd(자릿수, 빈 공간을 채울 문자) : 자릿수만큼 문자열 공간을 지정하고 빈 공간은 지정한 문자로 채웁니다. 위 개념을 숙지하셨다면 코드를 보여드리겠습니다. ⏬코드예시 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const..

🟰if문 ☀️코드 if(조건식) { 조건 성립시 수행할 구문... } 예시코드 HTML 삽입 미리보기할 수 없는 소스 코드내용 해석: input 에서 age라는 id의 value값을 가져와서 if문에서 활용한다. submit을 클릭할 경우가 함수가 수행된다. if(age.value >=20) //만약 age의 밸류값이 20이상이라면(조건) msg.innerText = '당신은성인입니다.' //msg의 텍스트에 '당신은 성인입니다'라는 내용을 삽입한다. esle // 20미만이라면(위 if문의 예외상황시 조건) msg.innerText = '당신은 미성년자입니다.' //msg의 텍스트에 '당신은 미성년자입니다'라는 내용을 삽입한다.

🟰반복문 for은 말 그대로 일정한 조건아래서 반복을 수행하는 제어문이다. 자바의 반복문과 동일하지만 변수선언은 let을 사용한다. 쓰는 방식은 아래와 같다. for(초기화 변수값; 조건식; 증감식){ ... 반복문 수행 ... } 조건식이 만족할 때까지 초기화 한 변수값을 증감식을 적용해가며 반복문을 수행한다. const arr= ['짱구','유리','맹구','훈이','철수','수지'] const list = document.getElementById('list') for(let i=0; i HTML 삽입 미리보기할 수 없는 소스

🟰 자바스크립트 연산자 let num =1234; let multi = 1000; let tmp = 10; //덧셈 tmp = tmp + 1;//tmp +=1 //뺼셈 tmp = tmp - 1;//tmp -=1 //나눗셈 tmp = tmp /2 ;//tmp /=2 //곱셈 tmp = tmp *2;//tmp *=2 //num을 뒤집는 연산 ( 4321로) tmp =0; while(num>0){ tmp *= 10; tmp += (num%10); num = num/10; // 자바스크립트의 나눗셈은 실수형식으로 결과가 나와서 소수점 이하를 버리는 함수가 필요하다. } 간단한 예시입니다. 여러분이 아는 연산과 동일 합니다. 하지만 결과값이 어떻게 나오는지 확인하면 조금 의아해 하실 수도 있습니다. 다른 연산과 ..

코드를 통해 먼저 확인하겠습니다. //자료형 const t1 = true; //bolean const t2 = 10;//정수 const t3 = 'hello';//문자열 const t4 = () => alert('function');//함수 const t5 = ['짱구','유리','수지','철수','훈이'];//배열 const t6 = { name: '단비', // 객체에는 속성을 저장할 변수를 생성할 수 있다. age : 5, show: () => alert('단비꺼야!!') //객체의 속성에 함수를 지정할 수 있다. }//하나의 객체와 객체에 대한 속성을 지정한 값​ 변수에 담을 수 있는 변수 ☀️boolean(참/거짓) ☀️정수 ☀️문자열 ☀️함수 ☀️배열 ☀️객체 여기서 말하는 객체에 대해 처음 ..