Langsung ke konten utama

Latihan JavaScript

 1. The <script> Tag

<html>


<head>


<meta charset="utf-8">


<title>Untitled Document</title>


</head>


<body>


<h3>javascript in body</h3>


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


</body>


<script>


document.getElementById("demo").innerHTML="my first JavaScript";


</script>


</html>


2. Window alert() Method





<!doctype html>


<html>


<head>


<meta charset="utf-8">


<title>Untitled Document</title>


</head>




<body>


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


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




<script>


function myFunction() {


 alert("hello i am an alert box");


}


</script>


</body>


</html


3. Javascript - alert




<!doctype html>


<html>


<head>


<meta charset="utf-8">


<title>Untitled Document</title>


</head>




<head>


<script>


function validateForm(){


var x = document.forms["myForm"]"fname"].value;


if (x == "") {


alert("name must be filled out");


return false;


}


}


</script>


</head>


<body>


<h1>Is Alert</h1>


<form name="myForm" action="/action_page_post.php" onsubmit="return validate()" method="post">




name: <input type="text" name="frame">


<input type="submit" value="submit">


</form>


</body>


</html>


4. JavaScript Can Validate Numeric 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 i and 10:</p>



<input id="numb">



<button type="button"

onclick="myFunction()">submit</button>

 <p id="demo"</p>

<script>

 function myFunction(){

 var x, text;

 x = document.getElementById("numb").value;

 

 if (isNaN(x)||x<1||x>10){

 } else {

 text = "input ok";

 }

 document.getElementById("demo").innerHTML = text;

 }

 </script>

</body>

</html>



5. How To  Scroll Back To Top Button



<!doctype html>


<html>


<head>


<meta charset="utf-8">


<title>Untitled Document</title>


</head>


<head>


<style>



#myBtn {


display: none;


position: fixed;


button: 20px;


right: 30px;


z-index: 99;


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 to top" button that becomes visible when the user starts to scroll to page </div>




<script>


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";


}


}


function topFunction(){


document.body.scrollTop = 0;


document.documentElement.scrollTop = 0;


}

</script>

</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

Implementasi Algoritma Divide And Conquer Pada Sorting Dan Searching

1.   Implementasi Algoritma Divide and Conquer Merge sort Beberapa algoritma mengimplementasikan konsep rekursi untuk menyelesaikan permasalahan. Permasalahan utama kemudian dipecah menjadi sub-masalah, kemudian solusi dari sub-masalah akan membimbing menuju solusi permasalahan utama. Pada setiap tingkatan rekursi, pola tersebut terdiri atas 3 langkah. 1. Divide     Memilah masalah menjadi sub masalah 2. Conquer     Selesaikan sub masalah tersebut secara rekursif. Jika sub-masalah tersebut cukup ringkas dan sederhana, pendekatan penyelesaian secara langsung akan lebih efektif 3. Kombinasi     Mengkombinasikan solusi dari sub-masalah, yang akan membimbing menuju penyelesaian atas permasalahan utama Seperti yang telah dijelaskan sebelumnya, Merge sort menggunakan pola divide and conquer. Dengan hal ini deskripsi dari algoritma dirumuskan dalam 3 langkahberpola divide-and-conquer. Berikut menjelaskan langkah kerja dari Merge sort. 1. Divide   ...
Posting Komentar
Baca selengkapnya

Sejarah, Definisi dan Cara Kerja Algoritma Divide and Conquer

    1.          Sejarah Algoritma Devide and Conquer             Awal dari algoritma ini utamanya adalah pengurangan dan penaklukan - masalah       asli secara berturut-turut dipecah menjadi sub-masalah tunggal, dan memang dapat          diselesaikan secara berulang. Pencarian biner, algoritma penurunan-dan-taklukkan 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 diurutkan untuk memfasilitasi pencarian tanggal kembali setidaknya sejauh Babylonia pada 200 SM. Algoritma penurunan-dan-taklukkan kuno lainnya adalah algoritma Euclidean untuk menghitung pembagi persekutuan terbesar dari dua bilangan dengan mengurangi...
Posting Komentar
Baca selengkapnya

Implementasi Algoritma Branch & Bound Pada Masalah Knapsack

   Pengertian Algoritma Branch and Bound Algoritma Branch and Bound atau algoritma B&B adalah salah satu dari algoritma yang digunakan untuk menyelesaikan masalah dalam pencarian jalur. Atau suatu algoritma yang mempelajari bagaimana cara memperkecil suatu Search Tree (pohon pencarian) menjadi sekecil mungkin. Metode ini terdiri dari 2 langkah, yaitu: Branch (Cabang) Membuat semua cabang dari pohon pencarian yang mungkin menuju ke solusi. Bound (Batas) Mencari dan menghitung node yang merupakan active node (E-node) dan node yang merupakan dead node (D-node) dengan menggunakan suatu syarat, yaitu  syarat batas constraint . Teknik Algoritma Branch and Bound Algoritma Branch and Bound dapat menggunakan beberapa titik, yaitu : 1. Least Cost Branch and Bound Teknik ini akan menghitung cost dari setiap node yang ada. Node yang memilki cost terkecil diantara node lain, dianggap memiliki kemungkinan paling besar menuju solusi. Tahap : node yang memiliki cost terendah akan dib...
Posting Komentar
Baca selengkapnya