JAVASCRIPT  client(istemci)’nin browserın da çalışan bir programlama dilidir.Browser JAVASCRIPT komutlarını yorumlayarak işlevlerini yerine getirir. Web de  kullanılan programlama dillerini   (server)sunucuda çalışan ve  istemcide(client)  çalışan olarak ikiye ayırıyoruz.

HTML sadece sayfamızı oluşturmamıza yarayan  ve sayfamızdaki nesnelere kısıtlı özellikler katmamıza yarayan  text tabanlı bir etiket(markup) dilidir.İçerisinde programlama dili olması için gereken değişkenler , karar yapıları , döngüler ..vb  gibi yapıları içermez.HTML ile durağan kullanıcıların hareketlerine duyarlı olmayan web sayfaları oluşturabiliriz.

WEB SAYFASI :………………içerik + sunum + etkileşim

Yukarıya baktığımızda içerik kısmını HTML ile oluşturduğumuzu biliyoruz. Html içerik saklar fakat sakladığı içeriklerin ki bu içerikler ( yazı , resim…..) gibi özelliklerini değiştirmek yada ayarlamak için çok kısıtlı imkanlar sunar . İşte burada devreye var olan içeriğin sunulması gelmektedir. Sunum işlemi CSS yapılmaktadır.Şuanda içerik ve sunum işlemini anladığımıza göre biraz etkileşime bakalım . Evet etkileşim dediğimizde web sayfasının kullanıcı hareketlerine tepki göstermesi , yada durağan olmayan nesneler aklımıza gelmektedir.İşin bu kısmını JAVASCRIPT yardımıyla yapmaktayız.Burada şunu belirtmek isterim JAVASCRIPT bir programlama dilidir dolayısıyla içerisinde karar / döngü / kontrol yapıları bulunmaktadır.

Programlama dillerinde yazılan kodlar tek başlarına çalışırlar. Kodları çalıştırmak istediğinizde hata ayıklama ve  COMPİLE ( DERLEME)  işlemi  gerçekleştirilerek makine diline  yada arakod(çalışması için framework’e ihtiyaç duyan) çevrilirler. Fakat JAVASCRIPT  HTML içerisine eklenir ve tarayıcı tarafından yorumlanarak yazılan kodların işlevleri yerine getirilir.

JAVASCRIPT ile kullanıcı hareketlerine duyarlı , kullanıcı ile iletişime geçebilen , sayfamızdaki CSS kodlarını çalışma anında değiştirebileceğimiz ,  çalıştığı browserin yüklü olduğu bilgisayarla ilgili çeşitli bilgilere( işletim sistemi , saat , tarayıcı özellikleri) ulaşabileceğimiz , sayfamıza görsel nitelikli nesneler ekleyebileceğimiz , sayfalar oluşturmamızı sağlar

Son zamanlarda popüler olan AJAX ki sayfanın tamamını yenilemeden sadece belirli bir  region(alanı) yenilemek için kullan ılınılır  bu uygulamaların yapıtaşı JAVASCRIPTtir.

JAVASCRIPT dediğimizde DOM modelinden bahsetmek gerekir. DOM ( document object model ) bu model dokuman obje modeli , bu model sayesinde JAVASCRIPT ile sayfa üzerindeki tüm sayfa nesnelerine ( elemanlarına ) ulaşmamız mümkündür.DOM yeni versiyon hemen hemen tüm tarayıcılar tarafından desteklenmekle beraber eski tip tarayıcılarda farklılık gösterebilmektedir. Bu durumda java script içerisinde tarayıcı model ve versiyonunu tespit edip alternatif kodlar yazmamız gerekebilir.

Temel bir HTML yapısı aşağıda gözükmektedir.

JAVASCRIPT kodlarımızı HTML içerisine eklemekteyiz  bu durumda html sayfasını açıp bir text editöründe ( notepad , notepad ++ ) yada Dreamweaver ve benzeri programlarda JAVASCRIPT kodlarımızı yazabiliriz

