Merhaba genç arkadaşlar! Bugün JavaScript'i öğreneceğiz. JavaScript özel bir bilgisayar dilidir. Web sayfalarını etkileşimli ve eğlenceli hale getirmemize yardımcı olur. Bir düğmeye tıkladığınızda veya bir web sitesinde bir şeyin hareket ettiğini gördüğünüzde, bunun nedeni genellikle JavaScript'tir.
Bir oyuncak robotla oynadığınızı hayal edin. Robotu hareket ettirmek için ona ne yapması gerektiğini söylemeniz gerekir. Aynı şekilde, JavaScript bilgisayara bir web sayfasının nasıl davranması gerektiğini söyler. İzlediğinizde web sitelerinin değişmesi için talimatlar verir.
Web geliştirme, web siteleri oluşturmak anlamına gelir. HTML ile çalıştığımızda, bir web sitesinin yapısını oluştururuz. CSS, web sitesinin güzel görünmesini sağlar. JavaScript, düğmelere tıkladığınızda veya sayfayı aşağı kaydırdığınızda web sitelerinin yanıt vermesini sağlayarak sihir katar. Bugün, JavaScript'in çok basit bir şekilde nasıl çalıştığını inceleyeceğiz.
Bu ders kolay bir dille yazılmıştır. Basit kelimeler ve günlük hayattan örnekler kullanacağız. Bilgisayarlara yeni başlamış olsanız bile bu dersi anlayabilirsiniz. Öğrenme maceramıza JavaScript ile başlayalım!
JavaScript, bilgisayarların anlayabileceği bir dildir. Bilgisayarın takip edebileceği şekilde yazılmış bir dizi talimattır. Bir web sitesini ziyaret ettiğinizde, bilgisayar sayfanın bazı kısımlarını değiştirmek için JavaScript kullanır. Örneğin, bir fareye tıkladığınızda bir resim görünebilir veya bir mesaj açılabilir.
JavaScript'i dost canlısı bir yardımcı olarak düşünebilirsiniz. Bir arkadaşınızdan size bir oyuncak vermesini istemeniz gibi, JavaScript de bilgisayarınızın mesajları iletmesine ve ekranda değişiklikleri göstermesine yardımcı olur. Web sitelerine hayat verir.
Birçok popüler web sitesi JavaScript kullanır. Çevrimiçi oyunlar, etkileşimli hikayeler ve hatta basit animasyonlar gibi web siteleri JavaScript ile çalışır. Web sitesini heyecan verici kılan sihirli bir iksir gibidir.
JavaScript'in nasıl yavaş çalıştığını öğrenin. Adım adım, her talimatın bir web sitesini nasıl değiştirebileceğini göreceksiniz. Nasıl çalıştığını anlamanıza yardımcı olacak basit örnekler göreceğiz.
JavaScript etkileşim yarattığı için çok önemlidir. Okuduğunuz her kitabın yalnızca herhangi bir seçenek olmadan okunabildiğini düşünün. JavaScript'siz bir web sitesi buna benzerdir: asla değişmeyen statik bir sayfa.
JavaScript ile hareketli resimler, değişen metinler ve tıkladığınızda bir şeyler yapan düğmeler görürsünüz. Web sitelerini canlı ve eğlenceli hale getirir. Resim galerisi gibi basit bir web sitesi bile JavaScript kullandığında heyecan verici hale gelebilir.
Bir web sitesinde her pop-up mesajı veya küçük bir oyun gördüğünüzde, JavaScript'in çalışmasına bakıyorsunuz. Bazen "Hoş geldiniz!" veya "Tıkladığınız için teşekkür ederiz!" gibi mesajlar görmenizin nedeni budur.
Web geliştiricileri JavaScript kullanarak hem güzel hem de kullanışlı web siteleri oluşturabilir ve ziyaretçilerin çevrimiçi ortamda keyifli vakit geçirmesini sağlayabilirler.
Bir web sitesi oluşturduğumuzda, HTML ile başlarız. HTML, bir web sayfasının iskeleti gibidir. Resimlerin, metinlerin ve düğmelerin nereye gittiğini gösterir. Daha sonra renkleri ve stilleri eklemek için CSS kullanırız. CSS, iskeleti çekici gösteren kıyafetler gibidir.
JavaScript, web sitesini etkileşimli hale getirmek için HTML ve CSS'nin üstüne eklenir. Birisi web sitesiyle etkileşime girdiğinde web sitesine ne yapacağını söyleyen beyin gibidir.
Örneğin, bir web sayfasındaki bir düğmeye tıkladığınızda, HTML düğmeyi gösterir, CSS onu güzel gösterir ve JavaScript web sayfasına gizli bir mesaj göstermesini söyler. Bu kombinasyon web sitelerini akıllı ve kullanıcı dostu yapar.
Bir örneğe bakalım. Diyelim ki "Click me!" yazan bir butonu olan bir web sayfamız var. Butona tıkladığınızda, JavaScript "Merhaba, arkadaş!" diyen bir mesaj görüntüler. Bu, etkileşim adı verilen küçük ama harika bir şeydir.
Eğlenceli örneklere geçmeden önce, JavaScript'teki bazı temel kelimeleri öğrenmemiz gerekiyor. Bunlar, talimatları yazmamıza yardımcı olan yapı taşları gibidir. En önemli bloklardan bazıları değişkenler, işlevler ve olaylardır.
Değişkenler: Bir değişken küçük bir kutu gibidir. Bu kutuda özel bir şey saklayabilirsiniz. Bir kelime, bir sayı veya hatta bir resim olabilir. Bu değeri daha sonra kullanmak istediğimizde, onu kutudan çıkarırız.
Örneğin, "Alice" kelimesini depolayan 'isim' adında bir kutunuz olabilir. Bunu yapışkan bir nota yazıp bir kutuya koymak gibi düşünün, böylece ismi bilmeniz gerektiğinde sadece notu okursunuz.
Fonksiyonlar: Fonksiyon, birlikte çalışan bir talimatlar grubudur. Bilgisayara kek yapmayı söyleyen bir tarif gibidir. Her kek yapmak istediğinizde, aynı sonucu almak için tarifi (veya fonksiyonu) takip edersiniz.
JavaScript yazdığımızda, basit görevler yapmak için fonksiyonlar yaratabiliriz. Örneğin, bir fonksiyon bir oyun başlattığınızda veya bir web sayfasını ziyaret ettiğinizde bir karşılama mesajının görünmesini sağlayabilir.
Olaylar: Olay, bir web sayfasında gerçekleşen bir şeydir. Bir düğmeye tıkladığınızda, farenizi hareket ettirdiğinizde veya bir tuşa bastığınızda, bu eylemler olaylardır. JavaScript bu olayları dinler ve ardından bir şeylerin gerçekleşmesini sağlar. Birisi kapıya geldiğinde çalan bir kapı ziline benzer.
JavaScript kodunun çok basit bazı örneklerine bakalım. Bu örnekler bilgisayara nasıl talimat verdiğimizi gösteriyor.
Örnek 1: Bir Mesajın Görüntülenmesi
İşte bir mesaj gösteren küçük bir kod:
<code>var message = "Merhaba dünya!"; uyarı(mesaj);</code>
Bu kodda, var kelimesi bilgisayara message adında bir kutu oluşturmasını ve "Hello, world!" kelimelerini bu kutunun içine kaydetmesini söyler. Daha sonra alert() komutu bu mesajı ekranınızda küçük bir pencerede gösterir.
Örnek 2: Bir Fonksiyonun Kullanımı
İşte bir selamlamayı gösteren basit bir fonksiyon:
<kod>
fonksiyon selamla() {
alert("Merhaba, arkadaşım!");
}
</kod>Bu fonksiyon greet olarak adlandırılır. Fonksiyon kullanıldığında, bilgisayara "Merhaba, arkadaş!" selamlamasıyla bir pencere göstermesini söyler.
Örnek 3: Bir Tıklamaya Yanıt Verme
Bir butona tıkladığınızda bir web sayfasının bir şey yapmasını sağlayabilirsiniz. Şu koda bakın:
<kod> <button onclick="greet()">Bana Tıkla!</button> </kod>
Burada, "Click Me!" yazan butona bastığınızda, selamlama işlevi etkinleştirilir ve selamlama mesajını görürsünüz. Bu, JavaScript'in ne yaptığınızı nasıl dinlediğini ve sayfanın buna göre nasıl değiştiğini gösterir.
Değişkenler hakkında daha fazla bilgi edinelim. Değişken, bir sayı veya kelime gibi bir değeri tutan bir kutuya verilen addır. Değişkeni, en sevdiğiniz oyuncaklarınızı sakladığınız en sevdiğiniz oyuncak kutunuz olarak düşünün. Kutunun içine istediğiniz zaman bakıp ne olduğunu görebilirsiniz.
Örneğin, yaşınızı depolamak için age adında bir değişken veya en sevdiğiniz rengi depolamak için color adında bir değişken oluşturabilirsiniz. JavaScript kullandığınızda, bu değerleri, tıpkı kutunuza yeni bir oyuncak koymak gibi, ihtiyaç duyduğunuzda değiştirebilirsiniz.
Bu şekilde değişkenler bilgileri kaydetmenize ve daha sonra kullanmanıza yardımcı olur. Kodunuzu düzenli ve okunması kolay hale getirir. Daha fazla şey öğrendikçe, değişkenlerin bir program yazmada çok önemli olduğunu göreceksiniz.
Fonksiyonlar, bir görevi yerine getirebilen özel kod bloklarıdır. Bir hikaye kitabında sihirli bir büyü olduğunu hayal edin. Sihirli kelimeleri her söylediğinizde, inanılmaz bir şey olur. JavaScript'te, bir fonksiyon o sihirli büyü gibidir.
Bir fonksiyonun içine bir talimat listesi yazarsınız ve daha sonra bu fonksiyonu istediğiniz zaman görevi gerçekleştirmek için kullanabilirsiniz. Bu, aynı talimatları tekrar tekrar yazmaktan kaçınmanıza yardımcı olur.
Örneğin, birçok farklı sayfada "Merhaba!" demek istiyorsanız, bir fonksiyon yazıp her seferinde çağırabilirsiniz. Bu, kodunuzun kısa ve düzenli kalmasını sağlar. Fonksiyonlar işinizi kolaylaştırır ve programlarınızı daha düzenli hale getirir.
Olaylar bir web sayfasında gerçekleşen eylemlerdir. Bunlar bir tıklama, bir fare hareketi veya hatta web sayfasının yüklenmesi olabilir. JavaScript bu olayları dinler ve bunlara tepki verir.
Evde bir kapı ziline bastığınızı düşünün. Kapı zili çalar ve biri sizi görmeye gelir. Bir web sayfasında, bir düğmeye tıkladığınızda, JavaScript o tıklamayı dinler ve ardından bir şey yapar—tıpkı kapı zili gibi.
Örneğin, bir sayfanın rengini değiştiren bir düğmeniz olabilir. Düğmeye tıkladığınızda bir olay tetiklenir ve JavaScript rengi değiştirir. Bu, basit olayların bir web sitesini nasıl canlı ve eğlenceli hale getirebileceğini gösterir.
Olaylar, web sayfalarını etkileşimli hale getiren önemli bir özelliktir. Bilgisayarın gerçek zamanlı olarak yaptığınız şeye yanıt vermesine yardımcı olurlar.
Fikirleri basit bir örnekle bir araya getirelim. Bir düğmeye tıkladığınızda sizi karşılayan bir web sayfasını hayal edin. Görebileceğiniz kodun basit bir versiyonu şöyledir:
<kod>
<!DOCTYPE html>
<html>
<kafa>
<title>Hoş Geldiniz Sayfası</title>
<komut dosyası>
sayHello() fonksiyonu {
alert("Web sitemize hoş geldiniz!");
}
</script>
</başlık>
<gövde>
<h1>Merhaba!</h1>
<p>Hoş geldiniz mesajını görmek için aşağıdaki butona tıklayın.</p>
<button onclick="sayHello()">Bana Tıkla!</button>
</gövde>
</html>
</kod>Bu kod basit bir web sayfası oluşturur. HTML sayfayı oluşturur, CSS (eklenirse) onu çekici hale getirir ve JavaScript düğmenin çalışmasını sağlar. Düğmeye tıkladığınızda sayHello işlevi etkinleştirilir ve bir mesaj açılır.
Bu, JavaScript'in statik bir web sayfasına nasıl heyecan katabileceğinin temel bir gösterimidir. Küçük kod parçalarının ekranınızda olanları nasıl değiştirebileceğini gösterir.
JavaScript her gün ziyaret ettiğiniz birçok web sitesinde kullanılır. Örneğin, bir çevrimiçi alışveriş web sitesini kullandığınızda, JavaScript sayfayı yeniden yüklemeden alışveriş sepetini güncellemeye yardımcı olur. Bir sosyal medya akışında gezinirken, JavaScript yeni gönderilerin sorunsuz bir şekilde görünmesini sağlar.
Web sayfalarındaki hesap makineleri gibi basit araçlar bile JavaScript ile çalışır. Sayıları toplayabilen, çıkarabilen, çarpabilen veya bölebilen bir hesap makinesini hayal edin. JavaScript, tıpkı parmaklarınızı kullanarak sayıları saymanız ve toplamanız gibi, hesap makinesinin çalışması için talimatları yazar.
Oyun dünyasında JavaScript eğlenceli deneyimler yaratmaya yardımcı olur. Renkli animasyonlar, hareket eden karakterler ve etkileşimli bulmacalar JavaScript sayesinde mümkündür. Dijital dünyamızı daha ilgi çekici bir yer haline getirir.
Dinamik bir web sitesiyle etkileşime geçtiğiniz her an, ister hava durumunu kontrol ediyor olun, ister video izliyor olun veya oyun oynuyor olun, JavaScript bu deneyimi sorunsuz ve duyarlı hale getirmek için perde arkasında çalışır.
Yaşlandıkça ve JavaScript hakkında daha fazla şey öğrendikçe, kendi küçük projelerinizi oluşturmaya başlayabilirsiniz. Farenizi kullanarak çizim yaptığınız basit bir çizim uygulaması oluşturabilir veya karakterlerin ekranda hareket ettiği küçük bir oyun oluşturabilirsiniz. Olasılıklar sonsuzdur!
Projeler istediğiniz kadar basit veya karmaşık olabilir. Renkleri değiştiren basit bir düğmeyle başlamak bile eğlenceli bir proje olabilir. Her küçük projede, JavaScript'in işleri nasıl yürüttüğü hakkında biraz daha fazla şey öğrenirsiniz.
Bu projelerde, bugün öğrendiğimiz temel fikirleri kullanacaksınız: bilgileri depolamak için değişkenler, görevleri gerçekleştirmek için işlevler ve etkileşimleri yönetmek için olaylar. Her proje, daha iyi bir problem çözücü ve daha yaratıcı bir düşünür olmanıza yardımcı olur.
Sıfırdan bir şey yaratmanın verdiği mutluluk çok heyecan verici. JavaScript ile fikirleri gerçek dijital deneyimlere dönüştürme gücüne sahipsiniz. Bir resim çizip sonra karakterleri canlandırmak gibi!
Yeni bir dil öğrenmek eğlenceli ve ilgi çekici olabilir. İşte JavaScript yolculuğunuzda size yardımcı olabilecek bazı basit ipuçları:
Unutmayın, her uzman bir zamanlar acemiydi. JavaScript'in nasıl çalıştığını keşfetme sürecinin tadını çıkarın ve yakında kendi harika web sitelerinizi oluşturabileceksiniz.
JavaScript'te daha rahat hale geldikçe, daha gelişmiş fikirler duyabilirsiniz. Ancak endişelenmeyin! Şimdilik temel konulara odaklanın. Hazır olduğunuzda, döngüler, koşullar ve diziler hakkında bilgi edinebilirsiniz.
Örneğin, bir döngü, aynı görevi birçok kez tekrarlayan bir atlıkarıncaya benzer. Koşullar, bilgisayarın karar vermesine yardımcı olur; örneğin web sayfasında olanlara göre iki farklı eylem arasında seçim yapmak gibi.
Bu fikirler, kodlamanızı daha da heyecanlı hale getiren ekstra tatlar gibidir. Yaşlandığınızda ve JavaScript'e daha aşina olduğunuzda, bu gelişmiş fikirleri yavaşça deneyebilirsiniz. Bugün, basit parçaları öğrenmek yeterlidir.
Öğrenilen her küçük şey gelecek için güçlü bir temel oluşturur. JavaScript öğrenmede attığınız her adımla gurur duyun!
Bu derste şunları keşfettik:
JavaScript öğrenmenin bir yolculuk olduğunu unutmayın. Her bir pratik sizi daha akıllı ve daha yaratıcı kılar. Öğrenmenin tadını çıkarın ve web geliştirmenin büyüsünü keşfetmenin tadını çıkarın!