Resume Pemrograman Web 2 kelas 10

Resume Pemrograman Web 2 kelas 10

Komponen text area multiline

Komponen text area merupakan area tempat untuk menyimpan text atau tulisanbaru,atau bisa dikatakan sebuah komponen HTML yang digunakan untukmenampilkan text dalam bentuk dan format text.

Format umum penulisan text area multiline

<textarea atribute=”atribute">

NAME

Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut iniakan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM.

COLS

Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA.

READONLY

Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanyadapat dibaca dan disalin tapi tidak dapat diubah.

DISABLED

Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapatdisalin dan diubah.

Komponen input text password

Komponen input text password bertanggung jawab untuk memasukan datapassword.

Format dari elemeninput text password HTML-nya adalah sebagai berikut :

<input type=password name=name>

<input type=password name=name maxlength=length>

<input type=password name=name size=size>

<input type=password name=name value=value>

Komponen input text

Komponen input text merupakan komponen untuk memasukan data text keserver dalam bentuk textfield.

Format tag HTML-nya adalah sebagai berikut :

<INPUT TYPE=TEXT NAME=name>

<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>

<INPUT TYPE=TEXT NAME=name SIZE=size>

<INPUT TYPE=TEXT NAME=name VALUE=value>

Form menggunakan input hidden

Format tag form input hidden HTML-nya adalah sebagai berikut :

<INPUT TYPE=HIDDEN NAME=name VALUE=value>

Definisi dan fungsi cascading style sheet

Cascading Style Sheet atau lebih sering disebut dengan istilah CSSmerupakan salahsatu dokumen website yang bertujuan untuk mengatur gaya(style) tampilan website.Selain itu dengan penggunaan dari CSS dalam pembuatan web akanmemberikan beberapa manfaat seperti berikut ini :

􀁸Kode HTML menjadi lebih sederhana dan lebih mudah diatur.

􀁸Ukuran file menjadi lebih kecil sehingga load file lebih cepat.

􀁸Mudah untuk mengubah tampilan, hanya dengan mengubah fileCSS saja.

􀁸Dapat berkolaborasi dengan JavaScript dan merupakan pasangansetia HTML.

􀁸Dapat digunakan dalam hampir semua jenis web browser.

Versi CSS	Fitur CSS
CSS 1	Fokus mengatur pemformatan dokumen HTML, seperti - Font (Jenis ketebalan). -Warna, teks, background dan elemen lainnya. - Text attributes, misalnya spasi antar baris, kata dan huruf. - Posisi teks, gambar, table dan elemen lainnya. - Margin, border dan padiing.
CSS 2	- Mengatur format dokumen untuk kebutuhan di cetak dengan printer - Posisi konten - Downloadable - Font huruf - Table layout - Media tipe yang -Sangat mendukung tampilan desain website
CSS 3	Animasi warna bahkan sampai animasi 3D - Menunjang kompabilitas website dengan smartphone - CSS math - CSS obyek model - Mendukung fungsi multimedia pada website - Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap" -Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts". -Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut tumpul dan shadow

Anatomi dari cascading style sheet

Bagian CSS	Keterangan
Selector	- nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal - bagian elemen HTML yang akan ditunjuk untuk mengatur style - dapat berupa class dan ID
Property	- aturan dalam CSS untuk mengubah selector yang dipilih - property mempunyai nilai yang disebut dengan value - properties di dalam tanda { }
value	- Merupakan nilai dari property CSS

Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :

Selector{ Property : value; }

Berikut ini sedikit contoh penggunaan selektor, property, dan value untukmengatur style padasebuah form

form{ margin-left:0; }

Dari contoh penggunaan selector, property, dan value di atas maka tiap bagianakan di jelaskansebagai berikut :

- form              : selector yang akan di atur stylenya

- margin-left    : property yang digunakan untuk jarak fieldset daribatas kiri layout

- 0                    : nilai dari property margin-left

 Cara Kerja cascading style sheet

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulisstyle (selektor, id dan class), maka secara otomatis style tersebut akanbekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class,untuk kemudian id dan class tersebut kita sesuaikan dan terapkan padakode HTML . Dan secara otomatis pula CSS itu akan bekerja pada fileHTML.

Berdasarkan letak tempat stylenya, penerapan CSS pada sebuah halaman webdapat dilakukan dengan beberapa alternatif di antaranya adalah :

Inline Style Sheet

Contoh penulisan CSS secara inline stylesheet, CSS berikut mengatur style di elemen <p></p> atau paragraf.

