by
(Gita Putri Sukmawati – XI RPL 1)
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 antara Netscape 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)
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>
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>
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>
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>
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.
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>
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;”>
<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;
//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>
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/
Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/
Progress Bar
0%
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>
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>
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>
<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>
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>
Cara Compile dan Run File Java di Command Prompt
1.
PATH
Hal pertama
yang mesti dilakukan adalah mengecek path di kompi (baca: komputer) atau lepi
(baca :laptop). Langkahnya sebagai berikut.
-
Buka Properties-nya My Computer
-
Pilih
tab Advanced (di
Windows XP) atau Advanced system
settings (di Windows 7)
Klik tombol Environment
Variables
-
Pastikan
ada variabel dengan nama PATH dengan
value alamat bin-nya Java
Kalo
sudah ada, gambarnya kira-kira seperti ini:
Ini
gambar kalau semisal belum ada:
Kalau belum ada, silakan buat variable baru
dengan klik tombol New dan
silahkan mengisivariable name dengan “PATH” dan variable value dengan alamat
bin-nya Java. Ini contoh gambarnya:
2. CMD
Setelah memastikan path-nya
sudah diset, ayo kita buka cmd (command prompt). Langkahnya sebagai berikut.
Klik
Start >> All Programs >> Accessories >> Command Prompt
atau
Klik Start >> Run.. >> Ketikkan ‘cmd’ >> Klik OK. Seperti gambar ini:
atau
Klik Start >> Run.. >> Ketikkan ‘cmd’ >> Klik OK. Seperti gambar ini:
Tentukan
letak file Java yang akan dikerjakan. Misal ada file Tes.java di C:\tes,
Berarti, dari command prompt (cmd), kita harus masuk ke
folder C:\tes terlebih dahulu.
Untuk itu,
ayo belajar perintah dasar keluar masuk folder di command prompt. Pertama kali
masuk cmd biasanya direktori (baca: folder) kerjanya langsung mengarah ke
folder milik user yang sedang aktif, dalam percobaan kali ini, misalnya
langsung masuk ke C:\Users\Nur Safira Assyifa. Berikut perintah-perintah dasarnya:
- Untuk mengetahui ada file apa saja disitu.
dir - Untuk naik satu tingkat direktori.
cd.. - Untuk
masuk folder.
cd [nama folder]
Nah, ini misalnya contoh cmd-ku
(Perhatikan direktori kerjanya yang berubah). Pertama kan direktori kerjanya masih
di C:\Users\Nur Safira Assyifa, sekarang sudah di C:\tes. Mudah bukan? ;-)
3. Compile
Nah, sekarang gimana cara COMPILE? Perintahnya seperti
ini:
javac [nama_file].java
Misalnya, ada file Tes.java di C:\tes. Ini satu kasus
kalau di-compile ada salahnya, pasti keluar pesan error, seperti ini:
Ini kasus kalo di-compile
benar. :)
4. Run
Tinggal
RUN aja kan? Perintahnya
seperti ini:
java [nama_file]
Ini contoh isi file Tes.java:
|
1
2
3
4
5
|
public class Tes{
public
static void main (String [] args){
System.out.println("Tes
aja..");
}
}
|
Hasilnya seperti ini di cmd:
Sumber : http://safirsyifa.wordpress.com/2010/02/27/cara-compile-dan-run-file-java-di-command-prompt/
No comments:
Post a Comment