※ HEX Code(헥사코드) - #000fff
와 같이 #과 0 ~ 9의 숫자와 a ~ f 사이의 알파벳의 6자리 조합으로 이루어져 있음
코드)
[main.js]
var hex = document.getElementById('hex');
var btn = document.getElementById('btn');
// hex 태그와 btn태그가 정상적으로 따라왔는지 확인하기
// console.log(hex);
// console.log(btn);
btn.addEventListener('click', function() {
// console.log("클릭");
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
var color = "#";
for(var i = 0; i < 6; i++) {
var random = Math.floor(Math.random() * arr.length);
color += arr[random];
}
document.body.style.backgroundColor = color;
hex.textContent = color;
});
◆ for문 작동 스크린샷
◆ 결과 스크린샷
● addEventListener( , )
의 2번째로 인수로 전달한 함수 자체를 변형하기
createColor
)을 지정하여 전역변수로 만든 후, 2번째 인수로 함수명을 넣어줌(콜백함수)코드)
btn.addEventListener('click', createColor);
function createColor () {
// console.log("클릭");
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
var color = "#";
for(var i = 0; i < 6; i++) {
var random = Math.floor(Math.random() * arr.length);
color += arr[random];
}
document.body.style.backgroundColor = color;
hex.textContent = color;
};
[html]
<body>
<button type="button" id="btn">클릭</button>
<h1 id="quote">인용문구가 들어갈 자리</h1>
<span id="author">작가가 들어갈 자리</span>
<script src="js/main.js"></script>
</body>
[main.js]
var arr = [
{
quote: "아이들은 누구나 예술가이다",
author: "피카소"
},
{
quote: "내면의 목소리는 들리지 않게 된다.",
author: "반 고흐"
},
{
quote: "완벽을 두려워하지 말라",
author: "달리"
},
{
quote: "영감이 오는 것을 기다리고 있을 수는 없다.",
author: "런던"
},
{
quote: "의욕만 있으면 이런 노력만으로도 얼마든지 많은 생각을 찾을 수 있다.",
author: "수스"
},
];
// console.log(arr[0].quote);
// console.log(arr[0].author);
var quote = document.getElementById("quote");
var author = document.getElementById("author");
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var random = Math.floor(Math.random() * arr.length);
quote.textContent = arr[random].quote;
author.textContent = arr[random].author;
});
◆ 결과 스크린샷
◆ 결과 스크린샷 2
● form
태그에는 버튼을 눌러서 글자를 submit
하게 되면, 작업을 수행 후 바로 창을 새로고침하게 됨
→ 새로고침을 막기위해 main.js
의 function( )
에서 .preventDefault( );
메서드를 작성함
● preventDefault( );
는 태그의 본연의 기능을 정지시킬 수 있음
코드)
[main.js]
form.addEventListener('submit', function(e) {
e.preventDefault();
console.log(e);
console.log("제출");
});
◆ preventDefault( );
사용 결과 스크린샷
● .reset( );
메서드 – 내용을 초기화 할 때 사용. 여기서는 input
의 입력 내용을 초기화할 때 사용함.
form.reset();
● if
문에서 else
의 경우 새로운 클래스 명을 추가하기
.classList.add( );
를 사용하여 적용시킴else {
feedback.classList.add('show');
}
● 일정 시간이 지난 후, show
클래스가 사라지도록 하는 기능 적용
setTimeout( , );
메서드를 사용함 → 2가지 인수를 받음, 첫 번째는 콜백함수, 두 번째는 시간을 받음예시)
[main.js]
setTimeout(function() {
feedback.classList.remove('show');
}, 2000);
● document.querySelectorAll( );
을 사용하여 html
영역 가져오기
html
영역은 배열 형태로 저장됨예시)
document.querySelectorAll('.btn');
※ ‘.btn’
클래스 영역을 가져옴
● prev
나 next
버튼 클릭 시, 화면 시점이 페이지 상단으로 올라가는 기능 멈추기
html
의 a
태그의 고유 기능으로 이를 멈춰야 함.preventDefault( );
를 사용함예시)
[main.js]
document.querySelectorAll('.btn').forEach(function (element, index) {
element.addEventListener('click', function(e) {
e.preventDefault();
});
});
● 클릭한 버튼이 어떤 버튼인지 확인하는 방법
.target
을 사용하여 어떤 버튼을 사용했는지 확인함예시)
if(e.target.classList.contains('prevBtn')) {
console.log("Prev");
}
if(e.target.classList.contains('nextBtn')) {
console.log("Next");
}
◆ 결과 스크린샷
◆ 결과 스크린샷(prev)
◆ 결과 스크린샷(next)