Dasar Javascript

-

Halo.. kali ini kita membahas tentang Dasar Javascript 



=> Window Alert

Sebuah metode dimana pengguna diberitahu tentang suatu peristiwa. Dalam sistem operasi pengguna grafis modern seperti Ubuntu, peringatan tipikal berbentuk kotak dialog yang muncul di layar yang berisi informasi untuk ditindaklanjuti oleh pengguna. Pada sistem server, peringatan dapat berupa email yang dikirim ke alamat tertentu atau pesan teks SMS yang dikirim ke nomor tertentu. Karakteristik yang menentukan dari istilah alert berkaitan dengan fakta bahwa ia menyampaikan informasi kepada pengguna dan bukan metode yang digunakan untuk melakukannya.

Window Alert ini berfungsi untuk memunculkan kotak dialog kepada pengunjung yang berisi info yang ingin disampaikan. Fungsi window.alert() pada JavaScript berfungsi menampilkan data dalam bentuk “peringatan” (alert) berupa kotak dialog yang akan muncul pada web browser, tampilan kotak dialog biasanya berbeda pada tiap-tiap web browser, beberapa web browser juga secara default memblokir fungsi JavaScript karena berbagai alasan terutama alasan keamanan (misalnya web browser Internet Explorer).

Contoh:  

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <script>
05.       window.alert('Selamat Datang di DosenIT.');
06.     </script>
07.   </body>
08. </html>


 => Document.Write

Document.Write adalah umtuk menuliskan output kedalam halaman HTML.

Fungsi document.write() pada JavaScript berfungsi menampilkan data langsung pada halaman web (bukan pada kotak dialog layaknya fungsi window.alert()), fungsi ini dapat di gunakan untuk menampilkan data langsung saat halaman web selesai di muat (loaded) atau di eksekusi pada event tertentu misalnya saat tombol di klik.

Contoh:

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <script>
05.       document.write('Selamat Datang di DosenIT.');
06.     </script>
07.   </body>
08. </html>

Kode di bawah ini akan menampilkan tombol dengan label “Selamat Datang”, ketika di klik maka akan tampil teks “Selamat Datang di DosenIT.”.

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <button onclick="document.write('Selamat Datang di DosenIT.')">Selamat Datang</button>
05.   </body>
06. </html>


=> Document.getElementById

innerHTML (Document.getElementById) adalah menulis output kedalam tag/elemen HTML.

Fungsi innerHTML (Document.getElementById) pada JavaScript berfungsi untuk mendefinisikan konten HTML, untuk menampilkan data pada elemen tertentu berdasarkan “id” elemen terebut, innerHTML menggunakan (salah satunya) metode “document.getElementById(id)”, sehingga dapat dapat di tampilkan pada elemen berdasarkan “id” sebagai salah satu pengenalnya, JavaScript akan mencari elemen pada suatu dokumen atau suatu halaman web berdasarkan “id” sebagai parameter pencarian.

Contoh: 

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <p id="demo"></p>
05.     <script>
06.       document.getElementById("demo").innerHTML = 'Selamat Datang di DosenIT.';
07.     </script>
08.   </body>
09. </html>


=> Console.log

Console.log adalah menuliskan output kedalam console browser. method ini sering kali digunakan ketika kita melakukan suatu debuging ke dalam suatu proses.

Fungsi console.log() pada JavaScript berfungsi untuk menampilkan data pada console, data tidak akan tampil pada kotak dialog, pada halaman web, atau pada elemen melainkan pada fitur console di web browser, console adalah salah satu developer tool yang terdapat pada semua web browser (kecuali web browser tertentu) yang di sediakan untuk tujuan debugging, tekan F12 untuk membuka fitur console pada web browser yang Anda gunakan.

Contoh:

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <script>
05.       console.log('Selamat Datang di DosenIT.');
06.     </script>
07.   </body>
08. </html>


=> Variable

