HTML ve JavaScript: Fark Nedir? Yeni başlayanların rehberi

Bu yazı için, artıları ve eksileri, geliştirme sırasında her bir dili nerede ve nasıl kullanacağınız ve çok daha fazlası ile ilgili olarak HTML ve JavaScript'e bakacağız. İlk olarak, her bir dilin ne olduğunu inceleyelim.

İçindekiler :

HTML ve JavaScript nedir?

Teknik tanımlar farklılık gösterse de, hem HTML hem de JavaScript kodlama dilleridir. Bu ilk bölümde, diller arasındaki büyük farklardan bahsedelim, ardından bunları nasıl ve nerede kullanacağınıza geçelim.

HTML

Köprü Metni Biçimlendirme Dili (HTML), tüm web'in bel kemiğidir. Adından da anlaşılacağı gibi, tam teşekküllü bir kodlama dilinden ziyade bir “işaretleme dili”dir. Pratik anlamda bu, sayfadaki kaplı içeriğin yapısını ve düzenini kontrol etmek için metin kullanacağınız anlamına gelir.

İşte HTML'nin nasıl göründüğüne dair bir örnek:

 < html > < body > < h1 > This is the main heading on the site. </ h1 > < p > This is the main body of content. </ p > < h2 > You can set other heading sizes here too. </ h2 > </ body > </ html >
 Kod dili: HTML, XML ( xml )

Sayfadaki içerik yapısını sunmak için işaretleme sağlar:

HTML ayrıca içeriğin sunumunu ve biçimlendirmesini de belirleyebilir. Web'in ilk günlerinde, bir web sitesinin tamamını kodlamak için HTML kullanırdınız. Genellikle tabloları kullanır, ardından başka bir dil kullanmaya gerek kalmadan kalın ve italik gibi metin biçimlendirmesini ayarlarsınız:

Bununla birlikte, modern web için HTML, "tanımlayıcı bir biçimlendirme" dilidir. Bu, yapıyı sunum yönlerinden ayırıyor gibi görünüyor. HTML5, bu amaç için belirli yapısal etiketler kullanır:

 < h1 > Choosing an Apple </ h1 > < section > < h2 > Introduction </ h2 > < p > This document provides a guide to help with the important task of choosing the correct Apple. </ p > </ section > < section > < h2 > Criteria </ h2 > < p > There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness... </ p > </ section >
 Kod dili: HTML, XML ( xml )

Kod kaynağı: Mozilla.

Bu, ön uçtaki önceki HTML örneğinden farklı görünmüyor, ancak arka uç, arama motorlarına ve geliştirme sürecine yardımcı olan daha fazla yapı ekliyor:

Unutulmaması gereken önemli bir nokta, HTML'nin diğer dillerle birlikte çalıştığıdır. Aslında, Basamaklı Stil Sayfaları (CSS) ve JavaScript ile birlikte web dillerinin “Kutsal Üçlüsü”nden birini temsil eder. İlki görsel tasarım seçimlerini ele alırken, JavaScript'in modern bir web sitesinde kendi sorumlulukları vardır.

JavaScript

JavaScript, neredeyse HTML kadar uzun bir geçmişe sahiptir. Geliştirilmesi, şu anda Brave Software'in (Brave tarayıcısının geliştiricileri) CEO'su olan ve daha önce Mozilla'nın CEO'su olarak çalışan Brendan Eich tarafından yapılmıştır. 1990'ların ortalarında Netscape Navigator tarayıcısı için JavaScript geliştirdi.

JavaScript, istemci tarafı bir betik dili ve web'in başka bir omurgasıdır. Bununla satır içi çalışabilseniz de (yani, aynı dosyada HTML ve CSS ile birlikte), çoğu geliştirici ayrı dosyalar kullanır ve JavaScript'i HTML belgelerinden "çağırır":

 var myPets = "" ; var pets = [ "cat" , "dog" , "hamster" , "hedgehog" ]; for ( var pet of pets){ myPets += pet + " " ; } // myPets = 'cat dog hamster hedgehog
 Kod dili: JavaScript ( javascript )

Kod kaynağı: X'i Y Dakikada Öğrenin.

Bu basit JavaScript pasajı, ekrana basit bir evcil hayvan listesi yazdıracaktır:

Genel olarak, JavaScript'in okunması HTML kadar kolay değildir ve çok daha karmaşık kullanım durumlarına sahiptir. Örneğin, onsuz dinamik web siteleri oluşturamaz ve bunlara göz atamazdık. Bir web sitesinin ön yüzünün pop-up reklamlar, tarayıcı oyunları, akış işlevselliği ve çok daha fazlası gibi dinamik öğelerinin çoğunun JavaScript'ten geldiğini göreceksiniz. Dil, web'in bir beygiridir ve onu hemen hemen her göreve, hatta PHP'yi sıklıkla kullanacağınız arka uç çalışmasına bile uyarlayabilirsiniz.

Aslında, JavaScript, tüm ana bilgisayar arasında bir üst standarda uyan yalnızca bir dildir: ECMAScript. Temel olarak bu standardı kullanan bir dilin bir başka popüler örneği de Google Apps Komut Dosyasıdır.

Bununla birlikte, her iki dilin her yerde bulunmasına rağmen, bunları kullanmanın hem olumlu hem de olumsuz yönleri vardır. Sonra, onları daha fazla tartışacağız.

HTML ve JavaScript'in artıları ve eksileri

Size hızlı bir spoiler vereceğiz: Sadece bir dil öğrenemezsiniz. Bir web geliştiricisi olarak başarılı bir kariyer oluşturmak için hem HTML'ye hem de JavaScript'e ihtiyacınız olacak. Aslında, web içeriğini yapılandırmanın ve onu dinamik hale getirmenin gerçek bir alternatifi olmadığından, artıları ve eksileri aşmanız gerekecek ^[1] .

Buna rağmen, güçlü ve zayıf yönlerin nerede olduğunu bilmek önemlidir, çünkü bu sizi daha iyi bir geliştirici yapacaktır. İlk olarak, işte HTML'deki düşüş:

• Okuması ve anlaması basit olduğu için HTML'yi neredeyse tüm diğer dillerden daha hızlı öğrenebilirsiniz.
• Dil, web'in temel bir temelidir, bu nedenle çok sayıda belge ve yardımcı öğretici mevcuttur.
• Bununla birlikte, basit olmasının bir nedeni, etiketler ve komutlar söz konusu olduğunda sınırlamalarıdır.
• Başka bir dil kullanmadan daha fazla etkileşim veya dinamik içerik ekleyemezsiniz.

Aksine, JavaScript neredeyse HTML'nin antitezidir:

• Bir siteye ihtiyaç duyduğunuz kadar dinamik ve etkileşimli içerik eklemek için JavaScript'i kullanabilirsiniz.
• Web tarayıcısı içinde çalıştığı için, çalışıp çalışmadığına dair anında geri bildirim alırsınız.
• Ancak, bu çalışma zamanı yürütmesi, iyi performans göstermesi için iyi ve optimum programlama gerektirir.
• Dil, HTML ve hatta CSS'den çok daha karmaşıktır. Bu, iyi bir iş çıkarabilmeniz için onu öğrenmenizin çok daha uzun sürmesi gerektiği anlamına gelir.

Aslında, her ikisini de kullanacağınız yerde HTML ile JavaScript'i karşılaştırmak için iyi bir zaman. Şimdi buna bir göz atalım.

Geliştirmede HTML ve JavaScript'i nasıl kullanacaksınız?

HTML ve JavaScript yan yana çalışır. Örneğin, tipik bir HTML belgesi alın:

 <!DOCTYPE html > < html > < body > < h1 > Hello World! </ h1 > < p > Welcome to my website! </ p > </ body > </ html >
 Kod dili: HTML, XML ( xml )

Bu, önceki HTML örneklerimize benzer bir çıktı üretecektir:

Bu belgeye JavaScript etkileşimi eklemek için yeni bir dosya oluşturup doldurmanız ve onu HTML'den çağırmanız gerekir:

 <!DOCTYPE html > < html > < head > < script src = "main.js" > </ script > </ head > < body > …
 Kod dili: HTML, XML ( xml )

Şu anda, çalıştırılacak herhangi bir JavaScript kodumuz olmadığı için bu, ön uçta hiçbir şey yapmıyor:

JavaScript dosyasında, ana belgeye içerik yerleştirmek veya kontrol etmek için referans olarak HTML etiketleriyle çalışacaksınız:

 … function modalPopup ( ) { alert( 'This will display text as an on-click action' ); }
 Kod dili: JavaScript ( javascript )

Daha sonra, eklemeyi hemen görmek için belki HTML düğmelerini kullanarak bunun üzerine inşa edebilirsiniz - bir uyarı görüntüleyen açılır bir kalıcı kutu:

Bu basit bir örnektir, ancak daha karmaşık uygulamalara bakmak için tarayıcınızın Elemanı İncele aracını kullanabilirsiniz. Örneğin, bir düğme genellikle daha fazla kod çalıştırmak için JavaScript kullanır ve bu da JavaScript kullanan bir açılır pencereyi tetikleyebilir:

Hatta JavaScript kullanarak akış ve video işlevlerini uygulayabileceksiniz:

Hem HTML hem de JavaScript'i birlikte kullanmak söz konusu olduğunda, olasılıklar geniştir ve geliştirme kapsamı neredeyse sınırsızdır.

HTML ve JavaScript'i nerede öğrenebilirsiniz?

Hem HTML hem de JavaScript temel web geliştirme dilleri olduğundan, bunları öğrenmenin pek çok yolu vardır ^[2] :

• Kitaplar aracılığıyla.
• Çevrimiçi kursları kullanma.
• Yüz yüze ders almak.

Çevrimiçi kaynaklar, bazı durumlarda en iyi erişilebilirliğe ve maliyete sahiptir. Örneğin, YouTube öğrenme web geliştirme hakkında binlerce video sağlar. Bununla birlikte, öğrenmek isteyen birçok geliştirici, makul bir maliyetle geniş bir kurs yelpazesine sahip olduğu için başlangıçta Udemy'ye yönelir ^[3] .

Mutlak temeller için, O'Reilly'nin kitapları harika, özellikle Head-First serisi. Ancak, tüm bilginiz için bunlara güvenmek istemeyeceksiniz (bazen eski uygulamalar sunabilecekleri için). başka bir kitaba veya kursa aktarın. Tabii ki, hem HTML hem de JavaScript belirli bir dili öğrenmek için ayrılmış kitaplara sahiptir.

Temel temelleri oluşturduktan sonra, öğrenme deneyiminizi güçlendirebileceğinden, basitçe kodlamaya başlamak isteyeceksiniz. Stack Overflow gibi siteleri ve bir dilin teknik belgelerini açık tutacaksınız, çünkü bunlara başvurmanız ve birçok soru sormanız gerekecek.

HTML ve JavaScript: kariyer beklentileri

Şimdiye kadar özetlemek gerekirse, web sitelerinin ön yüzünü geliştirmek için HTML ve JavaScript ile öğrenmek isteyeceksiniz ve bunu yapmak için pek çok kaynak var. Ancak, her geliştiricinin farklı hedefleri olacaktır. Bazıları bir hobi olarak öğrenmek isteyecek, bazıları ise bir kariyer arayacak. Bu nedenle, HTML ve JavaScript arasındaki karşılaştırma sapmaktadır.

Pek çok geliştirici türü olsa da, bunları üç genel türe ayıracaksınız:

• Ön uç geliştiriciler, HTML, CSS ve JavaScript kullanarak bir web sitesinin tarayıcıda nasıl çalıştığıyla ilgilenir.
• Arka uç geliştiricileri, bir web sitesinin başlığı altında veritabanları ve veri geçişi ile çalışmak için PHP, Python ve diğer dilleri kullanacak. Bu, doğru çerçeveye sahip JavaScript'i de içerebilir (kısaca daha fazlası.)
• Tam yığın geliştiriciler aynı anda hem ön hem de arka uçta çalışır.

Stack Overflow'a ^[4] göre, tam yığın ve arka uç geliştiriciler, profesyonel web geliştiricilerinin çoğunu oluşturur. Bununla birlikte, daha az olsa da, ön uç geliştiricilerin hala talebi var. PHP gibi arka uç dillerinin iyi bir şekilde uygulanmasının daha zor olabileceğini, bu da onlara daha fazla ihtiyaç olduğu anlamına gelir.

Dahası, JavaScript profesyonel ayarlar için en popüler dildir, ancak HTML neredeyse aynı oranda kullanım görmektedir. Profesyonel bir geliştirici olarak, her dili içeren işler yılda yaklaşık 65.000 ABD dolarından başlar. Ve bu, bir dizi sunucu tarafı ve daha yüksek seviye dili hesaba kattığınızda, ödeme ölçeğinin alt ucundadır.

JavaScript çerçeveleri

Daha önce belirttiğimiz gibi, HTML veya JavaScript'in alternatifi yoktur. Ancak iş JavaScript kullanmaya gelince, pek çok geliştirici bunu "vanilya" dilini kullanarak yapmaz. Bunun yerine, özel bir "çerçeve" seçmek için biraz zaman harcayacaklar. Bu genellikle eldeki görev için JavaScript kullanımını kolaylaştırır. Birçok çerçevenin belirli odak noktaları vardır, bu da projeye bağlı olarak farklı olanları kullanacağınız anlamına gelir.

Örneğin, Node.js, JavaScript'i bir arka uç, sunucu tarafı dili olarak kullanmanızı sağlar. Bir Kullanıcı Arayüzü (UI) oluşturmak istiyorsanız, React (veya belki Vue) yöneleceğiniz çerçeve olacaktır.

Ancak jQuery, web'in kullandığı en popüler JavaScript çerçevesidir ^[5] . Özetle jQuery, HTML dosyalarınızı daha kolay bir şekilde dolaşmanıza ve olay işleme işlevine, CSS animasyonlarına ve daha fazlasına daha fazla erişmenize olanak tanır.

Hem HTML hem de JavaScript öğrenmek gibi, farklı JavaScript çerçevelerinin de dille nasıl etkileşime girdiğini ve tabloya yeni işlevler getirdiğini öğrenmek ve anlamak isteyeceksiniz.

HTML ve JavaScript: temel farklılıkların dökümü

Bu yazı boyunca alınacak çok şey var. Bu nedenle, HTML ve JavaScript arasındaki temel farklara hızlı bir genel bakış:

Burada anlattığımız her şey göz önüne alındığında, muhtemelen web geliştirme için hangi dili öğrenmeniz gerektiğini bilmek isteyeceksiniz. Şimdi bunu özetleyelim.

HTML ve JavaScript: geliştirme için hangisini öğrenmelisiniz?

Modern bir web sitesi geliştirmek için hem HTML'ye hem de JavaScript'e ihtiyacınız olacağını öğrenmek şaşırtıcı olmamalıdır. Sadece bu da değil, özellikle ön yüz veya tam yığın geliştiriciler için CSS de önemli olacaktır. Aslında, ikincisi için PHP gibi bir dil öğrenmeniz ve Yapılandırılmış Sorgu Dili (SQL) kullanarak veritabanlarıyla çalışma becerisine sahip olmanız gerekir.

Tavsiyemiz, bunu hızlı bir şekilde öğrenebileceğiniz için HTML ile başlamanız ve anlayabileceğiniz site yapıları oluşturmaya başlamanızdır. Buradan, CSS sitenize görsel tasarım eklemenize yardımcı olurken, JavaScript modern etkileşim oluşturmanıza yardımcı olur. Ek olarak jQuery, React ve Node'u da öğrenmek isteyebilirsiniz çünkü bunlar UI tasarımı, arka uç desteği ve daha iyi HTML geçişi gibi alanları kapsayacaktır.

Çözüm

Öğrenilecek çok sayıda programlama dili vardır, ancak yalnızca bir avuç web sitesi geliştirmenize izin verir. Bu makale HTML ile JavaScript'i karşılaştırırken, ön uç web geliştirme alanında kariyer yapmak için her ikisini de öğrenmeniz gerekecek.

Ancak JavaScript geliştiricileri, dilin esnekliği nedeniyle genellikle daha fazla para kazanır: örneğin, Google Apps Komut Dosyası ürünleri geliştirebilirsiniz. Ne olursa olsun, daha az esnek ve uyarlanabilir olmasına rağmen HTML'yi de bilmeniz gerekecek.

HTML ve JavaScript hakkında herhangi bir sorunuz var mı ve hangisi size daha uygun olur? Aşağıdaki yorumlar bölümünde sorun!