DESAIN WEB - Latihan Java Script
Nama : Risa Septiana
NPM : 20312122
Kelas : IF 20 E
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElemenById("demo").innerHTML =" My Fisrt JavaScript";
</script>
</body>
</html>
2. Window alert() Method
<html>
<body>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
alert("Hello I am alert box!");
}
</script>
</body>
</html>
3. Javascript - alert
<html>
<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> 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 Can Validate Numeric Input
<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 (isNaN(x) || x < 1 ||x > 10) {
text = "Input not Valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
5. How To - Scroll Back To Top Button
<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 starts to scroll the 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>
6. How To - Toggle Like and Dislike
<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>
Komentar
Posting Komentar