Variabel adalah sebuah ‘wadah’ untuk menampung ‘nilai’ baik berupa nilai yang di masukkan oleh Pengguna atau nilai hasil pemrosesan, aturan pembuatan (pendeklarasian) variabel pada JavaScript sebenarnya hampir sama dengan aturan pembuatan variabel pada bahasa pemrograman lain, untuk lebih jelasnya berikut Saya sajikan aturan penulisan variabel pada JavaScript.

  • Nama variabel bisa berupa huruf, angka, garis bawah ( underscore, _ ), dan tanda dollar ( $ ).
  • Nama variabel harus di awali dengan huruf, tanda dollar atau garis bawah, tidak boleh diawali dengan angka.
  • Nama variabel bersifat case sensitive ( variabel ‘DosenIT’ dengan ‘dosenit’ di anggap variabel yang berbeda ).
  • Nama variabel tidak boleh sama dengan keyword ( salah satunya ‘break‘, ‘continue‘, ‘var‘ dan lain sebagainya ).

Contoh penggunaan:

Kode di bawah ini memuat nilai dari variabel ‘harga1’ dan nilai dari variabel ‘harga2’ kemudian menjumlahkan kedua nilai tersebut ( dengan operator aritmatika ‘penambahan’ atau ‘penjumlahan’ + ) dan menyimpan nilai hasil penjumlahan tersebut ke dalam variabel ‘total’, terakhir menampilkan nilai dari variabel ‘total’ sebagai ‘alert’ (lihat penjelasan mengenai fungsi ‘window.alert()’).

Contoh:

01. <!DOCTYPE html>
02. <html>
03.   <body>
04.     <script>
05.       var harga1 = 1000;
06.       var harga2 = 2000;
07.       var total  = harga1 + harga2;
08.       window.alert(total);
09.     </script>
10.   </body>
11. </html>


=> Condition

Statemen atau Pernyataan adalah suatu Expresi/Intruksi individu yang ditulis di sebuah program untuk menginstruksi jalan proses program, yang berfungsi untuk memerintahkan bagaimana program berjalan.

Untuk mengetahui cara kerja pernyataan if … else, silahkan lihat diagram alur berikut.


Membuat Pernyataan pada Javascript

Sekarang kita akan coba membuat statement atau pernyataan pada Javascript.

Pernyataan if

Pernyataan if adalah sebuah pernyataan yang digunakan untuk melakukan tindakan dalam kondisi tertentu. Jika dalam bahasa Indonesia if adalah jika. Jika… maka selalu membutuhkan sebuah kondisi, yang apabila kondisi tersebut benar kemudian akan melakukan sebuah tindakan.

Penulisan syntax dasar dari statement atau pernyataan if adalah:

if (condition){
Statement(s) to be executed if expression is true
}

Di sini kondisi JavaScript akan dievaluasi. Jika nilai yang dihasilkan benar, pernyataan yang diberikan akan dieksekusi. Jika ungkapannya salah, maka tidak ada pernyataan yang dieksekusi. Biasanya, kita akan menggunakan operator pembanding saat membuat keputusan. Untuk kasus pernyataan atau statement if, bisa kalian lihat contohnya dibawah:

<input type="button" value="Click Me" onclick="pesan()">
<script>
function pesan() {
var nilaiujian = prompt('Ketik Nilai Ujian Anda:','')
if (nilaiujian > 90) {
document.write("<h1>Selamat, Anda Mendapat Nilai A!</h1>")
}
}
</script>

Contoh diatas akan mengevaluasi variabel nilaiujian yang kalian masukkan. Jika nilaiujian diatas 90, maka akan tampil tulisan Selamat, Anda Mendapat Nilai A!.

Pernyataan if..else

Pernyataan ‘if … else’ adalah bentuk pernyataan kontrol selanjutnya yang memungkinkan JavaScript untuk mengeksekusi pernyataan dengan cara yang lebih terkontrol. Lihat contoh berikut.

<input type="button" value="Click Me" onclick="pesan()">
<script>
function pesan() {
var nilaiujian = prompt('Ketik Nilai Ujian Anda:','')
if (nilaiujian > 70) {
document.write("<h1>Selamat, Anda lulus!</h1>")
} else {
document.write("<h1>Maaf, Anda harus mengulangi ujian!</h1>")
}
}
</script>

Pernyataan if..else if

Else if digunakan untuk membuat 2 kondisi atau lebih dari itu. Dengan menggunakan else if, kita dapat mengatur blok yang akan di eksekusi dengan beberapa kondisi – kondisi tertentu. Sebagai contoh dibawah ini.

<input type="button" value="Click Me" onclick="pesan()">
<script>
function pesan() {
var nilaiujian = prompt('Ketik Nilai Ujian Anda:','')
if (nilaiujian > 90) {
document.write("<h1>Selamat, Anda Mendapat Nilai A!</h1>")
} else if (nilaiujian > 80) {
document.write("<h1>Selamat, Anda Mendapat Nilai B!</h1>")
} else if (nilaiujian > 70) {
document.write("<h1>Selamat, Anda Mendapat Nilai C!</h1>")
}
}
</script>

Contoh diatas akan mengevaluasi ulang hasil inputan kita. Jika kita memasukkan ankga diatas 90 pada variabel nilaiujian, maka akan muncul kalimat “Selamat, Anda Mendapat Nilai A!”. Jika kita memasukkan ankga diatas 80 pada variabel nilaiujian, maka akan muncul kalimat “Selamat, Anda Mendapat Nilai B!”. Begitu juga dengan nilai C.

=> looping

Looping atau dalam bahasa Indonesia bisa diartikan sebagai perulangan, adalah sebuah proses untuk menampilkan data baik itu string atau method secara berulang-ulang. Fungsi ini sangat berguna dalam bahasa pemrograman, apabila kita memiliki 100 atau 1000 data yang ingin ditampilkan, kita cukup menggunakan fungsi for untuk menampilkannya. Cara membuatnya pun juga cukup mudah, buka file perulangan.html anda lalu salin sintaks dibawah ini : 

Perulangan Increment ( Bertambah )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Belajar JS : Perulangan For Javascript</title>
  5. </head>
  6. <body>
  7.     <h1>Perulangan For</h1>
  8.     <i>www.ikhwansetyo.com</i>
  9.     <br><br>
  10.     <div id="perulangan"></div>
  11.     <script>
  12.         var text   = "";
  13.         var i;
  14.         for (var i = 0; i <=10; i++) {
  15.             text += "Increment " + i + "<br>";
  16.         }
  17.         document.getElementById("perulangan").innerHTML = text;
  18.  
  19.     </script>
  20. </body>
  21. </html>


Sedikit penjelasan mengenai sintaks diatas :

  • var text adalah sebuah variabel untuk menyimpan data hasil looping for, pertama deklarasikan text sebagai string dengan mengisikan double quotes
  • var i adalah variabel yang berguna untuk menentukan nilai dari perulangan tersebut, 
  • Pertama kita definisikan var i, kemudian pada fungsi perulangan for kita definisikan var i bernilai 0 atau perulangan dimulai dari angka 0, lalu i memiliki nilai kurang dari sama dengan 10, dan i adalah nilai yang selalu bertambah atau increment ( i++ )

Setelah itu coba untuk membuka file tersebut di browser anda, maka akan tampil seperti screenshot dibawah ini :


Seperti yang anda lihat pada screenshot diatas, perulangan dilakukan secara bertambah atau increment dengan menggunakan simbol ++. Lalu bagaimana cara melakukan perulangan decrement atau perulangan yang nilainya berkurang? Kita hanya perlu mengubah sintaks kita sedikit sehingga akan terlihat seperti berikut : 

