Turgut Arslan

Responsive CSS Hazır Metin Kutusu

Metin kutusu kodları

<style>

.mainBox{

display:block;

max-width:100%;

height:auto;

padding:2.5%;

background-color:#f1f1f1;

margin:5px auto;

border:solid 1px #dfe6e9;

box-sizing:border-box;

}

.innerBox{

background-color:#ffffff;

padding:5px;

width:100%;

height:auto;

display:block;

border:0px;

border-left: solid 3px #e74c3c;

text-align:justify;

box-sizing:border-box;

color:#2c3e50;

}

</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Bu kodların canlı hali

Javascript ile bul değiştir işlemi nasıl yapılır?

Javascript ile bir string ifadeyi tüm sayfada aratıp istenen değerle replace edebilirniz.

Javascript kelime değiştirme kodumuz

var kelime=/aranan kelime/ig;
var yeniKelime="yeni ifade";
var x = this.document.body.innerHTML.replace(kelime,yeniKelime);
this.document.body.innerHTML = x;

Bu koddaki kırmızı yerleri değiştirip tarayıcı konsolunda çalıştırdığınızda HTML sayfasında aradığınız kelime ile eşleşen tüm ifadelerin değiştirildiğini görebilirsiniz.

Javascript ile tıklanan elemanın sira numarasini bulmak

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor.

<style>
li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;}
</style>
<ul id="kutu">

<li class="demo">-1- </li>

<li class="demo">-2- </li>

<li class="demo">-3- </li>

<li class="demo">-4- </li>

<li class="demo">-5- </li>

</ul>

<div>Sıralama Bilgileri</div>
<strong id="siraSonuc"></strong>
<script>

var elemanlar=[];
var sira;
var ind;

elemanlar=document.querySelectorAll(".demo");

for (var i=0;i<elemanlar.length;i++){

elemanlar[i].addEventListener("click",function(){
var ata=this.parentNode;
ind=Array.prototype.indexOf.call(ata.children, this);
sira=Array.prototype.indexOf.call(ata.children, this)+1;
document.getElementById("siraSonuc").innerHTML="Index no: "+ind+" | Sıra no: "+sira;

});

}
</script>
Bunun canlı hali aşağıdaki gibidir. Sonuçları görmek için aşağıdaki sayılara tıklayın.

Sıralama Bilgileri

HTML <!DOCTYPE> Bildirimi

<!DOCTYPE> bildirimi/deklerasyonu her HTML sayfasının başında olması gereken bir HTML elemanıdır.
Tek başına herhangi bir işlevi yoktur. Sadece tasaryıcılara içinde ilgili HTML dökümanının hangi standartlara göre işleneceğini bildirir. Tarayıcının sayfayı doğru yorumlaması için bu elemanın en başta <html> etiketinden önce yazılmış olması şarttır.
HTML <!DOCTYPE> Tagı Kullanım Örneği

<!DOCTYPE HTML>
<html>
   <head>
      <title>Sayfa Başlığı</title>
   </head>

<body>
            Sayfa içeriği
</body>

</html>

Sayfa formatına göre <!DOCTYPE> bildirim biçimleri de değişmektedir..

HTML5
<!DOCTYPE html>

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML <html> Etiketi

<html> etiketi, sayfanın bir HTML sayfası olduğunu belirtmek için kullanılır.
<html> şeklinde açılır ve </html> şeklinde kapanır.
Sayfadaki tüm HTML ve Javascript kodları bu iki etiket arasına yazılır.

HTML <html> Tagı Kullanım Örneği

<!DOCTYPE HTML>
<html>
   <head>
      <title>Sayfa Başlığı</title>
   </head>

<body>
            Sayfa içeriği
</body>

</html>

HTML <html> Tagı Tarayıcı Desteği
Google Chrome Desteği : Var
Mozilla Firefox Desteği : Var
Internet Explorer Desteği : Var
Safari Desteği : Var
Opera Desteği : Var

JSON Nesne Ayırıcı

Kodlar
<!DOCTYPE html>

<html>

<body>

<style>

.objeTablo th, .objeTablo tr, .objeTablo td

{

padding: 5px;

border: solid 1px #f00;

color: #717171;

text-align: center;

}

</style>
<label>Listelenecek Objeyi Gir</label><br/> <input type="text" name="obje" /><br/><input type="button" value="Obje Göster" onclick="objGoster()" /><br/>
<textarea col="50" rows="20" name="jsonGir"></textarea>
<table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;

border: solid 1px #f00;" cellspacing="0" cellpadding="0">

<tr>

<th>

Nesne

</th>

<th>

Nesne Değeri

</th>

</tr>

</table>

<script>
function objGoster(){
var jsonVeri = document.getElementsByName("jsonGir")[0].value;

var jsonAra = document.getElementsByName("obje")[0].value;

var obj = JSON.parse(jsonVeri);

var icerik = "";

for (i = 0; i < obj.length; i++) {

icerik += "<tr><td> " +jsonAra + " </td><td> " + obj[i][jsonAra] + " </td></tr>";

}

document.getElementById("tabloIcerik").innerHTML = icerik;
}

</script>

</body>

</html>

Listelenecek Objeyi Gir

Nesne	Nesne Değeri

Textarea'yı Satır Satır Nasıl Okuturuz?

Javascript ile Textarea elemanının içeriğini satır satır okutup başka bir div elemanının içine yazdıralım.

<script>
function linkleriAc(){
var strlar=document.getElementById("lnklist").value.split("\n");
for (i=0;i<strlar.length;i++){
document.getElementById("sonuc").innerHTML+=strlar[i]+"<br/>";
}

}
</script>
<textarea id="lnklist" cols="80" rows="10">
</textarea><br/>
<input type="button" onclick="linkleriAc();" value="Satırları Oku" />
<div id="sonuc">
</div>

Kodların çalışan hali