Sabtu, 21 Januari 2017

Tugas Softskill "Konsep Pemodelan Grafik Google Chart (Sankey Chart, Scatter Chart , Stepped Chart) - Bab 5 Penutup"

Nama : Muhammad Azis Aulia
NPM : 57414118
Kelas : 3IA17

BAB 5 Penutup
5.1 Kesimpulan
Google chart sangat membantu dalam pembuatan diagram karena memiliki berbagai diagram yang bisa dipakai termasuk steeped chart, sankey chart, dan scatter chart yang berguna untuk membuat diagram dalam beberapa kasus yang memudahkan pembaca untuk membaca informasi yang ada lewat diagram tersebut dan dapat memberi simpulan bagi pembacanya. Selain memberikan informasi diagram tersebut juga memberikan gambaran untuk membuat keputusan dalam bebrapa hal seperti keputusan untuk memproduksi sesuatu, membandingkan 2 hal agar didapat solusi yang tepat. Karena memberi banyak manfaat maka buku ini memberi banyak pengetahuan mengenai google chart dan untuk ketiga diagram yang dibahas khusunya.
5.2 Saran

Dari sekian banyak kasus yang ada hanya beberapa kasus yang memungkinkan untuk dibuat menggunakan ketiga diagram tersebut, tidak semua kasus bisa menggunakan diagram tersebut karena setiap diagram mempunyai fungsinya masing-masing. Sehingga disarankan bagi pembaca untuk memahami fungsi dari diagram tersebut agar pengaplikasiannya bisa tepat pada tempatnya.

Tugas Softskill "Konsep Pemodelan Grafik Google Chart (Sankey Chart, Scatter Chart , Stepped Chart) - Bab 4 Contoh Kasus Penggunaan Google Chart"

Nama : Muhammad Azis Aulia
NPM : 57414118
Kelas : 3IA17

BAB 4 Contoh Kasus Penggunaan Google Chart

4.1 Contoh Kasus Staped Chart

            Dibawah ini terdapat contoh kasus dalam penggunaan stepped pada html, kasus dibawah adalah penurunan rating film the 39 steps dari beberapa tahun kedepan yaitu pada tahun 1935 yang didirektori oleh Alfred Hitchcock, kemudian pada tahun 1959 oleh Ralph Thomas, tahun 1978 oleh Don Sharp, dan tahun 2008 Jmaes Waves. Dimana dalam diagram tersebut memberikan informasi mengenai penurunan rating dari 2 media yaitu IMDB dan Rotten Tomates. Untuk raihan rating dari film tersebut pada tahun 1935 mendapat score 8.4 rotten tomates dan 7.9 IMDB, tahun 1959 6,9 rotten tomates dan 6.5 IMDB, tahun 1978 mengalami penurunan lagi 6.5 rotten tomates dan 6.4 IMDB, dan terakhir pada tahun 2008 4,4 rotten tomates dan 6.2 IMDB.
Dan hasil diagram dari contoh kasus diatas adalah seperti pada gambar berikut :


Cara pembuatan diagram diatas adalah seperti berikut :
CODE JSFIDDLE
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = { title: 'The decline of \'The 39 Steps\'',
vAxis: { title: 'Accumulated Rating' },
isStacked: true
};
var chart = new
google.visualization.SteppedAreaChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

4.2 Contoh Kasus Scatter Chart

            Dibawah ini terdapat contoh kasus perbandingan usia dan berat badan seorang anak, perhitungannya yaitu pada usia 3,4,,6.5,8 dan 11 bulan. Dimana akan dibuat hasil dari perhitungannya dalam bentuk scatter chart, berdasarkan hasil perhitungan seorang anak tersebut memiliki berat sebesar 3.5kg pada usia 3 bulan, pada usia 4 bulan mengalami kenaikan berat menjadi 5 dan tiba2 naik lagi menjadi 5.5kg pada bulan yang sama, pada usia 6,5 bulsn naik lagi menjadi 7kg, kemudian pada usia 8 bulan meningkat menjadi 12kg dan pada usia 11 bulan menjadi 14kg. dan hasil dari perhitungan tersebut tebentuk diagram seperti berikut :