Perulangan Berkurang (Decrement)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Belajar JS : Perulangan For Javascript</title>
  5. </head>
  6. <body>
  7.     <h1>Perulangan For</h1>
  8.     <i>www.ikhwansetyo.com</i>
  9.     <br><br>
  10.     <div id="perulangan"></div>
  11.     <script>
  12.         var text   = "";
  13.         var i;
  14.         for (var i = 10; i >0; i--) {
  15.             text += "Decrement " + i + "<br>";
  16.         }
  17.         document.getElementById("perulangan").innerHTML = text;
  18.  
  19.     </script>
  20. </body>
  21. </html>

Pada sintaks diatas terlihat perbedaan yang cukup jelas. Jika pada perulangan increment kita menggunakan simbol ++, maka pada perulangan decrement kita menggunakan simbol -- karena perulangan selalu berkurang 1 angka. Selain itu juga kita tentukan bila var i bernilai 10 dan var i lebih dari 0 sehingga perulangan akan dimulai dari angka 10 dan berkahir di angka 0. Anda bisa melihat hasilnya pada screenshot dibawah :


=> Document object model

DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Yang mana didalam object ini bukan hanya ada struktur, namun juga interaksi (behavior) beserta event-nya. Setiap isi dari HTML yang sudah dimuat dalam peramban web (web browser), bisa dimodifikasi melalui DOM.
Pada model DOM ini, setiap elemen html dipandang sebagai sebuah object. Setiap object bisa terdiri dari object-object lain, sama halnya dengan dokumen html yang terdiri dari elemen root (elemen <html>), elemen root terdiri dari elemen <head> dan elemen <body>, elemen <body> boleh jadi terdiri dari elemen <a>, <h1>, <p>, dst. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. 
DOM (Document Object Model) Selector digunakan untuk menyeleksi elemen dari suatu halaman web. Pada Javascript DOM Selector bisa kita lakukan dengan beberapa cara, diantaranya :

1. document.getElementById

digunakan untuk mengakses elemen DOM berdasarkan nilai properti id pada elemen. Hanya akan mengembalikan satu elemen DOM karena idealnya nilai properti id bersifat unik dalam satu dokumen. Jika terdapat lebih dari satu elemen dengan id yang sama, maka elemen yang pertama ditemukan akan dikembalikan.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
    </div>
    <script>
        let paragraf = document.getElementById('product1')
        console.log(paragraf )
    </script>


2. document.getElementsByClassName

seperti namanya digunakan untuk memanggil seluruh elemen DOM dengan nilai properti class yang diberikan. Mengembalikan objek mirip array, yaitu HTMLCollection dari seluruh elemen DOM yang cocok.

<div id="card-product">
    <p class="product" id="product1">Produk 1</p>
    <p class="product">Produk 2</p>
    <p class="product">Produk 3</p>
    <p class="product">Produk 4</p>
    <p class="product">Produk 5</p>
</div>
    <script>
        let allParagraf = document.getElementsByClassName('product')
        console.log(allParagraf)
    </script>


3. document.getElementsByName

mengambil elemen berdasarkan nilai properti name. Mengembalikan HTMLCollection seperti getElementsByClassName.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <input type="text" name="description" value="ini produk satu">
    </div>
    <script>
        let description = document.getElementsByName('description')
        console.log(description)
    </script>


4. document.getElementsByTagName

memilih elemen-elemen dengan tag HTML tertentu. Sama seperti semua fungsi yang mengembalikan banyak elemen DOM, memberikan nilai berupa HTMLCollection.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <input type="text" name="description" value="ini produk satu">
    </div>
    <script>
        let paragraf = document.getElementsByTagName('p')
        console.log(paragraf )
    </script>


5. document.querySelector

mencari elemen DOM pertama yang sesuai dengan aturan selector CSS yang diberikan ke fungsi.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
        <input type="text" name="input-product" value="produk 6">
    </div>
    <script>
        let paragraf = document.querySelector('p#product1')
        console.log(paragraf)
    </script>
 


6. document.querySelectorAll

