-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 5f04bc6
Showing
45 changed files
with
1,446 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
const p3 = document.querySelector(".p3"); | ||
|
||
function gantibgp3() { | ||
p3.style.backgroundColor = "blue"; | ||
} | ||
|
||
//==============================================================> | ||
//== event handler - inline HTML attribute (TIDAK DISARANKAN) ==> | ||
//==============================================================> | ||
|
||
// .. sudah di tambahkan di HTML .. | ||
|
||
|
||
|
||
//====================================> | ||
//== event handler - element method ==> | ||
//====================================> | ||
|
||
const p2 = document.querySelector(".p2"); | ||
p2.onclick = gantibgp2; | ||
|
||
function gantibgp2() { | ||
p2.style.backgroundColor = "red"; | ||
} | ||
|
||
|
||
|
||
//===================================> | ||
//== addEventListener (DISARANKAN) ==> | ||
//===================================> | ||
|
||
const p4 = document.querySelector("section#b p"); | ||
|
||
p4.addEventListener("click", function () { | ||
const ul = document.querySelector("section#b ul"); | ||
|
||
const liBaru = document.createElement("li"); | ||
const textLiBaru = document.createTextNode("item baru"); | ||
|
||
liBaru.appendChild(textLiBaru); | ||
|
||
ul.appendChild(liBaru); | ||
}) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<title>DOM Traversal</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"> | ||
</head> | ||
|
||
<body> | ||
|
||
<div class="container"> | ||
|
||
<div class="card"> | ||
<img src="img/sandhika.jpeg" width="96" height="96"> | ||
<span class="nama">Sandhika Galih</span> | ||
<span class="telp">08123456789</span> | ||
<span href="" class="close">×</span> | ||
</div> | ||
<div class="card"> | ||
<img src="img/ardy.jpeg" width="96" height="96"> | ||
<span class="nama">Ardy Wirasaputra</span> | ||
<span class="telp">08123456789</span> | ||
<span href="" class="close">×</span> | ||
|
||
</div> | ||
<div class="card"> | ||
<img src="img/cici.jpeg" width="96" height="96"> | ||
<span class="nama">Cici Awalia</span> | ||
<span class="telp">08123456789</span> | ||
<span href="" class="close">×</> | ||
</div> | ||
<div class="card"> | ||
<img src="img/zahra.jpeg" width="96" height="96"> | ||
<span class="nama">Zahra Devita</span> | ||
<span class="telp">08123456789</span> | ||
<span href="" class="close">×</> | ||
</div> | ||
|
||
</div> | ||
|
||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
// event handling | ||
// const close = document.querySelector(".close"); | ||
// const card = document.querySelector(".card"); | ||
|
||
// close.addEventListener("click", () => { | ||
// card.style.display = "none"; | ||
// }) | ||
|
||
|
||
// DOM traversal | ||
// const close = document.querySelectorAll(".close"); | ||
|
||
// for (let i = 0; i < close.length; i++) { | ||
// close[i].addEventListener("click", (e) => { | ||
// // close[i].parentElement.style.display = "none"; | ||
// e.target.parentElement.style.display = "none"; | ||
// }) | ||
// } | ||
|
||
// DOM traversal best practice looping | ||
// const close = document.querySelectorAll(".close"); | ||
|
||
// close.forEach((el) => { | ||
// el.addEventListener("click", (e) => { | ||
// e.target.parentElement.style.display = "none"; | ||
// e.preventDefault(); | ||
// console.log(e); | ||
// }); | ||
// }); | ||
|
||
|
||
// DOM Event Bubbling | ||
// const close = document.querySelectorAll(".close"); | ||
// const cards = document.querySelectorAll(".card"); | ||
|
||
// cards.forEach((card) => { | ||
// card.addEventListener("click", () => { | ||
// alert("ok"); | ||
// }) | ||
// }); | ||
|
||
// close.forEach((el) => { | ||
// el.addEventListener("click", (e) => { | ||
// e.target.parentElement.style.display = "none"; | ||
// e.preventDefault(); | ||
// e.stopPropagation(); | ||
// }); | ||
// }); | ||
|
||
|
||
// cara memanfaatkan event bubbling ketika ada elemen baru yg ditambahkan tanpa script -> dengan cara tambahkan event nya pada parent pembungkusnya (container) | ||
|
||
const container = document.querySelector(".container"); | ||
|
||
container.addEventListener("click", (e) => { | ||
if (e.target.className == "close") { | ||
e.target.parentElement.style.display = "none"; | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
body { | ||
margin: 50px; | ||
font-family: arial; | ||
background-color: #666; | ||
} | ||
|
||
.container { | ||
width: 900px; | ||
margin: auto; | ||
} | ||
|
||
.card { | ||
display: inline-block; | ||
width: 220px; | ||
padding: 0 80px; | ||
height: 80px; | ||
font-size: 16px; | ||
line-height: 80px; | ||
border-radius: 40px; | ||
background-color: #f1f1f1; | ||
margin: 20px; | ||
position: relative; | ||
text-align: center; | ||
} | ||
|
||
.card img { | ||
float: left; | ||
margin: 0 10px 0 -80px; | ||
height: 80px; | ||
width: 80px; | ||
border-radius: 50%; | ||
position: relative; | ||
} | ||
|
||
.card .nama, | ||
.card .telp { | ||
display: block; | ||
line-height: 20px; | ||
padding: 0 5px; | ||
} | ||
|
||
.card .nama { | ||
margin-left: 20px; | ||
margin-top: 20px; | ||
font-size: 20px; | ||
} | ||
|
||
.card .telp { | ||
margin-left: 20px; | ||
margin-top: 5px; | ||
font-size: 16px; | ||
color: #aaa; | ||
} | ||
|
||
.card .close { | ||
font-size: 24px; | ||
font-weight: bold; | ||
color: #999; | ||
position: absolute; | ||
top: 0; | ||
right: 30px; | ||
cursor: pointer; | ||
} | ||
|
||
.card:hover .close { | ||
color: red; | ||
} | ||
|
||
.card a { | ||
text-decoration: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
// manipulation elemen | ||
|
||
|
||
// element.innerHTML -> meyisipkkan elemen html beserta isi pada elemen yg ditentukan -> bersifat menimpa (mengubah seluruh elemen di dalam nya) | ||
|
||
const sectionA = document.getElementById("a"); | ||
|
||
sectionA.innerHTML = "<em>ditimpa oleh innerHTML</em>" | ||
|
||
// element.innerText -> menyisipkan hanya teks pada elemen yg ditentukan -> bersifat menimpa (mengubah seluruh elemen di dalamnya) | ||
|
||
const em = document.querySelector("em") | ||
em.innerText = "ditimpa oleh innerText" | ||
|
||
// element.style.<property> -> menyisipkan style css pada elemen yg ditentukan -> jika properti terdapat dua kata maka gunakan camelCase -> nilai dari properti menggunakan tanda petik seperti string | ||
|
||
sectionA.style.textAlign = "center"; | ||
sectionA.style.fontWeight = "bold"; | ||
sectionA.style.textTransform = "uppercase"; | ||
|
||
// element.setAttribute(nama, nilai) - menyisipkan attribute | ||
|
||
em.setAttribute("id", "teksMiring"); | ||
em.setAttribute("name", "teksMiring"); | ||
|
||
// element.getAttribute(nama, nilai) - mendapatkan attribute | ||
|
||
em.getAttribute("id", "teksMiring") | ||
|
||
// element.removeAttribute(nama, nilai) - menghapus attribute | ||
|
||
em.removeAttribute("name", "teksMiring"); | ||
|
||
// element.classList.add() -> menambahkan class barru dan tidak menimpa class yg lain | ||
|
||
em.setAttribute("class", "teksMiring"); | ||
|
||
em.classList.add("teksMiring2"); | ||
em.classList.add("teksMiring3"); | ||
|
||
// elemet.classList.remove() -> menghapus salah satu class | ||
|
||
em.classList.remove("teksMiring3"); | ||
|
||
// element.classList.toggle() -> jika tidak maka tambahkan, dan jika ada maka hapus atau hilangkan | ||
|
||
em.classList.toggle("darkMode"); | ||
|
||
// element.classList.contains() -> mencari class yg ditentukan apakah ada atau tidak -> mengambalikan boolean | ||
|
||
em.classList.contains("teksMiring2"); /** true */ | ||
|
||
// element.classList.replace("lama", "baru") -> menggantikan class | ||
|
||
em.classList.replace("teksMiring2", "teksMiringDua") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
// manipulation node | ||
|
||
|
||
// node.appendChild() -> menyisipkan elemen baru ke urutan terakhir pada parent tanpa menimpa elemen lain | ||
|
||
const pBaru = document.createElement("p") | ||
const textPBaru = document.createTextNode("paragraph baru"); | ||
|
||
pBaru.appendChild(textPBaru); | ||
|
||
const parentP = document.getElementById("a"); | ||
parentP.appendChild(pBaru); | ||
|
||
|
||
// node.insertBefore() -> menyisipkan elemen baru ke urutan yang ditentukan tanpa menimpa elemen lain | ||
|
||
const liBaru = document.createElement("li"); | ||
const textLiBaru = document.createTextNode("item baru"); | ||
|
||
liBaru.appendChild(textLiBaru); | ||
|
||
const parentLi = document.getElementsByTagName("ul")[0]; | ||
const li2 = document.getElementsByTagName("li")[1]; | ||
|
||
parentLi.insertBefore(liBaru, li2); | ||
|
||
|
||
// parentnode.removeChild() -> menghapus salah satu elemen child pada parent | ||
|
||
const link = document.querySelector("a"); | ||
parentP.removeChild(link); | ||
|
||
|
||
// parentnode.replaceChild() -> mengganti salah satu elemen child pada parent | ||
|
||
const sectionB = document.getElementById("b"); | ||
const p4 = sectionB.querySelector("p"); | ||
|
||
const h2 = document.createElement("h2"); | ||
const judulBaru = document.createTextNode("Judul Baru!"); | ||
|
||
h2.appendChild(judulBaru); | ||
|
||
sectionB.replaceChild(h2, p4); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<title>DOM Traversal</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"> | ||
</head> | ||
|
||
<body> | ||
|
||
<div class="container"> | ||
|
||
<div class="card"> | ||
<img src="img/sandhika.jpeg" width="96" height="96"> | ||
<span class="nama">Sandhika Galih</span> | ||
<span class="telp">08123456789</span> | ||
<a href="" class="close">×</a> | ||
</div> | ||
<div class="card"> | ||
<img src="img/ardy.jpeg" width="96" height="96"> | ||
<span class="nama">Ardy Wirasaputra</span> | ||
<span class="telp">08123456789</span> | ||
<a href="" class="close">×</a> | ||
|
||
</div> | ||
<div class="card"> | ||
<img src="img/cici.jpeg" width="96" height="96"> | ||
<span class="nama">Cici Awalia</span> | ||
<span class="telp">08123456789</span> | ||
<a href="" class="close">×</a> | ||
</div> | ||
<div class="card"> | ||
<img src="img/zahra.jpeg" width="96" height="96"> | ||
<span class="nama">Zahra Devita</span> | ||
<span class="telp">08123456789</span> | ||
<a href="" class="close">×</a> | ||
</div> | ||
|
||
</div> | ||
|
||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.