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
- 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.
29 views
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.
10 views
Ö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
16 views
