Web Tasarımı Ünite -8

Giriş

JavaScript, web sayfalarına dinamik ve etkileşimli özellikler eklemek için kullanılan popüler bir programlama dilidir. HTML ve CSS ile birlikte çalışarak web sayfalarının daha kullanıcı dostu ve interaktif olmasını sağlar. Bu makalede, JavaScript’in temel kavramları, kullanımı ve web tasarımındaki önemi ele alınacaktır.

JavaScript Nedir?

JavaScript, web sayfalarının dinamik ve etkileşimli hale gelmesini sağlayan, istemci tarafında çalışan bir programlama dilidir. İlk olarak 1995 yılında Netscape tarafından geliştirilen JavaScript, günümüzde hemen hemen tüm modern web tarayıcıları tarafından desteklenmektedir. JavaScript, kullanıcı etkileşimlerine yanıt vermek, veri doğrulama yapmak ve animasyonlar oluşturmak gibi görevlerde kullanılır.

JavaScript’in Özellikleri

JavaScript, yüksek seviyeli, yorumlanan ve dinamik bir dildir. Bu özellikleri sayesinde hızlı ve esnek bir şekilde geliştirilebilir. JavaScript, değişkenler, döngüler, fonksiyonlar ve olay işleme gibi temel programlama yapılarını içerir. Ayrıca, tarayıcı API’leri ile entegrasyonu sayesinde web sayfalarının içeriği ve yapısı üzerinde tam kontrol sağlar.

JavaScript ve HTML

JavaScript, HTML belgeleri içinde <script> etiketleri arasında yazılır. Bu etiketler, tarayıcıya JavaScript kodlarının nerede başladığını ve bittiğini belirtir. JavaScript kodları, HTML öğeleri üzerinde değişiklikler yapabilir, olayları işleyebilir ve kullanıcı etkileşimlerine yanıt verebilir.

Değişkenler ve Veri Türleri

JavaScript’te değişkenler, “var”, “let” ve “const” anahtar kelimeleri ile tanımlanır. “var” eski bir yöntem olup, modern JavaScript kodlarında genellikle “let” ve “const” kullanılır. “let” değişkenleri yeniden atanabilirken, “const” sabit değerler için kullanılır. JavaScript’te temel veri türleri arasında sayılar, metinler (string), boolean değerler, nesneler ve diziler bulunur.

Fonksiyonlar

Fonksiyonlar, JavaScript’te tekrar eden işlemleri gerçekleştirmek için kullanılan kod bloklarıdır. Bir fonksiyon, “function” anahtar kelimesi ile tanımlanır ve çağrılarak çalıştırılır. Fonksiyonlar, parametreler alabilir ve bir değer döndürebilir. Bu özellikleri sayesinde kodun daha düzenli ve tekrar kullanılabilir olmasını sağlar.

Olay İşleme

JavaScript, kullanıcı etkileşimlerine yanıt vermek için olay işleme mekanizmasını kullanır. Olaylar, kullanıcıların fare tıklamaları, klavye tuşlarına basmaları veya sayfa yüklenmesi gibi eylemlerini temsil eder. Olay işleyiciler (event handlers), bu olayları yakalayarak belirli kodların çalışmasını sağlar. Örneğin, bir butona tıklandığında bir fonksiyonun çalışmasını sağlamak için “onclick” olayı kullanılır.

DOM Manipülasyonu

Document Object Model (DOM), web sayfasının yapısını ve içeriğini temsil eden bir modeldir. JavaScript, DOM üzerinde değişiklikler yaparak sayfanın içeriğini dinamik olarak güncelleyebilir. Bu, öğe ekleme, silme, stil değiştirme ve içerik güncelleme gibi işlemleri içerir. DOM manipülasyonu, web sayfalarının daha interaktif ve kullanıcı dostu olmasını sağlar.

Sonuç

JavaScript, modern web tasarımında vazgeçilmez bir araçtır. HTML ve CSS ile birlikte çalışarak web sayfalarına dinamik ve etkileşimli özellikler kazandırır. JavaScript’in güçlü özellikleri ve esnekliği, geliştiricilerin kullanıcı deneyimini artıran zengin web uygulamaları oluşturmasını sağlar.

1- Web sayfalarına etkileşimli bir yapı kazandırmak için aşağıdaki dillerden hangisini kullanmaktayız?

