Birçok tarayıcı, web'de dinamik şeyler yapmak için bir komut dosyası dili olarak JavaScript kullanır. Göstermek için tıkla açılır menüsü, bir sayfaya fazladan içerik eklendiğini ve bir sayfadaki öğe renklerinin dinamik olarak değiştirildiğini gördüğünüzde, birkaç özelliği belirtmek gerekirse, JavaScript'in etkilerini görürsünüz.
JavaScript Olmasaydı Web Nasıl Görünürdü?
JavaScript olmasaydı, web'de sahip olacağınız tek şey HTML ve CSS olurdu. Bunlar tek başına sizi birkaç web sayfası uygulamasıyla sınırlar. Web sayfalarınızın% 90'ı (daha fazla değilse) statik olacaktır ve yalnızca CSS'nin sağladığı animasyonlar gibi dinamik değişikliklere sahip olursunuz.
JavaScript İşleri Nasıl Dinamik Hale Getiriyor?
HTML, web belgenizin yapısını ve içindeki içeriği tanımlar. CSS, web belgesinde sağlanan içerik için çeşitli stiller bildirir.
HTML ve CSS, genellikle programlama dilleri yerine biçimlendirme dilleri olarak adlandırılır, çünkü bunlar, özünde, çok az dinamizme sahip belgeler için biçimlendirme sağlarlar.
Diğer yandan JavaScript, Matematik hesaplamalarını destekleyen, HTML içeriğini DOM'a dinamik olarak eklemenize , dinamik stil bildirimleri oluşturmanıza, başka bir web sitesinden içerik getirmenize ve çok daha fazlasını yapmanıza olanak tanıyan dinamik bir programlama dilidir .
JavaScript'in tüm bunları nasıl yaptığına geçmeden önce, hızlı bir örneğe bakalım.
Bu kod parçasına göz atın: https://codepen.io/Dillion/full/XWjvdMG
Kod bölmesinde, giriş alanına yazarken metnin ekranda göründüğünü göreceksiniz. Bu, JavaScript ile mümkün kılınmıştır. Bunu HTML, CSS veya her ikisi ile birlikte elde edemezsiniz.
JavaScript, bu makalede ele alabileceğimden çok daha fazlasını yapabilir. Ancak JS'yi kullanmaya başlamanız için şunlara bakacağız:
HTML'de JavaScript nasıl kullanılır
veri tipleri
değişkenler
yorumlar
fonksiyonlar
HTML'de JavaScript Nasıl Kullanılır
Tıpkı CSS'de olduğu gibi, JavaScript de HTML'de çeşitli şekillerde kullanılabilir, örneğin:
1. Satır içi JavaScript
Burada, bazı özel JS tabanlı özniteliklerde HTML etiketlerinde JavaScript koduna sahipsiniz.
Örneğin, HTML etiketleri, bir etkinlik tetiklendiğinde bazı kodları satır içi olarak yürütmenize olanak tanıyan etkinlik özniteliklerine sahiptir. Demek istediğim şu:
<button onclick="alert('You just clicked a button')">Click me!</button>
Bu, satır içi JavaScript örneğidir. Değeri bir onclickmiktar Eşleşme hesaplaması, DOM'ye dinamik bir ekleme olabilir - sözdizimi için geçerli herhangi bir JavaScript kodu.
2. scriptetiketli dahili JavaScript
Tıpkı stylebir HTML sayfasındaki stil bildirimleri etiketi gibi, scriptJavaScript için de vardır. İşte nasıl kullanıldığı:
<script>
function(){
alert("I am inside a script tag")
</script>
3. Harici JavaScript
JavaScript kodunuzun farklı bir dosyada olmasını isteyebilirsiniz. Harici JavaScript buna izin verir. Bu tür kullanım durumları için, işte şu şekilde yapılır:
<!-- index.html -->
<script src="./script.js"></script>
// script.js
alert("I am inside an external file");
srcÖznitelik scriptetiketi JavaScript kodu için bir kaynak uygulamasını sağlar. Bu referans önemlidir, çünkü tarayıcıya içeriğini de getirmesi için bildirir script.js.
script.jsile aynı dizinde index.htmlolabilir veya başka bir web sitesinden alınabilir. İkincisi için, tam URL'yi ( https://.../script.js) iletmeniz gerekir .
Uyarı .jsuzantısı? Bu, HTML'de olduğu gibi JavaScript dosyalarının uzantısıdır .html.
HTML’imize JavaScript uygulama yollarını aradığımıza göre, şimdi JavaScript’in bazı özelliklerine bakalım.