JavaScript Temelleri Nedir Cheat Sheet

JavaScript, üstesinden gelmek için son derece zor olabilecek karmaşık bir konudur.

Ancak, bunu anlamak hiç bu kadar önemli olmamıştı çünkü yönettiğimiz web sitelerinde JavaScript giderek yaygınlaşıyor.

Modern web gelişmeye devam ettikçe, JavaScript kullanımı artmaya devam ediyor .

SEO uzmanları, web siteleri statik olduğunda ve yalnızca HTML ve CSS’de kodlandığında geçenler için uzun sürebilir. Bununla birlikte, web sitelerine ilgi göstermek genellikle JavaScript tarafından desteklenen etkileşime ihtiyaç duyar.

javascript bytes http archive 768x358 JavaScript Temelleri Nedir  Cheat Sheet

Tüm web’de JavaScript baytlarının sayısı son üç yılda masaüstünde yüzde 35, mobilde yüzde 62.7 arttı.

Google Webmaster Trendleri Analisti John Mueller’in dediği gibi: JavaScript “gitmiyor”.

Bu programlama dili etrafımızdadır, bu yüzden onu daha iyi tanıyalım. Proaktif olalım ve ondan korkmak yerine JavaScript hakkında daha fazla bilgi edelim.

Genellikle, JavaScript’in yalnızca geliştiricilerin endişelenmesi için bir yanlış anlaşılma vardır.

Müşterilerin ve arama motorlarının web sitelerinin içeriğine erişmesini isteyen herkes için bir soruna yol açabileceği için bunun böyle olmadığını savunuyorum.

JavaScript’i tam olarak bilmiyorsanız veya ne olduğu veya yaptığı hakkında hiçbir fikriniz yoksa endişelenmeyin.

Keşif yolculuğunuza başlamanıza yardımcı olması için bilmeniz gereken temel terimler ve temel kavramların bir sözlüğünü bir araya getirdim.

JavaScript Nedir?

JavaScript, dinamik öğeler veya etkileşim gibi bir web sitesinde karmaşık özellikleri uygulamanıza izin veren bir programlama dilidir.

JavaScript, kaynak koddaki HTML ve CSS’deki bilgiler ayrıştırılıp oluşturulduktan sonra yürütülür.

Ardından JavaScript, içinde belirtilen olayları veya değişkenleri tetikler, Belge Nesne Modeli (DOM) güncellenir ve son olarak da JavaScript tarayıcıda oluşturulur.

HTML ve CSS, genellikle bir sayfanın yapısının temellerini oluşturur ve herhangi bir JavaScript, son düzeltmeleri ve değişiklikleri yapar.

Belge Nesne Modeli (DOM)

Sayfa yüklendiğinde Belge Nesne Modeli (DOM) oluşturulur ve sayfadaki tüm farklı öğeleri ve öznitelikleri haritalayan düğüm ve nesnelerden oluşur.

Sayfa bu şekilde eşleştirilir, böylece diğer programlar sayfayı, yapısı ve içeriği açısından değiştirebilir ve üzerinde değişiklik yapabilir.

dom example 480x341 JavaScript Temelleri Nedir  Cheat Sheet

Bir sayfanın DOM öğelerini değiştirmek, JavaScript gibi bir dil kullanarak mümkündür.

ECMAScript

ECMAScript (ES), JavaScript kodunun kullanımını standartlaştırmak için oluşturulan bir betik dilidir.

Dil güncellendiğinde ve ES5 ve ES6 (ayrıca ES2015 olarak da bilinir) gibi zaman içinde değiştirildiğinde ECMAScript’in farklı sürümleri yayınlandı.

Transpiling

Bir aktarıcı, kaynak kodunu farklı bir programlama diline dönüştüren bir araçtır. Konsept biraz Google Translate’e benziyor ancak kod için.

Belirli bir kaynak dili farklı bir hedef dile, örneğin JavaScript’i C ++ veya Python’dan Ruby’ye dönüştürebilirsiniz.

Özellikle JavaScript oluşturma ile ilgili olarak, ES6’yı ES5’e dönüştürmek için genellikle bir aktarıcı önerilir, çünkü Google şu anda henüz ES6’yı desteklemeyen eski bir Chrome sürümü kullanıyor.

Chrome 41

Sayfaları oluştururken, Google , Chrome 41’i temel alan bir web oluşturma hizmetikullanır. Bu, Google’ın oluşturma motorunun belirli bir Chrome sürümünün aynı özelliklerini ve işlevlerini desteklediği anlamına gelir.

En güncel sürümün Chrome 71 olduğunu düşündüğünüzde, Chrome 41’in 2015’teyayına girmesinden bu yana birçok sürümün başlatıldığını ve bu sürümlerin hepsinin yeni özelliklerle geldiğini görebilirsiniz. Bu nedenle, Google’ın oluşturma hizmeti şu anda dilin sonraki ES6 sürümünden ziyade ES5’i desteklemektedir.

Tek Sayfalık Uygulama (SPA)

Tek sayfalık bir uygulama (SPA), yeni HTML ve içerik için sunucuya ayrı isteklerde bulunmak yerine, bir sayfayı kullanıcıyla etkileşime girdiğinde dinamik olarak yeniden yazan ve yeniden işleyen web sitesi veya web uygulamasıdır.

SPA çerçevelerinin dinamik olarak değişen öğelerini desteklemek için JavaScript çerçeveleri kullanılabilir.

Açısal, Polimer, Tepki ve Vue

Bunların hepsi farklı JavaScript çerçeveleridir.

  • Açısal ve Polimer Google tarafından geliştirilmiştir.
  • Tepki Facebook tarafından geliştirilmiştir.
  • Vue, Google’ın Angular ekibinde çalışan Evan You tarafından geliştirilmiştir .
javascript frameworks 768x296 JavaScript Temelleri Nedir  Cheat Sheet

Her JavaScript çerçevesinin kendi avantajları ve dezavantajları vardır, bu nedenle geliştiriciler kendilerine ve üzerinde çalıştıkları projeye en uygun olanla çalışmayı seçecektir.

Farklı çerçevelerin nasıl ölçüldüğü hakkında daha fazla bilgi edinmek istiyorsanız, bu kılavuz detaylı bir karşılaştırma sunar.

JavaScript Rendering

JavaScript oluşturma, komut dosyasını ve içerdiği talimatları almayı, hepsini işlemeyi ve ardından istenen çıktının tarayıcıda gösterilmesi için çalıştırmayı içerir. JavaScript’in oluşturulma şeklini kontrol etmek için kullanabileceğiniz birçok farklı yöntem vardır.

Bir sayfada işlenecek JavaScript gerektirmesi iki temel alanı olumsuz yönde etkileyebilir:

  • Site hızı
  • Arama motoru tarama ve dizine alma

Hangi işleme yöntemini kullandığınıza bağlı olarak, sayfa yükleme hızını azaltabilir ve içeriğin tarama ve dizine alma için arama motorlarında erişilebilir olmasını sağlayabilirsiniz.

Ön render

Ön işleme, içeriği kullanıcı veya arama motoru tarafından istenmeden önce bir sayfada görüntülemeyi içerir; böylece içeriğin tümü hazır durumda olacak şekilde statik bir sayfa alırlar.

Bir sayfayı bu şekilde önceden yükleyerek, içeriğinize bir arama motoru veya kullanıcının tarayıcısı yerine sayfayı kendi oluşturmak zorunda olacaksınız.

Ön işleme, genellikle insanlar yerine arama motoru botlarında kullanılır. Bunun nedeni, statik ve önceden oluşturulmuş bir sayfanın kullanıcılar için daha az ilgi çekici olacağından, herhangi bir dinamik içerik veya etkileşime sahip olmadığı için kullanıcılar için daha az ilgi çekici olmasıdır.

Sunucu tarafı oluşturma

Barındırma sunucusu, ağır kaldırma işlemini gerçekleştirir ve sayfayı, JavaScript’in daha önce işlendiğinden ve istendiğinde istendiğinde kullanıcının tarayıcısına veya arama motoru tarayıcısına aktarılmaya hazır olmasını sağlayacak şekilde düzenler.

server side rendering 768x227 JavaScript Temelleri Nedir  Cheat Sheet

Bu yöntem, kullanıcının cihazında JavaScript’in işlenmesinden kaynaklanabilecek gerilimi azaltmaya yardımcı olur ve bu da sayfa yükleme hızını artırabilir.

Sunucu tarafı oluşturma aynı zamanda tüm içeriğin arama motorları tarafından görüntülenmesini ve dizine eklenmesini sağlar.

Müşteri Tarafındaki Rendering

İstemci tarafı oluşturma sırasında JavaScript, kullanıcının tarayıcısı veya bir sayfa isteyen arama motoru tarafından işlenir.

Sunucu ilk isteği yerine getirir, ancak sayfanın işlenmesi ve görüntülenmesi çalışmalarının geri kalan kısmı kullanıcının cihazında veya arama motorunda yer alır.

client side rendering 768x229 JavaScript Temelleri Nedir  Cheat Sheet

Google’da gezinme sayfaları arasında bir gecikme olduğundan ve daha sonra bunları oluşturabildiğinden, istemci tarafı oluşturma özelliğini kullanmamaları önerilir.

Google, onları işlemek için yeterli kaynak bulunana kadar kuyruğa alınması gereken sayfaları koyar.

Sayfayı istemci tarafı oluşturmak için Google’a güveniyorsanız, bu, başlangıçta tarandıktan bir hafta sonra endekslemeyi geciktirebilir.

Dinamik Renderleme

Dinamik görüntü oluşturma, bir kullanıcının tarayıcısının veya bir arama motoru botunun bir sayfa talep edip etmemesine bağlı olarak farklı oluşturma yöntemleri kullanmayı içerir.

Siteniz genellikle istemci tarafı oluşturuyorsa, Googlebot algılandığında, sayfa küçük bir istemci tarafı oluşturucu (örneğin, Puppeteer veya Rendertron ) kullanılarak önceden oluşturulur , böylece içerik hemen görülebilir ve dizine eklenebilir.

dynamic rendering 768x385 JavaScript Temelleri Nedir  Cheat Sheet

Hibrit İşleme

Karma oluşturma, hem sunucu tarafı oluşturma hem de istemci tarafı oluşturma işleminin bir kombinasyonunu içerir.

Çekirdek içerik önceden oluşturulmuş sunucu tarafındadır ve kullanıcının tarayıcısı veya içeriği isteyen arama motoru tarayıcısı olsun istemciye gönderilir.

Sayfa ilk olarak yüklendikten sonra, herhangi bir etkileşim için ek JavaScript daha sonra istemci tarafı haline getirilir.

hybrid rendering 768x456 JavaScript Temelleri Nedir  Cheat Sheet

Sonuç

Umarım bu kılavuzu yararlı buldunuz ve JavaScript’in temellerini ve web sitelerini nasıl etkilediğini daha iyi anlamanıza yardımcı oldu.

Artık kilit terimlerden bahsettiğinize göre, geliştiricilerle olan konuşmalarınızda kendiniz için daha iyi donanımlı olmalısınız!