Untuk cara pembuatan diagram tersebut adalah seperti berikut :
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]);
var options = { title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none' };
var chart = new
google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

4.3 Contoh Kasus Sankey Chart

            Misalkan terdapat dua kategori, A dan B yang terhubung ketiga kategori lainnya yaitu X,Y,dan Z. dari koneksi tersebut dibuat misalnya untuk B memiliki koneksi yang lebih tipis untuk X dan lebih tebal/besar untuk koneksi terhadap Y.
Dan hasil dari diagramnya seperti ini :
  


Cara pembuatannya :
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]);
// Sets chart options. var options = { width: 600, };
// Instantiates and draws our chart, passing in some options.
var chart = new
google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>

4.4 Contoh Kasus Multiple Sankey Chart

            Pada contoh kasus dibawah ini berdasarkan perhitungan diperoleh hasil koneksi/hubungan antar negara dimana terdapat presentasi yang berbeda antara hubungan Negara satu dengan yang lainnya, yaitu hubungan/koneksi dari negara Brazil,Mexico,USA,Canada dengan Portugal,Spain,England,France. kemudian keempat negara yaitu Portugal,Spain,England,France. tersebut mempunyai koneksi lagi terhadap Sout Africa,Angolia Marocco,Senegal,Mali, yang kelima Negara tersebut kemudian mempunyai koneksi ke China, Japan, India. Dari hasil perhitungan Brazil mempunyai nilai koneksi terhadapat Portugal sebesar 5, France 1, Spain 1, dan England 1. Canada hanya mempunyai koneksi kepada 3 negara yaitu Portugal sebesar 1, France 1, England 1, dan tidak terhadap Spain. Mexico terhadap Portugal 1, France 1, Spain1, England 1. USA terhadap Portugal 1, France 1, Spain 1, England 1. Untuk Negara lainnya bisa dilihat pada tabel hasil perhitungan dibawah :
Portugal
Spain
England
France
Brazil
5
1
1
1
Mexico
1
5
1
1
USA
1
1
5
1
Canada
1
-
1
5

South Africa
Angola
Marocco
Senegal
Mali
Protugal
3
2
1
1
-
Spain
1
-
3
1
-
England
7
1
2
1
-
France
1
1
3
3
3

China
Japan
India
South Africa
5
3
1
Angola
5
3
1
Marocco
5
3
1
Senegal
5
3
1
Mali
5
3
1
  


Cara pembuatannya :
<html>
<body>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ], [ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ], [ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ], [ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ], [ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ], [ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ], [ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ], [ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ], [ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ], [ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ], [ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ], [ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ], [ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ], [ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ], [ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ], [ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ], [ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ], [ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ], [ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ], [ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ], [ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ], [ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ], [ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ], [ 'Morocco', 'Japan', 3 ] ]);
// Set chart options var options = { width: 600, };
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options); }
</script>
</body>
</html>

4.4.1 Contoh Aktif Penggunaa Sankey Chart

            The United States Energy Information Administration (EIA) menghasilkan banyak Sankey Chart setiap tahun dalam Laporan Tahunan Energi yang menggambarkan produksi dan konsumsi berbagai bentuk energi. Laporan untuk tahun 2012 termasuk diagram berikut :
Aliran energi :



Arus minyak bumi :


Arus listrik :



Anggaran Formula1 2015 :





Tugas Softskill "Konsep Pemodelan Grafik Google Chart (Sankey Chart, Scatter Chart , Stepped Chart) - Bab 3 Perangkat Lunak Yang Digunakan"

Nama : Muhammad Azis Aulia
NPM : 57414118
Kelas : 3IA17

Bab 3 Perangkat Lunak Yang Digunakan