sama seperti querySelector, tetapi mengembalikan semua elemen yang memenuhi aturan (bukan hanya elemen pertama). Fungsi ini mengembalikan NodeList, bukan HTMLCollection.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
        <input type="text" name="input-product" value="produk 6">
    </div>
    <script>
        let allParagraf = document.querySelectorAll('.product')
        console.log(allParagraf)
    </script>


Sekian penjelasannya, kurang lebihnya mohon maaf, semoga bermanfaat. Terimakasih :D

*diambil dari beberapa sumber

Komentar

Posting Komentar

Postingan populer dari blog ini

Penyususan sketsa website toko online

-
Gambar
  Langkah 1, Menyiapkan Draft Konten Untuk membuat website toko online tentu saja kamu sudah menyiapkan produk untuk dijual kepada masyarakat. Produk ini bisa kamu masukkan dalam draft konten yang kamu sediakan.  Hal yang perlu kamu perhatikan dalam menyiapkan draft konten yaitu: List kebutuhan halaman  Kamu perlu untuk menentukan berapa banyak halaman yang kamu butuhkan saat membuat website sehingga kamu tidak kebingungan saat eksekusinya nanti. Salah satu list halaman untuk website Toko Online seperti berikut: List Halaman web Kamu bisa menggunakan list selain pada gambar untuk bereksplorasi Siapkan Draft tulisan  Karena ide itu sering tidak muncul disaat yang kita mau, maka kamu tidak bisa memastikan idemu akan muncul saat kamu membuat website. Untuk itu kamu perlu menyiapkan draft tulisan terlebih dahulu yang nantinya digunakan untuk mengisi  website kamu. Buat semenarik mungkin ya sob, supaya calon pembeli tertarik pada produk kamu. Draftnya bisa kamu atur ...
Baca selengkapnya

Library BeautifulSoup dan Requests

-
Gambar
BeautifulSoup BeautifulSoup sendiri merupakan sebuah Python Library yang digunakan untuk melakukan ekstraksi file dengan format XML atau HTML. Library ini memiliki banyak fungsi yang kita perlukan untuk melakukan ekstraksi informasi dari file kita dan sangat mudah digunakan. Pertama import seluruh library yang diperlukan. Kali ini, kita juga akan menggunakan menggunakan library urllib untuk melakukan request terhadap website tujuan kita. Library ini tidak perlu diinstall lagi, karena merupakan standard library dari Python sendiri. from urllib.request import urlopen from bs4 import BeautifulSoup Setelah dipastikan bahwa kedua library sudah bisa digunakan, lanjut dengan mengecek apakah kita bisa mengakses website yang akan kita tuju. Oiya, pastikan bahwa komputer kita terhubung dengan internet! Kemudian, dengan menggunakan salah satu link wikipedia kita akan melakukan request dengan membuka link tersebut dengan menggunakan urlopen yang telah kita import. Sebagai contoh, kita akan melakuk...
Baca selengkapnya

Scrape data shopee menggunakan python

-
Gambar
SCRAPE DATA SHOPEE MENGGUNAKAN PYTHON Kali ini saya akan membahas tentang web scrapping pada salah satu situs ecommerce yaitu shopee. Data Scrapping merupakan kegiatan untuk menemukan data dan mengumpulkannya. Data diambil secara langsung dari sebuah sumber, tidak hanya dari web tetapi bisa dari berbagai sumber dimana terdapat data. Ini mencakup spreadsheets, storage devices, dll. Proses ini diperlukan untuk menyaring (filtering) dan membedakan berbagai jenis data mentah dari berbagai sumber menjadi sesuatu yang berguna dan informatif. Sedangkan web scrapping sendiri merupakan proses data scrapping yang dilakukan hanya dari sumber website.Web scrapping ini sangat berguna pada bisnis online baik itu untuk riset pasar, riset kompetitor, atau mencari leads. Namun, manfaatnya lebih dari sekedar itu. Pada artikel kali ini saya akan membahas langkah-langkah web scraping pada salah satu website online shop yang cukup terkenal yaitu shopee. Untuk melakukan web scraping pada situs shopee ini ki...
Baca selengkapnya