<p align="center" style="color:#303; font-size:24px">SMK</p>

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style>di atas tag<body>, lebihtepatnya didalam tag <head>

External Style Sheet

<input type="submit" value="Login" class="btn"onClick=parent.location="Home_Iframe.htm" />

CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya fileatau halaman web yang ingin menerapkan style pada file CSS tersebut tinggalmemanggil file CSS tersebut.

Cascading style sheet pada tampilan gambar

Untuk mengaturgambar dapat dituliskan secara inline seperti contoh berikut :

<img src="nama-file-gambar" width="lebar" height="tinggi"alt="text" title="text"border="1" />

Cascading style sheet Gambar untuk background

div { background: url(“latar.png”);;

background-image: url(“latar.png”);;}

Cascading style sheet pada elemen form

Form

{ border:1px solid #666666;

width : 480; /*lebar form*/

margin-left:0; /*jarak dari batas kiri layout*/

background-color:#ffff66;}

 Cascading style sheet pada input text

Textarea mendefinisikan kontrol input berupa area teks pada form .Elemenform textarea dapat diatur stylenya dengan menggunakan selector textarea{…}.

Cascading style sheet pada text field

extfield mendefinisikan kontrol input text pada form. Berikut ini adalah contohformat CSS pada input yang membuat efek dari input textfield menjadi sepertisisi formulir cetakan.

 Cascading style sheet pada button

Button merupakan tombol yang dapat diklik.

Cascading style sheet padaradio button

Radio button merupakan bagian dari elemen input form. Saat ingin memberikanstyle pada radio button dapat menggunakan selector input.selector.

VARIABEL

Variable adalah suatu obyek yang berisi data data, yang mana dapatdimodifikasi selama eksekusi program.Di Javascript terdapat beberapa kriteriauntuk penamaan variabel, seperti ditunjukkan berikut ini.

- Nama variabel harus dimulai oleh satu huruf (huruf besar maupun hurufkecil) atau satu karakter _ (garis bawah).

- Nama variabel bisa terdiri dari kombinasi huruf, angka atau karakter _dan $ (spasi kosong tidak diperbolehkan).

- Nama variabel tidak boleh memakai nama-nama yang termasuk kedalam kata kunci bahasa Javascript.

Di Javascript kita menggunakan sistem case sensitive yang artinya membedakannama variabel dengan huruf besar dan huruf kecil, oleh karena itu biasakanlahmemberikan nama variabel dengan aturan yang sama.

Ada beberapa teknik pemberian nama yang dapat digunakan, diantaranya adalah

- Camel Case, dengan teknik untuk nama variabel yang lebih dari satu kataakan digabungkan tanpa garisbawah dan setiap huruf pertama dari tiapkata dituliskan dalam huruf kapital. Sedangkan untuk huruf pertama darikata pertama dapat juga ditulisakan menggunakan huruf kecil. Contoh:

AsalSekolah, SuhuUdara, luasPersegiPanjang, namaLengkap, dan

sebagainya.

- Notasi Hungaria, disini diawal dari nama variabel akan ditambahkan tipedata yangditampungnya, seterusnya dapat menggunakan notasi camelcase.

 Contoh: stringNamaLengkap (atau lebih pendek, strNamaLengkap,string menunjukkanvariabel ini berisi data alfanumerik), intUmur (intmenunjukkan variabel ini menyimpan bilangan bulat), dan sebagainya.

- Selain dengan camel case, variabel dengan nama lebih dari satu katadapat juga dibuat dengan menambahkan garisbawah sebagaipenghubung antar katanya. Contoh: asal_sekolah, luas_persegi,nama_lengkap, dan sebagainya

PEMBUATAN VARIABEL

Ada dua istilah yang biasa digunakan dalam pembuatan variabel, yakni deklarasidan inisialisasi. Deklarasi digunakan untuk menunjukkan proses permintaanalokasi memori oleh Javascript ke sistem operasi. Sedangkan inisialisasidigunakan untuk memberikan nilai awal bagi variabel tersebut.

Format deklarasi (pembuatan) variabel di Javascript adalah sebagai berikut :

var nama_variabel_nya ;

atau, dengan tambahan inisialisasi :

var nama_variabel = nilai ;

atau untuk deklarasi variabel lebih dari satu dalam satu baris perintah :

var nama_variabel1, nama_variabel3 = nilai_var_3, …,

nama_variabelN ;

TIPE DATA

Di javascript data yang dapat disimpan dalam suatu variabel dikelompokkanmenjadi tiga jenis, yaitu :

- Bilangan/numerik, bulat atau desimal, yang kita sebut sebagai integeratau float

- Kata/kalimat (kumpulan huruf/karakter) : kita sebut string

- Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untukmemeriksa suatu kondisi :

- true : jika kondisinya benar

- false : jika kondisinya salah

INTEGER (BILANGAN BULAT)

Bilangan bulat dapat ditampilan dalam beberapa basis berikut ini :

- Basis desimal, integer di tuliskan dalam urutan unit bilangan (dari 0sampai dengan 9),permulaan bilangan tidak boleh dimulai oleh angka 0.

- Basis heksadesimal, dituliskan dalam urutan unit bilangan dari 0 sampaidengan 9 atau urutan huruf dari A sampai dengan F (atau a sampaidengan f), permulaan bilangan dimulai oleh 0x atau 0X.

- Basis oktal, dituliskan dalam urutan unit angka dari 0 sampai dengan 7,permulaan bilangan dimulai dengan angka 0

FLOAT (BILANGAN DESIMAL)

Bilangan desimal biasa disebut juga sebagai bilangan pecahan atau bilanganyang dapatdituliskan menggunakan tanda koma. Bilangan ini juga bisa di tuliskan denganbeberapa cara berikut :

- Bilangan bulat desimal : 895

- Bilangan dengan tanda koma : 895,12

- Bilangan pembagian : 27/11

- Bilangan eksponensial : bilangan dengan tanda koma, kemudian diikutioleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinyapangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif)