1.1 HTML
1.1.1 Pengertian HTML

            Membangun sebuah Web Page dibutuhkan sebuah bahasa pemprograman yang lebih dikenal dengan sebutan WEB SCRIPTING. Dikatakan Script karena perintah kode program tersebut akan diinterpreter dan tidak ada kompilasi untuk menjadikannya executable. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side.
            Client Side dilaksanakan oleh web browser seperti Internet Explorer, Netscape, Opera, Firefox dan lain-lain. Contoh daripada Client Side misalnya HTML,CSS, Javascript, VBscript maupun XML. Sedangkan Server Side dikerjakan oleh Web Server seperti Personal Web Server untuk system operasi Windows 98, IIS untuk system operasi Windows 2000/XP, Apache, Tomcat, Xitami dan Zope. Sedangkan untuk contoh bahasa server side adalah ASP (.Net), PHP, JSP,CFM dan CGI/PL.
            Web Scripting yang bersifat Client Side akan menghasilkan web page yang statis dalam arti menekankan pada design format tampilan informasi yang disajikan dan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak dapat menghasilkan output apapun. Sehingga untuk menghasilkan aplikasi web bersifat dinamis tidak mungkin, dan harus dikombinasikan dengan web scripting yang bersifat server side.
            HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web scripting bersifat Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih dikenal dengan Hyperlink.
            Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI ( Graphical User Interface ) seperti Microsoft Front Page, Dreamweaver CS3, Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad.
Aturan penulisan HTML adalah sebagai berikut :

