JavaScript Nedir?

Konu Başlıkları

JavaScript, web geliştirme dünyasında en yaygın kullanılan ve en etkili programlama dillerinden biridir. Hem istemci tarafında (client-side) hem de sunucu tarafında (server-side) kullanılabilen JavaScript, interaktif ve dinamik web sayfaları oluşturmak için vazgeçilmez bir araçtır. Bu yazıda, JavaScript’in tarihçesi, temel özellikleri, yapısı, çalışma prensibi, modern kullanımı ve önemi üzerinde duracağız.

1. JavaScript’in Tarihçesi

JavaScript, 1995 yılında Brendan Eich tarafından Netscape tarayıcısı için geliştirilmiştir. İlk başta “LiveScript” olarak adlandırılan bu dil, daha sonra Java ile olan ilişkisini vurgulamak amacıyla “JavaScript” adını aldı. JavaScript, web sayfalarına dinamik özellikler eklemek için tasarlandı ve ilk başta temel form doğrulama işlemleri gibi basit görevler için kullanıldı.

JavaScript’in ilk sürümü, 1995’te piyasaya sürüldü ve kısa sürede popülerlik kazandı. 1996 yılında, Netscape, JavaScript’i resmi bir standart haline getirmek için ECMA International’a başvurdu. 1997 yılında ECMAScript 1.0 standardı oluşturuldu ve bu standart, JavaScript dilinin temelini oluşturdu.

Sonraki yıllarda, JavaScript sürekli olarak güncellendi ve geliştirildi. 1999 yılında ECMAScript 3.0 standardı yayınlandı ve 2009’da ECMAScript 5.0 ile birlikte daha fazla özellik eklendi. 2015 yılında ise ECMAScript 6 (ES6) olarak bilinen standardın yayınlanması, JavaScript’te büyük bir devrim yarattı. ES6, sınıflar, modüller, ok fonksiyonları gibi birçok yeni özellik ekleyerek dili modern hale getirdi.

2. JavaScript’in Temel Özellikleri

JavaScript’in temel özellikleri, onu güçlü ve esnek bir dil haline getiren unsurlardır:

Dinamik ve Zayıf Tipli: JavaScript, dinamik bir dil olduğundan, değişkenlerin türleri tanımlanmaz ve çalışma zamanında belirlenir. Bu, geliştiricilere esneklik sağlar, ancak hata ayıklamayı zorlaştırabilir.
Nesne Tabanlı: JavaScript, nesne tabanlı bir programlama dilidir. Fonksiyonlar ve nesneler, dilin temel yapı taşlarıdır. Geliştiriciler, nesne tabanlı programlama ilkelerine uygun olarak kod yazabilirler.
Fonksiyonel Programlama Desteği: JavaScript, yüksek düzeyde bir fonksiyonel programlama dilidir. Fonksiyonlar, birinci sınıf nesneler olarak kabul edilir; yani, fonksiyonlar değişken olarak atanabilir, başka fonksiyonlara argüman olarak geçirilebilir ve fonksiyonlardan döndürülebilir.
Etkin Olay Yönetimi: JavaScript, kullanıcı etkileşimlerini işlemek için etkin bir olay yönetimi sistemi sunar. Kullanıcı fareyi tıkladığında, tuşlara bastığında veya sayfada bir değişiklik yaptığında JavaScript, bu olayları yakalayabilir ve uygun yanıtları verebilir.

3. JavaScript Yapısı

JavaScript kodu genellikle <script> etiketleri içinde HTML belgelerine yerleştirilir veya ayrı bir dosya olarak tanımlanabilir. Aşağıda basit bir JavaScript örneği verilmiştir:


Copied!

    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
    

<body>
    <h1>
<span class="ez-toc-section" id="JavaScript_ile_Etkilesim"></span>JavaScript ile Etkileşim<span class="ez-toc-section-end"></span>
</h1>
    <button onclick="selamVer()">Bana Tıkla</button> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://osmanbayrak.com.tr/wp-content/litespeed/js/63147b098cad38e9a74bbc994e646409.js?ver=a14be"></script></body>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
    <script>
        function selamVer() {
            alert("Merhaba, Dünya!");
        }
    </script>
</head>
<body>
    <h1>JavaScript ile Etkileşim</h1>
    <button onclick="selamVer()">Bana Tıkla</button>
</body>
</html>

Bu örnekte, kullanıcı butona tıkladığında selamVer fonksiyonu çağrılır ve bir uyarı penceresi açılır.

4. JavaScript’in Çalışma Prensibi

JavaScript, tarayıcıda veya sunucu tarafında çalıştırılabilir. İstemci tarafında çalıştığında, tarayıcı JavaScript motoru tarafından yorumlanır. Tarayıcı, HTML belgesini yüklerken JavaScript kodunu da yükler ve bu kodu çalıştırır. En popüler JavaScript motorları arasında Google Chrome için V8, Firefox için SpiderMonkey ve Microsoft Edge için Chakra bulunmaktadır.

JavaScript, tarayıcıda bir olay döngüsü ile çalışır. Kullanıcı etkileşimleri (fare tıklamaları, tuş vuruşları vb.) gerçekleştiğinde, JavaScript bu olayları işler ve uygun fonksiyonları çağırır. Bu, web sayfalarının dinamik ve etkileşimli olmasını sağlar.

JavaScript’in sunucu tarafındaki kullanımı ise genellikle Node.js ile gerçekleştirilir. Node.js, JavaScript kodunu sunucu ortamında çalıştıran bir platformdur. Bu, geliştiricilerin hem istemci hem de sunucu tarafında aynı dil ile çalışabilmesini sağlar.

5. Modern JavaScript Kullanımı

Modern JavaScript, geliştiricilere daha iyi bir deneyim sunmak için birçok araç ve kütüphane içerir. Bunlar arasında:

Framework’ler ve Kütüphaneler: JavaScript, React, Angular ve Vue.js gibi popüler kütüphaneler ve framework’ler ile birlikte gelir. Bu araçlar, kullanıcı arayüzü geliştirmeyi kolaylaştırır ve daha verimli hale getirir.
Modüler Programlama: JavaScript, modüler programlama desteği ile geliştirilmiştir. ES6 ile birlikte gelen modül sistemi, kodun daha düzenli ve yönetilebilir olmasını sağlar. Geliştiriciler, farklı dosyalarda yer alan modülleri kolayca içe aktarabilir ve kullanabilirler.
Asenkron Programlama: JavaScript, asenkron programlama desteği sunar. Promiseler ve async/await yapıları, zaman alıcı işlemler (örneğin, API çağrıları) sırasında kullanıcı arayüzünün donmasını önler ve daha iyi bir kullanıcı deneyimi sağlar.

6. JavaScript’in Önemi ve Kullanım Alanları

JavaScript, web geliştirme dünyasında kritik bir rol oynamaktadır. Aşağıda JavaScript’in önemi ve kullanım alanları özetlenmiştir:

Dinamik ve Etkileşimli Web Sayfaları: JavaScript, web sayfalarına dinamik içerikler ekleyerek kullanıcı deneyimini geliştirir. Form doğrulama, içerik güncelleme, animasyonlar gibi birçok etkileşimli özellik eklenebilir.
Tek Sayfa Uygulamaları (SPA): JavaScript, tek sayfa uygulamaları oluşturmak için idealdir. Kullanıcılar, sayfa yenilemesi olmadan içerikleri görüntüleyebilir ve etkileşimde bulunabilir.
Sunucu Tarafı Programlama: Node.js sayesinde JavaScript, sunucu tarafında da kullanılabilir. Bu, geliştiricilerin istemci ve sunucu tarafında aynı dil ile çalışmasına olanak tanır.
Oyun Geliştirme: JavaScript, oyun geliştirmek için de kullanılabilir. HTML5 ve WebGL gibi teknolojiler ile etkileşimli oyunlar oluşturmak mümkündür.

7. Sonuç

JavaScript, modern web geliştirmede kritik bir rol oynayan güçlü bir programlama dilidir. Tarihçesi boyunca sürekli olarak evrim geçirmiş ve gelişen teknolojiye ayak uydurmuştur. Dinamik yapısı, nesne tabanlı özellikleri ve etkin olay yönetimi gibi unsurları ile JavaScript, etkileşimli ve dinamik web sayfaları oluşturmayı mümkün kılar.

Modern JavaScript, geliştiricilere sunduğu kütüphaneler, framework’ler ve modüler yapı ile daha verimli bir geliştirme süreci sağlar. JavaScript’in sunduğu asenkron programlama ve etkileşimli özellikler, kullanıcı deneyimini büyük ölçüde iyileştirir.

Sonuç olarak, JavaScript öğrenmek ve anlamak, web geliştirme kariyerine adım atan herkes için kritik bir beceridir. JavaScript, sadece web sayfalarındaki etkileşimi değil, aynı zamanda modern yazılım geliştirme süreçlerini de şekillendiren bir dil olarak önemini korumaktadır.

Görünüm: 22

JavaScript Nedir?