Cara menggabungkan javascript dengan html

Question

Halo semuanya. disini saya baru nonton playlist sekolah coding membuat terminal bot, dan langsung saya praktekkan
Jadi disini saya menambahkan fitur pencarian google
Kode.



Online Bot Terminal





===============================================
Welcome To Online Bot
 Table of Contents Show
 2. Menulis Javascript ke File Eksternal
3. Menulis Javascript pada Atribut
4. Skrip Javascript pada URL
Di mana elemen HTML ditempatkan JavaScript?
Apa itu Prompt dalam JavaScript?
Apa yang dimaksud dengan skrip HTML?
Metode apa yang digunakan untuk menulis di halaman JavaScript?
 


	Command :


	

		-help  [ Semua Command ]
	
	
		-about [ About Creator ]
	
	




	[email protected]~#

Masalahnya ketika saya ingin mencoba fitur google search dengan perintah GS [Want to Search]
Nah, ketika saya mencoba GS Apa Itu Pemrograman?
dan berhasil membukanya di tab baru, tetapi yang hanya diambil di bagian Apa yang masuk ke pencarian google dan "Ini pemrograman" tidak masuk ke pencarian google,
jadi saya mencoba menambahkan seperti ini.

values[1]+values[2]+values[3]

Ternyata berhasil mengambil tiga kata, tetapi jika pencarian hanya satu kata, sisanya tidak ditentukan, misalnya. Pemrograman GS
dan pencarian google yang dibuka "Programmingundefinedundefined"
seperti itu,
jadi bagaimana Anda menggabungkan spasi di ganti menjadi tanda "+"?

Menempatkan skrip di bagian bawah elemen

document.write("Kode Javascript dari File Eksternal");

_5 meningkatkan kecepatan tampilan, karena interpretasi skrip memperlambat tampilan.

Tulisan di akhir

document.write("Kode Javascript dari File Eksternal");

_5 akan meningkatkan kecepatan tampilan atau tampilan konten di web

Karena, jika kita menulis di

document.write("Kode Javascript dari File Eksternal");

_4, skrip akan dieksekusi terlebih dahulu sebelum konten ditampilkan

Jadi, disarankan untuk menulis kode Javascript di

document.write("Kode Javascript dari File Eksternal");

5, tepatnya sebelum menutup

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

2

2. Menulis Javascript ke File Eksternal

Cara kedua, kita bisa menulis Javascript di file terpisah dengan HTML

Biasanya digunakan jika kita tidak ingin kode Javascript tercampur dengan kode HTML

Bagaimana cara melakukannya?

Caranya adalah dengan membuat file dengan ekstensi

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

3. File ini kita isi dengan kode Javascript

Misalnya, saya akan membuat file eksternal dengan nama

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

4 dan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

5 sebagai kode HTML-nya

Berikut isi file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

4

document.write("Kode Javascript dari File Eksternal");

Maka isi dari

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_5 adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_

Hasil

Cobalah untuk memperhatikan

Pada kode HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_5, kita masih menggunakan tag

document.write("Kode Javascript dari File Eksternal");

1. Namun, tag ini tidak kami isi dengan kode Javascript. Kecuali jika kita menggunakan atribut

<script src="kode-script.js">

0 untuk menggunakan kode Javascript dalam file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

4

Oh ya, perlu diperhatikan juga

Tag

document.write("Kode Javascript dari File Eksternal");

_1 harus tetap ditutup dengan

<script src="kode-script.js">

3 walaupun tidak ada isinya

Salah. ❌

<script src="kode-script.js">

BENAR. ✅

<script src="kode-script.js"></script>

Lalu bagaimana jika kode Javascript berada di folder yang berbeda dengan dokumen HTML?

Atau apakah Javascript ada di internet?

Bagaimana itu?

Untuk kode Javascript yang berada di folder yang berbeda, kita tuliskan mengikuti alamat path folder tersebut

Misalnya struktur foldernya seperti ini

Karena file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

_4 ada di dalam folder

<script src="kode-script.js">

5, maka kita harus menuliskannya

<script src="js/kode-script.js"></script>

Giaman mengerti kan?

Nah, untuk kode Javascript yang diambil dari internet, kita cukup menuliskan alamat URL dari Javascript tersebut