1.1.2 Dokumen HTML sederhana
1.      Memilki struktur minimal dari dokumen HTML.
<HTML>
<head>
<title>Judul Web Page</title>
</head>
<body>
Isi artikel anda di sini
</body>
</HTML>
2.      Bentuk tulisan pada point 1 disebut TAG. Tag memiliki pembuka <TAG>, tetapi tidak semua Tag mempunyai penutup </TAG>. Tag memberi instruksi interpreter kepada browser.
3.      Di dalam Tag HTML terdapat atribut Tag, yang mana atribut tersebut berbeda-beda antar tag yang satu dengan tag yang lainnya.
4.      Penulisan Tag bersifat Non Case Sensitive, ini berarti bahwa penulisan tag huruf besar dan atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html> atau <HtmL>.
5.      Setelah tanda "<" harus langsung diikuti oleh nama Tag dan ditutup tanda ">", tidak boleh ada spasi, angka, tanda baca dan nama Tag tidak dapat dibuat sendiri dan harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web ( http://www.w3c.org).
6.      Dalam dokumen HMTL diperlukan tag <HEAD></HEAD>, dalam tag ini diletakkan judul web page dengan menggunakan tag <TITLE>judul Web</TITLE>, sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page kita. Untuk ekstensi dari file HTML perlu ditambahkan .html atau .htm dibelakang nama filenya. Misalnya Uji Coba.html
7.      Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML secara countinue horizontal seperti berikut ini :
<HTML><HEAD><TITLE>Judul</TITLE></HEAD>..... dan seterusnya. Atribut di dalam TAG.
Atribut di dalam TAG.
·         TAG
<BODY> memiliki atribut : <BODY bgcolor=#......"background="....."
      Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah menggunakan aturan komposisi RGB ( Red-Green-Blue) dengan angka hexadecimal maksimal adalah FF (setara dengan 255 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk memberikan warna merah (Red) maka nilainya "#FF0000", warna hijau nilainya adalah "#00FF00" dll. Adapun untuk nilai atribut background adalah nama file gambar lengkap dengan lokasi folder dan ekstensi filenya. Format gambar yang didukung oleh HTML antara lain JPEG, PNG dan GIF.
·         HEADING
      Digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar <H1> sampai terkecil <H6>, sedangkan untuk mengatur posisi heading digunakan atribut "align". Contoh <H1 align="..."> ditutup dengan </H1> yang nilai atributnya dapat diisi nilai LEFT untuk rata kiri, RIGHT untuk rata kanan dan CENTER untuk rata tengah.
·         PARAGRAF
      Untuk memformat paragraf agar dapat rata kiri, rata kanan, rata tengah dan justify digunakan tag pembuka <P align="..."> dan ditutup dengan </p>, adapun isi dari atribut "align" adalah LEFT,RIGHT,CENTER dan JUSTIFY. Antara paragraf dalam HTML akan dibatasi secara otomatis oleh sebuah jeda baris.
·         BREAKING NOW
      Tag <BR> ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup
·         HORIZONTAL RULER
      Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki "align" untuk perataan, "size" untuk mengatur ketebalan garisnya dalam pixel (px) dan "width" untuk mengatur lebar garisnya (dalam pixel atau persen). Penggunaan satuan persen (%) memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap WIDTH dari tampilan jendelanya. Tag <HR> juga tidak memiliki tag penutup.
·         PREFORMAT
      Fasilitas ini tampilan akan diformat sama persis dengan isi yang ada di dalam Tag <PRE>isi</PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.
·         BOLD, ITALIC, UNDER LINE, SUBSCRIPT, SUPERSCRIPT dan STRIPE
Cara memberikan efek huruf dalam dokumen HTML adalah sebagai berikut :
1.      Untuk huruf tebal (bold).............. <b>cetak tebal</b>
2.      Untuk huruf miring (italic) ............. <i>cetak miring</i>
3.      Untuk huruf dengan garis bawah (underline) ......... <u>garis bawah</u>
4.      Untuk huruf sebagai subscript .......... <sub>cetak subscript</sub>
5.      Untuk huruf sebagai superscript ......... <sup>cetak superscript</sup>
6.      Untuk huruf yang dicoret (strike) ............<s>cetak strike</s>

·         LIST
      Dalam dokumen HTML dapat menampilkan datar list seperti bullet & Numbering pada aplikasi program Microsoft Word. Ada dua macam list, yaitu UnorderList ( mirip bullets ) dan OrderedList ( Mirip Numbering )
      Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup. Untuk item-item list yang ada di dalamnya digunakan tag <LI> untuk mengawalinya. Unorderedlist mempunyai atribut "type" yaitu bentuk dari bulletnya. Ada beberapa jenis type yaitu DISC (default) untuk lingkaran tidak berlubang, CIRCLE untuk bentuk lingkaran berlubang, SQUARE untuk kotak. Orderedlist juga memiliki atribut tipe untuk menentukan tipe penomorannya, tipe tersebut adalah
1 untuk penomoran 1,2,3,….
A untuk penomoran A,B,C,….
I untuk penomoran I,II,III,IV …
a untuk penomoran a,b,c …
i untuk penomoran i,ii,iii, …
Bila kita tidak mendifinasikan tipenya, maka secara default Ordered List akan memberikan penomoran angka ( 1,2,3 … )
·         KOMENTAR DALAM HTML
      Komentar dalam tag HTML menggunakan tanda <!— sebagai pembuka dan tanda -- > sebagai penutup. Komentar tidak akan diinterpreter oleh we browser, hanya menjadi keterangan saja.
·         Karakter khusus dalam HTML.
Bentuk
Perintah
< 
&lt;
> 
&gt;
spasi
&nbsp;
©
&copy;
®
&reg;
&#8482;
-
&#8212;
±
&plusmin;
&para;
'
&acute;

1.1.3 Struktur Halaman HTML

Di bawah ini adalah visualisasi dari struktur halaman HTML:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>ini adakah heading</h1>
<p>ini adalah paragraph.</p>
<p>ini adalah paragraph lainnya.</p>
</body>
</html>
Catatan:
Hanya konten di dalam <body> (teks berwarna merah di atas) yang akan ditampilkan dalam browser.

1.1.4 Deklarasi <!DOCTYPE>

            Deklarasi <! DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan halaman web dengan benar.
Deklarasi ini hanya muncul sekali, di bagian atas halaman (sebelum tag HTML). Deklarasi <! DOCTYPE> tidak case sensitive.
Deklarasi <! DOCTYPE> untuk HTML adalah:
<!DOCTYPE html>

1.1.4.1 Contoh !DOCTYPE html

Di bawah ini adalah contoh pembuatan !DOCTYPE html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>

1.1.4.2 Penjelasan

·         <! DOCTYPE html> deklarasi untuk mendefinisikan dokumen ini menjadi HTML5
·         Elemen <html> adalah elemen root dari halaman HTML
·         Elemen <head> berisi informasi meta tentang dokumen
·         Elemen <title> menentukan judul untuk dokumen
·         Elemen <body> berisi konten halaman yang terlihat
·         <h1> mendefinisikan judul besar
·         <p> mendefinisikan names surrounded by angle brackets:sebuah paragraf

1.1.5 Versi HTML

Ada beberapa versi dari HTML :
Versi
Tahun
HTML
1992
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML 5
2014

1.2 JavaScript
1.2.1 Pengenalan JavaScript

            Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript”yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.
            Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.
            Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.
Tabel daftar navigator dan versi dari Javascript :
Versi JavaScript
Browser
JavaScript 1.0
Netscape Navigator 2.0, Internet Explorer 3.0
JavaScript 1.1
Netscape Navigator 3.0
JavaScript 1.2
Netscape Navigator 4.0/4.05, Internet Explorer 4.0
JavaScript 1.3
Netscape Navigator 4.06, Internet Explorer 5.0
JavaScript 1.4
Netscape Navigator 6.0, Internet Explorer 5.5
JavaScript 1.5
Netscape Navigator 6.0

            Janganlah anda bingung dengan perbandingan antara Javascript dan Java, karena berdasarkan pengalaman yang saya peroleh baik dari milist milist maupun forum forum banyak yang belum bisa menemukan perbedaan jelas antara keduanya, oleh karena itu saya akan jelaskan berikut ini.
            Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode langsung di tulis di dalam dokumen HTML dan sangat mudah terlihat, sedangkan di Java, kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML yang memuat applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat dibuka oleh browser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di load) oleh navigator.
            JavaScript sendiri merupakan bahasa yang mudah dipahami, dalam artian diperlukan skill novice atau dasar untuk mengerti bahasa ini, jika anda sudah terbiasa dan mengenal konsep bahasa pemrograman visual, maupun Java ataupun C, akan sangat mudah untuk memahami konsep Javascript.
Berikut ini satu tabel yang berisi beberapa perbandingan mendasar antara Java dan JavaScript :
JavaScript
Java
Bahasa yang diinterpretasikan langsung dari browser
Bahasa yang setengah terkompilasi dan memerlukan Java Virtual Mchine untuk menterjemahlannya
Kode terintegrasi dengan HTML
Kode (Applet) terpisah dari dokumen HTML, dipanggil pada saat membuka dokumen HTML
Bahasa dengan karakteristik yang terbatas
Bahasa dengan karakteristik yang luas (pendeklarasian jenis variable)
Hubungan dinamis, referensi dari obyek diverifiadi pada saat loading
Hubungan statis, obyek harus ada pada saat program di loading (di kompilasi)
Kode Program bisa diakses
Kode program tersembunyi

            JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;).

