JavaScript

1. Bir html elementinin içeriğini değiştirmek

2. Bir elementin niteliklerini değiştirmek

3. Sayfalara element eklemek ve silmek

4. Bir elementin görünümünü değiştirmek

5. Kullanıcıdan onay almak

6. Zamanlanmış görev kullanmak

HTML elementleri kendilerine tanımlı nitelikler ile birlikte gelir. Bu nitelikler elementlerin açılış etiketlerine yazılarak elementlerin içeriklerini ve durumlarını belirler. Örneğin, tasarladığımız bir formun yalnızca kullanıcının sunulan sözleşmeyi kabul etmesi durumunda gönderilmesini sağlayabiliriz. Bu amaçla formu gönderen düğmenin aktif olup olmama durumunu niteliklerini değiştirerek düzenleyebiliriz. Düğmeleri oluşturabilen input elementinin aktifliği disabled niteliği ile ayarlanır. disabled niteliği true olan elementlerin etkileşimi kapatılır. JS ile kullanıcının sözleşmeyi okuduğunu beyan ettiği onay kutusunu dinleyerek, bu kutunun değişimine göre Gönder düğmesinin aktifliğini düzenleyebiliriz.

JS kodları HTML dokümanlarında head ya da body bölümlerine yazılabilir. HTML bir işaretleme dili olduğundan, metin halindeki JS kodlarının da işaretlenmesi gerekmektedir. Aksi halde yazılan kodlar programlama kodu olarak yorumlanmak yerine sayfada gösterilecektir. Bu amaçla JS kodları script etiketleri arasına yerleştirilir.

HTML elementleri kendilerine tanımlı nitelikler ile birlikte gelir. Bu nitelikler elementlerin açılış etiketlerine yazılarak elementlerin içeriklerini ve durumlarını belirler. Örneğin, tasarladığımız bir formun yalnızca kullanıcının sunulan sözleşmeyi kabul etmesi durumunda gönderilmesini sağlayabiliriz. Bu amaçla formu gönderen düğmenin aktif olup olmama durumunu niteliklerini değiştirerek düzenleyebiliriz. Düğmeleri oluşturabilen input elementinin aktifliği disabled niteliği ile ayarlanır. disabled niteliği true olan elementlerin etkileşimi kapatılır. JS ile kullanıcının sözleşmeyi okuduğunu beyan ettiği onay kutusunu dinleyerek, bu kutunun değişimine göre Gönder düğmesinin aktifliğini düzenleyebiliriz. Resim 4.3’te Gönder düğmesinin, kullanıcının, “Kullanıcı sözleşmesini okudum” onay kutusunu işaretlemesi durumunda aktifleştiğine dikkat ediniz.

JS sayfadaki bir elementin CSS stillerini değiştirebilir. Örneğin, sitemizin okunmasını kolaylaştırmak
için gece ve gündüz saatlerinde iki renk temasıyla sunmak istediğinizi düşünelim. Gece saatlerinde çok
parlak ekranlar gözleri yoracağından koyu bir artalan üzerinde parlak yazılar; gündüz saatlerinde de tam
tersi bir tema kullanalım. Bu amaçla sitemize gece/gündüz temaları arasında geçiş yapmak için bir düğme
ekleyebiliriz. Hatta, JS düğmeler yerine, bilgisayarın sistem saatini kontrol ederek bu geçişleri otomatik
olarak da gerçekleştirebilir. Resim 4.5’te sayfa üzerindeki düğme ile koyu ve açık renk temaları arasındaki
geçiş sağlanmaktadır. Bu işlemi bilgisayarın sistem saatine göre yapmak için Tarih nesnesi başlığındaki
fonksiyonlar kullanılabilir.
JS DOM üzerinden tarayıcıdaki sayfaya erişebildiği gibi, BOM (Browser Object Model – Tarayıcı Nesne
Modeli) üzerinden tarayıcı kaynaklarına da erişebilir. JS, BOM kullanarak: (1) yeni bir tarayıcı penceresi açabilir, (2) tarayıcı penceresini düzenleyebilir (ekrandaki yeri ya da boyutlarını değiştirebilir), (3) tarayıcı penceresini kapatabilir, (4) kullanıcının ekranı hakkında bilgi alabilir (boyutlar, renk derinliği vb.), (5) gösterilen sayfa hakkında bilgi alabilir, (6) gösterilen sayfayı değiştirebilir, (7) tarayıcının tarih nesnesine erişerek önceki/sonraki sayfalara gidebilir, (8) kullanıcı bilgisayarına çerez bırakabilir, (9) zamanlanmış görevler oluşturabilir, (11) tarayıcı uygulaması hakkında bilgi alabilir, (12) tarayıcının uyarı ve alarm kutularını kullanabilir.

JS zamanlayıcı (Timer) nesnesini kullanarak zamanlanmış görev oluşturabilir ya da bir olayın aralıklarla tekrarlanmasını sağlayabilir. Örneğin bir sınav uygulaması oluşturduğumuzu düşünelim. Bu uygulamada her sorunun yanıtlanması için kullanıcıya 30 saniye verilsin. 30 saniye sonunda kullanıcının soruyu yanıtlamasını
engellemek için zamanlanmış görevleri kullanabiliriz. Saniyede bir kere çalışacak zamanlanmış görev ile sayfadaki bir sayaç güncellenerek, zamanın bitişinde formu gönderecek olan düğmenin etkileşimi kaldırılabilir.
Resim 4.7’de solda zamanlanmış görevin çalışması ve sayacı güncellemesi görülmektedir. Sağ tarafta ise sürenin bitmesi durumunda formu gönderecek düğmenin aktifliği kaldırılmaktadır.

JavaScript internet sayfalarını programlamak için kullanılır.

“11.1” ifadesi JS için bir metindir. 

Değişkenler, programın çalıştırılması sırasında farklı değerleri bilgisayar hafızasında tutabilmek için kullanılır.

Değişken isimlerinde boşluk kullanılamaz.
• Değişken isimlerinde Türkçe karakterler (ü,ğ,i,ş,ç,ö) kullanılamaz.
• Değişken isimlerinde büyük ve küçük harfler kullanılabilir [A-Z, a-z].
• Değişken isimlerinde, ilk karakter olmamak şartıyla sayılar kullanılabilir [0-9].
• Değişken isimlerinde alt tire “_” ve “$” dolar işareti kullanılabilir.
• _ ve $ işaretlerinin ilk ve son karakter olarak kullanılması önerilmez.
• Değişken isimleri JS rezerve sözcüklerinden (for, var, function vb.) biri olamaz.
• İsimlendirmeler büyük küçük harf duyarlıdır. (sayi ve Sayi ayrı değişkenlerdir).

Menüler ve bağlantılar

Ör: hesap makinesi, takvim araçları

JS programları art arda verilen yönergelerin yorumlanması yoluyla işletilir. Fakat gerçek yaşamda pek az program bu doğrusal işleyişle yönetilebilir. Kullanıcınızın seçtiği bir radyo düğmesi, kullanıcı sözleşmesini
kabul edip etmemesi, sitenizin ziyaret edilme saati gibi pek çok duruma bağlı olarak program akışının yönlendirilmesi gerekir. Program akışının yönlendirilmesi için koşul yapıları kullanılır. Koşul yapıları, yazılan
şart ifadelerine göre işletilecek kod bloklarının yazılması için alan sağlar. JS diğer programlama dillerinde
sıklıkla kullanılan if, else ve switch yapılarını kullanmaktadır.

JS işleçleri aritmetik işleçler, atama işleçleri, metin işleci ve kıyaslama ve mantıksal işleçler şeklinde sınıflanabilir.

Atama işleçleri değişkenlere veri göndermek için kullanılır.

Mantıksal işleçler verilen ifadenin doğruluğunu sınar.

Değer veya tür eşit değildir

VEYA (OR) işleci erilen ifadelerden birinin doğru olması halinde true değeri çıkarır. Aksi halde false çevirir.

innerHTML özelliği bir HTML elementinin içeriğini düzenlemek için kullanılır.

Bunların üçü HTML DOM üzerinde çalışırken, ikisi tarayıcının (BOM) iletişim özelliklerini kullanır.