Contoh

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. Menulis Javascript pada Atribut

Penulisan Javascript pada atribut biasanya dilakukan pada atribut event

Contoh

<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

Dalam contoh ini, kami membuat elemen

<script src="kode-script.js">

6 dan memiliki atribut

<script src="kode-script.js">

7 yang berisi kode Javascript

Nantinya, kode javascript pada atribut

<script src="kode-script.js">

7 akan dieksekusi ketika event klik terjadi pada elemen

<script src="kode-script.js">

6

Bisakah Javascript hanya ditulis pada atribut

<script src="kode-script.js">

7?

<script src="kode-script.js">

_7 atribut adalah salah satu atribut acara di HTML, kode Javascript dapat ditulis di semua atribut acara

Ingat atribut acara

Bukan atribut normal

Jika Anda ingin melihat semua atribut acara, silakan periksa di Referensi Acara

Penulisan atribut event pada HTML dimulai dengan

<script src="kode-script.js"></script>

2, misalnya untuk event

<script src="kode-script.js"></script>

3, maka pada atribut HTML ditulis

<script src="kode-script.js">

7

Contoh lain untuk pemahaman yang lebih baik

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penulisan Javascript di Atriibut</title>
</head>

<body>
    <textarea onkeyup="document.getElementById('counter').innerText = this.value.length" cols="30" rows="10"></textarea>
    <p>Panjang: <span id="counter">0</span> karakter</p>
</body>

</html>

Pada contoh ini kita menggunakan event

<script src="kode-script.js"></script>

5, sehingga dituliskan

<script src="kode-script.js"></script>

6. Kejadian ini terjadi saat kita melepaskan tombol pada keyboard

Jadi nanti ketika kita mengetikkan elemen

<script src="kode-script.js"></script>

7, kode Javascript di

<script src="kode-script.js"></script>

6 akan dieksekusi

Kode Javascript berfungsi untuk menampilkan jumlah karakter yang diketik

Hasil

4. Skrip Javascript pada URL

Nah cara ini yang menurut saya cukup aneh

Cara ini jarang digunakan dan hampir tidak ada yang menggunakannya dalam aplikasi

Tapi masih mungkin

Caranya adalah dengan menggunakan

<script src="kode-script.js"></script>

_9 pada URL diikuti dengan kode Javascript yang ingin dieksekusi

Contoh

javascript:alert("Nah! ini Javascript")

Ini diketik di bilah alamat browser

Jadi hasilnya

Catatan. Cara ini tidak bekerja di web browser versi terbaru, karena ini adalah celah yang bisa digunakan untuk serangan XSS

Jadi, bagaimana kita menggunakan metode ini dalam HTML?

Cara ini bisa kita gunakan pada tag

<script src="js/kode-script.js"></script>

_0, lalu isi dengan atribut

<script src="js/kode-script.js"></script>

1

Contoh

document.write("Kode Javascript dari File Eksternal");

0

Hasil

Jadi ketika link

<script src="js/kode-script.js"></script>

_0 di klik maka akan membuka URL

<script src="kode-script.js"></script>

9 dan menjalankan kode Javascript yang ada

Di mana elemen HTML ditempatkan JavaScript?

Posisi JavaScript di Di diletakkan pada awal kode HTML di akhir tag , atau di akhir tag . Posisi peletakan ini akan mempengaruhi bagaimana urutan kode JavaScript berjalan. Halaman HTML diproses oleh browser web dari atas ke bawah secara berurutan.

Apa itu Prompt dalam JavaScript?

Dialog prompt () berfungsi untuk mengambil input dari user. Dialog prompt () akan mengembalikan nilai string dari apa yang dimasukkan oleh pengguna.

Apa yang dimaksud dengan skrip HTML?

HTML (HyperText Markup Language) adalah bahasa yang menggunakan tanda (tag) tertentu untuk mengekspresikan kode-kode yang harus ditafsirkan oleh browser agar halaman dapat ditampilkan dengan benar.

Metode apa yang digunakan untuk menulis di halaman JavaScript?

Objek document memiliki dua metode untuk menulis teks, yaitu write dan writeln. Metode write digunakan untuk menulis teks tanpa jeda baris, sedangkan metode writeln digunakan untuk menulis teks dengan jeda baris.

kode javascript