Web Arayüz Programlama - Bilgisayar Programcılığı

Ünite 1

Soru 1

Bilgisayarları birbirine bağlamak amacıyla kurulan bilgisayar ağlarının temelinde 1960’larda Amerika Birleşik Devletleri Savunma Bakanlığı tarafından çalışmalarına başlanan .............. vardır.
Yukarıdaki boşluğa getirilmesi gereken kavram aşağıdakilerden hangisidir?

İNTRANET

WEB

HTML

CSS

ARPANET

Açıklama:

Bilgisayarları birbirine bağlamak amacıyla kurulan bilgisayar ağlarının temelinde 1960’larda Amerika Birleşik Devletleri Savunma Bakanlığı tarafından çalışmalarına başlanan ARPANET vardır. İnternet,
ARPANET üzerine inşa edilen yapılarla geliştirilmiştir. Bu yapıların en önemlilerinden olan HTML ile
internetin yaygınlaşması hızlanmıştır.

Doğru Cevap: E

Soru 2

Harici bir stil dosyasının HTML sayfasına dahil edilebilir olduğu HTML sürümü hangisidir ?

HTML 1.0

HTML 2.0

HTML 3.2

HTML 4.01

HTML5

Açıklama:

1999 yılında ise bir sonraki sürüm olan HTML 4.01 duyuruldu. Bu sürümde CSS desteği geliştirildi.
CSS, HTML 3.2 sürümünde sayfanın içerisine yerleştirilebiliyordu. Bu nedenle sürekli tekrar etmek gerekiyordu. HTML 4.01 ile harici bir stil dosyası HTML sayfaya dahil edilebilir oldu.

Doğru Cevap: D

Soru 3

2008 yılında genel kullanıma açılan ve 2014 yılından itibaren W3C Önerisi (W3C Recommendation) ile geliştiriciler için kullanılabilen HTML sürümü aşağıdakilerden hangisidir?

HTML 1

HTML 2

HTML 3.2

HTML 4.01

HTML 5

Açıklama:

HTML5 ilk olarak 22 Ocak 2008'de halka açık bir biçimde yayılnadı ve sonrasında büyük bir güncellemeyle ve Ekim 2014'te "W3C Önerisi" (W3C Recommendation) statüsüyle yayınlandı. Geliştiriciler için 2014 yılından itibaren kullanılabilen bu sürüm önceki sürümler gibi birçok yeni etiketle birlikte geldi. Bu etiketlerin yanında farklı türdeki girdi öge tipleri de bu sürümde duyuruldu. Bu sayede oluşturulan HTML sayfanın form elemanı istenilen girdi değerine göre etiket ve tip ile birlikte işaretlenip kullanıcı bu türde veri girmeye zorlanabilir oldu.

Doğru Cevap: E

Soru 4

HTML 5 sürümünde HTML sayfasındaki belirli bir bölümü anlamlandırmak için kullanılan etiket hangisidir ?

E-mail

Password

Audio etiketi

Semantik (anlamsal) etiketler

Section etiketi

Açıklama:

section etiketi: HTML sayfasındaki belirli bir bölümü anlamlandırmak için bu etiket kullanılabilir.
Üstbilgi, altbilgi gibi bölümler olabilir.

Doğru Cevap: E

Soru 5

HTML dosyalarında, dosyanın içeriği, yazarı gibi genel bilgilerin olduğu kısmın adı nedir ?

head

title

body

html

div

Açıklama:

HTML dosyaları iki ana kısımdan oluşur.
Bunlar dosyanın içeriği, yazarı gibi genel bilgilerin olduğu ve ekranda gösterilen tüm ögelerin
bulunduğu kısımlarıdır.

Doğru Cevap: A

Soru 6

Gerekli olduğu durumlarda önceki versiyona dönebilmeye imkân sağlayan sistemin adı aşağıdakilerden hangisidir?

Geliştirme Ortamı

Visual Studio Cod

Version Control System

Integrated Development Environment

Doküman Nesne Modeli

Açıklama:

Yazılım projelerinde genelde farklı kişiler veya ekipler aynı proje üzerinde çalışmaktadır. Versiyon Kontrol Sistemi (VCS/ Version Control System) farklı kişiler tarafından geliştirilen dosyaların versiyonlamasını
yaparak kişiler ve ekipler arasında senkronizasyonu mümkün kılar. Bu programlar sayesinde düzenleme,
silme, ekleme, kopyalama gibi işlemler kayıt altına alınıp takip edilebilir. Gerekli olduğu durumlarda önceki versiyona dönebilmeye imkân sağlar

Doğru Cevap: C

Soru 7

Metin seslendirme algoritmalarında içindeki kelime bloğunun farklı ses tonuyla okunmasını sağlayan etiket hangisidir ?

< del > < /de l>

< ins > < /ins >

Açıklama:

etiketi italik gibi metni vurgular, aynı zamanda metin seslendirme algoritmalarında içindeki kelime bloğunun farklı ses tonuyla okunmasını sağlar.

Doğru Cevap: A

Soru 8

Dosyalar arasında geçiş yaparken kullanılan etiketin içerisinde hangi özellik ile gidilecek sayfanın url adresi belirtilir?

href

target

target="_self

target="_blank"

title="

Açıklama:

Bu etiketin içerisindeki href özelliği ile gidilecek sayfanın konumu belirtilir. Gidilecek sayfa kendi projenizde oluşturduğunuz sayfalardan olabileceği gibi internet üzerindeki başka bir sayfada olabilir

Doğru Cevap: A

Soru 9

Ofis programlarında hazırlanan tablolara benzer yapıda tabloları HTML sayfalarında da hazırlamak için hangi etiket kullanılır ?

Açıklama:

Ofis programlarında hazırlanan tablolara benzer yapıda tabloları HTML sayfalarında da hazırlamamız gerekebilir. Bunun için etiketi bu amaçla hazırlanmıştır.

Doğru Cevap: A

Soru 10

Berners-Lee’nin World Wide Web ağını anlatan siteyi dışarıdan insanların kullanımına açmasıyla bugün kullanılan web sayfalarının ilk örneği hangi yıl hayata geçmiştir ?

1960

1980

1990

1991

2000

Açıklama:

6 Ağustos 1991 yılına gelindiğinde, Berners-Lee’nin World Wide Web ağını anlatan bu siteyi dışarıdan insanların kullanımına açmasıyla bugün kullanılan web sayfalarının ilk örneği hayata geçmiş oldu.

Doğru Cevap: D

Soru 11

I. HTML bir programlama dilidir.
II. URL web sayfalarınının paylaşıldığı sunucu adreslerini tanımlar.
III.Dünya Çapında Ağ anlamına gelen World Wide Web yani kısaca WWW, belge ve diğer bilgilerin URL tarafından tanımlandığı bir sistemdir.
IV. Etiketler yardımıyla HTML içeriği anlamlandırılır.
Yukarıda verilen maddelerden hangileri doğrudur?

I ve II

II ve III

I, II ve III

II, III ve IV

I, III ve IV

Açıklama:

HTML bir programlama dili değildir. Adında da belirtildiği şekilde işaretleme (markup) dilidir. URL web sayfalarınının paylaşıldığı sunucu adreslerini tanımlar.Dünya Çapında Ağ anlamına gelen World Wide Web yani kısaca WWW, belge ve diğer bilgilerin URL tarafından tanımlandığı bir sistemdir.Etiketler yardımıyla HTML içeriği anlamlandırılır.
HTML bir programlama dili değildir. Adında da belirtildiği şekilde işaretleme (markup) dilidir. Bu nedenle I. maddesi yanlıştır. Bunun dışında kalan maddelerde yer verilen bilgilerin tamamı doğrudur. URL web sayfalarınının paylaşıldığı sunucu adreslerini tanımlar.Dünya Çapında Ağ anlamına gelen World Wide Web yani kısaca WWW, belge ve diğer bilgilerin URL tarafından tanımlandığı bir sistemdir.Etiketler yardımıyla HTML içeriği anlamlandırılır.

Doğru Cevap: D

Soru 12

Başlık komponenti için kullanılan header etiketi hangi etiket sınıflandırmasına dahil edilmektedir?

Password

Audio etiketi

Semantik (anlamsal) etiketler

Section etiketi

Açıklama:

Anlamsal şeklinde Türkçeye çevrilebilen “semantik” etiketler yapısal etiketler olarakta bilinir. Bu etiketler sayesinde oluşturulan komponentler birleştirilerek anlamlı HTML sayfalar tasarlanabilir. Örneğin başlık komponenti için

etiketi kullanılarak bununla alakalı tüm kodlar bu etiketin altında toplanabilir.

başlık komponenti için kullanılan header etiketi web sayfasının yapısı ile ilgili bir etikettir. Anlamsal şeklinde Türkçeye çevrilebilen “semantik” etiketler yapısal etiketler olarakta bilinmektedir. Bu nedenle doğru cevap D seçeneğidir.

Doğru Cevap: D

Soru 13

Chrome tarayıcısında geliştirici araçlarını açmak için sayfa üzerinde mouse ile ..... tıkladıktan sonra “İncele” butonuna basabilir veya klavye üzerinden ..... tuşuna basabilirsiniz.
Yukarıda verilen ifadede boşluklara sırasıyla aşağıda verilenlerden hangileri gelmelidir?

Sağ- F10

Sağ- F11

Sağ-F12

Sol-F12

Sol-F10

Açıklama:

Chrome tarayıcısında geliştirici araçlarını açmak için sayfa üzerinde mouse ile sağ tıkladıktan sonra
“İncele” butonuna basabilir veya klavye üzerinden “F12” tuşuna basabilirsiniz. Bu nedenle C seçeneği doğru cevaptır.

Doğru Cevap: C

Soru 14

Kodun yazıldığı dile göre kodu renklendiren, tamamlayan, şekil kontrolü yaparak kodu vurgulayan, hata ayıklaması yaparak programcıya uyarı veren, veri tabanı bağlantısı, versiyon kontrol sistemleri entegrasyonu gibi çeşitli ortamlarla entegrasyonu sağlayan araçları içinde barındıran yazılım türüdür.
Yukarıda tanımı açıklanan program geliştirme aşamasında programcıya yardım için birden çok amaca hizmet sunan yazılım türü aşağıda verilenlerden hangisidir?

IDE (Integrated Development Environment)

VCS (Version Control System)

HTML etiketleri

HTTP (Hyper Text Transfer Protocol)

W3C (World Wide Web Consortium)

Açıklama:

IDE, kodun yazıldığı dile göre kodu renklendiren, tamamlayan, şekil kontrolü yaparak kodu vurgulayan, hata ayıklaması yaparak programcıya uyarı veren, veri tabanı bağlantısı, versiyon kontrol sistemleri entegrasyonu gibi çeşitli ortamlarla entegrasyonu sağlayan araçları içinde barındıran yazılım türüdür.Program geliştirme aşamasında programcıya yardım için birden çok amaca hizmet eden IDE (Integrated Development Environment) programları vardır. Diğer dillerde olduğu gibi Web Programlama için de geliştirilmiş IDE’ler bulunmaktadır.
IDE, kodun yazıldığı dile göre kodu renklendiren, tamamlayan, şekil kontrolü yaparak kodu vurgulayan, hata ayıklaması yaparak programcıya uyarı veren, veri tabanı bağlantısı, versiyon kontrol sistemleri entegrasyonu gibi çeşitli ortamlarla entegrasyonu sağlayan araçları içinde barındıran yazılım türüdür.Bu nedenle doğru cevap A seçeneğidir.

Doğru Cevap: A

Soru 15

Aşağıda verilenlerden hangisi Versiyon Kontrol Sisteminin (VCS/ Version Control System) sağladığı faydalardan biridir?

Kod geliştirme ile aynı ortamda veri tabanı bağlantısı yapabilmesi

Kodlarda hata ayıklaması yaparak programcıya uyarı vermesi

Kodun yazıldığı dile göre kodu renklendirebilmesi

Farklı kişiler tarafından geliştirilen dosyaların versiyonlamasını yapması

Kodların nasıl göründüğünü kullanıcı gözünden takip edebilmesi

Açıklama:

Versiyon Kontrol Sistemi (VCS/ Version Control System) farklı kişiler tarafından geliştirilen dosyaların versiyonlamasını yaparak kişiler ve ekipler arasında senkronizasyonu mümkün kılar. Bu programlar sayesinde düzenleme, silme, ekleme, kopyalama gibi işlemler kayıt altına alınıp takip edilebilir. Gerekli olduğu durumlarda önceki versiyona dönebilmeye imkân sağlar.Bu nedenle D seçeneği doğrudur.

Doğru Cevap: D

Soru 16

