Javascript Basit Örnekler (1 İzleyici)

Anestezy

Üye
Katıldı
Mesajlar
88
Kredi
0


Merhaba Türkmaxi Ailesi, Sizlerle javascript ile basit projelere adım atacağız dilerseniz hemen konulara geçelim.


Basit Dijital Saat Yapımı

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.

Kod:
<!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ı

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.


Kod:
<!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 () {

// © 2018 http://www.turkmaxi.org
 
// 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>

JavaScript: Butona Tıklayınca Sayıyı Arttırma / Azaltma

Kod:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
input[type="button"]{
width: 200px;
height: 200px;
border:none;
font-size:3em;
background: #FF6766;
color:#E7E7E7;
}
 
</style>
<title>TURKMAXİ.ORG</title>
 
</head>
<body>
<input type=button onclick="arttir()" value="+">
<input type=button onclick="azalt()" value="-">
<input type=button id="sonuc" value="0">
 
<script>
function arttir(){
 
var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)+1;
}
 
function azalt(){
 
var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)-1;
}
 
</script>
</body>
</html>

Butona tıkladığında sayfayı tam ekran yapma

CSS ile sözde full-screen seçicisi kavramını açıklamak için hazırlanmış olan bir örnektir. Bu örnekte javascript ile tarayıcılara göre değişen metod isimlerini ve JavaScript ile CSS doğrudan müdahale edebildiğimizi gösteren basit bir örnektir.

Kod:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tamekran:-moz-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-ms-fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-webkit-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
 
#tamekran:-moz-full-screen > h1 {
color: red;
display: block;
}
#tamekran:-ms-fullscreen > h1 {
color: red;
display: block;
}
#tamekran:-webkit-full-screen > h1 {
color: red;
display: block;
}
 
 
#tamekran:-moz-full-screen > button {
display: none;
}
#tamekran:-ms-fullscreen > button {
display: none;
}
 
#tamekran:-webkit-full-screen > button{
display: none;
}
 
#tamekran:fullscreen > button {
display: none;
}
 
#tamekran:fullscreen > button {
display: none;
}
 
#tamekran:fullscreen > h1 {
color: red;
}
 
#tamekran > h1{
display: none;
}
</style>
 
</head>
<body>
 
<div id="tamekran">
<h1>Tam Ekran Yaptınız</h1>
<button id="tamekran-button">Tam Ekran Yap</button>
</div>
 
 
<script type="text/javascript">
var tamEkranButon = document.getElementById("tamekran-button");
 
function tamEkranYap() {
/*tam ekran yapılacak div*/
var tamEkranDiv = document.getElementById("tamekran");
 
/*tarayıcının tam ekranı destekleyip desteklemediğini kontrol edyiyoruz. Tam ekran yapılacak div ile.*/ 
var tamEkranFonk=tamEkranDiv.requestFullscreen||
tamEkranDiv.mozRequestFullScreen||
tamEkranDiv.msRequestFullscreen||
tamEkranDiv.webkitRequestFullScreen;
 
tamEkranFonk.call(tamEkranDiv); 
}
tamEkranButon.addEventListener('click', tamEkranYap);
</script>
 
</body>
</html>

 

Bu konuyı kimler okuyor

Benzer konular

Top