Jumat, Januari 22, 2021
  • About
  • Privacy & Policy
  • Advertise
  • Careers
  • Disclaimer
  • Contact
Blog Firman Santosa
  • Beranda
  • Programming
    • PHP
    • Java
    • CSS3
    • Javascript
      • Javascript Form
      • Javascript Objek
      • Javascript Functions
      • Javascript HTML DOM
      • Javascript Browser BOM
      • Javascript Ajax
      • Javascript JSON
      • Javascript Vs JQuery
  • Portfolio
  • Produk
  • Source Code
  • Masuk
  • Daftar
Tidak ada hasil
Tampilkan semua hasil
Blog Firman Santosa
Beranda Programming Javascript

Memahami Javascript Output, Statement, Syntax dan Comments

Penjelasan lengkap Output, Statement, Syntax dan Comments Pada Javascript

Firman Santosa Oleh Firman Santosa
Juni 3, 2020
di Javascript
78 0
Memahami Javascript Output, Statement, Syntax dan Comments

Memahami Javascript Output, Statement, Syntax dan Comments

38
DIBAGIKAN
536
DILIHAT
Bagikan ke FacebookBagikan ke Twitter
ADVERTISEMENT

Hai programmmer… Kali ini kita akan melanjutkan pembahasan kita sebelumnya tentang Pengenalan Javascript Lengkap. Silahkan dibaca terlebih dahulu karena artikel ini sangat berkaitan dengan artikel pembelajaran javascript part-1 sebelumnya. Kita akan coba memahami apa itu javascript output, statement, syntax juga comment, sehingga nantinya kita akan lebih mudah lagi memahami materi selanjutnya tentang Tutorial Javascript Indonesia.

Artikel pembelajaran kali ini sudah saya buat terpisah dengan harapan memudahkan kita memahami dasar-dasar javascript yang wajib kita ketahui. Silahkan anda simak dan perhatikan dengan seksama pembahasan javascript di bawah ini yang menjelaskan tentang Output, Statement, Syntax dan Comments pada javascript.

Javascript Output

Javascript dapat menampilkan data dengan bebagai cara, ialah sebagai berikut :

Baca Juga

Pengertian Javascript - Tutorial Javascript

Pengenalan Javascript Lengkap

April 3, 2020
  1. Menulis menjadi elemen HTML, menggunakan innerHTML.
  2. Menulis ke dalam output HTML menggunakan document.write().
  3. Menulis ke dalam kotak peringatan, menggunakan window.alert().
  4. Menulis ke konsol browser, menggunakan console.log().

Masih bingung? akan saya jelaskan satu persatu.

1. Menggunakan innerHTML

Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById(id). Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML. Perhatikan contoh di bawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
 
<h1>Percobaan Pertama</h1>
<p>Halaman percobaan pertama</p>
 
<p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
 
</body>
</html>

2. Menggunakan document.write()

Sebenarnya, saat kita sedang developing aplikasi, lebih mudah menggunakan document.write() saat pengkodean aplikasi kita untuk debuging. Perhatikan contoh berikut ini.

Contoh pertama :

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
 
<h1>Halaman pertama saya</h1>
<p>Halaman pertama saya.</p>
 
<script>
document.write(5 + 6);
</script>
 
</body>
</html>

Contoh kedua :

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
 
<h1>Halaman saya</h1>
<p>Halman saya</p>
 
<button type="button" onclick="document.write(5 + 6)">Coba</button>
 
</body>
</html>

penggunaan document.write() sebaiknya digunakan hanya untuk kebutuhan testing.

3. Menggunakan window.alert()

Anda juga bisa menggunakan window.alert() untuk menampilkan data. Perhatikan contoh berikut.

1
2
3
<script>
window.alert(5 + 6);
</script>

Juga anda bisa menghilangkan window saat untuk menampilkan alert. Dalam JavaScript, alert adalah objek lingkup global, yang berarti bahwa variabel, properti, dan metode secara default adalah milik si alert. Ini juga berarti bahwa menggunakan sintax window adalah opsional. Perhatikan contoh berikut :

1
2
3
<script>
alert(5 + 6);
</script>

4. Menggunakan console.log()

Saat anda developing, anda bisa menggunakan console.log() untuk debugging sehingga bisa menampilkan data pada browser. Perhatikan contoh berikut ini :

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
 
<script>
console.log(5 + 6);
</script>
 
</body>
</html>

Javascript Statements (Pernyataan Javascript)