HTML sayfalarda bulunan metinlerin başlıklarını belirtmek için “Başlık Etiketleri” olarak adlandırılan özel tanımlamalar vardır. Bir web sayfasında metnin başına "Web Arayüz Programlama" yazabilmek için kullanılması gereken kod aşağıda verilenlerden hangisidir?

Açıklama:

Bir web sayfasında metnin başına "Web Arayüz Proglama" yazabilmek için kullanılması gereken kod aşağıdaki gibi olması gerekmektedir.

Bir web sayfasında metnin başına "Web Arayüz Programlama" yazabilmek için kullanılması gereken kod "

"dir. Bu nedenle A seçeneği doğrudur.

Doğru Cevap: A

Soru 17

Aşağıdakilerden hangisinde “Web Arayüz Programlama” ifadesini kalın olarak göstermek için HTML sayfasına yazılması gereken kod doğru verilmiştir?

Açıklama:

Oluşturduğunuz metinde bazı kelime veya cümleleri işaretleyebilir, farklı boyut ve renklerde yazabilirsiniz. Örneğin metin içerisinde kalın göstermek istediğiniz kelime bloğunu

etiketi içerisinde yazabilirsiniz.
Oluşturduğunuz metinde bazı kelime veya cümleleri işaretleyebilir, farklı boyut ve renklerde yazabilirsiniz. Örneğin metin içerisinde kalın göstermek istediğiniz kelime bloğunu

etiketi içerisinde yazabilirsiniz. Bu nedenle A seçeneği doğru cevaptır.

Doğru Cevap: A

Soru 18

I.Etiketler
II. Linkler
III. Resimler
Yukarıda görülen listeyi oluşturabilmek için kullanılması gereken kod aşağıdakilerden hangisinde doğru verilmiştir?

Açıklama:

Doğru Cevap: A

Soru 19

Web sayfasında bir haber sitesini sayfanın bir köşesinde göstermek istediğinizde kullanılması gereken kod etiketi aşağıdakilerin hangisinde doğru verilmiştir?

Açıklama:

Web sayfalarınızda bazen farklı sayfaları bir çerçeve içerisinde göstermek isteyebilirsiniz. Örneğin bir
youtube videosu veya bir haber sitesini sayfanızın bir köşesinde göstermek istediğinizde

kod etiketinin kullanılması gerekmektedir. Bu nedenle doğru cevap E seçeneğidir.

Doğru Cevap: E

Soru 20

HTML sayfalarında tablo oluşturmak için başlık kısmında
kullanıldıktan sonra içerisine bir etiketi alır ve bu etiket içerisine hücre başlıkları ..... ile eklenir. Yukarıdaki ifadede boş bırakılan yere aşağıdaki kod etiketlerinden hangisi gelmelidir?

Açıklama:

Başlık kısmında kullanıldıktan sonra içerisine bir etiketi alır ve bu etiket içerisine hücre başlıkları ile eklenir.
Başlık kısmında
kullanıldıktan sonra içerisine bir etiketi alır ve bu etiket içerisine hücre başlıkları ile eklenir. Bu nedenle C seçeneği doğrudur.

Doğru Cevap: C

Soru 21

Başlık kısmında kullanıldıktan sonra içerisine bir etiketi alır ve bu etiket içerisine hücre başlıkları ..... ile eklenir.
Yukarıda yer verilen ifadede boş bırakılan yere aşağıda verilen kodlardan hangisi gelmelidir?

Açıklama:

Başlık kısmında kullanıldıktan sonra içerisine bir etiketi alır ve bu etiket içerisine hücre başlıkları ile eklenir. bu nedenle C seçeneği doğrudur.

Doğru Cevap: C

Soru 22

Yukarıdaki ifadedeki boşluğa aşağıda verilenler hangisi gelmelidir?

Açıklama:

Bu nedenle doğru cevap C seçeneğidir.

Doğru Cevap: C

Soru 23

Açıklama:

Doğru Cevap: C

Ünite 2

Soru 1

Aşağıdakilerden hangisi HTML'nin özelliklerindendir?

İşletim sistemi yazım dilidir.

Web sayfaları HTML yapısı kullanılarak tasarlanır.

Stil şablonlarını kodlamak için yazılmış bir dildir.

Standartları CSS topluluğu tarafından belirlenmiştir.

Web sayfalarına renk, düzen ve tasarım eklenmesine ve stilleri ögeden öğeye paylaşmaya olanak tanır.

Açıklama:

Web sayfaları HTML yapısı kullanılarak tasarlansa da modern sayfalarda gördüğümüz görsel tasarım
için stil şablonlarının kullanılması gerekmektedir.

Doğru Cevap: B

Soru 2

h1 {
color red;
font-size: 25px;
}
Yukarıdaki kod ile aynı işleve sahip olan seçenek hangisidir ?

h1 {color: red; font-size: 25px;}

h1 { color: red: font-size: 25px. }

h1 {color, red, font-size, 25px.}

h1 {color; red; font-size; 25px.}

h1 {color red : font-size 25px.}

Açıklama:

Tanımlanan içeriklerin hepsi ; ile sonlandırılmalıdır.
Yukarıda gördüğünüz kod bloğunun tamamı tek bir satırda da yazılabilir ancak gözle okunması zor olacağı
için genelde her özellik ayrı bir satırda yazılır. Aşağıdaki kod bloğunda yazılan örnekte yukarıdaki ile aynı
işleve sahiptir.
h1 {color: red; font-size: 25px;}

Doğru Cevap: A

Soru 3

İndex.js dosyasının iskeleti ! işareti yazıldıktan sonra aşağıdaki hangi tuşa basarak oluşturulabilmektedir?

Tab

Shift

CTRL

ALT

Enter

Açıklama:

index.js dosyasının iskeletini ! işareti yazdıktan sonra tab tuşuna
basarak oluşturabilirsiniz

Doğru Cevap: A

Soru 4

Internal (Dâhilî) yöntem ile oluşturulan CSS dosyalarının harici olarak oluşturulan CSS dosyalarına göre avantajı aşağıdaki hangi seçenekte doğru olarak verilmiştir?

Farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir.

Aynı özellikleri taşıyan web sayfalarındaki elemanların her birinde değişiklik yaparken, yaptığınız değişiklik tüm sayfalarda etkili olur.

Bu yöntemde farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir.

Ayrı bir css dosyası ile ilgilenmeniz gerekmez. Küçük ve tek sayfalık projelerde kullanılabilir.

Büyük projelerde tanımladığınız CSS dosyalarını çağırabilirsiniz.

Açıklama:

Bu yöntemin External CSS yönteminden avantajı ayrı bir css dosyası ile ilgilenmeniz gerekmez. Küçük ve tek sayfalık projelerde kullanılabilir.

Doğru Cevap: D

Soru 5

Aşağıdakilerden hangisi CSS yazım yöntemlerinden biri değildir ?

Inline

Internal

External

Satır İçi

Satır dışı

Açıklama:

İlk örnekte uyguladığımız yöntem External (Harici) CSS olarak adlandırılır. Diğer bir yöntem ise Internal (Dâhilî) CSS olarak adlandırılan, CSS kodlarının web sayfasının kısmına "style" etiketi içerisine yazıldığı yöntemdir. Son CSS yazım yöntemi ise Inline (Satır İçi) CSS olarak adlandırılan yöntemdir.

Doğru Cevap: E

Soru 6

Aşağıdakilerden hangisi CSS’de yerleşim yaparken kullanılan modelin adıdır ?

Kutu.

Seçiciler.

Basamak Yapısı.

Margin.

Border.

Açıklama:

Kutu Modeli kavramı CSS’de yerleşim yaparken kullanılır

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi kutu modelinde içeriği saran katmanlardan biridir ?

Border.

Content.

Attribute.

Background.

Display.

Açıklama:

Görüleceği gibi içeriği saran 3 farklı katman var diyebiliriz. Kutu modelimizin büyüklüğü içerik ve bu 3 katmanın büyüklüğüdür.
Border
Kutu modelinde sınırları ifade eden bu özellik gerektiğinde kutunun etrafında çizgi çizmek içinde kullanılır.

Doğru Cevap: A

Soru 8

Aşağıdakilerden hangisi 5 temel seçiciden biri değildir ?

Etiket Seçici.

Class Seçici.

Id Seçici.

Attribute (Özellik) Seçici.

Grup Seçici.

Açıklama:

Aşağıdaki listede 5 temel seçici verilmiştir.
1. * Seçicisi
2. Etiket Seçici
3. Class Seçici
4. Id Seçici
5. Attribute (Özellik) Seçici

Doğru Cevap: E

Soru 9

Aşağıdakilerden hangisi Overflow özelliği ile birlikte kullanılan değerlerden biri değildir ?

Visible.

Hidden.

Scroll.

Auto.

Manuel.

Açıklama:

Overflow özelliği, içeriğin belirli bir alana veya ekrana sığmadığı durumlarda fazla içerik için ne yapılması gerektiğini bildirmek için kullanılır. Aşağıdaki değerler ile kullanılır:
• visible
• hidden
• scroll
• auto

Doğru Cevap: E

Soru 10

CSS, ögeleri sayfa üzerinde konumlandırırken hangi özelliği kullanmaktadır ?

Display.

Position.

Z-İndex.

Overflow.

Margin.

Açıklama:

CSS, ögeleri sayfa üzerinde konumlandırırken position özelliğini kullanır.

Doğru Cevap: B

Soru 11

I.Türkçesi Basamaklı Stil Şablonudur.
II. Günümüzde CSS15 olarak adlandırılan versiyonu kullanılmaktadır.
III. Kural tabanlı bir dildir.
IV. HTML dokümanı içerisinde yazılabildiği gibi HTML’den ayrı dosyada da yazılabilir.
CSS ile ilgili yukarıda verilen bilgilerden hangileri doğrudur?

I ve II

I ve III

II ve III

I, III ve IV

I, II ve IV

Açıklama:

HTML standartlarını belirleyen W3C topluluğu 1996 yılında Türkçesi Basamaklı Stil Şablonu olan ve
CSS (Cascade Style Sheets) olarak bilinen yapıyı duyurdu.CSS kural tabanlı bir dildir.Zamanla gelişen CSS’nin, günümüzde CSS3 olarak adlandırılan versiyonu kullanılmaktadır. CSS, HTML dokümanı içerisinde yazılabildiği gibi HTML’den ayrı dosyada da yazılabilir. Bu nedenle D seçeneği doğrudur.

Doğru Cevap: D

Soru 12

CSS Yazım Yöntemleri ile ilgili aşağıda verilenlerden hangisi doğru değildir?

External CSS'de farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir.

Internal CSS'de ayrı bir css dosyası ile ilgilenmeniz gerekmez.

Inline CSS'de HTML etiketinin style özelliği içerisine doğrudan CSS kodu yazılabilir.

Büyük projelerde External CSS kullanmanın avantajları oldukça fazladır.

Küçük ve tek sayfalık projelerde External CSS kullanmak daha avantajlıdır.

Açıklama:

External (Harici) CSS yönteminde farklı bir dosyada oluşturulan CSS kodları web sayfasına dahil edilerek kullanılabilir.Internal CSS yönteminin External CSS yönteminden avantajı ayrı bir css dosyası ile ilgilenmeniz gerekmez. Küçük ve tek sayfalık projelerde kullanılabilir.Birbirine göre artıları olsada büyük projelerde External CSS kullanmanın avantajları oldukça fazladır.
Küçük ve tek sayfalık projelerde Internal CSS kullanmak daha avantajlıdır. Bu nedenle E seçeneğinde yer verilen ifade doğru değildir.

Doğru Cevap: E

Soru 13

Kutu modelinin en dış katmanıdır. HTML elemanlarının dışında boşluk oluşturmak için kullanılır.
Verilen pozitif değerler boşluğu büyütürken aynı zamanda negatif değerler vererek kutuların birbiri üstüne gelmesi de sağlanabilir.
Yukarıda özellikleri verilen terim aşağıdakilerin hangisinde doğru verilmiştir?

Margin

Border

Content

Padding

Seçiciler

Açıklama:

Margin kutu modelinin en dış katmanıdır. HTML elemanlarının dışında boşluk oluşturmak için kullanılır. Verilen pozitif değerler boşluğu büyütürken aynı zamanda negatif değerler vererek kutuların birbiri üstüne gelmesi de sağlanabilir. Bu nedenle cevap A seçeneğidir.

Doğru Cevap: A

Soru 14

I. "*" operatöründen sonra süslü parantezler içerisine kurallar yazılır.
II. Sınıf seçici en çok kullanılan seçici türüdür.
III. Belirli bir özelliği olan HTML elemanlarını stillendirmek için attribute seçici kullanılır.
IV. CSS dosyalarında sınıflara kurallar yazılırken noktalı virgül işareti ile başlamalıdır.
Yukarıda temel seçiciler ile ilgili olarak verilen özelliklerden hangileri doğrudur?

I ve II

II ve III

III ve IV

I, II ve III

II, III ve IV

Açıklama:

"*" operatöründen sonra süslü parantezler içerisine kurallar yazılır. Sınıf seçici en çok kullanılan seçici türüdür. Belirli bir özelliği olan HTML elemanlarını stillendirmek için attribute seçici kullanılır. Fakat CSS dosyalarında sınıflara kurallar yazılırken nokta işareti ile başlamalıdır. Bu nedenle sorunun cevabı D seçeneğidir.

Doğru Cevap: D

Soru 15

Sayfamızda bulunan linkleri ziyaret edildikten sonra farklı renk yapmak istersek hangi pseudo sınıfının kullanılması gerekir?

:visited

:hover

:active

:focus

:link

Açıklama:

Sayfamızda bulunan linkleri ziyaret edildikten sonra farklı renk yapmak istersek (:visited) pseudo sınıfını kullanabiliriz. Bu nedenle doğru cevap A seçeneğidir.

Doğru Cevap: A

Soru 16

Child seçici kullanılacak ise birleştirilecek seçiciler arasına hangi işaret konulmalıdır?

Açıklama:

Child seçici, belirtilen bir elemanın bir altında bulunan elemanları seçmek için kullanılır. Descendant
ilk seçicinin altındaki tüm seviyeden ikinci seçicileri alırken Child seçici bir alt seviyedeki seçicileri alır. Birleştirilecek seçiciler arasına ">" işareti konulur.

Doğru Cevap: C

Soru 17

Öncelik vermek istenilen özelliğe ilişkin olarak kullanacak basamakta hangi kelimeyi kullanmak kendisinden önceki özelliklerin ezilerek yeni özelliğin kullanılmasını sağlar?

!important

!alert

!stop

!significant

!urgent

Açıklama:

Öncelik vermek istediğiniz özelliğe !important anahtar kelimesini kullanarak öncelik
verebilirsiniz.Kod bloğunda !important kendisinden sonra gelen özellikler ezilerek yeni özelliğin aktif olması sağlanır.
Öncelik vermek istediğiniz özelliğe !important anahtar kelimesini kullanarak öncelik verebilirsiniz.Kod bloğunda !important kendisinden sonra gelen özellikler ezilerek yeni özelliğin aktif olması sağlanır. Bu nedenle doğru cevap A seçeneğidir.

Doğru Cevap: A

Soru 18

CSS'te bir rengi belirtmek için aşağıda verilen formatlardan hangisi kullanılmaz?

Hex Kod

Kısa Hex Kod

RGB

Anahtar Kelime

Rem

Açıklama:

CSS, bir rengi belirtmek için renk formatları olarak Hex Kod, Kısa Hex Kod, RGM ve Anahtar Kelime kullanılmaktadır. Bu nedenle E seçeneği doğru cevaptır.

Doğru Cevap: E

Soru 19

Bir görüntünün arka planda kaydırılmasını kontrol etmek için background ile ilgili kullanılması gereken CSS komutu aşağıdakilerin hangisinde doğru verilmiştir?

background-attachment

background-color

background-image

background-repeat

background-position

Açıklama:

Bir görüntünün arka planda kaydırılmasını kontrol etmek için background-attachment kullanılır.

Doğru Cevap: A

Soru 20

Aşağıda verilen kodlardan hangisi ögenin referans noktasına belirtilmedi ise body elemanını referans noktası olarak seçer?

static

absolute

relative

fixed

sticky

Açıklama:

Absolute kodu ögenin konumunu referans noktasına göre konumlandırır. Parent ögelerden birisi position:relative özelliği alıyorsa referans noktası olarak onu seçer. Referans noktası bulamazsa body elemanını seçer
Absolute kodu ögenin konumunu referans noktasına göre konumlandırır. Parent ögelerden birisi position:relative özelliği alıyorsa referans noktası olarak onu seçer. Referans belirtilmediyse body elemanını referans olarak seçer. Bu nedenle doğru cevap B seçeneğidir.

Doğru Cevap: B

Ünite 3

Soru 1

Değişkenler, uygulamadaki gereksiz görevleri azaltır.

Renk, yazı tipi ve boyutu için değişken oluşturulur.

Küçük projelerde değişken yazmak gereksizdir.

Yukarıda CSS değişkenleri ile ilgili verilen ifadelerden hangisi/hangileri doğrudur?

Yalnız I

Yalnız II

I-II

II-III

I-II-III

Açıklama:

"Değişkeler, uygulamadaki gereksiz görevleri azaltır." ve "Renk, yazı tipi ve boyutu için değişken oluşturulur." ifadeleri CSS değişkeleri ile ilgili verilen ifadelerdendir.
I-II

Doğru Cevap: C

Soru 2

Aşağıdakilerden hangisi sayfanın genişliğini ekran genişliğini takip edecek şekilde ayarlayan koddur?

html lang="tr"

meta charset="UTF-8"

div class="flex-container"

initial-scale=1.0

width=device-width

Açıklama:

"width=device-width" sayfanın genişliğini ekran genişliğini takip edecek şekilde ayarlar.

Doğru Cevap: E

Soru 3

Telefon ekran boyutu için medya sorgusu aralığı aşağıdakilerden hangisi seçilmelidir?

0px - 576px

600px - 768px

700px - 992px

900px - 1200px

1200px - 1400px

Açıklama:

Medya sorgusu ekran boyutu 600px’den büyük olduğunda yeni stil kurallarını uygulayacaktır.
Media Sorgularının Sınır Değerleri:
0px - 576px Telefonlar
576px - 768px Landscape Telefonlar
768px - 992px Tabletler
992px - 1200px Bilgisayarlar
1200px - 1400px Büyük ekranlı bilgisayarlar
1400px - ... Ekstra Büyük ekranlı cihazlar

Doğru Cevap: A

Soru 4

Aşağıdakilerden hangisi Bootstrap 5 sürümü ile kullanılan masaüstü ekran boyut türünün kısıtlama kodudur?

Açıklama:

Bootstrap 5 sürümü ile kullanılan masaüstü ekran boyut türünün kısıtlama kodu, lg dir.

Doğru Cevap: D

Soru 5

Aşağıdakilerden hangisi CSS'de tek boyutlu içerik yerleştirmek için tasarlanmış bir düzen modelidir?

Float

Flexbox

Grid

Viewport

Head

Açıklama:

Flexbox (esnek kutu modeli), tek boyutlu içerik yerleştirmek için tasarlanmış bir düzen modelidir.

Doğru Cevap: B

Soru 6

Aşağıdakilerden hangisi CSS'de flexbox özelliklerinden kapsayıcı için olanlardan biri değildir?

flex-direction

justify-content

align-items

flex-wrap

flex-grow

Açıklama:

flex-grow, CCS'de flexbox özelliklerinden kapsayıcı için olanlardan biri değildir.

Doğru Cevap: E

Soru 7

Aşağıdakilerden hangisi CCS ile yapılan bir stillendirme işleminde menü komponentinin stillendirilmesi için kullanılan kod bloğudur?

{
margin: 0;
padding: 0;
}

.menu {
grid-area: menu;
}

.active{
background-color: #dddddd;
color: #3a3535;
}

.content {
grid-area: content;
}

.card:hover {
box-shadow: 0 0 4px #515151;
}

Açıklama:

Menü komponentinin genişliğini, grid yapısı oluştururken belirtilmişti. Yan menüyü, grid yapısında “menu” alanına,
grid-area: menu; komutunu kullanarak yerleştirmemiz yeterli.
.menu {
grid-area: menu;
}

Doğru Cevap: B

Soru 8

I. Renk
II. Yazı tipi
III. Yazı boyutu
IV. Kutu genişliği
Yukarıdakilerden hangileri CSS kuralları yazılırken kullanılabilecek değerler arasında yer alır?

I-IV

I-II

III-IV

I-II-III

I-II-III-IV

Açıklama:

CSS DEĞİŞKENLERİ
Örnekte görüldüğü gibi tanımlanan iki tane değişken, CSS kuralları yazılırken kullanılabiliyor. Renk için oluşturduğumuz değişkenler gibi yazı tipi, boyutu veya kutu genişliği gibi değerler içinde değişken
oluşturulabilir.

Doğru Cevap: E

Soru 9

I. Sadece bilgisayar ekranlarında kullanılabilir.
II. Ekrana göre yeniden boyutlandırılabilir.
III. İstenen bölümler gizlenip gösterilebilir.
IV. Otomatik olarak çözünürlük değişiklikleri yapabilir.
Yukarıdakilerden hangileri duyarlı web tasarımı özellikleri arasında yer alır?

I-II-III-IV

II-III-IV

I-III-IV

I-II

Açıklama:

EKRAN DUYARLI WEB TASARIMI
Web sayfaları farklı cihazlarda, ekran boyutuna göre yeniden boyutlandırılabilir veya bazı bölümleri gizlenip gösterilebilir. Bu özelliği öne süren yaklaşıma duyarlı web tasarımı denilmektedir.
Kullanıcılar bilgisayarlardan veya telefondan web sayfasını ziyaret ettiklerinde, web sayfaları otomatik olarak çözünürlük, görüntü boyutu gibi değişiklikleri yapabilmelidir. Başka bir deyişle web sayfaları kullanıcıların ihtiyaçlarına doğrudan cevap verebilmelidir.

Doğru Cevap: B

Soru 10

Aşağıdakilerden hangisinde "width=device-width" kodu doğru olarak açıklanmaktadır?

Kutu genişliği değerleri için değişkenleri ayarlama.

Yazdırılabilir cihazlarla eşleştirmeyi ayarlama.

Genişliğini ekran genişliğini takip edecek şekilde ayarlama.

Sayfa ilk yüklendiğinde yakınlaştırma seviyesini ayarlama.

Birden fazla yerde kullanılmak istenen renk kodunu ayarlama.

Açıklama:

Görünüm Alanı ve Ayarlanması
KOD:Bu kod ile tarayıcılar sayfaların boyutlarını ve nasıl kontrol edileceği bilgisini elde edebilir. "width=device-width" sayfanın genişliğini ekran genişliğini takip edecek şekilde ayarlar. "initial-scale=1.0" ise sayfa ilk yüklendiğinde yakınlaştırma seviyesini ayarlar.

Doğru Cevap: C

Soru 11

Aşağıdakiler hangisinde "speech" medya türü doğru olarak açıklanmıştır.

Tüm cihazlarla eşleşir.

Yazdırılabilir cihazlarla eşleşir.

Ekran boyutlarıyla eşleştirir.

Ekran okuyucu cihazlarla eşleştirir.

Mobil cihazlarla eşleştirir.

Açıklama:

Medya Sorguları

Doğru Cevap: D

Soru 12

I. sm-tablet ekranları ≥768px
II. xl-yatık telefon ekranı ≥1400px
III. lg-masaüstü ekranlar ≥992px
IV. xs-telefon ekranları <576px
Yukarıdaki ekran kısaltmaları ve boyut sınırlarından hangileri doğrudur?

I-II

II-III

I-III

I-IV

III-IV

Açıklama:

Media Sorgularının Sınır Değerleri

Doğru Cevap: E

Soru 13

0 < Telefon ekranları < 576px

576 ≤ Yatık Telefon Ekranı < 768px

768px ≤ Masaüstü Ekranlar < 992px

Yukarıdaki HTML sayfalarının görüntülendiği ekran türleri ve sınır değerlerinden hangisi/hangileri doğrudur?

Yalnız I

I-II

Yalnız II

II-III

I-II-III

Açıklama:

HTML sayfaların görüntülendiği ekran boyutları türlerine göre gruplanmıştır. Ekran türüne göre isimleri ve
sınır değerleri aşağıdaki gibidir:
• Telefon ekranları : xs, <576px
• Yatık Telefon Ekranı :sm, ≥576px
• Tablet Ekranları :md, ≥768px
• Masaüstü Ekranlar :lg, ≥992px
• Büyük Masaüstü Ekranlar :xl, ≥1200px
• Ekstra Büyük Masaüstü Ekranlar :xxl, ≥1400px
I-II

Doğru Cevap: B

Soru 14

Aşağıdakilerden hangisi CCS'de elemanlar için kullanılan özelliklerinden biridir?

flex-grow

flex-direction

justify-content

flex-flow

flex-wrap

Açıklama:

flex-grow, CCS'de elemanlar için kullanılan özelliklerinden biridir.

Doğru Cevap: A

Soru 15

Aşağıdakilerden hangisi CCS'de başlangıç genişliği belirtilmek istenilen kutular için kullanılan eleman özelliklerinden biridir?

align-self

order

flex-basis

flex-grow

flex-shrink

Açıklama:

flex-basis, başlangıç genişliği belirtilmek istenilen kutular için kullanılır.

Doğru Cevap: C

Soru 16

I. Tek boyutlu düzenler için geliştirilmiştir.
II. Sayfayı dikey ve yatay eksende bölme imkanı sağlar.
III. Sayfayı ızgara yapısıyla bölerek düzenler.
IV. Sıralamayı ve akışı kontrol eden esnek özellikleri etkinleştirir.
Yukarıdakilerden hangileri flexbox'ın özellikleri arasında yer alır?

I-IV

II-III

I-II

III-IV

I-III

Açıklama:

SAYFA DÜZENLERİ
Flexbox, tek boyutlu düzenler için geliştirilmiş yapıdır. Yatay veya dikey olarak tek bir eksen boyunca yerleşim yapmaya imkân sağlar. Varsayılan olarak flexbox parent ögesinin child ögelerini yan yana, satır içi yönde hizalar ve blok yönünde uzatır, böylece hepsi aynı yükseklikte olur. Aynı zamanda sıralamayı ve akışı kontrol eden esnek özellikleri etkinleştirir.

Doğru Cevap: A

Soru 17

Aşağıdakilerden hangisi elemanların genişliği satıra sığmadığında alt satıra geçebilmesini belirtmek için kullanılan flexbox kapsayıcıya verilen özelliktir?

Flex-direction

Flex-wrap

Flex-flow

Flex-start

Flex-end

Açıklama:

Flexbox Yapısı
Kapsayıcı İçin Kullanılan Özellikler
Kapsayıcıya verilen özelliklerden sık kullanılanları inceleyelim:
• flex-direction: Elemanların akış yönünü seçer.
• row, elemanları yatay yönde hizalar.
• column, elemanları dikey yönde hizalar.
• Bunların haricinde akışı tersine çevirmek için row-reverse ve column-reverse değerlerinide
alabilir. Varsayılan row değerini alır.
• flex-wrap: Elemanların genişliği satıra sığmadığında alt satıra geçebilmesini belirtmek için kullanılır.
• wrap, alt satıra geçmeye izin verir.
• nowrap, tek satıra yerleştirir. Varsayılan değerdir.
• wrap-reverse, alt satıra geçerken akışı ters çevirir.
• flex-flow: Tek komutta flex-direction ve flex-wrap özelliklerini girebilmeyi sağlar.
• justify-content: Kutuların kapsayıcıdaki yatay yönde hizalanma şeklini belirtir.
• center, ögeleri kapsayıcının ortasında hizalar.
• flex-start, ögeleri flex alanının başından itibaren hizalar. Varsayılan değerdir.
• flex-end, ögeleri kapsayıcının sonuna hizalar.
• space-around, ögeler arasında ve kenarlarda boşluk bırakarak hizalar. Kenar boşlukları ögeler
arasındaki boşlukların yarısı kadardır.
• space-between, ögeler arasında boşluk bırakarak hizalama yapar. Kenarlardan boşluk bırakmaz.
• align-items: Kutuların kapsayıcıdaki dikey yönde hizalanma şeklini belirtir.
• center, ögeleri kapsayıcının ortasında hizalar.
• flex-start, ögeleri flex alanının üstünden itibaren hizalar.
• flex-end, ögeleri kapsayıcının altında hizalar.
• stretch, ögeleri kapsayıcının boyu kadar uzatır. Varsayılan değerdir.

Doğru Cevap: B

Soru 18

Yatay ve dikey grid hatları arasında oluşturulan boşluk için kullanılan terim aşağıdakilerden hangisidir?

Grid gap

Grid item

Grid hattı

Grid alanı

Grid hücresi

Açıklama:

Grid Yapısı
Grid Terimleri
Grid, tamamen sayfa düzenlemek için duyurulan ilk yapıdır. Bu yüzden daha önce kullanılmayan bazı
terimlerle birlikte duyrulmuştur.
• Grid Item, yerleştirilmek istenen elemanları ifade eden terimdir.
• Grid Container, yerleştirilecek ögeleri kapsayan elemandır. Grid özellikleri bu eleman ile belirtilir.
• Grid çizgileri, yatay ve dikey olarak uzanan çizgilerdir. 3 sütundan oluşan bir gridde 4 adet dikey
uzanan grid çizgisi vardır.
• Grid hattı, iki grid çizgisi arasında uzanan hücrelerin oluşturduğu hattır.
• Grid hücresi, yatay ve dikey grid çizgileri arasında kalan her bir alan grid hücresidir.
• Grid alanı, bir veya daha fazla grid hücresi birleştirilerek oluşturulan alandır.
• Grid gap, yatay ve dikey grid hatları arasında oluşturulan boşluktur.

Doğru Cevap: A

Soru 19

I. Yan menüyü stillendirme
II. Sayfadaki eleman düzenini belirleme
III. Menü elemanlarını stillendirme
IV. Sayfadaki komponentleri stillendirme
HTML CSS kullanarak hazırladığımız kitap bölümünü CSS kullanarak stillendirirken yapılması gerekenlerin sırası aşağıdakilerden hangisinde doğru olarak verilmiştir?

I-II-III-IV

II-III-I-IV

II-IV-I-III

IV-III-I-II

IV-III-II-I

Açıklama:

CSS İLE UYGULAMA: KİTAP LİSTELEME UYGULAMASI ÖRNEĞİ
Sayfa Düzeninin Oluşturulması
İlk olarak sayfadaki eleman düzenini belirlemeliyiz. Belirlemeyi yaptıktan sonra grid yapısını oluşturabiliriz. Basit bir sayfamız olacağı için elemanların yerleşimi kolay olacaktır. Başılık alanı en üstü kaplayacak, yan menü sol tarafa yerleşecek, ekranın kalan alanını da içerik alanı dolduracaktır. Sayfamızdaki
yerleşim için aşağıdaki kod bloğunda bulunan grid yapısını kullanabiliriz. Grid yapısını belirlerken alanlar
için kullanılacak isimlendirmeleri de tanımlıyoruz.
Başlık Komponentinin Stillendirilmesi
Grid yapımızı kurduktan sonra sayfadaki komponentleri stillendirmeye başlayabiliriz. HTML kodları
ile başlık komponentine .header sınıfını atamıştık. Sınıf seçicisi ile başlık komponentine ulaşıyoruz. Sayfamız için kurduğumuz grid yapısında “header” bölmesine başlığı yerleştirmek için grid-area: header;
kuralını uygulayacağız.
Menü Komponentinin Stillendirilmesi
Başlık stillendirmesini tamamladıktan sonra yan menüyü stillendirmeye başlayabiliriz...
Menü alanının gövdesinin stillendirilmesinden sonra menü elemanlarını stillendirebiliriz. Menü elemanlarını oluşturmak için etiketi kullanıldı.Tarayıcı etiketinin display özelliğini “inline” olarak atar. Elemanları alt alta sıralayabilmek için display özelliği değiştiriliyor.

Doğru Cevap: C

Soru 20

Bir grid tasarlarken "grid-template-rows" komutu kullanmak aşağıdakilerden hangisi oluşturulmayı sağlar?

Gridin sütun sayısını belirlemek

Griddeki alanlar arasında boyutlandırma sağlamak

Gridin satır sayısını belirtmek

Satır ve sütunlar arasında boşluk oluşturmak

Grid ögelerini başka hücrelere taşımak

Açıklama:

Grid Oluşturma
Grid ile ilgili özellikleri öğrenirken, 3 satır ve 4 sütundan oluşan bir grid tasarlayıp örnekteki elemanları
bu gride yerleştirelim.
KOD:
.container{
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}
Kapsayıcı elemanı grid yapmak için
• display:grid komutunu yazıyoruz. Komut bu şekliyle block yapısında olacaktır.
display:inline-grid ile inline yapıda grid oluşturabilirsiniz. Bu özelliklerin yanında, elemanımız hem bir gridin elemanı hem de başka bir grid yapısının kapsayıcısı ise display:subgrid
özelliği uygulanabilir.
• Gridin satır sayısını belirtmek için grid-template-rows: 200px 200px 200px; komutunu
giriyoruz. Burada 3 satır olmasını istediğimiz için 3 adet değer giriyoruz. Satır boyutlarını auto
girerek boyutlandırmanın alana yayılmasını sağlayabiliriz.

Doğru Cevap: C

Ünite 4

Soru 1

Ücretsiz ve açık kaynaklıdır.
JavaScript eklentilerini içerir.
Sadece bazı internet tarayıcılarıyla uyumludur.

Yukarıdaki ifadelerden hangisi/hangileri Bootstrap ile ilgilidir?

Yanlız II

Yanlız I

II ve III

I ve III

I ve II

Açıklama:

Bootstrap; Chrome, Firefox, Internet Explorer, Edge, Safari ve Opera gibi tüm modern tarayıcılarla uyumludur.
I ve II

Doğru Cevap: E

Soru 2

Aşağıdakilerden hangisi Bootstrap’i popüler yapan özelliklerden biri değildir?

Duyarlı Grid

Zamandan Tasarruf

Uyumluluk

İnandırıcılık

Tutarlılık

Açıklama:

İnandırıcılık, Bootstrap’i popüler yapan özelliklerden biri değildir.

Doğru Cevap: D

Soru 3

Bootstrap ile gelen hazır blokların olması, Bootstrap'ın hangi özelliğini ifade etmektedir?

Özelleştirilebilirlik

Zamandan Tasarruf

Uyumluluk

Tutarlılık

Duyarlı Grid

Açıklama:

Bir web uygulaması veya mobil uygulama oluşturmak için son derece sınırlı bir zaman çizelgesine bağlı olduğumuzda, Bootstrap çerçevesinden kolayca yararlanabilir ve projemizi zahmetsizce hazırlayabiliriz. Bu, Bootstrap ile gelen hazır bloklardan kaynaklanmaktadır.
Zamandan Tasarruf

Doğru Cevap: B

Soru 4

Aşağıdakilerden hangisi Bootstrap’in içeği ekran türüne göre doldurmak ve hizalamak için kullanılan temel yapı taşıdır?

Sınır değerleri

Flex

Grid

Display Sınıfları

Kapsayıcılar

Açıklama:

Kapsayıcılar, Bootstrap’in temel yapı taşıdır. İçeği ekran türüne göre doldurmak ve hizalamak için kullanılırlar.

Doğru Cevap: E

Soru 5

Aşağıdakilerden hangisi Bootstrap'da tablet ekranların sınıf kodudur?

Açıklama:

Bootstrap'da tablet ekranların sınıf kodu md'dir.

Doğru Cevap: B

Soru 6

Aşağıdakilerden hangisi ögeleri ve komponentleri hizalamak ve boyutlandırmak için kullanılan sayfa düzeni yapısıdır?

flex

evenly

around

end

start

Açıklama:

Flex, Bootstrap ile birlikte gelen bir diğer sayfa düzeni yapısıdır. Ögeleri ve komponentleri hizalamak ve boyutlandırmak için kullanılır.

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi metin rengini soluklaştırmak için kullanılan Bootstrap sınıfıdır?

text-uppercase

text-capitalize

text-muted

text-center

text-start

Açıklama:

Ekran alanında hizalama: text-start, text-center, text-end
text-muted

Doğru Cevap: C

Soru 8

Aşağıdakilerden hangisi içeriği kart komponenti ile oluşturmak için kapsayıcı elemana atanması gereken sınıftır?

.navbar

.bg

.btn

.card

.h1

Açıklama:

İçeriği kart komponenti ile oluşturmak için kapsayıcı elemana .card sınıfının atanması gerekir.

Doğru Cevap: D

Soru 9

Aşağıdakilerden hangisi Bootstrap'ta ögelerin arka planlarını yeşil olarak renklendirmek için kullanılan sınıftır?

.bg-warning

.bg-danger

.bg-success

.bg-secondary

.bg-primary

Açıklama:

Bootstrap'ta ögelerin arka planlarını yeşil olarak renklendirmek için kullanılan sınıf, .bg-primary dır.
.bg-warning turuncu renk
.bg-danger kırmızı renk
.bg-success yeşil renk
.bg-secondary gri renk
.bg-primary koyu mavi renk

Doğru Cevap: C

Soru 10

Kapsayıcılar, Bootstrap’in temel yapı taşıdır.
Display sınıfları, HTML ögelerinin display özelliğini ayarlamak için kullanılır.
Bootstrap ile birlikte gelen renk düzeni yapısıdır.

