PRAKTIK WEB DESAIN 2

-

Latihan - JavaScript

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "My First JavaScript";</script>
</body>
</html>

 CONTOH HASIL : 

 1. Cara membuat Window Alert

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<p>Click the button to display an alert box.</p>

<button onClick="myFunction()">Try it</button>

<script>
function myFunction(){
    alert("Hello! I am an alert box!");
}
</script>
</body>
</html>

CONTOH HASIL :



 2. Cara membuat JS Alert

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm(){
    var x = document.forms["myFrom"]["fname"].value;
    if (x == ""){
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>

<body>
<h1> Js Alert </h1>
<form name="myForm" action="/action_page_post.php" onSubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

CONTOH HASIL :


 3. Cara membuat Validate Input

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button"
onClick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction(){
    var x, text;
    
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10){
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

CONTOH HASIL : 


 4. Cara membuat Scroll Top

<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{
    dsiplay: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

#myBtn:hover {
    background-color: #555;
}
</style>
</head>

<body>
<button onClick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll a top" button that becoms visible when the user strats to scroll the page.</div>

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction(){
    if(document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
       document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function myFunction(){
    document.body.scrollTop = "0";
    document.documentElement.scrollTop = "0";
}
</script>
</body>
</html>

CONTOH HASIL : 




 5. Cara membuat Like / DisLike

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="like.dislike.min.css">
<style>
.fa{
    font-size: 50px;
    cursor: pointer;
    user-select: none;
}
.fa:hover{
    color: darkblue;
}

</style>
</head>
<body>
<h1></h1>

<p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p>

<i onClick="myFunction(this)" class="fa fa-thumbs-up"></i>

<script>
function myFunction(x){
    x.classList.toggle("fa-thumbs-down");
}

</script>
</body>
</html>
CONTOH HASIL : 



Comments

Post a Comment

Popular posts from this blog

Perkembangan dan sejarah Read Only Memory(ROM)

-
Image
 PERKEMBANGAN SEJARAH ROM Pada postingan kali ini saya akan membahas tentang perkembangan ROM (Read Only Memory), manfaat ROM dan cara kerja atau prinsip kerja ROM, yang juga merupakan tugas ketiga dalam mata kuliah perangkat keras, semoga bermanfaat. Perkembangan ROM (Read Only Memory) ROM (Read Only Memory) biasa juga disebut sebagai firmware merupakan jenis memori yang isinya tidak hilang ketika tidak mendapat aliran listrik dan pada awalnya isinya hanya bisa dibaca. ROM pada komputer disediakan oleh vendor komputer yang berisi program dan data. Di dalam sebuah PC, ROM biasa disebut sebagai BIOS (Basic Input/Output System) atau ROM-BIOS. Instruksi dalam BIOS inilah yang akan dijalankan oleh mikroprosesor ketika komputer mulai dihidupkan. Umumnya proses yang terkandung dalam BIOS secara berurutan adalah sebagai berikut: Memeriksa isi CMOS. Membuat penanganan interupsi (Interrupt Handlers) dan pengendali piranti (device    driver). Menginisialisasi register dan...
Read more

Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer

-
Image
Nama: Kinanti Anggraini Utami NPM: 20312085 Kelas: IF20C Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer  Sejarah Divide & Conquer Pada zaman dahulu, divide and conquer merupakan strategi militer yang dikenal dengan nama divide ut imperes. saat ini strategi tersebut menjadi strategi fundamental di dalam imlmi komputer dengan nama divide and qonqer. algoritma divide dan qonquer ini ditemukan oleh seorang ilmuan Rusia bernama Anatolii Alexeevich Karatsuba pada tahun 1960. pada mulanya beliau menemukan algoritma yang lebih mangkus untuk mengalikan dua buah bilangan bulat yang besar. Algoritma divide and conquer di mana sub-masalah berukuran kira-kira setengah dari ukuran aslinya, memiliki sejarah yang panjang. Sementara deskripsi yang jelas tentang algoritma pada komputer muncul pada tahun 1946 dalam sebuah artikel oleh John Mauchly, gagasan untuk menggunakan daftar item yang disortir untuk memfasilitasi pencarian berasal dari setidaknya sejauh Babylonia pada 200 SM....
Read more

Implementasi Algoritma Divide And Conquer Pada Sorting dan Searching

-
Image
  Nama       : Kinanti Anggraini Utami NPM      : 20312085 Kelas       : IF 20  Implementasi Algoritma Divide And Conquer Pada Sorting dan Searching Komputer pada awalnya diciptakan sebagai perangkat untuk melakukan kalkulasi secara otomatis dan akurat. Meskipun awalnya hanya berfokus pada kalkukasi numerik, komputer modern yang dijumpai sekarang telah melakukan kalkulasi pada banyak hal, seperti teks ataupun gambar. Berbagai kalkulasi dan analisa yang dilakukan komputer biasanya diimplementasikan melalui perangkat lunak. Dengan semakin besarnya ruang lingkup hal-hal yang dilakukan oleh komputer, perangkat lunak yang dikembangkan juga menjadi semakin kompleks. Algoritma, sebagai bagian dari perangkat lunak yang melakukan pemrosesan, juga memerlukan berbagai teknik baru. Misalkan, untuk menghitung total jumlah dari bilangan-bilangan yang ada di dalam sebuah list, kita dapat menggunakan perulangan se...
Read more