1.2.2 Bentuk skrip dari JavaScript

            Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag (kalau anda mengerti HTML pasti tahu dengan istilah ini) tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript. Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut :
<SCRIPT language="Javascript">
letakkan script anda disini
</SCRIPT>

1.2.3 Memberikan komentar (dan membuat skrip tidak tereksekusi)

            Sering kali pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Contoh kode diatas tidak akan terlihat di navigator kita, akan tetapi dia akan menampilkan jendela peringatan (berupa kotak dialog) karena skrip tersebut tidak lengkap dan akan merusak dokumen HTML yang sudah kita buat dengan bagusnya. Untuk itu maka kita tambahkan tag komentar agar supaya skripnya tidak dibaca sebagai skrip, akan tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :
<SCRIPT language="Javascript">
<!--
letakkan script anda disini
// -->
</SCRIPT>
Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar komentar di dalam skrip atau kode program yang kita bikin. kegunaannya antara lain adalah :
·         Mengingatkan kita akan bagian bagian khusus di dalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian dan kita sudah lupa dengan detail dan alur dari skrip tersebut.
·         Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk petunjuk yang anda bikin melalui komentar komentar, kecuali anda tidak mau mensharing program yang anda miliki
·         Untuk menulis komentar di JavaScript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.
·         Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash.
// semua karakter di belakang // tidak akan di eksekusi
·         Untuk menulis komentar yang terdiri dari beberapa baris kita gu nakan karakter /* dan */
/* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */
·         Perhatikan perbedaan tag komentar untuk bahasa HTML (diantaranya untuk menyembunyikan skrip dari beberapa browser versi lama) dan tag komentar JavaScript (untuk keperluan dokumentasi skrip).

1.2.4 Contoh program JavaScript

            Pada contoh berikut ini adalah contoh skrip JavaScript didalam suatu dokumen HTML, disini kita akan membuat satu program untuk menampilkan satu kotak dialog (dijelaskan lebih lanjut di bab 10) pada saat kita membuka dokumen HTML
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
alert("Hallo !");
// -->
</SCRIPT>
</BODY>
</HTML>

