JavaScript

JavaScript , dinamik web sitesi içeriği oluşturmak ve kontrol etmek için kullanılan bir komut dosyası dilidir, yani bir web sayfasını manuel olarak yeniden yüklemenizi gerektirmeden ekranınızda hareket eden, yenileyen veya başka şekilde değişen her şey. Gibi özellikler:

• Animasyonlu grafikler

• Fotoğraf slayt gösterileri

• Otomatik tamamlama metin önerileri

• Etkileşimli formlar

JavaScript'in ne yaptığını anlamanın daha da iyi bir yolu, her gün kullandığınız ve büyük olasılıkla aldığınız belirli web özelliklerini düşünmektir - örneğin, Facebook zaman çizelgeniz ekranınızda otomatik olarak güncellendiğinde veya Google, başladığınız birkaç harfe göre arama terimleri önerdiğinde yazıyor. Her iki durumda da, bu JavaScript hareket halindedir.

JavaScript'in sonuçları basit görünebilir , ancak hem Front End Web Developer hem de Break into Tech Blueprints'te JavaScript ile ilgili bir segmentin tamamını öğretmemizin bir nedeni var . Tüm bu harika animasyonların ve otomatik tamamlamaların altında oldukça etkileyici şeyler oluyor.

1. JavaScript Nedir ?

Teknoloji alanında bir kariyere girmeyi umuyorsanız, sorunuz daha çok şöyle gelebilir: "JavaScript nedir ve buna ihtiyacım var mı?"

Eğer ediyorsanız web geliştirme ile ilgilenen - cevap evet kocaman bir . Öyleyse bunun dışında, JavaScript'in nasıl çalıştığını biraz daha derinlemesine inceleyelim.

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

Çoğu insan kodlamayı öğrendiğinde, eski güzel HTML ve CSS ile başlarlar. Oradan JavaScript'e geçerler. Bu mantıklı! Üç unsur birlikte web geliştirmenin omurgasını oluşturur.

HTML , sayfanızın yapısıdır — başlıklar, gövde metni, eklemek istediğiniz tüm resimler

CSS, bu sayfanın nasıl göründüğünü kontrol eder (yazı tiplerini, 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.

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

Yukarıda JavaScript'in bir " komut dosyası dili " olduğundan bahsetmiştim . Komut dosyası dilleri, kullanıcıların normalde kendi başlarına adım adım yürütmeleri gerekecek süreçleri otomatikleştirmek için kullanılan kodlama dilleridir. Komut dosyası yazmak için kısa, ziyaret ettiğiniz web sayfalarındaki herhangi bir değişiklik, ya sayfanın manuel olarak yeniden yüklenmesini ya da peşinde olduğunuz içeriğe ulaşmak için bir dizi statik menüde gezinmeyi gerektirir.

JavaScript gibi bir komut dosyası dili (JS, bilenler için), web siteleri veya web uygulamaları gibi bilgisayar programlarına "bir şeyler yapmalarını" söyleyerek işin zor kısmını halleder. JavaScript söz konusu olduğunda, bu, daha önce açıklanan dinamik özelliklere ne yaparlarsa yapmalarını söylemek anlamına gelir - örneğin, resimlere kendi canlandırmalarını, fotoğrafların bir slayt gösterisinde gezinmesini veya istemlere yanıt vermek için otomatik tamamlama önerilerini söylemek gibi. Bu şeylerin görünüşte kendi başlarına gerçekleşmesini sağlayan JavaScript'teki "komut dosyasıdır".

Bu arada, JavaScript, web işlevselliğinin böylesine ayrılmaz bir parçası olduğu için, tüm büyük web tarayıcıları JavaScript'i oluşturabilen yerleşik motorlarla birlikte gelir. 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. JavaScript Ne İçin Kullanılır ?

Bunu giriş kısmında biraz ele aldık, ancak işte JavaScript'in kullanıldığı ana şeylerin hızlı bir listesi.

Web sitelerine etkileşim eklemek — evet, bir web sitesinin statik bir metin sayfasından daha fazlası olmasını istiyorsanız, biraz JavaScripting yapmanız gerekir.

Mobil uygulamalar geliştirmek —JavaScript yalnızca web siteleri için değildir… telefonunuzda ve tabletinizde bulunan uygulamaları oluşturmak için de kullanılır.

Web tarayıcısı tabanlı oyunlar oluşturma —Hiç doğrudan web tarayıcınızdan bir oyun oynadınız mı? JavaScript muhtemelen bunun gerçekleşmesine yardımcı oldu.

Arka uç web geliştirme - evet, JavaScript Çoğunlukla işlerin ön ucunda kullanılır, ancak arka uç altyapısında da kullanılacak kadar çok yönlü bir betik dilidir.

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

JavaScript ya bir web sayfasına gömülüdür ya da bir .js dosyasına dahil edilmiştir. JavaScript aynı zamanda bir "istemci tarafı" dilidir ("sunucu tarafı" dilinden ziyade), site ziyaretçilerinin bilgisayarlarına indirilip işlendiğini söylemenin süslü bir yoludur.

WEB SİTESİNE NASIL JAVASCRİPT EKLERSİNİZ ?

Aslında bir web sayfasına JavaScript kodu eklemek oldukça basit bir işlemdir (ve HTML ve CSS ile herhangi bir kodlama yaptıysanız tanıdık bir işlemdir). JavaScript, <script> etiketleri kullanılarak ve bunlara text / javascript type özelliği verilerek doğrudan bir sayfanın koduna eklenebilir. Açıkçası, JavaScript bir siteye CSS eklemeye çok benzer. İşte yan yana bir karşılaştırma:

CSS:

<style>

CSS buraya gelir

</style>

JavaScript:

<script type = "text / javascript">

JavaScript kodu buraya gelecek

</script>

Voila! JavaScript kodu, bir sayfaya .js uzantısıyla ayrı bir başlık dosyası olarak da eklenebilir (genellikle aynı anda birkaç sayfaya dahil etmek istediğiniz kodsa yapılır). Komut dosyası daha sonra her bireyin web tarayıcısına indirilir ve işlenir ve ekranda gördükleri dinamik nesnelere ve efektlere dönüştürülür.

Yine de bir uyarı kelimesi: JavaScript bireysel tarayıcılar tarafından işlendiğinden, bir kullanıcının sonunda JavaScript'i devre dışı bırakmış olabilir. JavaScript kullanan sitelerin, bu olduğunda bozulmayı önlemek için yürürlükte bir yedekleme planı olması gerekir.

4. Vanilya JavaScript nedir ?

JavaScript'i incelediğinizde, sonunda "vanilya Javascript" terimini duyacaksınız. Peki bunun anlamı nedir?

Vanilla JavaScript , kodlama sürecini daha kolay veya daha verimli hale getirmek için herhangi bir araç kullanmadan "olduğu gibi" JavaScript dilidir.

Vanilya JavaScript'in neye benzediğine dair bir fikir vermek için aşağıdaki temel JavaScript kodu örneğini düşünün. Kullanıcıların bir web sitesinde bir teklif veya hizmete kaydolduktan sonra "kaydolduğunuz için teşekkürler" onay mesajı almasını istiyorsanız, bunu doğrudan bir HTML sayfasına (<script> etiketleri arasında) şu şekilde kodlamalısınız:

<script>

window.onload = initAll;

function initAll () {

document.getElementById ("submit"). onclick = submitMessage;

}

function submitMessage () {

var selamlama = document.getElementById (“isim”). getAttribute (“değer”);

document.getElementById ("headline"). innerHTML = "E-posta listemize katıldığınız için teşekkür ederiz," + tebrik;

yanlış dönüş;

}

</script>

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

5. Gelişmiş Javascript: Çerçeveler ve Kitaplıklar (JS'yi Kolaylaştırmak için AKA Araçları)

Tahmin edebileceğiniz gibi, tek başına vanilya javascript kullanmak… sonsuza kadar sürer ve web geliştiricileri için ve vakit nakittir. İşte bu yüzden JavaScript çerçeveleri ve kitaplıkları (JS'yi kullanımı çok daha kolay hale getiren araçlar) yeni en iyi arkadaşlarınızdır. İşte karşılaşacağınız bazı temel sorunların ve yaptıklarının bir dökümü.

JQUERY — OG JAVASCRİPT KİTAPLIĞI

JavaScript ile çalışırken, birden çok web sitesinde veya web uygulamasında düzenli olarak görünen JS işlevlerini ve özelliklerini fark edeceksiniz - menü animasyonları ve kaybolmalar, dosya yükleme formları ve resim galerileri gibi şeyler. Her ihtiyacınız olduğunda bu şeylerin her birini sıfırdan kodlayabilirsiniz, ancak bunun yerine jQuery gibi kodlama kitaplıkları kullanırsanız kodlama hayatınız çok daha kolay hissedecektir .

JQuery kitaplığı, tek satırlı jQuery komutları aracılığıyla gerçekleştirilebilen JavaScript kodlama işlevlerinden oluşur. Örneğin, yukarıdaki JavaScript kodu örneği, bunun yerine jQuery kodu kullanılarak gerçekleştirilirse şöyle görünür:

<script>

$ ("# gönder"). tıklayın (function () {

var tebrik = $ ("# isim"). val ();

$ ("# başlık"). html ("E-posta listemize katıldığınız için teşekkür ederiz , ”+ Selamlama);

yanlış dönüş;

});

<script />

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

Yukarıdaki gibi örneklere ek olarak (jQuery parçacıkları olarak kabul edilir - adanmış işlevleri gerçekleştirmek için doğrudan jQuery kitaplığından eklenen kod parçacıkları), jQuery kodu daha karmaşık eklentiler oluşturmak için bir araya getirilebilir. jQuery eklentileri, doğrudan jQuery UI (Kullanıcı Arabirimi) havuzunda bulunabilir, burada kaynak kodu kopyalama ve yapıştırma için kullanılabilir.

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 kitaplığıdır. React JS, Facebook tarafından 2011 yılında geliştirilen ve özellikle UI'ler (kullanıcı arayüzleri) oluşturmak için tasarlanmış bir ön uç JavaScript kitaplığıdır. Tanıdık değilseniz, kullanıcı arayüzleri, ekran menüleri, arama çubukları, düğmeler ve bir kişinin bir web sitesini veya uygulamayı kullanmak için etkileşime girdiği diğer her şeyden oluşan bir koleksiyondur ve siz bunları, vanilya JavaScript ile özenle oluştururken, bunun için zaman?

React, geliştiricilerin tekrar eden menü nesneleri ve efektleri (etkileşimli formlar, otomatik tamamlama özellikleri, açılma veya kapanma menü animasyonları vb.) İçin önceden yazılmış kodu kullanmasına olanak tanır ve ayrıca Sanal DOM adı verilen özellik sayesinde genel site hızını ve performansını artırır. olabilir burada hakkında tüm okumak ). React JS'yi nasıl kullanacağınızı öğrenmek, bir JavaScript geliştiricisi olarak hayatınızı çok daha kolaylaştıracak ve aynı zamanda sizi çok daha fazla işe alınabilir hale getirecektir.

DİĞER JAVASCRİPT KİTAPLIKLARI VE ÇERÇEVELERİ

JQuery ve React gibi JS kitaplıkları, bireysel kodlama ihtiyaçları için dijital İsviçre Ordusu bıçakları olarak işlev görürken, ön uç geliştiriciler JavaScript çerçeveleri adı verilen araçları kullanarak işleri bir adım öteye taşıyabilir .

JQuery'nin patchwork işlevselliğinin ötesine geçen JS çerçeveleri, JavaScript geliştiricilerine web siteleri veya web uygulamaları için tam şablonlar sağlar. JS çerçeveleri daha sonra, JS kodunun gitmesinin önerildiği şablonlarda boşluklar ve bu alanlara takılabilen önceden yazılmış kod (jQuery gibi) oluşturur.

Burada, endüstri standartları olarak kabul edilebilecek bir dizi çerçeve varken (örneğin, Vue ve Angular), öğrenmek için birini seçerken en iyi seçeneğiniz, potansiyel işverenleri veya müşterileri dikkate almak ve eğer varsa, hangi JS çerçevesini tercih ettiklerini belirlemektir. Unutmayın, bir çerçeve öğrendikten sonra, daha fazlasını almak nispeten kolaydır.

5. JavaScript Nasıl Öğrenilir ?

Paket servisi burada mı? HTML ve CSS , temel bir web sayfasını kodlamanıza izin verecek beceriler olsa da , JavaScript o sayfayı hayata geçirecek programlama dilidir. HTML ve CSS kendi başlarına sizi geliştirici işine başlamak için bir konuma getirecek olsa da, JavaScript öğrenmek için zaman ayırmak iş beklentilerinizin katlanarak artmasına yardımcı olacaktır.

Kapsamlı bir JavaScript eğitimine hazırsanız, Ön Uç Geliştirici Planımızdan başkasına bakmayın . Bu eğitmen liderliğindeki kurs, JavaScript dilinin ve jQuery kitaplığının yanı sıra HTML, CSS ve diğer kritik web geliştirici becerilerinin giriş ve çıkışlarında size rehberlik edecektir.