Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir JavaScript eğitim dersidir. Eğitmen, programlama dillerinin temellerini anlatan bir oynatma listesinin parçasıdır.
- Video, JavaScript'in ne olduğu ve temel kullanım alanları ile başlayıp, Visual Studio Code'da JavaScript projesi oluşturma, değişkenler, dizi yapısı, döngüler, koşullu ifadeler, fonksiyonlar, objeler ve constructor pattern gibi temel konuları adım adım anlatmaktadır. Son bölümde ise JavaScript eventleri ve form doğrulama işlemleri ele alınmaktadır.
- Eğitim boyunca her konu için kod örnekleri gösterilmekte, JavaScript'in diğer dillerden farkları vurgulanmakta ve özellikle nesne tabanlı yapısı detaylı şekilde açıklanmaktadır. Video, HTML sayfalarında JavaScript'in nasıl kullanılacağını, eventleri nasıl yönetebileceğimizi ve form doğrulama işlemlerini nasıl gerçekleştirebileceğimizi pratik uygulamalarla göstermektedir.
- 00:12JavaScript'e Giriş
- Bu video, JavaScript'in temellerini öğrenmek için hızlı bir giriş sunuyor.
- JavaScript, HTML sayfalarını daha dinamik ve interaktif hale getirmek için kullanılan bir programlama dili.
- JavaScript hem front-end hem de back-end geliştirme için kullanılabilir ve günümüzde birçok framework'in temelini oluşturuyor.
- 02:01JavaScript Programlama İçin Gerekli Araçlar
- JavaScript ile programlama yapmak için web tarayıcısı (Chrome, Firefox, Safari) ve bir editör (Visual Studio Code, Sublime, Notepad++) gerekiyor.
- Visual Studio Code, programlama için popüler bir editör olup, Django, Python ve diğer programlama dilleri için de kullanılabilir.
- Visual Studio Code'da JavaScript ve HTML için eklentiler (snippet, intellisense) kurulabilir.
- 05:17HTML Sayfası Oluşturma
- Visual Studio Code'da yeni bir dosya oluşturulup, index.html adı verilebilir.
- HTML sayfası, header ve container adlı iki div içerebilir.
- HTML sayfası, Visual Studio Code'dan Google Chrome gibi bir tarayıcıda açılabilir.
- 06:56JavaScript'in Kullanım Şekilleri
- JavaScript'i dışarıdan bir dosya olarak dahil etmek için head etiketinin arasına script etiketi ve src özelliği kullanılır.
- JavaScript kodları doğrudan HTML sayfasında script etiketleri arasına yazılabilir.
- JavaScript kodları güvenli bir şekilde body etiketinin sonuna yazılmalıdır, böylece diğer elementler yüklenmeden önce çalışmayacaktır.
- 09:37JavaScript Kodlarının Çalıştırılması
- Alert fonksiyonu kullanılarak ekrana uyarı mesajı yazdırılabilir.
- Chrome tarayıcısında F12 tuşu ile açılan konsol sayfası kullanılarak JavaScript kodları test edilebilir.
- Konsol sayfası aynı zamanda hata ayıklama için de kullanılabilir, hatalar konsolda görüntülenir.
- 11:59JavaScript'te Değişken Tanımlama
- JavaScript'te değişken tanımlamak için "var" anahtar kelimesi kullanılır.
- Sayısal değerler doğrudan toplanabilir, ancak toplama işlemi için parantez kullanmak önemlidir.
- String değerler birleştirilebilir, bu durumda "+" operatörü kullanılır.
- 15:18Değişkenlerin Değerlendirilmesi
- Değişkenlerin değerleri atandıktan sonra, bu değerler diğer hesaplamalarda kullanılabilir.
- Değişkenlerin değerleri ekrana yazdırılabilir.
- Birden çok değeri depolayabildiğimiz dizi veri türleri de JavaScript'te kullanılabilir.
- 16:12Array Veri Tipi
- Array, birden çok değeri depolayabildiğimiz bir veri tipidir ve köşeli parantezler içinde değerler atanır.
- Array'de farklı veri tipinden değerler aynı anda depolanabilir, örneğin "java", "python", "c++", "c" gibi string değerler.
- Array'de indekslenme sıfırdan başlayarak 0, 1, 2, 3 şeklinde ilerler ve elemanlara köşeli parantez içinde indeks numarası kullanılarak erişilir.
- 18:31Array İşlemleri
- Array'e yeni eleman ekleme için iki yöntem vardır: direkt indeks numarasına değer atama veya array.push() metodu kullanma.
- Array'in içindeki eleman sayısını array.length özelliği ile bulabiliriz.
- Array'in öyle bir indeksi olmadığı durumda "undefined" hatası alınır.
- 20:26For Döngüsü
- For döngüsü, diğer dillerdeki for döngüsüne benzer şekilde çalışır ve for(değişken; koşul; artış) şeklinde tanımlanır.
- For döngüsü, belirtilen koşul sağlandığı sürece çalışır ve her döngü sonunda değişken değeri artırılır.
- For döngüsü ile konsola değerler yazdırılabilir.
- 21:55While Döngüsü
- While döngüsü, diğer dillerdeki while döngüsüne benzer şekilde çalışır ve belirtilen koşul sağlandığı sürece döngü devam eder.
- While döngüsünde değişken değeri otomatik olarak artmaz, bu yüzden her döngü sonunda manuel olarak artırılmalıdır.
- While döngüsü ile sadece çift sayıları yazdırmak gibi belirli koşullar uygulanabilir.
- 23:39Array Elemanlarını Yazdırma
- Array'in elemanlarını yazdırmak için for döngüsü kullanılabilir.
- For döngüsü ile 0'dan başlayarak array.length'e kadar olan indeksler üzerinde dolaşılabilir.
- Array'in elemanlarını yazdırmak için pratik yöntemler de bulunmaktadır.
- 26:13JavaScript'te Döngüler
- "forEach" metodu, bir dizi üzerindeki elemanları tek tek gezerek işlem yapmamızı sağlar.
- "forEach" metoduna bir fonksiyon göndererek, her eleman üzerinde bu fonksiyonun çalışmasını sağlayabiliriz.
- "console.log" kullanarak her elemanın değerini ekrana yazdırabiliriz.
- 27:27Koşul Durumları
- JavaScript'te koşul durumları (if-else) C, C++, Java gibi dillere benzer şekilde çalışır.
- "if" koşulu, belirtilen şart doğruyken çalışır, yanlışsa çalıştırılmaz.
- "else" bloğu, "if" koşulu sağlanmadığında çalışır.
- 29:25Karşılaştırma Operatörleri
- JavaScript'te iki eşit işareti (==) sadece değerleri karşılaştırırken, üç eşit işareti (===) hem değerleri hem de veri tiplerini karşılaştırır.
- İki eşit işaretle string ve sayı karşılaştırıldığında, değerleri aynı olsa bile veri tipleri farklı olduğu için sonuç yanlış olabilir.
- Üç eşit işaretle hem değerlerin hem de veri tiplerinin aynı olması gerekir.
- 31:23Mantıksal Operatörler
- "&&" (and) operatörü, bağlanan tüm koşullar doğruyken genel sonuç doğru olur.
- "||" (or) operatörü, bağlanan koşullardan en az biri doğruyken genel sonuç doğru olur.
- "!" (not) operatörü, koşulun tersini alır (doğruyse yanlış, yanlışsa doğru).
- 34:46if-else Yapıları
- "if-else" yapıları, bir koşul sağlandığında bir blok, sağlanmadığında başka bir blok çalışmasını sağlar.
- "if" bloğu koşul sağlandığında çalışırken, "else" bloğu koşul sağlanmadığında çalışır.
- Birden çok koşula bağlı durumlar için "if-else if-else" yapıları kullanılabilir.
- 36:24JavaScript'te Koşullu İfadeler
- JavaScript'te if-else yapıları, belirli koşullara göre farklı işlemler yapmak için kullanılır.
- Eğer işlem değeri 1, 2 veya 3 ise, karşılık gelen koşullara girilir, aksi takdirde "else" bloğu çalışır ve "geçersiz işlem" mesajı verilir.
- Switch-case yapıları da JavaScript'te kullanılabilir ve if-else yapılarına alternatif olarak aynı mantıkla çalışır.
- 38:28Switch-Case Yapıları
- Switch-case yapılarında bir değişkenin belirli değerlerine göre farklı işlemler yapılabilir.
- Her case bloğu sonunda "break" kullanılır, böylece bir case çalıştırıldıktan sonra diğer case'lerden geçilmez.
- Default case, hiçbir case'in sağlanmadığı durumlarda çalışır ve if-else yapılarındaki "else" bloğuna karşılık gelir.
- 41:24JavaScript'te Fonksiyonlar
- JavaScript'te fonksiyon tanımlamak için "function" anahtar kelimesi kullanılır ve fonksiyon ismi belirtilir.
- Fonksiyonlar çağrıldığında, tanımlandığı blok çalışır ve aynı fonksiyon birden fazla kez çağrılabilir.
- Fonksiyonlara parametreler gönderilebilir ve bu parametreler fonksiyon içinde kullanılır.
- 43:32Parametreli Fonksiyonlar
- JavaScript'te fonksiyonlara parametre göndermek için fonksiyon tanımlamasında parametre isimleri belirtilir.
- Fonksiyon çağrıldığında, parantez içinde parametre değerleri gönderilir.
- Birden fazla parametreli fonksiyonlar da tanımlanabilir ve bu parametreler fonksiyon içinde kullanılarak işlemler yapılabilir.
- 45:49JavaScript'te Return Kavramı
- Return, fonksiyonun çağrıldığı yere içerden bir değer döndürmeyi sağlar.
- Fonksiyon içinde return kullanıldığında, fonksiyonun yaptığı işlem sonucu dönen değer bir değişkene atanabilir.
- Return, birden çok fonksiyon kullanıldığında ve her bir fonksiyonun belli bir çıktı üretmesi gerektiğinde kullanılır.
- 47:49JavaScript'te Nesne Tabanlı Programlama
- JavaScript, nesne tabanlı (object-based) bir programlama dilidir ancak nesne yönelimli (object-oriented) değildir.
- Nesne tabanlı programlama, objelerin alt objelerden veya polimorfik işlemlerden oluşmadığını belirtir.
- JavaScript'te objeler hem özellikler hem de üzerinde çalıştırılabilecek fonksiyonlar (metotlar) içerir.
- 48:38JavaScript'te Objeler Oluşturma
- JavaScript'te objeler, süslü parantezler içinde özellikler ve değerlerle oluşturulur.
- Objelerin özelliklerine erişmek için obje adı ve nokta notasyonu kullanılır.
- Objeler içinde başka objeler de bulunabilir ve iç içe obje yapısı oluşturulabilir.
- 53:11Objelerde Fonksiyonlar
- JavaScript'te objeler içinde fonksiyonlar da oluşturulabilir.
- Objelerde fonksiyonlar oluşturmak için "function" anahtar kelimesi kullanılır.
- Objenin kendi özelliklerine erişmek için "this" anahtar kelimesi kullanılır.
- 54:23JavaScript'te Objeler ve Özelliklere Erişim
- JavaScript'te objeler, özelliklere erişmek için nokta işareti kullanılarak (örneğin: disk.isim) yapılabilir.
- Objelerdeki fonksiyonlar da aynı şekilde çağrılabilir (örneğin: konsol.log(çalışan.isimBilgileri())).
- Fonksiyonlar parametre alabilir ve bu parametreler fonksiyon çağrısında belirtilir.
- 55:37Farklı Objeler Oluşturma Yöntemleri
- JavaScript'te objeler farklı şekillerde oluşturulabilir, örneğin "new Object()" kullanılarak boş bir obje oluşturulabilir.
- Boş bir objeye özellikler ve metotlar tek tek eklenebilir (örneğin: çalışan.isim = "Mustafa Murat").
- Bu yöntemde her yeni obje için özellikler tek tek tanımlanması gerekebilir.
- 57:55Yapıcı Desen (Constructor Pattern)
- Yapıcı desen (constructor pattern) kullanılarak bir fonksiyon oluşturulabilir ve bu fonksiyondan birden fazla obje üretilir.
- Constructor fonksiyon, objelerin sahip olacak özelliklerini ve metotlarını belirler.
- "new" anahtar kelimesi kullanılarak constructor fonksiyondan objeler oluşturulabilir ve bu objelerin özelliklerine farklı değerler verilebilir.
- 59:21Constructor Pattern Kullanımı
- Constructor fonksiyon içinde "this" anahtar kelimesi kullanılarak objenin özelliklerine erişilir ve değerler atanır.
- Constructor fonksiyon içinde metotlar da tanımlanabilir ve objelerin özelliklerine erişebilir.
- Tek bir constructor fonksiyon kullanılarak birçok farklı obje oluşturulabilir ve her objenin kendi özelliklerine sahip olabilir.
- 1:02:33JavaScript'teki Event'ler
- Event'ler HTML sayfalarındaki elementlerde direkt ateşlenebilen olaylardır ve bu olaylar sayesinde JavaScript'te belli kodlar çalıştırılabilir.
- JavaScript'te birçok event bulunur ve ihtiyaç duyulduğunda W3Schools gibi kaynaklarda bu event'leri görebilirsiniz.
- Event'ler, HTML elementlerine eklendikten sonra olay gerçekleştiğinde belirtilen fonksiyonları çalıştırır.
- 1:03:14Buton Tıklama Event'i
- Butona tıklama event'i (onClick) butona tıklandığında çalışacak bir fonksiyonu belirlemek için kullanılır.
- Butona tıklandığında çalışacak fonksiyon, JavaScript kod bloğunda tanımlanır ve buton elementine eklenebilir.
- Buton tıklama event'i ile butonun içeriği değiştirilebilir veya uyarı mesajı gösterilebilir.
- 1:04:52Element Özelliklerine Erişim
- JavaScript'te "innerHTML" özelliği ile bir elementin içeriği değiştirilebilir.
- Buton tıklama event'i ile butonun "innerHTML" özelliği değiştirilerek butonun içeriği değiştirilebilir.
- "document.getElementById" metodu ile HTML dokümanındaki belirli bir elemente erişilebilir.
- 1:06:16Fonksiyona Element Gönderme
- Buton tıklama event'i ile fonksiyona buton elementi gönderilebilir.
- Gönderilen element, fonksiyon içinde kullanılarak o elementin özelliklerine erişilebilir.
- Bu yöntemle daha düzenli ve esnek bir kod yazımı sağlanabilir.
- 1:07:41Diğer Elementlerle Çalışma
- Buton tıklama event'i ile başka elementler üzerinde de işlem yapılabilir.
- "document.getElementById" metodu ile belirli bir element seçilebilir ve o elementin özellikleri değiştirilebilir.
- Paragrafın yazı rengini değiştirmek için "element.style.color" özelliği kullanılır.
- 1:10:41Farklı Event'ler
- "onMouseOver" event'i, imleç elementin üzerine geldiğinde tetiklenir.
- "onMouseOut" event'i, imleç elementten ayrıldığında tetiklenir.
- Bu event'ler ile elementin üzerine geldiğinizde ve ayrıldığınızda farklı işlemler yapılabilir.
- 1:13:57JavaScript'te Form Doğrulama İşlemleri
- JavaScript'te form doğrulama işlemleri, formun submit edilmeden önce doğrulanmasını sağlar.
- Form submit edildiğinde tetiklenen "on submit" eventi, return false döndürürse formun diğer sayfaya yönlendirilmesini engeller.
- Form doğrulama için bir fonksiyon yazarak, formun input alanlarının değerlerini kontrol edebiliriz.
- 1:16:22Form Doğrulama Fonksiyonu
- Forma erişmek için "document.forms" kullanarak formun name özelliğini belirterek formu seçebiliriz.
- Formun input alanına erişmek için form değişkeni üzerinden "form.elements['isim']" şeklinde ulaşabiliriz.
- Input alanının değeri için "form.elements['isim'].value" kullanarak değere ulaşabiliriz.
- 1:18:10Doğrulama Koşulları
- Form doğrulama için if koşulu ile input alanının boş olup olmadığı kontrol edilir.
- Eğer input alanı boşsa, uyarı mesajı gösterilir ve fonksiyon "return false" ile sonlandırılır.
- Eğer input alanı boş değilse, fonksiyon "return true" döndürerek formun submit edilmesine izin verir.
- 1:19:35Örnek Uygulama
- Forma değer girildiğinde fonksiyon "return true" döndürerek formun diğer sayfaya yönlendirilmesine izin verir.
- Forma değer girilmediğinde fonksiyon "return false" döndürerek formun gönderilmesini engeller.
- JavaScript ile form doğrulama işlemleri sayesinde kullanıcıdan gerekli bilgilerin doldurulmasını sağlayabiliriz.