Wajah membuat website javascript

Domain adalah nama website kita. seperti google. com, detik. com, wikipedia. com. Idealnya domain itu berakhiran dot com, net, org, info, dll

Berhubung kita akan menggunakan hosting dan domain free, maka ekstensi domain freean yang kita gunakan adalah 000webhostapp. com

Jadi domain website HTML kamu nanti menjadi

xxxxxx. 000webhostapp. com

xxxxx = nama domain kamu

Dalam contoh ini domain saya adalah websitehtmlkerensaya. 000webhostapp. com

3. 1. 1 Pada bagian project buat nama domain sesuai keinginan, password, dan klik kirim

Dengan mempelajari materi Mengiimplementasikan Pemrograman Terstruktur Berorientasi Objek Dan Menulis Kode Dengan Prinsp Sesuai Guidlanie Dalam Pembuatan Website Ecommerce Untuk Menjadi Pengembang Website, siswa

Javascript adalah bahasa pemrogramaman yang wajib kamu pelajari jika ingin mendalami dunia web development

Saat ini javascript tidak hanya digunakan di sisi client (browser) saja. Javascript plays digunakan pada server, console, program desktop, mobile, IoT, game, dan lain-lain

Hal ini membuat javascript semakin populer dan menjadi bahasa yang paling banyak digunakan di Github

Wajah membuat website javascript

Pada artikel ini, kita akan mempelajari Javascript dari dasar. Mulai dari pengenalan Javascript, hingga membuat program pertama dengan Javascript

Ya?

Mari kita mulai…

Apa javascript Anda?

Javascript adalah bahasa pemrogramaman yang awalnya dirancang untuk berjalan di atas browser

Namun seiring perkembangan zaman, javascript tidak hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi Server, Game, IoT, Desktop, dsb

Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat browser Netscape Navigator 2. 0 rilis versi beta (September 1995). Namun, setelah itu dinamai ulang menjadi Javascript.

Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi serupa. Microsoft membuat 'Javascript' versi mereka sendiri bernama JScript. Lalu di tanam pad Internet Explorer 3. 0

Hal ini mengakibatkan ‘perang browser’, karena JScript milik Microsoft berbeda dengan Javascript racikan Netscape

Akhirnya pada tahun 1996, Netscape mengirimkan standardisasi ECMA-262 ke Ecma International. Sehingga lahirlah standarisasi kode Javascript bernama ECMAScript atau ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8).

Versi ECMAScriptTahun RilisES 1Juni 1997ES 2Juni 1998ES 3Desember 1999ES 4TerbengkalaiES 5Desember 2009ES 5. 1Juni 2011ES 6Juni 2015ES 7Juni 2016ES 8Juni 2017

Peralatan untuk Belajar Javascript

Apa saja peralatan yang harus disiapkan untuk belajar Javascript?

  1. Peramban Web (Google Chrome, Firefox, Opera, dll)
  2. Editor Teks (disarankan). Kode VS)

Itu saja?

Ya itu saja sudah cukup. Bila kamu ingin belajar Javascript dari Nodejs, silahkan baca. Pengenalan Node untuk Pemula

Direkomendasikan saya. belajar Javascript dari sisi client dulu. Nanti Nodejs Belakangan

Mengenal Konsol JavaScript

Ada yang bilang, belajar javascript itu susah, karena saat melihat hasilnya di web browser, beratnya error-nya tidak tampil. Pendapat ini tidak benar. Karena kita bisa melihatnya melalui console

Console Javascript dapat kita buka melalui Inspect Element->Console

Wajah membuat website javascript

Di dalam console kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan

Misalnya, mari kita coba kode berikut

console.log("Hi apa kabar!");
alert("Saya sedang belajar javascript");

maka hasilnya

Wajah membuat website javascript

Jika anda menggunakan Nodejs, maka cara mengakses console adalah dengan mengetik perintah

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
3 pada Terminal

Wajah membuat website javascript

Setelah mencoba console Javascript, maka dapat kita simpulkan

  • Console dapat digunakan untuk mengujicoba fungsi atau kode Javascript;
  • Console dapat kita gunakan untuk melihat pesan error saat debugging program
  • …apa lagi ya?

Membuat Program Javascript Pertama

Sudah paham cara membuka dan menggunakan console javascript?

Bagus…

Kalau begitu, mari kita buat program pertama dengan Javascript

