JavaScript giriş

Bu sayfanın içinde

JavaScript nedir

Daha önce bahsettiğimiz gibi Javascript bir programlama dili ve çalıştırılabilmesi için bir Javascript derleyicisine ihtiyaç duyar.

Yazdığımız bir Javascript kodunu çalıştırabilmek için ya bir tarayıcıya ihtiyacımız var, "çünkü Javascript derleyicisi tarayıcı içinde zaten mevcut" ya da nodejs derleyicine ihtiyacımız var.

Şu aşamada nodejs kullanmayacağız dolayısıyla her yazdığımız javascript kodunu çalıştırabilmek için bir html sayfasına ihtiyaç duyacağız.

Editörümüzde bir index.html dosyası oluşturup aşağıdaki html iskeletini ekleyelim.

** Visual Studio code editöründe kolay bir şekilde html iskeleti oluşturmak için ünlem(!) işaretinden sonra 2 kere tab tuşuna tıklamanız gerekiyor.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>    
</body>
</html>

Daha sonra index.html dosyanız ile aynı dizinde (klasörde) script.js isimli bir başka dosya daha oluşturalım ve ardından index.html dosyamız ile script.js dosyamızı birbirine bağlayalım ki; index.html dosyasını tarayıcıda açtığımızda script.js dosyasına dolaylı olarak çalıştırılmış olsun.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modern Javascript Kursu</title>
</head>
<body>

<h1 id="header">
Modern Javascript Kursu: ES6/ES7+ (2019)
</h1>

<script  src="script.js" type="text/Javascript"></script>
</body>
</html>

* yukarıda html sayfamız içerisine bir h1 etiketi ekledik ve id="header" tanımlamasını yaptık. 

* script etikenin src özelliğine script.js dosyasını ekledik ve artık index.html dosyası ile script.js dosyası birbirine bağlanmış oldu.

Özetle html sayfasını tarayıcıda açtığımız anda script.js dosyasındaki kodlar da çalıştırılacak ve tarayıcı içinde bulunan Javascript derleyicisi javascript kodlarımız için bir hata denetimi yaptıktan sonra eğer hata yoksa kodları çalıştıracaktır.

Peki script.js dosyamız içerisine bir kaç basit javascript kodu ekleyelim.

console.log("Merhaba")
console.log(5+10)

burada console' a Merhaba ve 10+5 sonucunu yazdırıyoruz. Peki console nerede ? Yani program çıktılarını nerede görebilirim.

Chrome tarayıcısını açıp F12 ye bastığımızda geliştirici araçları paneli açılacaktır. Geliştirici araçları panelinin console segmesinde Merhaba ve 15 değerlerini görüyor olmalısınız.

Chrome geliştirici araçları

document.getElementById("header").innerHTML = "Hello JavaScript";

Burada ise html dökümanı içinde id değeri header olan etiketi bulup içerisine Hello Javascript kelimelerini ekliyoruz. Yani sayfa yüklendiği anda artık h1 etiketleri içindeki yazı güncellenecektir.

document.getElementById("header").style.fontSize = "35px";

Burada ise id' si header olan yani h1 etiketini seçer ve h1 etiketinin font büyüklüğünü 35px yapar.

Özetle Javascript kullanarak html dökümanı içerisindeki her hangi bir etikete ulaşıp içerisindeki içerikleri değiştirip farklı css kodları aktarabiliyoruz.


css nasıl yazılır

Css kodlarımızı 3 farklı şekilde tanımlayabiliriz. Bunlar;

  • Inline
  • Internal
  • External css, yöntemleridir.

Inline Css Nedir ve Nasıl Kullanılır ?

Sadece tanımlandığı etiket için geçerli olmasını istediğimiz css kodlarımızı inline olarak tanımlarız.

Örneğin ; <span style="color:red;"> text </span> 

Inline olarak tanımladığımız css kodları sadece css kodunun tanımlandığı <span> etiketi için uygulanır ve yazı rengi kırmızı olur.

Eğer ki sayfadaki tüm <span> etiketleri için bir css kodu yazmak istersek bu yöntemi kullanmamalıyız çünkü sayfadaki her bir <span> etiketi içine <span style="color:red;"> text </span> şeklinde bir tanımlama yapmak oldukça güç olur.

Örneğin; sayfadaki tüm <a> etiketleri için değil de sadece bir tek <a> etiketi için text-decoration:none; yani linkin altında oluşan çizgiyi silmek için gereken bir css kodunu yazmak istersek aşağıdaki gibi yazabiliriz. 

<a href="http://sadikturan.com" style="text-decotation:none;">
     ziyaret etmek için tıklayınız.
</a>

peki inline olarak birden fazla css kodunu nasıl eklerim ?

** araya ; ekleyerek birden fazla css tanımlamasını inline olarak yapabilirsiniz. 

<a href="http://sadikturan.com" style="text-decotation:none;color:red">
     ziyaret etmek için tıklayınız.
</a>

Internal Css Nedir ve Nasıl Kullanılır ?

Internal css <head> </head> etiketleri arasına <style type="text/css"> </style> etiketleri eklenerek kullanılır. 

<head>

<style type="text/css"> 
   
        h1{
           font-size :32px;
           color :blue;  
        }

</style>

</head>

Internal olarak tanımlanan css kodları sadece bulunduğu html sayfasını ilgilendirir. Yani index.html sayfamız içindeki tüm <h1> etiketleri için font büyüklüğü 32 px ve yazı rengi mavi olarak tanımlanır. Ancak about.html sayfamız için bu özellikler etkin olmaz. Eğer aynı özellikleri about.html sayfası içinde uygulansın istiyorsak aynı tanımlamaları about.html sayfasında da yapmamız gerekir. Dolayısıyla sadece bir .html sayfasına özgü olan özellikleri Internal olarak tanımlamak mantıklıdır.

External Css Nedir ve Nasıl Kullanılır ?

Eğer tanımladığımız css kodları birden fazla html sayfasını ilgilendiriyor ise bu durumda .css uzantılı bir dosya oluşturup bu dosya içerisine css kodlarımızı tanımlamamız gerekir.

Örneğin; index.html ve about.html sayfalarımız var ve bu iki sayfada da <h1> etiketi için ortak olan css kodları yazmak istiyoruz. Bu durumda external css kullanmalıyız yani yeni bir .css uzantılı bir dosya oluşturup bu dosya içine ortak olan css kodlarını eklemek en kolayı olacaktır. Çünkü oluşturduğumuz .css uzantılı dosyayı istediğimiz html sayfasına eklememiz oldukça kolaydır.

Yeni bir style.css dosyası oluşturalım ve dosya içeriğini aşağıdaki gibi güncelleyelim. 

h1 {
     font-size :32px;
     color :blue;  
 }
 p {
     color : red;
     font-size: 16px;
}

style.css dosyası içindeki css kodlarını uygulamak istediğimiz her html sayfasına style.css dosyasını tanıtmamız gerekiyor. Bu işlemi aşağıdaki gibi yapabiliriz.

Html ve style.css dosyamız aynı dizin yani aynı klasör içinde ise bu durumda css dosyamız ile html dosyamızı şu şekilde ilişkilendirebiliriz. 

<head>
...
<link rel="stylesheet" href="style.css">
...   
</head>

** index.html ve about.html sayfamız için bu işlemi tekrarlamamız gerekiyor. Ardından bu iki html sayfamız için ilgili css kodlarının hepsi etkin olacaktır.

Eğer ki aşağıdaki css kodumuzu 3 farklı şekilde tanımlarsak bunların birbirine üstün gelmesi söz konusudur. Örneğin aşağıdaki <p> etiketi için 3 farklı şekilde css kodu yazalım. 

<p>
Komple Uygulamalı Web Geliştirme Eğitimi
</p>

inline olarak => color : red;

internal olarak => color : blue;

external olarak => color : yellow;

Bu durumda <p> etiketi içindeki yazının rengi kırmızı (red) olacaktır.

Öncelik sıralaması şu şekildedir.

  1. Inline
  2. Internal
  3. External