- 16 Mar 2018
- 182
- 1
Fotoğraf değiştirici eklemek
Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.
Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.
Bu fotoğrafı images(resimleri tuutuğunuz dosya) klasörüne ekleyin.
Bu resmi 'THT2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.
main.js dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.)
Bütün dosyaları kaydedin ve tarayıcınızda index.html dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.
Buraya kadar, img elementimizin src özelliğini myImage değişkeninde saklıyoruz. Sonra değişkenin onclick olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:
Fotoğrafın src özelliğini getiriyoruz.
İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması.
Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede <image> elementinin gösterdiği görsel değişiyor.
Değilse (yani değiştirdiysek), src değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.
Web Sitenize Kişiselleştirilmiş Mesajı Eklemek
Kullanıcı siteye ilk girdiğinde sitenin başlığını kişiselleştirilmiş merhaba mesajı ile değiştireceğiz. Bu hoş geldiniz mesajı, kullanıcının siteden ayrılması ve daha sonra geri dönmesi durumunda devam eder - Web Depolama API'sini kullanarak kaydedeceğiz. Ayrıca, kullanıcıyı ve dolayısıyla hoş geldiniz mesajını gerektiğinde değiştirmek için bir seçenek de oluşturacağız.
ndex.html dosyasında, <script> elementini aşağıdaki satırdan önce ekleyin.
main.js dosyasına, yazılan kodu olduğu gibi dosyanın en altına ekleyin. Bu kod satırları yeni buton ve başlığı referans alarak değişkenlerin içinde depolar.
Kişiselleştirilmiş merhaba'yı eklemek için sıradaki fonksiyonu oluşturun - bu şu anlık hiçbir şey yapmayacak fakat biraz sonra bunu düzelteceğiz.
Bu fonksiyon alert() gibi ekrana bir diyalog kutusu getiren bir prompt() fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı Tamam dediği anda bu bilgiyi bir değişken'de saklar. Bu arada biz kullanıcıdan kendi ismini girmesini istiyoruz. Daha sonra tarayıcı'da bilgi saklamamızı ve daha sonra geri almamızı sağlayan localStorage API'ını çağırıyoruz. Kullanıcıdan aldığımız 'name' verisini oluşturmak ve saklamak için localStorage'in setItem() fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın textContent değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.
Daha sonra, bu if ... elsebloğu ekleyin - uygulamayı ilk yüklediğinde ayarladığı için buna başlatma kodu diyebiliriz:
Bu blok önce nameveri öğesinin var olup olmadığını kontrol etmek için olumsuzlama operatörünü (mantıksal DEĞİL) kullanır . Değilse, setUserName()işlev onu oluşturmak için çalıştırılır. Öyleyse (yani, kullanıcı bir önceki ziyaret sırasında ayarladı), saklanan adı kullanarak alırız ve başlığın bir dizeye ek olarak kullanıcının adını içeride yaptığımız gibi getItem()ayarlarız .textContentsetUserName()
Son olarak, onclicktıklatıldığında setUserName()işlev çalıştırılacak şekilde aşağıdaki olay işleyicisini düğmeye koyun . Bu, kullanıcının düğmeye basarak istediği zaman yeni bir ad belirlemesini sağlar:
Şimdi siteyi ilk ziyaret ettiğinizde, sizden kullanıcı adınızı soracak ve size kişiselleştirilmiş bir mesaj verecektir. Daha sonra düğmesine basarak adı istediğiniz zaman değiştirebilirsiniz. Ek bir avantaj olarak, ad localStorage içinde saklandığından, site kapatıldıktan sonra da devam eder, bu nedenle siteyi tekrar açtığınızda kişiselleştirilmiş mesaj yine de orada olacaktır!
Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.
Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.
Bu fotoğrafı images(resimleri tuutuğunuz dosya) klasörüne ekleyin.
Bu resmi 'THT2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.
main.js dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.)
Kod:
var myImage = ********.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/THT.png') {
myImage.setAttribute ('src','images/THT2.png');
} else {
myImage.setAttribute ('src','images/THT.png');
}
}Bütün dosyaları kaydedin ve tarayıcınızda index.html dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.
Buraya kadar, img elementimizin src özelliğini myImage değişkeninde saklıyoruz. Sonra değişkenin onclick olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:
Fotoğrafın src özelliğini getiriyoruz.
İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması.
Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede <image> elementinin gösterdiği görsel değişiyor.
Değilse (yani değiştirdiysek), src değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.
Web Sitenize Kişiselleştirilmiş Mesajı Eklemek
Kullanıcı siteye ilk girdiğinde sitenin başlığını kişiselleştirilmiş merhaba mesajı ile değiştireceğiz. Bu hoş geldiniz mesajı, kullanıcının siteden ayrılması ve daha sonra geri dönmesi durumunda devam eder - Web Depolama API'sini kullanarak kaydedeceğiz. Ayrıca, kullanıcıyı ve dolayısıyla hoş geldiniz mesajını gerektiğinde değiştirmek için bir seçenek de oluşturacağız.
ndex.html dosyasında, <script> elementini aşağıdaki satırdan önce ekleyin.
Kod:
<button>Change user</button>main.js dosyasına, yazılan kodu olduğu gibi dosyanın en altına ekleyin. Bu kod satırları yeni buton ve başlığı referans alarak değişkenlerin içinde depolar.
Kod:
var myButton = ********.querySelector('button');
var myHeading = ********.querySelector('h1');Kişiselleştirilmiş merhaba'yı eklemek için sıradaki fonksiyonu oluşturun - bu şu anlık hiçbir şey yapmayacak fakat biraz sonra bunu düzelteceğiz.
Kod:
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Mozilla is cool, ' + myName;
}Bu fonksiyon alert() gibi ekrana bir diyalog kutusu getiren bir prompt() fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı Tamam dediği anda bu bilgiyi bir değişken'de saklar. Bu arada biz kullanıcıdan kendi ismini girmesini istiyoruz. Daha sonra tarayıcı'da bilgi saklamamızı ve daha sonra geri almamızı sağlayan localStorage API'ını çağırıyoruz. Kullanıcıdan aldığımız 'name' verisini oluşturmak ve saklamak için localStorage'in setItem() fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın textContent değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.
Daha sonra, bu if ... elsebloğu ekleyin - uygulamayı ilk yüklediğinde ayarladığı için buna başlatma kodu diyebiliriz:
Kod:
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla is cool, ' + storedName;
}Bu blok önce nameveri öğesinin var olup olmadığını kontrol etmek için olumsuzlama operatörünü (mantıksal DEĞİL) kullanır . Değilse, setUserName()işlev onu oluşturmak için çalıştırılır. Öyleyse (yani, kullanıcı bir önceki ziyaret sırasında ayarladı), saklanan adı kullanarak alırız ve başlığın bir dizeye ek olarak kullanıcının adını içeride yaptığımız gibi getItem()ayarlarız .textContentsetUserName()
Son olarak, onclicktıklatıldığında setUserName()işlev çalıştırılacak şekilde aşağıdaki olay işleyicisini düğmeye koyun . Bu, kullanıcının düğmeye basarak istediği zaman yeni bir ad belirlemesini sağlar:
Kod:
myButton.onclick = function() {
setUserName();
}Şimdi siteyi ilk ziyaret ettiğinizde, sizden kullanıcı adınızı soracak ve size kişiselleştirilmiş bir mesaj verecektir. Daha sonra düğmesine basarak adı istediğiniz zaman değiştirebilirsiniz. Ek bir avantaj olarak, ad localStorage içinde saklandığından, site kapatıldıktan sonra da devam eder, bu nedenle siteyi tekrar açtığınızda kişiselleştirilmiş mesaj yine de orada olacaktır!
