Minggu, 10 Oktober 2021

PEMROGRAMAN JAVA


1. Tag

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

<script>
document.getElementByid('demo').innerHTML = "My First JavaScript";
</script>
</body>
</html>
 
 
 
2. Window Alert

t<!DOCTYPE html>
<html>
<body>

<p>Click the botton 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>



  3. Alert


<!DOCTYPE html>
<html>
<head>
<script>
function validateForm(){
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out ");
}
}
</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>

 4. JavaScript Numeric


<!DOCTYPE html>
<html>
<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;
x = document.getElementByid('numb').value;
if (isNall(x) || x < 1|| x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementsByid('demo').innerHTML = text;
}
</script>
</body>
</html>



   5.  Scroll Back to top button


<!DOCTYPE html>

<html>

<head>

<style>

#myBtn {

display: 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 to top" button that becomes visible when the user start to scoll the page</div>


<script>

window.onsroll = function() (scrollFunction());


function scrollFunction(){

if (document.body.ScrollTop > 20|| document.documentElement,ScrollTop > 20) {

document.getElementByid('myBtn').style.display = "block";

} else {

document.getElementsByid('myBtn').style.display = "none";

}

}

function topFunction(){

document.body.ScrollTop = 0;

document.documentElement.ScrollTop = 0;

}

</script>

</body>

</html>



    6. Toggle Like and 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 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>

di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

PENERAPAN CRM PADA PERUSAHAAN KENTUCKY FRIED CHICKEN(KFC)

  Tidak semua perusahaan atau wirausahawan dapat memberikan sebuah produk yang dijual menyedari pentingnya sebuah pelayanan terhadap konsum...