JavaScript Nedir ve Nasıl Çalışır? (Adım Adım Açıklama)

#JAVASCRİPT ve JQUERY

JavaScript Nedir? Bir websitesine dinamiklik kazandırmamıza, resim slayt gösterisi yapmamıza, etkileşimli formlar oluşturmamıza yarayan komut dosyası dili.

JavaScript Nedir ve Nasıl Çalışır?
JavaScript Nedir ve Nasıl Çalışır?

JavaScript Nedir? Tam buradasın, çünkü şu anda JavaScript terimini duydunuz ve bunu anlamanız gerektiğini biliyorsunuz.

İyi haber şu: JavaScript göründüğü kadar korkutucu değil – ve evet, nasıl kullanılacağını çok kolay öğrenebilirsiniz.

JavaScript: Hızlı Tanım

JavaScript , dinamik web sitesi içeriği oluşturmak ve kontrol etmek için kullanılan, yani bir web sayfasını elle yeniden yüklemenizi gerektirmeksizin ekranınızda hareket eden, tazeleyen veya başka türlü değişiklik yapan herhangi bir komut dosyası dilidir.

Bazı Yapabilecekleriniz:

  • Animasyonlu grafik
  • Fotoğraf slayt gösterileri
  • Otomatik tamamlama metni önerileri
  • Etkileşimli formlar

JavaScript’in ne yaptığını anlamanın daha iyi bir yolu, her gün kullandığınız ve muhtemelen kullandığınız bazı web özellikleri hakkında düşünmek.

Örneğin;

Facebook zaman çizelgenizin ekranınızda otomatik olarak güncellenmesi veya Google’ın başlattığınız birkaç harfe dayalı arama terimleri önermesi.

Her iki durumda da, JavaScript etkindir.

JavaScript sonuçları basit görünebilir , ancak hem Front End Web Geliştirici hem de Break into Tech Blueprints bölümünde JavaScript’in bütün bir bölümünü öğretmemizin bir nedeni vardır.

Tüm bu harika animasyonların ve otomatik tamamlamaların altında – oldukça etkileyici şeyler oluyor.

Bu kılavuz tam olarak JavaScript’in nasıl çalıştığını ve neden ve nasıl kullanılacağını ve ayrıca becerilerinizde ihtiyaç duyduğunuzda JavaScript’i öğrenmenin en iyi yollarını açıklayacaktır.

İçindekiler;

  1. JavaScript Temelleri Nedir?
  2. Kullanımda JavaScript Nedir?
  3. JavaScript bir sitede nasıl çalışır?
  4. Bir Web Sitesine JavaScript Nasıl Eklenir?
  5. Vanilla JavaScript nedir?
  6. Gelişmiş JavaScript: Kütüphaneler ve Çerçeveler
  7. JavaScript Nasıl Öğrenilir?

1. JavaScript Temelleri Nedir?

Teknoloji alanında bir kariyere girmeyi umuyorsanız, sorunuz daha çok şöyle görünebilir: “JavaScript nedir ve buna ihtiyacım var mı?

Eğer web geliştirme ile ilgilenen ve bu alanda kariyer yapmayı düşünüyorsanız- ihtiyacınız konusunda cevabı kocaman bir evet.

Bunun dışında, hadi JavaScript’in nasıl çalıştığı konusunda biraz daha derinlere gidelim.

3’ÜN GÜCÜ: HTML, CSS VE JAVASCRİPT

Çoğu kişi kodlamayı öğrendiğinde, eski HTML ve CSS ile başlar. Oradan, JavaScript’e geçiyorlar. Bu mantıklı! Üç unsur birlikte, web geliştirmenin bel kemiğini oluşturur.

Tanıdık olmayanlar için:

  • HTML, sayfanızın yapısıdır; başlıklar, gövde metni ve eklemek istediğiniz resimler
  • CSS, o sayfanın nasıl görüneceğini kontrol eder (fontları, arka plan renklerini vb. Özelleştirmek için kullanacağınız şeydir)
  • JavaScript, sihirli üçüncü unsurdur. Yapınızı (HTML) ve estetik ortamınızı (CSS) oluşturduktan sonra JavaScript sitenizi veya projenizi dinamik hale getirir.