A) HTML
B) CSS
C) C
D) JavaScript
E) Hiçbiri

Cevap: D) JavaScript

Açıklama: JavaScript, web sayfalarına etkileşimli özellikler eklemek için kullanılan bir programlama dilidir. HTML ve CSS ile birlikte çalışarak dinamik içerikler oluşturur.

2- “Betik dillerinin derlenmesine gerek yoktur, derlenmek yerine yorumlanarak (————–) çalıştırılırlar?” Boşluğa gelecek ifade hangisidir?

A) compiled
B) listed
C) interpreted
D) readible
E) concluded

Cevap: C) interpreted

Açıklama: Betik dilleri derlenmez, bunun yerine yorumlanarak çalıştırılır. JavaScript gibi betik dilleri, tarayıcılar tarafından yorumlanarak anında çalıştırılır.

3- JS kodları tarayıcılarda yorumlanarak çalıştırılır. Bu yorumlamanın gerçekleştirilebilmesi için tarayıcılar ___________ adı verilen araçları kullanmaktadırlar? Boşluğa hangi ifade gelmelidir?

A) JS yürütücüleri
B) JS motorları
C) JS sunucuları
D) JS derleyicileri
E) JS sensörleri

Cevap: B) JS motorları

Açıklama: Tarayıcılar, JavaScript kodlarını yorumlamak ve çalıştırmak için JavaScript motorlarını kullanırlar. Örneğin, Chrome tarayıcısı V8 motorunu kullanır.

4- JS kodları hangi etiket açılış ve kapanışı arasında yazılmalıdır?

A) <scripted>
B) <p>
C) <form>
D) <h>
E) <script>

Cevap: E) <script>

Açıklama: JavaScript kodları, HTML belgelerinde <script> etiketleri arasında yazılır. Bu etiketler, tarayıcıya JavaScript kodlarının yerini belirtir.

5- Genellikle sabit değerler alan değişkenler için _______, farklı değişkenlere göre değişen değerlere sahip olabilecek değişkenler __________ ile tanımlanabilmektedir. Boşluklara sırasıyla hangileri gelmelidir?

A) for – var
B) var – char
C) const – let
D) const – for
E) char – const

Cevap: C) const – let

Açıklama: JavaScript’te sabit değerler “const” anahtar kelimesi ile, değişken değerler ise “let” anahtar kelimesi ile tanımlanır.

6- let x=“ ”; şeklinde bir değişken tanımı yapıldıktan sonra x değişkeninin veri tipi aşağıdakilerden hangisi olur?

A) Integer
B) Number
C) Object
D) NA
E) Null

Cevap: E) Null

Açıklama: Değişkenin başlangıçta bir değeri yoksa, JavaScript bu değişkene “null” değerini atar. Bu, değişkenin henüz tanımlanmadığını veya bir değere sahip olmadığını belirtir.

7- “&&” operatörü ne anlama gelir?

A) eşit değil
B) eşit
C) veya
D) ve
E) atama

Cevap: D) ve

Açıklama: “&&” operatörü, mantıksal “ve” anlamına gelir ve iki koşulun da doğru olması durumunda true değerini döner.

8- DOM yapısı içerisinde kök element (etiket) hangisidir?

A) <body>
B) <head>
C) <p>
D) <script>
E) <html>

Cevap: E) <html>

Açıklama: DOM (Document Object Model) yapısında, kök element <html> etiketidir. Bu etiket, tüm diğer HTML etiketlerini kapsar.

9- Aşağıdaki HTML öğelerinden hangisi <body> etiketinin çocuğudur (child element)?

A) <html>
B) <head>
C) <document>
D) <meta>
E) <p>

Cevap: E) <p>

Açıklama: <body> etiketi içinde bulunan öğeler <p>, <div>, <h1> gibi etiketlerdir. <p> etiketi, <body> etiketinin doğrudan çocuğudur.

10- Aşağıdaki DOM olaylarından hangisi bir butona tıklanması olayını temsil eder?

A) onmouseon
B) onmouseover
C) onmouseclick
D) onclick
E) click

Cevap: D) onclick

Açıklama: “onclick” olayı, kullanıcı bir butona tıkladığında tetiklenir. Bu olay, JavaScript ile birlikte kullanılarak çeşitli işlemler gerçekleştirilebilir.