AUZEF Web Programlama 1 kitabi 9786059746267, 9786059118866, 0764588753, 9786054898169, 9789754864199

Citation preview

Web Programlama 1

18.06.2021 04:31

WEB PROGRAMLAMA 1

DR. ÖĞR. ÜYESİ EMEL ARSLAN

İSTANBUL ÜNİVERSİTESİ AÇIK VE UZAKTAN EĞİTİM FAKÜLTESİ

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 1 / 299

Web Programlama 1

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

18.06.2021 04:31

Sayfa 2 / 299

Web Programlama 1

18.06.2021 04:31

İçindekiler

1. Internet Temel Kavramları Giriş 1.1. Internet Nedir? 1.2. Internetin Kısa Tarihi 1.3. Günümüzde Internet 1.4. Ip 1.5. Tcp/ıp 1.6. Dünya Çapında Ağ (world Wide Web) 1.7. Sunucu - İstemci 1.8. Intranet Bölüm Özeti Ünite Soruları

2. Web Teknolojileri Giriş 2.1. Web Sayfası (web Page) 2.2. Web Tarayıcısı (web Browser) 2.3. Host 2.4. Alan Adı (domain Name) 2.5. Url 2.6. E-Posta (e-Mail) 2.7. Ftp (file Transfer Protocol) 2.8. Smtp (simple Mail Transfer Protocol) 2.9. Pop3 2.10. Imap https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 3 / 299

Web Programlama 1

18.06.2021 04:31

2.11. Köprü Metni İşaretleme Dili (html-Hyper Text Markup Language) 2.12. Http ( Hyper Text Transfer Protocol) 2.13. Https ( Hyper Text Transfer Protocol Secure) 2.14. Dinamik Html (dynamic Html - Dhtml) 2.15. Html Eklentileri (html Extensions) 2.16. Esnetilebilir İşaretleme Dili (extensible Markup Language - Xml) 2.17. Esnetilebilir Köprü Metni İşaretleme Dili (xhtml: Extensible Hyper Text Markup Language) 2.18. Web Tasarımında Temel İlkeler 2.19. Kullanılabilirlik (usability) 2.20. Web Sayfası Hazırlama Yazılımları Bölüm Özeti Ünite Soruları

3. Web Tarayıcısı Çalışma Mantığı Giriş 3.1. Web Tarayıcılar (browsers) 3.2. Tarayıcıların Ana Fonksiyonu Nedir? 3.3. Tarayıcının Ana Elemanları 3.4. Tarayıcının Üst Seviye Mimari Yapısı 3.5. Eşzamanlı - Paralel Çalışma (concurrency / Parallel) 3.6. İşlemci (cpu) Hangi Işlemi Önce Yapacağına Nasıl Karar Verir? 3.7. Process - Thread 3.8. Senkron - Asenkron (sync-Async) 3.9. Ekran Kartı Nasıl Çalışır (gpu) 3.10. İşletim Sistemi Nasıl Çalışır? 3.11. Chrome, İşletim Sistemi Ve Donanımı Nasıl Kullanıyor ? 3.12. Chrome Mimarisi 3.13. Chrome Navigasyonu 3.14. Chrome Web Sayfasını Ekrana Nasıl Çizer ? https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 4 / 299

Web Programlama 1

18.06.2021 04:31

3.15. Chrome Web Sayfasındaki Kullanıcı Etkileşimini Nasıl Yönetir ? Bölüm Özeti Ünite Soruları

4. Temel Html Yapısı Giriş 4.1. Html Nedir? 4.2. Html’in Tarihi Gelişimi 4.3. Html Versiyonları 4.4. Html Temel Yapısı 4.5. Yapısal Etiketler (structural Tags) 4.6. Renk İşlemleri Bölüm Özeti Ünite Soruları

5. Html İle Biçimlendirme Ve Grafik Etiketleri Giriş 5.1. Belge Biçimlendirme Etiketleri 5.2. Web Sayfasında Grafik Kullanımı Bölüm Özeti Ünite Soruları

6. Html’de Liste Ve Link Etiketi Giriş 6.1. Liste Yapıları 6.2. Link (bağlantı) İşlemleri Bölüm Özeti https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 5 / 299

Web Programlama 1

18.06.2021 04:31

Ünite Soruları

7. Html'de Çapa Ve Map Etiketi Giriş 7.1. Çapa (anchor) Linki Verme İşlemleri 7.2. Image Map Kullanımı Bölüm Özeti Ünite Soruları

8. İleri Html Giriş 8.1. Özel Karakterler 8.2. Tablo İşlemleri 8.3. Sayfa Biçimlendirmede Tablo Kullanımı 8.4. Frame (çerçeve) Kullanımı Bölüm Özeti Ünite Soruları

9. Html Form Yapıları Giriş 9.1. Form İşlemleri 9.2. Form Nesnesi 9.3. Input Nesnesi 9.4. Metin Kutusu (text) Nesnesi 9.5. Input Password Nesnesi 9.6. Input Button Nesnesi 9.7. Label (etiket) Nesnesi https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 6 / 299

Web Programlama 1

18.06.2021 04:31

9.8. Input Radio Nesnesi 9.9. Input Checkbox Nesnesi 9.10. Input File Nesnesi 9.11. Input Image Nesnesi Bölüm Özeti Ünite Soruları

10. Html5 İle Gelen Form Özellikleri Giriş 10.1. Html5 10.2. Html5 Elemanları Bölüm Özeti Ünite Soruları

11. Html5 İle Gelen Diğer Yenilikler Giriş 11.1. Html5 İle Gelen Dıv Etiketi Özellikleri 11.2. Ve Elementleri Bölüm Özeti Ünite Soruları

12. Css Giriş 12.1. Css (cascading Style Sheets) Nedir? 12.2. Css Nasıl Kullanılır? 12.3. Css Kodu Nasıl Olmalıdır 12.4. Css3 https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 7 / 299

Web Programlama 1

18.06.2021 04:31

Ünite Soruları

13. Xml - Json Giriş 13.1. Veri 13.2. Metaveri 13.3. Xml 13.4. Xml Teknolojileri 13.5. Json Ünite Soruları

14. Javascrıpt Giriş 14.1. Javascript Nedir ? 14.2. Javascript Kullanımı 14.3. Javascript Temel Yazım Kuralları 14.4. Değişkenler 14.5. Fonksiyonlar 14.6. Javascript Operatörleri 14.7. Javascript'te Koşullar 14.8. Javascript'te Döngüler 14.9. Javascript Fonksiyonları 14.10. Javascript Olayları 14.11. Javascript Kullanarak Bir Sınıf Değerine Erişmek Bölüm Özeti Ünite Soruları

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 8 / 299

Web Programlama 1

18.06.2021 04:31

1. INTERNET TEMEL KAVRAMLARI

Giriş Internet, gerekli alt yapıya sahip herkesin kolayca dahil olabildiği, paylaşımda bulunabildiği ya da paylaşılan verilerden faydalanabildiği dünya çapında bir iletişim ağıdır. Bu ağın ortaya çıkışı, gelişim süreci ve ülkemizin bu ağa nasıl dahil olduğunu bu bölümde öğreneceğiz. Günümüzde Internete dahil olan cihaz sayısı ve çeşitliliği hızla artarken paylaşılan bilgi miktarı da katlanarak artmaktadır. Bol miktarda erişilebilir bilginin istediğimiz her an elimizin altında olması elbetteki oldukça yararlıdır. Ancak bu durum beraberinde bazı sıkıntıları da getirmektedir. Sonsuz verinin paylaşıldığı internet’e erişip, bu veri okyanusunda aradığımız bilgiyi bulabilmek ve bu bilginin doğruluğundan emin olabilmek her geçen gün zorlaşmaktadır. Doğru bilgiye ulaşabilmek için “doğru yöntemle” “doğru yerde” aramak büyük önem arz etmektedir. Aksi taktirde yanlış ya da zararlı olabilecek içeriklerle de karşı karşıya kalmak kaçınılmazdır. Günümüzde internet kullanım yaşı neredeyse doğduğu günden itibaren denilecek kadar erken olduğundan özellikle ebeveynler ve çocuklar bu konuda mutlaka eğitilmelidirler.

1.1. Internet Nedir? Internet, Dünya genelindeki tüm kısıtlama ve sınırlardan bağımsız, merkezi kontrol dışında işlev gösteren ve bilgisayarların bir ağ dâhilinde birbiri ile bağlantıda olmasını sağlayan elektronik bir iletişim ağı olarak nitelendirilir. Uluslararası arası ağ anlamında gelen International Network kelimelerinden oluşturulmuş bir terimdir. Internet, çok protokollü bir ağ olup birbirine bağlı bilgisayar ağlarının tümü olarak da tanımlanabilir. Binlerce akademik veya ticari ağ ile kamu yada özel bilgisayar ağının birbirine bağlanmasıyla oluşmuştur. Bir bilgisayarın bu dünya çapındaki ağa dahil olabilmesi için IP adı verilen bir numaraya ihtiyacı vardır. Bilgisayarlar arasında bilgi çeşitli protokollere göre paketler halinde transfer edilir. Internet üzerinde elektronik posta ve birbirine bağlı sayfalar gibi çok çeşitli bilgiler ve hizmetler mevcuttur. Tüm bunların yanında internet üzerinden bireysel ya da grup olarak oyunlar da oynanabilir. Internet aynı zaman da iş ya da eğitim amaçlı da kullanılabilir. Internet üzerinden alış veriş yapabilir, ürünlerinizin satışını gerçekleştirebilir, firmanızın reklamnı yapabilir ya da istediğiniz konuda eğitim alabilirsiniz. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 9 / 299

Web Programlama 1

18.06.2021 04:31

Ülkemizde 1990’lı yılların başından beri giderek yaygın şekilde kullanılıyor olmasına rağmen özellikle içinde bulunduğumuz pandemi sürecinde işimizi ve eğitimimizi neredeyse tamamıyla internet üzerinden yürütür olduk. Çalışanlar iş yerine gitmeden evlerinden yaptığı işleri ilgili kişilere internet üzerinden ulaştırıyor, öğrenciler öğretmenleri ile internet üzerinden derslerini yürütüyorlar. Hatta yakınlarımızla bile internet üzerinden görüşebiliyoruz.

1.2. Internetin Kısa Tarihi Internet'in kökeni, hata oranı düşük, güvenli ve özel bir bilgisayar ağı kurmak isteyen Amerika Birleşik Devletleri hükümetinin 1960 yılında gerçekleştirdiği araştırmalara dayanır. 1960'ların başında askeri bilimsel araştırma ve geliştirme alanında çalışan bir grup vizyonerin, bilgisayarlar yardımıyla bilgi paylaşımında büyük potansiyel değer olduğunu görmesi sonucu ortaya çıkmış bir üründür. MIT (Massachusetts Institute of Technology )'den bir grup araştırmacı, 1962 yılında bilgisayarların global şebekesini önerdiği ve sosyal etkileşimlerin kayıtlı ilk tanımını yaptığı, "kısa notlar serisi" çalışmasını yayınlamışlardır. Aynı yılın sonunda, Licklider ilk başkanı olduğu DARPA’ya girmiştir. MIT’den Leonard Kleinrock internet bağlantısının temelini biçimlendirmek için paket anahtarlar teorisini geliştirmiştir. MIT'den Lavvrence Roberts 1965 yılında çevirmeli telefon hatları üzerinden Kaliforniya'daki bir bilgisayarla Massachusetts 'deki bir bilgisayar arasında bağlantı kurmayı başarmıştır. Bu deneme, geniş alanda şebekeleşmenin yapılabilir olduğunu göstermiş ve böylece Kleinrock’un paket anahtar teorisi doğrulanmıştır. Roberts 1966 yılında DARPA’ya katılmış ve ARPANET için kendi planını hazırlamıştır. Burada ismi geçen ve geçmeyen bu vizyonerler ilk internetin kurucuları sayılırlar. 1969 yılında ARPA kurulmuş ve internet kavramı olarak kullanılmaya başlanmıştır. ABD Savunma Bakanlığı tarafından yürütülen bir araştırma ile ortaya çıkan bu ağ, önceleri araştırmacılar arasında bilgi ve kaynak paylaşımını desteklemek amacı ile yapılan deneysel bir çalışmaydı. Daha sonra 1969 yılında dosya transferi, elektronik posta ve bilgi paylaşımına yönelik farklı seçeneklerin

de

sunulması ile birlikte hızla artan kullanıcı sayılarına ulaşmıştır. Pek çok kurum ve birey için son derece yararlı olduğu gözlenen bu oluşum, 1983 yılından beri dünya çapında hızla yaygınlaşmış ve gelişmiştir. Türkiye ise ilk olarak Orta Doğu Teknik Üniversitesi ile TÜBİTAK tarafından yapılan ortak çalışmalar sonucunda, 12 Nisan 1993 tarihinde Internet ağına dahil olmuştur.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 10 / 299

Web Programlama 1

18.06.2021 04:31

Türkiye'de internet başlangıçta, tüm dünyada olduğu gibi, bilgi aktarımı amacıyla kullanılmıştır. 1995 yılı içinde, dünyadaki gelişime paralel olarak, Türk girişimcileri de günden güne artan bir talep ile internet ortamını; web sayfaları, elektronik posta ve diğer servisleri ile kullanıcıların beklentileri doğrultusunda etkileşimli olarak, özellikle tanıtım ve pazarlama için kullanmaya başlamışlardır.

1.3. Günümüzde Internet Günümüzde Internet üzerindeki bilgi, hem nitelik, hem de nicelik olarak sürekli artmaktadır. Özellikle Internetteki bilgilerin kolay güncellenebilir olması, bilginin nitelik ve nicelik açısından artışını daha da hızlandırmaktadır. Bugün milyarlarca sayfa ile ifade edilen bilgi bütünü internet ortamında kullanıcıya sunulmuştur ve bu bilgi her geçen gün artmaktadır. Her ne kadar bilginin paylaşılması kolaylaşsa ve paylaşılan bilgi miktarı artsa da doğru bilgiye ulaşmak giderek güçleşmektedir. Paylaşılan bilginin doğruluğu ve güncelliği teyit edilmeden kullanılmamalıdır. Internet ağına bağlı çok farklı marka ve modelde milyonlarca bilgisayar vardır. Bu bilgisayarlar arasındaki Internet aracılığı ile bilgi alışverişi bilgisayar ağları üzerinden gerçekleşmektedir. Söz konusu milyonlarca bilgisayar yerel ve geniş ağlara bağlanır, bu ağlarda birbirilerine bağlanarak tüm dünyayı dolaşabilen bir ağ oluştururlar. Bilgisayar ağları, telefon hatları, fiber optik kablolar ve uydular gibi farklı hızdaki çeşitli teknolojileri kullanarak, verileri dünya üzerinde bir noktadan diğerine son derece hızlı bir biçimde iletebilirler. Internet hızı, kullandığı bu teknolojilere bağlı olarak her geçen gün artmaktadır. Bu sistem dahilindeki farklı boyuttaki bilgisayar ağları, kamu kuruluşları, üniversiteler, gönüllü organizasyonlar ve Internet Servis Sağlayıcıları (gibi ticari kuruluşlar) tarafından işletilmektedir. Internet Servis Sağlayıcıları (ISS) İngilizce Internet Service Provider (ISP) olarak bilinmektedir. Internet servis sağlayıcısı’nın görevi şirketlere ve kişilere internet bağlantısı alt yapısını sunmaktır. Örneğin bizlerin internet’e bağlanmasını sağlayan servis sağlayıcısı Fibernet Telekom, Superonline, Vodafone gibi firmalardır. İnternet Servis Sağlayıcısı (ISS), genellikle bir ücret karşılığı Internet’e erişiminizi sağlayan bir şirkettir. Bir ISS’ye bağlanmanın en yaygın yolları telefon hattı (çevirmeli) veya geniş bant bağlantısı (kablosuz veya DSL) kullanmaktır. Birçok ISS size e-posta hesapları, web tarayıcıları gibi ek hizmetler ve web sitesi oluşturmanız için alan da sağlamaktadır

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 11 / 299

Web Programlama 1

18.06.2021 04:31

Internet’ e bağlanmak için servis sağlayıcı kurumdan kullanıcı şifresi ve bağlantı için kullanılacak telefon numarası alınır. Bağlantı kurulduğunda servis sağlayıcı, bilgisayar için geçici bir IP adresi belirler. Farklı bağlantılarda IP adresi değişerek Internet’e bağlantı yeni bir IP adresi ile sağlanır.

1.4. IP Internet'e dahil olacak her bilgisayarın, telefon numaralarında olduğu gibi onu diğerlerinden ayırt edilebilir kılan bir IP (Internet Protokol) adresi vardır. Bir IP adresi, noktalarla ayrılan dört rakam grubundan oluşur bu rakam gruplarının her birine okted adı verilir. Dolayısyla bir IP adresi 4 oktetten (8li grup) oluşan 32 bitlik bir sayıdır. Okumayı kolaylaştırmak adına desimal olarak yazılırlar. Fakat IP yi daha iyi irdeleyebilmek için herbir okteti 8bitlik(1 byte) değerlere dönüştürmek gerekir. IP adresleri ‘0.0.0.0’ ile ‘255.255.255.255’ numaraları arasında değişmektedirler. Örneğin 194.25.127.96 gibi bir IP adresiniz olabilir. Bazı IP numaraları yerel ağlarda kullanılmak amacıyla ayrılmıştır. Bu IP lerle internete çıkılmaz. Bu adreslere Özel Adresler (private adresses) denir. Internette kullandığımız IP adreslerineyse Genel Adresler (public adresses) denir. Özel IP Adresleri; 10.0.0.0 ile 10.255.255.254 172.16.0.0 ile 172.31.255.254 192.168.0.0 ile 192.168.255.254 arasındadır. Internet dünyası hızla büyüdüğü için IPv4, 4 milyarın üstündeki IP numarası artık yetersiz kalmaya başlamıştır. Bunu önlemek amacıyla NAT protokolü IPv4 e bir yama olarak eklenmiştir. NAT’ın amacı üzerinde barındırdığı bir IPv4 adresini birden çok bilgisayarın internete çıkarken paylaşımına sunmaktır. Özel (private) IP adreslerinin internete çıkışını sağlar. Böylece bilgisayarlar arasında bir geçit görevi üstlenmiştir. Fakat bundan dolayı uçtan uca (point to point) adreslemeyi ve paket bütünlüğünü yok etmiştir. NAT protokolünün yarardan çok zarar getirdiği görüldüğü için mecburi olarak IPv6 ya geçiş zorunlu olmuştur. IPv4 ün yetersiz kalmasıyla 128 bit olan IPv6 geliştirilmiştir. Bu yeni adresleme yapısıyla neredeyse sınırsız adres aralığı oluşturulmuştur. Ayrıca paket başlıkları bu versiyonda kaldırılarak daha hızlı bir iletime yol açılmış, görüntü ve ses paketlerine öncelikli ibaresini atayarak IPv4 ün qos la desteklediği ama

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 12 / 299

Web Programlama 1

18.06.2021 04:31

yetersiz kaldığı ses ve görüntü problemi aşılacaktır. Bunlarla birlikte şifreleme sistemi de Ipv6’da daha güvenlidir. IP adresleri sabit veya değişken olarak verilebilmektedir. Sabit IP’lere Statik IP değişken IP’lere ise Dinamik IP adı verilmektedir. Dinamik IP’ler DHCP (Dynamic Host Configuration Protocol) sunucuları tarafından otomatik olarak dağıtılır. Bir bilgisayarın IP adresini bilenler Internet üzerinde o bilgisayara erişim isteği gönderebilirler. Eğer erişim izinleri varsa da o bilgisayardaki bilgilere erişebilirler. Aynı şekilde Web sitenizi yayınladığınız bilgisayarın IP adresini bilenler web sitenize erişim sağlayabilirler.

1.5. TCP/IP TCP/IP, TCP (Transmission Control Protocol- Aktarım Kontrol Protokolü) ve IP (Internet Protocol) kelimelerin kısaltmalarıdır. Internet protokol takımı, Internet’in çalışmasını sağlayan bir iletişim protokolleri bütünüdür. Bazen TCP/IP protokol takımı olarak da adlandırılır. TCP protokolü bir bilgisayardan diğerine gönderilecek iletiyi, ağ üzerinde

gönderilebilecek uzunlukta küçük paketlere

bölme işlevini gerçekleştirir. Bu paketlerin başka bir ağdaki bilgisayara iletilmesini IP protokolü gerçekleştirirken, iletinin gönderildiği bilgisayarda bunlar TCP protokolü sayesinde bir araya getirilir ve ileti yeniden oluşturulur. Mesajların küçük paketlere bölünmesi sayesinde ağın verimli kullanımı sağlanmış ve yaşanacak zaman kaybının önüne geçilmiş olur. TCP/IP’de, yollanan veriler katmanlara göre paketlenerek yollanır ve alıcı tarafından bu paketler teker teker açılarak verilerin alıcıya ulaşması sağlanır. Bu yöntem, yollanan veri, yollama şekli ve yollama yolunu birbirinden ayırarak birlikte çalışmayı kolaylaştırır. Örneğin bir bilgisayarda bağlantı olarak Ethernet yerine Wi-fi olması, üzerinde başka bir web tarayıcı kullanılmasını gerektirmez. Internet ortamında farklı işletim sistemlerine ve farklı özelliklere sahip milyonlarca bilgisayar vardır. Bu bilgisayarlar internet ortamında birbirleri ile iletişim kurarak bilgi paylaşımında bulunurlar. Farklı özelliklere sahip tüm bu bilgisayarların iletişim kurmaları için oluşturulan yapıya protokol denilmektedir. Internet protokol takımı da, bilgisayarlar ve ağ cihazları arasında iletişimi sağlamak amacıyla standart olarak kabul edilmiş kurallar dizisidir. Bu kurallar dizisi temel olarak verinin ağ üzerinden ne şekilde paketleneceğini ve iletilen veride hata olup olmadığının nasıl denetleneceğini belirlemektedir. Bilgisayarlar arasındaki ortak iletişim diline “protokol” denir. TCP/IP Protokolleri https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 13 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 1.1. TCP/IP Katmanları Donanım Katmanındaki Protokoller: ARP (Address Resolution Protocol): IP adreslerinin donanım adreslerine çevrimini sağlar. RARP (Reverse ARP, yani Ters ARP) protokolü ARP’ın ters işlemi yapar. Yani hangi MAC adresinin hangi IP adresini kullandığını bulur. Bir TCP/IP ağında RARP’ın çalışacağı garanti değildir, zira RARP bir RARP sunucusuna ihtiyaç duyar. IP Katmanındaki Protokoller: ICMP (Internet Control Message Protocol – Internet Yönetim Mesajlaşması Protokolü): Hata ve türlü bilgi mesajlarını ileten protokoldür. Örneğin, ping programı ICMP’yi kullanır. RIP (Router Information Protocol – Router Bilgi Protokolü): Router’ların yönlendirme tablolarını otomatik olarak üretebilmesini sağlayan protokoldür. OSPF (Open Shortest Path First – İlk Açık Yöne Öncelik): Aynı RIP gibi router’ların yönlendirme tablolarını otomatik olarak üretebilmesine sağlar. OSPF, RIP’ten daha gelişmiş bir protokoldür. IGMP (Internet Group Messaging Protocol – Internet Grup Mesajlaşma Protokolü): Bir sistemin internet yayınlarına (multicast) abone olmasına ve aboneliği durdurmasına yarar. Bu yayınlar, UDP üzerinden yapılır ve genelde çoklu ortam (radyo veya video) içerikli olurlar. DHCP (Dynamic Host Configuration Protocol – Dinamik Cihaz Ayar Protokolü): Bir TCP/IP ağına bağlanan bir cihaza otomatik olarak IP adresi, ağ maskesi, ağ geçidi ve DNS sunucusu atanmasına yarar. Tartışma katmanındaki protokoller: UDP (User Datagram Protocol – Kullanıcı Veri Protokolü): IP üzerinden veri yollamaya yarar. Verilerin ulaşacağını garanti etmez. UDP paketlerinin büyüklükleri sınırlıdır. UDP son derece basit ve bağlantı gerektirmeyen (connectionless) bir protokoldür. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 14 / 299

Web Programlama 1

18.06.2021 04:31

TCP (Transmission Control Protocol – Gönderim Kontrol Protokolü): IP üzerinden ulaşma garantili ve herhangi bir büyüklükte veri gönderilmesine imkan tanıyan bir protokoldür. UDP’den farklı olarak, TCP’de iki cihazın iletişim kurabilmesi için önce birbirlerine bağlanmaları gerekmektedir. Uygulama katmanındaki protokoller: DNS (Domain Name System – Alan Adı Sistemi): Alan adı verilen isimler (örneğin www.wikipedia.org) ile IP adreslerini birbirine bağlayan sistemdir. Paylaştırılmış bir veritabanı olarak çalışır. UDP veya TCP üzerinden çalışabilir. HTTP (HyperText Transfer Protocol – HiperMetin Yollama Protokolü): İlk başta HTML sayfaları yollamak için yaratılmış olan bir protokol olup günümüzde her türlü verinin gönderimi için kullanılır. TCP üzerinden çalışır. HTTPS (Secure HTTP – Güvenli HTTP): HTTP’nin RSA (Açık anahtarlı şifreleme) şifrelemesi ile güçlendirilmiş halidir. TCP üzerinden çalışır. POP3 (Post O!ice Protocol 3 – Postahane Protokolü 3): e-posta almak için kullanılan bir protokoldür. TCP üzerinden çalışır. SMTP (Simple Mail Transfer Protocol – Basit Mektup Gönderme Protokolü): e-posta göndermek için kullanılır. TCP üzerinden çalışır. FTP (File Transfer Protocol – Dosya Gönderme Protokolü): Dosya göndermek ve almak için kullanılır. HTTP’den değişik olarak kullanıcının zorunluı olarak sisteme giriş yapmasını gerektirir. Veri ve komut alış verişi için iki ayrı port kullanır. TCP üzerinden çalışır. SFTP veya FTPS (Secure FTP – Güvenli FTP): FTP’nin RSA ile güçlendirilmiş halidir. TCP üzerinden çalışır.

1.6. Dünya Çapında Ağ (World Wide Web) HTML’nin standardı Word Wide Web Consortium (W3C) tarafından kontrol edilmektedir. World Wide Web Consortium (Dünya Çapında Ağ Birliği ) ya da kısaca W3C, Ekim 1994'te Ağ'ın mucidi Tim Berners-Lee tarafından MIT ve CERN bünyesinde kurulmuş olan uluslararası Dünya Çapında Ağ (WWW) standartlarını belirleyen örgüttür. Birliğin belirlediği standartlardan bazıları şunlardır: HTML

XML

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 15 / 299

Web Programlama 1

18.06.2021 04:31

MathML

SVG

XHTML

PNG

WWW, Web ya da W3 (World Wide Web), yazı, resim, ses, film gibi pek çok farklı yapıdaki verilere etkileşimli bir şekilde ulaşmayı sağlayan web sayfaları ağıdır. Internet sitelerinin çoğu www ile başlar. Örneğin: www.amazon.com www.istanbul.edu.tr Kısacası web elinizdeki dosyaları paylaşmanızı sağlayan dijital bir ağdır. World Wide Web (ya da kısaca Web) birbirleri ile iletişim kuran iki bileşenden meydana gelir. Bunlar; 1. Web Browser (İstemci : Client) 2. Web Server (Sunucu : Server)

Şekil 1.2. İstemci – Sunucu ilişkisi

1.7. Sunucu - İstemci Ağ paylaşımında ya da internet ortamında bulunan her bilgisayar sunucu (server) –istemci (client) ilişkisi içindedir. Sunucu (Server), herhangi bir ağ üzerinde bir programı veya bir bilgiyi farklı kullanıcılara/sistemlere paylaştıran/dağıtan donanım veya yazılıma verilen genel isimdir. Burada temel nokta, sunucuların bir bilgisayar ağına bağlı olması gerekliliğidir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 16 / 299

Web Programlama 1

18.06.2021 04:31

Donanımsal olarak sunucular, sorunsuz ve sürekli çalışmak üzere inşaa edilmiş, güvenilir, çoklu kullanıcıya hizmet eden bilgisayar sistemleridir. Örneğin, www.istanbul.edu.tr 'nin bulunduğu bilgisayar sistemi bir sunucudur ve bu bilgiler Internet aracılığı ile siteyi ziyaret edenlere paylaşılır. Bilgisayar sunucularının yanında, yazılım sunucuları da mevcut. Örneğin, MSSQL Server bir veritabanı sunucu yazılımıdır ve bunu bir sunucuya yüklediğimiz zaman bu sunucuya genellikle database server (veritabanı sunucusu) adı verilir. Web uygulamalarının en önemli özelliği istenilen yerden, istenildiği zaman erişilebilir olmalarıdır. Bunu sağlayabilmek için de bilgi saklama görevini üstlenen sunucu bilgisayar sistemi, sürekli çalışır halde olmalıdır. Özellikle finans, sağlık, eğitim gibi sektörlerde sistemin kesintisiz ve güvenilir şekilde hizmet sunuyor olması gerekir. Sunucu bilgi istendiğinde cevap veren; istemci ise bilgiyi almak isteyen olarak adlandırılabilir. Sunucu olarak kullanılan bilgisayarların barındırdıkları bilgiler arasında e-mail bilgileri, veri tabanı dosyaları ve diğer gerekli bilgiler yer alır. İstemci bilgisayarlar sunucu bilgisayarlara ulaşarak istenilen bilgiyi talep eder ve alırlar. Ağ üzerinde sunucu dışındaki bilgisayarlara, diğer bir deyişle sunucuya bağlı olarak ağda çalışabilen bilgisayarlara istemci (client) adı verilir. İstemci bilgisayarlar, ağ üzerindeki kaynaklara sunucunun izin verdiği ölçüde erişebilir ve kullanabilirler.

Şekil 1.3. Bir web sayfasına erişimde sunucu-istemci ilişkisi Örneğin; internette bir sayfaya ulaştığınızda o sayfaya ait bilgiler bir sunucu tarafında tutulmaktadır. Birer istemci olarak sunucudan bu sayfaya ait bilgilere erişim isteğinde bulunulduğunda verilen izin ölçüsünde erişim sağlanabilir. Sunucu sistemler, barındırdıkları bilginin niteliği de dikkate alınarak gerekli güvenlik önlemlerini barındırmalıdır. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 17 / 299

Web Programlama 1

18.06.2021 04:31

Sunucular barındırdıkları bilgi ve sundukları hizmet bakımından çeşitlilik gösterirler. ■ Web Sunucuları ■ Dosya Paylaşım Sunucuları (FTP) ■ Medya Sunucular ■ Veritabanı Sunucuları ■ Alan Adı Sunucuları (DNS) bunlardan bazılarıdır.

1.8. Intranet Bir firmanın kendi iletişim alanı içerisindeki ağ ortamında bilgisayarlar arası iletişime verilen addır. Internet’in özel ve küçük bir versiyonudur. Intranet'ler Ağ geçitleri (Gateways) ile diğer ağlara ve internet’e bağlanabilirler. Temel oluşturulma amaçları, kuruluş bünyesinde bilgileri ve bilgi işlem kapasitesini paylaşmaktır. Intranet'ler, şirket(ler) içi tele-konferans uygulamalarında ve farklı birimlerdeki kişilerin bir araya gelebildiği iş gruplarının oluşturulmasında da kullanılırlar. Intranet'ler üzerinden HTTP, FTP gibi pek çok protokol uygulamaları çalıştırılabilir. Günümüzde, Intranet'ler içinde, Web erişimi ile kaynakların kullanımı oldukça yaygındır.

Şekil 1.4. Intranet Mimarisi

Bölüm Özeti

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 18 / 299

Web Programlama 1

18.06.2021 04:31

Uluslararası arası ağ anlamına gelen International Network kelimelerinden oluşturulmuş bir terim olan Internet, dünya üzerinde çok çeşitli donanım ve yazılıma sahip cihazın bilgi paylaşımında bulunabilmelerine olanak sağlayan bir bilgisayar ağdır. Günümüzde oldukça yaygın kullanılıyor olmasına rağmen kendimizi bir anda pandemi sürecinde bulunca neredeyse tüm hayatımızı internet aracılığı ile idame ettiriyor olduk. Evden çalışıyor, evden eğitim alıyor, evden alışveriş yapıyoruz ve tüm bunlar için de interneti kullanıyoruz. Daha önce belki de hiç kullanmayan ama bu süreçte aktif kullanıcı durumuna geçen çok sayıda yeni kullanıcısı var internetin. 1960'ların başında askeri bilimsel araştırma ve geliştirme alanında yapılan bir çalışma sonucu ortaya çıkan ve zamanla dünyada yaygınlaşan internet ağına ülkemiz ilk olarak Orta Doğu Teknik Üniversitesi ile TÜBİTAK tarafından yapılan ortak çalışmalar sonucunda, 12 Nisan 1993 tarihinde dahil olmuştur. Internete dahil olan her cihazın kendine ait biricik bir adresi vardır. Nasıl ki telefonlarımız için hepimizin farklı kombinasyonda bir numarası var, internette de IP olarak adlandırılan bu adresler kullanılarak erişmek istenen cihazla iletişim sağlanabilmektedir. Internete dahil olabilmemiz için, cihazımızın kullanacağı bağlantı hattını sağlayan kurumlar Internet Servis Sağlayıcı olarak adlandırılmaktadır. Kaynakça 1. Fahrettin Erdinç

, “Yeni Başlayanlar İçin HTML5, CSS3 JAVASCRIPT A ’dan Z’ye Web

Programlama”,Abaküs Kitap, 2020 2. Tahsin Berk Ceylan , “Yeni Başlayanlar İçin Web Tasarım Kılavuzu”, Kodlab Yayın Dağıtım, 2020 3. Jon Duckett, “HTML ve CSS Web Siteleri Tasarlamak ve Oluşturmak”, Nobel Yaşam, 2019, ISBN : 9786059746267 4. Emin Borandağ, Fatih Yücalar, Ruken Kaya, Betül Kıral, “Web Programlamanın Temelleri”, Gece Akademi, 2018 5. Burak TOKAK, “HTML5, CSS3 ve JavaScript ile Web Tasırımı”, Dikey Eksen Dağıtım, ISBN: 9786054898169 6. Murat Yıldırımoğlu, “Her Yönüyle Internetin Altyapisi TCP/IP”, Pusula Yayıncılık, 2017 7. Erkan Balaban, “Web Tasarim Kilavuzu”, Pusula Yayıncılık, 2013

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 19 / 299

Web Programlama 1

18.06.2021 04:31

8. Peter Weverka, “The Everyday Internet All-in-One Desk Reference for Dummies”, 2005, ISBN-10: 0764588753 9. Nuray Tekin, “Her Yönüyle Internet, Pusula Yayıncılık, 2003 10. Mithat UYSAL, “ Web Teknolojileri”, 2001 ISBN: 9789754864199 11. https://tr.wikipedia.org/wiki/ Erişim Tarihi: 19.02.2021 12. https://www.serv-u.com/ Erişim Tarihi: 19.02.2021 13. https://www.fibernettelekom.com.tr/ Erişim Tarihi: 19.02.2021 14. http://www.sekteor.net/ Erişim tarihi: 19.02.2021

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 20 / 299

Web Programlama 1

18.06.2021 04:31

Ünite Soruları

1. Dünya genelindeki tüm kısıtlama ve sınırlardan bağımsız, merkezi kontrol dışında işlev gösteren ve bilgisayarların bir ağ dâhilinde birbiri ile bağlantıda olmasını sağlayan elektronik iletişim ağı nedir?

A) TCP/IP

B) Intranet

C) ISS

D) Internet

E) IP

2. Internet’in ortaya çıkmasını sağlayan çalışmalar kaç yılında başlamıştır? A) 1992

B) 1962

C) 1960

D) 1969

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 21 / 299

Web Programlama 1

18.06.2021 04:31

E) 1965

