Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membahas tentang cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Dimana nanti kita akan membuat text muncul satu persatu seperti terlihat efek
mengetik. Langkah pertama untuk Membuat Efek Mengetik Pada Text Menggunakan Javascript adalah membuat struktur htmlnya terlebih dahulu, seperti pada script di bawah ini. Jika sudah selesai maka teman-teman bisa tambahkan style cssnya dan taruh di dalam head, scriptnya sebagai berikut ya teman-teman. Lalu langkah
terakhir kita buat script javascriptnya dan tempatkan di atas penutup tag body ya teman-teman. Scriptnys sebagai berikut ya teman-teman. <script>
var i = 0;
var txt = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ';
var speed = 100;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
</script>Jika sudah selesai semua maka teman-teman jangan lupa di save terlebih dahulu ya dengan format dot html. Teman-teman bisa perhatikan script di atas. Settimeoutnya teman-teman bisa ubah dengan cara mengubah nilai dari variable speed sesuai keinginan teman-teman. Jika teman-teman jalankan di browser masing-masing maka efek mengetik pada text yang kita buat di variable txt akan muncul satu persatu ketika kita mengkllik button yang sudah kita buat di html. Demikian artikel tentang cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Sampai jumpa di artikel selanjutnya ya teman-teman. Semoga bermanfaat dan selamat mencoba teman-teman. Dalam pengembangan suatu website seringkali kita dapati ketika menekan suatu tombol akan muncul sebuah tulisan. Nah. Tulisan tersebut merupakan suatu fitur yang bekerja berdasarkan javascript yang telah terdapat di dalam halaman suatu website html. Website dengan menggunakan javascript tentu akan lebih menarik dan efisian. Seperti ulasan artikel saya sebelumnya yang berjudul
keunggulan javascript. Kali ini sistemit.com akan berbagi tutorial mengenai pembuatan suatu tombol yang mana ketika tombol tersebut ditekan maka akan menampilkan suatu teks hasil dari tindakan klik tersebut. 1. Model 1 – Menampilkan Teks Biasa <script type="text/javascript">
function showDiv(toggle){
document.getElementById(toggle).style.display = 'block';
}
</script>
<input type="button" name="answer" onclick="showDiv('toggle')" value="Tunjukkan"/>
<div id="toggle" style="display:none">Halo. Anda Berhasil</div>
Simpan kode di atas ke dalam file berekstensi html lalu jalankan di browser anda. Penjelasan : Function ShowDiv(tooggle) merupakan fungsi yang ketika tombol di klik akan berjalan 2. Model 2 – Menampilkan Dialog box <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>Teks yang diinginkan akan tampil secara otomatis di sini</p>
</div>
<button id="opener">Buka Dialog</button>
</body>
</html>
Jika anda ingin menjalankan source code di atas secara offline, download file berekstensi .js pada baris ke 7, 8, dan 9 kode di atas dan sesuaikan posisi nya sesuai dengan direktori anda. File yang perlu di download antara lain adalah : 1. http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css Copy semua teks javascript lalu buat dan simpan dengan file berekstensi .js kemudian anda tinggal menggantinya sesuai letak folder yang anda inginkan. Bagaimana ?? gampang kaan.Langsung sedot script bagi yang ga mau ribet : GET SCRIPTDemikanlah tutorial untuk membuat tombol javascript yang bereaksi ketika diklik akan memunculkan info teks. Semoga Bermanfaat dan Jangan Lupa di Share & CommentBagaimana cara menjalankan JavaScript?Mengaktifkan JavaScript di browser Anda. Buka Chrome di komputer Anda.. Klik. Setelan.. Klik Keamanan dan Privasi.. Klik Setelan situs.. Klik JavaScript.. Pilih Situs dapat menggunakan JavaScript.. Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?Cara membuat JavaScript di HTML secara langsung
Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>
Apa itu document write pada JavaScript?Menggunakan Fungsi document.write()
Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript. Dalam objek document , terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML. Selain fungsi write() , objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.
Manakah script yang digunakan untuk memanggil file JavaScript?Kode JavaScript di input menggunakan tag <script>. Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.
|
Cara menggunakan text javascript
Pos Terkait
Copyright © 2024 idkuu.com Inc.
