//조건문
- if-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night') {
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day'
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night'
}
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error illum, assumenda odit accusamus voluptate reiciendis quisquam, distinctio a pariatur similique? Reiciendis earum assumenda veniam facere, ex debitis cumque consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, quo voluptatum laborum consequatur eius quas! Earum saepe asperiores impedit voluptatum eaque incidunt cupiditate quos vitae itaque. Tempore, numquam facilis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ratione doloribus error, officia facere impedit sed atque quidem, accusamus deserunt quis recusandae reiciendis id illo repudiandae dicta est. Reiciendis, fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo assumenda corrupti ratione beatae libero, nostrum omnis odit cumque explicabo repellendus. Quas placeat aperiam facilis sunt cumque, in quisquam ratione et. </p>
</body>
</html>//반복문
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loop</title>
</head>
<body>
<h1>Loop</h1>
<ul>
<script>
var i = 1;
while(i <= 5) {
document.write('<li>'+i+'</li>');
i++;
}
</script>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body')
if(this.value === 'night') {
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day'
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night'
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'blue';
i++;
}
}
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A met error illum, assumenda odit accusamus voluptate reiciendis quisquam, distinctio a pariatur similique? Reiciendis earum assumenda veniam facere, ex debitis cumque consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, quo voluptatum laborum consequatur eius quas! Earum saepe asperiores impedit voluptatum eaque incidunt cupiditate quos vitae itaque. Tempore, numquam facilis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ratione doloribus error, officia facere impedit sed atque quidem, accusamus deserunt quis recusandae reiciendis id illo repudiandae dicta est. Reiciendis, fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo assumenda corrupti ratione beatae libero, nostrum omnis odit cumque explicabo repellendus. Quas placeat aperiam facilis sunt cumque, in quisquam ratione et. </p>
</body>
</html>'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] 객체 (0) | 2023.03.19 |
|---|---|
| [자바스크립트(JavaScript)] 함수 (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 배열(Array) (0) | 2023.03.18 |
| [자바스크립트(JavaScript)] Date (0) | 2023.03.18 |
| [자바스크립트(JavaScript)] 자료형, 연산자 (0) | 2023.03.16 |