3. Internet bir grup vizyonerin hangi alanda çalışmalar yürütürken bilgisayarlar yardımıyla bilgi paylaşımında büyük potansiyel değer olduğunu görmesi sonucu ortaya çıkmış bir üründür?

A) Sağlık Alanında Bilimsel AR-GE

B) Askeri Bilimsel AR-GE

C) Otomotiv alanında Bilimsel Çalışma

D) Eğitim alanında AR-GE

E) Akademik Çalışma

4. Bir firmanın kendi iletişim alanı içerisindeki ağ ortamında bilgisayarlar arası iletişime verilen ad nedir ?

A) Köprü Metin İşaretleme Dili

B) Mail Server

C) Internet

D) İletişim Protokolü

E) Intranet https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 22 / 299

Web Programlama 1

18.06.2021 04:31

5. Internet üzerinden dosya transferi, elektronik posta ve bilgi paylaşımına yönelik farklı seçenekler hangi yıl sunulmaya başlanmıştır

A) 1992

B) 1962

C) 1960

D) 1969

E) 1965

6. Türkiye hangi iki kurumun ortak çalışması ile internet ağına dahil olmuştu? A) Savunma Bakanlığı - İTÜ

B) TÜBİTAK - İTÜ

C) TÜBİTAK – İstanbul Üniversitesi

D) Savunma Bakanlığı - ODTÜ

E) TÜBİTAK - ODTÜ

7. Bireysel ya da kurumsal ölçüde görevi internet bağlantısı alt yapısını sunmak olan kurumlara ne ad verilir ? https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 23 / 299

Web Programlama 1

18.06.2021 04:31

A) TCP/IP

B) Intranet

C) ISS

D) Internet

E) DNS

8. Aşağıda Internet hakkında verilen bilgilerden hangisi yanlıştır ? A) Internet kullanarak dosya paylaşımı yapılabilir

B) Interneti kullanarak sadece kendi cihazımız ile aynı özelliklere sahip cihazlara erişebiliriz.

C) Internet kullanarak alış-veriş yapılabilir

D) Internet kullanarak herhangi bir konuda ders alınabilir

E) Internete dahil olacak cihazın bir IP numarasına ihtiyacı vardır.

9. Bir bilgisayarın internet ağına dahil olabilmesi için onu diğer bilgisayarlardan ayırt edilebilir kılacak olan sayılardan oluşan adrese ne ad verilir ?

A) TCP/IP

B) Intranet https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 24 / 299

Web Programlama 1

18.06.2021 04:31

C) ISS

D) Internet

E) IP

10. Aşağıdakilerden hangisi interneti ağının ülkemizde ilk kullanım alanlarından değildir? A) Savunma Sanayi

B) Web sayfaları

C) e-posta

D) Tanıtım

E) Pazarlama

CEVAP ANAHTARI 1. d 2. c 3. b 4. e 5. d 6. e 7. c 8. b 9. e 10. a

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 25 / 299

Web Programlama 1

18.06.2021 04:31

2. WEB TEKNOLOJİLERİ

Giriş Internet ağı düşünüldüğünde farklı işlevleri yerine getiren bir çok bileşenden oluştuğu görülmektedir. Bu ders kapsamında sıkça bahsedeceğimiz temel kavramları öğrenerek başlamakta yarar var. Böylece aralarındaki ilişki de daha kolay anlaşılabilecektir.

2.1. Web Sayfası (Web Page) Internet üzerinde görüntülenebilen her dosya web sayfasıdır. Web sayfası ASCII karakterleri kullanılarak yazılan HTML denen bir işaretleme dili ile yazılır. Çok çeşitli amaçlarla web sayfaları kullanılabilir. Bunlardan bazıları şunlardır: Bir firmayı ve ona ait ürünleri dünya çapında tanıtabilmek, Bir kişiyi ve yaptığı çalışmaları tanıtabilmek, Reklam ya da satış yapmak, Eğlence amaçlı paylaşımlarda bulunmak, Kültürel tanıtım yapmak, Haber veya çeşitli bilgileri paylaşmak İletişim kurmak Bir web sayfası hazırlarken temel olarak şu adımlardan geçilir; Web sayfasının amacının belirlenmesi Amacına yönelik olarak sayfanın içeriğine karar verilmesi İçeriğin düzenlenmesi Sayfa düzeninin(Tasarımının) belirlenmesi Ana sayfanın oluşturulması

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 26 / 299

Web Programlama 1

18.06.2021 04:31

Bilgilerin yazılması

2.2. Web Tarayıcısı (Web Browser) World Wide Web üzerinde bulunan sayfaları yükleyip görüntülemeyi sağlayan programlara Web Tarayıcı adı verilir. Internet erişimi olan bir bilgisayar, Tarayıcı (Browser) olarak adlandırılan yazılımları kullanarak Web sayfaları arasında gezinti yapabilir. Web tarayıcıları, erişilmek istenen Web sayfalarını görüntülemek için Web sunucularıyla iletişim sağlayan ve sonuçları biçimlendirerek ekranda görüntüleyen programlardır. Genel olarak Web tarayıcıları, yapılan bağlantının türüne ve içeriğin özelliklerine göre bilgiyi en uygun şekilde ileyerek iletirler. Web Tarayıcıları, İstemci Sunucu modeline göre çalışmaktadırlar. İstemci (client), Web teknolojilerini kullanmanız için seçilen tarayıcı programıdır. Internet Explorer, Google Chrome, Mozilla Firefox , Apple Safari, Opera ve Yandex Browser en yaygın kullanılan örnekleridir.

Şekil 2.1. Kullanım oranlarına göre web tarayıcılar Sunucu (server), bir URL adresi yazdığınızda tarayıcınızın bağlandığı (Hosting) bilgisayardır. Bu modelde istemci bilgisayarlar web browserlar aracılığı ile sunucuya istekte bulunur ve gerekli bilgiyi sunucudan aldıktan sonra uygun bir biçimde isteği gönderen kişinin ekranında görüntülemek yine web browserların görevidir. İşlem adres çubuğuna adresin yazılmasıyla başlar, DNS ve Hosting’e istekle devam eder ve gelen verinin tarayıcıda görüntülenmesiyle sona erer. Tarayıcıda görüntülenen sayfanın dili HTML ‘dir. Web Tasarımında Tarayıcının Etkisi Her biri farklı çözünürlükte olan ekranlar ve her biri farklı özellikleri destekleyen bir tarayıcı yelpazesi için Web sayfası tasarlamak, aşılması gereken en büyük sorunlardır. Her yeni sürümün daha fazla özellik ve yetenek ile ortaya çıkıyor olması, tarayıcıların eski sürümlerinin kullanımdan kalkması anlamına gelmez.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 27 / 299

Web Programlama 1

18.06.2021 04:31

O eski sürümleri çeşitli sebeplerle uzun süre daha kullananan bir çok kullanıcı olacaktır. Bu nedenle, tasarlanan Web sayfalarının çeşitli tarayıcı yazılımları ve yaygın kullanılan tüm sürümleri desteklemesi gerekir. Farklı tarayıcılar farklı standartları destekleyebilmektedir. Ancak, ortak bir anlayış oluşturmak amacıyla Web Konsorsiyumu (World Wide Web Consortium) (www.w3c.org) desteklenmesi gereken minimum teknoloji standartlarını belirlemektedir. Ancak, her tarayıcı yazılımı ya da farklı sürümleri bu belirlenen standartlara uymayabildiğinden, tarayıcılar ve değişik sürümler arasında farklılıklar oluşabilmektedir. Bu nedenle web sayfaları tasarlanırken yaygın kullanılan web browserlar ile test edilerek her birinde düzgün bir görüntü sunabilecek şekilde düzenlenmelidir.

2.3. Host Türkçe karşılığı “Alan” olan Host, web sayfalarının güvenli ve sürekli bir şekilde erişilebilir olmalarına imkan sağlayan bilgisayarlar üzerindeki belirli bir alanı ifade eder. Yayınlamak istediğimiz web sayfamızı sürekli erişilebilir kılmak ve kullanıcılardan gelecek erişim istekleri yoğunluğunu karşılayabilecek kapasitede bir bilgisayarı, sırf bu iş için ayırabilmek kişisel imkanlarımız ile her zaman mümkün olmayabilir. Bir bilgisayarı web sitemizi yayınlamak için ayırabiliyor olsak da bağlantı hızımız kullanıcı isteklerine yanıt verebilecek kapasitede olmayabilir. İşte bu ihtiyaca yanıt olarak web sayfaları için tüm bu altyapıyı sunmak üzere hazırlanmış bilgisayarlar ve bu bilgisayarlar üzerinde ayrılan alanlar Host olarak isimlendirilir. Hosting ve Web Sunucuları Hosting (Barındırma) ise web sayfalarının Internet'te yayınlanabilmesi için gerekli alanın kiralanmasıdır. Diğer bir ifade ile, Hosting, bir web sitesinde yayınlanmak istenen sayfaların, resimlerin veya dokümanların internet kullanıcıları tarafından erişebileceği bir bilgisayarda tutulmasıdır. Hosting firmaları, web sayfasını yayınlamak isteyenlere bu alanları kiralayıp, o alanlarda saklanan web sitesi dokümanlarının güvenliğinden ve sürekli erişilebilir tutulmasından sorumlu olan firmalardır. Internette doküman yayınlamak için özel olarak üretilmiş, internete hızlı bağlantısı olan, yüzlerce kullanıcıya aynı anda hizmet verebilecek bir bilgisayarda dosyaların saklanması gerekir. Bu bilgisayarlara Sunucu (Server) adı verilir. Web sitelerine ait dosyalar için depo vazifesi gören, dosyaların güvenliğini sağlayan ve internet kullanıcılarının erişimine sunan bilgisayarlara Web Sunucusu (Web Server), bu veri saklama ve yayınlama işlemine de Web Hosting denir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 28 / 299

Web Programlama 1

18.06.2021 04:31

HTML sayfalarını Web Tarayıcınıza gönderen Internet üzerindeki sunucu makinelerde çalışan programlar olan Web Sunucular, günümüzde HTML ‘in daha gelişmişi olan CGI (Common Gateway Interface), ASP (Active Server Page) gibi sayfaları da istemcilere gönderebilmektedir.

2.4. Alan Adı (Domain Name) Alan adı (Domain Name), bir web sitesinin Internet'teki adı ve adresidir. Bu adres olmadan bir Internet kullanıcısı web sitesine sadece IP adresiyle ulaşabilir. Alan adları IP adresi denilen, bilgisayarların (sunucuların) birbirini tanımasını sağlayan numara sisteminin daha basitleştirilmiş ve akılda kalması için kelimelerle ifade edilmiş halidir. Örneğin www.google.com alan adı adres çubuğuna yazıldığında tarayıcı bu alan adını önce IP adresine çevirir, daha sonra kullanıcıyı bu IP adresine sahip bilgisayara yönlendirir. Dolayısıyla web sitesinin ziyaret edilebilmesi için kullanıcıların IP adresini bilemeyecekleri göz önünde bulundurulmalı ve siteye daha kolay ve akılda kalıcı bir alan adı alınmalıdır. Daha önce alınmış olan alan isimleri yeniden alınamaz. Yeni bir alan adı alınırken alan adı hizmeti veren sitelerden alacağınız ismin kullanılıp kullanılmadığını kontrol etmeniz gerekmektedir.

Şekil 2.2. Alan Adı-IP ilişkisi Çoğu Internet Servis Sağlayıcılarda bulunan özel sunucu bilgisayarlardan (Alan Adı Sunucuları - Domain Name Server- DNS) oluşan bir ağ, hangi alan adının hangi IP adresine karşılık geldiği bilgisini tutar ve kullanıcıları doğru adreslere yönlendirir. Internet'te trafiğin işlemesi bu IP adreslerine bağlıdır. Böylece hiçbir karışıklık olmadan bilgi paylaşımı sağlanabilir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 29 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 2.3. Web’in çalışması 1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink ’e tıklar. 2. Browser DNS (Domain Name Server) a bağlanıp istemde bulunduğu sayfanın server IP sini alır. 3. Ardından Aldığı IP ye bir çağrı gönderir ve sayfayı ister. 4. Web Server da bu isteğe cevap verir ve http üzerinden sayfayı Web Browser a gönderir.

2.5. URL Uniform Resource Locator (Standart Kaynak Bulucu) kelimelerinin baş harflerinden oluşan bir kısaltmadır. Internet yoluyla insanların kullanımına sunulmuş olan her dokümanın kendine ait ve tek olan bir adresi vardır, buna URL yani özgün kaynak adresi adı verilir. Örneğin

http://www.istanbul.edu.tr

Her bir URL 3 bölümden oluşmaktadır. Protokol ( http://, "p://, news:// vb.) Domain adı (http://www.istanbul.edu.tr ) Dizin yolu (http://www.istanbul.edu.tr/auzef/bolum_hakkinda.html)

Şekil 2.4. URL’in bölümleri Bu bölümlerin dışında domain name olarak adlandırılan adres yapısında 2 farklı bölüm bulunmaktadır. Bunlar ; Domain uzantıları ( com, net, org vb.) Ülke Adları (tr, ca , jp vb.) Alan Adı (Domain name) Uzantıları Alan Takısı

Kısaltılan Kelime

Anlamı

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Örnek Site adresi Sayfa 30 / 299

Web Programlama 1

18.06.2021 04:31

edu

education

Eğitim Kurumları

www.esenyurt.edu.tr

com

company

Ticari Kuruluşlar

www.trendyol.com

gov

goverment

Devlet Kurumları

www.tbmm.gov.tr

mil

military

Askeri Kurumlar

www.tsk.mil.tr

net

network

Ağ Destek Kurumları

www.tr.net

gen

generic

Genel amaçlı siteler

www.okey.gen.tr

org

organization

Genel amaçlı siteler

www.ito.org.tr

Tablo 2.1. Genel Üst Seviye Alan Adı Uzantıları Alan Takısı

Anlamı

.tv

online televizyon dizileri ve diğer video projeleri

.me

kişisel markalarla ilişkili projeler

.expert

Uzman kişi ya da kuruluş

.guru

Uzman kişi ya da kuruluş

.io

genellikle teknolojiyle ilişkili şirketler kullanır

.name

bir kişi etrafında kurulmuş siteler

Tablo 2.2. Kreatif Üst Seviye Alan Adı Uzantıları Alan Takısı

Anlamı

.post

online televizyon dizileri ve diğer video projeleri

.museum

müzeler için kullanılır

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 31 / 299

Web Programlama 1

.aero

18.06.2021 04:31

hava-uzay endüstrisi tarafından kullanılır

Tablo 2.3. Kullanımı Kısıtlı Üst Seviye Alan Adı Uzantıları

Şekil 2.5. Ülke Alan Adları Download Internetten veri indirmek anlamında kullanılan kelimedir. Örneğin bir web sitesini görmek için sitenin adresini tarayıcınızın adres satırına yazdığınızda, tarayıcınız o sayfadaki tüm metinleri, resimleri, ve varsa sesleri bilgisayarınıza indirir, yani " download " eder. Upload Kendi bilgisayarınızdaki verileri başka bir bilgisayara internet üzerinden yüklemek anlamında kullanılan kelimedir. Örneğin bir web sitesine kendi fotoğrafınızı yüklemek istediğinizde tarayıcınız fotoğraf dosyanızı karşı bilgisayara aktarır, yani " upload " eder.

2.6. E-Posta (E-Mail)

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 32 / 299

Web Programlama 1

18.06.2021 04:31

Elektronik posta (e-posta), Internet üzerinde bilgisayarlar ve insanlar arasında bilgi alışverişini sağlayan kullanımı en yaygın Internet uygulamasıdır. Internet üzerinde TCP/IP protokollerinin bir parçası olan SMTP (Simple Mail Transfer Protocol) protokolüne dayalı e-posta sistemleri kullanılmaktadır. SMTP, e-posta mesajlarının Internet’te rahat hareket etmelerini sağlayan bir protokol yada kural kümesidir. SMTP sayesinde farklı işletim sistemlerine sahip bilgisayarlar arasında (UNIX, LINUX, WINDOWS NT, MACOS ) e-posta alışverişi gerçekleşmektedir. E-posta istemci/sunucu prensibi ile çalışmaktadır. Mail okumak ve göndermek için kullanıcılar maillerinin geldiği ve gönderildiği bilgisayara, yani sunucuya erişmelidir. Internette E-posta gönderebileceğiniz birçok mail sitesi bulunmaktadır. Bunlardan birkaçı şöyledir.

Ücretsiz mail adresleri [email protected] [email protected] [email protected] Kurumsal mail adresleri [email protected] (İstanbul Üniversitesi) [email protected] (YÖK) [email protected] (Ticari Şirket) E-Posta sitelerinden e posta adresi alırken dikkat edilmesi gereken kurallar; “. ( nokta), - (tire), _ (altçizgi)” dışında özel sembol kullanılmamalıdır. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 33 / 299

Web Programlama 1

18.06.2021 04:31

Son zamanlarda Türkçe karakterler de (ğ,ş,ü,ç,ö,ı,İ) kullanılmaya başlanmış olmasına rağmen e-posta adresi seçerken yaşabilecek sorunları göz önüne alarak Türkçe karakter kullanmamaya özen göstermek gerekir.

2.7. FTP (File Transfer Protocol) FTP (Dosya Aktarım Protokolü) internete bağlı bir bilgisayardan diğerine (her iki yönde de) dosya aktarımı yapmak için geliştirilen bir internet protokolü ve bu işi yapan uygulama programlarına verilen genel isimdir. İlk geliştirilen internet protokollerinden birisidir. FTP protokolü ile bir bilgisayardan bir başka bilgisayara dosya aktarımı yapılırken, o bilgisayar ile etkileşimli bağlantı kurulur ve bir dizi komut yardımıyla iki bilgisayar arasında dosya alma ve gönderme işlemleri yapılır.

Şekil 2.6. FTP Client- FTP Server ilişkisi FTP kullanarak dosya transferi gerçekleştirebilmek için şu bilgi ve programlara ihtiyaç vardır: Bağlanmak istenen bilgisayarın internet adresi Bağlanmak istenen bilgisayarda dosyalarına ulaşılacak hesapla ilgili kullanıcı adı ve şifresi İnternet erişimi olan, üzerinde FTP yazılımı bulunan (FTP hizmeti veren) bir bilgisayar Bağlanmak istenen bilgisayarda, FTP protokol komutlarını yorumlayacak çalışır durumda bir FTP istemcisi Temel FTP Komutları Genel kullanım : open

şeklindedir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 34 / 299

Web Programlama 1

18.06.2021 04:31

Komut çalıştırılıp ilgili bilgisayara bağlanıldığında, kullanıcı adı ve parola sorulur. İstenilen bilgiler doğru şekilde girildiğinde sahip olunan izinler çerçevesinde "p makinesine bağlanılmış olur. Bu şekilde, etkileşimli bir ortamda, (genellikle “"p>” ile gösterilir) bazı komutlar çalıştırılarak iki makine arasında dosya işlemleri, ayrıca bağlanılan makinede bazı temel dosya disk işlemleri (dizin açma, dosya silme vb.) yapılabilir. cd : Dizin değiştirmek için kullanılır. O an bulunulan konumdaki dizinlerden içine girmek istenen dizinin adı ile birlikte yazılarak kullanılır. (cd ) cd.. : Bulunulan dizinden bir üst seviyedeki dizine geçmek için kullanılır. pwd : Bulunulan dizinin yolunu (path) göstermek için kullanılır. (C:\windows şeklinde) dir : Bulunulan dizindeki dosyaları listelemek için kullanılır. ls : Bulunulan dizindeki dosyaları ayrıntılı bilgileri olmadan kısaca listelemek için kullanılır. get : Dosya almak için kullanılır. (get () ) put : Dosya göndermek için kullanılır. (put () ) mget : Birden fazla dosya almak istenildiğinde kullanılır. Örnek kullanımlar: (mget *.zip, mget a*.*) mput : Birden fazla dosya göndermek istenildiğinde kullanılır. ascii : Dosya aktarımlarında aktarım modu olarak ASCII kullanılacağını belirtmek için kullanılır..

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 35 / 299