STRING

String adalah kumpulan dari karakter/huruf, nilai variabel string selalu diapitdengan tanda (') atau ("), kedua tanda tersebut harus digunakan secaraberpasangan dan tidak bisa digunakan secara sendiri-sendiri atau bersilangan.

BOOLEAN

boolean adalah satu variabel khusus yang berguna untuk mengevaluasi suatukondisi tertentu, oleh karenanya boolean mempunyai dua nilai :

- True : diwakili oleh nilai 1

- False : diwakili oleh nilai 0

Fungsi parseInt()

Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parametertertentu (bisadalam bentuk string ataupun dalam bentuk bilangan dalam basisyang disebutkan di parameterkedua) menjadi bilangan bulat.

parseInt(string[, basis]);

Fungsi parseFloat()

Adalah satu fungsi dasar dari Javascript yang memungkinkan merubah variableyang dilewatkandengan parameter tertentu menjadi bilangan decimal

parseFloat(string);

Struktur Kontrol

Struktur kontrol merupakan konsep pemrograman dikembangkan sedemikianrupasehingga dapat digunakan untuk menghasilkan keluaran tertentu sesuainilai-nilai dari variabel-variabel yang ada.

Struktur Percabangan

Konsep percabangan dalam pemrograman mirip seperti konsep percabangan dijalan raya, yang penentuan arahnya ditentukan berdasarkan tujuan dari user.

Switch

Switch merupakan bentuk lain dari percabangan.

Fungsi

Dalam pemrograman merupakan suatu mekanisme yang digunakan untukmengelompokkan program dalam menyelesaikan suatu kasus, proses ataurumus aritmatika tertentu.

function nama_fungsi ( parameter1, parameter2, ...,

parameterN )

{

kode program sebagai definisi fungsi

return nilai_balik_jika_ada;

}

Keterangan :

nama_fungsi               : nama dari fungsi yang akan dibuat.

parameter1...N            : merupakan syarat yang diperlukan oleh fungsi tersebut untukdapat berjalan. Suatu fungsi juga dapat tidak memiliki parameter, artinya dapatdijalankan tanpa syarat.

Return                         : perintah untuk membelikan hasil operasi dari fungsi ke user.nilai_balik_jika_ada  : nilai hasil operasi dari fungsi. Suatu fungsi dapat juga tidakmemiliki nilai balik. Jika tidak memiliki nilai balik maka pernyataan return dapatditiadakan.

Interaksi User

Adanya interaktifitas dalam aplikasi akan membantu menarik minat penggunauntuk menggunakan aplikasi yang dikembangkan.

Format penerapan kode Javascript pada atribut event diatas sebagai berikut :

<tag atribut-event=”kode javascript;;” … > … </tag>

atau untuk tag tanpa penutup.

<tag atribut-event=”kode javascript;;” … />

Format Dinamis Dengan Javascript

Selain karena adanya interaksi aplikasi web juga dapat lebih menarik apabiladilengkap dengan kemampuan untuk visualisasi setiap interaksi yang terjadi.

obyectHTML.style.properti = “style baru”;;