JAVASCRİPT OTOMATİKLEŞTİRMEK VE CANLANDIRMAK İÇİN KULLANILIR

Yukarıda belirtildiği gibi JavaScript’in bir “ betik dili ” olduğunu yazıyor. Betik dilleri, kullanıcıların adım adım kendi başlarına yürütmeleri gereken işlemleri otomatikleştirmek için kullanılan kodlama dilleri.

Komut dosyası yazmak yerine, ziyaret ettiğiniz web sayfalarındaki herhangi bir değişiklik, sayfanın elle yeniden yüklenmesini veya takip ettiğiniz içeriğe ulaşmak için bir dizi statik menüde gezinmeyi gerektirir.

JavaScript gibi bir betik dili (JS, tanıdıklar için), web siteleri veya web uygulamaları gibi bilgisayar programlarına “bir şeyler yapmasını” söyleyerek geliştiriciler üzerinden büyük bir yükü kaldırır.

JavaScript daha önce açıklanan dinamik özellikleri ne olursa olsun yapmasını söylediğiniz herşeyi yapar.

Görüntülerin kendilerini canlandırmasını, slayt gösterileri arasında dolaşacak fotoğrafları ya da bilgi istemlerine yanıt vermek için otomatik tamamlama önerilerini anlatmak gibi. 

Bu arada, JavaScript web işlevselliğinin ayrılmaz bir parçası olduğu için, tüm büyük web tarayıcıları JavaScript işleyebilen yerleşik motorlara sahiptir.

Bu, JS komutlarının doğrudan bir HTML belgesine yazılabileceği ve web tarayıcılarının bunları anlayabileceği anlamına gelir .

Başka bir deyişle, JavaScript kullanmak, herhangi bir ek program veya derleyici indirmeyi gerektirmez.

2. Kullanımda JavaScript Nedir?

Bunu giriş bölümünde biraz ele aldık, ancak işte JavaScript’in kullanıldığı ana şeylerin bir listesi.

  • Web sitelerine etkileşim ekleme: Bir web sitesinin statik bir sayfa yapısından daha fazlası olmasını istiyorsanız, biraz JavaScript yapmanız gerekir.
  • Mobil uygulamalar geliştirme: JavaScript yalnızca web siteleri için değil… telefonunuzda ve tabletinizde de bulunan uygulamaları oluşturmak için de kullanılır.
  • Web tarayıcısı tabanlı oyunlar oluşturma – Hiç bir oyun doğrudan web tarayıcınızdan oynandı mı? JavaScript muhtemelen bunun gerçekleşmesine yardımcı oldu.
  • Back End web geliştirme – evet, JavaScript çoğu şeyin ön tarafında kullanılır, ancak arka uç altyapıda da kullanılacak çok yönlü bir betik dilidir.

3. JavaScript Nasıl Çalışır?

JavaScript bir web sayfasına gömülüdür veya başka bir .js dosyasına dahil edilmiştir.

JavaScript aynı zamanda bir “kullanıcı tarafı” dilidir (“sunucu tarafı” dili yerine), site ziyaretçilerinin bilgisayarlarına indirilip daha sonra işlendiğini söylemenin süslü bir yoludur.

4. Bir Websitesine JavaScript Nasıl Eklenir?

Aslında bir web sayfasına JavaScript kodu eklemek oldukça basit bir işlemdir (HTML ve CSS ile kodlama yapmışsanız tanıdık bir işlemdir). JavaScript,

<script>

etiketlerini kullanarak ve onlara text/javascript type niteliğini vererek doğrudan bir sayfanın koduna eklenebilir. Dürüst olmak gerekirse, JavaScript bir siteye CSS eklemeye çok benziyor. İşte yan yana bir karşılaştırma:

CSS:

<style> 
CSS Kodları buraya gelecek!
</style>

JavaScript:

<script type="text/javascript">
JavaScript Kodları buraya gelecek!
</script>

İşte bu kadar! JavaScript kodu, bir sayfaya .js uzantılı ayrı bir başlık dosyası olarak da eklenebilir (genellikle bir kerede birden fazla sayfaya eklemek istediğiniz kod ise bu yapılır). Betik daha sonra her bir bireyin web tarayıcısında indirilir ve işlenir, onu ekranda gördükleri dinamik nesnelere ve efektlere dönüştürür.

Yine de bir uyarı:

JavaScript bireysel tarayıcılar tarafından işlendiğinden, bir kullanıcı tarayıcısında JavaScript’i devre dışı bırakmış olabilir.

Javascript kullanan sitelerin, bu durumda kırılmalarını önlemek için bir yedekleme planı yapmaları gerekir.

5. Vanilla JavaScript nedir?

JavaScript’i araştırırken sonunda “Vanilla Javascript” terimini duyacaksınız. Peki bu ne anlama geliyor?

Vanilla JavaScript, kodlama işlemini kolaylaştırmak veya daha verimli hale getirmek için hiçbir araç kullanmadan “olduğu gibi” JavaScript dilidir.

Size vanilla JavaScript’in nasıl göründüğü hakkında bir fikir vermek için, aşağıdaki temel JavaScript kodu örneğini göz önünde bulundurun.

Kullanıcıların bir web sitesinde bir teklif veya hizmete kaydolduktan sonra “Kaydolduğunuz için teşekkür ederiz.” onay mesajı almalarını istiyorsanız, bunu doğrudan bir HTML sayfasına (<script> etiketleri arasında) şöyle kodlarsınız:

<script>
window.onload = initAll;
function initAll() {
document.getElementById(“submit”).onclick = submitMessage;
}
function submitMessage() {
var greeting = document.getElementById("name").getAttribute("value");
document.getElementById("headline").innerHTML = "Email listemize üye olduğunuz için Teşekkür ederiz." + greeting;
return false;
}
</script>

Vanilla JS, bunun gibi JavaScript projeleri oluşturmak için kullanılabilir, ancak JavaScript dilini daha iyi tanıdıkça, JS’in kullanımını daha kolay ve verimli hale getirmek için uygulayabileceğiniz farklı araçlar vardır.

6. Gelişmiş Javascript: Çerçeveler ve Kütüphaneler (JS’yi Kolaylaştırmak için AKA Araçları)

Tahmin edebileceğiniz gibi, vanilla javascript’i tek başına kullanmak sonsuza dek web geliştiricileri için yeterlidir ancak zaman paradır ve javascript kullanmanın Pratik yolları da vardır.

Bu yüzden JavaScript çerçeveleri ve kütüphaneleri (JS’yi kullanımı oldukça kolaylaştıran araçlar) yeni en iyi arkadaşlarınızdır. İşte karşılaşacağınız bazı temel sorunların bir kısmı ve ne yaptıkları.

JQUERY – OG JAVASCRİPT KÜTÜPHANESİ

JavaScript ile çalışırken, birden fazla web sitesinde veya web uygulamasında düzenli olarak gösterilen JS işlevlerini ve özelliklerini (menü animasyonları ve solmaları, dosya yükleme formları ve resim galerileri gibi) görürsünüz. Bunların her birini gerektiğinde sıfırdan kodlayabilseniz de, bunun yerine jQuery gibi kodlama kütüphaneleri kullanırsanız kodlama yaşamınız çok daha kolay olacaktır .

JQuery kütüphanesi, tek satırlı jQuery komutları ile gerçekleştirilebilen JavaScript kodlama işlevlerinden oluşur. Örneğin, yukarıdaki JavaScript kodu örneği, bunun yerine jQuery kodu kullanılarak yapıldıysa şöyle görünür:

<script>
$("#submit").click(function () {
var greeting = $("#name").val();
$("#headline").html("Email listemize üye olduğunuz için Teşekkür ederiz." + greeting);
return false;
});
<script/>

Gördüğünüz gibi, jQuery programlama yaklaşımı çok daha özlüdür ve aynı JavaScript işlevini gerçekleştirmek istediğiniz zaman bir web sitesini veya web uygulamasını kodlarken tekrar kullanılabilir.

Yukarıdakiler gibi örneklere ek olarak (özel işlevler gerçekleştirmek için doğrudan jQuery kütüphanesinden eklenen kod snippet’leri), daha karmaşık eklentiler oluşturmak için jQuery kodu ile bir araya getirilebilir.

jQuery eklentileri doğrudan kaynak kodun kopyalanması ve yapıştırılması için mevcut olduğu jQuery UI (Kullanıcı Arayüzü) deposundan bulunabilir.

REACT JS – BİR ÖN UÇ GELİŞTİRİCİNİN EN İYİ ARKADAŞI

JQuery ile birlikte, React JS , web geliştiricileri için bir başka önemli JavaScript kütüphanesidir.

React JS, 2011 yılında Facebook tarafından geliştirilen ve özellikle UI’leri (kullanıcı arayüzleri) oluşturmak için tasarlanmış bir ön uç JavaScript kütüphanesidir.

Tanıdık değilseniz, UI’ler bir web sitesi veya uygulama kullanmak için ekran menüleri, arama çubukları, düğmeler ve başkalarıyla etkileşime giren herhangi bir şey topluluğudur ve bunları özenle el ile vanilla JavaScript ile oluşturabilirsiniz. bunun için zaman?

React, geliştiricilerin, tekrarlayan menü nesneleri ve efektleri (etkileşimli formlar, otomatik tamamlama özellikleri, fade-in veya out menü animasyonları, vb.) İçin önceden yazılmış kod kullanmasına olanak tanır ve aynı zamanda Sanal DOM adı verilen özellik sayesinde genel site hızını ve performansını geliştirir.

JS’in nasıl kullanılacağını öğrenmek bir JavaScript geliştiricisi olarak hayatınızı çok daha kolaylaştıracak ve sizi daha da işe yarar hale getirecektir.

DİĞER JAVASCRİPT KÜTÜPHANELERİ VE ÇERÇEVELERİ

JQuery ve React gibi JS kütüphaneleri, bireysel kodlama ihtiyaçları için dijital İsviçre çakısı olarak işlev görürken, ön uç geliştiriciler JavaScript çerçeveleri adı verilen araçları kullanarak bir adım öteye gidebilir .

JQuery’in patchwork işlevselliğini aşarak, JS çerçeveleri JavaScript geliştiricilere web siteleri veya web uygulamaları için tam şablonlar sunar.

JS çerçeveleri daha sonra, JS kodunun gitmesi önerilen şablonlarda boşluklar ve bu boşluklara takılabilen önceden yazılmış kodlar (jQuery gibi) oluşturur.

Buradaki endüstri standartları olarak kabul edilebilecek bir dizi çerçeve olsa da (örn. Vue ve Angular), öğrenecek birini seçerken en iyi bahis, potansiyel işverenleri veya müşterileri göz önünde bulundurup hangi JS çerçevesini (varsa) tercih ettiklerini belirlemektir. Ve bir çerçeveyi öğrendikten sonra, daha fazla bilgi almak oldukça kolaydır.

7. JavaScript Nasıl Öğrenilir?

HTML’nin ve CSS ‘in temel bir web sayfasını kodlamanıza izin verecek beceriler olsa da, JavaScript bu sayfayı hayata geçiren programlama dilidir. Her ne kadar HTML ve CSS kendi başınıza, geliştirici işine başlama pozisyonunda olsanız da, JavaScript öğrenmeye zaman ayırmak iş potansiyelinizin katlanarak artmasına yardımcı olacaktır.

Başta YouTube olmak üzere birçok videolu ve yazınsal kaynak bulmak için tek yapmanız gereken Google’da arama yapmak.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt //////// https://skillcrush.com/2012/04/05/javascript/ Birşeyi gerçekten bilmek, onu anlatmakla olur. #Socrates