반응형
index.html (defer를 이용해서 main.js파일이 html이 모두 생성된 다음에 작동하도록 설정)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
<script src="./test.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<ul></ul>
</body>
</html>main.js
// 반복문(For statement)
// for (시작조건; 종료조건; 변화조건) {}
// ul태그 요소를 가져온다.
const ulEl = document.querySelector('ul')
console.log(ulEl)
// i++: 반복 한 번 돌고 1씩 증가
for (let i = 0; i < 3; i++) {
// console.log(i)
// li 태그 생성
const li = document.createElement('li')
// 보간 처리
// li 태그 내용 입력
li.textContent = `list-${i + 1}`
//짝수를 눌렀을때 이벤트 작동
if ((i+1) % 2 === 0){
// li태그 클릭 할 때마다 li태그 내용 콘솔에 출력
li.addEventListener('click', function () {
console.log(li.textContent)
})
}
// ul 태그 밑에 li태그 붙이기
ulEl.appendChild(li)
}
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
| 형 변환 (0) | 2021.05.26 |
|---|---|
| 변수 유효범위 (0) | 2021.05.26 |
| 조건문 switch (0) | 2021.05.26 |
| 조건문 if, 랜덤값 만들기 (0) | 2021.05.25 |
| 삼항 연산자 (0) | 2021.05.25 |
