Mini Project Dengan JS by Mikel ibrahim
Java Script
Introduction
• Javascript merupakan bahasa pemrograman yang khusus dibuat untuk
mengembangkan website.
• Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang
web developer setelah HTML dan CSS.
• Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai
berikut:
1. HTML: Berfungsi untuk mendefinisikan konten/layout darisebuah web
2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website
3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman
web.
Bagaimana menggunakan Javascript?
• Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.
1. Di dalam elemen body, menggunakan tag script.
2. Di dalam elemen head, menggunakan tag script.
3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal
main.js. Nama file bisa bebas. Kemudian anda harus menambahkan
baris berikut di elemen head dari dokumen HTML: <script src="main.js"><script>
Mini project dengan menggunakan javascript:
1. Konversi celscius ke derajat
<body>
<script src="script.js"></script>
<h2>Project 1</h2>
<button onclick="suhu()">Convert</button>
<p id="total"></p>
</body>
<script>
function suhu(){
var cel = prompt("Masukan suhu farenheit")
var far = (cel - 32)*5/9
if (isNaN(far)){
alert("tidak valid")
}else{
document.getElementById("total").innerHTML = "jadi " + cel +
" derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"
}
}
</script>
Hasil dari kode tersebut adalah
2. Membuat sebuah list, dan sebuah button.
Jika button diklik, setiap item list yang
genap akan berubah menjadi biru dan
tebal.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
<button onclick="ubah()">ubah warna</button>
ini kode javascriptnya
function ubah() {
var listItem = document.getElementsByTagName("li")
for (var i = 0; i < listItem.length; i++){
if((i + 1)% 2 === 0)
listItem[i].classList.add("warna")
}
}
3. Membuat jam digital yang berubah warna bordernya di setiap detik
html:
<div id="clock"></div>
css:
#clock {
width: 120px;
font-family: 'Arial', sans-serif;
font-size: 2em;
padding: 10px;
border: 5px solid red; /* Warna default saat detik genap */
}
.blue-border {
border-color: blue !important;
}
JS:
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var clockElement = document.getElementById('clock');
clockElement.innerHTML = `${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds
< 10 ? '0' : ''}${seconds}`;
// Ganti warna border sesuai dengan detik (ganjil: biru, genap: merah)
if (seconds % 2 === 0) {
clockElement.classList.remove('blue-border');
} else {
clockElement.classList.add('blue-border');
}
}
setInterval(updateClock, 1000); // Perbarui setiap detik
updateClock(); // Pembaruan pertama kali saat halaman dimuat
OUTPU:
Komentar
Posting Komentar