Contoh javascript pada html

By On Saturday, September 17th, 2022 Categories : Tanya Jawab

Contoh javascript pada html – Hi kawan kawan semua, Terima Kasih sudah berkunjung ke web site TrendWisata dotcom ini. Kali ini, saya di portal TrendWisata dotcom ingin share tanya jawab yang keren tentang Contoh javascript pada html. Sebaiknya om dan tante menyimaknya berikut ini:

Coding JavaScript ditulis di dalam elemen script. Elemen script dibuka memakai tag <script> dan ditutup memakai tag </script>.

Tutorial sebelumnya : Pengertian JavaScript

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

Tag script mempunyai atribut type. Atribut type tidak wajib ditulis, sifatnya hanya opsional.
Cara penulisan atribut type yang lazim adalah
<script type=”text/javascript”>.

Terdapat tiga pilihan lokasi coding JavaScript, pertama di dalam elemen head, kedua di dalam elemen body dan ketiga sebagai file eksternal yang terpisah.

JavaScript Dalam Elemen Head

Coding JavaScript dapat diletakkan di dalam elemen head. Tag <script> diletakkan di dalam tag <head>.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() 
  document.getElementById("demo").innerHTML = "Paragraph changed.";

</script>
</head>
<body>

<h2>A Web Page</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Pada contoh di atas diperlihatkan fungsi myFunction di dalam tag
script. Fungsi ini akan dipanggil apabila tombol Try it ditekan. Kita akan membahas fungsi JavaScript pada topik selanjutnya.

JavaScript Dalam Elemen Body

Coding JavaScript dapat diletakkan di dalam elemen body. Tag <script> diletakkan di dalam tag <body>.

<!DOCTYPE html>
<html>
<body>

<h2>A Web Page</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() 
  document.getElementById("demo").innerHTML = "Paragraph changed.";

</script>

</body>
</html>

Sangat disarankan untuk meletakkan tag script pada bagian paling bawah elemen body. Praktek ini akan mempercepat proses penampilan dokumen HTML pada web browser. Elemen-elemen HTML yang berada
di atas tag script akan ditampilkan terlebih dahulu, setelah itu baru coding JavaScript dieksekusi.

JavaScript Dalam File Eksternal

Coding JavaScript juga dapat diletakkan dalam file yang terpisah dari dokumen HTML. File ini mempunyai ekstensi js. Fungsi myFunction dapat dimasukkan ke dalam file myScript.js.

function myFunction() 
  document.getElementById("demo").innerHTML = "Paragraph changed.";

Kita dapat memakai file myScript.js pada dokumen HTML yang terpisah. Pergunakan atribut src pada tag script. Atribut src berisi URL file eksternal
yang akan dipakai.

<script src="https://kafesentul.com/myScript.js"></script>

Pada contoh di atas diperlihatkan fungsi myFunction di dalam myScript.js dapat dipanggil dari dokumen HTML yang terpisah.

Kelebihan Memakai File Eksternal

Pada prakteknya, JavaScript dalam file eksternal lebih banyak digunakan. Praktek ini mempunyai beberapa kelebihan :

  • Memisahkan coding HTML dengan coding JavaScript
  • Membuat dokumen HTML menjadi lebih mudah dibaca dan dimengerti
  • File eksternal JavaScript dapat
    dimasukkan kedalam cache sehingga mempercepat proses menampilkan dokumen HTML

Kita juga dapat memakai lebih dari satu file eksternal JavaScript seperti contoh di bawah ini.

<script src="https://kafesentul.com/myScript1.js"></script>
<script src="myScript2.js"></script>

URL File Eksternal

URL file eksternal bisa berupa URL absolute ataupun URL relative.

Contoh untuk URL absolute.

<script src="https://www.nextgen.co.id/tutorial/js/myScript.js"></script>

Contoh untuk URL relative.

<script src="https://kafesentul.com/js/myScript.js"></script>
<script src="https://kafesentul.com/myScript.js"></script>

Tutorial selanjutnya :
Output JavaScript
Daftar tutorial : Tutorial Belajar JavaScript

Hallo teman-teman, pernah mendengar istilah JavaScript? Pasti kamu pernah mendengarnya, kan? Lalu, seperti apa sih JavaScript itu? Jika kamu seorang programmer web, pasti sudah familiar dengan yang satu ini. Sebaliknya, bagi kamu yang baru mulai terjun ke dunia programmer mesti tahu apa itu JavaScript?

Untuk artikel terbaru, silakan baca
“Apa itu bahasa pemrograman JavaScript? Developer wajib tahu.”

Tahukah kamu bahwa saat ini ada kelas Belajar Dasar Pemrograman JavaScript yang disusun oleh tim expert Dicoding bersama praktisi industri dan divalidasi oleh tim dari AWS (Amazon Web Services)? AWS
menyediakan kelas berbahasa Indonesia di bidang Back-End Developer dan disediakan secara GRATIS melalui program beasiswa Cloud and Back-End Developer Scholarship Program. Beasiswanya untuk umum, tanpa syarat, dan sepenuhnya gratis. Untuk dapat cukup daftar dan isi formulir pendaftaran singkat di
aws.dicoding.com. Setelah daftar, pasti dapat!

Biasanya para programmer menggunakan JavaScript untuk memudahkan pekerjaan mereka dan membuat automasi dalam beberapa jenis pemrograman.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai
developer profesional.

Daftar Sekarang

Karena itulah, JavaScript begitu penting untuk seorang programmer. Eits, tidak perlu khawatir bagi kamu yang baru memulai atau ingin menjadi programmer JavaScript ya. Kali ini kita akan berkenalan dengan
JavaScript, serta fungsi dan contohnya. Simak tuntas sobat!

Apa Itu JavaScript?

Tahukah kamu bahwa JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS, nah sekarang kamu jadi tahu bahwa
JavaScript dapat meningkatkan fungsionalitas pada halaman web. Bahkan dengan JavaScript ini kamu bisa membuat aplikasi, tools, atau bahkan game pada web.

Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis interpreter, sehingga kamu tidak memerlukan compiler untuk menjalankannya. JavaScript memiliki fitur-fitur seperti berorientasi objek, client-side,
high-level programming, dan loosely typed.

Sejarah JavaScript

Bagi kamu yang masih awam, mungkin penasaran bagaimana awal mulanya diciptakan bahasa pemrograman ini. 

Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai berkembang. JavaScript didesain oleh Brendan Eich yang merupakan karyawan Netscape. Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi bernama JavaScript. 

Versi awal bahasa JS hanya dipakai di kalangan Netscape
beserta dengan fungsionalitas pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya menjadi JavaScript atau JS hingga saat ini. Pada tahun 2016, 92% web diketahui telah menggunakan JavaScript. Itulah mengapa JavaScript atau JS terus berkembang.

Mengapa harus pakai
JavaScript?

Sebagai developer zaman now. JavaScript menjadi salah satu bahasa pemrograman yang sangat populer. Mengapa? Di tahun 2016 saja sudah ada sekitar 92% pembuatan web menggunakan JS, apalagi di tahun-tahun sekarang. Tentunya web yang dibuat dengan JS akan lebih dinamis dan interaktif. Banyak perusahaan top global yang sudah mengimplementasikan JS sebagai bahasa pemrograman andalannya. Kita bisa buktikan juga bahwa JS itu populer dan menjadi bahasa yang paling banyak digunakan
di Github.

Seperti FB, Linkedin, Trello, Medium, bahkan Google, salah satu bahasa yang digunakan di antaranya adalah JS (JavaScript). Itulah alasan mengapa para developer berlomba-lomba untuk jadi yang terbaik dalam mempelajari JavaScript.

Fungsi JavaScript

Kamu pasti sudah paham tentunya dengan fungsi JavaScript. Selain
membuat web jadi lebih dinamis dan interaktif, JS digunakan juga untuk proses logika data. “Intinya, fungsi JS tidak hanya soal urusan
front end, tapi juga sekaligus dipakai untuk urusan back end,” imbuh developer.

Keunggulan JavaScript

Sepertinya kamu sudah mengetahui keunggulan dari JavaScript, tapi saya akan paparkan lebih dalam lagi deh hehe. Inilah beberapa keunggulan JS yang membuat tekadmu kuat untuk mempelajarinya.

1. General Purpose

Saat ini JavaScript tidak hanya digunakan di sisi client (browser) saja lho. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu kamu bisa mengembangkan
back-end (server),
console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript.

2. Mudah untuk Dipelajari

Setiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan bisa dilihat dari beberapa faktor. Menurut saya sih, syntax atau penulisan jadi salah satu faktor yang paling penting buat
dipelajari. JS masih tergolong mudah dipelajari asalkan kamu serius dalam belajar dan selalu berani melakukan
improvement atau bermain-main dengan itu. Masih belum percaya JS mudah dipelajari? Baiklah, ini perbandingan JS dengan beberapa bahasa lainnya. Contohnya dalam menampilkan “Hello World!” ya.

Bahasa C++

#include <iostream>

intmain()

  std::cout<<“Hello, world!\n”;

  return0;

Bahasa Java

classAppHelloWorld

publicstaticvoidmain(String[]args)

        
System.out.println(“Hello World!”);    

    

Bahasa JavaScript

console.log(‘Hello World!’)

Kode program di atas menampilkan hasil yang sama yaitu “Hello World!”. Gimana? terbukti kan, JS jauh lebih ringkas dalam hal penulisan.

3. Sangat Powerfull