• JAVASCRIPT  kodlarımızı <script>  </script> tagları arasına yazıyoruz. Script tagı içerisinde script dili ve tipini belirlemeliyiz.

- language sayfamızda  kullandığımız JAVASCRIPT sürümünü belirtmek için kullandığımız  bir parametredir.Eğer belirtilen sürüm tarayıcılar tarafından desteklenmiyorsa script bloğu çalıştırılmaz. Bunu engellemek için bu parametreye sadece “JAVASCRIPT” yazmayı uygun görüyoruz .Eğer yeni çıkan bir sürüm kullanacaksak o sürümle beraber gelen tüm metot , yöntem ve özellikler sayfada kullanılabilir.

- Type parametresi ise içeriğin tipini tanımlarız  standart olarak içeriğimiz yani script blokları  rasına yazdığımız içerik text ve JAVASCRIPTtir.

CSS YAPISI VE  SYNTAX (SÖZDİZİMİ)

CSS söz dizimi 2 ana kısımda incelenebilir. Seçici , Bildirim Bloğu tabi burada bildirim bloğu içersinde bildirimler vardır.

Seçici : Bir gurup bildirimi(özellikler ve aldıkları değerleri) temsil eden bir addır.Tüm  HTML etiketleri  yada sınıf seçici yada id seçici olabilir.

Bildirim bloğu: Seçici için tüm CSS özellikleri içinde tutan yapıdır. Süslü parantezle açılır ve Bildirimler bittiğinde süslü parantezle kapanır. ” {} ” ,Bunlara bildirim bloğu kapsayıcıları denir. İçerisinde bildirimleri taşır her bildirimden sonra muhakkak ; konmalıdır.

Bildirimler: Bildirim CSS özelliği(property) ve aldığı değerden (value) oluşur. Property ve value arasında  ” : ” karakteri kullanılmalıdır.

Property : value (CSS özelliği : özelliğin aldığı değer )

örneğin ;

Yukarıdaki örnekte seçici ve bildirim bloğu , bildirimler gözükmektedir.

CSS ‘de özellikler ve değerler:

CSS standart olarak size bir çok özellik ve bu özelliklerin alabileceği değerleri sunar.Hangi özelliğe hangi değeri vereceğiniz tamamen tasarımınızla ilgilidir. CSS değerler çift tırnak içine alınmaz.

SEÇİCİLER

Daha öncede söylediğim gibi seçiciler bir gurup özellik ve özelliklerin aldıkları  değerlerin adıdır.Özellik gurupları bu adla temsil edilirler.

1.Etiket (xHTML ) Seçiciler:

Seçici olarak XHtml etiketleri kullanılınır.Var olan tüm etiketler Birer seçici olarak kullanılabilir.XHTML etiketlerinin görevlerini yeniden tanımlamak için kullanıldığı gibi XHTML elemanına ek özellikler katmak içinde kullanılabilir.

Bir XHTML etiketini olan <p> ( paragraf etiketi )  seçici olarak tanımlarsak ve  özellikler eklersek  sayfada kullanılan tüm <p> etiketlerinin içindeki nesnelere bu özellikler uygulanır.

Özet olarak bir XHTML elemanı seçici olarak kullanılırsa   tüm belge boyunca ona atadığınız özellikleri barındırdıkları içeriklere(yazı, resim,tablo) uygularlar.

Burada h2 ve p elemanlarına CSS özellikleri atanmış ve sayfada görüldüğü gibi içinde taşıdıkları nesnelere bu özellikler uygulanmış.

2.Sınıf  Seçicisi  (Class selector)

Sınıf seçicilerini bir XHTML etiketine farklı özellikler eklemek için kullanabiliriz ki bu durumda bu sınıf seçicileri bağımlı sınıf seçicileri olarak adlandırılırlar.

Örnekte dikkat edileceği üzere <p> etiketi sınıf seçici olmadan yapılsaydı yazılan özelliklerden belgedeki  tüm <p> tagları  etkilenecekti ama şimdi p tagı için iki sınıf oluşturuldu ve ayrı ayrı özellikler atandı artık istenilen <p>  etiketlerine  istenilen class atanabilir.

