Cara menggunakan javascript es13

Question

Javascript merupakan bahasa pemrograman yang wajib Anda pelajari jika ingin mendalami dunia web development

Nội dung chính Show

Apa itu javascript?
Alat untuk Mempelajari Javascript
Mengenal Konsol JavaScript
Membuat Program Javascript Pertama
Bagaimana Cara Menulis Kode Javascript di HTML?
1. Penulisan Kode Javascript dengan Embed
2. Penulisan kode javascript sebaris
3. Penulisan kode javascript eksternal

Saat ini javascript tidak hanya digunakan pada sisi klien (browser). Javascript juga digunakan di server, konsol, program desktop, seluler, IoT, game, dan lainnya

Ini membuat javascript lebih populer dan menjadi bahasa yang paling banyak digunakan di Github

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

Siap?

Mari kita mulai…

Apa itu javascript?

Javascript adalah bahasa pemrograman yang pada awalnya dirancang untuk berjalan di atas browser

Namun seiring berjalannya waktu, javascript tidak hanya berjalan di browser saja. Javascript juga dapat digunakan di sisi Server, Game, IoT, Desktop, dll

Javascript awalnya disebut Mocha, kemudian diubah menjadi LiveScript selama browser Netscape Navigator 2. 0 rilis versi beta (September 1995). Namun, sejak itu telah diubah namanya menjadi Javascript.

Terinspirasi oleh kesuksesan Javascript, Microsoft mengadopsi teknologi serupa. Microsoft membuat versi 'Javascript' mereka sendiri yang disebut JScript. Kemudian ditanam di Internet Explorer 3. 0

Hal ini mengakibatkan 'perang browser', karena JScript Microsoft berbeda dari Javascript Netscape

Akhirnya pada tahun 1996, Netscape menyerahkan standardisasi ECMA-262 ke Ecma International. Hingga lahirnya standarisasi kode Javascript yang disebut ECMAScript atau ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8).

Tahun Rilis Versi ECMAScriptES 1 Juni 1997ES 2 Juni 1998ES 3 Desember 1999ES 4DeprecatedES 5 Desember 2009ES 5. Juni 1, 2011 ES 6 Juni 2015 ES 7 Juni 2016 ES 8 Juni 2017

Alat untuk Mempelajari Javascript

Perlengkapan apa saja yang harus disiapkan untuk belajar Javascript?

Peramban Web (Google Chrome, Firefox, Opera, dll.)
Editor Teks (rekomendasi. Kode VS)

Itu saja?

Ya, itu sudah cukup. Jika Anda ingin mempelajari Javacript dari Nodejs, silakan baca. Pengantar Nodejs untuk Pemula

Rekomendasi saya. pelajari Javascript dari sisi klien terlebih dahulu. Nanti Nodejs nanti

Mengenal Konsol JavaScript

Ada yang mengatakan belajar javascript itu sulit, karena ketika melihat hasilnya di web browser, tidak muncul pesan error. Pendapat ini tidak benar. Karena kita bisa melihatnya melalui konsol

Kita dapat membuka Javascript Console melalui Inspect Element->Console

Di konsol, kita dapat menulis fungsi atau kode javascript dan hasilnya akan langsung ditampilkan

Sebagai contoh, mari kita coba kode berikut

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

Jadi hasilnya

Jika Anda menggunakan Nodejs, maka cara mengakses console adalah dengan mengetikkan perintah


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

3 pada Terminal

Setelah mencoba konsol Javascript, kami dapat menyimpulkan

Konsol dapat digunakan untuk menguji fungsi atau kode Javascript;
Konsol dapat digunakan untuk melihat pesan kesalahan saat men-debug program
…apa lagi?

Membuat Program Javascript Pertama

Sudah paham cara membuka dan menggunakan javascript console?

Bagus…

Jadi mari kita buat program pertama kita dengan Javascript

Silahkan buka text editor, lalu buat file baru bernama


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

4 dan isi dengan kode berikut


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

_

Jika Anda menggunakan editor teks VS Code, tampilannya akan seperti ini

Silahkan simpan dengan nama


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

_4, kemudian buka file tersebut dengan web browser

Jadi hasilnya

Tunggu sebentar…

Sebelumnya kami menulis pesanan

console.log("Saya belajar Javascript");

Mengapa tidak ditampilkan?

Karena perintah atau fungsi


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

6 akan menampilkan pesan ke konsol javascript. Sedangkan perintah


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

_7 berfungsi untuk menulis ke dokumen HTML, maka akan ditampilkan disana

Sekarang coba buka konsol javascript

Kemudian kita akan melihat pesan


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

8

Bagus.. 👍

Kita sudah mengetahui fungsi


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

_7 dan


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

6, nanti kita akan membahas fungsi ini lebih detail pada

Cara Menampilkan Output di Javascript
Mengenal DOM API untuk Parsing HTML di Javascript

Nah, yang perlu kita ketahui selanjutnya adalah

Bagaimana Cara Menulis Kode Javascript di HTML?

Pada contoh di atas, kami telah menulis kode javascript dalam HTML

Caranya adalah cara penulisan yang disematkan (paste)

Masih ada beberapa cara lagi yang perlu kita ketahui

Embed (kode Javascript disisipkan langsung pada HTML. Contoh. yang sebelumnya)
Inline (kode Javascript ditulis pada atribut HTML)
Eksternal (kode JavaScript ditulis terpisah dari file HTML)

Mari kita lihat sebuah contoh…

Baca juga. 4 Cara Menulis Javascript di HTML

1. Penulisan Kode Javascript dengan Embed

Dengan cara ini, kami menggunakan tag

console.log("Saya belajar Javascript");

_1 untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat dituliskan pada tag

console.log("Saya belajar Javascript");

2 dan

console.log("Saya belajar Javascript");

3

Contoh


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

Mana yang lebih baik, ditulis dalam

console.log("Saya belajar Javascript");

_2 atau

console.log("Saya belajar Javascript");

3?

Banyak yang menyarankan untuk menuliskannya dalam

console.log("Saya belajar Javascript");

_3, karena akan membuat web memuat lebih cepat

2. Penulisan kode javascript sebaris

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

Sebagai contoh. ketika tautan diklik

Contoh

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

atau bisa juga seperti ini

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

Hasil

Perhatian…

Pada atribut

console.log("Saya belajar Javascript");

_7 dan

console.log("Saya belajar Javascript");

8 kita menulis fungsi javascript disana

Atribut

console.log("Saya belajar Javascript");

_7 adalah atribut HTML untuk menentukan fungsi yang akan dijalankan ketika elemen diklik

Pada contoh di atas, kita menjalankan fungsi


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

0. Fungsi ini adalah fungsi untuk menampilkan dialog

Kemudian pada atribut

console.log("Saya belajar Javascript");

8, kita juga memanggil fungsi


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

0 didahului dengan


<html>
    <head>
        <title>Belajar Javascript dari Noltitle>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag 
            console.log("Hello JS dari Head");
        script>
    head>
    <body>
        <p>Tutorial Javascript untuk Pemulap>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag 
            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 disana, kita ubah alamat link menjadi


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

3 lalu ikuti dengan fungsi yang akan dipanggil

3. Penulisan kode javascript eksternal

Dengan cara ini, kami akan menulis kode javascript secara terpisah dari file HTML

Metode ini biasanya digunakan dalam proyek-proyek besar, karena diyakini—dengan cara ini—lebih mudah mengelola kode proyek

kode javascript

Cara menggunakan javascript es13

Apa itu javascript?

Alat untuk Mempelajari Javascript

Mengenal Konsol JavaScript

Membuat Program Javascript Pertama

Bagaimana Cara Menulis Kode Javascript di HTML?

1. Penulisan Kode Javascript dengan Embed

2. Penulisan kode javascript sebaris

3. Penulisan kode javascript eksternal

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội