BIL181-INTERNET PROGRAMLAMA I
2021-2022 BAHAR DÖNEMİ
● Javascript Nedir
● Javascipt e Giriş
● Javascript Uygulamaları
Dr.Öğr. Üyesi İhsan Güneş
Javascript
• Javascript 1995 yılında Brendan Eich tarafından web sitelerinin
dinamikleştirilmesi için geliştirilmiştir.
• Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı
(client-side ) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da
kullanıcıyla iletişim kurmak için kullanılır. Örnek olarak butona basıldığında
ekrana popup pencere çıkarmak veya arka plan rengini değiştirmek gibi
• Html'in eksiklerini gidermek amacıyla geliştirilmiştir. HTML ile birlikte
kullanılabilir.
• JavaScript bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri
eklemek, formları kontrol etmek, matematiksel işlemler yapmak gibi işler için
kullanılır.
Neden Javascript
• Javascript dünyadaki en popüler programlama dilidir. Javascript'i öğrendikten
sonra, jQuery, [Link] gibi farklı Javascript tabanlı çerçeveler (framework)
kullanarak harika ön uç ve arka uç yazılımlar geliştirmenize yardımcı olur.
• Javascript her yerdedir, her modern web tarayıcısında çalışır ve bu nedenle
Javascript öğrenmek için gerçekten herhangi bir özel ortam kurulumuna
ihtiyacınız yoktur. Örneğin Chrome, Mozilla Firefox , Safari ve bugün itibariyle
bildiğiniz her tarayıcı Javascript'i destekliyor.
• Javascript gerçekten güzel ve hızlı web siteleri oluşturmanıza yardımcı olur.
Hafif, hızlı ve platformlar arası bir dil olduğundan mobil, masaüstü ve oyun
uygulamaları gibi alanlara yayılmış ve geniş çapta benimsenmiştir.
Neden Javascript
• JavaScript kullanımı artık mobil uygulama geliştirme, masaüstü
uygulama geliştirme ve oyun geliştirmeyi kapsayacak şekilde
genişletildi. Bu, Javascript Programcısı olarak size birçok fırsat sunar.
• React Native javascript framework ile mobil uygulama
geliştirebilirsiniz.
• Doğrudan yazılım geliştirmenizde kullanılabilecek, halihazırda
geliştirilmiş birçok framework (çerçeve) ve Kütüphane
bulunmaktadır. Bu eklentiler yazılım geliştirme sürecinizi
kısaltacaktır.
Kaynak: [Link]
Javascript frameworks and libraries:
• Angular • Meteor
• React • Mithril
• jQuery • [Link]
• [Link] • Polymer
• [Link] • Aurelia
• [Link] • [Link]
Javascript Uygulama Alanları
• İstemci tarafı doğrulama - Bu, herhangi bir kullanıcı girişini sunucuya
göndermeden önce doğrulamak için gerçekten önemlidir ve Javascript bu
girişleri ön uçta doğrulamada önemli bir rol oynar.
• HTML Sayfalarını Değiştirme - Javascript, HTML sayfasını anında
değiştirmeye yardımcı olur. Bu, javascript kullanarak herhangi bir HTML
etiketini çok kolay bir şekilde eklemeye ve silmeye ve farklı cihazlara ve
gereksinimlere göre görünümünü ve verdiği hissi değiştirmek için
HTML'nizi değiştirmenize yardımcı olur.
• Kullanıcı Bildirimleri - Web sitenizin ziyaretçilerine farklı türde bildirimler
vermek için web sayfalarında dinamik pop-up'lar oluşturmak için
Javascript'i kullanabilirsiniz.
JavaScript Kullanımı
• Html arasına yazılabilir veya .js uzantılı ayrı dosya olarak
kaydedilebilir.
• Html içerisinde Head veya Body bölümüne eklenebilir
• <script language="JavaScript" src="[Link]"> </script>
JavaScript İlk Örnek
<html>
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<script language ="JavaScript" >
alert("Merhaba");
</script>
</head>
<body>
</body>
</html>
Harici Js Dosyası Hazırlama
Js_ornek.js olarak dosyayı kaydedelim.
function merhaba() {
alert ("Merhaba Dünya")
}
Html içeresinden harici js dosyasını çağırma
html içerisinde js örnek dosyası tanımlanır.
<html>
<head>
<title>JavaScript Örnek</title>
<meta charset="utf-8">
</head>
<body>
<p> JavaScript Örneği</p>
<form>
<input onClick="merhaba()" type="button" id="button" value="TIKLA"/>
</form>
<script language ="JavaScript" src="js_ornek.js"></script>
</body>
</html>
Javascript output
innerHTML: HTML elemanlarına yazdırma
[Link](): Sayfaya yazdırma
[Link](): pop up penceresine yazdırma
[Link](): browser konsoluna yazdırma
Html İçeriğini Değiştirmek - [Link]
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
Html İçeriğini Değiştirmek
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
[Link]("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Using [Link]()
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call [Link] after the document has finished loading.
It will overwrite the whole document.</p>
<script>
[Link]("Hello World");
</script>
</body>
</html>
Sayfaya Yazdırma [Link]
<script type = "text/javascript">
[Link]("Hello World")
</script>
Onclick fonksiyonuna script yazmak
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="[Link](5 + 6)">Try it</button>
</body>
</html>
Alert popup penceresi
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
[Link](5 + 6);
</script>
</body>
</html>
Browser Console yazdırma
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>
<script>
[Link](5 + 6);
</script>
</body>
</html>
Html içeriğini görünür yapma
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {
[Link]('demo').[Link]='block';
}
</script>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript - Değişkenler
• JavaScript'in diğer dillerden farkı değişkenin, tür belirtmeden de
tanımlanabilmesidir.
• Var komutu ile değişkenin sadece ismi belirtilerek değişken
oluşturulabilir. Ardından bu değişkene istenen türde veri girilebilir.
Girilen değere göre değişkenin türü algılanacaktır.
var i;
i=100; sayı atandığı için i değişkeni number türünde olur.
i="ali" // Değişken artık string olur
• Number: Her türlü sayısal değeri saklamak için kullanılır. Ondalıklı
sayılarda ondalık kısmı ayırmak için nokta kullanılır.
• String: Karakter veya metin saklamak için kullanılır.
• Boolean: True ya da false değeri saklayabilirler.
Operatörler
+ Ekleme
- çıkarma
* Çarpma işlemi
** Üs
/ Bölüm
% Modül (Bölme Kalanı)
++ Tekli artırım
-- Tekli azaltım
Karşılaştırma operatörleri
== Eşittir
!= Eşit değildir.
> Büyüktür.
>= Büyük eşittir.
< Küçüktür.
<= Küçük eşittir.
Örnek Uygulamalar
Dışarıdan girilen 2 sayının toplamı
ÇÖZÜM 1: Açılır pencereden değerleri almak
<html>
<head>
<meta charset="utf-8">
<script>
var s1=[Link](" [Link]ı girin");
var s2=[Link](" [Link]ı girin");
var toplam=Number(s1)+Number(s2);
[Link](toplam);
[Link]("İki Sayının toplamı=",toplam);
</script>
</head>
<body>
</body>
</html>
İki sayının toplamı fonksiyon kullanımı ile
<html>
<head>
<meta charset="utf-8">
<script>
function topla(){
var s1=[Link](" [Link]ı girin");
var s2=[Link](" [Link]ı girin");
var toplam=Number(s1)+Number(s2);
[Link](toplam);
[Link]("İki Sayının toplamı=",toplam);}
</script>
</head>
<body>
<button type="button" onclick="topla()">Click Me!</button>
</body>
</html>
Dışarıdan girilen 2 sayının toplamı
• Çözüm 2: Textbox ile dışarıdan verileri almak.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="s1"><br>
<input type="text" id="s2"><br>
<p id="s3">Toplam=</p>
<input type="button" onclick="hesapla()" value="Sonucu Göster">
<script>
function hesapla(){
var s1=[Link]("s1");
var s2=[Link]("s2");
var toplam=Number([Link])+Number([Link]);
[Link]("s3").innerHTML="Toplam="+toplam;
[Link](toplam)
}
</script>
</body>
</html>
Diziler
• const array_name = [item1, item2, ...];
• const array_name= new array(item1, item2, …)
• array_name.sort();
• array_name.length;
• Array_name.push(); // dizi sonuna yeni eleman ekler.
• Array_name.pop(); //dizideki son elemanı çıkartır.