Javascript kodları nereye yazılır

Aralık 31, 2017

Javascript kodlarını genel olarak 4 farklı yöntemle kullanabiliriz,istersek html sayfasının head bölümünde istersek body etiketinden önce ,harici bir dosyadan çağırarak yada tarayıcımızın console bölmesinde görüntülenmesini sağlayabiliriz.Unutmadan bir de eğer kullanıcıya uyarı vermek istiyorsak window nesnesinin alert metodunu kullanarak da javascript kodlarını çalıştırabiliriz.Javascript kodları nereye yazılır öğreneceğiz.

Javascript kodları nerelerde kullanılır ve çalıştırma şekilleri

Bu javascript dersinde js kodlarını html sayfalarında farklı şekillerde çağırmayı öğreneceğiz.
Alert metodu kullanarak görsel bir uyarı alacağız.
Script kodunu harici bir dosyadan çağırarak kullanarak kullanacağız.
Document nesnesinin write metodunu kullanarak örnek kod uygulaması yapacağız.
Son olarak html belgesinin head bölümüne script tagları arasında kod yazıp çalıştıracağız.
Tarayıcımızın console bölmesinde de js kodlarının çalışmasını öğrenmiş olacağız.

html sayfalarının head bölümünde js çalıştırma

İlk javascript uygulamamız bir alert olsun yani uyarı penceresi ve "Hoşgeldin" desin.Dikkat edeceğimiz şey ise js kodlarını head bölümü içersinde yazmamız olacaktır.Bu bir yöntem.Dez avantajı ise web sayfası yüklenirken biraz daha fazla zaman alacak.O yüzdendir ki Page Speed Insights'da web sitemizin hızını ölçerken hep şu uyarıyı alırız.Sayfalarınızın daha hızlı yüklenmesi için inline kullanın der.

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Head içerisinde js çalıştırma örnek uygulama</title> <script type="text/javascript"> function selam(){ window.alert("Hoşgeldin"); } </script> </head> <body> <button onclick="selam()">Çalıştır</button> </body> </html>

Document write metodu kullanımı

Şimdiki js uygulamamızda ise write metodunu kullanacağız ve bu sefer javascript kodlarımızı body tagından önce kullanacağız.Ve sayfaya bize tarihi yazdırsın.Ayrıca date fonksiyonunun nasıl kullanıldığını da öğrenmiş olacağız.

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js kodunu body den önce kullanma</title> </head> <body> <button onclick="tarih()">Tarihi Yazdır</button> <script type="text/javascript"> function tarih() { document.write(new Date()); } </script> </body> </html>

Tarayıcıda console bölümünü kullanma

Bazen javscript kodlarımızın doğru çalışıp çalışmadığını tarayıcaların console bölmesinde kontrol edebiliriz.Ben chrome kullanıyorum genel olarak.Sizde eğer google chrome kullanıyorsanız bu örneğimizde F12 tuşuna basmanız gerekecek.Çünkü uygulamada yazacağım kodu html sayfasında deil tarayıcının konsol bölümünde görebileceksiniz.

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js kodunu konsolda görüntüleme</title> </head> <body> Öncelikle tarayıcınızdaki konsolu açın sonra aşağıdaki tuşa tıklayın.Eğer doğru yaparsanız bir yazı sizi karşılayacak. <button onclick="konsol()">Konsolda Görüntüle</button> <script type="text/javascript"> function konsol() { console.log("Makalemin sonunda yorum yazmayı unutmayın;"); } </script> </body> </html>

Şimdi ise sırada harici javascript kodu çağırma var.

Bu örnekte size güzel bir alert uygulamasından bahsedeceğim ve sizde projelerinizde nasıl kullanacağınızı öğreneceksiniz.Sweetalert adlı bir javascript dosyasını html sayfasına çağıracağım ve çok afillli bir alert box oluşturacağız.

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js kodunu dışarıdan çağırma</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </head> <body> Güzel Bir Alert Box Uygulaması Sweetalert ! <br /> <button onclick="yenialert()">Değişik Alert Box</button> <script type="text/javascript"> function yenialert() { swal("Hey Dostum!", "Bu alert bir harika!", "success"); } </script> </body> </html>

Bu derste öğrendiklerimiz

Javascript Kodlarının Nerelere yazılabileceği
Harici olarak js dosyalarımı çağırmayı
Klasik alert yerine sweetalert gibi bir javascript uygulamasını web sayfamızda nasıl çalıştırabileceğimizi.
Document write metodu ile html sayfasına tarihi yazdırmayı.
Js kodlarımızı istersek web sitemizin head kısmında istersek body tagından önce de kulanabileceğimizi. Javascript ile neler yapılabilir konusunda genel bilgi sahibi olmak için okuyun.

Bir dersin daha sonuna gelirken javascript kodları nereye yazılır konusunda umarım faydalı bir döküman olmuştur.Geri dönüşümlerinizle daha iyi yazılar oluşturmaya çalışacağım.Kod67 facebook sayfasında görüşmek üzere.

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

Uyurken Bile Para Kazanmak İster misin