Beranda>Tutorial Desain Web>Tutorial Javascript

Inilah inti dari JavaScript (kompilasi pengetahuan dasar JS)

Penulis：Eve Cole Waktu Pembaruan：2009-06-11 16:26:36

1 Buat blok skrip

untuk mereferensikan kode program konten
<bahasa skrip="JavaScript">
Kode JavaScript ditulis di sini
</script>

2 Sembunyikan kode skrip
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
document.write("Halo");
// -->
</skrip>
Kode yang relevan tidak akan dieksekusi di browser yang tidak mendukung JavaScript

3. Ditampilkan jika browser tidak mendukungnya.
Kode program konten referensi
<tanpa skrip>
Halo untuk browser non-JavaScript.
</noscript>

4 Tautkan file skrip eksternal
Kode program konten referensi
<script Language="JavaScript" src="/"filename.js""></script>

5 Skrip komentar
Kode program konten referensi
// Ini adalah komentar
document.write(“Halo”); // Ini adalah komentar
/*
Semua ini
adalah sebuah komentar
*/

6 Keluaran ke browser
Kode program konten referensi
document.write(“<strong>Halo</strong>”);

7 Definisikan variabel
Kode program konten referensi
var myVariable = “beberapa nilai”;

8 penambahan string
Kode program konten referensi
var myString = “String1” + “String2”;

9 Pencarian string
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var myVariable = “Halo”;
var TherePlace = myVariable.search("di sana");
dokumen.write(therePlace);
// -->
</script>

10 Penggantian string
Kode program konten referensi
thisVar.replace(“Senin”,”Jumat”);

11 Memformat string
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var myVariable = “Halo”;
document.write(variabel saya.besar() + “<br>”);
document.write(variabel saya.blink() + “<br>”);
document.write(variabel saya.bold() + “<br>”);
document.write(variabel saya.tetap() + “<br>”);
document.write(myVariable.fontcolor(“merah”) + “<br>”);
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(myVariable.italics() + “<br>”);
document.write(variabel saya.kecil() + “<br>”);
document.write(variabel saya.strike() + “<br>”);
document.write(variabel saya.sub() + “<br>”);
document.write(variabel saya.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = "String Saya";
var finalString = firstString.bold().toLowerCase().fontcolor("merah");
// -->
</script>

12 Membuat larik
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var myArray = Array baru(5);
myArray[0] = "Entri Pertama";
myArray[1] = “Entri Kedua”;
myArray[2] = “Entri Ketiga”;
myArray[3] = “Entri Keempat”;
myArray[4] = “Entri Kelima”;
var anotherArray = new Array("Entri Pertama","Entri Kedua","Entri Ketiga","Entri Keempat","Entri Kelima");
// -->
</script>

13 Penyortiran larik
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var myArray = Array baru(5);
arraysaya[0] = "z";
arraysaya[1] = "c";
arraysaya[2] = "d";
arraysaya[3] = "a";
arraysaya[4] = "q";
dokumen.write(myArray.sort());
// -->
</script>

14 Pisahkan string
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var variabelku = "a,b,c,d";
var stringArray = myVariable.split(",");
dokumen.write(stringArray[0]);
dokumen.write(stringArray[1]);
dokumen.write(stringArray[2]);
dokumen.write(stringArray[3]);
// -->
</script>

15 Pesan peringatan muncul
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
window.alert("Halo");
// -->
</script>

16 Kotak konfirmasi muncul
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
var result = window.confirm("Klik OK untuk melanjutkan");
// -->
</script>

17 Fungsi khusus
Kode program konten referensi
<bahasa skrip="JavaScript">
<!--
fungsi kelipatan(angka1,angka2) {
var hasil = angka1 * angka2;
hasil pengembalian;
}
// -->
</script>

18 Panggil fungsi JS
Kode program konten referensi
<a href=”#” onClick=”functionName()”>Teks tautan</a>
<a href="/”javascript:functionName"()”>Teks tautan</a>

19 Jalankan fungsi setelah halaman dimuat
Kode program konten referensi
<body onLoad="functionName();">
Badan halaman
</body>

20 Penilaian bersyarat
Kode program konten referensi
<skrip>
<!--
var userChoice = window.confirm("Pilih OK atau Batal");
var hasil = (Pilihan pengguna == benar) ? “OK” : “Batal”;
dokumen.write(hasil);
// -->
</script>

21 Tentukan jumlah loop
Kode program konten referensi
<skrip>
<!--
var myArray = Array baru(3);
myArray[0] = "Barang 0";
myArray[1] = "Barang 1";
myArray[2] = "Barang 2";
untuk (i = 0; i < myArray.length; i++) {
dokumen.tulis(Arraysaya[i] + “<br>”);
}
// -->
</script>

22 Tetapkan eksekusi di masa depan
Kode program konten referensi
<skrip>
<!--
fungsi halo() {
window.alert("Halo");
}
window.setTimeout("halo()",5000);
// -->
</script>

23 Fungsi eksekusi terjadwal
Kode program konten referensi
<skrip>
<!--
fungsi halo() {
window.alert("Halo");
window.setTimeout("halo()",5000);
}
window.setTimeout("halo()",5000);
// -->
</script>

24 Membatalkan eksekusi yang dijadwalkan
Kode program konten referensi
<skrip>
<!--
fungsi halo() {
window.alert("Halo");
}
var myTimeout = window.setTimeout("halo()",5000);
jendela.clearTimeout(myTimeout);
// -->
</script>

25 Jalankan fungsi saat halaman dibongkar
Kode program konten referensi
<body onUnload="functionName();">
Badan halaman
</body>

JavaScript seperti ini 2: Output browser

26 Akses objek dokumen
Kode program konten referensi
<bahasa skrip="JavaScript">
var myURL = dokumen.URL;
window.alert(URL saya);
</script>

27 Menghasilkan HTML secara dinamis
Kode program konten referensi
<bahasa skrip="JavaScript">
document.write(“<p>Berikut beberapa informasi tentang dokumen ini:</p>”);
dokumen.write(“<ul>”);
document.write(“<li>Dokumen Referensi: “ + document.referrer + “</li>”);
document.write(“<li>Domain: “ + dokumen.domain + “</li>”);
document.write(“<li>URL: “ + dokumen.URL + “</li>”);
dokumen.write(“</ul>”);
</script>

28 Keluaran baris baru
Kode program konten referensi
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);

29 tanggal keluaran
Kode program konten referensi
<bahasa skrip="JavaScript">
var Tanggal ini = Tanggal baru();
dokumen.tulis(Tanggal ini.toString());
</script>

30 Tentukan zona waktu pada tanggal tersebut
Kode program konten referensi
<bahasa skrip="JavaScript">
var myOffset = -2;
var Tanggal saat ini = Tanggal baru();
var userOffset = Tanggal saat ini.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
CurrentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“Waktu dan tanggal di Eropa Tengah adalah: “ + CurrentDate.toLocaleString());
</script>

31 Tetapkan format keluaran tanggal
Kode program konten referensi
<bahasa skrip="JavaScript">
var Tanggal ini = Tanggal baru();
var thisTimeString = Tanggal ini.getHours() + “:” + Tanggal ini.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “ pada “ + thisDateString);
</script>

32 Baca parameter URL
Kode program konten referensi
<bahasa skrip="JavaScript">
var urlParts = dokumen.URL.split("?");
var parameterParts = urlParts[1].split(“&”);
untuk (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[i].split(“=");
var pairName = pairParts[0];
var pairValue = pairParts[1];
document.write(pairName + " : " +pairValue );
}
</skrip>
Apakah Anda masih menganggap HTML tidak memiliki kewarganegaraan?

33 Buka objek dokumen baru
Kode program konten referensi
<bahasa skrip="JavaScript">
fungsi Dokumen Baru() {
dokumen.open();
document.write(“<p>Ini adalah Dokumen Baru.</p>”);
dokumen.close();
}
</script>

lompatan 34 halaman
Kode program konten referensi
<bahasa skrip="JavaScript">
window.lokasi = “http://www.x-force.cn/”;
</script>

35 Tambahkan jendela kemajuan pemuatan halaman web
Kode program konten referensi
<html>
<kepala>
<bahasa skrip='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</skrip>
<title>Halaman Utama</title>
</kepala>
<body onLoad='placeHolder.close()'>
<p>Ini adalah halaman utama</p>
</tubuh>
</html>

Sekian untuk JavaScript 3: Gambar

36 Membaca atribut gambar
Kode program konten referensi
<img src="/”image1.jpg"” name="myImage">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Lebar</a>

37 Memuat gambar secara dinamis
Kode program konten referensi
<bahasa skrip="JavaScript">
myImage = Gambar baru;
myImage.src = “Tellers1.jpg”;
</script>

38 Penggantian gambar sederhana
Kode program konten referensi
<bahasa skrip="JavaScript">
rollImage = Gambar baru;
rollImage.src = “rollImage1.jpg”;
defaultImage = Gambar baru;
defaultImage.src = “gambar1.jpg”;
</skrip>
<a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;"
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>

39 Tampilan gambar acak
Kode program konten referensi
<bahasa skrip="JavaScript">
var imageList = Array baru;
daftar gambar[0] = "gambar1.jpg";
daftar gambar[1] = "gambar2.jpg";
daftar gambar[2] = "gambar3.jpg";
daftar gambar[3] = "gambar4.jpg";
var imageChoice = Matematika.lantai(Matematika.acak() * Daftargambar.panjang);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>

40 Penggantian gambar diimplementasikan berdasarkan fungsi
Kode program konten referensi
<bahasa skrip="JavaScript">
var sumber = 0;
penggantian var = 1;
fungsi createRollOver(Gambar asli,Gambar pengganti) {
var imageArray = Array baru;
imageArray[sumber] = Gambar baru;
imageArray[sumber].src = Gambar asli;
imageArray[penggantian] = Gambar baru;
imageArray[penggantian].src = replacementImage;
kembalikan imageArray;
}
var rollImage = createRollOver("image1.jpg","rollImage1.jpg");
</skrip>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[penggantian].src;”
onMouseOut=”document.myImage1.src = rollImage1[sumber].src;”>
<img src="/"image1.jpg"" lebar=100 nama="myImage1" border=0>
</a>

41 Membuat tayangan slide
Kode program konten referensi
<bahasa skrip="JavaScript">
var imageList = Array baru;
imageList[0] = Gambar baru;
daftar gambar[0].src = “gambar1.jpg”;
imageList[1] = Gambar baru;
daftar gambar[1].src = “gambar2.jpg”;
imageList[2] = Gambar baru;
Daftar gambar[2].src = “gambar3.jpg”;
imageList[3] = Gambar baru;
daftar gambar[3].src = “gambar4.jpg”;
fungsi tayangan slide(nomor gambar) {
dokumen.slideShow.src = imageList[imageNumber].src;
nomor gambar += 1;
if (nomor gambar < daftar gambar.panjang) {
window.setTimeout("slideShow(" + nomor gambar + ")",3000);
}
}
</skrip>
</kepala>
<tubuh onLoad="slideShow(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>

42 gambar iklan acak
Kode program konten referensi
<bahasa skrip="JavaScript">
var imageList = Array baru;
daftar gambar[0] = "gambar1.jpg";
daftar gambar[1] = "gambar2.jpg";
daftar gambar[2] = "gambar3.jpg";
daftar gambar[3] = "gambar4.jpg";
var urlList = Array baru;
urlList[0] = "http://some.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://somewhere.else/";
urlList[3] = "http://kanan.di sini/";
var imageChoice = Matematika.lantai(Matematika.acak() * Daftargambar.panjang);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>

Itu saja untuk JavaScript 4: Formulir

43 Komposisi formulir
Kode program konten referensi
<metode formulir=”posting” action=”target.html” nama=”Form ini”>
<tipe masukan=”teks” nama=”Tekssaya”>
<pilih nama="Pilihan Saya">
<option value="1">Pilihan Pertama</option>
<option value=”2”>Pilihan Kedua</option>
</pilih>
<br>
<input type=”kirim” value=”Kirim Saya”>
</form>

44 Akses konten kotak teks dalam formulir
Kode program konten referensi
<nama formulir="Formulir Saya">
<tipe masukan=”teks” nama=”Tekssaya”>
</bentuk>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Periksa Bidang Teks</a>

45 Salin konten kotak teks secara dinamis
Kode program konten referensi
<nama formulir="Formulir Saya">
Masukkan beberapa Teks: <input type=”text” name=”myText”><br>
Salin Teks: <input type=”text” name=”copyText”>
</bentuk>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Salin Bidang Teks</a>

46 Mendeteksi perubahan pada kotak teks
Kode program konten referensi
<nama formulir="Formulir Saya">
Masukkan beberapa Teks: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>

47 Akses Pilih yang dipilih
Kode program konten referensi
<nama formulir="Formulir Saya">
<pilih nama="Pilihan Saya">
<option value=”Pilihan Pertama”>1</option>
<option value=”Pilihan Kedua”>2</option>
<option value=”Pilihan Ketiga”>3</option>
</pilih>
</bentuk>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Periksa Daftar Pilihan</a>

48 Tambahkan item Pilihan secara dinamis
Kode program konten referensi
<nama formulir="Formulir Saya">
<pilih nama="Pilihan Saya">
<option value=”Pilihan Pertama”>1</option>
<option value=”Pilihan Kedua”>2</option>
</pilih>
</bentuk>
<bahasa skrip="JavaScript">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Pilihan Ketiga”;
</script>

49 Validasi kolom formulir
Kode program konten referensi
<bahasa skrip="JavaScript">
fungsi checkField(bidang) {
if (bidang.nilai == "") {
window.alert("Anda harus memasukkan nilai pada kolom");
bidang.fokus();
}
}
</skrip>
<nama formulir="formulirsaya" action="target.html">
Bidang Teks: <input type="text" name="myField" onBlur="checkField(this)">
<br><input type=”kirim”>
</form>

50 Verifikasi item yang dipilih
Kode program konten referensi
fungsi Daftar Periksa(pilihan) {
if (pilihan.panjang == 0) {
window.alert("Anda harus membuat pilihan dari daftar.");
kembali salah;
}
kembali benar;
}

51 Mengubah aksi formulir secara dinamis
Kode program konten referensi
<nama formulir="myForm" action="login.html">
Nama pengguna: <input type=”teks” nama=”nama pengguna”><br>
Kata sandi: <input type=”kata sandi” nama=”kata sandi”><br>
<input type=”button” value=”Login” onClick=”this.form.submit();”>
<input type="button" value="Daftar" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="Ambil Kata Sandi" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>

52 Menggunakan tombol gambar
Kode program konten referensi
<nama formulir="myForm" action="login.html">
Nama pengguna: <input type=”teks” nama=”nama pengguna”><br>
Kata sandi: <input type=”kata sandi” nama=”kata sandi”><br>
<input type="image" src="/"login.gif"" value="Login">
</form>

53 Enkripsi data formulir
Kode program konten referensi
<BAHASA SKRIP='JavaScript'>
<!--
fungsi mengenkripsi(item) {
var Barang baru = '';
for (i=0; i < item.panjang; i++) {
Barang baru += barang.charCodeAt(i) + '.';
}
kembalikan Barang baru;
}
fungsi encryptForm(Form saya) {
untuk (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = mengenkripsi(myForm.elements[i].value);
}
}

//-->
</SKRIP>
<form name='myForm' onSubmit='encryptForm(ini); window.alert(this.myField.value);'>
Masukkan Beberapa Teks: <input type=text name=myField><input type=submit>
</form>

Itu saja untuk JavaScript 5: Jendela dan bingkai

54 Mengubah prompt teks bilah status browser
Kode program konten referensi
<bahasa skrip="JavaScript">
window.status = “Pesan status baru”;
</script>

55 Kotak konfirmasi konfirmasi muncul
Kode program konten referensi
<bahasa skrip="JavaScript">
var userChoice = window.confirm("Klik OK atau Batal");
jika (Pilihan pengguna) {
document.write("Anda memilih OK");
} kalau tidak {
document.write("Anda memilih Batal");
}
</script>

56 Meminta masukan
Kode program konten referensi
<bahasa skrip="JavaScript">
var userName = window.prompt("Masukkan Nama Anda","Masukkan Nama Anda Disini");
document.write(“Nama Anda adalah “ + Nama Pengguna);
</script>

57 Buka jendela baru
Konten yang dikutip //Buka jendela browser baru dengan kode program bernama myNewWindow
<bahasa skrip="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow");
</script>

