gudang ilmu: Pengertian JavaScript

Pengertian JavaScript
Javascript adalah bahasa scripting yang digunakan untuk membuat aplikasi web, sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung keserver terlebih dahulu. Walaupun namanya menggunakan kata “Java”, Javascript tidak berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki kemiripan dalam hal syntax yang meniru bahasa C.

Nama Asli dari bahasa ini adalah LiveScript yang kemudian diganti karena adanya perjanjian kerjasama antaraNetscape dan Sun dengan balasan Netscape memperbolehkan untuk membundel browse mereka dengan menggunakan Java dan Sun. “JavaScript” merupakan merk terdaftar milik Sun Microsystem, Inc dan dilisensikan oleh Sun untuk Netscape Comunications dan entitas lainnya seperti Mozilla Foundation.
Kegunaan JavaScript
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML. (http://joisetrick.blogspot.com/2013/01/pengertian-dan-kegunaan-javascript.html)

JQuery
adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.

Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig.
JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
JQuery sendiri berlisensikan GNU General Public License dan MIT License.

Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:

Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek javascript dan animasi
Modifikasi HTML DOM
AJAX
Menyederhanakan kode javascript lainnya

Untuk memudahkan dalam memahami JQuery, sangat dianjurkan terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut :

function stripe (id) {

var even = false;

var evenColor = arguments [1] ? arguments [1] : "#fff";

var oddColor = arguments [2] ? arguments [2] : "#eee";

var table = document.getElementById (id);

if ( ! table) {return;}

var tbodies = table.getElementsByTagName ("tbody");

for (var h = 0; h < tbodies.lenght; h++) {

var trs = tbodies[h].getElementsByTagName("tr");

for (var i = 0; i < trs.lenght; i++) {

if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {

var tds = trs[i].getElementsByTagName("td");

for (var j = 0; j < tds.lenght; j++) {

var mytd = tds[j];

if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) {

mytd.style.backgroundColor = even ? evenColor : oddColor;

}

}

}

}

}

}

Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel.

JQuery ( ' table tr:nth-child(odd) ' ) .addClass ( ' odd' );

AJAX

AJAX, singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language – seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet. Belakangan ini, JSON (“JavaScript Object Notation”) lebih populer dan bisa dibaca – secara bawaan (native) – oleh JavaScript.
Berikut uraian yang lebih ringkas:
AJAX: Asynchronous JavaScript and XML. Sebuah sistem untuk mengirim dan menerima data dari server tanpa penyegaran laman (page refresh). (contoh di bawah)
XML: eXtensible Markup Language. Sebuah bahasa untuk mengorganisir data arbitrer. Menggunakan banyak sekali kurung sudut (angle brackets): “<>”. (contoh)
HTML: HyperText Markup Language. Sebuah subset XML yang khususnya berfungsi untuk menjelaskan dan mengorganisir laman web. (contoh)
JSON: JavaScript Object Notation. Metode yang lebih modern untuk memindahkan paket data yang sering dipakai bersama dengan AJAX. Bisa dibaca secara bawaan oleh JavaScript. (contoh)
Sebuah contoh perintah AJAX bisa berjalan seperti berikut:

Client memanggil laman dari server
Server merespon panggilan dan mengirimkan laman
Client membuat perintah AJAX ke server dan memanggil lebih banyak data
Server mengirimkan data tersebut
Client memutakhirkan laman dengan data tersebut tanpa me-refresh laman.

Facebook, Gmail, dan Pinterest adalah contoh situs-situs yang banyak menggunakan AJAX.
Bagian “Asynchronous” merujuk pada fakta bahwa ketika JavaScript menyampaikan panggilan AJAX ke webserver, ia terus berjalan sampai memperoleh respon – ia tidak memblokir dan berhenti saat data sedang diproses oleh server.

AngularJS

AngularJS adalah sebuah framework MVC full frontend untuk aplikasi web JavaScript. Ia dibangun di Google dan menyediakan sebuah metode cepat untuk membangun aplikasi web laman tunggal. Seperti jQuery, ia dimasukkan dala sebuah laman webd engan menggunakan tag <script>, dan ditulis dalam JavaScript. Namun, berbeda dengan jQuery, ia dimaksudkan sebagai sebuah framework untuk membangun sebuah aplikasi web utuh. Selain itu, AngularJS juga mengandung sebuah versi minimal jQuery secara default.
Jika Anda ingin mempelajari AngularJS, silakan cermati tutorial video dari EggHead. Anda harus punya pemahaman yang cukup mengenai JavaScript, sebab menulis dalam Angular membutuhkan pemahaman mendalam mengenai prototyping, scope, dan berbagai aspek JavaScript lainnya.
Website AngularJS menyajikan sebuah laman berisi contoh-contoh proyek yang dibangun dengan AngularJS, jika Anda ingin melihatnya.

Node.js

Anda tentu ingat bahwa JavaScript berjalan pada browser dengan satu pengecualian? Nah, pengecualian tersebut ialah Node.js. Ia adalah sebuah tool command-line untuk menjalankan JavaScript pada sebuah mesin tanpa harus menjalankannya pada peramban. Hal ini dimampukan dengan adanya suatu versi Chrome’s V8 Engine, yakni engine JavaScript yang berjalan dalam Google Chrome.
Sebelum adanya Node.js, para developer harus menggunakan berbagai bahasa pemrograman yang berbeda untuk backend dan frontend aplikasi web mereka. Misalnya PHP, Java, ASP.Net yang berjalan di sisi server, dan JavaScript di sisi browser. Sekarang dengan Node.js, para pengembang dapat mempergunakan JavaScript pada server sekaligus klien, artinya, para developer cukup fokus mempelajari satu bahasa pemrograman saja. Soal apakah metode ini lebih baik daripada sebelumnya masih diperdebatkan.

1. Anti Klik Kanan

Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.

<body oncontextmenu=”return false;”>

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type=”text/javascript”>
alert(“SELAMAT DATANG DI BLOG GAK JELAS INI”);
</script>

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type=”text/javascript”>
window.onbeforeunload=function(){
return confirm(“Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!”);
}
</script>

3.Onmouseover Sound

Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.

<script language=”javascript” type=”text/javascript”>
function playSound(soundfile) {
document.getElementById(“SCsound”).innerHTML=
“<embed src=\”"+soundfile+”\” hidden=\”true\” autostart=\”true\” loop=\”false\” />”;
}
</script>
<span id=”SCsound”></span>

Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.

<a href=”#” onmouseover=”playSound(‘URL-FILE-MUSIK/SOUND’);”>
Mouseover DISINI Buat Dengerin Musik</a>

Atau

<a href=”#” onclick=”playSound(‘URL-FILE-MUSIK/SOUND’);”>Klik DISINI Buat Dengerin Musik</a>

Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.
Mouseover DISINI Buat Dengerin Musik
Klik DISINI Buat Dengerin Musik

4.Show Hide Konten / Spoiler

Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada di forum-forum gan. Cara pasangnya gampang, loe cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya gan.

<script language=’javascript’ type=’text/javascript’>
function showHide() {     var ele = document.getElementById(“showHideDiv”);
if(ele.style.display == “block”) {             ele.style.display = “none”;       }
else {         ele.style.display = “block”;     } }
</script>

Sekarang tinggal nambahin kode di konten yang pengen di isi tombol buka tutupnya gan. Copy paste kode di bawah ini dan letakan kontenya di tempat yang udah gw kasi tanda gan.

<form action=”" method=”post”>
<input onclick=”return showHide();” type=”button” value=”Show-Hide” />
</form>
<div id=”showHideDiv” style=”display: none;”>
———> Konten Disini Gan <———
</div>

Konten bisa apa aja bisa gambar, teks atau apapun. Buat edit tulisan di tombolnya ganti aja Show-Hide sesuai keinginan loe. Contoh seperti di bawah ini di klik aja gan.