Yukarıda Bootstrap'da kullanılan düzen yapısı ile ilgili ifadelerden hangisi/hangileri doğrudur?

Yanlız I

I-II

II-III

Yalnız II

I-II-III

Açıklama:

"Kapsayıcılar, Bootstrap’in temel yapı taşıdır." ve "Display sınıfları, HTML ögelerinin display özelliğini ayarlamak için kullanılır." ifadeleri Bootstrap'da kullanılan düzen yapısı ile ilgili ifadelerdir.
I-II

Doğru Cevap: B

Soru 11

I. Bootstrap, yeniden kullanılabilir kod parçalarının bir koleksiyonunu içermez.
II. Bootstrap; HTML, CSS ve JavaScript ile yazılmış bir ön uç geliştirme çerçevesidir.
III. 2011 yılında Twitter’da çalışan Marc Otto ve Jacob Thornton tarafından geliştirilmiştir.
IV. Bootstrap, ücretli bir uygulamadır.
Bootstrap ile ilgili yukarıda verilenlerden hangileri doğrudur?

I, II

II, III

III, IV

I, II, III

I, II, III, IV

Açıklama:

Bootstrap, geliştiriciler için oldukça kullanışlı olabilecek yeniden kullanılabilir kod parçalarının büyük bir koleksiyonudur diyebiliriz. HTML, CSS ve JavaScript ile yazılmış bir ön uç geliştirme çerçevesidir. Ücretsiz ve açık kaynaklıdır. 2011 yılında Twitter’da çalışan Marc Otto ve Jacob Thornton tarafındangeliştirilmiştir. Bootstrap, tasarımcıların ve geliştiricilerin hızlı bir şekilde t amamen duyarlı web siteleri oluşturmasını sağlar. Duyarlı ve mobil öncelikli uygulamalar geliştirmek için en popüler CSS çerçevesi olarak kabul edilebilir.
Doğru cevap B şıkkıdır.

Doğru Cevap: B

Soru 12

I. Bootstrap kullanıcılara duyarlı tasarımları kolayca oluşturma olanağı sağlar.
II. Bootstrap’in duyarlı CSS’si telefonlara, tabletlere ve masaüstlerine kolayca uyum sağlar.
III. Bootstrap, ücretli bir ön uç çerçevesidir.
IV. Bootstrap, Chrome ve Firefox ile uyumlu, Safari ve Opera gibi tarayıcılarla uyumlu değildir.
Yukarıdakilerden hangileri Bootstrap’in ana özelliklerindendir?

I, II

II, III

III, IV

I, II, III

I, II, III, IV

Açıklama:

Bootstrap’in ana özellikleri şu şekilde açıklanabilir:
• Bootstrap, web geliştirmeyi daha hızlı ve daha kolay hâle getirmek amacıyla ücretsiz bir ön uç çerçevesidir.
• Ayrıca formlar, tipografi, düğmeler, gezinme, tablolar, modlar, görüntü karuselleri ve diğer birçok komponent için HTML ve CSS tabanlı tasarım şablonlarının yanı sıra diğer isteğe bağlı JavaScript eklentilerini de içerir.
• Bootstrap ayrıca kullanıcılara duyarlı tasarımları kolayca oluşturma olanağı sağlar.
• Bootstrap’in duyarlı CSS’si telefonlara, tabletlere ve masaüstlerine kolayca uyum sağlar.
• Chrome, Firefox, Internet Explorer, Edge, Safari ve Opera gibi tüm modern tarayıcılarla uyumludur.
Doğru cevap A şıkkıdır.

Doğru Cevap: A

Soru 13

I. Formlar
II. Navigasyon çubukları
III. Düğmeler
IV. Tablolar
V. Küçük resimler
Yukarıdakilerden hangileri Bootstrap’i popüler yapan komponent özelliklerindendir?

I, II, III

II, III, IV

III, IV, V

I, II, IV, V

I, II, III, IV, V

Açıklama:

Bootstrap’i Bu Kadar Popüler Yapan Nedir?
Bootstrap, aşağıdakiler gibi web uygulamalarımıza kolayca dahil edilebilecek çok sayıda komponent sağlar:
• Açılır menüler
• Formlar
• Navigasyon çubukları
• Düğmeler
• Tablolar
• İlerleme çubukları
• Küçük resimler
Doğru cevap E şıkkıdır.

Doğru Cevap: E

Soru 14

I. Duyarlı grid
II. Komponentler
III. Özelleştirilebilme
IV. Uyumluluk
V. Tutarlılık
Kullanıcılar, Bootstrap’in tasarım şablonundan memnun kalmazlarsa, CSS dosyasını her zaman değiştirebilirler. Ayrıca mevcut tasarımlarla birleştirilebilir ve böylece birbirlerinin işlevlerini tamamlayabilirler.
Bu özellik, yukarıda verilen ve Bootstrap’i popüler yapan konulardan hangisiyle ilişkilidir?

III

Açıklama:

Bootstrap’i Bu Kadar Popüler Yapan Nedir?
Kullanıcılar, Bootstrap’in tasarım şablonundan memnun kalmazlarsa, CSS dosyasını her zaman değiştirebilirler. Ayrıca mevcut tasarımlarla birleştirilebilir ve böylece birbirlerinin işlevlerini tamamlayabilirler. Uygulamamıza benzersiz bir görünüm vermek istediğimizde yardımcı olur.
Bootstrap’in özelleştirme sayfasını kullanarak kendi özel temanızı oluşturmak için daha fazla ince ayar yapabiliriz. Web projesi için gerekli olmayan tüm eklentileri ve bileşenleri belirlemeli ve kaldırmalıyız. Ayrıca, değişkenlerin değerlerini değiştirerek şablonumuzu özelleştirebileceğimiz belirli bir bölüme de sahip oluyoruz.
Bu özellik Bootstrap'in özelleştirilebilir olmasıyla ilişkilidir. Doğru cevap C şıkkıdır.

Doğru Cevap: C

Soru 15

I. Topluluk desteği
II. Uyumluluk
III. Tutarlılık
IV. Duyarlı grid
V. Komponentler
Bootstrap, resmî web sitesinde birçok kaynak ve materyal sağlar. Bunun yanında diğer bazı web siteleri de ön uç geliştirme sürecini kolaylaştıracak belirli kaynaklar sunar. Resmî web sitesi, bir web sitesi oluşturmayı çok daha basit hâle getiren inanılmaz belgeler de sunar. Ayrıca, gerekli değişiklikleri yapabileceğimiz şablonlarına ve temalarına erişebiliriz.
Bu özellik, yukarıda verilen ve Bootstrap’i popüler yapan konulardan hangisiyle ilişkilidir?

III

Açıklama:

Bootstrap’i Bu Kadar Popüler Yapan Nedir?
Bootstrap, resmî web sitesinde birçok kaynak ve materyal sağlar. Bunun yanında diğer bazı web siteleri de ön uç geliştirme sürecini kolaylaştıracak belirli kaynaklar sunar. Resmî web sitesi, bir web sitesi oluşturmayı çok daha basit hâle getiren inanılmaz belgeler de sunar. Ayrıca, gerekli değişiklikleri yapabileceğimiz şablonlarına ve temalarına erişebiliriz.
Bu özellik, Bootstrap’i popüler yapan topluluk desteği ile ilişkilidir. Doğru cevap A şıkkıdır.

Doğru Cevap: A

Soru 16

I. Bootstrap Proxy tarayıcılarını ve daha eski tarayıcıları desteklemez.
II. Bazen tasarım Bootstrap’ta kullanılan orijinal tasarımdan sapma eğiliminde olabilir.
III. Bir tasarım oluştururken yoğun özelleştirme yapılmazsa tüm web siteleri aynı görünür.
IV. Stiller ayrıntılıdır ve HTML’de gerekli olmayan çok sayıda çıktıya yol açabilir.
Yukarıdakilerden hangileri Bootstrap’in dezavantajlarındandır?

I, II

I, III

II, IV

II, III, IV

I, II, III, IV

Açıklama:

Bootstrap’i Bu Kadar Popüler Yapan Nedir?
Bootstrap Proxy tarayıcılarını ve daha eski tarayıcıları desteklemez ancak bu bir dezavantaj değildir. Çünkü bu durum görüntüyü veya işlevselliği etkilemez.
Bazen, tasarım Bootstrap’ta kullanılan orijinal tasarımdan sapma eğiliminde ise web sitesini tasarlamak ve kodlamak için çok fazla zaman harcanmasına neden olabilecek çeşitli stil geçersiz kılma veya yeniden yazma işlemlerine gereksinimi olabilir. Bir tasarım oluştururken ekstra yol katetmemiz gerekebilir, aksi takdirde yoğun özelleştirme yapmazsak tüm web siteleri aynı görünecektir. Stiller ayrıntılıdır ve HTML’de gerekli olmayan çok sayıda çıktıya yol açabilir.
Doğru cevap D şıkkıdır.

Doğru Cevap: D

Soru 17

I. Telefon ekranları
II. Yatık telefon ekranı
III. Tablet ekranları
IV. Masaüstü ekranlar
V. Büyük masaüstü ekranlar
Bootstrap ile yapılan gruplamaya göre sınıf kodu md olan ve boyutu ≥768px olan ekran türü yukarıdakilerden hangisidir?

III

Açıklama:

DÜZEN YAPISI
Bootstrap ile yapılan gruplamaya göre sınıf kodu md olan ve boyutu ≥768px olan ekran türü tablet ekranlarıdır.
Doğru cevap C şıkkıdır.

Doğru Cevap: C

Soru 18

I. Varsayılan kapsayıcı
II. Full kapsayıcı
III. Duyarlı kapsayıcı
IV. Genel kapsayıcı
Yukarıdakilerden hangileri Bootstrap içinde yer alan kapsayıcılardandır?

I, II

II, III

II, IV

I, II, III

II, III, IV

Açıklama:

Kapsayıcılar (Containers)
Kapsayıcılar, Bootstrap’in temel yapı taşıdır. İçeği ekran türüne göre doldurmak ve hizalamak için kullanılırlar. Ayrıca Bootstrap ile grid yapısı oluşturmak için kapsayıcılar kullanılmalıdır. Bootstrap içinde üç farklı türde kapsayıcı vardır:
• Varsayılan kapsayıcı
• Full kapsayıcı
• Duyarlı kapsayıcı
Doğru cevap D şıkkıdır.

Doğru Cevap: D

Soru 19

I. .flex-row
II. .flex-row-reverse
III. .flex-column
IV. .flex-column-reverse
Yukarıdakilerden hangileri Bootstrap ile kapsayıcı elemana atanabilecek yönlendirme sınıflarındandır?

I, II

II, III

III, IV

I, II, III

I, II, III, IV

Açıklama:

Bootstrap flex yapısında ögelerinin yatay, dikey veya tersi yönlerde yerleştirilmesine olanak sağlar. Kapsayıcı elemana atanabilecek yönlendirme sınıfları aşağıdaki gibidir:
• .flex-row: Ögeleri, HTML dosyasındaki akışa göre sol tarafa yaslayarak yerleştirir. Yatay yerleştirme
yapar. Varsayılan değerdir.
• .flex-row-reverse: Ögeleri, .flex-row sınıfının yatay eksende tersini alarak yerleştirir.
• .flex-column: Ögeleri, HTML dosyasındaki akışa göre yukarıdan başlayarak yerleştirir. Dikey yerleştirme yapar.
• .flex-column-reverse: Ögeleri, .flex-column sınıfının dikey eksende tersini alarak yerleştirir.
Doğru cevap E şıkkıdır.

Doğru Cevap: E

Soru 20

I. text-start, text-center, text-end
II. text-muted
III. text-lowercase, text-uppercase, text-capitalize
IV. fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter, fst-italic, fst-normal
Ekran alanında hizalama yapmak için kullanılan Bootstrap sınıfı yukarıdakilerden hangisidir?

III

I, II

Açıklama:

Başlık ve Metin Stillendirme
Ekran alanında hizalama yapmak için kullanılan Bootstrap sınıfı; text-start, text-center, text-end'dir.
Doğru cevap A şıkkıdır.

Doğru Cevap: A

Ünite 5

Soru 1

Aşağıdakilerden hangisi Javascript'in kullanmanın avantajlarından eksik girilen parola karakteri gibi işlemlerin istemci tarafında kontrol edilmesini ifade etmektedir?

HTML sayfa ile etkileşim

Kullanıcı bildirimleri

Sunucudan veri yükleme

Sunucu uygulamaları

İstemci tarafı doğrulama

Açıklama:

İstemci tarafı doğrulama: Kullanıcı girişi sunucuya gönderilmeden doğrulanabilir. Örneğin, eksik
girilen parola karakteri gibi işlemler istemci tarafında kontrol edilebilir. Bu sayede sunucu yoğunluğu azaltılır.

Doğru Cevap: E

Soru 2

Aşağıdakilerden hangisi JavaScript kod bloğundaki console.log() komutunun işlevini ifade etmektedir?

Değişken çağırmak

Konsola göstermek istediğimiz mesajı yazdırmak

Yazdığımız yorumları görünür yapmak

Hatırlatma amaçlı yorum satırları eklemek

Boşluk girdi ve satırları eklemek

Açıklama:

Kod bloğundaki console.log() komutu, konsola göstermek istediğimiz mesajı yazdıran komuttur.
Konsola göstermek istediğimiz mesajı yazdırmak

Doğru Cevap: B

Soru 3

Boşluk içermelidir.

Tüm karakterler bitişik yazılmalıdır.

Sayı ile başlamasına izin verilmez.

Değişken isimlerinin içerisinde yüzde işareti kullanılır.

Yukarıdakilerden hangileri JavaScript'de değişken isimlendirme kurallarındandır?

I-II

II-III

III-IV

I-IV

II-IV

Açıklama:

Değişken isimlerinin içerisinde ise harf, sayı, alt çizgi ve dolar işareti bulunabilir. Bunların haricinde karakterlerin kullanımına izin verilmez. Değişkenler boşluk içermemeli. Tüm karakterler bitişik yazılmalı.
II-III

Doğru Cevap: B

Soru 4

Aşağıdakilerden hangisi JavaScript dilinde değişken kapsamı olarak global kapsamın özelliklerinden biridir?

Program içerisinde her yerden erişim sağlanır.

Programın içerisindeki fonksiyonların her biri için olur.

Fonksiyon kapsamının alt kümesidir.

Program akışı fonksiyondan ayrılırken bellekten kaldırılır.

Çok fazla kullanıldığında bellek sorunu oluşturmaz.

Açıklama:

Program içerisinde her yerden erişim sağlanabilen kapsam türüdür. Bu kapsamda tanımlanan değişkenler tüm sayfada kullanılabilir ve global değişken olarak adlandırılır.
Program içerisinde her yerden erişim sağlanır.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi JavaScript ile sayısal değerleri ifade edebildiğimiz veri türüdür?

Length

Dizi

Number

Boolean

String

Açıklama:

JavaScript ile sayısal değerleri ifade edebildiğimiz veri türü number olarak adlandırılır.

Doğru Cevap: C

Soru 6

Aşağıdaki diziler ile kullanılabilen metotlardan hangisi dizinin sonuna bir eleman ekler ve dizinin uzunluğunu döndürür?

pop()

find()

concat()

push()

shift()

Açıklama:

push(), dizinin sonuna bir eleman ekler ve dizinin uzunluğunu döndürür.

Doğru Cevap: D

Soru 7

Aşağıdakilerden hangisi JavaScript’te değişkenlere değer atamak için kullanılan operatörlerden biridir?

Açıklama:

=, JavaScript’te değişkenlere değer atamak için kullanılan operatörlerden biridir.

Doğru Cevap: D

Soru 8

alert
confirm
prompt
setInterval

Aşağıdakilerden hangileri JavaScript ile beraber gelen açılık kutulardır?

I, II, III

II, III, IV

I, II, IV

II, III

I, II

Açıklama:

JavaScript ile beraber 3 farklı açılır kutu gelir. Bunlar; uyarılar için kullanılan alert, kullanıcıdan onay
almak için confirm ve kullanıcıdan bilgi almak için prompt kutularıdır.
I, II, III

Doğru Cevap: A

Soru 9

Aşağıdakilerden hangisi JavaScript ile web sitelerinde 2-3 saniyede bir değişen reklam görselleri konulmasını sağlayan araçtır?

Açılık kutular

Zamanlayıcılar

Fonksiyonlar

Döngüler

Operatörler

Açıklama:

Zamanlayıcıya en iyi örnek, web sitelerinde 2-3 saniyede bir değişen reklam görselleridir.
Zamanlayıcılar

Doğru Cevap: B

Soru 10

Aşağıdakilerden hangisi JavaScript’te bir fonksiyonu tanımlamak için fonksiyon adından önce kullanılan anahtar sözcüktür?

setTimeOut

let

console

return

function

Açıklama:

JavaScript’te bir fonksiyonu tanımlamak için fonksiyon adından önce function anahtar sözcüğü kullanılır

Doğru Cevap: E

Soru 11

Aşağıda Javascript’e ilişkin olarak verilen ifadelerden hangisi doğrudur?

JavaScript yorumlamalı diller arasında yer alır.

Javascript ve LiveScript farklı dillerdir.

Java ve JavaScript yapı olarak birbiri ile aynı dillerdir.

JavaScript derlenen(compile) bir dildir.

JavaScript bir programlama dili değildir.

Açıklama:

Javascript, hem sunucu tarafında hem de istemci tarafında kullanılabilen dinamik programlama dilidir. Javascript 1995 yılında Netscape çalışanlarından Brendan Eich tarafından geliştirildi. Netscape Navigator tarayıcısında kullanmak için geliştirilen bu dilin ilk adı LiveScript olarak belirlendi ancak o dönem Java dilinin popüler olması nedeniyle isim değişikliğine gidildi. Java ile karıştırılan JavaScript yapı olarak birbirinden farklı dillerdir. Java derlenen(compile) bir dil olmasına rağmen JavaScript betik(script) bir dildir. HTML ve CSS bir programlama dili olmamasına rağmen JavaScript programlama dilidir. Diğer programlama dillerinde olduğu gibi döngüler, koşullar gibi özelliklere sahiptir.
JavaScript yorumlamalı diller arasında yer alır.

Doğru Cevap: A

Soru 12

Aşağıdakilerden hangisi kullanıcı bilgisi alarak sisteme girme amaçlı açılır kutu kullanımına ilişkin doğru kodlama dizilimi içermektedir?

let deneyim= prompt("Mesleki deneyiminizi giriniz.", "5")

alert("Mesleki deneyim " + yas )

let deneyim= confirm("Mesleki deneyiminizi giriniz.")

let deneyim= alert("Mesleki deneyiminizi giriniz.")

if (confirm("Mesleki deneyiminizi giriniz.")===5)

Açıklama:

Web sayfasının çalışmasına devam edebilmek için kullanıcıdan bilgi alması gerekebilir. Örneğin, kullanıcının yaşını öğrenmek gibi. Bu tür durumlarda Prompt açılır kutusu kullanılabilir. Prompt parametre ile çağırılır. Kullanıcıdan istenen bilginin açıklaması ilk parametre, varsayılan değer ise ikinci parametre olarak verilir. Fonksiyon kullanıcının girdiği değeri geri döndürür.
let deneyim= prompt("Mesleki deneyiminizi giriniz.", "5")

Doğru Cevap: A

Soru 13

Aşağıdakilerden hangisi konsol ekranında 10 saniye boyunca 1sn aralıklı olarak ekranda “Günaydın Kullanıcı” yazabilmek için gerekli kod dizilimidir?

let timeIdentifier=setInterval(function (){
console.log("Günaydın Kullanıcı")},1000)
setTimeout(function (){
clearInterval(timeIdentifier)
},10000)

setInterval(function (){
console.log("Günaydın Kullanıcı")
},1000)

let timerIdentifier=setTimeout(function(){
console.log("Günaydın Kullanıcı")
}, 1000)
clearTimeout(timerIdentifier)

let timeIdentifier=setInterval(function (){
console.log("Günaydın Kullanıcı")},10000)
setInterval(function (){
clearInterval(timeIdentifier)
},1000)

setTimeout(f, 1000);
function f(){
console.log("Günaydın Kullanıcı")
}

Açıklama:

setTimeout metodu, belirli bir süre geçtikten sonra bir kod parçasının çalıştırılmasına olanak tanır.
Bu metodu, belirli bir zaman sonra JavaScript kodunu çalıştırmak için kullanılan bir zamanlayıcı olarak
düşünebilirsiniz.
let timeIdentifier=setInterval(function (){
console.log("Günaydın Kullanıcı")},1000)
setTimeout(function (){
clearInterval(timeIdentifier)
},10000)

Doğru Cevap: A

Soru 14

“JavaScript dilinde temel olarak Global Kapsam ve Lokal Kapsam olmak üzere iki farklı kapsam türü vardır” açıklamasına dayalı Olarak global ve local kapsam ile ilgili aşağıdaki ifadelerden hangisi doğrudur?

Global değişkenlere atanan değerler, program sonlandırılıncaya kadar saklanır.

Lokal kapsam, program içerisinde her yerden erişim sağlanabilen kapsam türüdür.

Lokal kapsamda tanımlanan değişkenler tüm sayfada kullanılabilir.

Global kapsam programın içerisindeki fonksiyonların her biri için oluşan kapsamlardır.

Global kapsam fonksiyonla sınırlıdır ve tanımlandığı kapsam dışında kullanılamaz.

Açıklama:

JavaScript dilinde temel olarak Global Kapsam ve Lokal Kapsam olmak üzere iki farklı kapsam türü vardır.
Global Kapsam
Program içerisinde her yerden erişim sağlanabilen kapsam türüdür. Bu kapsamda tanımlanan değişkenler tüm sayfada kullanılabilir ve global değişken olarak adlandırılır.
Global değişkenlere atanan değerler, program sonlandırılıncaya kadar saklanır. Programda çok fazla global değişken kullanılması bellek sorunlarına yol açacaktır. Bu yüzden gerekmediği durumlarda global değişken kullanılmaması önerilir.
Lokal Kapsam
Programın içerisindeki fonksiyonların her biri için oluşan kapsamlardır. Lokal kapsam fonksiyonla
sınırlıdır. Bu kapsam içinde tanımlanan değişken yerel değişken olarak tanımlanır ve tanımlandığı kapsam dışında kullanılamaz.
Lokal değişkenler, program akışı fonksiyondan ayrılırken bellekten kaldırılır, global değişkenler gibi bellekte tutulmaz. Fonksiyon tekrar çağrılsa bile eski değeri kullanılamaz. Bellekten kaldırıldıkları için, global değişke

Doğru Cevap: A

Soru 15

//Geleceği kodluyorum
/*Geleceği kodluyorum*/

Yukarıda yer alan a ve b seçeneklerinde Javascriptte yorum eklerken kullanılan işaretlerin kullanım amaçları ve seçenekler arası eşleştirme aşağıdakilerden hangisinde doğru sıralama ile verilmiştir.

a-Tek Satır Yorum
b-Çok satırlı yorum

a-Çok Satır Yorum
b-Çok satırlı yorum

a-Tek Satır Yorum
b-Tek satır yorum

a-Çok Satırlı Yorum
b-Tek satır yorum

a-Hem Çok hem Tek Satır Yorum
b-Hem Çok hem Tek satır yorum

Açıklama:

KOD:
// Tek Satır Yorum
/*
Çok
satırlı
yorum
*/
a-Tek Satır Yorum
b-Çok satırlı yorum

Doğru Cevap: A

Soru 16

JavaScript dilinde değişkenlerin isimlendirilmesine ilişkin kurallar aşağıdaki seçeneklerden hangisinde doğru olarak verilmiştir?

Çok kelimeden oluşan değişkenlerde kelimeler arası alt çizgi kullanılabilir.

Değişkendeki tüm karakterler ayrı yazılmalıdır.

Değişken isimlerinin içerisinde harf, sayı, alt çizgi ve dolar işareti bulunamaz.

Değişkenler harf, alt çizgi (_) ve dolar işareti ($) işareti ile başlamaz.

Değişkenler boşluk içermelidir.

Açıklama:

JavaScript değişkenlerin harf, alt çizgi( _ ) ve dolar işareti($) işareti ile başlamasına izin verir. Sayı ilebaşlamasına izin vermez. İlk harften sonra sayı kullanılmasında bir sorun oluşturmaz. Örneğin 1sayi isimli değişkene izin verilmezken sayi1 ismi kabul edilir. Değişken isimlerinin içerisinde ise harf, sayı, alt çizgi ve dolar işareti bulunabilir. Bunların haricinde karakterlerin kullanımına izin verilmez.
Değişkenler boşluk içermemeli. Tüm karakterler bitişik yazılmalı. Bu durum geliştirici için kodun okunabilirliğini azaltabilir. Birden fazla kelimeden oluşan değişkenlerde kelimelerin fark edilebilmesi için her kelimenin yalnızca ilk harflerini büyük yazabilirsiniz. Örneğin uyeadres yerine uyeAdres kullanabilirsiniz. Yine aynı amaçla kelimeleri belirginleştirmek için alt çizgi kullanımı da mümkündür. Örneğin uye_adres şeklinde değişken tanımlanabilir
Çok kelimeden oluşan değişkenlerde kelimeler arası alt çizgi kullanılabilir.