Kamu harus tau! JavaScript termasuk bahasa pemrograman yang sudah mature, sifat inilah yang membuat JavaScript sangat powerfull. Dulu, website basisnya masih PHP atau
mungkin saja kita pakai WordPress. Semua logika web dibuat dan bergantung pada sisi server. Inilah yang membuat web browser lebih statis. 

Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua berkat JavaScript.

4. Banyak perusahaan yang mengimplementasikan JS

Siapa yang nggak mau kerja di
startup? Iya pasti maulah, jika gajinya besar hehe. Kamu akan dibutuhkan perusahaan seperti startup jika serius untuk belajar JavaScript. 

JavaScript menempati urutan ke-4 soal gaji developer tertinggi di tahun 2018 dengan rata-rata pendapatan adalah $105,415 (Techrepublic). Bayangkan jika dirupiahkan? Apalagi pada tahun ini bisa makin lebih besar nih. Dan lebih manisnya lagi, jika kamu
bekerja sebagai developer Google dsb karena mereka semua sudah menerapkan JavaScript sebagai penunjang teknologi. Dan itupun juga tergantung pada level pemrograman kamu dan juga posisi kerja.

5. Dukungan Komunitas

Inilah salah satu alasan JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika kamu sedang mengembangkan sebuah aplikasi, serta  menemukan
bug. Dengan dukungan komunitas yang baik, maka kamu akan lebih mudah untuk menemukan solusi dari bug tersebut.

Apa saja sih tools yang harus disiapkan untuk belajar JavaScript? Khusus bagi pemula, kamu cukup menggunakan tools berikut:

  1. Web Browser (Google Chrome, Firefox, Opera,
    dll)
  2. Teks Editor (rekomendasi: VS Code)
  3. Node js 

Mengenal Console JavaScript

Banyak orang yang mengatakan, “Belajar JavaScript itu susah, tidak seperti belajar HTML. Sebab saat melihat hasilnya di web browser, pesan error-nya tidak tampil.” Pendapat ini tidak benar ya karena kamu bisa melihatnya melalui
console.

Buka terlebih dahulu Google Chrome, kemudian klik kanan pilih “Inspect” -> Console.

Kamu juga dapat secara langsung menambahkan kode program pada console browser.

console.log(“Hallo sobat Dicoding!”)

Jika kamu menggunakan node, maka bisa lakukan cara berikut:

Kita dapat simpulkan bahwa console dapat digunakan untuk menguji sebuah fungsi ataupun kode JavaScript. Console dapat kita gunakan juga untuk melihat pesan error saat debugging program. Terus apa lagi ya? Kamu dapat simpulkan sendiri deh.

Contoh Ngoding Dasar dengan JavaScript

Kalau begitu,
mari kita coba praktikan dengan menuliskan kode program berikut ini. Kamu bisa gunakan teks editor sepert VScode atau sejenisnya.

Kode Lab:

Kode Lab:

<!DOCTYPEhtml>

<html>

<head>

    <title>HelloWorldJavascript</title>

</head>

<body>

    <script>

        console.log(“Saya belajar Javascript di Dicoding”);

        document.write(“Hallo
Dicoding”
);

    </script>

</body>

</html>

Jika dilihat di teks editor, maka akan terlihat seperti ini:

Silakan buka berkas belajar2.html dengan cara double klik saja ya. Maka outputnya seperti ini:

Lho, kok nggak muncul tulisan “Saya belajar JavaScript di Dicoding”. Jangan khawatir! Sebab perintah console.log() hanya akan menampilkan pesan ke dalam console JavaScript saja. Sedangkan
document.write() berfungsi untuk menulis ke dokumen HTML.

Wah, kita sudah mengenal fungsi console.log() dan document.write(). Mantaps kan.

Simak juga beberapa artikel mengenai JavaScript:

  1. 5 Alasan Kenapa JavaScript Penting untuk Web
    Programmer
  2. Mengenal Fungsi Asynchronous Request di JavaScript
  3. 5 Framework JavaScript Untuk Programmer Web

Baiklah, itulah yang dapat saya sampaikan. Insyaallah kita akan lanjutkan kembali materi di lain waktu ya.
Jika ada pertanyaan atau saran, silahkan isi pada kolom komentar ya.

“Mengukur pembuatan program berdasarkan jumlah baris kode, sama seperti mengukur pembuatan pesawat terbang berdasarkan beratnya.” (Bill Gates)

Apa Itu JavaScript? Fungsi dan Contohnya – karya Rendi Juliarto, Intern Junior Content Writer di Dicoding

Bagaimana cara menulis kode 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> di antara <body>

Dalam elemen HTML apa kita meletakkan JavaScript?

Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.

Apa yang dimaksud dengan script HTML?

HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.

Manakah elemen HTML berikut ini yang dapat digunakan untuk menulis JavaScript?

Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan. Tag <script> dapat kita buat di dalam tag <head> maupun <body> .

Contoh javascript pada html | admin | 4.5