5. Teks Berjalan / Marquee

Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.

<marquee onmouseover=”this.stop()” onmouseout=”this.start()” behavior=”scroll” direction=”left” bgcolor=”#FF0000″>Teks, Link Atau Gambar Kalian Disini</marquee>

Buat ngerubah arahnya tinggal di ganti aja ”left” sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.
Contoh :
“scrool” direction=”left”
Contoh marquee atau teks berjalan
“alternate”
Contoh marquee atau teks berjalan
“scrool” direction=”left” dengan gambar

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.

<script type=”text/javascript”>
//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;
//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById(“prog”);
//get the start button
var startButt = document.getElementById(“startBtn”);
//get the textual element
var val = document.getElementById(“numValue”);
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+”%”;
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
setTimeout(“startProgress()”, 100);
//task done, enable the button and reset variables
else
{
document.getElementById(“startBtn”).disabled = false;
done = false;
currProgress = 0;
}
}
</script>
<progress id=”prog” value=”0″ max=”100″></progress>
<br />
<input id=”startBtn” onclick=”startProgress()” type=”button” value=”start” />
<div id=”numValue”>
0%</div>

Standarnya progress bar ini kodenya cuma <progress value=”0″ max=”100″></progress> gan. Contoh seperti yang dibawah ini, silahkan di coba gan. Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/
Progress Bar

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.
Biasa

<textarea rows=”4″ cols=”50″>
Teks atau Kode Disini Gan
</textarea>

Seleksi Otomatis

<textarea rows=”4″ cols=”50″ onclick=”this.focus();this.select()” readonly=”readonly”>
Teks atau Kode Disini Gan
</textarea>

Seleksi Dengan Tombol

<form name=”selectall”>
<textarea name=”messageBody” rows=”4″ cols=”50″>Teks atau Kode Disini Gan</textarea>
<br />
<input type=”button” value=”Select Text” onClick=”javascript:this.form.messageBody.focus();this.form.messageBody.select();”>
</form>

Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.
Biasa
Seleksi Otomatis
Seleksi Dengan Tombol

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode </head> atau bisa juga paste langsung di postingan dengan linknya gan.

<script language=”javascript” type=”text/javascript”>
function scpopup(url) {
newwindow=window.open(url,’name’,'height=200,width=150′);
if (window.focus) {newwindow.focus()}
return false;
}
</script>

Buat kode linknya seperti di bawah ini silahkan di copy paste gan.

<a href=”Target URL Pop up” onclick=”return scpopup(‘Target URL Pop up’)”>Contoh Link Popup</a>

Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan.

Contoh Dengan Button

· File js_sederhana.html

<html>

<head>

function contohalert()

{

alert("I'M KRIWIL...!!!!");

}

</script>

</head>

<body>

</body>

</html>

· Hasil Tampilan

Contoh Dengan Inputan

· File js_input.html

<html>

<head>

</head>

<body>

var input= prompt("Masukan nama Anda : ");

if(input != null && input != ""){

document.write("Hallo " + input);

}

else {

document.write("anda belum memasukan nama");

}

</script>

</body>

</html>

· Hasil Tampilan

Contoh Dengan Obyek Texfield

· File js_texfield.html

<html>

<head>

function tekan()

{

var nimisi =(document.fform.nim.value);

document.fform.xnim.value = nimisi;

var namaisi =(document.fform.nama.value);

document.fform.xnama.value = namaisi;

}

</script>

</head>

<body>

<H1>Masukkan Data Dengan Objek TextField</H1><hr>

<h3>Keterangan:<h3>

<table>

</tr>

</tr>

</td>

</tr>

</table>

<H3>Hasil Keterangan:</H3>

<table>

</table>

</div>

</form>

</body>

</html>

· Hasil Tampilan

gudang ilmu

Wednesday, July 16, 2014

Pengertian JavaScript