Panduan Lengkap JavaScript untuk Web
Diterjemahkan oleh
ScribdTranslationsPanduan Lengkap JavaScript untuk Web
Diterjemahkan oleh
ScribdTranslationsKursus PEMROGRAMAN DAN
TEKNOLOGI WEB
Bab 3
Bahasa JavaScript
RINGKASAN
[Link]
[Link] data
[Link] kendali
[Link] yang telah ditentukan
5. Prosedur dan fungsi
6. Pemrograman berbasis acara
[Link] penyemak imbas
[Link] WINDOW
[Link] dokumen
[Link] gambar
[Link] des cookies
12. DOM
JAVASCRIPT
1. Introduction
Mengapa JAVASCRIPT?
Tujuan utama:
memperkenalkan interaktivitas dengan halaman HTML
melakukan pengolahan sederhana di tempat kerja
dari pengguna
Cara: memperkenalkan program kecil, yang disebut
SCRIPT, di halaman HTML
bahasa pemrograman terstruktur yang berkontribusi pada
memperkaya HTML
JS diintegrasikan sepenuhnya ke dalam kode HTML
JS berisi pengelola peristiwa
Penulisan dan pelaksanaan kode JS
On peut placer du code JS à 3 endroits :
Antara tag <SCRIPT> dan </SCRIPT>
Dihubungkan dengan tag HTML yang mengelola sebuah
acara
Dikaitkan dengan pseudo-protokoljavascript:
dans une URL
JSEntre les balises <SCRIPT> et
</SCRIPT>
<SCRIPT BAHASA="JavaScript">
... kode//kode : instruksi, deklarasi fungsi,
dll...
</SCRIPT>
Jika termasuk dalam bagian <HEAD>, itu tidak
dieksekusi segera.
Di sisi lain, jika itu merupakan bagian dari tubuh dokumen, itu adalah
segera dieksekusi bersamaan dengan kode
HTML diinterpretasikan.
Penting untuk menyertakan pernyataan dari
fungsi dalam bagian <HEAD>..</HEAD>
Dikaitkan dengan tag HTML
<INPUT TYPE="button" VALUE="Hitung">
onClick="calculer()">
JS biasanya disisipkan dalam bentuk
panggilan fungsi
Fungsi yang telah dideklarasikan sebelumnya dalam
partai KEPALA
JSassocié pada pseudo-protokol
javascript
<A HREF="JavaScript:void(calculer())">
Untuk menghitung
URL palsu ini memungkinkan untuk memulai
eksekusi skrip yang ditulis dalam JS
Operator VOID memungkinkan untuk mengabaikan
parameter pengembalian fungsi
Contoh
<html>
<head>
<script>
fungsi saluer() { alert("Halo semuanya!"); }
</script>
</head>
<body>
<H4>Eksekusi Segera</H4>
<script>
peringatan("Halo semuanya!");
</script>
<H4>Eksekusi pada acara onClick</H4>
<form>
<input type="button" name="Bouton1" value="Salut"onClick="saluer()">
</form>
<H4>Eksekusi pada protokoljavascript:</H4>
<A HREF = "javascript:saluer()">untuk menyapa</a>
</body>
</html>
JAVASCRIPT
2. Struktur data
Data konstan
JS fournit les constantes suivantes, directement
tersedia :
konstanta numerik: bilangan bulat, bilangan riil ditulis dalam
notation décimale, ou flottante (càd en notation
ilmiah, misalnya: 2718E-3
2 konstanta boolean: benaratau salah
rantai karakter, dikelilingi oleh tanda kutip ""
ou d'apostrophes ' '
konstanta khusus null berarti "tidak ada", "ketiadaan dari
nilai". Nilai ini diberikan kepada setiap variabel
digunakan tanpa didefinisikan (misalnya prompt()
kembalikan null jika kita memilih tombol Batalkan
Rantai karakter
JavaScript mengonversi bilangan bulat menjadi string
karakter, yang memungkinkan untuk menggabungkan
nama dengan rangkaian karakter
Dalam instruksi penulisan di dokumen
arus, [Link]( ), data yang ditampilkan
dapat dipisahkan oleh koma atau +
Karakter khusus juga dapat disisipkan
dalam string: (kembali),
,(saat
(baris baru), (masuk), & (tab); ' untuk
halaman)
sebuah apostrof
Kita dapat menyisipkan kode HTML dalam bentuk
rantai, yang akan diinterpretasikan dengan baik saat eksekusi
seperti tanda yang sebenarnya, dan tidak ditampilkan
sebagaimana adanya.
Contoh
<script>
[Link]("Ini adalah nilai yang didekati pada ",
1E-3, " près de la constante e : ", 2718E-
3);
<P>Mon
<i>lycée</i> terletak di <u>Aladarissa</u>
di kota Fès
</script>
Variabel
5 jenis variabel dalam JS.
Les nombres : number, les chaines : string,
les booléens : boolean, les objets
Contoh :
var chaine = 'bonjour';
[Link](typeof(chaine));
Tabel
Pernyataan
varnom_tableau=new Array(dimension);
Contoh
var MonTableau = new Array(8)
var Les4saisons = new Array("printemps",
"été", "automne", "hiver");
var mois= new Array(12);
Tabel
Properti
panjang memberikan jumlah elemen.
var mois = new Array(12);
[Link]("Ada ",[Link], "bulan dalam
tahun
var NbMois = [Link] ;
diberikan dalam
trimestre
Metode
reverse() mengubah urutan elemen
sort() trie sesuai dengan urutan naik, atau sesuai dengan
model yang ditunjukkan sebagai parameter
JAVASCRIPT
3. Struktur kendali
jika ... [maka] .. lain
jika (kondisi1 && / || kondisi2 ) maka (maka est
opsional)
{ séquence 1 }
lainnya
{ séquence 2 }
Kondisi harus selalu dikelilingi oleh ( )
Urutan 1 dijalankan jika kondisinya
benar.
Urutan2 (opsional) dijalankan jika
kondisi salah.
kurung { } tidak wajib kecuali dalam hal
instruksi ganda.
Switch … Kasus
Perintah switch mengevaluasi sebuah ekspresi dan, sesuai dengan
hasil yang diperoleh dan kasus terkait, jalankan
instruksi yang sesuai.
Sintaksis :
switch (ekspresi)
{
kasus nilai1: /*Instruksi yang harus dilaksanakan ketika hasil dari ekspresi sesuai
à nilai1*/
instructions1;
[patah;]
kasus valeurN: /* Instruksi yang dijalankan ketika hasil dari ekspresi dengan nilai
instruksiN;*/
[putuskan;]
default: /* instruksi yang harus dijalankan ketika tidak ada nilai yang cocok */
instructions_def; [break;] */
}
Iterasi terkontrol FOR
untuk(valeur awal; kondisi; kelanjutan)
{séquence d'instructions }
sebuah nilai atau ekspresi awal yang berkaitan dengan
sebuah variabel integer yang disebut penghitung.
sebuah kondisi: selama itu benar,
pengulangan dilanjutkan.
sebuah ungkapan pengejaran yang terdiri dari
pembaruan penghitung.
Contoh
<SCRIPT language = "JavaScript" >
[Link]("Tabel kuadrat<BR>");
untuk (var i = 10; i <=15; i++)
i = i² = "+
i*i+"<BR>"); }
</SCRIPT>
Iterasi WHILE (SELAMA)
SELAMA(kondisi){urutan instruksi }
<SCRIPT bahasa = "JavaScript" >
fungsi hasard(N) { return [Link]([Link]()*N)+1;}
max= prompt("Angka acak dari 1 hingga ", "6");
<H2>Tabel angka antara 1 dan diambil secara acak,
hingga mendapatkan ",max,"</H2>";
tab = new Array(10*max);
a = peluang(maks);
tab[0] = a;
i=0;
sementara ( a != max ) { a = hasard(max); tab[i]= a; i ++ }
[Link](max, ' diperoleh pada ', i, ' undian ke- <P>') ;
i=0;
sementara ( tab[i] != null )
[Link]("tab [", i, "] = ", tab[i], "---");
jika (i %5 ==0 && i!=0) [Link]("<br>");
i ++; };
</SCRIPT>
JAVASCRIPT
4. Kelas yang telah ditentukan
Kelas Matematika
[Link](), akar kuadrat.
[Link]() , [Link]() , [Link]() ,[Link] (),
[Link](), [Link]()
[Link](), [Link]() bulatkan langsung
inférieur / supérieur.
[Link](base, eksponen), fungsi pangkat, di mana basis
et exposant adalah ekspresi numerik
apapun yang dapat dievaluasi.
[Link]() , [Link]()
[Link](), nama 'nyata' yang dipilih secara acak dari
[0 , 1[
[Link]() membulatkan ke bilangan bulat terdekat.
Kelas String
eval() menghitung secara numerik suatu ekspresi aritmatika
diberikan dalam bentuk string.
parseInt(), menghasilkan angka bulat yang berasal dari konversi
(jika memungkinkan) dari sebuah string karakter.
Jika konversi tidak mungkin, nilai yang dikembalikan adalah 0.
parseFloat(), memberikan angka desimal dengan cara yang sama.
[Link](), untuk mengubah chaine menjadi huruf kapital.
[Link](d, f) mengambil sebagian dari string, mulai dari
karakter posisi d, sampai f-1.
[Link](n) memberikan karakter yang terletak di posisi ke-n (n
dari 0 hingga [Link]-1).
[Link](s_ch) memberikan posisi pertama dari karakter
rantai sama dengan karakter pertama dari s_ch.
Kelas Tanggal
Date() , untuk mendapatkan tanggal dan waktu
courante (dikenal dari sistem)
Tanggal(bulan hari, tahun jam:menit:detik) untuk
25 Desember 1995
13:30:00
Tanggal(tahun, bulan, hari), sebuah urutan
convenable dari 3 bilangan bulat, misalnya (2000,
7, 1)
JVASCRIPT
5. Prosedur dan fungsi
Prosedur dan fungsi
<KEPALA>
<SCRIPT LANGUAGE=JavaScript >
nomProsedur(param1, param2, ...)
{ séquence d'instructions; }
fungsi namaFungsi(param1, param2, ...)
{ séquence d'instructions;
kembalikan_variabel_nom
</SCRIPT>
</KEPALA>
Contoh
<HEAD>
<SCRIPT language="javascript">
fungsi bonjour(prenom)
Halo, bagaimana kabarmu
fungsi volumeBola(jari-jari)
{ return 4/3*[Link]*[Link](jari-jari,3); }
fungsi menghitungHarga(HargaSatuan, JumlahArtikel)
{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</KEPALA>
<TUBUH>
<SCRIPT language="javascript">
halo("Toto");
var montant=CalculPrix( 150 , 4) ;
Kamu harus membayar
Tahukah kamu bahwa volume bola dengan jari-jari satu adalah
volumeSphere(1)," ?<BR>" );
</SCRIPT>
</TUBUH>
JAVASCRIPT
6. Pemrograman berbasis peristiwa
Peristiwa
onBlur: terjadi ketika sebuah kolom Textarea, Text, atau Select tidak lagi diaktifkan.
onChange: terjadi ketika suatu kolom Textarea, Text, atau Select diubah
oleh pengguna.
onClick: terjadi ketika suatu komponen Button, Checkbox, Radio Link, Reset
ou Submit menerima klik mouse
onFocus: terjadi ketika sebuah komponen Textarea, Text, atau Select diaktifkan.
onLoad: terjadi ketika peramban telah selesai memuat sebuah jendela atau semua
kerangka dari FRAMESET. Peristiwa onLoad ditempatkan dalam tag
BADAN atau dalam tag FRAMESET
onMouseOver: terjadi ketika kursor melewati sebuah tautan atau area
mengaktifkan gambar.
pilih produk saat komponen Textarea atau Text dipilih.
onSubmit: se produit quand un formulaire est globalement validé appui du
tombolKirim.
onUnload:se produit quand on quitte un document. L'événementonUnloadse
letakkan di dalam tag BODY atau di dalam tag FRAMESET.
onAbort: terjadi ketika pengguna menghentikan pemuatan gambar
onError: terjadi ketika pemuatan halaman atau gambar menghasilkan
sebuah kesalahan.
onMouseout: terjadi ketika kursor meninggalkan area gambar.
hyperlink.
onReset: se produit quand on clique sur le boutonreset formulir
Zona teks
<FORM NAME="Questions">
<INPUT TYPE="text" NAME="txtClasse" VALUE="" SIZE="10">
</FORM>
Teks yang dimasukkan oleh pengguna dialokasikan ke properti nilai
komponenTeksKelas
Isi dari bidang teks dapat diakses melalui namanya
lengkap
[Link]
itu dapat diberikan kepada variabel MaClasse melalui ekspresi:
MaClasse = [Link]
Formulir dalam dokumen yang sama disimpan dalam sebuah
tabel disebut formulir; formulir pertama kemudian dinilai
forms[0], yang kedua adalah forms[1] dll..
SiQuestions terletak pada posisi formulir pertama, kita
dapat menggantikan penugasan sebelumnya dengan :
MaClasse = [Link][0].[Link]
objek SELECT
selectedIndexnuméro de l'élément sélectionné dans
daftar
var num = [Link]
options[] adalah array yang telah ditentukan yang berisi
objek dalam daftar
[Link][num]est l'objet champ situé au N°
num (ingat: yang pertama memiliki nomor 0)
[Link][num].value adalah nilai dari opsi
N° nomor daftar.
[Link][num].text adalah teks berikutnya
juara <OPTION>.
Tombol RADIO
[Link][num] adalah tombol radio N° num (yang
1er a nomor 0) dari kumpulan tombol
pilihan
memeriksa boolean yang menggambarkan keadaan suatu
tombol : jika ([Link][num].checked) ....
[Link][num].value adalah nilai yang terkait
di tombol N° nomor seri tombol.
Kotak centang
Pengobatannya sangat mirip dengan
kasus tombol radio, berbeda dengan
setiap kotak memiliki nama yang berbeda
dari yang lain. Status dicentang setiap kotak
harus diuji secara individu.
Lihat contoh lengkap yang mengikuti.
JAVASCRIPT
7. Objek-objek peramban
Hierarki objek
kelas peramban
navigator: ini adalah perangkat lunak klien yang namanya tercatat
dalam [Link]
window: objek tingkat tertinggi yang dibuat oleh
penjelajah, itu jendelanya.
location: c'est l'objet URL de la fenêtre courante.
history: ce sont les URL précédemment visitées.
document: il s'agit du document courant, dont les
properti adalah judul, warna (latar, teks, tautan)
...), formulir, gambar dll.
Properti objek WINDOW
Protokol yang digunakan:
[Link]
URL :[Link]=
[Link]
[Link]/util/programmation/javascript/J
our3/[Link]
Message de la barre d'état :
[Link]
Propriétés de l'objetDOCUMENT
Titre du document :[Link]=
Cours JavaScript
Warna teks :[Link]=
#000000
Warna latar belakang :[Link]=
#f1f1f1
Properti objek navigator
[Link]
[Link]
[Link]
nama_aplikasi.navigator
[Link]
[Link]
JAVASCRIPT
8. Kelas WINDOW
Sifat 1
defaultStatus: représente le message de défaut qui sera affiché dans
batang status
<body onLoad="defaultStatus='Halo semuanya'">
status adalah pesan yang ditampilkan di bilah status jendela.
[Link]="Jangan lupa untuk menutup jendela Anda!"
length mewakili jumlah bingkai dalam jendela induk (0
sinon).
namereprésente nama jendela
spesifikasikan nama jendela induk yang telah membuatnya
secara dinamis, dengan open().
parentest nama bingkai di mana jendela mungkin berada
selfest adalah sinonim untuk nama jendela dan merujuk pada
jendela saat ini
top merujuk pada jendela utama browser.
window adalah sinonim untuk jendela saat ini
closedbooléen yang menunjukkan apakah jendela telah ditutup.
penggunaan : jika (! [Link]) [Link]();
Properti 2
ini adalah dokumen HTML yang dipelajari
daftar riwayat dokumen yang dimuat di jendela (mensimulasikan tindakan
des tombol berikut dan sebelumnya)
[Link]() : dokumen sebelumnya
[Link]() : yang berikutnya
[Link](n) : memuat ulang dokumen yang terletak n langkah dari saat ini
dokumen (n adalah tanda qcq)
lokasi
[Link] : rangkaian yang berisi url
[Link] : bagian dari URL setelah # (tautan internal)
[Link] : nom serveur et port
[Link] : http, ftp, javascript, ..
[Link]() : muat ulang dokumen saat ini = [Link](0)
[Link](url)
frames[] adalah sebuah array yang mewakili semua bingkai dalam sebuah jendela
Jendela-kotak dapat dinamai pada saat mereka
definisi dengan sebuah nama, jika tidak kita bisa merujuknya dengan frames[index]
Metode pengelolaan jendela
Avecopen()etclose(), le programmeur peut ouvrir et fermer des
jendela tambahan
nomFenetre=open("URL","nom_fenetre", "options"); membuka sebuah
jendela baru
"URL" adalah alamat dokumen yang akan dimuat dalam yang baru
jendela.
"nom_fenetre" adalah nama jendela, yang harus diberikan pada atribut
TARGET dari tag <FORM> atau <A>
"options" adalah daftar elemen opsional yang menjelaskan
penampilan jendela.
Kemudian kita menggunakan jendela untuk merujuk kepada sebuah
objek atau properti dari jendela baru.
Sebagai contoh, untuk menulis di komponen pesan dari
formulir formu yang terletak dalam dokumen jendela fen,
diciptakan oleh fen=open(...), kita menulis :
[Link]= "...";
Parameter bagian OPSI
bilah alat toolbar[=yes|no] | [=1|0]
url terlihat location[=yes|no] | [=1|0]
daftar? directories[=yes|no] | [=1|0]
bilah status status[=yes|no] | [=1|0]
bilah menu menubar[=ya|tidak] | [=1|0]
bilah gulir gulir[=ya|tidak] | [=1|0]
redimensionnement resizable[=yes|no] | [=1|0]
visibilitas permanen? alwaysRaised[=yes|no] | [=1|0]
tertutup dengan jendela. orang tua dependant[=yes|no] | [=1|0]
ketinggian height= dimension en pixels
lebar lebar = dimensi dalam piksel
penempatan X screenX = nb pixels
penempatan Y screenY = nb pixels
JAVASCRIPT
9. Kelas dokumen
Tabel objek dokumen
anchors[] tabel tautan internal <A NAME= ...>
applet[] tabel applet <APPLET CODE=...>
embeds[] tabel objek yang disisipkan <EMBED
SRC=..>
forms[] tableau des formulaires <FORM >
elements[] tableau des composants du formulaire
<INPUT ..>, <SELECT ..>, ..
images[] tableau des images <IMG SRC=...>
tautan[] tabel tautan hiper <A HREF= ...>
Properti utama
Titre du document :[Link]
Warna teks :[Link]
Warna latar belakang :[Link]
Warna tautan : [Link]
Couleur de liens visités :[Link]
Warna tautan yang diaktifkan: [Link]
Alamat dokumen :[Link]
Tanggal terakhir diubah :
[Link]
Cookie dokumen: [Link]
Metode utama
write(ch1, ch2, ..) menampilkan rangkaian atau
argumen yang diterjemahkan menjadi string.
open() membuat dokumen baru, tidak
jangan bingung dengan penciptaan sebuah
jendela!
close() menutup dokumen, tidak mungkin
d'y ajouter alors du texte.
getSelection() memberikan teks
terpilih
JAVASCRIPT
10. Pengolahan gambar
Properti
var monImage = new Gambar()
Propertis
Mereka sesuai dengan atribut dari tag <IMG>
name, src, lowsrc, height, width, border, hspace, vspace ..
Properti yang paling penting, src memungkinkan untuk memuat
file gambar dari URL dan menyimpannya dalam objek.
var monImage = new Image(); [Link]= "[Link]";
Tapi gambar tidak ditampilkan. Itu bisa ditampilkan dalam sebuah
balise <IMG>
<IMG SRC=...>
Selain itu, sayangnya, properti tinggi dan lebar tidak
tidak dapat diubah
Contoh
Jadilah sebuah gambar yang digunakan untuk tautan
Ketika pengguna menggerakkan mouse-nya, ia menyebabkan
sebuah peristiwa onMouseOver yang harus mengubah
sumber gambar
Saat dia meninggalkannya, peristiwa onMouseOut adalah
memicu dan gambar awal akan ditampilkan kembali
<A HREF="javascript:void(0)">
onMouseOver="[Link]='../images/[Link]' "
onMouseOut="[Link]='../images/[Link]' "> <IMG
NAMA="img" SRC="../images/[Link]"></A>