Silahkan buka teks editor, kemudian buat file baru bernama

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
4 dan isi dengan kode berikut

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
_

Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini

Wajah membuat website javascript

Silahkan disimpan dengan nama

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
_4, kemudian buka file tersebut dengan web browser

maka hasilnya

Wajah membuat website javascript

Tunggu sebentar…

tadi kita menulis perintah

console.log("Saya belajar Javascript");

Mengapa tidak ditampilkan?

Karena perintah atau fungsi

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
_6 akan menampilkan pesan ke dalam konsol javascript. Sedangkan perintah
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
7 berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan kesana

Sekarang coba saja buka console javascript

Maka kita akan melihat berat ________1______8

Wajah membuat website javascript

Selimut… 👍

Kita sudah mengenal fungsi

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
_7 dan
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
_6, nanti kita akan bahas lebih dalam lagi tentang fungsi ini pada

  • Wajah Menampilkan Output pada Javascript
  • Mengenal DOM API untuk Menipulasi HTML pada Javascript

Sekarang, yang perlu kita ketahui berikutnya adalah

Bagaimana Cara Menulis Kode Javascript di HTML?

Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML

Cara Tersebut Merupakan Cara Penulisan Embeded (Ditempel)

Masih ada beberapa cara lagi yang perlu kita ketahui

  1. Embed (Kode Javascript ditempel langsung pada HTML. kontur. yang tadi)
  2. Inline (kode Javascript ditulis pada atribut HTML)
  3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

Mari kita lihat contohnya…

Baca memainkan. 4 Wajah Penulisan Javascript dalam HTML

1. Penulisan Kode javascript dengan Embed

Pada cara ini, kita menggunakan tag

console.log("Saya belajar Javascript");
_1 untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di dalam tag
console.log("Saya belajar Javascript");
2 dan
console.log("Saya belajar Javascript");
3

kontur

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>

Mana yang lebih bagus, ditulis di dalam

console.log("Saya belajar Javascript");
2 atau
console.log("Saya belajar Javascript");
3?

Banyak yang merekomendasikan menuliskannya di dalam

console.log("Saya belajar Javascript");
_3, karena akan membuat web di-load lebih cepat

2. Penulisan Kode javascript Inline

Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu

Missal. saat link diklik

kontur

<a href="#" onclick="alert('Yey!')">Klik aku!</a>

atau bisa juga seperti ini

<a href="javascript:alert('Yey!')">Klik aku!</a>

Hasilnya

Wajah membuat website javascript

Perhatikan…

Pada atribut

console.log("Saya belajar Javascript");
_7 dan
console.log("Saya belajar Javascript");
8 kita menuiskan fungsi javascript di sana

Atribut

console.log("Saya belajar Javascript");
_7 merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik

Pada contoh di atas, kita menjalankan fungsi

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>
0. Fungsi ini merupakan fungsi untuk menampilkan dialog

Lalu pada atribut

console.log("Saya belajar Javascript");
8, kita juga memanggil fungsi
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>
_0 dengan didahului
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>
3

Atribut

console.log("Saya belajar Javascript");
8 sebenarnya digunakan untuk mengisi alamat link atau URL

Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>
3 lalu diikuti dengan fungsi yang akan dipanggil

3. Penulisan Kode javascript Eksternal

Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML

Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara ini—dapat lebih mudah mengelola kode proyek

Apakah JavaScript bisa membuat website?

JavaScript adalah salah satu bahasa pemrograman yang bisa kamu gunakan untuk mengembangkan website, game, dan aplikasi . Dengan bahasa pemrograman ini, kamu bisa membuat tampilan website menarik.

JavaScript pakai aplikasi apa?

Namun, sebelumnya Anda membutuhkan beberapa aplikasi berikut untuk mendukung Anda mempelajari Javascript. Browser web (Google Chrome, Firefox, atau lainnya). Editor teks (Atom, Notepad, atau lainnya). Web server, untuk menjalankan pemrograman kode .

Apakah JavaScript cocok untuk pemula?

JavaScript adalah salah satu bahasa pemrograman populer saat ini. Javascript ini punya banyak keunggulan yang membuatnya cocok untuk pemula . Untuk itu, mempelajari JavaScript sangat disarankan jika Anda ingin membuat website.

Dimana menuiskan coding JavaScript?

Console Javascript dapat kita buka melalui Inspect Element->Console. Di dalam console , kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan.