Study/JavaScript
JavaScript : for in 반복문, while 반복문, do while 반복문
posey
2022. 11. 30. 09:25
2022.11.30.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 54
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 54
<for in 반복문 알아보기>
- JavaScript
<script>
let obj = { name: "홍길동", age: 20, gender: "남" };
for (keys in obj) {
console.log(keys);
}
let text = "";
for (let x in obj) {
text += obj[x] + "," + "<br>";
}
document.write(text);
let arr = [40, 50, 2, 4, 10];
let text2 = "";
for (let x in arr) {
text2 += arr[x] + "<br>";
}
document.write(text2);
</script>
<do while 반복문 알아보기>
- JavaScript
<script>
let text = "";
let i = 0;
/* while (조건) {
실행문
} */
while (i < 10) {
text += i + "<br>";
i++;
}
document.write(text + "<br>");
let text2 = "";
for (let i = 0; i < 10; i++) {
text2 += i + ",";
}
document.write(text2 + "<br>");
let text3 = "";
let j = 9;
do {
text3 += "<br>The number is " + j;
j--;
if (j == 0) break;
} while (j < 10);
document.write(text3 + "<br>");
</script>
<함수 function 알아보기>
- JavaScript
<script>
function a() {
document.write("안녕하세요<br>");
}
a();
(function () {
document.write("안녕하세요<br>");
})();
function b() {
for (let i = 1; i <= 3; i++) {
document.write("감사합니다<br>");
}
}
b();
function c(name, area) {
document.write(
name + "님은 " + area + "에 살고 있습니다." + "<br>" + "<br>"
);
}
c("홍길동", "대전");
function d(num) {
document.write(num * num + "<br>" + "<br>");
}
d(5);
function e(x, y) {
return x * y;
}
document.write(e(3, 4) + "<br>" + "<br>");
function f() {
for (let i = 1; i <= 10; i += 2) {
document.write(i + "<br>" + "<br>");
}
}
f();
</script>
0
<함수 function 예제>
- HTML
<h3 class="h01">담배를 피우십니까?</h3>
<button onclick="a()">예</button>
<button onclick="b()">아니오</button>
<p id="content">문단태그</p>
- JavaScript
<script>
function a() {
alert("예, 담배를 피웁니다.");
document.querySelector("#content").style.backgroundColor = "red";
}
function b() {
alert("아니오, 담배를 피우지 않습니다.");
document.querySelector("#content").style.backgroundColor = "green";
}
</script>
0
<함수 function 예제2>
- HTML
<button onclick="color_change()">background change : if</button>
<button onclick="color_change2()">background change : for</button>
- JavaScript
<script>
let chchange = [
"white",
"#f00",
"#0f0",
"#00f",
"aqua",
"purple",
"yellow",
];
let i = 0;
function color_change() {
i++;
if (i <= 6) {
document.querySelector("body").style.backgroundColor = chchange[i];
}
}
// if 구문을 이용하면 각각 출력됨
let chchange2 = [
"white",
"#f00",
"#0f0",
"#00f",
"aqua",
"purple",
"yellow",
];
function color_change2() {
for (let i = 0; i <= 6; i++) {
document.querySelector("body").style.backgroundColor = chchange2[i];
}
}
// for 구문으로 하면 마지막 것만 출력됨
</script>
0
클릭할 때마다 backgroundColor가 변하는 것을 볼 수 있다.
0
<함수 function : 지역 변수와 전역변수 알아보기>
- JavaScript
<script>
// for 구문
function a() {
for (let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
}
// if 구문
let j = 1;
function b() {
if (j == 10) return;
j++;
document.write(j + "<br>");
}
setInterval(function () {
a();
}, 1000);
</script>
위의 코드는 마지막을 보면 function a()를 출력하는 것이다.
즉, 결과를 살펴보면
0
이렇게 12345가 무한반복으로 출력되어 내려간다.
- JavaScript
<script>
// for 구문
function a() {
for (let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
}
// if 구문
let j = 1;
function b() {
if (j == 10) return;
j++;
document.write(j + "<br>");
}
setInterval(function () {
b();
}, 1000);
</script>
이번에는 function b()로 출력을 해보겠다.
0
2345678910 까지만 출력되는 이유는 j가 10이 되면 return하도록 설정했기 때문이다.
<함수 function 예제3>
- HTML
<button onclick="on()">Turn on the light</button>
<img src="../images/pic_bulbon.gif" alt="on" id="ch" />
<button onclick="off()">Turn off the light</button>
- JavaScript
<script>
function on() {
// document.getElementById("ch").src = "../images/pic_bulbon.gif";
let photo = document.getElementById("ch");
photo.setAttribute("src", "../images/pic_bulbon.gif");
photo.setAttribute("alt", "on");
}
function off() {
document.getElementById("ch").src = "../images/pic_bulboff.gif";
document.getElementById("ch").alt = "off";
}
</script>
0
아주 귀여운 예제당-
on과 off의 함수를 각각 만들어서 on 버튼을 누르면 켜지고, off 버튼을 누르면 꺼지도록
하는 예제이다. 실무에서 자주 쓰일 만한 예제였다 !
<함수 function 예제4>
- HTML
<div>
<h1>이미지 넘기기</h1>
<p onmouseover="stop()" onmouseout="start()">
<span onclick="prev()">이전</span>
<span onclick="next()">다음</span>
</p>
<img
src="../images/photo1.jpg"
alt="photo1"
id="photo"
onmouseover="stop()"
onmouseout="start()"
/>
</div>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
div {
width: 500px;
height: 300px;
margin: 0 auto;
}
div img {
width: 100%;
height: 100%;
object-fit: cover;
}
span {
display: inline-block;
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #000;
padding: 10px;
cursor: pointer;
}
span:hover {
background: #ddd;
}
- JavaScript
<script>
let i = 1;
function slide() {
let ch = document.getElementById("photo");
ch.setAttribute("src", "../images/photo" + i + ".jpg");
ch.setAttribute("alt", "photo" + i);
i++;
if (i > 6) i = 1;
}
// setInterval(function () {
// slide();
// }, 1000);
let mouse = setInterval(slide, 1000);
function stop() {
clearInterval(mouse);
}
function start() {
mouse = setInterval(slide, 1000);
}
function prev() {
i--;
if (i < 1) i = 6;
console.log(i);
document.getElementById("photo").src = "../images/photo" + i + ".jpg";
}
function next() {
i++;
if (i > 6) i = 1;
console.log(i);
document.getElementById("photo").src = "../images/photo" + i + ".jpg";
}
</script>
0
0
사용자의 사용성을 위해서 자동으로 넘어가게만 두지 않고, 마우스를 올려 이미지를
보고 있는 동안에는 이미지가 멈추도록 하는 것이다.
0
이전 버튼을 누르면 이전 이미지로 돌아가고, 다음 버튼을 누르면 다음 이미지로 넘어가도록
했다. 이 또한 실무에서 굉장히 유용하게 쓰일 것 같다.
홈페이지를 만들 때 움직이는 배너를 만드는 경우가 많은데 이를 응용하면 나도 이제 구현할
수 있을 것 같다 !
* 내용 출처
반응형