Web Tasarım Javascript Örnekleri

Web sayfalarında kullanılan JavaScript nedir, ne işe yarar, ne demek gibi sıkca sorulan sorularla  ilgili kısa bilgiler yer alıyor.

JavaScript 1995 yılında Brendan Eich tarafından geliştirilmiş tarayıcı üzerinde çalışan, web sayfalarına dinamiklik katmak ve kullanıcı ile etkileşimi arttırmak için kullanılan betik dilidir.

Java ile JavaScript karıştırılmaktadır. Java bir programlama dili JavaScript ise betik dilidir.

Programlama dili kodları makine koduna çevrilip çalıştırılırken betik dili kodları interpreter tarafından yorumlanarak çalıştırılır.

JavaScript günümüzde tüm tarayıcılar tarafından desteklenmektedir.

JavaScript nerelerde kullanılır?

HTML ve CSS’in yetersiz kaldığı hesaplama, form elemanlarını kontrol etmek gibi işlemlerde kullanılır.

Örneğin; HTML ile oluşturulan iki adet input nesnesine girilen sayıları butona tıkladığımızda hesaplamak için JavaScript kullanabiliriz.

JavaScript web sayfalarında kullanılmak için çıkmış olsa da günümüzde JavaScript yorumlayıcısı (interpreter) kullanılarak sunucu taraflı çalışan uygulamalar geliştirilmektedir.

JavaScript nasıl etkinleştirilir

Tarayıcınızın JavaScript desteğini http://enable-javascript.com adresindeki adımları takip ederek etkinleştirebilirsiniz.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Bu yazımda web tasarım örnekleri ile ilgili daha önceden yapmış olduğumuz örneklerin tamamını listeledim. Örneklerimizin bazılarında Html ve Css, bazılarında etkileşim kazandırmak adına Javascript ve Jquery kullandım. Son olarakta Bootstrap kullanarak bazı web tasarım örnekleri oluşturdum.  

Yapmış olduğumuz örnekleri kendi bilgisayarınızda uygulamalı olarak öğrenmeye çalışırsanız, hem daha hızlı hem de daha kalıcı bir şekilde öğrenmiş olursunuz.

Örnekleri incelerken;

⇒  Html ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE HTML DERSLERİ yazımdan tüm konulara göz atabilirsiniz.

⇒  Css ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımdan tüm konulara göz atabilirsiniz.

⇒  Jquery ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE JQUERY DERSLERİ yazımdan tüm konulara göz atabilirsiniz.

⇒  Bootstrap ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE BOOTSTRAP DERSLERİ yazımdan tüm konulara göz atabilirsiniz.

Şu ana kadar web tasarım örnekleri ile ilgili yapmış olduğumuz bütün uygulamaları aşağıda listeledim. Herbir örnek için ilgili örneğin detaylarına ve kodlarına link verdim. Bundan sonra yapacağımız yeni örneklerin linklerini de buraya eklemeye devam edeceğim.

Burada bulunan örneklerin dışında web tasarım ile ilgili neyin nasıl yapıldığını öğrenmek istiyorsanız yorum kısmından önerilerde bulunabilirsiniz. Böylece bu örneklere öncelik verebiliriz.

HTML VE CSS İLE WEB TASARIM ÖRNEKLERİ

⇒ Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma

⇒ Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

⇒ Html ve Css ile Sosyal Medya Butonları Yapımı

⇒ Css ile Dikey Menü Yapımı

⇒ Css ile Dikey Sabit Menü Yapımı

⇒ Css ile Yatay Menü Yapımı

⇒ Css ile Yatay Açılır Menü Yapımı

⇒ Css ile Yatay Sabit Menü Yapımı

⇒ Css ile Yatay Sticky Menü Yapımı

⇒ Css ile Dropdown Yapımı

⇒ Hazır Css Kodları (Margin ve Padding)

⇒ Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

⇒ Html ve Css ile Üçgen Yapımı

⇒ Css ile Tooltip Yapımı

⇒ Html ve Css ile Breadcrumb (İçerik Haritası) Yapımı

⇒ Css ile Özel Checkbox (Custom Checkbox) Yapımı

⇒ Css ile Özel Radio Button (Custom Radio Button) Yapımı

⇒ Html ve Css ile Dikey Çizgi Nasıl Yapılır?

⇒ Html ve Css ile Animasyonlu Arama Kutusu Yapımı

⇒ Html ve Css ile Pagination (Sayfalama Butonları) Yapımı

⇒ Css ile Loading Yapımı

⇒ Loading Gif Örnekleri – Yükleniyor Gif Örnekleri

⇒ Css ile Toggle Switch Yapımı

⇒ Html ve Css ile Responsive Timeline Yapımı

⇒ Html ve Css ile Güp Güp Atan Kalp Yapımı

⇒ Css ile Resimleri Responsive (Mobil Uyumlu) Yapma

⇒ Html ve Css ile Zıplayan Top Uygulaması

⇒ Html ve Css ile 2 Duvar Arasında Gidip Gelen Top Uygulaması

⇒ Html ve Css ile Kalp Yapımı

⇒ Html ve Css ile Responsive Takvim Yapımı

⇒ Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı

⇒ Html ve Css ile Yan Menü Butonları Yapımı

⇒ Html ve Css ile Türk Bayrağı Yapımı

⇒ Html ve Css ile Gökyüzü Tasarımı Yapımı

⇒ Html ve Css ile Zıplayan Toplar Animasyonu Yapımı

HTML, CSS VE JQUERY İLE WEB TASARIM ÖRNEKLERİ

⇒ Responsive Menü Yapımı

⇒ JQuery ile Tabloda Arama Yapmak

⇒ JQuery ile Listede Arama Yapmak

⇒ Animasyonlu Hamburger İcon Yapımı

⇒ Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

⇒ Jquery ile Beğendim – Beğenmedim Uygulaması

⇒ JQuery ile Kalan Karakter Sayısı Uygulaması

⇒ JQuery ile Tab Menü Yapımı (Sekmeli Menü Yapımı)

⇒ Html, Css ve JQuery ile Sekmeli Galeri Yapımı (Tab Gallery)

⇒ Html, Css ve JQuery Kodları ile Slider Yapımı

⇒ Html, Css ve JQuery ile Haber Galerisi Yapımı (News Gallery)

⇒ JQuery ile Popup Yapımı (Popup Kodları)

⇒ Jquery ile Rating Stars Yapımı – Puan Verme

⇒ Jquery ile Rating Stars Yapımı – Verilen Puanların Ortalamasını Gösterme

HTML, CSS VE JAVASCRIPT İLE WEB TASARIM ÖRNEKLERİ

⇒ JavaScript ile Resmin Üzerine Gelince Zoom Yapma

BOOTSTRAP 4 İLE WEB TASARIM ÖRNEKLERİ

⇒ Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma

HTML VE SCSS İLE WEB TASARIM ÖRNEKLERİ

⇒ HTML ve SCSS ile Yatay Menü Yapımı

⇒ Html ve SCSS ile Üçgen Yapma Fonksiyonu (Mixin ve if-else Uygulaması)

Web tasarım örnekleri ile ilgili örnek ve uygulamalar şimdilik bunlar. 

Umarım sizin için faydalı örnekler olmuştur.

Yeni bir yazımda görüşmek üzere.

Benzer belgeler

Daha World Wide Web fikri ortaya çıkmadan, “Netscape” yazılım ekibinden “Brendan Eich”, Eylül 1995’te yaklaşık 10 günlük bir sürede ileriki zamanlarda “LiveScript”, günümüzde “Javascript” olarak tanıdığımız script dilini geliştirmiştir. O zamanlar bu script diline Netscape yazılımının navigatör özelliği için ihtiyaç duyulmuş, Netscape’in kendi web tarayıcısındaki Java desteğinden dolayı Livescript’in adı sonralardan Javascript olarak güncellenmiştir.

Brendan Eich

Javascript ve Java Arasında Herhangi Bir İlişki Var Mı?

Belirttiğim gibi Javascript, Netscape’in kendi web tarayıcısındaki Java desteğinden dolayı bu isme sahiptir fakat başka bir açıdan da bakmak gerekiyor. Livescript’in ortaya çıktığı yıllarda Java programlama dili popüler olduğundan dolayı Livescript’in imajını bir üst seviyeye çıkarmak için biz buna artık Javascript diyelim denmiştir. Tabii ki uzun bir zaman sonra Javascript Java’dan bile daha popüler bir programlama dili haline gelmiş ama adında bir değişiklik yapılmamıştır.

Vanilla Javascript’i Hiç Duydunuz Mu?

Javascript günümüzde birçok framework bir başka ifade ile hazır olarak kullanılabilecek kütüphaneye sahip olduğu için eskiye göre kullanımı daha da kolaylaşmış, ayrıca web sayfa geliştiricilerinin iş üretim hızını bir üst noktaya taşımış, bunlarla da kalmayarak web sayfaların daha güvenli bir hale gelmesine katkılar sağlamıştır. İşte bu frameworklerden arındırılmış bir şekilde Javascript yazmaya başladığınızda yazdıklarınız Vanilla Javascript olarak adlandırılır.

Birkaç örnek vermek gerekirse…

İlk olarak class değeri “my-pg” olan bir p yani paragraf oluşturduk. Ve ekrana “Hello World!” yazdırmak istedik. Web tarayıcınızda bu kodları çalıştırdığınızda Hello World yazıldığını görmeyi umabilirsiniz fakat yazdığımız küçük “Vanilla Javascript” sayesinde paragrafın içeriğini “This is going to be printed!” yaparak ekrana yazılacak değeri değiştirmiş olduk.

Ta da…

Peki bunu bir framework kullanarak nasıl yapardınız?

Gelin beraber “jQuery” kütüphanesini kullanarak aynı sonucu elde edelim.

Hadi başlayalım! Öncelikle jQuery kütüphanemizi HTML dosyamıza dahil etmemiz gerekiyor (head etiketi içerisinde bu işi hallettik). Sonra jQuery’de bir seçici ($) kullanarak paragraf etiketinin sahip olduğu sınıf adı ile birtikte ilgili HTML elemanına erişiyoruz. Bundan sonrası p objesine bağlı text fonksiyonunu çağırarak paragrafın içeriğini değiştiriyoruz. Bütün aşamaları uyguladığınızda Vanilla Javascript ile aldığımız sonucun aynısını göreceksiniz.

Web Sayfalar Nasıl Çalışır?

Kısaca bir web sayfasını açtığınızda neler olduğundan bahsedeyim. Bir web tasarım açtığınızda HTML, CSS, Javascript, ilgili imajlar ve birçok farklı dosya çalıştırılmak ya da görüntülenmek üzere yüklenir. Bütün bu işlemler “execution environment” yani web tarayıcınızın bir tabinde gerçekleşir. Bu işlemler bir kek yapmak için sıfırdan malzemeleri hazırlamak ve sonunda ortaya bir ürün çıkarmaya benzer.

Her web sayfasının kendine özel bir “execution environment”ı vardır. Bu durum web sayfaların birbirinden bağımsız bir şekilde çalışmasına olanak sağlar. Böylelikle çeşitli güvenlik sorunlarının önüne geçilmiş olur. Tabii ki bahsettiğimiz durum web sayfaların birbirleriyle iletişim kuramadıkları anlamına gelmez fakat bu makalede bu konuyla ilgilenmeyeceğiz.

Javascript Nasıl Çalışır?

Javascript, hafif yapıdaki bir programlama dilidir. Modern Javascript derleyiciler, “just-in-time compiling” adını verdikleri bir metod ile hali hazırda çalışan scriptleri “binary” yani makinelerin daha hızlı çalıştırabildiği bir formata dönüştürerek web sayfaların Javascript’ten dolayı yavaşlamasını engeller. Bu derleme sürecinin aksine Javascript günümüzde halen bir yorumlanan (interpreted) dil olarak kabul edilir. Bunun sebebi derlemenin kodlar çalıştırmadan önce değil, kod çalışıyor olduğu zamanda (run time) yapıldığı içindir.

Yorumlanan (Interpreted) ve Derlenen (Compiled) Diller Arasındaki Farklar Nelerdir?

Interpreted programlama dilleri, bir compiled programlama dilinin üzerine inşa edilmiştirler ve daha basit yapıdadırlar. Fakat derlenen dillerden daha az performasa sahiptirler. Yorumlanan diller, makine dili formatına dönüştürülmeden çalıştırılırlar.

Compiled programlama dilleri ise derleme işlemine tabi tutularak makinelerin anlayabileceği talimatlara bir başka ifade ile daha önceden tanımlanmış kod bloklarına dönüştürülürler.

Yorumlanan bir dil kullanarak yazılmış programlar, her çalıştırılmak istendiğinde tekrar tekrar yorumlanır fakat derlenen bir programlama dili ile yazılanlar ise bir kez derlenir ve bir daha başka bir işleme ihtiyaç duymazlar. Böylelikle daha hızlı bir şekilde çalıştırılırlar.

Javascript’in Üzerine Kurulmuş Diller

Javascript’in yapısı ve her yazılım geliştiricinin farklı tercihlerinden dolayı JS bazen tercih edilmiyor olabiliyor. Bu ve bunun gibi ihtiyaçlardan yola çıkarak Javascript mimarisi üzerine yeni yeni diller geliştirilmiştir ve kullanıma sunulmuştur. Bu dillerden bazıları: CoffeeScript, TypeScript, Flow, Dart… Bu dillerin temeldeki çalışma prensibine bakacak olursak, kendi dil kuralları çerçevesinde yazılanları daha çalıştırmadan Javascript’e dönüştürdüklerini görürüz. Böylelikle Javascript yazmıyor olsak bile o teknolojiden faydalanmış oluyoruz.

Javascript Nerelerde Kullanılır?

1. Özellikle node.js ile karşımıza çıkan web server (sunucu) yazılımlarında.
2. React Native gibi birçok kütüphane yardımıyla mobil geliştiricilikte.
3. Akıllı saatlerde.
4. Oyunlarda.
5. Web sayfaları daha dinamik bir yapıya ulaştırmak için kullanılır. Ayrıca özel animasyonlar sayesinde web tasarımları daha da etkili bir hale getirmek için tercih edilir.

Ve bunlar gibi birçok alanda da karşımıza çıkar.