Senin, 01 Agustus 2016

Pengertian CSS dan Javascript

REVIEW CSS DAN JAVASCRIPT


A.   Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

a.  Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ketrebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

b.  Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

c.  Syntax
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color darih1 ke warna merah (red).

Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent..
h1,h2,h3 {color:red;font-family:arial;font-size:150%;}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

d.  Implementasi css
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
·         Inline CSS
·         Embed atau memasang kode css ke dalam bagian <head>
·         Nge link ke external CSS
·         Import CSS file

Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warnabiru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntaxproperty: value.

Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type=”text/css” media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
  1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
  2. p {font-family: arial; font-size: small;}
  3. h1 {color: red; }
  4. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import “style.css”;
atau
@import url(“style.css”);

Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemenH1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=leftsementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt

e.  Class dan Id selector
CLASS SELECTOR
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag 
 dan di akhiri dengan tag 
.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

<h1>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID SELECTOR
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag 
 dan di akhiri dengan tag 
.
Contoh screenshot penggunaan CSS
B.   Pengertian JavaScript

       JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadiLiveScript, dan akhirnya menjadi JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTMLPHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti GmailGoogle Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.

Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag .[7]
script type="teks/javascript">
        alert("Halo Dunia!");
script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript).[7] Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:[7]
script type="teks/javascript" src="alamat.js">
script>

Script pada bagian head

Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu.[7] Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).[7]
html>
head>
script type="teks/javascript">
...
script>
head>
html>

Script pada Body

Script ini dieksekusi ketika halaman di-load sampai di bagian .[7] Ketika menempatkan script pada bagian berarti antara isi dan JavaScript dijadikan satu bagian.[7]
html>
head>
head>
body>
script type="teks/javascript">
...
script>
body>
html>
Jumlah JavaScript di dan yang ditempatkan pada dokumen tidak terbatas.[7]

External JavaScript

Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman.[7] Maka JavaScript dapat ditulis di file secara eksternal.[7] Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML.[7] Berkas JavaScript tersebut disimpan dengan ekstensi .js.[7]
JavaScript : js/xxx.js document.write("pesan ini tampil ketika halaman diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag pada halaman HTML-nya.[7]
<html>
<head>
<title>Contoh</title>
</head>
<body>
<script src="xxx.js">
<script>
<p>Script di atas berada di berkas "xx.js" (eksternal) p>
<body>
<html>

Code Sample: JavaScriptBasics/Demo/JavaScript.html:
JavaScript Page
 window.alert(“The page is loading”);
</head>
<body>
<p align=”center”>
<span onclick=”document.bgColor = ‘red‘;”>Red</span> |
<span onclick=”document.bgColor = ‘white’;”>White</span>
</p>
<script type=”text/javascript” src=”Script.js”></script>
</body>
</html>

1 komentar: