Bu dersimizde JavaScript'e kısa bir giriş yapacağız. JavaScript editörlerini ve JS dosyalarını sayfa içinde nasıl kullanabileceğimizi öğreneceğiz.
JavaScript'e Giriş
Bir web sayfası içerik, sunum ve etkileşim* olmak üzere üç temel unsurdan oluşur. İçerik kısmı HTML'i, sunum kısmı CSS'i ve etkileşim kısmı JavaScript'i temsil eder. Eğer sadece içerik ve sunum'dan oluşan bir projemiz varsa bu web sitesini statik (durağan) web sitesi olarak nitelendirebiliriz. Bu iki unsur ile birlikte etkileşim'i yani JavaScript'i de kullanırsak dinamik bir web sitesi oluşturmuş oluruz. Dinamik siteler interaktiftir ve ziyaretçiler web sayfasında verdikleri komutlar ile bazı etkinliklerde bulunabilirler. Örneğin; kullanıcı iletişim formunu doldurdu; fakat e-posta adresini yazmayı unuttu. Ardından "Gönder" düğmesine bastı. Düğmeye bastıktan sonra bir uyarı penceresi açıldı ve "e-posta adresinizi yazmayı unuttunuz!" şeklinde bir uyarı ile karşılaştı. İşte bu uyarı penceresinin oluşmasını sağlayan teknoloji JavaScript'tir.
JavaScript gücünü HTML5 ve CSS3'ten alır. Bu iki teknoloji ile birlikte kullanıldığı zaman amacına ulaşır. Daha önceleri HTML ve CSS ile uyum sorunları olmasına rağmen HTML'in 5inci ve CSS'in 3üncü sürümünden itibaren bu sorunlar en aza indirgenmiştir.
Bu derse kadar HTML5 ve CSS3 bilginizin en az orta seviye olduğunu varsayıyorum. Çünkü HTML5 ve CSS3'ü JavaScript ve jQuery öğrenirken bol bol kullanacağız.
JavaScript Editörleri
JavaScript kodlarken kullanabileceğimiz belli başlı editörler vardır. Bunlar içerisinde en çok kullanılan Notepad ++'tır.
Büyütmek için resme tıklayınız.
Notepad ++'ın menüsünden Plugins > Plugin Manager > Show Plugin Manager yolunu takip ederek Available sekmesinden JSLint, JSTool, JSON Viewer gibi JavaScript eklentilerini kurabilirsiniz.
İkinci olarak ReSharper eklentisinin de yapımcıları olan JetBrains'e ait WebStorm yazılımını kullanabilirsiniz.
Büyütmek için resme tıklayınız.
Yalnız bu yazılım bir aylık deneme sürümü ile birlikte gelmektedir. Key'e ihtiyacınız olursa bendenize iletişimden göz kırpmanız yeterli. ;)
Ve son olarak ReSharper 8 eklentisinden bahsedeyim.
Büyütmek için resme tıklayınız.
Visual Studio Ultimate 2013 için geliştirilmiştir. JavaScript intellisense'i ne âlemde pek bilgim yok; fakat HTML ve CSS desteği mükemmel. Kod yazarken büyük kolaylık sağlıyor.
Büyütmek için resme tıklayınız.
ReSharper'ın 8inci sürümünü kurduktan sonra Visual Studio 2013'ü çalıştırın ve menüden RESHARPER > Help > License Information... yolunu takip edin. Daha sonra açılan pencereden Single User'ı seçin ve User Name kısmına user yazın. License Key kısmına ise FSm1xcimacB9Nn4vAwi4JUzi5ouJPJmQ yazın ve deneme sürümünden kurtulmuş olun. Bir sorun olursa beni iletişimden çitletin. =)
Büyütmek için resme tıklayınız.
Ve son olarak Visual Studio 2013'ün menüsünden RESHARPER > Extensiton Manager... yolunu izleyin. Online sekmesinde arama kutusuna JavaScript yazın ve çıkan iki eklentiyi de kurun. Ne işe yarar henüz ben de bilmiyorum; fakat biri Notepad ++'da da kullanıldığına göre işimize yarayacak gibi duruyor.
Web Sitesinde JavaScript Kullanımı
İlk olarak bir önceki dersimizde oluşturduğumuz denemeSitemiz adlı projeyi çalıştıralım.
Büyütmek için resme tıklayınız.
Masaüstündeki denemeProjemiz klasöründen denemeProjemiz.sln adlı dosyayı çalıştırmanız yeterlidir.
Büyütmek için resme tıklayınız.
Açıldıktan sonra tüm sekmeleri kapatın ve sadece _Layout.cshtml açık kalsın.
Büyütmek için resme tıklayınız.
İlk olarak <head> etiketi içerinde <script> adlı yeni bir etiket tanımlıyoruz ve kodlarımızı bu etiketin içerine yazıyoruz.

        <!DOCTYPE HTML>
        <html>
                <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width" />
                <title>@ViewBag.Title</title>
        
                <script>
                    //JS kodlarımızı bu alana yazıyoruz.
                    /*
                    Çoklu satırlı yorumu ise
                    bu şekilde oluşturuyoruz.
                    */
                </script>
            </head>
            <body>
                <div>
                    @RenderBody()
                </div>
            </body>
        </html>
Eğer tek satır yorum yazmak istersek // karakterlerini kullanıyoruz. Çok satırlı yorumları ise /* ve */ karakterleri arasına yazıyoruz. İlk script ekleme yöntemi bu şekilde.
Büyütmek için resme tıklayınız.
İkinci olarak Scripts klasörünün üzerine gelin ve sağ tıklayın. Daha sonra sırasıyla Add ve JavaScript File'a tıklayın.
Büyütmek için resme tıklayınız.
Açılan pencereden yeni JavaScript dosyanıza bir ad verin. Ben örnek olması amacıyla myScript yazdım. Daha sonra OK'a tıklayın.
Büyütmek için resme tıklayınız.
myScript.js dosyanız bu şekilde Script klasörünün altına eklenmiş olmalı. .js JavaScript uzantısıdır.
Büyütmek için resme tıklayınız.
Şimdi _Layout.cshtml sayfasına geri dönün ve sürükle bırak yöntemi ile myScript.js dosyasını biraz önce oluşturduğumuz </script> etiketinin altına bırakın. Bu ikinci ekleme yöntemidir.
Büyütmek için resme tıklayınız.
Son ekleme yöntemi </body> etiketinden önce ekleme yapmaktadır. Bu da üçüncü ve son ekleme yöntemidir.

        <!DOCTYPE HTML>
        <html>
                <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width" />
                <title>@ViewBag.Title</title>
            </head>
                <body>
                <div>
                    @RenderBody()
                </div>
                <script>
                    //JS kodlarımızı bu alana yazıyoruz.
                    /*
                    Çoklu satırlı yorumu ise
                    bu şekilde oluşturuyoruz.
                    */
                </script>
                <script src="~/Areas/web_tasarim/Scripts/myScript.js"></script>
            </body>
        </html>
<script> etiketleri bu şekilde body'nin kapanış etiketinden önce yazılır.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde JavaScript'te değişkenler ve veri türleri konusuna değineceğiz.