Öğretici Video: Bir Düğmenin Metin Etiketini Kodla Değiştirme
5 dakikalık okuma
Yeni bir tasarım hazırlama sürecindeyiz! Bu sırada kullandığınız bazı özellikler burada açıklananlarla aynı olmayabilir. Daha Fazla Bilgi
Katılmak ve öğrenmeye devam etmek için Corvid by Wix web sitesini ziyaret edin.
Olay, sitenizdeki bir ögeye yapılan bir işlemdir. Özellikler Panelindeki Etkinlikler bölümü, ögelerinize Olay İşleyici ekleyerek sitenizin bu etkinliklere yanıt vermesini sağlar. Örneğin sitenizde bir "Tura Katıl" düğmesinin olduğunu varsayalım. Düğmedeki metni, kullanıcılar üzerinde gezindiğinde "Haydi başlayalım!" metninin görüneceği şeklinde değiştirmek istiyorsunuz. Aşağıdaki adımları uygulayabilirsiniz:
- Sitenize Tura Katıl düğmesi ekleyin.
- Özellikler Panelinde, yeni eklediğiniz düğmenin varsayılan özellikleri gösterilir.
- Özellikler Panelinde ID adına tıklayarak ögeyi takeTourButton olarak yeniden adlandırın ve Enter düğmesine basın. Bu sayede öge daha kolay tanımlanır. (Bu gerekli değildir ancak yapılması önerilir.)
- Etkinlikler bölümünde onMouseIn üzerine gelin, + simgesine tıklayın ve Enter düğmesine basın.
- onMouseIn olay işleyicisinin adı gösterilir.
Kod Paneli de otomatik olarak açılır. Panelde şunları görebilirsiniz:
- Düğmedeki metni değiştiren kodu ekleyelim. Ardından geri dönüp nasıl çalıştığını göreceğiz. 4. satırda şunlar yazar: //Bu olay ile ilgili kodunuzu buraya ekleyin: bu metni $ ile değiştirin ve ardından Ctrl + Space tuşlarına basın.
- Bazı kodlarla birlikte sitenizdeki tüm ögelerin listesinin bulunduğu bir açılır pencere açılacaktır. Ok tuşlarını kullanarak aşağı inin ve $w("#takeTourButton") seçeneğini seçin.
- Enter'a bastığınızda seçtiğiniz ögenin kodu Kod Paneline eklenir.
- Satırın sonuna bir nokta ekledikten sonra ögenizle birlikte kullanabileceğiniz tüm özelliklerin, yöntemlerin ve olayların bir listesinin bulunduğu açılır pencere göreceksiniz. Ok tuşlarını kullanarak sayfayı aşağı kaydırın ve etiket özelliğini seçin.
- Enter'a bastığınızda seçtiğiniz kod, Kod Paneline eklenir.
- Etiketi yeni değere ayarlamak için satırın sonuna = "Haydi Başlayalım!"; ekleyin ve çalışmanızı kaydedin.
İşte bu kadar! Önizle'ye tıkladıktan sonra kodunuzun çalışıp çalışmadığını test edebilirsiniz. Tura Katıl düğmesi üzerine geldiğinizde değişerek şu şekilde görünecektir:
Kodu Anlama
Olay bölümünde onMouseIn olay işleyicisini seçtiğinizde iki şey olur: Bunlardan birini görüntüleyebilir ve diğerini görüntüleyemezsiniz. Bu satırların sayfanız için Kod Paneline eklendiğini, takeTour_mouseIn fonksiyonunun sayfa kodunuza eklendiğini görüntüleyebilirsiniz:
1export function takeTourButton_mouseIn(event) { ///kodunuzu buraya yazın }Bu fonksiyon, takeTourButton düğmesinin üzerine her gelindiğinde çalışan bir kod bloğudur. Çalışma şekli, olduğunu görüntüleyemediğiniz şeylerle ilgilidir.
Geliştirici Araçlarının sayfanıza kod eklediğini, üzerine gelinip gelinmediğini görüntülemek için düğmenizi izlediğini veya "dinlediğini" görüntüleyemezsiniz. Eğer öyleyse Geliştirici Araçlar takeTourButton_mouseIn fonksiyonunun içindeki tüm kodları çalıştırması gerektiğini bilir. Diğer bir deyişle takeTourButton düğmesinin üzerine her gelindiğinde { ve } arasındaki tüm kodlar çalıştırılır.Şimdi ise sırada olay işleyicisi içinde oluşturduğunuz kod var. Kod Paneline girmeniz gerekenlerden bazıları sadece söz dizimi kodudur. Söz dizimi, kodları kullanarak iletişim kurmamızı sağlayan kurallar dizisidir. Bizim durumumuzda ise ilk yapmamız gereken şey, koda takeTourButton düğmesine yapmak istediğimiz şeyi söylemektir. Bu işlemi $w("#takeTourButton") ile yaparız. Neden? Orada takeTourButton ögesinin adını açıkça görebilirsiniz. Kalanı ise koda "bu sadece kelime değil, aynı zamanda bir şey yapmak istediğim sayfamdaki ögenin adı" olduğunu belirten syntax'tır.
Her ögenin kendisiyle ilgili belirli özellikleri, yöntemleri ve olayları vardır. Özellikler, ögeniz hakkında bilmek veya değiştirmek isteyebileceğiniz şeylerdir. Yukarıdaki örnekte düğmemizin etiket metnini ayarlamak içi etiket özelliğini kullandık. Bağlantı ve id gibi diğer özelliklerin yanı sıra gizle ve etkinleştir gibi yöntemlerin de düğmeye yönelik listede yer aldığını fark etmiş olabilirsiniz. Ögeyle ilgili özellikler, yöntemler ve olayların listesi o ögeye özgüdür. Örneğin bir metin kutusunda etkinleştirme yöntemi yoktur çünkü bir metin kutusunu etkinleştirme söz konusu değildir. Ancak bir düğme etkinleştirilebilir (tıklanabilir) veya devre dışı bırakılabilir (tıklanamaz).
Ardından ögenin sonuna bir nokta ekledik. Bu da koda "Şimdi ögeyle ilgili özelliklerden, yöntemlerden veya olaylardan birinde çalışmak istiyorum" ifadesini söyler. Etiket, bir düğmenin üzerinde görünen metni kontrol eden özelliktir, dolayısıyla biz de bunu seçtik. Ardından tek yapmamız gereken etiket özelliğine yeni bir metin, bizim durumumuzda "Haydi Başlayalım!" metnini atamak olmuştur. Sonundaki noktalı virgül, "bunun satırın sonu" olduğunu belirten standart JavaScript söz dizimidir.
Geliştirici Araçlarının sayfanıza kod eklediğini, üzerine gelinip gelinmediğini görüntülemek için düğmenizi izlediğini veya "dinlediğini" görüntüleyemezsiniz. Eğer öyleyse Geliştirici Araçlar takeTourButton_mouseIn fonksiyonunun içindeki tüm kodları çalıştırması gerektiğini bilir. Diğer bir deyişle takeTourButton düğmesinin üzerine her gelindiğinde { ve } arasındaki tüm kodlar çalıştırılır.Şimdi ise sırada olay işleyicisi içinde oluşturduğunuz kod var. Kod Paneline girmeniz gerekenlerden bazıları sadece söz dizimi kodudur. Söz dizimi, kodları kullanarak iletişim kurmamızı sağlayan kurallar dizisidir. Bizim durumumuzda ise ilk yapmamız gereken şey, koda takeTourButton düğmesine yapmak istediğimiz şeyi söylemektir. Bu işlemi $w("#takeTourButton") ile yaparız. Neden? Orada takeTourButton ögesinin adını açıkça görebilirsiniz. Kalanı ise koda "bu sadece kelime değil, aynı zamanda bir şey yapmak istediğim sayfamdaki ögenin adı" olduğunu belirten syntax'tır.
Her ögenin kendisiyle ilgili belirli özellikleri, yöntemleri ve olayları vardır. Özellikler, ögeniz hakkında bilmek veya değiştirmek isteyebileceğiniz şeylerdir. Yukarıdaki örnekte düğmemizin etiket metnini ayarlamak içi etiket özelliğini kullandık. Bağlantı ve id gibi diğer özelliklerin yanı sıra gizle ve etkinleştir gibi yöntemlerin de düğmeye yönelik listede yer aldığını fark etmiş olabilirsiniz. Ögeyle ilgili özellikler, yöntemler ve olayların listesi o ögeye özgüdür. Örneğin bir metin kutusunda etkinleştirme yöntemi yoktur çünkü bir metin kutusunu etkinleştirme söz konusu değildir. Ancak bir düğme etkinleştirilebilir (tıklanabilir) veya devre dışı bırakılabilir (tıklanamaz).
Ardından ögenin sonuna bir nokta ekledik. Bu da koda "Şimdi ögeyle ilgili özelliklerden, yöntemlerden veya olaylardan birinde çalışmak istiyorum" ifadesini söyler. Etiket, bir düğmenin üzerinde görünen metni kontrol eden özelliktir, dolayısıyla biz de bunu seçtik. Ardından tek yapmamız gereken etiket özelliğine yeni bir metin, bizim durumumuzda "Haydi Başlayalım!" metnini atamak olmuştur. Sonundaki noktalı virgül, "bunun satırın sonu" olduğunu belirten standart JavaScript söz dizimidir.
Not:
Bu öğretici videoda olay ve bu olaya verilen yanıt aynı ögenin üzerinde gerçekleşir. Kullanıcının düğme üzerinde gezinip gezinmediğini izleyen bir olay ekliyoruz ve eğer eklenirse bu düğmenin etiketini değiştiriyoruz.
Olayla sınırlı olmadığınızı ve yanıtın aynı öge üzerinde olacağı, eylem üzerindeki tüm olayların sitenizdeki diğer tüm ögelerde bir yanıt oluşturabileceğini göz önünde bulundurmanız gerekir. Bunların tamamı fonksiyonunuzun içerisine yerleştirdiğiniz kodda seçtiğiniz ögeye bağlıdır.
Olayla sınırlı olmadığınızı ve yanıtın aynı öge üzerinde olacağı, eylem üzerindeki tüm olayların sitenizdeki diğer tüm ögelerde bir yanıt oluşturabileceğini göz önünde bulundurmanız gerekir. Bunların tamamı fonksiyonunuzun içerisine yerleştirdiğiniz kodda seçtiğiniz ögeye bağlıdır.