JAVASCRİPT ÖRNEKLERİ 1

Bu sayfada 40’dan fazla çeşitli zorluk seviyesine göre hazırlanmış JavaScript Örnekleri ve JavaScript Uygulamalarını kapsamaktadır. Basit, Döngülü, Şartlı ve Form uygulamalarını kapsayacak şekilde javascript örnek uygulamalarını kopyalayıp kullanabilirsiniz. JavaScript Örneklerine geçmeden önce javascript dili hakkında kısaca bir bilgi vermek gerekir. Yada JavaScript dili, yapısı ve nesneleri ile ilgili derslere göz atmak içinde JavaScript Dersleri yazısını okuyabilirsiniz.

JavaScript Nedir

Başlangıçta Brendan Eich tarafından geliştirilmiş ve ilk LiveScript olarak isimlendirilen programlama dili olan JavaScript, 1995 yılında yeniden adlandırılmıştır. JavaScript, bir web tasarımcısına kendi web sayfalarına kod ekleme olanağı veren, yorumlanmış bir istemci tarafı kodlama dili olmuştur. JavaScript genellikle bir HTML dosyasına yerleştirilir ve doğrudan web sayfasından çalışır. Saat ve tarihe basmak, bir takvim oluşturmak veya düz HTML ile mümkün olmayan diğer görevleri yapmak için kullanılır.

JavaScript ile Java Aynı Dil Değildir

JavaScript’e yeni başlayanların, web ortamında sık karşılaştığı bir kavram da javascript için kısaca java ifadesi kullanılması sorunudur. Java ile javaScript dilleri bir birinden çok ama çok farklı kavramlardır.

Java, bir makine ortamında bağımsız olarak çalıştırabileceği anlamına gelen, nesne yönelimli bir programlama dilidir. Android cihazlar için uygulamalar, terminaller için yazılımlar ve sunucu taraflı web sayfaları hazırlamak için kullanılan güvenilir bir dildir. Java uygulamarı çalışabilmesi içinderlenmesi gerekir.

JavaScript, diğer taraftan, web tabanlı bir uygulamanın parçası olarak çalıştırılacak olan metin tabanlı bir programlama dilidir. İlk geliştirildiğinde, Java için bir iltifat olması amaçlandı. Ancak JavaScript, web geliştirme alanındaki üç temelden biri olarak hayatına devam ediyor. Diğeri HTML ve CSS dilleridir. JavaScript uygulamaları çalışabilmesi için tarayıcılar tarafından yorumlanması gerekir. Aşağıdaki JavaScript Kodlarını yazdıktan sonra her hangi bir tarayıcıda açıp uygulayabilirsiniz.

Basit Dijital Saat Yapımı

[Basit] Web sayfalarınızda kullanabileceğiniz ve Sadece şart içeren basit javascript örneği. innerHTML yerine artık güncel tanımlama olan textContent özelliği ile içerik değiştirilmiştir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Dijital Saat</title>
</head>
 
<body>
<h1>Bilgisayarın Şuanki Saati: <span id="zemin"> </span></h1>
 
 
<!-- script kodlarını </body> etitekinden hemen önce yazmayı unutmayın --> 
<script>
var saatZemin = document.getElementById("zemin");
 
 
function format(gelen) {
var StrYap = gelen.toString();
if (StrYap.length === 1) {
return "0" + StrYap;
} else {
return StrYap;
}
}
 
function saatGuncelle() {
var dd = new Date();
var hh = dd.getHours();
var mm = dd.getMinutes();
var ss = dd.getSeconds();
saatZemin.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);
}
 
setInterval(saatGuncelle, 1000);
 
</script> 
</body>
</html>
 

Basit Tooltip Yapımı

[Zor] Bu örnek Şartlar, Döngüler DOM manipulasyonu ve JavaScript ile CSS tanımlamalarını içeren görece olarak zor sayılabilecek kullanışlı bir javascript örneğidir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Dijital Saat</title>
<style>
#ornek{
position: absolute;
left:100px;
top:100px;
background: red;
color:white;
}
 
#ornek2{
position: absolute;
left:400px;
top:400px;
background: red;
color:white;
}
</style>
</head>
 
<body>
<p>Not:tooltip kullanmak için tooltip yapılacak nesneye <b>data-tooltip="gösterilecek açıklama" </b>şeklinde tanımlama yapılabilirsiniz</p>
 
<div><p id="ornek" data-tooltip="Merhaba bu tooltip uyarısıdır">Fareyi Getir</p></p>
<div><p id="ornek2" data-tooltip="Bu da ikinci tooltip">Fareyi Getir</p></p>
 
 
<!-- script kodlarını </body> etitekinden hemen önce yazmayı unutmayın --> 
<script>
 
(function () {
// © 2016 https://www.yazilimbilisim.net
 
// tooltip için div oluşturma
var toolTip = document.createElement("div");
 
// stil düzenlemesi
toolTip.style.visibility="hidden"; 
toolTip.style.position="fixed";
toolTip.style.top="1ex";
toolTip.style.left="1ex";
toolTip.style.borderRadius="5px";
toolTip.style.backgroundColor="#8d8daa";
 
// oluşturupan nesneyi DOM içine ekleme
document.body.appendChild(toolTip);
 
function tooltipGoster (olay) {
// üzerine geldiğimiz nesnenin konumunu tespit etme
var kutu = olay.target.getBoundingClientRect();
var coordX = kutu.left;
var coordY = kutu.top;
 
// kordinatlarını düzenleme
toolTip.style.left= (coordX + 40).toString() + "px";
toolTip.style.top= (coordY + 40).toString() + "px";
 
// ekranda gösterilecek nesne ve css ataması
toolTip.innerHTML = "<span style='font-size:16px;color:red;padding:5px;'>" + this.dataset.tooltip + "</span>";
 
// tooltip nesnesini ekranda gösterme
toolTip.style.visibility="visible";
}
 
function tooltipGizle(olay) {
toolTip.style.visibility="hidden";
}
 
//bütün tooltip nesnelerini yakalayıp hepsine olay atama işlemi yapılıyor
var uyarilar=document.querySelectorAll('[data-tooltip]');
for (var i = 0; i < uyarilar.length; i++) {
uyarilar[i].addEventListener("mouseover", tooltipGoster , false);
uyarilar[i].addEventListener("mouseout", tooltipGizle , false);
}
 
})();
 
</script> 
</body>
</html>

UmutYurdugulCode

Bu Blogda Ara