Burada tanımlanan iki sınıfta <p> tagına bağımlı sınıflardır. Bu durumda sayfada sadece <p> tagına bu class’lar atanabilir

Eğer bağımlı bir sınıf seçici oluşturmak  istiyorsak ;

Eğer bağımsız yani tüm imler tarafından kullanılabilecek bir sınıf seçici oluşturmak istersek bu durumda nokta ile başlayıp sınıf seçici adını yazmamız yeterli olacaktır.

Sınıf seçicinin en önemli özelliği tüm HTML elemanları tarafından kullanılabilmeleridir.Yani bağımsız sınıf seçicilerini farklı XHTML imlerine atayabiliriz.

ÖLÇÜLENDİRME

CSS özelliklerine uzunluk değerleri 2 şekilde tanımlanabilir.

Mutlak değerler (absolute values ) ve  göreceli değerler (relative values)

Mutlak uzunluk birimleri:

Mutlak uzunluk birimlerinin değerleri tam ve kesin değerlerdir.Bu değerler herhangi bir nedene bağlı olarak değişmez.

in : inç (1inch=2,54cm) bir uzunluk birimidir.ör: 2,25in

cm : Santimetre ör: 2,33cm

mm: Milimetre ör: 23mm(1 mm 0,1cm eşittir)

Pt : punto baskı birimidir.Genellikle font büyüklüğü tanımlamak için kullanılınır.

1pt: 1/72 inç  örneğin :  16pt

pc : Pika  1 pika 12punto değerine eşittir.Baskıda kullanılan bir ölçü  birimdir.

Göreceli Uzunluk Birimleri:

Göreceli uzunluk birimleri kullanıldığı ortama göre değişir.Yani ölçü birimlerinde ölçülendirme başka bir veriye göre yapılır.Bu durumda verinin özellikleri değiştiğinde göreceli uzunluklarda değişir.

ex : kullanılan fontun  x harfinin yüksekliğine göre ölçülendirme işlemi yapılır.

em : kullanılan fontun M harfinin genişliği

px : piksel yazılımsal olarak ekranı oluşturan en küçük noktadır.Bu durumda uzunluk değerleri px cinsinden verilebilir.Çözünürlüğün değişmesine bağlı olarak px cinsinden verilen uzunluk değerleri de  değişir.

% (yüzde) : Değer atadığımız özelliğe bağlı başkaca bir özelliği yada kapsayıcı elemanın uzunluk değerlerini baz alarak ölçülendirme yapılır .  25%

RENK DEĞERLERİ

Programatik olarak renkleri kodlamamız gereklidir.CSS renk kodlaması için bize farklı seçenekler sunar.

#RRGGBB : Burada ilk 2 basamak  kırmızı(red) diğer 2 basamak yeşil(green) ve son iki basamak mavi(blue) rengini temsil etmektedir.Burada basamaklara girilecek değerler 16 sayı tabanında(hexadecimal) olmalıdır.Girdiğiniz değerlere göre renk yoğunlukları belirlenir.

#RGB :Her renk için (red,gren,blue) bir basamak ayrılmıştır.Yine hexadecimal sayı sistemi kullanılacaktır.

Rgb(R,G,B): Bir rengin kırmızı , yeşil , mavi olmak üzere sayısal değerleri

ör : rgb(204,51,225)  burada bir renk tanımlaması için 0-255 değerleri girilebilir.

Rgb(R%,G%,B%) : Bir rengin karşılığı olan  red, green , blue yüzde değerleri rgb(45%,34%,23%)

Name : renk atama işlemlerinde rengin adını kullanabiliriz.ör: bgcolor: red ;

CSS3 ile beraber gelen özelliklerden bir tanesi RGBA(RGB with alpha channel) yani bir rengi tanımlarken alfa saydamlık değerini de girmemiz mümkün