58 Atur ukuran jendela baru
Kode program konten referensi
<bahasa skrip="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>

59 Atur posisi jendela baru
Kode program konten referensi
<bahasa skrip="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>

60 Apakah akan menampilkan toolbar dan scroll bar
Kode program konten referensi
<bahasa skrip="JavaScript">
window.open("http://www.x-force.cn/",toolbar=tidak, menubar=tidak);
</script>

61 Apakah mungkin untuk menskalakan ukuran jendela baru?
Kode program konten referensi
<bahasa skrip="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>

62 Muat dokumen baru ke jendela saat ini
Kode program konten referensi
<a href='#' onClick='document.location = '125a.html';' >Buka Dokumen Baru</a>

63 Mengatur posisi gulir halaman
Kode program konten referensi
<bahasa skrip="JavaScript">
if (document.all) {//Jika browser IE, gunakan atribut scrollTop
dokumen.body.scrollTop = 200;
} else { //Jika browser NetScape, gunakan atribut pageYOffset
jendela.halamanYOffset = 200;
}</script>

64 Buka jendela layar penuh di IE
Kode program konten referensi
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>Buka jendela layar penuh</a>

65 Pengoperasian jendela baru dan jendela induk
Kode program konten referensi
<bahasa skrip="JavaScript">
//tentukan jendela baru
var newWindow = window.open("128a.html","newWindow");
newWindow.close(); //Menutup jendela baru yang dibuka di jendela induk
</script>Tutup kode program jendela induk di jendela baru
window.opener.close()

