JAVASCRİPT - Nesneler

Window Nesnesi : Tarayıcı ile ilgili özellik ve metodun bulunduğu tarayıcı nesnesidir.

      DefaultStatus Özelliği : Tarayıcının alt kısmındaki durum çubuğunda gösterilecek mesajdır.

    

1- Alert Metodu

      Kullanıcıyı bilgilendirmek için uyarı pencereleri oluşturur.

2-  Confirm Metodu

     Yapılan işlem sonucu onay kutusu oluşturur.

     Onay kutusunun sonucu bir boolean olarak geri döner.

     True yada false şeklinde alınan cevap ile programın akışı belirlenir.

3-   Close Metodu

     Aktif olan sayfayı kapatır.

4-  Prompt Metodu

      Kullanıcıdan bilgi almak için kullanılır.

5-  Open Metodu

      Yeni bir pencere açar.

     3 adet para metre değeri alabilir:

     URL: Açılacak sayfanın adresi yazılır.

     NAME: Açılacak sayfanın target özelliği tanımlanır.

     ÖZELLİK: Açılacak sayfanın özelliklerini belirlediğimiz bölümdür. Buradaki parametreler ile sayfanın tam ekran açılması, boyutunun değiştirilip değiştirilemeyeceği, adres çubuğunun gösterilip gösterilmeyeceği gibi bir çok özellik değiştirilebilir.

 6-   Print Metodu

       Yazdırma penceresini açar.

7-   Find Metodu

       Kullanıcıdan bilgi almak için kullanılır.

8-   moveTo Metodu

       Sayfanın ekran üzerinde istenilen koordinata taşınmasını sağlar.

Navigator Nesnesi : Tarayıcı hakkında kullanıcıya bilgi veren nesnedir.

 Document Nesnesi :  Sayfa içindeki elemanların özelliklerini düzenlemeye yarayan nesnedir.

Form Nesnesi : Form elemanının özelliklerini düzenlemeye yarayan nesnedir.

Date Nesnesi : Tarih ve saat işlemleri için kullanılan nesnedir.

Math Nesnesi : Matematiksel işlemler için kullanılan nesnedir.

bir sonraki dersimizde görüşmek üzere esen kalın...ebi


yararlanılan kaynaklar:
hakanbabac.net

JAVASCRİPT - Olaylar

Olaylar

* Farenin herhangi bir yere tıklaması, klavyeden bir şeyler yazılması, sayfanın yüklenmesi vb. eylemler olaylarla kontrol edilebilir.

* Olayların gerçekleşmesi ile; yazılmış fonksiyonlar tetiklenir.

* HTML etiketlerinin neredeyse tamamına uygulanabilir.

onClick  :  HTML etiketlerinin üstüne tek tıklandığında gerçekleşen olaylara onClick olayları denir.

onDblClick  : HTML etiketlerinin üstüne çift tıklandığında gerçekleşen olaylara onDblClick olayları denir. 

onLoad  :  Sayfada herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder.  Body, img, frame ve frameset etiketlerinde kullanılabilir.

onUnLoad  :  Sayfada herhangi bir nesnenin kaldırılması veya kapatılması olayını temsil eder.

onFocus  :   Sayfadaki bir HTML elemanının seçilmesi veya o nesneye odaklanılması olayını temsil eder.

onBlur  :  SayfadaseçilenbirHTMLelemanınınseçimdençıkartılmasıolayınıtemsileder.

 onMouseOver  :  Farenin, sayfadaki bir HTML elemanının üzerine getirilmesi olayını temsil eder.

 onKeyDown  :   Klavyeden tuşa basma olayının temsil eder.  Metin kutusu nesnesinde klavyeden tuşa basıldığında olay dinleyicisi çalışır.

onSelect  :   Metin kutusu içindeki yazı seçildiğinde meydana gelen olayı temsil eder.

onResize :  Tarayıcı penceresinin boyutunun değişmesini temsil eden olaydır. Body etiketine yazılır.

bir sonraki dersimizde görüşmek üzere esen kalın...ebi


yararlanılan kaynaklar:
hakanbabac.net

JAVASCRİPT - Fonksiyonlar

Fonksiyonlar

*Tekrar eden kod bloklarının paketlenmesini sağlar.

*Uygulama içinde paket ismi kullanılarak istenilen yerde bu kodlar çalıştırılabilir.

*Böylelikle fonksiyon için de yapılacak değişiklikler ve hata kontrolleri otomatik olarak, ilgili sayfalara da yansıyacaktır.

Hazır Fonksiyonlar

parseInt() :  String ifadenin sayısal kısmını alarak tam sayıya çevirir.

parseFloat() :  İstenen ifadenin ondalıklı kısmını da alarak sayıya çevirir.

String() :  İstenen ifadeyi string türüne çevirir.

Number() :  İstenen ifadeyi sayı türüne çevirir. 

bir sonraki dersimizde görüşmek üzere esen kalın...ebi


yararlanılan kaynaklar:
hakanbabac.net

JAVASCRİPT - Diziler ve Dizi İşlemleri

Diziler

Dizi İşlemleri

push() : Dizinin sonuna yeni bir dizi elemanı eklemek için kullanılır.

pop() :  Dizinin sonundaki elemanı kaldırmak için kullanılır.

unshift() : Dizinin başına eleman / elemanlar eklemek için kullanılır.

shift() :  Dizinin başına elemanı kaldırmak için kullanılır.

delete :  Dizinin içinden eleman silmek için kullanılır. Eleman silinse de yeri, dizi içinde kalır.

splice() : Dizinin içinde istenen bölüme eleman eklemek veya o bölümden eleman silmek için kullanılır.

IndexOf  : Aranan elemanın dizi içindeki indis değerini verir.

!!! Aranan eleman dizi içinde yoksa -1 değeri döndürülecektir. !!!

Reverse() : Dizi elemanlarının ters çevrilmesini sağlar.

Sort() :  Dizi elemanlarını sıralamak için (a-z, 0-9) kullanılır

bir sonraki dersimizde görüşmek üzere esen kalın...ebi


yararlanılan kaynaklar:
hakanbabac.net

JAVASCRİPT - 1

Betik Dili (JavaScript)

    Betik dili, web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan, istemci tarafında çalışan bir dildir. Html etiketleri arasında tanımlanarak kullanılabilir. 1995 yılında Brendan Eich tarafından geliştirilmiştir. JavaScript dilini, c dilinin web sayfalarına uyarlanmış basit sürümü olarak düşünülebilirsiniz.

    JavaScript dili isim benzerliğine rağmen Java ile birbirinden bağımsız ve farklı dillerdir. Java gerçek bir programlama dilidir. JavaScript ise bir script dildir. JavaScript dili, C, Scheme, Java, Perl, Python,Self dillerinden etkilenmiş ve geliştirilmiştir. JScript, JScript .NET,Objective-J, TIScript dillerinin oluşturulması için kullanılmış ve gelişmesine yardımcı olmuştur. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır

     Javascript HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına .js uzantılı JavaScript kodları da yazılabilir..

     Başlangıçta sadece Netscape tarafından desteklenen dil, şimdi tüm tarayıcılar tarafından desteklenmekte ve kullanılmaktadır. Temel script komutları her tarayıcıda çalışmasına rağmen ileri düzey komutlar bazı tarayıcılar tarafından tam olarak desteklenmemektedir. Script komutlarının tarayıcı üzerinde çalışıp çalışmamasını, güvenlik açısından kullanıcının belirlemesi sağlanmıştır. isteyen kişi, tarayıcı ayarlarından script kullanımını kapatabilir.

HTML’de JavaScript Kodlarını Tanıtma 

Kodların HTML’dekiKonumu

 

  Yazım Kuralları

HTML etiketleri gibi boşlukları önemsemez.

                                      sayi=10     sayi= 10

BÜYÜK-küçük harf duyarlı bir dildir.

                                      ad ≠ Ad ≠ AD ≠ aD

JS dilinde değişkenler, fonksiyonlar vb. nesneler;

*Sayı ile başlayamaz.

*Kelimeler arasında boşluk kullanılamaz.

*Boşluk yerine _ işareti kullanılır. *JSdiliiçinayrılmışkelimelerherhangibirnesneyeisimolarakverilemez.

  

Özel İşaret Gösterimi

 JS kodları içerisinde özel karakter kullanılacaksa; özel karakterin başına \ işareti eklenmelidir.

Açıklama Satırları

// simgesi kullanılarak tek satır halinde açıklama satırı eklenebilir. İfade alt satıra geçtiğinde açıklama satırından çıkılmış olur.

 /* */ ifadeleri arasına yazılan her şey açıklama olarak alınır. Satır sınırlaması yoktur.

bir sonraki dersimizde görüşmek üzere esen kalın...ebi


yararlanılan kaynaklar:
hakanbabac.net

HTML5-CSS3 ANİMASYON

Animation: Daha kaliteli animasyonlar yapabilmek için kullanılan CSS3 kodudur. Transform ve Transition ile yaptığımız efektleri daha esnek hale getirmek için animation kullanılır. Animation ile her nesnenin efektini, bu efektlere ait zamanlamayı ve her efekte ait hız biçimlendirmesini daha esnek bir şekilde yapabiliriz.

Transform ve Transition da efektin farklı olduğu kısmı nesneye ait CSS kodunun Hover özelliğinde veriyorduk. Bu da o efektin nesnenin üzerine geldiğimizde çalışmasını sağlıyordu. Animation da ise bu farklılıkları @keyframes özelliğinde vereceğiz böylece daha sayfa yüklenir yüklenmez animasyon çalışmaya başlayacaktır.
Media queries:@mediascreen özelliği sayesinde daha responsive yani ekran özelliklerine göre kendini daha kolay ayarlayabilen tasarımlar yapmak kolaylaşmıştır. Bu özellikle 400px genişliğe sahip ekranda farklı 1024px genişliğe sahip ekranda farklı düzen ve tasarımda şekillendirme sağlanabilmektedir. Hangi özelliklerin hangi ekran boyutunda çıkması gerektiğini bu özellikle tanımlayabilmekteyiz.
aşağıda animasyon örneği görüyorsunuz. Browser sayfanız tam sayfa ise araba, sayfanızı küçültürseniz roketi görürsünüz.

BURADAN KODLARINI İNDİREBİLİRSİNİZ.
Animasyonun_Kodları

HTML5-CSS3 ÖZELLİKLERİ

Merhaba arkadaşlar bugün HTML5 ile gelen CSS3 özelliklerine bakacağız.

Color, özelliği CSS’teyazı rengi, arkaplanrengi, kenarlık rengi gibi bir çok alanda kullanılmaktadır. CSS3 ile birlikte renk efektleri gelişmiş ve daha esnek bir yapıya kavuşmuştur. Renk işlemlerinde saydamlık vermek için RGBA() renk fonksiyonu kullanılmaktadır. Bu fonksiyon ilk üçü RGB renk yoğunluve sonuncusu da Alpha (saydamlık)değeri olmak üzere 0-255 arası değerler almaktadır. Alpha değeri 0-1 arasında değişir ve 0 olduğunda görünmez yani saydam 1 olduğunda da tam görünürdür. Bu değer ayarlanarak saydamlık gerçekleştirilir.

Aynı saydamlık olayını istersek opacityözelliğiyle de verebiliriz.

Gradients, özelliği arkaplanrengini biçimlendirme de kullanılmaktadır linearve radialolmak üzere iki çeşittir. CSS3 ile birlikte gelen bu renk efektleri birden fazla rengin tanımlandığı gelişmiş bir görsellik sunmaktadır.

Shadows, özelliği yazı ve kutuların (div) gölgelendirnesindekullanılmaktadır text-shadow(yazıya gölge) ve box-shadow(kenaralık gölge) olmak üzere iki çeşittir.

2D transform, özelliği nesneleri iki boyutlu olarak hareket ettirmeye ve düzenlemeye yarar. Birden fazla özelliği bulunmaktadır.

Kullanım şekilleri :

transform:rotate(-20deg);

Özellikleri,

3D transform, özelliği nesneleri üç boyutlu olarak hareket ettirmeye ve düzenlemeye yarar. İki boyutluda kullanılan çoğu özellik burada kullanılır.

Kullanım şekilleri :

transform:rotateX,rotateY, rotateZ(-20deg); olmak üzere üç adet döndürme özelliği vardır.

Transitions, özelliği nesnelere hareket efekti vermekte kullanılır. Efekt uygulanabilmesi için nesnelerin özelliklerinin iki farklı değeri belirli olması gerekir. Genellikler bir değer (başlangıç değeri) standart CSS kodunda verilirken, diğer değer(bitiş değeri) üzerine gelindiğinde (hover) CSS özelliğinde tanımlanır.

Kullanım şekilleri :

transition:efek_tipiEfektin_süresi;

Özellikleri;

transition-timing-function: Efektin nasıl uygulanacağını zamanlama ayarının nasıl olacağını belirlemede kullanılır. Örnek olarak efekt başta hızlı, sona yaklaştıkça daha yavaş olabilir. Alacağı değerler şunlardır: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

  bir sonraki dersimizde görüşmek üzere esen kalın... ebi 

yararlanılan kaynaklar:

Öğr. Gör. M. Mutlu YAPICI[WEB Adresi]