Javascript Loops Part-1
Code Github: https://github.com/rezaldyabidin266/Javascript_Code_Snippet/tree/gh-pages
Code Snippet Javascript Loops Part 1
Index.html
<!DOCTYPE html>
<html lang="en">
<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>Js Loops</title>
<style>
* {
font-family: monospace;
}
</style>
</head>
<body>
<!-- For Loops -->
<h2>For Loops</h2>
<h3>for (let i = 1; i <= 5; i++) { }; => (1 2 3 4 5)</h3>
<button id="btnForLoop">Run For Loop</button>
<p id="forLoop"></p>
<!-- While Loops -->
<h2>While Loops</h2>
<h3>let i = 6; while(i <= 10){ i++ }; => (6,7,8,9,10)</h3>
<button id="btnWhileLoop">Run While Loops</button>
<p id="whileLoop"></p>
<!-- Do While Loops -->
<h2>Do While Loops</h2>
<h3>let i = 11; do{ i++ } while(i <= 15); => (11,12,13,14,15)</h3>
<button id="btnDoWhileLoop">Run Do While Loops</button>
<p id="doWhile"></p>
<!-- External JS File -->
<script type="text/javascript" src="index.js"></script>
<!-- External JS File -->
</body>
</html>Index.js
// For Loops
let forLoopHtml = document.getElementById("forLoop");
const btnForLoop = document.getElementById("btnForLoop");
btnForLoop.addEventListener("click", () => {
for (let i = 1; i <= 5; i++) {
setTimeout(() => {
forLoopHtml.innerText += `no: ${i} \n`;
}, i * 800);
}
});
// End For Loops
// While Loops
let whileLoopsHtml = document.getElementById("whileLoop");
const btnWhileLoop = document.getElementById("btnWhileLoop");
btnWhileLoop.addEventListener("click", () => {
let i = 6;
while (i <= 10) {
(function (i) {
setTimeout(function () {
whileLoopsHtml.innerText += `no: ${i} \n`;
}, 700 * i);
})(i++);
}
});
// EndWhile Loops
// Do While Loops
let doWhileHtml = document.getElementById("doWhile");
const btnDoWhileLoop = document.getElementById("btnDoWhileLoop");
let i = 11;
btnDoWhileLoop.addEventListener("click", () => {
do {
(function (i) {
setTimeout(function () {
doWhileHtml.innerText += `no: ${i} \n`;
}, 700 * i);
})(i++);
} while (i <= 15);
});// End Do While Loops
Komentar
Posting Komentar