66 Tulis konten ke jendela baru
Kode program konten referensi
<bahasa skrip="JavaScript">
var newWindow = window.open("","newWindow");
jendela baru.dokumen.open();
newWindow.document.write("Ini adalah jendela baru");
newWIndow.document.close();
</script>

67 Muat halaman ke dalam halaman bingkai
Kode program konten referensi
<frameset cols=”50%,*”>
<nama bingkai="frame1" src="/"135a.html"">
<nama bingkai="frame2" src="/"tentang:kosong"">
</bingkai>
Muat halaman dalam frame2 di frame1
parent.frame2.document.location = “135b.html”;

68 Berbagi skrip antar halaman bingkai
Mengutip konten Jika ada kode script pada file html di frame1
fungsi doAlert() {
window.alert("Bingkai 1 dimuat");
}

Kemudian

kode program

metodenya

bisa dipanggil seperti ini di frame2


<tubuh onLoad="parent.frame1.doAlert();">
Ini bingkai 2.
</body>

69 Data publik
Konten referensi dapat menentukan item data dalam halaman bingkai sehingga data tersebut dapat digunakan oleh kode utilitas halaman dalam beberapa bingkai.
<bahasa skrip="JavaScript">
var persistenVariable = “Ini adalah nilai persisten”;
</skrip>
<frameset cols=”50%,*”>
<nama bingkai="frame1" src="/"138a.html"">
<nama bingkai="frame2" src="/"138b.html"">
</frameset>

Dengan cara ini, variabel persistenVariable dapat digunakan di frame1 dan frame2

70 Framework Code Library
Konten yang dikutip Menurut beberapa gagasan di atas, kita dapat menggunakan halaman bingkai tersembunyi sebagai

kode

program basis kode dari seluruh kumpulan bingkai


<frameset cols=”0,50%,*”>
<nama bingkai="codeFrame" src="/"140code.html"">
<nama bingkai="frame1" src="/"140a.html"">
<nama bingkai="frame2" src="/"140b.html"">
</bingkai>
Artikel Terkait