Doğru Cevap: A

Soru 17

Aşağıdaki kod bloğunda aritmetik işlemlerle ilgili sonuçlardan hangisi doğru olarak verilmiştir?
KOD:
let a=10
let b=47
let c=25
/

/ mod
console.log(c%a);
// çıktı:5

// mod
console.log(c%a);
// çıktı:3

// mod
console.log(b%a);
// çıktı:8

// mod
console.log(b%c);
// çıktı:13

// mod
console.log(b%c);
// çıktı:23

Açıklama:

KOD:
let a=10
let b=47
let c=25
// mod
console.log(c%a);
// çıktı:5
// mod
console.log(b%a);
// çıktı:7
// mod
console.log(b%c);
// çıktı:22

Doğru Cevap: A

Soru 18

“Çalışma esnasında if bloğunda koşulu sağlanmadığında farklı bir kod bloğunu çalıştırmak gerekebilir. Örneğin, kullanıcı girişi yapılmadığında ekranda bu kez farklı bir uyarı vermek isteyebiliriz. Bunun için ikinci bir if bloğu yazmak gibi bir seçeneğimiz olsa da kullanabileceğimiz başka bir anahtar kelime vardır” ifadesinde yer alan söz konusu anahtar kelime aşağıdakilerden hangisidir?

Else if

True

False

Case if

Break up

Açıklama:

Çalışma esnasında akışı etkileyen koşulun 2’den fazla durumda olması gerebilir. Örneğin, karşılama mesajında günün saatlerine göre farklı mesajlar yazdırmak isteyebilirsiniz. Değişkenin farklı koşullar içinde test edilmesini istediğimiz durumlarda else if anahtar kelimesini kullanabiliriz.

Doğru Cevap: A

Soru 19

Programlama kavramlarının en temel ve güçlü yapılarından olan döngülere ilişkin aşağıda verilen ifadelerden hangisi doğrudur?

JavaScript ile bir dizinin değerlerine ulaşmak için for/of yapısı kullanılabilir.

While döngüsü, kod bloğunu belirli sayıda çalıştırmak için kullanılanılır.

JavaScript ile nesnenin özelliklerine ulaşmak için for yapısı kullanılabilir

Belirli bir koşul sağlandığı sürece tekrar edilmek istenen kod blokları için for/in döngüsü kullanılabilir.

Dizinin eleman sayısını öğrenmek için of/in özelliği kullanılabilir.

Açıklama:

Programlama dilleri arasında popüler olan for döngüsü, kod bloğunu belirli sayıda çalıştırmak için kullanılanılır.
JavaScript ile bir dizinin değerlerine ulaşmak için for/of yapısı kullanılabilir.
JavaScript ile nesnenin özelliklerine ulaşmak için for/in yapısı kullanılabilir
Belirli bir koşul sağlandığı sürece tekrar edilmek istenen kod blokları için while döngüsü kullanılabilir.
Dizinin eleman sayısını öğrenmek için length özelliği kullanılabilir.

Doğru Cevap: A

Soru 20

function toplaVeYaz(sayi1, sayi2) {
let sonuc=sayi1 + sayi2
console.log(sonuc)
}
Yukarıda verilen koda dayalı olarak aşağıdaki ifadelerden hangisi doğrudur?

Sonuc değişkeni fonksiyon dışına çıkıldığı zaman bellekten kaldırılacaktır.

toplaVeYaz fonksiyon parametresidir.

Parantez içindeki sayi1 ve sayi2 değerleri fonksiyon adıdır.

Fonksiyon içinde tanımlanan sonuc değişkeni, global kapsamlı değişkendir.

toplaVeYaz değişkeni global kapsamlı değişkendir.

Açıklama:

function toplaVeYaz(sayi1, sayi2) {
let sonuc=sayi1 + sayi2
console.log(sonuc)
}
Her fonksiyon, kendine özel bir fonksiyon adına sahiptir. Aynı isimli birden fazla fonksiyon olması
hâlinde kodunuz çalışmayacaktır. Örnek kodda verilen toplaVeYaz fonksiyon adıdır. Büyüyen projelerde fonksiyon kullanımı da artacaktır. Birçok fonksiyonun olduğu projelerde, fonksiyon adları, fonksiyonun yaptığı işi açıklayabilecek şekilde seçilmelidir. Geliştirici fonksiyon adına bakarak fonksiyon hakkında fikir sahibi olmalıdır. Aksi takdirde kodunuz karmaşık ve yönetilmesi zor olacaktır. Fonksiyon isminden sonra gelen parantez içindeki sayi1 ve sayi2 değerleri fonksiyonun parametreleridir. Fonksiyon içinde tanımlanan sonuc değişkeni, lokal kapsamlı değişkendir ve fonksiyon dışına çıkıldığı zaman bellekten kaldırılacaktır. Defalarca fonksiyon çağırılsa bile bellekte kalan bir değer olmayacağı için program bilgisayarda çalışırken bellekte alan kaplamayacaktır.
Sonuc değişkeni fonksiyon dışına çıkıldığı zaman bellekten kaldırılacaktır.

Doğru Cevap: A

Ünite 6

Soru 1

Aşağıda Arrow fonksiyonlarına ilişkin olarak verilen ifadelerden hangisi doğrudur?

Arow fonksiyonlar normal fonksiyon tanımlamalarına göre daha temiz kod yazılmasını sağlar.

Arow fonksiyonlar Javascript ES5 sürümü ile gelen özelliklerden birisidir.

Arow fonksiyon işlemlerinde fonksiyon, aldığı x ve y parametrelerini bölerek geri döndürür.

Arrow fonksiyonlarda function, return anahtar kelimelerine ve süslü parantez kullanımı gereklidir

Arrow fonksiyon işleminde birden fazla satırda işlem yapılacaksa süslü parantez ve return anahtar kelimesinin kullanılması gerek yoktur.

Açıklama:

Arrow fonksiyonlar, normal fonksiyon tanımlamalarına göre daha temiz kod yazılmasını sağlar. ES6 ile
gelen özelliklerden birisidir. Söz dizimindeki => işareti oka (arrow) benzediği için bu ismi almıştır.
Fonksiyon, aldığı x ve y parametrelerini çarparak, geri döndürür.
Arrow fonksiyonunun kullanımında göreceğiniz gibi function, return anahtar kelimelerine ve süslü
parantez kullanımına gerek yoktur.
Ancak fonksiyon işleminde birden fazla satırda işlem yapılacaksa süslü parantez ve return anahtar kelimesinin kullanılması gerekir.
Arow fonksiyonlar normal fonksiyon tanımlamalarına göre daha temiz kod yazılmasını sağlar.

Doğru Cevap: A

Soru 2

const yaslar = [16, 35, 38, 13, 42]
function yasKontrol(yas) {
return yas >= 18;
}
console.log(yaslar.find(yasKontrol));
//çıktı: ?
Yukarıdaki örnekte yasKontrol fonksiyonunda dönen true değerine göre kod bloğu çalıştırıldığında, dizide ekrana yazdırılan ilk örnek hangi sayı olur?

Açıklama:

const yaslar = [16, 35, 38, 13, 42]
function yasKontrol(yas) {
return yas >= 18;
}
console.log(yaslar.find(yasKontrol));
//çıktı: 35
Örneğimizdeki yasKontrol fonksiyonu, aldığı parametre 18’den büyük veya eşitse true değeri dönecektir. Kod bloğu çalıştırıldığında, dizideki 18’den büyük veya eşit olan ilk eleman 35’i ekrana yazdıracaktır.

Doğru Cevap: A

Soru 3

const dizi1=[3,5,7]
const dizi2=[2,4,6]
const dizi3=[...dizi1,...dizi2]
console.log(dizi3);
// çıktı: [?]
Spread operatörü ile yukarıda verilen diziye ilişkin nasıl bir sonuç ortaya çıkar?

[3,5,7,2,4,6]

[2,3,4,5,6,7]

[3,5,7]

[2,4,6]

[2,4,6,3,5,7]

Açıklama:

Spread operatörü ile iki farklı diziyi birleştirebilirsiniz. Yukarıdaki örnekte farklı elemanlardan oluşan iki dizi, spread operatörleri ile birleştirilerek yeni bir diziye aktarılmıştır.
const dizi1=[3,5,7]
const dizi2=[2,4,6]
const dizi3=[...dizi1,...dizi2]
console.log(dizi3);
// çıktı: [3,5,7,2,4,6]

Doğru Cevap: A

Soru 4

const notlar= [17, 26, 40, 80, 37]
Yukarıdaki notların 40’tan büyük olanlarını yazdırmak için kullanılacak komut aşağıdakilerden hangisinde doğru verilmiştir?

notlar.forEach(not=>{
if (not>40){
console.log(not);
}
})

function buyuk(not){
return not>40
}
console.log(notlar.findIndex-(buyuk));

function buyuk(not){
return not>40
}
console.log(notlar.forEach(buyuk))

function buyuk(not){
return not>=40
}
console.log(notlar.filter(buyuk));

function buyuk(not){
return not>=40
}
console.log(notlar.find(buyuk));

Açıklama:

Örneğimizdeki notlarfind fonksiyonunun aldığı parametre 40’tan büyükse çalışacaktır.
notlar.forEach(not=>{
if (not>40){
console.log(not);
}
})

Doğru Cevap: A

Soru 5

açıklama 1
açıklama 2
açıklama 3
Yukarıda yer alan HTML dokümanına dayalı olarak “açıklama 3” metnini dokümandan kaldırmak için aşağıdaki kod kullanımlarından hangisi doğrudur?

document.getElementById("a3").remove()

document.querySelectorAll("#a3").remove()

document.querySelector("a3").remove()

document.getElementById(".a3").remove()

document.querySelector(".a3").remove()

Açıklama:

Ulaştığımız ögeyi sayfadan kaldırmak istersek remove() metodunu kullanabiliriz. Kaldırılan eleman, sadece görünüm olarak değil, HMTL dokümanından silinir. Aşağıdaki komut sayfamızda
bulunan 3. paragrafı kaldıracaktır.
document.getElementById("a3").remove()

Doğru Cevap: A

Soru 6

parça 1
parça 2
parça 3
Yukarıdaki yer alan HTML dokümanında “parça 2” metnini, “yeni parça” olarak değiştirmek için aşağıdaki kod kullanımlarından hangisi doğru olarak verilmiştir?

document.querySelector("#p2").innerHTML="yeni parça"

document.getElementById(".p2").innerHTML="yeni parça"

document.querySelector(".p2").innerHTML="yeni parça"

document.querySelectorAll("#p2").innerHTML="yeni parça"

document.getElementById(".p2")="yeni parça"

Açıklama:

HTML ögelerini JavaScript ile seçerek istenilen veriler elde edilebilir veya güncellemeler yapılabilir.
Kullanılan metotlara göre tek veya birden çok öge seçimi yapılabilir.
document.querySelector("#p2").innerHTML="yeni parça"

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi ECMA Script’in hiçbir zaman yayınlanmayan güncellemesidir?

ES4

LiveScript

ES1

ES2

ES3

Açıklama:

ECMA Script’in ilk üç sürümü olan ES1, ES2, ES3 yıllık güncellemelerdi, ancak ES4 bazı anlaşmazlıklar nedeniyle hiçbir zaman yayımlanmadı. On yıl sonra ES5, birkaç eklemeyle piyasaya sürüldü.

Doğru Cevap: A

Soru 8

Aşağıdakilerden hangisi ECMA Script’in 2019 yılında yayımlanan versiyonu ES10 ile gelen özellikler arasında yer alır?

Asenkron Tekrarlama

Array.flat() ve Array.flatMap()

Düzenli İfade İyileştirmeleri

Rest/Spread Özellikleri

Modül Import İsimlendirmeleri

Açıklama:

ES10
2019 yılında yayımlanan ECMAScript sürümüdür. Bu sürüm ile gelen özelliklerden bazıları aşağıda
listelenmiştir.
• Array.flat() ve Array.flatMap()
• String.trimStart() ve String.trimEnd()
• try/catch yapısı

Doğru Cevap: B

Soru 9

Aşağıdakilerden hangisi ECMA Script’in S5 sürümü kapsamında nesnenin bir dizi olup olmadığını kontrol eder ve sonucu true veya false olarak döndürür?

isArray()

forEach()

filter()

