diff options
Diffstat (limited to 'files/tr/learn/getting_started_with_the_web')
5 files changed, 0 insertions, 695 deletions
diff --git a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 4b706170ec..0000000000 --- a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: How the Web works -slug: Learn/Getting_started_with_the_web/How_the_Web_works -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Öğren/Getting_started_with_the_web/How_the_Web_works ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Nasıl web işleri</em> sağlar basitleştirilmiş bir bakış ne durumda görünümünde bir web sayfası içinde bir web tarayıcı üstünde senin bilgisayar ya da telefon.</p> -</div> - -<p>Bu teori, kısa vadede web kodu yazmak için gerekli değildir, ancak çok geçmeden arka planda neler olup bittiğini anlamaktan gerçekten yararlanmaya başlayacaksınız.</p> - -<h2 id="İstemciler_ve_sunucular">İstemciler ve sunucular</h2> - -<p>Web'e bağlı bilgisayarlara <strong>istemciler </strong>ve <strong>sunucular denir</strong>. Nasıl etkileşime girdiklerine dair basitleştirilmiş bir diyagram şöyle görünebilir:</p> - -<p><img alt="İstemci ve sunucuyu temsil eden iki daire. Bir ok etiketli istek istemciden sunucuya gidiyor ve bir ok etiketli yanıtlar sunucudan istemciye gidiyor" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> - -<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> - -<ul> - <li>İstemciler, tipik bir web kullanıcısının internete bağlı cihazlarıdır (örneğin, Wi-Fi'ye bağlı bir bilgisayar veya mobil ağa bağlı bir telefon) ve bu cihazlarda bulunan web tabanlı yazılımlardır (genellikle Firefox veya Chrome gibi bir web tarayıcısı).</li> - <li>Sunucular, web sayfalarını, siteleri veya uygulamaları depolayan bilgisayarlardır. Bir istemci aygıtı bir web sayfasına erişmek istediğinde, web sayfasının bir kopyası sunucudan kullanıcının web tarayıcısında görüntülenecek istemci makineye yüklenir.</li> -</ul> - -<h2 id="Araç_kutusunun_diğer_bölümleri">Araç kutusunun diğer bölümleri</h2> - -<p>Yukarıda anlattığımız istemci ve sunucu tüm hikayeyi anlatmıyor. Burada başka birçok bölüm var ve bunları aşağıda açıklayacağız.</p> - -<p>Şimdilik, Web'in bir yol olduğunu hayal edelim. Yolun bir ucunda, eviniz gibi bir müşteri var. Yolun diğer ucunda bir şey satın almak istediğiniz bir dükkan olan sunucu var.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> - -<p>İstemci ve sunucuya ek olarak, biz de merhaba demek gerekir:</p> - -<ul> - <li><strong>İnternet bağlantınız</strong>: çevrimiçi veri göndermenizi ve almanızı sağlar. Temelde eviniz ve dükkan arasındaki sokak gibi.</li> - <li><strong>TCP / IP</strong>: iletim kontrol Protokolü ve İnternet Protokolü, verilerin internet üzerinden nasıl geçmesi gerektiğini tanımlayan iletişim protokolleridir. Bu, sipariş vermenize, mağazaya gitmenize ve mallarınızı satın almanıza izin veren ulaşım mekanizmaları gibidir. Örneğimizde, bu bir araba ya da bisiklet gibidir (ya da etrafta dolaşabilirsiniz).</li> - <li><strong>DNS</strong>: Alan Adı sunucuları Web siteleri için bir adres defteri gibidir. Tarayıcınıza bir web adresi yazdığınızda, tarayıcı Web sitesini almadan önce web sitesinin gerçek adresini bulmak için DNS'YE bakar. Tarayıcı, web sitesinin hangi sunucuda yaşadığını bulmalıdır, böylece HTTP mesajlarını doğru yere gönderebilir (aşağıya bakınız). Bu, mağazanın adresini aramak gibi, böylece ona erişebilirsiniz.</li> - <li><strong>HTTP</strong>: köprü metni Aktarım Protokolü, istemcilerin ve sunucuların birbirleriyle konuşması için bir dili tanımlayan bir uygulama protokolüdür. Bu, mallarınızı sipariş etmek için kullandığınız dil gibidir.</li> - <li><strong>Bileşen dosyaları</strong>: bir web sitesi, mağazadan satın aldığınız malların farklı bölümlerine benzeyen birçok farklı dosyadan oluşur. Bu dosyalar iki ana tipte gelir: - <ul> - <li><strong>Kod dosyaları</strong>: web siteleri öncelikle HTML, CSS ve Javascript'ten oluşturulmuştur, ancak daha sonra diğer teknolojilerle tanışacaksınız.</li> - <li><strong>Varlıklar</strong>: bu, resimler, müzik, video, Word belgeleri ve PDF'ler gibi bir Web sitesini oluşturan diğer tüm şeyler için ortak bir addır.</li> - </ul> - </li> -</ul> - -<h2 id="Peki_tam_olarak_ne_olacak">Peki tam olarak ne olacak?</h2> - -<p>Tarayıcınıza bir web adresi girdiğinizde (analojimiz için mağazaya gitmek gibi):</p> - -<ol> - <li>Tarayıcı DNS sunucusuna gider ve web sitesinin yaşadığı sunucunun gerçek adresini bulur (mağazanın adresini bulursunuz).</li> - <li>Tarayıcı, sunucuya bir HTTP isteği mesajı gönderir ve web sitesinin bir kopyasını müşteriye göndermesini ister (mağazaya gidin ve mallarınızı sipariş edin). Bu ileti ve istemci ile sunucu arasında gönderilen diğer tüm veriler, TCP/IP kullanarak ınternet bağlantınız üzerinden gönderilir.</li> - <li>Sunucu müşterinin isteğini onaylarsa, sunucu müşteriye bir "200 Tamam"mesajı gönderir, bu da "elbette bu web sitesine bakabilirsiniz! İşte burada " ve daha sonra web sitesinin dosyalarını tarayıcıya veri paketleri adı verilen bir dizi küçük parça olarak göndermeye başlar (dükkan size mallarınızı verir ve bunları evinize geri getirirsiniz).</li> - <li>Tarayıcı, Küçük parçaları tam bir web sayfasına toplar ve size görüntüler (mallar kapınıza gelir — yeni parlak şeyler, harika!).</li> -</ol> - -<h2 id="DNS_açıkladı">DNS açıkladı</h2> - -<p>Gerçek web adresleri, en sevdiğiniz web sitelerini bulmak için adres çubuğunuza yazdığınız güzel, unutulmaz dizeler değildir. Bunlar aşağıdaki gibi görünen özel sayılardır: <code>63.245.215.20</code>.</p> - -<p>Buna bir <a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Glossary/IP_Address">IP adresi</a>denir ve web üzerinde benzersiz bir konumu temsil eder. Ancak, hatırlamak çok kolay değil, değil mi? Bu yüzden Alan Adı sunucuları icat edildi. Bunlar, tarayıcınıza yazdığınız bir web adresiyle eşleşen özel sunuculardır (örneğin "mozilla.org") web sitesinin gerçek (IP) adresine.</p> - -<p>Web sitelerine doğrudan IP adresleri üzerinden ulaşılabilir. Bir web sitesinin IP adresini, etki alanını IP Denetleyicisi gibi bir araca yazarak bulabilirsiniz .</p> - -<h2 id="Paketler_açıklandı">Paketler açıklandı</h2> - -<p>Daha önce, verilerin sunucudan istemciye gönderildiği formatı tanımlamak için "paketler" terimini kullandık. Burada ne demek istiyoruz? Temel olarak, veriler web üzerinden gönderildiğinde, binlerce küçük parça olarak gönderilir, böylece birçok farklı web kullanıcısı aynı web sitesini aynı anda indirebilir. Web siteleri tek büyük parçalar olarak gönderildiyse, yalnızca bir kullanıcı bir seferde bir tane indirebilir, bu da Web'i çok verimsiz ve kullanımı çok eğlenceli hale getirecektir.</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/How_the_Internet_works">İnternet nasıl çalışır?</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-basic-introduction/" rel="noopener">HTTP-uygulama düzeyinde bir protokol</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-lets-get-it-on/" rel="noopener">HTTP: Hadi başlayalım!</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-response-codes/" rel="noopener">HTTP: yanıt kodları</a><a href="https://dev.opera.com/articles/http-response-codes/"> </a></li> -</ul> - -<h2 id="Kredi">Kredi</h2> - -<p>Sokak fotoğraf: <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ" rel="noopener">Sokak beste</a>, <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/" rel="noopener">Kevin D</a>.</p> - -<div class="prevnext"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website"><span class="label">Önceki </span></a><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Genel Bakış: web ile Başlarken</a></div> - -<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="Bu_modülde">Bu modülde</h2> - -<ul> - <li id="Installing_basic_software"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Temel yazılım yükleme</a></li> - <li id="What_will_your_website_look_like"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web siteniz nasıl görünecek?</a></li> - <li id="Dealing_with_files"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a></li> - <li id="HTML_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></li> - <li id="CSS_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></li> - <li id="JavaScript_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></li> - <li id="Publishing_your_website"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Web sitenizi yayınlama</a></li> - <li id="How_the_web_works"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır?</a><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"> </a></li> -</ul> diff --git a/files/tr/learn/getting_started_with_the_web/index.html b/files/tr/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 502ad9648c..0000000000 --- a/files/tr/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Web ile başlarken -slug: Learn/Getting_started_with_the_web -translation_of: Learn/Getting_started_with_the_web -original_slug: Öğren/Getting_started_with_the_web ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p><br> - Web'i kullanmaya başlarken, size web geliştirmenin pratiklerini anlatan kısa bir seridir. Basit bir web sayfası oluşturmak ve kendi kodunuzu yayınlamak için ihtiyaç duyacağınız araçları kurmalısınız.</p> -</div> - -<h2 id="İlk_web_sitenizin_hikayesi">İlk web sitenizin hikayesi</h2> - -<p>Profesyonel bir web sitesi oluşturmak için çok fazla iş yapmak gerekir, bu yüzden web geliştirme konusunda yeniyseniz, küçük çapta başlamanızı öneririz. Hemen başka bir Facebook kurmayacaksınız, ancak kendi basit web sitenizi çevrimiçi yapmak zor değil, o yüzden buradan başlayacağız.</p> - -<p>Aşağıda sıralanan makalelerde sırayla çalışarak, ilk web sayfanızı çevrimiçi hale getireceksiniz. Hadi başlayalım!</p> - -<h3 id="Temel_yazılım_kurma"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılım kurma</a></h3> - -<p>Bir web sitesi oluşturmak için araçlar söz konusu olduğunda, seçilecek çok şey var. Yeni başlıyorsanız, bir çok kod editörleri, çerçeveler (framework) ve test araçlarıyla karşılaşınca şaşırabilirsiniz. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılımı yükleme</a> bölümünde, temel web geliştirmesine başlamak için ihtiyaç duyduğunuz yazılımı nasıl yükleyeceğinizi adım adım göstereceğiz.</p> - -<h3 id="Websiteniz_nasıl_görünecek"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Websiteniz nasıl görünecek?</a></h3> - -<p>Web siteniz için kod yazmaya başlamadan önce, önce onu planlamanız gerekir. Hangi bilgileri sergiliyorsunuz? Hangi yazı tiplerini ve renkleri kullanıyorsunuz? <a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Web siteniz neye benzeyecek?</a> Sitenizin içeriğini ve tasarımını planlamak için izleyebileceğiniz basit bir yöntem sunuyoruz.</p> - -<h3 id="Dosyaların_Yönetimi"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların Yönetimi</a></h3> - -<p>Bir web sitesi birçok dosyadan oluşur: metinsel içerikler, kodlar, stiller, medya içerikleri vb. Bir web sitesi oluştururken, bu dosyaları mantıklı bir yapıda birleştirmeniz ve birbirleriyle haberleşebildiklerinden emin olmanız gerekir. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların yönetimi</a>, size web siteniz için mantıklı dosya yapısının nasıl kurulacağını ve hangi problemlerden haberdar olmanız gerektiğini açıklar.</p> - -<h3 id="HTML_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></h3> - -<p>Hiperyazı İşaretleme Dili (HTML) web içeriğinizi yapılandırmak ve anlam ve amaç vermek için kullandığınız koddur. Örneğin, içeriğim bir paragraflar dizisi mi yoksa madde imi listesi mi? Sayfama resim eklenmiş mi? Veri tablom var mı? Sizi bunaltmadan, <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a> size HTML ile tanışmanız için yeterli bilgiyi sağlayacaktır.</p> - -<h3 id="CSS_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></h3> - -<p>Cascading Stylesheets (CSS), web sitenizi şekillendirmek için kullandığınız koddur. Örneğin, metninizin siyah mı kırmızı mı olmasını istersiniz? İçeriğiniz ekranın neresinde görünmesini istersiniz? Web sitenizi süslemek için hangi arka plan resimleri ve renkleri kullanılmalıdır? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a> sizi başlamanız gereken yere götürür.</p> - -<h3 id="JavaScript_temelleri"><a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></h3> - -<p>JavaScript web sitenize interaktif içerikler eklemek için kullandığınız programlama dilidir, örneğin oyunlar, butonlara basıldığında veya veriler formlara girildiğinde gerçekleşen şeyler, dinamik stil efektleri, animasyon, ve daha fazlası. <a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a> size bu ilginç dil ile neler yapabileceğiniz ve nasıl başlayacağınız konusunda bir fikir verir.</p> - -<h3 id="Websiteni_yayınla"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Websiteni yayınla</a></h3> - -<p>Kodu yazmayı ve web sitenizi yaratan dosyaları düzenlemeyi bitirdikten sonra, hepsini insanların bulabilmesi için internete yüklemeniz gerekmektedir. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Örnek kodu yayınla</a>, size minimum çaba ile basit örnek kodunuzun nasıl internette yayınlanacağını açıklar.</p> - -<h3 id="Web_nasıl_çalışır"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a></h3> - -<p>Favori web sitenize bağlandığınızda, arka planda bilmediğiniz birçok karmaşık şey olur. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a>, bilgisayarınızda bir web sayfasını görüntülediğinizde neler olacağını gösterir.</p> diff --git a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index b6bd4c9150..0000000000 --- a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Installing basic software -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Aletler - - Başlangıç - - Yüklemeler - - Öğrenme -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Öğren/Getting_started_with_the_web/Installing_basic_software ---- -<div><font><font>{{LearnSidebar}}</font></font></div> - -<div><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></div> - -<div class="summary"> -<p><em>Temel yazılımı yükleme</em> konusunda, sizlere basit web geliştirme yapmak için gereken araçları ve bunları nasıl düzgün bir şekilde kuracağınızı gösteriyoruz.</p> -</div> - -<h2 id="Bir_profesyonelin_sahip_olması_gereken_araçlar_nelerdir">Bir profesyonelin sahip olması gereken araçlar nelerdir ?</h2> - -<ul> - <li><strong>Bir Bilgisayar</strong>. Belki, bir kısmınıza şaşırtıcı gelebilir, fakat bazılarınız bu sayfayı mobil telefonundan veya kütüphanedeki bir bilgisayardan okuyor. Ciddi bir web geliştiricisi olmak için iyi bir masa üstü veya diz üstü bilgisayara ihtiyacınız olacak. (Windows, Mac, or Linux).</li> - <li>Kodu yazmak için<strong>, text editörünüz olmalı </strong>(ör. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> veya <a href="https://code.visualstudio.com/">Visual Studio Code</a>), veya karma bir editör (ör.<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). <u>Ofis belgeleri bu iş için uygun değildir.</u></li> - <li><strong>Kodunuzu test etmek için iyi bir Web tarayıcısı,</strong> En çok kullanılan tarayıcılar : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> ve <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Ayrıca tavsiyemiz, sitenizin mobil cihazlarda ve eski tarayıcılarda nasıl performans gösterdiğini test etmeniz. Eski sürümler halen ciddi bir yoğunlukta (IE 6–8.) gibi.</li> - <li><strong>Grafik Editörü</strong>, web sitenize görüntüler yapmak için, mesala <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, veya <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>.</li> - <li><strong>Sürüm kontrol sistemi</strong>, sunuculardaki dosyaları yönetmek, ekiple bir projede işbirliği yapmak, kodunuzu ve gerekli dosyalarınızı paylaşmak, ve düzenlemedeki çakışmalardan kaçınmak içindir. Şuan <a href="http://git-scm.com/">Git</a> popüler bir sürüm kontrol sistemidir, ve Git'e merkezli <a href="https://github.com/">GitHub</a> kod barındırma hizmeti de çok popüler.</li> - <li><strong>FTP programı</strong>, web üzerinde barındılan dosyaların serverlardan yönetilmesinde kullanıldı. (<a href="http://git-scm.com/">Git</a> bu amaçla giderek FTP yerini değiştiriyor). <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, ve <a href="https://filezilla-project.org/">FileZilla</a> dahil olmak üzere bir çok (S) FTP programı bulunmaktadır.</li> - <li><strong>Otomasyon Sistemi</strong> <a href="http://gruntjs.com/">Grunt</a> veya <a href="http://gulpjs.com/">Gulp</a> tekrarlanan görevleri otomatikleştirir, mesela kodu küçültme ve testleri çalıştırıyor.</li> - <li>Ortak işlevselliği hızlandırmak için şablonlar, kütüphaneler, çerçeveler, vb.</li> - <li>Üstelik daha fazla araç!</li> -</ul> - -<h2 id="Şu_anda_hangi_araçlara_ihtiyacım_var"><font><font>Şu anda hangi araçlara ihtiyacım var?</font></font></h2> - -<p><font><font>Bu korkutucu bir listeye benziyor, ama neyse ki bunların çoğuyla ilgili hiçbir şey bilmeden web geliştirmeye başlayabilirsiniz. </font><font>Bu yazıda, size yalnızca minimum düzeyde bir kurulum yapacağız - bir metin editörü ve bazı modern web tarayıcıları.</font></font></p> - -<h3 id="Metin_editörü_yükleme"><font><font>Metin editörü yükleme</font></font></h3> - -<p><font><font>Muhtemelen bilgisayarınızda zaten temel bir metin editörünüz vardır. </font><font>Varsayılan olarak, Windows </font></font><a href="https://en.wikipedia.org/wiki/Microsoft_Notepad"><font><font>Not Defteri'ni</font></font></a><font><font> içerir </font><font>ve macOS </font></font><a href="https://en.wikipedia.org/wiki/TextEdit"><font><font>TextEdit</font></font></a><font><font> ile birlikte gelir </font><font>. </font><font>Linux dağıtımları değişir; </font><font>Ubuntu </font><font>varsayılan </font><font>olarak </font></font><a href="https://en.wikipedia.org/wiki/Gedit"><font><font>gedit</font></font></a><font><font> ile birlikte gelir </font><font>.</font></font></p> - -<p><font><font>Web geliştirme için, muhtemelen Not Defteri'nden veya TextEdit'ten daha iyisini yapabilirsiniz. </font><font>Canlı önizlemeler ve kod ipuçları sunan ücretsiz bir editör olan </font></font><a href="http://brackets.io"><font><font>Brackets</font></font></a><font><font> ile başlamanızı öneririz </font><font>.</font></font></p> - -<h3 id="Modern_web_tarayıcılarını_yükleme"><font><font>Modern web tarayıcılarını yükleme</font></font></h3> - -<p><font><font>Şimdilik, kodumuzu test etmek için birkaç masaüstü web tarayıcısı kuracağız. İşletim sisteminizi aşağıdan seçin ve favori tarayıcılarınızın kurulumcularını indirmek için ilgili bağlantıları tıklayın:</font></font></p> - -<ul> - <li><font><font>Linux: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> .</font></font></li> - <li><font><font>Windows: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"><font><font>Internet Explorer</font></font></a><font><font> , </font></font><a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc"><font><font>Microsoft Edge</font></font></font></a><font><font> (Windows 10, varsayılan olarak Edge ile birlikte gelir; Windows 7 veya daha üst sürümlere sahipseniz, Internet Explorer 11'i yükleyebilirsiniz; aksi halde alternatif bir tarayıcı yüklemelisiniz)</font></font></li> - <li><font><font>Mac: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> (Safari, varsayılan olarak iOS ve macOS ile birlikte gelir)</font></font></li> -</ul> - -<p><font><font>Devam etmeden önce, bu tarayıcılardan en az ikisini kurmalı ve test için hazır bulundurmalısınız.</font></font></p> - -<h3 id="Yerel_bir_web_sunucusu_kurmak"><font><font>Yerel bir web sunucusu kurmak</font></font></h3> - -<p><font><font>Bazı örneklerin başarılı bir şekilde çalışması için bir web sunucusu üzerinden çalıştırılması gerekir. </font><font>Bunun </font></font><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server"><font><font>nasıl yapılacağını öğrenerek yerel bir test sunucusu nasıl kurulur?</font></font></a></p> - -<p><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></p> diff --git a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 0bfe47464d..0000000000 --- a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: JavaScript'in Temelleri -slug: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Öğren/Getting_started_with_the_web/JavaScript_basics ---- -<div>{{LearnSidebar}}</div> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> - -<div class="summary"> -<p>Javascript web sitelerine etkileşimler ekleyebilen bir programlama dilidir. Javascript ile web sitenize oyunlar, düğmeye basıldığında, forma odaklanıldığında kullanıcıyla geçilecek etkileşimi ekleyebilirsiniz. bu makale size Javascript ile başlangıç için bir fikir verecek ve bu dil ile neler yapılabileceği hakkında yardımcı olacaktır.</p> -</div> - -<h2 id="JavaScript_nedir">JavaScript nedir?</h2> - -<p>{{Glossary("JavaScript")}} (Kısaca "JS" ) Tam teşekküllü {{Glossary("Dynamic programming language", "dinamik programlama dili")}}dir. Bir {{Glossary("HTML")}} dökümanına uygulandığında, kullanıcı ile dinamik etkileşimler yaratır. Javascript Brendan Eich tarafından yaratılmıştır, aynı zamanda Brendan Mozilla projesinin, Mozilla vakfının ve Mozilla şirketinin kurucu ortağıdır.</p> - -<p>Javascript ile aslında aklınıza gelen her şeyi yapabilirsiniz. Karosel (kayar resim menüleri) gibi küçük şeylerden başlayıp, fotoğraf galerileri, harika arayüzler ve düğmeye tıklamaya verilecek cevaba kadar her şeyi yapacaksınız. Hatta, dil üzerinde tecrübe kazandığınızda 2B ve 3B oyunlar ve veritabanı kullanan uygulamalar yapabileceksiniz.</p> - -<p>Javascript küçük bir dil olmasına rağmen çok esnektir ve geliştiriciler, Javascript çekirdeği üzerine çok fazla araç geliştirmiştir. Bu araçlar kullanılarak pek çok sorunu çok az efor harcayarak çözebilirsiniz. Örneğin:</p> - -<ul> - <li>({{Glossary("API","APIs")}}) web tarayıcılar için geliştirilmiş, çok çeşitli HTML oluşturma ve CSS güncelleme araçları, kullanıcıların web kemaralarında yayın alıp bunları okumak, 3 boyutlu grafikler ve ses örnekleri yaratmak üzere hazırlanmış Application Programming Interfaces (uygulama geliştirme arayüzleri) vardır.</li> - <li>Geliştiricilerin, siteleri ile Twitter ve Facebook arası ortak fonksiyonlar kullanmasını kullanmak üzere 3. parti API'ler.</li> - <li>HTML'ye uygulayabileceğiniz, çok hızlı bir şekilde web siteleri inşa etmenize yarayacak 3. parti kütüphaneler.</li> -</ul> - -<h2 id="Bir_Merhaba_dünya!_örneği">Bir <em>Merhaba dünya!</em> örneği</h2> - -<p>Başlık sizi çok heycanlandırmış olmalı, heycanlandırmalı da — JavaScript, en heyecan verici web teknolojilerinden biri ve siz JavaScript üzerinde uzmanlaştıkça, websiteleriniz yeni bir boyut ve güç kazanacaktır.</p> - -<p>Ancak, JavaScript HTML ve CSS'ye göre biraz daha zor bir teknolojidir. Öncelikle ufak uygulama ve örneklerle başlamalı daha sonra küçük adımlarla ilerlemelisiniz. Şimdi size çok basit bir Javascript kodunu sayfanıza nasıl dahil edeceğiniz, nasıl bir "merhaba dünya" örneğini nasıl yapacağınızı göstereceğiz.(<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">Programlamada standart, basit bir önek</a>)</p> - -<div class="warning"> -<p><strong>Önemli</strong>: Eğer bu dersi bizimle takip etmeyecekseniz, örnek kodu bir başlangıç olarak <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">bilgisayarınıza indirin</a>.</p> -</div> - -<ol> - <li>Önce test sitenizin olduğu klasöre gidip,<code> scripts</code> isimli bir klasör açın ve içine <code>main.js</code> adında bir dosya yaratın.</li> - <li>Sonra, index.html dosyasının içine gidin ve </body> etiket bitiminden bir önceki satıra bu kodu ekleyin: - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> - </li> - <li>Bu kod CSS'de {{htmlelement("link")}} elementi ne işe yarıyorsa aynısını yapıyor. Javascripti sayfaya dahil eder ve bu sayede Javascript kodunuz sayfa üzerinde bir etkiye sahip olur.</li> - <li>Şimdi bu kodu <code>main.js</code> dosyanıza ekleyin. - <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); -myHeading.textContent = 'Hello world!';</pre> - </li> - <li>Şimdi HTML ve Javascript dosyalarınızın kaydedildiğinden emin olun ve index.html dosyanızı tarayıcıya yükleyin. Aşağıdakine benzer bir şey görmelisiniz.<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: {{htmlelement("script")}} Elementini neredeyse dosyanın en sonuna koymamızın nedeni, HTML'nin tarayıcı tarafından dosyada göründüğü sırayla yüklenmesidir.JavaScript önce yüklenir ve altındaki HTML'yi etkilemesi beklenirse, JavaScript çalışması beklenen HTML'den önce yükleneceğinden, bu işe yaramayabilir. Bu nedenle, JavaScript'i HTML sayfasının altına koymak genellikle en iyi stratejidir.</p> -</div> - -<h3 id="Ne_oldu">Ne oldu?</h3> - -<p>Evet, başlık metniniz "<em>Hello world!</em>" olarak değiştirildi ve bunu Javascript yaptı! Bunu {{domxref("Document.querySelector", "querySelector()")}} fonksiyonunu çağırarak yaptık, bu fonksiyon bize o elemente ait bir referans getirdi ve biz bunu <code>myHeading</code> isimli bir değişkene kaydettik. Aslında bu CSS'de seçicilerle yaptığımız işlemin aynısı. Bir element üzerinde değişiklik yapmak istiyorsanız, önce o elementi seçmelisiniz.</p> - -<p>Sonra, myHeading değişkeninin {{domxref("Node.textContent", "textContent")}} özelliğini, (başlığın içeriğini taşıyan özellik) "<em>Hello world!</em>" olarak değiştirdik.</p> - -<h2 id="Hızlandırılmış_Dil_Temelleri_Kursu">Hızlandırılmış Dil Temelleri Kursu</h2> - -<p>Javascript'İ daha iyi anlamanız içim şimdi size dilin temel özelliklerini göstereceğiz. Ne güzel ki, bu özellikler pek çok programlama dilinin ortak özellikleridir. Bu temel kavramları anlayabilirseniz, istediğiniz şeyleri gerçekleştirebilmek adına programlamaya başlamış olacaksınız.</p> - -<div class="warning"> -<p><strong>Önemli</strong>: Bu makaledeki örnek kodları Javascript komut sistemine yazıp ne olacağını görmelisiniz. Javascript Console hakkında <a href="/en-US/Learn/Discover_browser_developer_tools">daha fazla bilgi alın</a>.</p> -</div> - -<h3 id="Değişkenler">Değişkenler</h3> - -<p>{{Glossary("Variable", "Variables")}} Değişkenler, değeleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlamaya <code>var</code> anahtar kelimesi kullanarak başlarsınız, ardından da değişkene vermek istediğiniz ismi yazarsınız.</p> - -<pre class="brush: js notranslate">var myVariable;</pre> - -<div class="note"> -<p><strong>Not</strong>: Javascript'teki bütün ifadeler noktalı virgül ile bitmelidir. Eğer noktalı virgül koymaysanız, beklenmeyen sonuçlarla karşılaşabilirsiniz.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Seçilmiş anahtar kelimeler dışında değişkenlerinize istediğiniz ismi verebilirsiniz. (lütfen d<a href="http://www.codelifter.com/main/tips/tip_020.shtml">eğişken isimlendirme kuralları makalesini okuyun</a>)</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Javascript büyük-küçük karakterler konusunda hassas bir dildir. Bu nedenle degisken ve Degisken aynı şey değildir. Eğer problemler yaşıyorsanız, büyük küçük harf problemlerinizi kontrol edin.</p> -</div> - -<p>Bir değişkeni tanımladıktan sonra ona bir değer verebilirsiniz.</p> - -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> - -<p>Bunları dilerseniz aynı satırda yapabilirsiniz.</p> - -<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> - -<p>Bu değişkenin değlerini sadece ismini yazarak çağırabilirsiniz.</p> - -<pre class="brush: js notranslate">myVariable;</pre> - -<p>Bir değişkene bir değer verdikten sonra bu değeri değiştirebilirsiniz.</p> - -<pre class="notranslate">var myVariable = 'Bob'; -myVariable = 'Steve';</pre> - -<p>Bütün verilerin farklı <a href="/en-US/docs/Web/JavaScript/Data_structures">veri tipleri</a> olduğunu unutmayın.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Değişken</th> - <th scope="col">Açıklama</th> - <th scope="col">Örnek</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td>Metin, bir değişkeni metin olarak tanımlamak için değeri tırnak içerisine alın.</td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Number")}}</th> - <td>Sayılar tırnak içerisinde olmaya ihtiyaç duymazlar.</td> - <td><code>var myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td>Doğru/Yanlış değeri. True ve false Javascript'in anahtar kelimeleridir ve tırnağa ihtiyaç duymazlar.</td> - <td><code>var myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td>Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapı.</td> - <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> - Dizinin her üyesine şu şekilde bakın:<br> - <code>myVariable[0]</code>, <code>myVariable[1]</code>, vs.</td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td>Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu aklınızdan çıkarmayın.</td> - <td><code>var myVariable = document.querySelector('h1');</code><br> - Yukarıdaki örneklerin hepside.</td> - </tr> - </tbody> -</table> - -<p>Peki neden değişkenlere ihtiyaç duyuyoruz? Programlamada her şeyi yapmak için değişkenlere ihtiyaç duyarız. Eğer değerleri değiştiremezsek, dinamik bir sonuç elde edemeyiz. Örneğin kişisel bir selamlama yazısı üretemeyiz ya da gösterilmekte olan fotoğrafı değiştiremeyiz.</p> - -<h3 id="Yorumlar">Yorumlar</h3> - -<p>CSS'de olduğu gibi Javascript kodunuza da yorumlar koyabilirsiniz.</p> - -<pre class="brush: js notranslate">/* -Aralarındaki her şey birer yorumdur. -*/</pre> - -<p>Eğer çok satırlı yorum yazmaya ihtiyaç yoksa, iki bölü işareti ile yorum koyabilirsiniz.</p> - -<pre class="brush: js notranslate">// Bu bir yorumdur. -</pre> - -<h3 id="Operatörler.">Operatörler.</h3> - -<p>{{Glossary("operator")}} İki değer arası işlemden bir sonuç üreten matematiksel bir semboldür. Aşağıdaki tabloda bazı basit operatörleri görebilirsiniz. Bunları Javascript Console'unda deneyin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Operatör</th> - <th scope="col">Açıklama</th> - <th scope="col">Sembol</th> - <th scope="col">Örnek</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Toplama / Birleştir</th> - <td>İki sayıyı toplamak ve iki String'i birleştirmek için kullanılır.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hello " + "world!";</code></td> - </tr> - <tr> - <th scope="row">Çıkarma, Çarpma, Bölme</th> - <td>Bunlar, Temel Matematikteki işlemlerin aynısını yapar.</td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td><code>9 - 3;<br> - 8 * 2; // multiply in JS is an asterisk<br> - 9 / 3;</code></td> - </tr> - <tr> - <th scope="row">Atama Operatörü</th> - <td>Bunu daha önce gördünüz, bir değeri diğerine atar</td> - <td><code>=</code></td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">Eşitlik Operatörü</th> - <td>İki değerin birbirne eşit olup olmadığını test eder ve <code>true</code>/<code>false</code> döndürür</td> - <td><code>===</code></td> - <td><code>var myVariable = 3;<br> - myVariable === 4;</code></td> - </tr> - <tr> - <th scope="row">Olumsuzluk / Eşitizlik</th> - <td>Değerin tam tersini döndürür, true'yu false çevirir vb. Eşitsizlik operatörü de, iki değerin eşit olmamasını test eder.</td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>Temel ifade <code>true</code>'dur, ama karşılaştırma <code>false</code> döndürür. çünkü onu reddettik:</p> - - <p><code>var myVariable = 3;<br> - !(myVariable === 3);</code></p> - - <p>Burada test ediyoruz "<code>myVariable</code> 3'e eşit değil". Bu<code> false</code> döndürür çünkü<code>myVariable</code> 3'e eşittir.</p> - - <p><code><code>var myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p>Bunların dışında da operatörler vardır. <a href="/en-US/docs/Web/JavaScript/Reference/Operators">İfadeler ve operatörler makalesinden</a>, bütün operatörler listesini inceleyebilirsiniz.</p> - -<div class="note"> -<p><strong>Not</strong>: Veri türlerini karıştırmak, hesaplamalar yaparken bazı garip sonuçlar doğurabilir, bu nedenle değişkenlerinizi doğru bir şekilde belirttiğinizden ve beklediğiniz sonuçları elde ettiğinizden emin olun. Örneğin, konsolunuza "35" + "25" girin. Neden beklediğiniz sonuca ulaşmıyorsunuz? Tırnak işaretleri sayıları dizelere dönüştürdüğünden, sayı eklemeden dizeleri bitiştirdiğinizden emin olun. 35 + 25 girerseniz, doğru sonucu elde edersiniz.</p> -</div> - -<h3 id="Koşul_İfadeleri">Koşul İfadeleri</h3> - -<p>Koşul ifadeleri, bir ifadenin değerinin <code>true </code>veya <code>false</code> olup olmadığını kontrol eder. Buna bağlı olarak farklı kodlar çalıştırılabilir. En temel ve en çok kullanılan tip <code>if... else </code>yapısıdır. Örneğin:</p> - -<pre class="brush: js notranslate">var iceCream = 'chocolate'; -if (iceCream === 'chocolate') { - alert('Yay, I love chocolate ice cream!'); -} else { - alert('Awwww, but chocolate is my favorite...'); -}</pre> - -<p>i<code>f(...) </code>ifadesinin içindeki ifade, (eşitlik operatörü ile test edilir) <code>iceCream</code> değişkenini '<code>chocolate' </code>değeri ile karşılaştırır ve <code>true</code> olduğunu bulur. Eğer sonuç doğruysa, ilk bloktaki kod çalıştırılır eğer ifade yanlışsa ilk blok atlanır ve <code>else</code> bloğu içerisindeki kod çalıştırılır.</p> - -<h3 id="Fonksiyonlar">Fonksiyonlar</h3> - -<p>{{Glossary("Function", "Functions")}} Daha sonra kullanmak istediğiniz bir dizi işlemi paketlemeye yarar. Yani ne zaman aynı işlemi yaptırmak isterseniz bu fonksiyonu çağırabilirsiniz. Bu sizin aynı kodları tekrar yazmanızın önüne geçecektir. Örneğin önceden tanımlanmış iki fonksiyon:</p> - -<ol> - <li> - <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js notranslate">alert('hello!');</pre> - </li> -</ol> - -<p>Bu fonksiyonlar, tarayıcıların içerisinde tanımlanmıştır ve istediğiniz zaman kullanabilirsiniz.</p> - -<p>Eğer bir ifade görürseniz ve sonrasında parantezler -()- varsa bu büyük ihtimalle bir fonksiyondur. Fonksiyonlar bazen argümanlar alır. {{Glossary("Argument", "arguments")}} Argümanlar, fonksiyonların işlerliğini yerine getirmek için gereksinim duyduğu verilerdir. Eğer birden çok veriye ihtiyaç duyuluyorsa argümanlar virgül ile ayrılır.</p> - -<p>Örneğin, <code>alert()</code> fonksiyonu, tarayıcı penceresi içerisinde bir pop-up kutusu gösterir. Ancak biz bu fonksiyona göstermesi için bir String vermeliyiz.</p> - -<p>İyi haber, siz de kendi fonksiyonlarınızı tanımlayabilirsiniz. Sıradaki örnekte kendi fonksyionunuzu yazacaksınız, bu fonksiyon aldığı iki argümanı çarparak değelerini döndürür.</p> - -<pre class="brush: js notranslate">function multiply(num1,num2) { - var result = num1 * num2; - return result; -}</pre> - -<p>Üstteki fonksiyonu konsolda tanımlayıp kullanmayı deneyin:</p> - -<pre class="brush: js notranslate">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> - -<div class="note"> -<p><strong>Not</strong>: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> ifadesi, tarayıcıya, result değişkenini geri döndürmesi gerektiğini gösterir. Bu sayede işlem sonucu fonksiyon dışında kullanılabilir. Bu değişkenlerin tanımlandığı fonksiyonun dışında tanımsız olmasından kaynaklanır. Bu değişken{{Glossary("Scope", "scoping")}} olarak tanımlanır. Değişken tanım aralığı hakkında <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">daha fazla bilgi edinin</a>.</p> -</div> - -<h3 id="Olaylar">Olaylar</h3> - -<p>Websiteniz ile etkileşimler yaratmak için olaylara ihtiyaç duyarsınız. Bu kod yapıları, tarayıcıda gerçekleşen olayları dinler ve tanımlanan kodları gerektiğinde çağırır. En çok kullanılan örneği <a href="/tr/docs/Web/Events/click">tıklama olayı</a>dır, bu olay, fare bir şeye tıkladığında tetiklenir. Örneğin sayfadaki herhangi bir yere tıklandığında ne olacağını aşağıdaki örnek ile düzenleyebilirsiniz.</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { - alert('Ouch! Stop poking me!'); -}</pre> - -<p>Bir olayı bir elemente tanımlamanın pek çok değişik yolu vardır. Örneğin yukarı da önce {{htmlelement("html")}} elementi seçtik, ve <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> olayını anonim (i.e. nameless) bir fonksiyona atadık. Bu anonim fonksiyon tıklandığında ne olacağını gösteriyor.</p> - -<p>Bu örnek</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> - -<p>Bunun aynısı.</p> - -<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p>Sadece daha kısası.</p> - -<h2 id="Web_sitemizi_harikalaştırmak">Web sitemizi harikalaştırmak</h2> - -<p>Şimdiye kadar Javascript temellerini anlattık. Şimdi örnek websitemize bazı havalı özellkler ekleyelim.</p> - -<h3 id="Fotoğraf_değiştirici_eklemek">Fotoğraf değiştirici eklemek</h3> - -<p>Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.</p> - -<ol> - <li>Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.</li> - <li>Bu fotoğrafı <code>images</code> klasörüne ekleyin.</li> - <li>Bu resmi 'firefox2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.</li> - <li> <code>main.js</code> dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.) - <pre class="brush: js notranslate">var myImage = document.querySelector('img'); - -myImage.onclick = function() { - var mySrc = myImage.getAttribute('src'); - if(mySrc === 'images/firefox-icon.png') { - myImage.setAttribute ('src','images/firefox2.png'); - } else { - myImage.setAttribute ('src','images/firefox-icon.png'); - } -}</pre> - </li> - <li>Bütün dosyaları kaydedin ve tarayıcınızda <code>index.html</code> dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.</li> -</ol> - -<p>Buraya kadar, img elementimizin src özelliğini <code>myImage</code> değişkeninde saklıyoruz. Sonra değişkenin <code>onclick</code> olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:</p> - -<ol> - <li>Fotoğrafın <code>src</code> özelliğini getiriyoruz.</li> - <li>İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması. - <ol> - <li>Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede {{htmlelement("image")}} elementinin gösterdiği görsel değişiyor.</li> - <li>Değilse (yani değiştirdiysek), <code>src</code> değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.</li> - </ol> - </li> -</ol> - -<h3 id="Kişiselleştirilmiş_Merhaba_Mesajı_Eklemek">Kişiselleştirilmiş Merhaba Mesajı Eklemek</h3> - -<p>Sırada biraz daha kod eklemek var. Kullanıcı siteye ilk girdiğinde sitenin başlığını kişiselleştirilmiş merhaba mesajı ile değiştireceğiz. Bu hoş geldiniz mesajı, kullanıcının siteden ayrılması ve daha sonra geri dönmesi durumunda devam eder - Web Depolama API'sini kullanarak kaydedeceğiz. Ayrıca, kullanıcıyı ve dolayısıyla hoş geldiniz mesajını gerektiğinde değiştirmek için bir seçenek de oluşturacağız.</p> - -<ol> - <li>index.html dosyasında, {{htmlelement("script")}} elementini aşağıdaki satırdan önce ekleyin. - <pre class="brush: html notranslate"><button>Change user</button></pre> - </li> - <li>main.js dosyasına, yazılan kodu olduğu gibi dosyanın en altına ekleyin. Bu kod satırları yeni buton ve başlığı referans alarak değişkenlerin içinde depolar. - <pre class="brush: js notranslate">var myButton = document.querySelector('button'); -var myHeading = document.querySelector('h1');</pre> - </li> - <li>Kişiselleştirilmiş merhaba'yı eklemek için sıradaki fonksiyonu oluşturun - bu şu anlık hiçbir şey yapmayacak fakat biraz sonra bunu düzelteceğiz. - <pre class="brush: js notranslate">function setUserName() { - var myName = prompt('Please enter your name.'); - localStorage.setItem('name', myName); - myHeading.textContent = 'Mozilla is cool, ' + myName; -}</pre> - - <p>Bu fonksiyon <code>alert()</code> gibi ekrana bir diyalog kutusu getiren bir <code>prompt() </code>fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı<strong> Tamam</strong> dediği anda bu bilgiyi bir değişken'de saklar. Bu arada biz kullanıcıdan kendi ismini girmesini istiyoruz. Daha sonra tarayıcı'da bilgi saklamamızı ve daha sonra geri almamızı sağlayan localStorage API'ını çağırıyoruz. Kullanıcıdan aldığımız <code>'name' </code>verisini oluşturmak ve saklamak için localStorage'in <code>setItem() </code>fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın <code>textContent</code> değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.</p> - </li> - <li>Next, add this <code>if ... else</code> block — we could call this the initialization code, as it sets up the app when it first loads: - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { - setUserName(); -} else { - var storedName = localStorage.getItem('name'); - myHeading.textContent = 'Mozilla is cool, ' + storedName; -}</pre> - This block first uses the negation operator (logical NOT) to check whether the <code>name</code> data item exists. If not, the <code>setUserName()</code> function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using <code>getItem()</code> and set the <code>textContent</code> of the heading to a string, plus the user's name, the same as we did inside <code>setUserName()</code>.</li> - <li>Finally, put the below <code>onclick</code> event handler on the button, so that when clicked the <code>setUserName()</code> function is run. This allows the user to set a new name whenever they want by pressing the button: - <pre class="brush: js notranslate">myButton.onclick = function() { - setUserName(); -} -</pre> - </li> -</ol> - -<p>Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!</p> - -<h2 id="Sonuç">Sonuç</h2> - -<p>Eğer yukarıda belirtilen talimatların tamamını uyguladıysanız, aşağıda bulunan görseldeki gibi bir sonuç elde etmiş olmalısınız: (dilerseniz bizim versiyonumuzu da <a href="https://mdn.github.io/beginner-html-site-scripted/">buradan</a> inceleyebilirsiniz)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> - -<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">finished example code on Github</a>.</p> - -<p>Here, we have only really scratched the surface of JavaScript. If you have enjoyed learning about it and want to go deeper with your studies, go to our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> - -<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 7b7400f21f..0000000000 --- a/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Web siteniz nasıl görünecek -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Web siten nasıl görünecek? Bu konu sitenizi kodlamaya başlamadan önce ''Web sitem hangi bilgileri sunacak?'',''Hangi renkleri ve yazı tiplerini kullanacağım?'' ve ''Web sitem ne yapacak?'' gibi konuları ele alarak web sitesi planlamasını ve tasarımını inceler.</em></p> -</div> - -<h2 id="Herşeyden_önce_Planlama">Herşeyden önce: Planlama</h2> - -<p>Her ne yapacaksanız önce bazı fikirlere ihtiyacınız var.Siten tam olarak ne yapmalı? Bir web sitesi temel olarak herşeyi yapabilir, fakat ilk denemenizde işlemi basit tutmalısınız . İlk olarak bir başlık, bir resim ve birkaç paragraf içeren basit bir web sitesi oluşturacağız.</p> - -<p>Başlangıç olarak bu sorulara cevap bulmalısınız: </p> - -<ol> - <li><strong>Web siten ne hakkında? </strong>Köpekleri, Newyork'u ya da Pacman'i severmisiniz?</li> - <li><strong>Temada ne tür bilgiler sunuyorsun? </strong>Bir başlık ve birkaç paragraf yaz. Sayfanda göstermek istediğin resimi düşün.</li> - <li>Basit ve ileri seviyede terimlerle <strong>Web siten nasıl görünecek?</strong> Arkaplan rengi ne olacak? Hangi yazı tipi uygun: resmi, çizgi film, kalın ya da ince? </li> -</ol> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Not:</strong></span> Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide or a brand book, and you can see an example at the <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> -</div> - -<h2 id="Tasarımınızın_taslağını_çıkarmak">Tasarımınızın taslağını çıkarmak</h2> - -<p>Bir kalem ve kağıt alın ve sitenizin nasıl görünmesini istiyorsanız kabaca çizin. İlk basit siteniz için çizecek çok şey yok, ama bunu yapma alışkanlığını şimdi edinmelisiniz. Bu gerçekten yardımcı oluyor. --Van Gogh olmanıza gerek yok!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> - -<div class="note"> -<p><strong>Note</strong>: Even on real, complex websites, the design teams usually start out with rough sketches on paper, and later on build digital mockups using a graphics editor or web technologies.</p> - -<p>Web teams often include both a graphic designer and a {{Glossary("UX", "user-experience")}} (UX) designer. Graphic designers, obviously, put together the visuals of the website. UX designers have a somewhat more abstract role addressing how users will experience and interact with the website.</p> -</div> - -<h2 id="İçeriği_seçmek">İçeriği seçmek</h2> - -<p>Bu noktada, sitenizde görünecek içeriği bir araya getirmeye başlamak iyidir.</p> - -<h3 id="Metin">Metin</h3> - -<p>You should still have your paragraphs and title from earlier. Keep these close by.</p> - -<h3 id="Theme_color">Theme color</h3> - -<p>To choose a color, go to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">the Color Picker</a> and find a color you like. When you click on a color, you'll see a strange six-character code like <code>#660066</code>. That's called a <em>hex(adecimal) code</em>, and represents your color. Copy the code down somewhere safe for now.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> - -<h3 id="Images">Images</h3> - -<p>To choose an image, go to <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> and search for something suitable.</p> - -<ol> - <li>When you find the image you want, click on the image.</li> - <li>Press the <em>View image</em> button.</li> - <li>On the next page, right-click the image (Ctrl + click on a Mac), choose <em>Save Image As...</em>, and choose a safe place to save your image. Alternatively, copy the image's Web address from your browser's address bar for later use.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> - -<div class="note"> -<p><strong>Note</strong>: Most images on the Web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on <strong>Search tools</strong>, then on 2) <strong>Usage rights</strong>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> -</div> - -<h3 id="Font">Font</h3> - -<p>To choose a font:</p> - -<ol> - <li>Go to <a href="http://www.google.com/fonts">Google Fonts</a> and scroll down the list until you find one you like. You can also use the controls on the right to further filter the results.</li> - <li>Click the "plus" (Add to) icon next to the font you want.</li> - <li>Click the "* Family Selected"<em> </em>button in the panel at the bottom of the page ("*" depends on how many fonts you selected).</li> - <li>In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> - - - -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> |