1.2.5 Meletakkan JavaScript dalam dokumen HTML

Ada beberapa cara untuk meletakkan kode JavaScript di dalam dokumen / halaman HTML
·         Menggunakan tag <SCRIPT>
      Dengan menggunakan cara ini, pada saat mengakses satu halaman HTML kita harus menunggu sampai proses pemanggilan halaman itu selesai sepenuhnya, sebelum kita menjalankan program JavaScript tersebut. Proses eksekusi kode HTML untuk menampilkan satu halaman dilakukan dari atas ke bawah, semakin banyak user yang mengakses halaman ini (dan seringnya gak sabar ...) dapat menganggu proses pemanggilan tersebut. Pada kasus dimana pemanggilan suatu fungsi JavaScript terjadi sebelum proses pemanggilan kode JavaScript selesai dilakukan oleh navigator, maka akan timbul pesan error.
      Oleh karena itu untuk menghindari kejadian diatas, maka pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.
      Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, contohnya “JavaScript“, “JavaScript1.1“, “JavaScript1.2“ untuk bahasa JavaScript atau bahasa lainnya, contohnya “VBScript“.
      Jika kita ingin menggunakan beberapa versi JavaScript di dalam satu halaman HTML (untuk menyesuaikan dengan kompatibilitas navigator) , makakita hanya perlu meletakkan kode kode JavaScript tersebut (berdasarkan versinya) kedalam beberapa tag <SCRIPT> dengan mencantumkan versi JavaScriptnya.
·         Menggunakan file ekstern
      Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut :
<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>
dimana url/file.js adalah adalah lokasi dan namafile yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.
·         Melalui event tertentu
Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahasan lebih lanjut ada di bab 5.Kodenya dapat di tulis sebagai berikut :
<tag eventHandler="kode Javascript yang akan dimasukkan">
dimana eventHandler adalah nama dari event tersebut.

1.3 Pengenalan Web Browsers
1.3.1 Pengertian Web

            World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke Internet. Web pada awalnya adalah ruang informasi dalam Internet, dengan menggunakan teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web. Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada layanan–layanan yang ada di Internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce). Kini, web seakan lebih populer daripada email, walaupun secara statistik email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna Internet. Web lebih populer bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan melakukan komunikasi e–mail yang menggunakan web sebagai interfacenya.
            Internet identik dengan web, karena popularitasnya sebagai penyedia informasi dan interface yang dibutuhkan oleh pengguna Internet dari masalah informasi sampai dengan komunikasi. Informasi produk dari yang serius sampai dengan yang sampah, dari yang cuma–cuma sampai dengan yang komersial, semuanya ada. Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku Internet lainnya dan menelusuri (informasi) di Internet. Selain itu web telah diadopsi oleh perusahaan sebagai sebagian dari strategi teknologi informasinya, karena beberapa alasan :
·         akses informasi mudah.
·         setup server lebih mudah.
·         informasi mudah distribusikan.
·         bebas platform adalah informasi dapat disajikan oleh browser web pada sistem operasi mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan.

1.3.2 Sejarah Web

            Sejarah Web dimulai pada bulan Maret 1989 ketika Tim Berner–Lee yang bekerja di Laboratorium Fisika Partikel Eropa atau yang dikenal dengan nama CERN (Consei European pour la Recherce Nuclaire) yang berada di Genewa, Swiss, mengajukan protokol (suatu tatacara untuk berkomunikasi) sistem distribusi informasi Internet yang digunakan untuk berbagi informasi di antara para fisikawan.
            Protokol inilah yang selanjutnya dikenal sebagai protokol World Wide Web dan dikembangkan oleh World Wide Web Consortium (W3C). Sebagaimana diketahui, W3C adalah konsorsium dari sejumlah organisasi yang berkepentingan dalam pengembangan berbagai standar yang berkaitan dengan Web.

1.3.3 Tujuan Web

            Tujuan dari web browser (Chrome, IE, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya.
            Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menentukan bagaimana menampilkan dokumen :



 
Copyright © Ezzooossss Softskill
Blogger Theme by BloggerThemes Sponsored by Internet Entrepreneur