Web Programlama 1

18.06.2021 04:31

binary: Dosya aktarımlarında aktarım modu olarak BINARY kullanılacağını belirtmek için kullanılır. Arşiv dosyaları (zip, arj, z, zoo, hqx vb), çalıştırılabilir uygulamalar (.exe, .com), resim dosyaları (gif, jpeg vb) FTP ile alınmadan ya da gönderilmeden önce mutlaka bu komut çalıştırılmalıdır. delete: FTP ile bağlanılan makinede bir dosyayı silmek için kullanılır. (delete ) mkdir : FTP ile bağlanılan makinede yeni bir dizin oluşturmak için kullanılır. (mkdir ) rmdir : FTP yapılan yerde boş bir dizini silmek için kullanılır. (rmdir ) help : Çalıştırılabilecek komutlar ile ilgili bir yardım ekranı çıkartmak için kullanılır. lcd : FTP ortamından çıkmadan, yerel makinede dizin değiştirmek için kullanılır. close : FTP ortamından çıkmadan, sadece ilgili bağlantıyı kapatmak için kullanılır. quit : FTP ortamından çıkmak ve bağlantıyı kapatmak için kullanılır. ("bye" komutu da aynı işlevi görmektedir.) Anonim (Anonymous) FTP FTP işlemi sırasında, güvenlik olarak, bağlanılacak makinedeki kullanıcı adı ve şifre bilgilerinin bilinmesi gerekmektedir. Bağlanılan makine, kişiye özel bir makine olabileceği gibi, herkese açık bir arşiv merkezi de olabilir. Böyle merkezlere herkesin kolayca erişip dosya alabilmesini sağlamak için tek tip bir kullanıcı adı tanımlanmıştır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 36 / 299

Web Programlama 1

18.06.2021 04:31

Bu merkezlere "p ile bağlanıldığında kullanıcı adı olarak “anonymous” ya da “"p” girildiğinde, bağlanılan makine tarafından parola olarak kullanıcının kendi e-posta adresini girmesi istenilmektedir. Burada, şifre olarak e-posta adresinin girilmesi genellikle istatistiksel amaçlar içindir. Web üzerinden yapılan anonim FTP bağlantılarında şifre girilmesine gerek duyulmamaktadır.

2.8. SMTP (Simple Mail Transfer Protocol) SMTP kısaltması, internet üzerinden e-posta akışı arkasındaki prosedür olan Simple Mail Transfer Protocol (Basit Posta Aktarım Protokolü) anlamına gelir. E-posta dağıtım işlemi klasik postaya oldukça benzer şekilde çalışmaktadır. Göndermek istediğimiz paket, posta merkezine teslim etmemizle başlayan yolculuğunu, üzerinde belirttiğimiz adrese göre uygun alt merkezlere aktarılarak sürdürür ve en sonunda alıcının gelen kutusuna düşer. Bu işlemde, SMTP sunucusu sadece SMTP çalıştıran ve aşağı yukarı bir postacı gibi davranan bir bilgisayardır. İletiler alındıktan sonra somut olarak e-postaların alıcılarına teslimi ile ilgilenen bu sunucuya gönderilir.

Şekil 2.7. Bir iletinin bilgisayarınızdan alıcının bilgisayarına yolculuğu Belirli bir alıcıya (örneğin [email protected]) adresinizden (örneğin [email protected]) internet postası veya posta istemcisi ile bir e-posta gönderebilirsiniz. Özel dilinde, internet postasına veya istemcisine İleti Kullanıcı Aracısı veya MUA (Mail User Agent) denir. İletiyi oluşturduğunuz zaman istemciye verilen ve bir İleti Aktarım Aracısı -MTA (Mail Transfer Agent) gibi davranan bir SMTP sunucusuna (örneğin mail.website.com adlı) ileti normal olarak 25 numaralı bağlantı noktası üzerinden gönderilir. İstemci ve sunucu, sunucunun iletinin iletimi ile ilgili tüm verileri (gönderici,

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 37 / 299

Web Programlama 1

18.06.2021 04:31

alıcı, etki alanları, vb.) kontrol ettiği, kısa bir “konuşma” yapmaya başlarlar. SMTP dili sadece iletinin iletimini tanımlar, iletinin ana metninin içeriği ile ilgilenmez. Ardından, alıcının hesabının olduğu etki alanı doğrudan sunucuya bağlı ise, e-posta hemen teslim edilir. Aksi taktirde, SMTP alıcıya daha yakın başka bir gelen sunucusuna iletir (özel dilde bu geçişlere ileti aktarma denir). Örneğimizde, web sitesi sunucusu, her şey doğru gittiği taktirde e-postayı alan ve saklayan Etki Alanı Sunucusuna (DNS - Domian Name Server) bağlanır. Alıcının sunucusunun arızalı veya meşgul olması durumunda ise SMTP barındırıcısı basit olarak iletiyi bir yedek sunucuya bırakır. Bunların hiçbiri mevcut değilse, e-posta sıraya koyulur ve teslim periyodik aralıklarla yeniden denenir. Ancak, belirli bir süre sonra ileti teslim edilmemiş olarak geri döndürülür. Herhangi bir sorun yoksa, son bölüm alıcı sunucusundan e-postayı alan ve alıcının gelen kutusuna koyan başka bir protokol olan POP3 (Post O!ice Protocol 3) tarafından kontrol edilir. Örneğin; Hotmail, Gmail ve Yahoo Mail gibi sağlayıcılar ile ilişkili olan “normal e-postalar” gönderdiğinizde kullanılan SMTP sunucularının, kullanıcılar arasında paylaşıldığının ve bunların tahsis edilmemiş IP’lere dayandığının altını çizmek gerekir. Bu ise spam gönderenler tarafından da kullanılan bir IP’ye dayanan sonuca ulaşabileceğiniz anlamına gelir. Bu durumda iletinizin doğru teslimi olumsuz etkilenecektir. Ayrıca, ortak sağlayıcılar gönderebileceğiniz e-postaların sayısına bazı katı sınırlar getirirler. (Örneğin Yahoo’nun kısıtlaması saatte 100 e-postadır). Toplu posta gönderebilmek ya da bir e-posta kampanyası oluşturabilmek için kontrollü IP’yi garanti eden ve yukarıda bahsedilen problemleri önleyen turboSMTP gibi profesyonel bir giden e-posta hizmeti kullanılması önerilir.

2.9. POP3 POP3, e-posta hizmetinizle iletişim kurarak ve tüm yeni mesajlarınızı buradan indirerek çalışır. PC'nize veya Mac'inize indirildikten sonra, e-posta hizmetinden silinirler. Bu, e-posta indirildikten sonra yalnızca aynı bilgisayar kullanılarak erişilebileceği anlamına gelir. E-postanıza farklı bir cihazdan erişmeye çalışırsanız, daha önce indirilmiş olan mesajlar size ulaşamayacaktır. Gönderilen postalar, e-posta sunucusunda değil, PC veya Mac'inizde yerel olarak depolanır. Birçok Internet Servis Sağlayıcısı (ISS) size POP3 kullanan e-posta hesapları verir. E-posta gönderilirken SMTP protokolü kullanılır. Söz konusu e-posta, e-posta sunucuları arasında aktarılırken de SMTP kullanılır. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 38 / 299

Web Programlama 1

18.06.2021 04:31

Alıcı e-postayı okumak istediğinde bigisayarına indirmek için arkaplanda POP3 protokolü çalışır. Yani, POP3, yalnızca e-postayı almak için ve son kullanıcılar tarafından kullanılır.

Şekil 2.8. POP3 Protokol İletişimi

2.10. IMAP IMAP de aynı POP3 gibi çalışan başka bir posta protokolüdür. IMAP, nerede olursanız olun herhangi bir cihazdan e-postanıza erişmenizi sağlamaktadır. IMAP kullanarak bir e-posta mesajını okuduğunuzda, aslında onu bilgisayarınıza indirmiyor veya depolamıyorsunuz; bunun yerine e-posta hizmetinden okuyorsunuz. Sonuç olarak, e-postanızı dünyanın her yerinden telefonunuz, bir bilgisayar, bir arkadaşınızın bilgisayarı gibi farklı cihazlardan kontrol edebilirsiniz. IMAP, yalnızca üzerine tıkladığınızda bir mesaj indirir ve ekler otomatik olarak indirilmez. Bu şekilde, mesajlarınızı POP3'ten çok daha hızlı kontrol edebilirsiniz.

2.11. Köprü Metni İşaretleme Dili (HTML-Hyper Text Markup Language) Köpri Metni İşaretleme Dili, günümüzde Internet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir. Dilin son sürümü HTML5’tir. HTML, bir programlama dili olarak tanımlanamaz . Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Temel görevi yazı, görüntü, video gibi çeşitli verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 39 / 299

Web Programlama 1

18.06.2021 04:31

HTML, W3C tarafından standartlaştırılmaktadır. Html, tag "etiket" ismi verilen çeşitli başlıklardan oluşur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.

Web kavramı, CERN'de bir bilgisayar programcısı olan Tim Berners Lee 'nin HTML adlı bilgisayar metin dilini bulup geliştirmesiyle başlamıştır.

2.12. HTTP ( Hyper Text Transfer Protocol) HTTP ( Hyper Text Transfer Protocol) internette en sık kullanılan protokoldür. Diğer protokollerde olduğu gibi HTTP’de sunucu istemci mantığı ile çalışmakta ve 80. port kullanılarak haberleşme gerçekleştirilmektedir. Kendi içinde TCP/IP protokolünü kullanır. HTTP protokolü istek/yanıt (request/response) mantığında çalışmaktadır. Sunucunun yanıt verme işlemini başlatabilmesi için öncelikle istemci den bir istek gelmesi gerekir. Bu protokol ile taşınan veriler web sayfalarıdır. Tarayıcı (Browser) programları ile bu veriler sunucudan http protokolü ile bilgisayarımıza yüklenir. Sunucudan aktarılan web sayfaları HTML tabanlıdır. Web Mimarisinin 3 Bileşeni vardır.

URI (Uniform Resource Identifier) URI (Uniform Resource Identifier), kaynağa tam olarak tanımlayıcı (identifier) ile işaret eden (belge, resim, dosya vb.) ve bu işaretleme için standart bir formata sahip karakter dizgisidir. URL kapsamında tutulan alt tanımlardır. Bir sayfa, görsel, dosya vb. URI için örnek olabilir; https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 40 / 299

Web Programlama 1

18.06.2021 04:31

http://ornekwebsitesi.com/logo.png, ISBN 0-486-27557-4 gibi. URI, URL ve URN olarak 2 kapsama sahiptir. Hem URN’ler (adlar) hem de URL’ler (konumlayıcılar) URI’lardır ve belirli bir URI aynı anda hem bir isim hem de konumlandırıcı olabilir. URL (Uniform Resource Locator) URL (Uniform Resource Locator), Tekdüzen Kaynak Bulucu ya da Kaynak Konumlayıcı şeklinde ifade edilebilir. İnternet aracılığıyla erişişebilecek kaynakların (dosyalar, dökümanlar vb.) konumu URL ile ifade edilir. URL teknik olarak URI’nın başlangıç kısmını oluşturur. Yapısal olarak, URL’in ardından ise URN gelmektedir. Ancak, bir konum belirtilmek istendiğinde çoğu durumda URI yerine URL ifadesi kullanılmaktadır. URI sözdizimi (syntax) şöyledir: scheme://domain:port/path?query_string#fragment_id scheme://user:password@host:port/path?query_string#fragment_id Bir kaynağın nerede olduğunu ve ona nasıl ulaşılacağını belirleyen URL http://, "p:// gibi pek çok protokolü barındırabilir. URL ve URI ilişkisini bir adres tarifi üzerinden gerçekleştirdiğimizde, URL konumu nitelerken, URN konumdaki kişinin adına benzer. Özetle, URL bir konum sağlarken URN bir şeyin kimliğini ifade eder. Örneğin, telnet://192.0.2.16:80/ bir URL iken tel:+1-816-555-1212 bir URN’dir. URN (Uniform Resource Name) Bir kaynağı benzersiz ve kalıcı bir adla tanımlar, ancak bunu İnternet’te nasıl bulunacağının söylenmesi gerekmez. Belgeleri tanımlamakla sınırlı değildirler. Hatta, URN’ler fikirleri ve kavramları tanımlayabilir. Bir URN genelde urn: prefix’i ile başlar. urn:isbn:0451450523 ISBN ile bir kitabı işaret eder. urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66 global olarak benzersiz bir tanımdır. urn:publishing:book bir belgeyi kitap türü olarak tanımlayan bir XML ad alanıdır.

2.13. HTTPS ( Hyper Text Transfer Protocol Secure) Köprü metni aktarım iletişim kuralının (HTTP) güvenli ağ protokolü ile birleştirilmiş olanıdır. Sunucu ve İstemci arasındaki veri transferinin güvenli bir alt yapıda gerçekleşmesini sağlar. Güvenliği sağlamak için kurallar ve yöntemler düzenler. Klasik HTTP protokolüne SSL protokolünün eklenmesi ile elde edilir. Veri transferi sadece istemci ve sunucu arasında gerçekleşir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 41 / 299

Web Programlama 1

18.06.2021 04:31

2.14. Dinamik HTML (Dynamic HTML - DHTML) Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket etmesini ya da görünümünün değişmesini sağlayabilen Web Sayfaları yapabilme imkanı sağlayan dildir.

Şekil 2.9. DHTML Yapısı

2.15. HTML Eklentileri (HTML Extensions) Son birkaç yılda bazı satıcılar web modelini dinamik (mekanik) ve interaktif (etkileşimli) içerikli olarak geliştirmişlerdir. Bunlar; • Client-Side Extensions (İstemci Tarafı) • Server-Side Extensions (Server Tarafı) Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dynamic HTML Client-Side a birer örnektirler. CGI (Common Gateway Interface) programları ve scriptler, Active Server Page (ASP), Hypertext Preprocessor (PHP), Java Server Page (JSP) ve Perl de birer Server-Side Extension a örnektirler.

2.16. Esnetilebilir İşaretleme Dili (eXtensible Markup Language - XML) XML Internet’teki yeni dillerdendir. W3C, XML’i “Verilerde yapı belirtmek için ortak bir yazım şekli” olarak ifade eder. Bu bağlamda XML pek de dil sayılmaz. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 42 / 299

Web Programlama 1

18.06.2021 04:31

HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized Markup Language (SGML)’den türer. XML’in HTML’den farkı HTML sabit etiketlere sahiptir fakat XML, SGML gibi kendi etiketlerinizi tanımlamanıza izin verir.

2.17. Esnetilebilir Köprü Metni İşaretleme Dili (XHTML: eXtensible Hyper Text Markup Language) XHTML, 2000 yılında W3C tarafından kabul edilmiş tüm internet tarayıcıları ve GSM telefonları tarafından standart olarak kabul edilmiştir. HTML, biraz daha derlenip geliştirilmiş ve belirli bir standarda geçirilip XHTML oluşturulmuştur. XHTML kullanmanın en temel amaçlarından biri, farklı tarayıcılarda sorun çıkartmamasıdır. Bunun yanı sıra tarayıcılar kodu daha çabuk algılar ve web sayfası HTML’e göre daha hızlı çalışır. Bir diğer avantajı da başta Google olmak üzere başlıca arama motorları XHTML standartlarına uygun yazılmış siteye tam not verir ve arama motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir. XHTML, Extensible Hyper Text Markup Language, Türkçe karşılığı ‘Esnetilebilir Köprü Metni İşaretleme Dili’ anlamındadır. Her ne kadar esnetilebilir denilse de bu esneklik kodlayan programcılar için değil, XHTML’i geliştiren programcılar için geçerlidir. XML’de var olan sıkı ve uyulması gereken şartlar XHTML’de de geçerlidir. HTML’de etiketlerin (tag) yazımında büyük ya da küçük duyarlılığı yoktur, ancak XHTML’de etiketler (tag) küçük harflerle yazılmalıdır. Bunun dışında da yazım kurallarında ufak farklılıklar vardır.

2.18. Web Tasarımında Temel İlkeler Web tasarımı yapılırken dikkat edilmesi gereken bazı ilkeler vardır. Bu ilkeler hazırlanacak web sitesinin alt yapısının düzgün kurulabilmesini, siteyi hazırlarken daha az hata yapılmasını, web sitesi kullanıcılarının siteye daha fazla ilgi göstermesini ve hızlı çalışmasını sağlayacaktır. Bu ilkeler: İçeriğin Belirlenmesi Tasarımın Belirlenmesi İşlevsellik Kullanılabilirlik https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 43 / 299

Web Programlama 1

18.06.2021 04:31

İnternet tarayıcıları ile uyumluluk İçeriğin Belirlenmesi Web sitesi tasarımı yaparken kullanılacak en önemli şey içeriktir. Çünkü web sitelerinin hazırlanma amacı, bilgilere başkalarının ulaşmasının sağlanmasıdır. Bu nedenle web sitesi tasarımına başlarken sitede ne yayınlanacağını yani içerikleri bilmek ve tasarımı bu doğrultuda yapmak önemlidir. İçerikleri önceden bilmek tasarımı hazırlamada bize yön verecektir. İçerik hakkında dikkat edilmesi gereken bir diğer unsur da uzun karmaşık cümleler yerine basit ve sade anlatımlar kullanmaktır. Tasarımı görsel olarak çok güzel olan bir site başta kullanıcıları çekse de içerik zayıf ise bir süre sonra ziyaretçi sayısı azalacaktır. Tasarımı nispeten zayıf olan bir sitede içerik iyi ise o siteye her zaman ziyaretçi gelir. Sitede kullanılan içerikler, site ziyaretçilerinin beklentilerini karşılayacak şekilde olmalıdır. Tasarımın Belirlenmesi Web sitesi içeriklerinin hazırlanacak web sayfasının neresinde ve nasıl görünmesini planladığımız bölüm tasarım aşamasıdır. Tasarım aşamasında web sayfasının logosu nerede olacak, yazılar nerede olacak, menüler nerede olacak gibi soruların yanıtları düşünülerek kağıt üzerine ya da bilgisayar ortamında çizim yapılır. Bu bölümde yapılan web sayfasının bir taslağının oluşturulmasıdır.

Şekil 2.10. Web sayfası tasarım örnekleri İşlevsellik

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 44 / 299

Web Programlama 1

18.06.2021 04:31

Web sayfası tasarımları yaparken, tasarımı yapan kişinin beğenisine göre değil kullanıcı profilinin verimli ve kolay kullanabilmesini baz alarak tasarımlar yapmak önemlidir. Kullanıcılar sitede aradıklarını kolay bulabilmek ve site içerisinde kolay dolaşabilmek isterler. Örneğin sitenin ana sayfasından sitenin içindeki her sayfaya doğrudan erişebilmek ya da her sayfadan tek bir tıklama ile ana sayfaya dönebilmek isterler. Tasarımda bunu dikkate almak gerekir. Diğer tara"an internet kullanıcıları sitenin iç sayfalarından da diğer sayfalara erişmek ister. Bunun için mümkün olduğunca sitedeki her sayfadan diğer sayfalara bağlantılar oluşturmalıdır. Eğer bunu tümü için sağlayamıyorsak en azından web sitesinin çok kullanılan sayfalarına her sayfadan mutlaka bağlantı verilmelidir. Her sayfadan anasayfaya ve sitenin ana bölümlerine bağlantı sağlanabilmelidir. Örneğin bir alışveriş sitesinde her sayfadan “Alışveriş Sepeti ‘ nin olduğu sayfaya, kullanıcı bilgilerine, siparişlerim bölümüne doğrudan bağlantı sağlanabilmelidir.

2.19. Kullanılabilirlik (Usability) Web sayfası hazırlarken internet kullanıcılarının kolay kullanacağı şekilde tasarlamak önemlidir. Kullanıcılar sitedeki yazıları okurken zorlanmamalıdır. Bunun için yazı tipini, rengini, büyüklüğünü doğru seçmek ve uygun bir zemin üzerinde görüntülemek gerekir. Ayrıca hazırlanan sayfaların yazıcıdan çıktı alınarak da kullanılabileceğini düşünerek yazı ve arkaplan renklerini yazıcıdan çıktığında da rahat okunabilecek şekilde seçilmelidir. Web sayfalarını hazırlarken site logosunu, ana sayfaya olan bağlantıları, menüleri internet kullanıcılarının alışkanlıklarına göre konumlandırmalıyız. Türk Standartları Enstitüsü'nün tanımladığı ISO 9241 no'lu standardın bir bölümü olan "Kullanılabilirlik Kılavuzu"na göre; kullanılabilirlik, bir ürünün belirli kullanıcılar tarafından belirli amaçlarla etkili (e!ective), verimli (e!icient) ve belirli bir kullanım çerçevesinde memnuniyetle (satisfaction) kullanabilme derecesi olarak tanımlanmaktadır. Web tasarımı yapan kişilerin Kullanılabilirlik konusunda bilgili kişiler olmasında yarar vardır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 45 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 2.11. Kullanılabilirlik kavramını özetleyen görsel Özetle, kullanılabilirlik derecesi etkililik, verimlilik ve memnuniyetin bir arada değerlendirilmesi ile oluşturulur ve bu değerlendirme tasarım süreci üzerinde belirleyici rol oynar.

Şekil 2.12. Tasarım sürecinde Kullanılabilirlik Bir web sayfasının Kullanılabilirliği iyi diyebilmek için taşıması beklenen bazı özellikler şunlardır: Web sayfası hızlı yüklenmelidir. Web sayfasında gezinmek için kullanılan navigasyon (menü) kullanıcının kolayca görüp kullanacağı bir yerde bulunmalıdır. (Yaygın kullanım sayfa başında veya sayfanın sol ve sağ bölümünde olacak şekildedir.). Sayfadaki site logosundan ana sayfaya bağlantı verilmelidir. Her sayfadan ana sayfaya bağlantı için bir Anasayfa yazısı bulunmalıdır. Her bölümde o bölümün iç sayfalarına ulaşılabilmesi için bağlantılar olmalıdır. Web sitesinde iletişim kurmak için iletişim bilgileri ve iletişim formu bulunmalıdır. Önemli kelimeler kalın olarak veya özel renklerle vurgulanmalıdır. İçerik çok fazla ise arama kutusu bulunmalıdır. Etkililik (E"ectivity) https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 46 / 299

Web Programlama 1

18.06.2021 04:31

Etkililik, kullanıcıların uygulamayı kullanarak yapması beklenen işleri ne kadar başarabildiğini ifade eder, bu anlamda etkililik işi yapabilme yüzdesi cinsinden ölçülebilir. Örneğin;

kullanıcıdan beklenen iş bir web sayfasındaki bilginin yerini bulmaksa etkililik, kullanıcının

doğru bilgiyi bulmada gösterdiği başarı ile ifade edilebilir. Kullanılabilirliğin değerlendirilmesinde etkililiğin ölçümü tek başına yeterli olmaz. Verimlilik (E"iciency) Belirlenen işi yapmak için kullanılan diğer kaynaklar (zaman, maliyet vb.) verimlilik ölçümü ile değerlendirilir. Web sayfası örneğinde verimlilik, kullanıcının belirlenen işi ne kadar sürede yaptığı ya da hangi yolları izlediği, işi kaç adımda tamamladığı vb. tespit edilerek belirlenebilir. Memnuniyet (Satisfaction) Memnuniyet, kullanıcının uygulamayı kullanırken oluşan fikirlerinin (beğenilenler, beğenilmeyenler vb.) ölçüsünü ifade eder. Memnuniyet, kullanılabilirlik üzerinde etkililik ve verimlilik ile aynı derecede kritik önceliğe sahip olmamasına rağmen etkililik ve verimlilik tarafından doğrudan etkilenir. Kullanıcılar web sayfasında aradıklarını nasıl bulacaklarını kolayca öğrenebiliyorsa, etkili ve verimli olarak kullanabiliyorsa memnuniyet derecesi o oranda artar. Memnuniyet, bu amaçla düzenlenen memnuniyet anketleri ile tespit edilebilir.

2.20. Web Sayfası Hazırlama Yazılımları Web hazırlamak için birçok araca sahibiz. Bunları üç sını"a toplayabiliriz. HTML editörleri Web Sitesi geliştirme araçları Web Uygulaması geliştirme araçları HTML Editörleri HTML’ de her şey metin tabanlıdır ve bir HTML dokümanı oluşturmak için ihtiyacınız olan şey bir editördür. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor :

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 47 / 299

Web Programlama 1

18.06.2021 04:31

Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri kolaylaştıran editörler o HomeSite o HotDog Diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler: o FrontPage, o Dreamweaver , o NetObjects Fusion Web Sitesi Geliştirme Araçları Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte linkleri kontrol edebilen araçlar ve Web Sitesini Web Serverda yayınlayabilecek araçlar içerir. WYSIWYG (What You See Is What You Get /Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörlerdir. • Fusion • Visual Page • Dreamweaver • FrontPage 2003 • FrontPage 2007 (SharePointDesigner 2007) Web Uygulamaları Geliştirme Araçları Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır. Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları şunlardır; ColdFusion NetDynamics https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 48 / 299

Web Programlama 1

18.06.2021 04:31

Dreamweaver UtraDev Visual InterDev

Bölüm Özeti Bir web uygulaması geliştirebilmek için önce onun çalışma mantığını kavramak büyük önem arz etmektedir. Web uygulamaları windows uygulamalardan ayıran en önemli özellik interneti kullanarak çalışıyor olmalarıdır. Windows uygulamalarını kendi makinemize kurar orada çalıştırırız. Ancak web uygulamaları web server adını verdiğimiz uzaktaki bir bilgisayarda bulunur ve ona erişip kullanabilmek için internet ağını kullanırız. Bu bölümde web uygulaması geliştirme konusunda sık sık karşılaştığımız terimlere yer verilmiş, bu terimlerin birbirileri ile nasıl iletişime geçerek çalıştıkları anlatılmıştır. Web, birbirleri ile iletişim kuran istemci ve sunucu olarak adlandırılan iki bileşenden meydana gelmeketedir. Kullanıma sunulan web uygulaması dokümanlarının tutulduğu web server sunucu taraf iken söz konusu web uygulamasına erişmek için kullanıcı bilgisayarlarında kullandığımız web tarayıcılar istemci taraf olarak adlandırılır. Her sunucu bilgisayarın da internete dahil olan diğer bilgisayarlar gibi bir IP adresi vardır. Ancak bu IP adresleri akılda tutmak zor olduğundan IP adresine karşılık gelen bir de alan adı kullanılır. Alan adı, o web uygulaması ya da sayfasının kime/hangi kuruma ait olduğu ya da içeriği ile kolayca akılda tutulabilen hatta tahmin edilebilen bir şekilde seçilmesi önerilir. Örneğin İstanbul Üniversite’nin web sayfası adresi http://www.istanbul.edu.tr olarak belirlenmiştir. Bu adrese URL adı verilir. Bir kullanıcı İstanbul Üniversitesi web sayfası adresini kolayca tahmin edebilir. Buradaki .edu eğitim kurumları için kullanılan alan adı uzantısı iken .tr ise ülke kodunu ifade etmektedir. İstemci bir bilgisayarın web tarayıcısında adres çubuğuna http://www.istanbul.edu.tr yazıp enter tuşuna basıldığında ilk olarak web tarayıcısı bu alan adına karşılık gelen IP adresini almak üzere Alan adı sunucusuna istek gönderir. Alan adı sunucusu ilgili IP adresini istemci makineye yani web tarayıcısına gönderir. Web tarayıcısı bu defa aldığı IP adresi ile web uygulamasının tutulduğu web server olarak adlandırılan sunucu bilgisayara bilgileri paylaşması için istekte bulunur. Sunucu bilgisayar istemcisinin erişim yetkisi çerçevesinde ulaşabileceği bilgileri kendisine gönderir. Aldığı bu bilgileri istemci makinenin ekranında görünmesi gerektiği haliyle kullanıcıya gösteren yine web tarayıcı uygulamasıdır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 49 / 299

Web Programlama 1

18.06.2021 04:31

Bir uygulamada belirlenen işlerin kullanıcılar tarafından, gerekli eğitimin ve teknik desteğin verilmesinin ardından, uygun çevre koşullarında kolaylıkla ve etkili biçimde kullanılabiliyor olması o uygulamanın kullanılabilir olarak nitenlenmesini sağlamaktadır. Kullanıcılar tarafından etkili, verimli ve memnuniyetle kullanılan arayüzler kullanılabilir arayüzler olarak öne çıkar ve daha çok tercih edilirler. Her ne kadar web sitelerinin öncelikli bileşeni içerik de olsa aynı içeriği çok daha kolay anlayıp kullanabildikleri bir tasarım ile birlikte bulduklarında kullanıcılar hiç düşünmeden onu tercih edeceklerdir. Çünkü aradığı şeyi bulmakla zaman kaybetmeyi kimse istemez. Kullanılabilirlik temel ilkeleri göz önüne alınarak web sayfaları hazırlarken kullanılabilecek çeşitli yazılımlar vardır. Amacımıza uygun olan birini seçerek tasarımlarımızı gerçekleştirebiliriz. Kaynakça 1. Fahrettin Erdinç

, “Yeni Başlayanlar İçin HTML5, CSS3 JAVASCRIPT A ’dan Z’ye Web

Programlama”,Abaküs Kitap, 2020 2. Tahsin Berk Ceylan , “Yeni Başlayanlar İçin Web Tasarım Kılavuzu”, Kodlab Yayın Dağıtım, 2020 3. Jon Duckett, “HTML ve CSS Web Siteleri Tasarlamak ve Oluşturmak”, Nobel Yaşam, 2019, ISBN : 9786059746267 4. Emin Borandağ, Fatih Yücalar, Ruken Kaya, Betül Kıral, “Web Programlamanın Temelleri”, Gece Akademi, 2018 5. Burak TOKAK, “HTML5, CSS3 ve JavaScript ile Web Tasırımı”, Dikey Eksen Dağıtım, ISBN: 9786054898169 6. Murat Yıldırımoğlu, “Her Yönüyle Internetin Altyapisi TCP/IP”, Pusula Yayıncılık, 2017 7. Erkan Balaban, “Web Tasarim Kilavuzu”, Pusula Yayıncılık, 2013 8. Yrd.Doç.Dr. Erhan ŞENGEL, Doç.Dr. Selçuk ÖZDEMİR, “Web Siteleri için Kullanilabilirlik Ölçümleri”, Ekin Basım Yayın - Akademik Kültür Kitaplar, 2012 9. Kürşat Çağıltay, “İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe”, ODTÜ Akademik Kitaplar, 2011 10. B. Shneiderman, “Designing the User Interface: Strategies for E!ective Human-Computer Interaction”, 5th Edition, Addison-Wesley, (2010)

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 50 / 299

Web Programlama 1

18.06.2021 04:31

11. Peter Weverka, “The Everyday Internet All-in-One Desk Reference for Dummies”, 2005, ISBN-10: 0764588753 12. Nuray Tekin, “Her Yönüyle Internet, Pusula Yayıncılık, 2003 13. Alan Dix, Janet Finlay, Gregory Abowd, & Russell Beale, “Human-Computer Interaction” (3rd ed.), Prentice Hall, 2003. 14. Donald Norman, “The Design of Everyday Things”, Basic Books, 2002 15. Mithat UYSAL, “ Web Teknolojileri”, 2001 ISBN: 9789754864199 16. https://tr.wikipedia.org/wiki/ Erişim Tarihi: 19.02.2021 17. https://www.serv-u.com/ Erişim Tarihi: 19.02.2021 18. https://www.bilisimkonulari.com/internet-protokolleri.html Erişim Tarihi: 19.02.2021 19. https://www.fibernettelekom.com.tr/ Erişim Tarihi: 19.02.2021 20. http://www.sekteor.net/ Erişim tarihi: 19.02.2021 21. https://www.avd.com.tr/genel-bilgiler/276-ip-nedir Erişim Tarihi: 19.02.2021

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 51 / 299

Web Programlama 1

18.06.2021 04:31

Ünite Soruları

1. Web Browser (web tarayıcı) program ne işe yarar? A) Kâğıt üzerindeki yazıları bilgisayara aktarır.

B) Internet sayfalarını bilgisayarımızda görmeyi sağlar.

C) İnternete bağlantı sağlar.

D) Internet bağlantısını hızlandırır.

E) Kâğıt üzerindeki resimleri bilgisayara aktarır.

2. Aşağıdaki eşleştirmelerden hangisi yanlıştır? A) gov: Hükümet kurumları

B) com: Ticari kurumlar

C) edu: Eğitim kurumları

D) org: Askeri kurumlar

E) gen: Genel Amaçlı Kuruluşlar

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 52 / 299

Web Programlama 1

18.06.2021 04:31

3. Aşağıdakilerden hangisi dosya transferi için kullanılan iletişim protokolüdür? A) DSP

B) NLP

C) FTP

D) HTTP

E) IMAP

4. Web sayfalarına erişmek için akılda tutulması zor olan IP numarasına karşılık olarak belirlenen ada ne denir?

A) Alan adı

B) Kurum adı

C) IP adı

D) e-posta

E) Dosya adı

5. Sunucu ve İstemci arasındaki veri transferinin güvenli bir alt yapıda gerçekleşmesini sağlayan ağ protokolüne ne ad verilir?

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 53 / 299

Web Programlama 1

18.06.2021 04:31

A) DHML

B) HTTPS

C) HTML

D) HTTP

E) XHTML

6. Internet üzerinden e-posta akışı esnasında çalışan protokol grubu aşağıdakilerden hangisinde doğru verilmiştir?

A) IMAP – POP3- XML

B) XHTML – SMTP -HTTP

C) SMTP – HTTP –POP3

D) SMTP – POP3 – IMAP

E) DHTML – IMAP - XML

7. Aşağıda eşleştirmelerden hangisi doğrudur? A) Sunucu Tarafında çalışan – Php Istemci Tarafında çalışan – C#

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 54 / 299

Web Programlama 1

18.06.2021 04:31

B) Sunucu Tarafında çalışan – ASP Istemci Tarafında çalışan – C#

C) Sunucu Tarafında çalışan – CSS Istemci Tarafında çalışan - Perl

D) Sunucu Tarafında çalışan – ActiveX Istemci Tarafında çalışan - Java Script

E) Sunucu Tarafında çalışan – ASP Istemci Tarafında çalışan - Java Script

8. IMAP ile POP3 hakkında aşağıda verilen bilgilerin hangisi doğrudur ? A) İkisi de e-posta hizmetinin bir parçasıdır, POP3 okumak istediğiniz e-postayı doğrudan bilgisayarınıza indirirken IMAP siz isterseniz bilgisayarınıza indirir.

B) IMAP dosya paylaşım protokolü, POP3 ise e-posta protokolüdür.

C) İkisi de e-posta hizmetinin bir parçasıdır, IMAP okumak istediğiniz e-postayı doğrudan bilgisayarınıza indirirken POP3 siz isterseniz bilgisayarınıza indirir.

D) İkisi de aynı mantıkla çalışan e-posta protokolleridir.

E) İkisi de dosya paylaşım protokolüdür, POP3 dosyaları sadece okumamıza izin verirken, IMAP dosyaları istersek bilgisayarımıza indirmemize izin verir.

9. Bir tasarımın kullanılabilirlik derecesini oluşturan 3 temel özellik asağıdakilerden hangisinde doğru verilmiştir ?

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 55 / 299

Web Programlama 1

18.06.2021 04:31

A) Ucuzluk – Güzellik – Özgünlük

B) Ucuzluk – Etkililik – Verimlilik

C) Kullanıcı Tatmini – Ucuzluk – Verimlilik

D) Verimlilik – Kullanıcı Tatmini – Memnuniyet

E) Etkililik – Verimlilik – Kullanıcı Tatmini

10. Kullanılabilirlik kavramı Türk Standartları Enstitüsü standartları arasına kaç numaralı standardın bir bölümü olarak girmiştir ?

A) ISO 9421

B) ISO 9412

C) ISO 9241

D) ISO 9142

E) ISO 9214

CEVAP ANAHTARI 1. b 2. d 3. c 4. a 5. b 6. d 7. e 8. a 9. e 10. c

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 56 / 299

Web Programlama 1

18.06.2021 04:31

3. WEB TARAYICISI ÇALIŞMA MANTIĞI

Giriş Internet dileyen herkesin istediği konuda paylaşımda bulunabildiği sonsuz bir bilgi deryasıdır. Bu bilgilere erişebilmek için Web Tarayıcı (Browser) adı verilen programları kullanırız. Web Tarayıcılar ulaşmak istediğimiz bilginin tutulduğu sunucu makinelere istekte bulunur, olumlu yanıt alırsa oradan bilgileri alır ve paylaşan kişinin bizim görmemizi istediği şekliyle ekranımızda görmemizi sağlar. Bu bölümde öncelikle Web Tarayıcıların temel çalışma mantığını inceleyeceğip ardından yaygın kullanılan tarayıcılardan biri olan Chrome’un çalışma mantığını derinlemesine irdeleyeceğiz. Web Tarayıcılarının çalışma mantığını anlamak onları kullanılarak paylaşılacak bilgileri içeren Web Sayfalarını oluşturmada bize yol gösterecektir.

3.1. Web Tarayıcılar (Browsers) Tarayıcıların çalışmasını derinlemesine inceleyerek kullanıcının web sayfasını ziyareti sırasında veya bir web uygulamasını kullanırken arka planda neler döndüğünü, hangi işlemlerin yürütüldüğünü bilmek, Web Uygulaması Geliştiricileri için çok önemlidir. Çünkü geliştirilen web sayfaları, bu platformlar üzerinden son kullanıcının erişimine sunulur. Mobil uygulama geliştiricilerinin iPhone ve Android telefonların çalışma mantığını bilmesi gerektiği gibi web uygulaması geliştiricilerinin de tarayıcıların çalışma mantığını bilmesi gerekir. Öncelikle Tarayıcı dediğimizde kullanıldığı işletim sistemine ya da kişisel tercihe göre değişen çok sayıda program ismi gelir. Bunların bazıları Chrome, Safari, Firefox, Edge, Opera, Brave gibi isimlerdir. Sadece bilgisayarlarımız değil telefon, tablet gibi mobil cihazlarımızdan da internete erişim sağlamaktayız. Bu erişimdeki amacımız alışveriş yapmak, haber okumak, eğitim amaçlı olarak ya da ticaret yapmak gibi çok geniş bir skalada olabilir. Kullanılan cihazın işletim sistemi ya da farklı özelliklerinden dolayı farklı Web Tarayıcıları tercih edilebilmektedir. Web tarayıcıları arasında küçük farklar olsa da temel çalışma mantığı hepsinde aynıdır.

3.2. Tarayıcıların Ana Fonksiyonu Nedir?

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 57 / 299

Web Programlama 1

18.06.2021 04:31

Tarayıcının ana fonksiyonu, kullanıcının belirlediği adresteki sunucudan web kaynakları için istekte bulunarak bu içeriklerin cihaz ekranlarında görüntülenmesini sağlamaktır. ■ Adres (URI-Uniform Resource Identifier): www.google.com ■ Sunucu (Web Server): Tomcat, Jetty, Express, vb… ■ Web Kaynakları (Resources): HTML, CSS, JS, Image, PDF vb.. ■ İstek (Request): HTTP Request…. ■ Görüntülenmesi (Render): HTML, PDF, Image, SVG, ekrana çizmek

3.3. Tarayıcının Ana Elemanları Tarayıcı elemanlarının kesin bir standardı yoktur. Kullanıcı kitlesinin best practice (en iyi kullanım deneyimi) doğrultusunda oluşmuş bir kullanım alışkanlığı olan ekran elemanları ortaya çıkmıştır. Bu elemanların ne olacağı HTML Standartları içerisinde yer almaz. ■ URI girebileceğiniz Adres Çubuğu ■ Gezdiğiniz URI arasında gezebilmenizi sağlayan Geri ve İleri Düğmesi ■ Gezdiğiniz URI kaydetmek için Bookmark Opsiyonları ■ Sayfanın yüklenmesini tekrarlayan (refresh) düğme ■ Farklı farklı web url’leri farklı sekmeler (tab sayfaları) içerisinde gösterme ■ Web sayfası içeriğinin gösterildiği içerik (content) alanı ■ Sayfa ile ilgili bilgilendirme mesajlarının Durum Çubuğunda (Status Bar) gösterilmesi

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 58 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.1. Tarayıcı ana elemanları

3.4. Tarayıcının Üst Seviye Mimari Yapısı Kullanıcı Arayüzü(User Interface) : Tarayıcının ana elemanlarını listelediğimiz, adres çubuğu, ileri-geri düğmesi, yenile düğmesi, bookmark menu vb. tarayıcı ekranında web içeriğinin gösterildiği alan dışındaki bölümdür. Tarayıcı Motoru(Browser Engine) : Görüntüleme Motoru ile Kullanıcı arayüzü arasındaki etkileşimi birbirine bağlama görevini yerine getirir. Görüntüleme Motoru (Rendering Engine): İstek sonucunda gelen içeriğin ekranda görüntülenmesinden sorumludur. PDF, HTML, Image vb.. Bu içerik bir HTML sayfası ise rendering engine bu HTML, CSS parse ederek bunun üzerinde JS etkilerini de yansıtarak içerik ekranında görüntüler.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 59 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.2. Tarayıcı üst seviye mimarisi Networking: Tarayıcı ve sunucu arasında HTTP Request veya başka protokolleri gerçekleştirerek sunucu sistem ile iletişim kurmayı sağlar. (WebSocket, WebRTC vb.. farklı protokoller ihtiyaçlarını da karşılar) JS Interpreter: JS kodunun parse edilip, çalıştırılmasını sağlar. UI Backend: Platform spesifik window, combobox, ve temel widget çizimini gerçekleştirecek işletim sistemi seviyesi API sağlıyor diyebiliriz. Burada HTML içeriğinin çizildiği RenderingContext de bulunmaktadır. Veri Tutma (Data Persistence): Tarayıcı tarafında tutulması gereken verileri tutmayı ve erişimi sağlayan katmandır. Bu sayede cookie, LocalStorage, IndexedDB, WebSQL and FileSystem erişim imkanları mümkün olabilmektedir.

3.5. Eşzamanlı - Paralel Çalışma (Concurrency / Parallel) Eşzamanlı çalışma (Concurrency) ve paralel çalışma (Parallel) arasındaki temel fark paralel çalışmada birden fazla görevin (task) aynı anda çalıştırılabilmesidir. Bunun için çok çekirdekli (multi-core) işlemcilere ihtiyaç vardır. Eğer tek bir işlemci varsa birden fazla uygulama nasıl aynı anda çalıştırılıyor? Birden fazla programın yada programı oluşturan alt programların eş zamanlı olarak çalışmasına (yada öyle görünmesine) "Çoklu Görev" (Multi-Tasking) denir. İşletim sistemi literatüründe "Process" diye geçen terim aslında bilgisayarınızda eş zamanlı çalıştırdığınız ayrık programlardır. Örnek olarak bir web tarayıcının ve bir kelime işleme programının aynı anda çalışıyor olması ve hatta bir de arka planda müzik https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 60 / 299

Web Programlama 1

18.06.2021 04:31

dinliyor olmanız çoklu göreve güzel bir örnektir. Aslında bilgisayarınız işletim sisteminizin yardımıyla sizden habersiz daha bir çok programı, servis yazılımlarını, donanım kontrolü gibi işlemleri eş zamanlı gerçekleştirir. İşletim sisteminiz, siz web'de gezinirken bir yandan sürekli farenizin ve klavyenizin hareketlerini tarar, eğer bir yazdırma işlemi varsa onu gerçekleştirir, arka planda bir dosya işlemi varsa onu icra eder, bir yandan e-posta istemcinize bir mail gelmiş mi ona bakar vs. Kısaca bu ve bunlar gibi bir çok üst ve alt seviyede yürütülen işleri eş zamanlı gerçekleştirmeye çalışır. Her ne kadar programlar aynı anda çalışıyor gibi görünse de tek işlemcili bir bilgisayar bir zaman diliminde sadece tek bir görevi icra edebilir. Ancak işlemci, aynı anda çalışıyor gibi görünen uygulamalara belirli zaman aralıklarında atanarak o programın belirli bir parçasını çalıştırır. Bu işlemi çok hızlı yaptığı için son kullanıcılar bu durumu hissetmez. Hatta işletim sistemi seviyesinde bir çok görev bu planlayıcı (scheduler) tarafından çalıştırılır. Özetle Merkezi İşlem Birimi (CPU) süre paylaşımı gerçekleştirerek birden fazla uygulamayı aynı anda çalışıyormuş gibi işletebilir.

Şekil 3.3. Eşzamanlı çalışma (Concurrency) ve paralel çalışma (Parallel)

3.6. İşlemci (CPU) Hangi Işlemi Önce Yapacağına Nasıl Karar Verir? Merkezi İşlem Birimi (CPU) yani fiziksel işlemciler kendilerine verilen işlemleri gerçekleştirmekten sorumludur. Birden fazla işlem varsa bunlardan hangisinin önce çalışacağına, sırasının ne olacağına karar verme işlemi İşletim Sistemleri tarafından gerçekleştirilir.(Windows, MacOS, Linux, Unix, Android iOS vb) İşletim sisteminin yaptığı bu işleme İşlemci Zamanlama (CPU Scheduling) veya Processor Scheduling işlemi adı verilir. Bu işlemi gerçekleştirebilmek için Zamanlama (Scheduling) Algoritmalarını kullanır ve bir takım hedefler gözetilerek bu algoritmalar çalıştırılır. Bu algoritmaların çalışma mantığına örnekler aşağıda verilmiştir. Fairness : İşlemler arası adaletli bir dağıtım sağlanması https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 61 / 299

Web Programlama 1

18.06.2021 04:31

Policy Enforcement: Sistem politika ve kurallarının doğru şekilde çalışmasının sağlanması E"iciency: Sistem bileşenlerinin ve işlemcinin en etkin şekilde kullanılması Response Time: Kullanıcı ile etkileşimde çok hızlı cevap dönebilmesi Turnaround: İşlem üzerinde uzun zaman beklemesini minimize etmesi. Throughput: İşlemin bitmeden diğer işleme geçişi, yani bir iş bitmeden işlemden işleme atlama olayını minimize etmesi. Zamanlama (Scheduling) algoritmaları ikiye ayrılır. Preemptive : İşlemin bitmeden diğer işlemlere geçebildiği Non-Preemptive : İşlemin işlemci tarafından alınıp bitirilinceye kadar bırakılmadığı algoritmalar.

3.7. Process - Thread Süreç (Process) çalışma durumunda hazır bekleyen bir programdır. Program bir komutlar bütünüdür. Süreç ise bu programın çalıştığında yaptığı işlemdir. Komut satırına; ps -a yazarak hangi process ‘lerin hangi id ile çalıştığı görülebilir.

Process zaman vererek tüm uygulamaların birlikte çalışmasına olanak sağlar. O process içerisinde SingleThread EventLoop’daki gibi tek bir thread çalıştırılabileceği gibi Java’daki Servlet içerisindeki gibi multi-thread yaklaşımlarda uygulanabilir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 62 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.4. Multi-Thread - Single Thread

3.8. Senkron - Asenkron (Sync-Async) Senkron yapı incelendiğinde process içerisindeki kod işletilirken, hep sonraki satırın işletilmesinin beklendiği görülür. Örneğin dosyaya bir veri yazdırırken dosyaya yazma işlemini bekliyorsanız (ProcessB işleminin bitmesi bekleniyorsa) bu yapılara Senkron, eğerki beklemeden ProcessB görevi verip diğer işlemleri yapmaya devam ediliyorsa (ProcessB cevap geldiğinde o işe o zaman bakılıyorsa) bu tip çalışma mantığına da async denir.

Şekil 3.5. Senkron - Asenkron

3.9. Ekran Kartı Nasıl Çalışır (GPU) Radeon 9700 Pro Ekran kartına yakından göz gezdirdiğimizde VPU (Visual Processing Unit) işlemcisi aşağıdaki şekildeki gibidir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 63 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.6. Radeon 9700 Pro Ekran Kartı Radeon 9700 yongası hala 15µ teknolojisiyle üretilmektedir ve 110 milyonu aşkın transistörü ile oldukça büyük bir alana sahiptir. AGP 8X Arayüzü: İşlemciden, grafik işlemcisine 2GB/s bir bant genişliğinin sağlaması görevini üstlenir. Bu sayede işlemciden aktarılacak olan vertex transferindeki darboğazı bir müddet daha önleyebilecektir. Bellek Denetleyicisi: İşlemci üzerinde ne kadar büyüklükte bellek desteklediği ve bu bellek alanlarının kontrolünün nasıl gerçekleştiği ile ilgilenen bu kısımda Radeon 9700, 256(64*4) bit veri yolu, 256 MB 310 Megahertz DDR bellekler kullanılmaktadır. Vertex Shader Üniteleri: Vertex Shading işlemi, şekilde de görüldüğü gibi sabit bir fonksiyon sırasına sahip olan rendering pipeline sırasında, T&L(Transform ve Lighting) işlemi sırasında fonksiyon sırasını kendi üzerine alarak, pipilene üzerinde by-pass uygulamaktadır. Bu sayede T&L sağlayamadığı popüler vertex hesaplamalarına bir alternatif sağlanmış olur. Ayrıca bazı efektlerin T&L sıkı sıkıya bağlı olduğu bir durumda, bu kısmı kendinizin programlamanızı sağlayarak (assembly) çok daha iyi efektleri ortaya çıkarma imkanı sunar.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 64 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.7. Vertex Shader Üniteleri Pixel Shader Pixel Shader Üniteleri MultiTexturing safhasında pipeline karışarak by-pass yapmaktadır. En önemli başarısı 64 bit, 128 bit kayar nokta renk hassaslığı ve aşağıdaki bir takım efektlerin ve gerçekçi görüntülerin oluşmasına olanak sağlamasıdır. Single-pass, per-pixel lighting True Phong shading [Beaudoin/Guardado] Anisotropic lighting [Isidoro/Brennan] Non-Photorealistic-Rendering: cartoon shading, hatching, Gooch lighting, image-space techniques [Card/Mitchell] Per-pixel fresnel term [Brennan] Volumetric e!ects [Kraus][Hart] Advanced bump mapping (self-shadowing bump maps (also known as Horizon Mapping) https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 65 / 299

Web Programlama 1

18.06.2021 04:31

Procedural textures [Zecha] and texture perturbation [Isidoro / Riguer] Bidirectional reflectance distribution functions [Moravánsky] Hyper-Z: Radeon görünmeyen yüzeylerin çizimini önlemek için kullandığı tekniği Hyper-Z olarak adlandırmaktadır. Smoothvision 2.0 — Anisotropic Filtering: Anisotropic Filtreleme, kişiye geniş bir açısı olan yüzeylerdeki (mesela bir koridor boyunca uzanan duvarlar) kaplamaların kalitesini oldukça yükselten özel bir tekniktir. Gerek bi-linear gerekse de tri-linear kaplama filtrelemesinin burada iyi bir iş çıkaramamasının sebebi, varolan pikselin yukarıda anlatılan filtreleme tekniklerinde pixel rengini tanımlamak için kullanılan dört ya da sekiz teksel örneğinden daha büyük bir kısmını kaplamasıdır. Anisotropic filtreleme, pikselin rengini tanımlamak için, yüzeyin eğimi boyunca 16 bi-linear veya tri-linear örneği almaktadır. ATi Video Shader: ATi, video shader’ ın düşük bant genişliğinde akan bir videodaki karelenmeleri gerçek zamanlı olarak nasıl önlediğini, ya da ‘blurring’, ‘embossing’ ve ‘outlining’ gibi özel efektlerin bir video sinyaline nasıl uygulanabileceğini göstermiştir.

3.10. İşletim Sistemi Nasıl Çalışır? İşletim sistemi bilgisayar kullanıcısı ile bilgisayar donanımı arasında işleyen ve donanımın kullanımını sağlayan bir programdır. İşletim Sisteminin Başlıca Amacı : Kullanıcı programlarını çalıştırmak ve problemlere çözüm üretmek Bilgisayar Sistemini kullanılmaya uygun hale getirmek Bilgisayar donanımının en etkili yoldan kullanılmasını sağlamak. İşletim Sisteminin Bilgisayar Sistemi içindeki yeri Hardware: Ana işlem kaynaklarının sağlanması (CPU, bellek, I/O) İşletim Sistemi: Donanım ile kullanıcılar için hazırlanmış farklı uygulama programları arasında kontrol ve koordinasyonun sağlanmasından sorumludur.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 66 / 299

Web Programlama 1

18.06.2021 04:31

Uygulama Programları: Kullanıcı problemlerini çözmek için sistem kaynaklarının nasıl kullanılacağını belirler. (compiler, veritabanı sistemleri) Kullanıcılar: (insanlar, makineler, diğer bilgisayarlar)

Şekil 3.8. Bilgisayar Sistemi İşletim Sistemi Bölümleri Süreç(process) Yönetimi: Süreç programın işletilmesidir. Süreç, görevini yerine getirebilmek için belli kaynaklara ihtiyaç duyar. (CPU zamanı, bellek, dosya, I/O aygıtları) İşletim sistemi aşağıdaki aktivitelerden süreç yönetimi ile sorumludur. Süreç yaratma ve silme Süreci askıya alma ve tekrar başlatma Süreç Senkronizasyonu ve Süreç iletişimi Bellek Yönetimi: Bellek büyük miktarda word ve byte’ ların oluşturduğu kendi adresi olan array’ dir. Ana bellek geçici bellek aygıtıdır. İşletim sistemi aşağıdaki aktivitelerden bellek yönetimi ile sorumludur. Kullanılmakta olan bellek alanlarının izlerini tutmak Bellek alanı boşaldığında hangi sürecin belleğe yükleme yapacağına karar vermek. İhtiyaca göre yer tahsisi ve serbest bırakımını gerçekleştirmek

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 67 / 299

Web Programlama 1

18.06.2021 04:31

Dosya Yönetimi: Oluşturucusu tarafından bir araya getirilmiş ilişkili bilgilerdir. Genellikle dosyalar programları ifade eder. (tüm .obj formları, kaynak dosyaları ve veriler) İşletim sistemi aşağıdaki aktivitelerden dosya yönetimi ile sorumludur. Dosya yaratma ve silme Dizin oluşturma ve silme Dosyalar ve dizinler üzerinde değişiklik yapabilmek için ilkel yetenekleri desteklemek Dosyaları ikinci bellekte aynen eşleştirebilmek (mapping) Dosyaların yedeklerini sabit diske alabilmek I/O Sistem Yönetimi: Bu!er-caching sistemi, Genel aygıt-sürücü arayüzleri, Sürücüye özel donanım aygıtlarını kapsamaktadır. İkincil Bellek Alanı Yönetimi: Birincil bellek alanı, verileri geçici olarak tutabilmesi ve çok küçük olması sebebiyle tüm programlar ve verileri sürekli olarak ana bellekte tutulmaz. İşte burada ikincil bellek alanı birincil bellek alanının backup’ı olarak kullanılır. Birçok bilgisayar sistemi backup edilecek program ve veriler için diskler (sabit diskler) kullanır. İşletim sistemi aşağıdaki aktivitelerden ikincil bellek yönetimi ile sorumludur. Boş alan yönetimi Depolama yer tahsisi Disk paylaştırımı Networking (Distributed System): Dağıtık Sistemden kasıt aynı bellek alanını ve saatini paylaşmayan işlemci topluluğudur. İşlemciler sisteme network aracılığı ile bağlanır. İletişim belli bir protokol aracılığı ile gerçekleşir. Dağıtık Sistem kullanıcıların başka sistem kaynaklarına erişebilmesini sağlar. Bu da; İşlem hızının arttırılmasına Veri erişebilirliğinin arttırılması Gelişmiş güvenilirlik sağlar. Koruma (Protection) Sistemi: Kullanıcıların, programlarını süreçlerin sisteme ve kullanıcı kaynaklarına erişimini kontrol eden mekanizmadır. Koruma mekanizması; Yetkili veya yetkisiz kullanımı ayırt edebilmeli. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 68 / 299

Web Programlama 1

18.06.2021 04:31

Aldatmaları belirleyebilmeli Zorlayıcı olabilmelidir. Komut Yorumlayıcı Sistemi: Kontrol deyimi olarak bir çok komutun işletim sistemine verilmesini sağlar. Bu komutlar; Süreç yaratma ve yönetme, I/O handling İkincil bellek yönetimi Birincil bellek yönetimi Dosya Sistemine erişim Koruma Network

3.11. Chrome, İşletim Sistemi ve Donanımı Nasıl Kullanıyor ? Chrome da diğer uygulamalarda olduğu gibi katmanlı bir yapı ile öncelikle İşletim Sistemi erişimini gerçekleştirir ve işletim sistemi servislerinden faydalanır. İşletim sistemi de donanım katmanına erişerek CPU(İşlemci), GPU(Ekran Kartı), Memory(Bellek) ve Disk erişimlerine izin vererek Chrome’un çalışması gerçekleştirilir.

Şekil 3.9. İşletim sistemin donanım ve uygulamalar arasındaki konumu Bilgisayarlar bir çok işlem paralel şekilde yapılabilmesi için Multi-Core yapılı hale gelmiştir. CPU’lar kendilerine verilen her türdeki matematiksel işlem ve görevi yerine getirirler.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 69 / 299

Web Programlama 1

18.06.2021 04:31

GPU (Ekran Kartları) ise işlemcilere göre çok çok fazla çekirdeğe (core) sahiptir. Ama daha kısıtlı bir alanda matematiksel ağırlıklı işlemleri yerine getirir, daha çok Rendering, Physics ve AI Calculation amaçlı kullanılmaktadır.

Şekil 3.10. CPU – GPU Chrome’un bir uygulama olarak işletim sistemi üzerinde çalıştığı daha önce

belirtmişti. Chrome

makinenizin gücüne ve yeteneklerine göre kendisinin çalışacağı Process ve bu process’ lerin içerisindeki Thread sayısını belirler. Aşağıdaki örnekte iyi bir CPU, GPU ve Belleğe sahip güçlü bir makine örneği görülmektedir. Bu tür bir makinede neredeyse her process içerisinde bir thread çalıştıracak şekilde kendisi konumlandırır.

Şekil 3.11. Güçlü bir bilgisayar örneği

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 70 / 299

Web Programlama 1

18.06.2021 04:31

Eğer ki makine zayıf ise bu durumda Browser Process içerisine Network, Storage, UI, Device Thread ekleyerek çalıştıracak, bu durumda aynı process içerisinde birden fazla farklı thread ile işler halledilmeye çalışılacaktır. Bu duruma Chrome Servicification (Hizmeti) denir.

Şekil 3.12. Zayıf bir makinede Chrome Servicification (Hizmeti) Chrome’da o anda hangi Process’lerin çalıştığını görebilemk için; Chrome sağ üst köşesinde bulunan 3 noktaya tıklayarak More Tools (Diğer Araçlar) → Task Manager (Görev Yöneticisi) altından çalışan tüm task ’lara erişilebilir. Her task ayrı Process ID’ye sahiptir.

Şekil 3.13. Chrome’da o anda çalışan Process’lerin listesi

3.12. Chrome Mimarisi Chrome çalışma mimarisi incelendiğinde, Tarayıcının bir Üst Seviye Mimariye sahip olduğu görülebilir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 71 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.14. Chrome’un Mimarisi Browser Process: Adres çubuğu, bookmarks, ileri-geri düğmesi, tarayıcının menüleri altındaki ekranları, dosya erişimi ve network isteğini çalıştırır. Renderer Process: Web sayfasının render edildiği tab içerisindeki tüm görüntüleme işlemlerinden sorumludur. Plugin: Web sayfasına tarafından kullanılan pluginleri yönetir ve çalıştırır (Örneğin Flash vb..) GPU: Ekran yüzeylerinin grafik kartı tarafından çizilmesi işlemini gerçekleştirir. Utility: Tracing, Audio, Network vb. diğer donanımlara erişim işlemlerini gerçekleştirir. Multi Process Mimarisinin Avantajları Her bir tabın ayrı rendering process olarak çalıştırılması, bu sayfaların birisinde bir sorun olduğunda tüm Chrome’un çökmesi durumunu ortadan kaldırır. Tabiki dezavantajı sistem kaynaklarını çok fazla tüketmesidir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 72 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.15. Tarayıcıda Sekme (Tab) Yapısı Diğer bir avantajda security & sandboxing’dir. Çünkü process’ler işletim sistemi tarafından ayrı bellek alanlarına erişim sağlamaya zorladıkları için hem Tablarda yapılan Rendering işlemi, hemde V8 Engine içerisinde çalıştırılan JS ayrı sandbox içerisinde çalıştırılmış ve güvenlik sağlanmış olur. Tabiki process limitine ulaştığında aynı process içerisinden thread ile bu işlemi yapmak zorunda kalınacaktır.

Şekil 3.16. Rendering Process süreci Uygulama üzerinde gösterilen 2 tane sarı üçgen aslında bir Rendering Process içerisinden yönetilen bir bellek alanında tutulur. Örneğin 2 process’in birbiri ile konuşması ve iletişim kurması gerekiyorsa, Network Request sonrasında gelen HTML,CSS vb. Rendering Process iletmesi durumunu Inter Process Communication ile gerçekleştirir.

Şekil 3.17. Inter Process Communication

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 73 / 299

Web Programlama 1

18.06.2021 04:31

Site Isolation Aynı web sayfası içerisinden başka sitelere ait içerikler (iFrame içerisinde) rendering sırasında gerçekleşir. Same Origin Policy tarayıcı güvenliği nedeniyle örneğin a.com sitesindeki bir sayfa içerisinde b.com ve c.com sayfalarından çekilmiş verilerin iFrame rendering gerçekleştirilirken ayrı Rendering Process gerçekleştirilmesi güvenliğin daha üst seviyede olmasını sağlamaktadır.

Şekil 3.18. Site Isolation

3.13. Chrome Navigasyonu Web sayfasının gösterildiği Tab dışındaki bütün ekranların yönetiminin Browser Process ‘inin kontrolünde olduğundan bilinmektedir. Tarayıcı process içerisinde; UI Thread düğmeleri, girdi alanları ve dialog ekranlarının çizimini gerçekleştirir. Network Thread: Internet üzerinden veri transferi ve alınması işlemlerini Storage Thread: Dosyaya ve belleğe erişim işlemlerini gerçekleştirir. Basitçe Yönlendirme 1. Adres Çubuğuna Arama Kelimesi yada URL yazılır Adres çubuğuna bir şeyler yazmaya başlandığında bu Browser Process → UI Thread tarafından ele alınır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 74 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.19. Adres çubuğuna yazma ile başlayan işlemler 2. UI Thread Bunun Bir URL olup Olmadığına Karar Verir. Adres çubuğuna bir metin yazıp Enter’a basıldığında UI Thread öncelikle yazılan metnin bir URL adresimi yoksa Google Araması mı olduğunu belirler.

Şekil 3.20. Yazılanın URL olup olmadığının tespiti 3. Navigasyon Başlar Kullanıcı Enter düğmesine bastığında Adres Çubuğunda URL var ise ilgili siteden bu içeriğin çekilmesi için network call başlatır. Sayfa yüklenirken Tab kenarında Loading Spinner animasyonu gösterilir. Network Thread ilgili protocol üzerinden (genelde HTTP/s) üzerinden DNS Lookup ilgili IP bulup adres ile HTTPS(TLS) iletişim kurmaya çalışır. Network Thread sunucudan Redirect header HTTP 301 bilgisi aldığında bu bilgiyi UI Thread iletir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 75 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.21. Navigasyonun başlaması 4. Response Veri Okunmaya Başlar Ne zamanki response body olarak veri gelmeye başlar, Network thread gelen verinin ilk byte’ını analiz ederek Response Type tahmin etmeye çalışır bu işleme MIME Type sni!ing denir.

Şekil 3.22. Response veri gelmesi 5. Renderer Process’e Veriyi Aktarma Network’den tarayıcıya akan veri üzerindeki tüm kontroller yapıldıktan ve güvenilir bir veri olduğu anlaşıldıktan sonra Network Thread → UI Thread’e "veri kullanım için hazır" bilgilendirmesini yapar. UI Thread bu veriyi ekrana basacak olan Renderer Process aktarır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 76 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.23. Renderer Process’e Veriyi Aktarma Performans için UI Thread Enter düğmesine basıldığında işler yolunda giderse diye standby modunda bir Renderer Process’i hazır bekletiyor olur. 6. Navigasyon İşleminin Onaylanması HTML verisi ve Renderer Process hazır durumda olduğunda Browser Process → Renderer Process’e IPC (Inter Process Communication) gönderilir. Burada aynı zamanda elde edilen HTML verisine ait veri stream’leri de Renderer Process’e geçirilir. Ne zamanki Browser Process, Renderer Process tarafından bu IPC için OK onayı verirse, navigasyon işlemi tamamlanmış ve Document Loading Aşaması başlamış olur. Bu aşamada şu işlemler gerçekleşir: Adres Çubuğu, SSL durumuna göre güncellenir. Tarihçe (Session History) güncellenir. İleri-Geri düğmeleri aktif hale gelir. Performans nedenleri ile oturum geçmişini diske kaydeder v.b.

Şekil 3.24. Navigasyon İşleminin Onaylanması 7. Initial Load (HTML, CSS) Yüklenmesinin Tamamlanması

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 77 / 299

Web Programlama 1

18.06.2021 04:31

Navigasyon işlemi tamamlandı. Renderer Process HTML içerisindeki statik CSS ve JS dosyalarını yüklemeye başladı. Bu işlemler bittiğinde Renderer Process → Browser Process’e yükleme işlemi tamamlandı onLoad şeklinde bir event gönderir. Browser Process → UI Thread’e bu bilgiyi verdiğinde ilgili tab’daki Loading Spinner ortadan kaldırılır.

Şekil 3.25. Initial Load Tamamlanması Bu aşamada load işlemi tam anlamıyla bitmiş olmayabilir çünkü JS işletilirken tekrar tekrar Lazy Loading yapılıyor olabilir. Burada kastedilen HTML içerisinde yazılan statik resource kaynaklarıdır. Başka Bir Sayfaya Yönlendirme Basit bir yönlendirme tamamlanıp sayfa ekranda görüntülendikten sonra Adres Çubuğuna başka bir URL yazıldığında neler olur ? Browser Process aynı işlemleri gerçekleştirecektür, ama öncesindeki sayfa için beforeunload event’i göndererek bu sayfa ile ilgilli çalışacak başka JS işlemleri varsa bunların yapılması veya geliştiricinin isterse “Bu sayfadan çıkmak istiyor musunuz?” uyarı mesajı göstermesi gibi

işlemleri yapmasını

sağlayacaktır. Burada yapılacak ekstra yüklü işlemler sayfa geçişlerini yavaşlatacağı için örneğin Performans verilerinin gönderilmesi için Beacon API gibi Uygulama Programlama Arayüzleri geliştirilmiştir. Bu API kısaca sizin sunucudan cevap gelmeden verilerinizi sunucuya göndermenizi sağlar. Browser Process → IPC ile → Renderer Process’i başka bir URL sayfasına yönlenilecek beforeunload yapacak bir işlemin var mı? şeklinde haberdar eder.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 78 / 299

Web Programlama 1

18.06.2021 04:31

Şekil 3.26. Browser Process – Renderer Process Burada yönlendirme Adres Çubuğu değilde, sayfadaki herhangi bir linke tıklandığında başka bir sayfaya yönleniliyorsa window.location bu defa Renderer Process öncelikle beforeunload handler çağırıp daha sonrasında Browser Process üzerinden navigasyon işlemini çağırır. Burada tek fark UI Thread → tetiklemesi yerine Renderer Process → bu işlemi tetiklemiş olur. Farklı sayfaya yönlendirildiğinde yeni sayfa farklı Renderer Process tarafından ele alınır. Bunun bir nedeni de önceki renderer ön safhada unload işlemini tam anlamıyla bitirememiş olabilir.

Şekil 3.27. New / Old Renderer Process

3.14. Chrome Web Sayfasını Ekrana Nasıl Çizer ? Tab içerisindeki tüm işlemlerden Renderer Process sorumludur. Bu işlemler; Main Thread JS işletilmesi (Web Worker ve Service Worker ayrı thread), Compositor ve Raster Thread sayfayı efektif , sorunsuz şekilde çizmesi HTML, CSS, JS görüntülenecek bir Web sayfasına dönüştürülmesi

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 79 / 299

Web Programlama 1

18.06.2021 04:31

Bu sayfadaki kullanıcı input(etkileşimlerinin) alınması ve işletilmesidir.

Şekil 3.28. Renderer Process 1. Rendering & JS Engine Tarayıcıların en önemli parçalarından bir taneside bu Renderer Process kısmıdır. Bu kısımda tarayıcılar Rendering Engine, JS Engine kullanır. Kısaca üzerinde bir çok komite ve şirketin geliştirdiği Tarayıcıları bir diğerinin önüne geçirebilecek performans kazançları bu engine tarafından gerçekleştirilir. Bu yarışı Chrome önde götürdüğü için Microso" Edge, Opera kendi yapılarını Blink ve V8 Engine’e taşımışlardır. Rendering Engine (Motorları) Chrome, Opera, Edge → Blink Rendering Engine, (fork of WebKit) Safari → Webkit IE → Trident Firefox → Gecko JS Engine (Motorları) Chrome , Opera, Edge — V8 Firefox — SpiderMonkey IE — Chakra Safari — JavaScriptCore 2. Ana Akış Render Motorunun ana akışı incelendiğinde şu adımlardan geçtiği görülür. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 80 / 299

Web Programlama 1

18.06.2021 04:31

Parsing: HTML parse edilerek DOM (Document Object Model) oluşur. Aynı anda CSS parse edilerek bu DOM nesnelerinin görsel olarak nasıl olacağı ile ilgili kuralların olduğu Style Rules oluşturulur. JS Updates: Bu aşamadan sonra işletilen JS kodu DOM ve Style Rules güncellemeler ve değişiklikler yapabilir Merging: DOM Ağacındaki elemanlar + Style Rules (stil kuralları) birleştirilerek Render Ağacı oluşturulur. Bu ağacı hangi elemanın hangi sırada hangi stilde ve boyutlarda ekrana çizileceği ile ilgili bilgileri içerir. Layout: Render Ağacı oluştuktan sonra bunun hangi büyüklükte bir ekran içerisine (Masaüstü, Tablet, Cep Telefonu vb..) çizileceği ve mevcut CSS Layout bilgilerine göre elemanların ekrandaki pozisyonlarının ne olacağı hesaplanarak bu bilgilerde ağaça eklenir. Painting: Son aşamada ise bu Render Ağacı elemanlarının ekrana çizilmesi ve boyanması işlemi gerçekleştirilir. Burada elemanların çizilme öncelikleri, transparency gibi kavramlar devreye girer.

Şekil 3.29. Render Motoru Çalışma Mantığı 3. Parsing DOM Oluşturulması Browser Process → Renderer Process’e IPC ile Navigasyon Commit mesajı gönderdiğinde Renderer Process Main Thread bu HTML’i Parse etmeye başlar. En sonunda sayfa için DOM (Document Object Modeli) ortaya çıkarır. JS ile DOM API üzerinden bu model ile iletişim kurup, bu modelde istenen değişiklikleri gerçekleştirebilirsiniz.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 81 / 299

Web Programlama 1

18.06.2021 04:31

HTML dokümanından DOM oluşturma HTML Standard belirtildiği gibi gerçekleştirilir. Tarayıcılar bu standartlara göre DOM Tree oluşturur ama burada herhangi bir hata olması durumunda tarayıcılar hata vermez bunun nedeni HTML Spec’in bu hataları iyi bir şekilde ele almak için tasarlanmış olmasıdır. (An introduction to error handling and strange cases in the parser) HTML dökümanın içerisinde ayrıca farklı kaynaklarda bulunan JS, CSS, Image, Video vb.. dosyalar bulunur. Main Thread bir yandan HTML’i parse ederken bir yandan da diğer kaynakların Network veya Cache yüklenmesi için ilgili Process çağırır. Tüm bu işlemler performans için async ve olabildiğince paralel bir şekilde gerçekleştirilmeye çalışılır. JS Updates HTML parser etiketleri arasına yazılabilir.

Bu yapı html sayfasında ihtiyaca göre body etiketleri arasına veya head etiketleri arasına eklenebilir.

Yukarıdaki örnekteki gibi yazılan javascript komutları sayfa yüklendiğinde çalışacaktır. Genellikle javascript komutlarının bir olaya bağlı olarak çalıştırılması istenir. Bu durumda komutlar bir fonksiyon içerisine yazılır. Fonksiyon içerisindeki komutlar sayfa yüklendiğinde kullanıma hazır olacaktır. Ancak sadece bir olaya bağlı olarak fonksiyon çağırıldığında çalışacaktır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 276 / 299

Web Programlama 1

18.06.2021 04:31

Harici bir JavaScript Dosyası Kullanımı Javascript komutları harici bir dosyaya yazılarak, bu dosyanın html içerisine dahil edilmesi yolu ile de kullanılabilir. Javascript komutları ayrı bir dosyaya yazılarak, aynı kodların farklı html sayfalarından kolayca kullanılabilmesi sağlandığı gibi gereksiz kod tekrarları da engellenmiş olur. Ayrıca html kodları ile javascript kodlarının aynı dosya içinde olmasının doğuracağı kod karmaşasının da önüne geçilmiş olur. Komutlar harici bir dosyaya yazılırken satırını sayfamızda istediğimiz bir alan içerisinde (head, body) ekleyebiliriz.

14.3. Javascript Temel Yazım Kuralları JavaScript kodlarının yazımı için gerekli en temel kurallar şu şekilde sıralanır: etiketi derleyiciye, içinde yazılı olan kodun bir betik kodu olduğunu bildirir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 277 / 299

Web Programlama 1

//

ve

18.06.2021 04:31

sembolleri koda yorum yazmak için kullanılır.

document: Belirtilen pencerede gösterilecek HTML belgesini temsil eder. JavaScript komut satırı sonunda, bir noktalı virgül (;) sembolü bulunur. var: Diğer dillerde olduğu gibi, JavaScript'te de değişkenler mevcuttur. Değişkenler var anahtar sözcüğü ile tanımlanır ve farklı tipte olabilirler.

14.4. Değişkenler JavaScript’te değişkenler var, let ve const anahtar kelimeleri ile tanımlanabilir.

14.5. Fonksiyonlar Fonksiyon tanımlamak için aşağıdaki gibi function anahtar kelimesini kullanabiliriz.

14.6. Javascript Operatörleri https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 278 / 299

Web Programlama 1

18.06.2021 04:31

JavaScript'te, +, -, *, /, & gibi operatörler diğer dillerle benzer anlamlar taşır. Matematiksel operatörler

Atama operatörleri

String operatörleri + operatörüyle bir string ve bir sayıyı kullanılırsa, sonuç bir string olur ve stringle sayının yanyana getirilmiş hâli üretilir.

Karşılaştırma operatörleri

Mantıksal operatörler

Koşul operatörü

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 279 / 299

Web Programlama 1

18.06.2021 04:31

Bu örnekte a ? "a true" : "a false" ifadesi, a'nın tuttuğu değer true ise a true değerini a'nın tuttuğu değer false ise a false değerini tutar. Operatör öncelikleri Öncelik

Operatör tipi

İşleme yönü

Operatör(ler)

1

üye elemanlara erişme

soldan sağa

. []

nesne oluşturma

sağdan sola

new

2

fonksiyon çağrısı

soldan sağa

()

3

bir arttırma

mümkün değil

++

bir azaltma

mümkün değil

--

mantıksal değil

sağdan sola

!

bitsel değil

sağdan sola

~

tek operandlı +

sağdan sola

+

işaret değiştirme

sağdan sola

-

typeof

sağdan sola

typeof

void

sağdan sola

void

delete

sağdan sola

delete

çarpma

soldan sağa

*

bölme

soldan sağa

/

mod alma

soldan sağa

%

toplama

soldan sağa

+

4

5

6

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 280 / 299

Web Programlama 1

7

18.06.2021 04:31

çıkarma

soldan sağa

-

bitsel kaydırma

soldan sağa

> >>>

8

büyüklük-küçüklük karşılaştırması

soldan sağa


=

9

İn

soldan sağa

in

instanceof

soldan sağa

instanceof

eşitlik karşılaştırması

soldan sağa

== != === !==

10

bitsel ve

soldan sağa

&

11

bitsel xor

soldan sağa

^

12

bitsel veya

soldan sağa

|

13

mantıksal ve

soldan sağa

&&

14

mantıksal veya

soldan sağa

||

15

koşul

sağdan sola

?:

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 281 / 299

Web Programlama 1

16

18.06.2021 04:31

atama

sağdan sola

= += -= *= /= %= = >>>= &= ^= |=

17

virgül

soldan sağa

,

14.7. Javascript'te Koşullar Koşullar birer karar yapılarıdır. Şarta bağlı bir komutu yerine getirmek istiyorsak koşul ifadelerini kullanmalıyız. Ayrıca unutmayın ki koşul ifadeleri boolean tipi verilerde çalışır. Yani bir ifade ya doğrudur ya da yanlıştır mantığı ile komutları yerine getirirler. if - else Koşulu If yanına yazılan koşulu kontrol eder eğer koşul gerçekleşiyorsa { } içindeki kod satırları işletilir. Aksi taktirde işletilmez daha sonraki komut satırlarından devam edilir. If deyimi else ile birlikte kullanıldığında verilen koşul gerçekleştiğinde onun yanındaki { } içindeki kod satırları işletilirken, koşul gerçekleşmiyorsa else terimi yanındaki { } içindeki kod satırları işletilir. https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 282 / 299

Web Programlama 1

18.06.2021 04:31

Örnek Uygulama 1:

Örnek Uygulama 2:

else if Koşulu if else koşulu ile aynıdır. Tek farkı birden fazla false durumunda çalışacak koşulların eklenebilmesidir.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 283 / 299

Web Programlama 1

18.06.2021 04:31

switch Koşulu else if ile çok benzer olmasına rağmen aralarında iki önemli fark vardır. switch koşulunda sınırlamalar bellidir. Örneğin; ha"anın yedi gününden birini seçmek istiyorsak switch koşulu kullanmalıyız. İkinci fark ise switch koşulu, else if koşulundan daha hızlı tepki verir. switch koşulu içerisine yazılan herhangi bir koşul sağlandığında break deyimi ile çıktı alınırken else if'te tüm koşullar okunmaktadır. İçiçe if yapıları kodun okunabilirliğini bozduğundan "Switch-Case" deyiminin kullanımı önerilir.

Örnek Uygulama 3:

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 284 / 299

Web Programlama 1

18.06.2021 04:31

ternary if Koşulu Bu koşul üçleme koşulu olarak da bilinir. jQuery'deki toggle'ın altyapısıdır. Aç - kapa, kapa - aç mantığı vardır. degişken == koşul ? değer1 : değer2 şeklinde basit bir algoratiması vardır. Şimdi bu algoritmayı basit bir örnek ile açıklayalım.

Burada kullanıcı bir sayı girer ve bu sayı 7'ye eşitse "Doğru", değilse "Yanlış" yazan bir uyarı penceresi açılmaktadır.

14.8. Javascript'te Döngüler Bir komut bloğunu birden çok kez çalıştırmak için kullanılan ve programlamanın olmazsa olmazı olan döngü yapıları javascript’te de vardır. Örneğin; ekranımıza 1'den 100'e kadar sayı yazdırmak istiyoruz. Bunun için yüz kere document.write(n) ifadesini yazmak yerine burada devreye döngüler girer.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 285 / 299

Web Programlama 1

18.06.2021 04:31

for Döngüsü En çok kullanılan döngüdür. Bir değişken için tanımladığımız koşul içindeki komutlar döngü tamamlanıncaya kadar çalışır. Aşağıdaki yazım kuralı ile kullanılır.

Örnek Uygulama 4:

while Döngüsü for döngüsü ile aynı işlemleri yapar. Birkaç küçük sözdizimi farkı vardır. Değişken döngüden önce tanımlanır. Parantez içerisine sadece koşul yazılır ve arttırma/azaltma işlemleri yazdırma işleminden sonra yapılır.

Örnek Uygulama 5:

do while Döngüsü while döngüsüne çok benzer. Tek farkı koşul doğru olsun ya da olmasın döngü içersindeki komutların en az bir defa çalıştırılmasıdır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 286 / 299

Web Programlama 1

18.06.2021 04:31

Örnek Uygulama 6:

break Deyimi Döngüyü durdurmayı, terk etmeyi sağlar. switch döngüsünde bunun nasıl kullanıldığından bahsedilmişti. if else, else if koşullarında da kullanılabilir. continue Deyimi Bir döngü içerisinde çalıştırılmasını istenmeyen kod satırları olduğunda kullanılır.

14.9. Javascript Fonksiyonları JavaScript fonksiyonlar üzerine kurulmuş bir dildir. Bir fonksiyon tanımlamak için kullanılan format aşağıdaki gibidir. Diğer dillerdeki fonksiyon kullanımına benzer şekilde function sözcüğünden sonra fonksiyonun adı verilerek fonksiyon tanımlaması yapılır. Bu ad kullanıcı tarafından belirlenir ancak fonksiyonun yaptığı işe uygun bir isim seçilmesi tavsiye edilir. Daha sonra parantez içinde parametre listesi belirtilir. Bunlar, fonksiyonu çağırırken gönderilecek değerlerdir. Fonksiyonun gövdesi ise { } sembolleri arasına yerleştirilen JavaScript komutlarından oluşur. Örnek Uygulama 7:

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 287 / 299

Web Programlama 1

18.06.2021 04:31

14.10. Javascript Olayları Kullanıcı ya da tarayıcı bir sayfa üzerinde işlem yaparken bazı olaylar (events) meydana gelir. Örneğin bir butona (button onclick) ya da fareye tıklanır (onmousedown). JavaScript'in, HTML ile karşılıklı etkileşimi bu olaylar sayesinde olur. Örnek Uygulama 8:

14.11. Javascript Kullanarak Bir Sınıf Değerine Erişmek JavaScript'te, belirli bir HTML elemanına erişmek için, elemanın tek bir "id" değeri olmalıdır. JavaScript'in getElementById() fonksiyonunu kullanarak, belirlenmiş bir eleman çağırılabilir. Bu metoda elemanın "id" değeri parametre olarak gönderilir. Örnek Uygulama 9:

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 288 / 299

Web Programlama 1

18.06.2021 04:31

Örnek Uygulama 10: JavaScript ile Button’a basıldığında kullanıcının text kutusuna girmiş olduğu sayıya göre 1’ den bu sayıya kadar olan sayıların toplamını hesaplayarak belirlemiş olduğumuz div içerisinde gösteren örnek uygulama. Örnekte InnerHTML kullanımı, Fonksiyon kullanımı, div içine yazdırma ve css ile div etiketinin biçimlendirilmesi işlemleri kullanılmıştır.

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 289 / 299

Web Programlama 1

18.06.2021 04:31

Örnek Uygulama 10: JavaScript ile Kayan Yazı Örneği

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 290 / 299

Web Programlama 1

18.06.2021 04:31

Örnek Uygulama 11: JavaScript ile Dört İşlem Uygulaması

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 291 / 299

Web Programlama 1

18.06.2021 04:31

Bölüm Özeti

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 292 / 299

Web Programlama 1

18.06.2021 04:31

Web sayfalarındaki dinamik yapıyı geliştirebilmek için en yaygın tercih edilen betik dil JavaScript’tir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler gerçekleştirilebilmektedir. Javascript’in de diğer dillerde olduğu gibi kendine özgü bir yazım kuralı vardır. Ayrıca bazı değerleri saklamak ve işlemek için değişken tanımlama ve operatör kullanımı yapıları da mevcuttur. Temel yazım kuralı açısından C dilinden esinlenilmiş olan Javascript dili yine C gibi fonksiyonel dil yapısına sahiptir. Javascript diliyle yazılan fonksiyonlar web sayfasındaki nesnelerin belirtilen olayları ile tetiklenerek çağırılır ve ilgili kod satırlarının işletilmesi sağlanır. Kaynakça 1. Erkan Kabil , “Modern Frontend - Sıfırdan ileri Seviye Web Tasarımı”, Kodlab Yayın Dağıtım, 2021 2. Fahrettin Erdinç

, “Yeni Başlayanlar İçin HTML5, CSS3 JAVASCRIPT A ’dan Z’ye Web

Programlama”,Abaküs Kitap, 2020 3. Tahsin Berk Ceylan , “Yeni Başlayanlar İçin Web Tasarım Kılavuzu”, Kodlab Yayın Dağıtım, 2020 4. Jon Duckett, “HTML ve CSS Web Siteleri Tasarlamak ve Oluşturmak”, Nobel Yaşam, 2019, ISBN : 9786059746267 5. Emin Borandağ, Fatih Yücalar, Ruken Kaya, Betül Kıral, “Web Programlamanın Temelleri”, Gece Akademi, 2018 6. Erol Mesut Gün, “Her Yönüyle HTML”, Kodlab Yayın Dağıtım, 2017 7. Gün, M. E., "Her Yönüyle HTML 5", Kodlab (2017), ISBN : 9786059118866 8. Peter Weverka, “The Everyday Internet All-in-One Desk Reference for Dummies”, 2005, ISBN-10: 0764588753 9. Burak TOKAK, “HTML5, CSS3 ve JavaScript ile Web Tasırımı”, Dikey Eksen Dağıtım, ISBN: 9786054898169 10. Mithat UYSAL, “ Web Teknolojileri”, 2001, ISBN: 9789754864199 11. Molly E. Holzschlag , “HTML 4 Web Tasarimi”, Sistem Yayıncılık, 2000 12. https://tr.wikipedia.org/wiki/JavaScript https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 293 / 299

Web Programlama 1

18.06.2021 04:31

Erişim Tarihi : 28.02.2021 13. https://tr.wikibooks.org/wiki/JavaScript/Operat%C3%B6rler Erişim Tarihi : 28.02.2021 14. http://zinzinzibidi.com/web_tasarim/jquery/javascriptte_kosullar_ve_donguler Erişim Tarihi: 11.03.2021

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 294 / 299

Web Programlama 1

18.06.2021 04:31

Ünite Soruları

1. JavaScript hangi kod blokları arasına yazılır? A)

B)

C)

D)

E)

2. JavaScript kodları hangi etiket bloğuna yazılır? A) yalnızca ... bloğuna

B) İsteğe göre ya da bloğuna

C) yalnızca ... bloğuna

D) yalnızca ... bloğuna

E) yalnızca ... bloğuna

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 295 / 299

Web Programlama 1

18.06.2021 04:31

3. harici.js javascript dosyasını html dosyadan erişilebilir kılmak için doğru yol nedir? A)

B)

C)

D)

E)

4. “Merhaba Dünyalı” mesajını mesajbox’da görüntülemek için hangisi yazılır ? A) msg(“Merhaba Dünyalı”);

B) msgBox(“Merhaba Dünyalı”);

C) alert(“Merhaba Dünyalı”);

D) alertBox(“Merhaba Dünyalı”);

E) msg = Merhaba Dünyalı;

5. Hangi if satırı 5’e eşit değilse’nin kontrolünü yapar? A) if (i 5)

https://cdn-ac"kogret"m."stanbul.edu.tr/auzefcontent/20_21_Bahar/web_programlama_1/1/"ndex.html

Sayfa 296 / 299

Web Programlama 1

18.06.2021 04:31

B) if (i != 5) then

C) if i =! 5 then

D) if i 5

E) if (i != 5)

6. Birden fazla satırlı açıklama satırı nasıl eklenir? A)

B) *This comment has more than one line*/

C) This comment has more than one line//

D) This comment has more than one line–

E)