Javascript Statements (Pernyataan JavaScript) terdiri dari Values, Operators, Expressions, Keywords, dan Comments.

Sebagian besar program JavaScript berisi banyak pernyataan JavaScript. Pernyataan dieksekusi, satu per satu, dalam urutan yang sama seperti yang tertulis. Penjelasan tentang Javascript Statements ini saya buat terpisah agar memudahkan kita mempelajari bagian-bagian dari Pernyataan Javascript tersebut.

1. Semicolons (Titik Koma)

Titik koma memisahkan pernyataan JavaScript. Tambahkan tanda titik koma di akhir setiap pernyataan yang dapat dieksekusi:

1
2
3
4
var a, b, c;     // menyatakan 3 variable
a = 5;           // menetapkan nilai a adalah 5
b = 6;           // menetapkan nilai b adalah 6
c = a + b;       // menetapkan menjumlahan antara a dan b

Ketika dipisahkan oleh titik koma, beberapa pernyataan pada satu baris juga diperbolehkan. Perhatikan contoh berikut :

1
a = 5; b = 6; c = a + b;

2. Javascript Code Blocks

Pernyataan JavaScript dapat dikelompokkan bersama dalam blok kode, di dalam kurung keriting {…}. Tujuan dari blok kode adalah untuk mendefinisikan pernyataan yang akan dieksekusi bersama. Beberapa penggunaan pada penerapan ini, anda terkadang akan menemukan pernyataan yang dikelompokkan bersama dalam blok, dalam fungsi JavaScript tersebut. Lihat contoh berikut :

1
2
3
4
function myFunction() {
  document.getElementById("demo1").innerHTML = "Hai wak!";
  document.getElementById("demo2").innerHTML = "Sehat kan?";
}

3. Javascript Keyword

Pernyataan JavaScript sering dimulai dengan keyword untuk mengidentifikasi tindakan JavaScript yang harus dilakukan. Berikut adalah daftar beberapa keyword yang dapat anda pelajari di tutorial kali ini.

KeywordDescription
breakMengakhiri switch atau loop (perulangan)
continueMelompat keluar dari lingkaran dan mulai di atas
debuggerMenghentikan eksekusi JavaScript, dan memanggil (jika ada) fungsi debugging
do … whileMengeksekusi blok pernyataan, dan mengulangi blok, sementara kondisi benar
forMenandai blok pernyataan yang akan dieksekusi, selama syaratnya benar
functionDeklarasi function
if … elseMenandai blok pernyataan yang akan dieksekusi, tergantung pada suatu kondisi
returnExits a function
switchMenandai blok pernyataan yang akan dieksekusi, tergantung pada kasus yang berbeda
try … catchMenerapkan penanganan kesalahan pada blok pernyataan
varDeklarasi variable

Javascript Syntax

Sintaks JavaScript mendefinisikan dua jenis nilai: Nilai tetap dan nilai variabel. Nilai tetap disebut literal. Nilai variabel disebut variabel.

1. JavaScript Literals

Aturan paling penting untuk menulis nilai tetap adalah:

Angka ditulis dengan atau tanpa desimal:

1
2
3
10.50
 
1001

String adalah teks, ditulis dalam tanda kutip ganda atau tunggal:

1
2
3
"John Doe"
 
'John Doe'

2. JavaScript Variables

Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data. JavaScript menggunakan kata kunci var untuk mendeklarasikan variabel. Tanda yang sama juga digunakan untuk menetapkan nilai ke variabel.

Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x diberikan (diberi) nilai 6 :

1
2
3
var x;
 
x = 6;

Javascript Comments (Komentar pada Javascript)

Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca. Komentar JavaScript juga dapat digunakan untuk mencegah eksekusi, saat menguji kode alternatif.

1. Single Line Comments

Komentar satu baris dimulai dengan //. Teks apa pun antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi).

Contoh ini menggunakan komentar satu baris sebelum setiap baris kode :

1
2
3
4
5
// Ganti heading:
document.getElementById("myH").innerHTML = "Halaman Pertamo";
 
// Ganti paragraf:
document.getElementById("myP").innerHTML = "Halaman pertamo saya.";

Contoh ini menggunakan komentar satu baris di akhir setiap baris untuk menjelaskan kode :

1
2
var x = 5;      // Deklarasi x, memberikannya nilai 5
var y = x + 2;  // Deklarasi y, memberikannya nilai x + 2

2. Multi-line Comments

Komentar multi-baris dimulai dengan /* dan diakhiri dengan */.

Teks apa pun antara /* dan */ akan diabaikan oleh JavaScript.

Contoh ini menggunakan komentar multi-baris (blok komentar) untuk menjelaskan kode:

1
2
3
4
5
6
7
/*
Contoh kode ini dan itu
Menampilkan data komentar
hanya terlihat di dalam kodingan
*/
document.getElementById("myH").innerHTML = "Halaman saya";
document.getElementById("myP").innerHTML = "Halaman kita semua.";

3. Menggunakan Komentar untuk Mencegah Eksekusi

Menggunakan komentar untuk mencegah eksekusi kode cocok untuk pengujian kode. Menambahkan // di depan baris kode mengubah baris kode dari baris yang dapat dieksekusi ke komentar.

Contoh ini menggunakan // untuk mencegah eksekusi salah satu baris kode :

1
2
//document.getElementById("myH").innerHTML = "Halaman Gendeng";
document.getElementById("myP").innerHTML = "Halaman Waw mantapu.";

Contoh ini menggunakan blok komentar untuk mencegah eksekusi beberapa baris :

1
2
3
4
/*
document.getElementById("myH").innerHTML = "Halaman gendeng";
document.getElementById("myP").innerHTML = "Halaman Waw mantapu.";
*/

Semoga artikel ini bermanfaat untuk memahami dasar-dasar yang wajib anda ketahui sebelum melanjutkan pembelajaran javascript lebih lengkap. Silahkan beri komentar anda jika terdapat hal-hal yang belum anda mengerti.

Tags: Javascript
BagikanTweetKirim
Firman Santosa

Firman Santosa

Hai, perkenalkan nama saya Firman Santosa. Profesi saya adalah sebagai pengembang perangkat lunak. Saya suka berkreasi dan berkarya dalam side project. Berbagai karya saya bisa anda lihat di halaman portopolio website ini. Contact me when u need me!

Tinggalkan Diskusi

REKOMENDASI ARTIKEL

Format Penomoran Pada Angka PHP (Menampilkan Koma Atau Titik)

Format Penomoran Pada Angka PHP (Menampilkan Koma Atau Titik)

3 tahun yang lalu
Cara Menambah Gambar / Image Pada Komentar Blogger

Cara Menambah Gambar / Image Pada Komentar Blogger

4 tahun yang lalu
Mitra Sehati Block - Jasa Paving Block Pekanbaru

Mitra Sehati Block – Jasa Paving Block Pekanbaru

11 bulan yang lalu
Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

8 tahun yang lalu
Jasa Web Profil Usaha Murah Jasa Web Profil Usaha Murah Jasa Web Profil Usaha Murah
ADVERTISEMENT

BERDASARKAN TOPIC

BloggerCSS3DesignJavaJavascriptKomputerPHPPortfolioSource Code
Blog Firman Santosa

We bring you the best Premium Programming Articles that perfect for learning, experiencing, etc. Enjoy what we'll provide for you...

Ikuti saya di media sosial:

Paling Baru

  • Memahami Javascript Output, Statement, Syntax dan Comments
  • Pengenalan Javascript Lengkap
  • Menambahkan Variabel External Pada Function PHP

Kategori Artikel

  • Aplikasi Gratis
  • Blogger
  • CSS3
  • Design
  • Java
  • Javascript
  • Komputer
  • PHP
  • Portfolio
  • Programming
  • Source Code

Paling Hangat

Memahami Javascript Output, Statement, Syntax dan Comments

Memahami Javascript Output, Statement, Syntax dan Comments

Juni 3, 2020
Pengertian Javascript - Tutorial Javascript

Pengenalan Javascript Lengkap

April 3, 2020
  • About
  • Privacy & Policy
  • Advertise
  • Careers
  • Disclaimer
  • Contact

© 2020 Blog Firman Santosa - Tips Programming, Linux dan Source Code.

Tidak ada hasil
Tampilkan semua hasil
  • Beranda
  • Programming
    • PHP
    • Java
    • CSS3
    • Javascript
      • Javascript Form
      • Javascript Objek
      • Javascript Functions
      • Javascript HTML DOM
      • Javascript Browser BOM
      • Javascript Ajax
      • Javascript JSON
      • Javascript Vs JQuery
  • Portfolio
  • Produk
  • Source Code

© 2020 Blog Firman Santosa - Tips Programming, Linux dan Source Code.

Welcome Back!

Sign In with Facebook
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
OR

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In