reduce()

indexOf()

Açıklama:

Yeni Dizi Yöntemleri
- isArray(): Bu yöntem, nesnenin bir dizi olup olmadığını kontrol eder ve sonucu true veya false
olarak döndürür.
- forEach():Dizide bulunan her öge için fonksiyonu yürütür.
- map(): Bu yöntem, dizinin (haritanın kullanıldığı) her ögesini eşleyerek yeni bir dizi oluşturur.
- filter(): Belirtilen koşullara uyan dizi ögelerinin geçmesini sağlayarak filtrelenen ögeleri içeren
yeni bir dizi oluşturur.
- reduce(): Dizideki her ögeye bir fonksiyon uygular ve diziyi tek bir ögeye indirger.
- indexOf(): Bir dizideki ilk eşleşmenin indeks numarasını döndürür.

Doğru Cevap: A

Soru 10

“ECMA Script’in ES5 sürümüne kadar değişken tanımında yalnızca var anahtar kelimesi kullanılıyordu” Aşağıdakilerden hangisi ES6 ile birlikte gelen ve blok kapsamlı değişkenlerin tanımlanabilmesini sağlayan anahtar kelimeleridir?

let ve const

is ve Array

for ve Each

index ve Of

reduce ve filter

Açıklama:

let ve const Anahtar Kelimeleri
ES5’e kadar değişken tanımında yalnızca var anahtar kelimesi kullanılıyordu. ES6 ile birlikte gelene
let ve const anahtar kelimeleri ile blok kapsamlı değişkenler tanımlanabilir oldu.

Doğru Cevap: A

Ünite 7

Soru 1

callback
promise
async/await
catch

Yukardakilerden hangileri JavaScript'te komutları asenkron yapıda çalıştırmak için kullanılan yöntemler arasındadır?

I, II, IV

I, II, III

II, III, IV

I, II

I, III

Açıklama:

Komutları asenkron yapıda çalıştırmak için 3 farklı yöntem vardır. Bunlar; callback, promise ve async/await
yöntemleridir.
I-II-III

Doğru Cevap: B

Soru 2

Aşağıdakilerden hangisi JavaScript, kodların yürütme bağlantılarını yönetmek için kullanılan yapıdır?

New

Await

Promiseresult

PromiseState

Call Stack

Açıklama:

JavaScript, kodların yürütme bağlantılarını yönetmek için Call Stack yapısını kullanır.

Doğru Cevap: E

Soru 3

Aşağıdakilerden hangisi istenen sayfanın geçici olarak yeni bir URL’ye taşındığını belirten HTML durum kodudur?

404 Not Found

501 Not Implemented

301 Moved Permanently

302 Found

400 Bad Request

Açıklama:

302 Found, istenen sayfa geçici olarak yeni bir URL’ye taşındığını belirten HTML kodudur.

Doğru Cevap: D

Soru 4

Aşağıdakilerden hangisi HTTP durum kodlarından 501 Not Implemented'in açıklamasıdır?

Sunucu, istek yöntemini tanımıyor veya isteği yerine getirme yeteneğinden yoksun.

Daha spesifik bir mesaj uygun olmadığında verilen genel bir hata mesajı.

Kötü söz dizimi nedeniyle istek yerine getirilemiyor.

İstenen sayfa yeni bir URL’ye taşındı.

İstenen sayfa geçici olarak yeni bir URL’ye taşındı.

Açıklama:

HTML durum kodlarından 501 Not Implemented'in açıklaması; sunucu, istek yöntemini tanımıyor veya isteği yerine getirme yeteneğinden yoksun şeklindedir.
Sunucu, istek yöntemini tanımıyor veya isteği yerine getirme yeteneğinden yoksun.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi sunucudan veri talep etmek için kullanılan HTTP metodudur?

POST

PATCH

GET

HEAD

PUT

Açıklama:

GET metodu sunucudan veri talep etmek için kullanılır.

Doğru Cevap: C

Soru 6

Aşağıdakilerden hangisi HTTP metotlarından GET metodu ile ilgili bir ifade değildir?

Sunucudan veri talep etmek için kullanılır.

İstek verisinde gövde alanı yoktur.

Sunucuya yapılacak isteğin sorgu parametreleri URL ile birlikte gönderilir.

Sunucuda veri oluşturmak için kullanılır.

Yapılan istek tarayıcı tarafından önbelleğe alınabilir.

Açıklama:

GET metodu sunucudan veri talep etmek için kullanılır. Sunucuya yapılacak isteğin sorgu parametreleri URL
ile birlikte gönderilir. İstek verisinde gövde alanı yoktur. Yapılan istek tarayıcı tarafından önbelleğe alınabilir.
Bu sayede tarayıcının Geri butonu kullanılarak önceki sayfaya geri dönülebilir. İsteğe ait tüm bilgiler URL
içerisinde olduğu için kullanıcı tarayıcıya yer imi olarak ekleyebilir. POST, sunucuda veri oluşturmak için kullanılır. İstek ile gönderilecek parametreler hem URL’e hem de isteğin gövde kısmına eklenebilir. Tarayıcılar gövde
kısmına eklenen verileri önbelleğe almaz. Body kısmına eklenen verilerde, veri uzunluğu için kısıtlama yoktur.

Doğru Cevap: D

Soru 7

Aşağıdaki ifadelerden hangisi XML ile ilgilidir?

Önceden tanımlanmış etiketleri yoktur.

Verileri yapılandırmak için minimal ve okunabilir bir formattır.

Veri bloklarında anahtar isimleri tekil olmak zorundadır.

Değerler farklı veri tiplerinde olabilir.

Dosyaları sunucudan almak için bir arabirim sağlar.

Açıklama:

XML, W3C tarafından standartlaştırılmıştır. HTML’e benzer ancak önceden tanımlanmış etiketleri yoktur.

Doğru Cevap: A

Soru 8

Hızlı cevap bant genişliği kullanımı sağlar.
Veriler sunucudan alınana kadar kullanıcı haberdar edilir.
Sunucuya yalnızca önemli verileri göndermemizi sağlar.
Uygulamayı etkileşimli ve daha hızlı hâle getirir.

Yukarıdakilerden hangileri Web sayfalarında Ajax kullanmanın sağladığı bazı avantajlardandır?

I, II, III

III, IV

I, III, IV

II, IV

I, IV

Açıklama:

Web sayfalarında Ajax kullanmanın sağladığı bazı avantajlar aşağıdaki gibidir;
• Hızlı cevap bant genişliği kullanımı
• Veriler sunucudan alınana kadar kullanıcı engellenmez.
• Sunucuya yalnızca önemli verileri göndermemizi sağlar.
• Uygulamayı etkileşimli ve daha hızlı hâle getirir.
I, III, IV

Doğru Cevap: C

Soru 9

Aşağıdakilerden hangisi istek yüklendiğinde çağırılacak fonksiyonu tanımlayan XHR nesnesidir?

responseText

responseXML

statusText

onload

readyState

Açıklama:

İstek yüklendiğinde çağırılacak fonksiyonu tanımlayan XHR nesnesi, onload'dur.

Doğru Cevap: D

Soru 10

Aşağıdakilerden hangisi dönen istek verilerini string formatında veren XHR nesnesidir?

statusText

status

onload

readyState

responseText

Açıklama:

Dönen istek verilerini string formatında veren XHR nesnesi, responseText'dir.

Doğru Cevap: E

Ünite 8

Soru 1

Web uygulamalarında, kullanıcının ekranında gördüğü her sayfa ne olarak adlandırlır?

View

Display

Shown

Application

Start up

Açıklama:

Web uygulamalarında, kullanıcının ekranında gördüğü her sayfa view (görünüm) olarak adlandırılır.

Doğru Cevap: A

Soru 2

Spa yapısı ile kurulmuş web sitelerinde, tarayıcı geçmişi aşağıdaki tekniklerden hangisi ile görüntülenmelidir?

History

Back Apı

All History

History Apı

Spa History

Açıklama:

Başka bir dezavantajı ise tarayıcı geçmişi kullanmak
geleneksel uygulamalardaki kadar kolay değildir. Tarayıcının geri tuşuna basıldığında, uygulamadan önceki sayfa açılır. Tarayıcı geçmişini kullanabilmek için History API gibi teknikleri kullanmak gerekir

Doğru Cevap: D

Soru 3

SPA yapısını kullanan en popüler JavaScript kütüphanesi aşağıdakilerden hangisidir?

Google

Safari

Angular

Vue.js

React

Açıklama:

Yine yaygın olarak kullanılan Vue.Js (Vue
olarakta bilinir) 2013 yılında yayımlanmış açık kaynak kodlu bir kütüphanedir. Bu bölümde incelenecek
olan React ise SPA yapısını kullanan en popüler JavaScript kütüphanesidir.

Doğru Cevap: E

Soru 4

React’ında geliştiricisi olan Facebook tarafından desteklenen CRA aşağıdaki sistemlerden hangisi ile çalışmaz?

Windows 7

Windows 10

MacOs

Linux

İos

Açıklama:

CRA, React’ında geliştiricisi olan Facebook tarafından desteklenir. Windows, Linux ve MacOs’ta çalışabilir. CRA ile uygulama ortamını hazırlayabilmek için bilgisayarda NodeJs ve NPM yüklü olmalıdır.

Doğru Cevap: E

Soru 5

React Sanal DOM yapısını aşağıdakilerden hangisi ile düzenler ve yayınlar?

Public

İndex.html

CRA

node_modules

package.json

Açıklama:

Uygulamanın altında bulunan public klasörü SPA için gerekli index.html dosyasının bulunduğu klasördür. React Sanal DOM yapısını index.html ile düzenler ve yayınlar. Uygulamaya ait logo gibi bilgiler bu
klasör içerisinde tutulur

Doğru Cevap: B

Soru 6

JavaScript ve HTML kodları aşağıdakilerden hangisi ile ayrıştırılabilinir?

Babel

JSX

React

CRA

SPA

Açıklama:

JavaScript kodlarının arasında, HTML diline benzeyen yapıda kod
geliştirilebilmesine imkân sağlar. Babel gibi ayrıştırıcılar
vasıtası ile JavaScript ve HTML kodları ayrıştırılır.

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi react uygulamalarının temel yapı taşlarından olan komponentlerden biridir?

Sınıf komponentleri

Uygulama komponentleri

React ana komponentleri

Kod komponentleri

Sayfa komponentleri

Açıklama:

Sınıf ve fonksiyon tabanlı komponentlerin birbirlerine göre
avantajlarından bir diğeride komponent içinde veri tutulmasıdır.
React 16.8 sürümünden önce state adı verilen yapı sadece sınıf
komponentleri için kullanılabiliyordu. 16.8’den itibaren duyurulan Hooks yapısı ile birlikte fonksiyon komponentlerinde de state
yapısı kullanabilir oldu. Her iki komponent türünde de state yapıları benzer olsada bu kitapta yalnızca fonksiyon tabanlı komponentler incelenecektir.

Doğru Cevap: A

Soru 8

React ile alt eleman olan komponentlere doğrudan veri aktarmak için aşağıdakilerden hangisi kullanılır?

Props

JSX

useState

SPA

HTML

Açıklama:

React ile alt eleman olan komponentlere doğrudan veri aktarmak için props yapıları kullanılır

Doğru Cevap: A

Soru 9

Alt komponentin her çağrılmasında benzersiz bir key değeri verilmelidir. Benzersiz key değişkenini oluşturabilmek için aşağıdakilerden hangisi kullanılabilinir?

İndex değerleri

Props

Kod değerleri

Data dizini

Hooks yapısı

Açıklama:

Alt komponentin her çağrılmasında benzersiz bir key değeri
verilmelidir. Benzersiz key değişkenini oluşturabilmek için index değerleri kullanılabilir.

Doğru Cevap: A

Soru 10

React'da daha önce sınıf komponentlerinde state nesneleri kullanılabiliyorken aşağıdaki gelişmelerden hangisi ile fonksiyon komponentlerde de state yapısı kullanılabilir oldu?

16.8’den sonra gelen hook yapısında duyurulan userState() ile.

16 sürümü jsx yapısı ile.

Single Page Application (SPA) yapısı ile.

Document Object Model yapısı ile.

Kod yapısı ile.

Açıklama:

React’ın 16.8 sürümünden önce yalnızca sınıf komponentlerinde State nesneleri kullanılabiliyordu.
16.8’den sonra gelen hook yapısında duyurulan userState() sayesinde fonksiyon komponentlerde de state
yapısı kullanılabilir oldu.

Doğru Cevap: A

Web Arayüz Programlama - Tüm Sorular

Ünite 1

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 2

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 3

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 4

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler