Front-End Goods

JavaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

19 Aralık 2016 Pazartesi

Javascript SEO Analiz Aracı

Basit Bir SEO Analiz Aracı

Basit bir seo analiz aracı üzerinde çalışıyorum. Javascript ile tarayıcı üzerinden çalışacak. Şimdilik sadece sayfadaki h taglarını buluyor. Ama geliştirmeye devam edeceğim. Sitenizi analiz etmesi için sadece kaynak kodunu aşağıdaki kutucuğa yapıştırmanız yeterli.

Analiz Et

5 Ağustos 2016 Cuma

Javascript ile bir nesneyi gizlemek

Javascript ile sayfadaki bir nesne nasıl gizlenir?

Başlangıç seviyesi Javascript programlama çalışmalarımıza devam ediyoruz. Daha önceki derste Javascript ile bir yazının font size'ı nasıl değiştirilir? onu görmüştük. Bu derste da yine onclik olayı üzerinden bir örnek ile olayı açıklayalım.

Sayfada var olan bir elemanın gösterilmesi ya da gizlenmesi CSS kodlarından display ve/veya visibility özellikleri kullanılarak yapılır. Bir nesneyi gizlemek için ya

display:none deriz ya da

visibility:hidden kullanırız.

Bu çalışmada biz bu işi Javascript kodları kullanarak yapmak istiyoruz. Çok da lafı uzatmadan sayfadaki nesneyi gizleyen kodu yazıyorum.

document.getElementById('deneme').style.display='none';

Bu kod ne işe yarıyor?

Sayfada id değeri deneme olan nesneyi buluyor ve CSS stil özelliğine display:none değerini atıyor. Böylelikle nesne görünmez oluyor. sayfa kodlarını FireBug ile görüntülediğinizde gizlediğiniz nesnenin aslında hala orada olduğunu görürsünüz. Sadece CSS değerlerinden display özelliği none olduğu için görünmüyor.

Gizlenmiş olan bir nesneyi tekrar görünür hale getirmek için ise şu kod yeterli olacaktır.

document.getElementById('deneme').style.display='block'

Bu kodları aşağıdaki yazı yazıya onclik yani tıklayınca çalışma özelliğine atadığımızda artık çalışır hale geliyor. Tıklayın ve deneyin.

Bana tıkla ve aşağıdaki resmi gizle!

Bana tıkla ve aşağıdaki resmi göster!

Yukarıda anlattıklarımızın düzgünce kodlanmış halini aşağıda veriyorum. Javascript örnek kodunu editörünüzde açtığınız boş bir HTML sayfasına kopyalayın ve nasıl çalıştığını inceleyin.

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Nesneyi Gizlemek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<p onclick="document.getElementById('deneme').style.display='none'">Bana tıkla ve aşağıdaki resmi gizle!</p>

<p onclick="document.getElementById('deneme').style.display='block'">Bana tıkla ve aşağıdaki resmi göster!</p>

<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexzOG8_ZuzpygvuILfNLbvlFcy-WOAMXgevjYaLjt_-k8TMkRHdeV6P4NFYw3sINNm4ywafSpjC6hgY0yx17N0-nRGBE4Z4qrMIb8evnjJO22pR8ROtH_yEiqAtmu8JnFCaHiZ5BHrqw/s320/learn-jscript.jpg" width="320" id="deneme" />

</body>
</html>

Evet bu seferlik bu benden bu kadar. Umarım sizin için faydalı olabilmişimdir. Fikir ve görüşlerinizi yorum olarak yazarsanız beni çok mutlu eresiniz.

Unutmayın!

JavaScript öğrenmek kolay ve zevkli bir iştir.

4 Ağustos 2016 Perşembe

JavaScript ile metin boyutu nasıl değiştirilir

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

Javascript başlangıç seviyesi çalışmalarımıza devam ediyoruz. Bu sefer web sayfasındaki bir metnin boyutunu JavaScript ile değiştireceğiz. Normalde bir web sayfası kodlarken metin boyutlarını CSS kodları ile düzenleriz. "font-size:" kodunu kullanarak istediğimiz yazıya, istediğimiz boyutu, piksel,yüzde(%), em vs cinsinden verebiliriz.

Javascript basit kodlarla bir metne font-size vermeye ya da font-size'ı değiştirmeye izin verir. Peki CSS kullanarak bu işi yapmak varken neden Javascript kodu yazalım ki?

Aslına bakarsanız CSS ile yapabileceğiniz işleri CSS ile yapmak daha mantıklı. Zaten genelde de yapılan budur. Ancak sayfada bazı olaylar olduğunda(tıklama, yüklenme, fare ile bir nesnenin üzerine gelme gibi). görüntüde değişiklikler yapmak isteyebilirsiniz.

JavaScript işte bu durumlarda bir FrontEnd Developer'ın imdadına yetişiyor. Birkaç satır kod yazarak sayfada istediğiniz manipülasyonu yapabilirsiniz. Nasıl olduğun görmek için aşağıdaki butonu bir deneyin derim.

JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!

Javascript kounu mu merak ettiniz? İşte size kodlar!

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Yazının Boyutunu Değiştirmek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
</title>
<body>

<h3>Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?</h3>

<button type="button" onclick="document.getElementById('yazi').style.fontSize='35px'">Font size değiştir!</button>
<button onclick="document.getElementById('yazi').style.fontSize='14px'" type="button">Font size'ı eski haline getir!</button>

<p id="yazi" style="font-size:14px;">JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!</p>

</body>
</html>

Burada butona tıklandığında (onclick) tarayıcı id'si yazi olan nesnenin font-size'ını değiştirir. Bu işlemi yapan minik Javascript kodu şöyle:

document.getElementById('yazi').style.fontSize='35px'

Bu kodun çalışma adımları:

document.getElementById('yazi') : id değeri yazi olan elemanı bul
style : bu elemanın style nesnesine ulaş
fontSize: style nesnesinin bir özelliği olan fontSize'ı uygula ve buna karşısındaki değeri ekle

Hepsi bu kadar.

JavaScript öğrenmek kolay ve zevkli bir iştir.

1 Ağustos 2016 Pazartesi

Basit Bir JQuery Responsive Tab Menu Örneği

JQuery ile yapılmış basit bir tab menü. Menü 290 piksel genişliğe kadar responsive çalışıyor. uygulaması son derecede kolay. Renklendirdiğim Kodları kopyala yapıştır yapıp rahatlıkla kullanabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabmenu{height:30px}
ul.tabmenu,ul.tabmenu li{
list-style-type:none;
margin:0px;
padding:0px;

}
ul.tabmenu li{
display:inline-block;
width:80px;
height:30px;
line-height:30px;
background-color:#4a9fef;
text-align:center;
position:relative;
border-top:solid 1px #4a9fef;
border-left:solid 1px #4a9fef;
border-right:solid 1px #4a9fef;
border-bottom:solid 1px #fff !important;
color:#fff;
}
ul.tabmenu li a:visited{color:inherit;}
.tabmenu li a{text-decoration:none;display:block;position:absolute;width:100%;height:30px;top:0px;z-index:15;}
.kutu{
display:block;
max-width:500px;
border:solid 1px #4a9fef;
height:350px;
}
.tab
{
display:none;
max-width:500px;
height:100%;
position:relative;
padding:10px;
}
.tab:first-child{display:block;}
.active{background-color:#ffffff !important;color:#125899 !important;height:30px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.tabmenu li').click(function () {
var indeks = $(this).index();
$('ul.tabmenu li').removeClass("active");
$(this).addClass("active");
$(".tab").not(indeks).hide();
$(".tab:eq(" + indeks + ")").show();

});
});
</script>
</head>
<body>

<ul class="tabmenu">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="kutu" >
<div class="tab">Kutu 1</div>
<div class="tab">Kutu 2</div>
<div class="tab">Kutu 3</div>
</div>
</body>
</html>

30 Kasım 2015 Pazartesi

Javascript Başlangıç Seviyesi Çalışma 1 : Javascript ile Yazı Yazdırmak

Javascript Nedir?

Javascript web sitelerinin önyüz(frontend) tarafındaçalışan bir dinamik programlama dilidir. Javascript Nedir? Ne Değildir? Öğrenmek için vikipedia sayfasına bakabilirsiniz.

Javascript ile Neler Yapılarbilir?

Javascript ile web sayfasının görünümünü değiştirebilir, kullanıcı ile etkileşim kurabilir ve çeşitli animasyonlar, oyunlar programlayabilirsiniz. Ayrıca sunucu ile veri alışverişi sağlayabilirsiniz.

Basit bir Javascript çalışması yapalım.
Aşağıdaki kedi resmine tıklayın bakalım ne olacak?

Javascript İle Sayfadaki bir yazıyı değiştirebilirsiniz?

Kediyi Konuşturun!

Kediyi tekrar konuşturmak için sayfayı yenileyin

Aşağıda mavi ile renklendirdiğimiz kod aslında basit bir javascript kodu. Kedi ikonuna tıklandığı anda sayfadaki id'si kedi1 olan elemanı buluyor ve içeriğindeki yazıyı değiştiriyor.

<img alt="Cat Icon" border="0" src="/cat-icon.png" title="Kediye Tıklayın" onclick="document.getElementById('kedi1').innerHTML = 'Miyavv! Mama yok mu mama?'" class="kedi1"/></a>
<p id="kedi1">Kediyi Konuşturun!</p>

Kullandığımız Javascript Kodlarının Açıklamaları

onclick : tıklama olayını dinleyen html özelliği
innerHTML : HTML elemanının içerğini değiştiren javascript kodu
document : sayfanın kendisi
getElementById : tanımlanan id'yi, taşıyan HTML elemanlarını bulan javascript kodu

Şimdilik bu kadar. Unutmayın Javascript Öğrenmek Kolay ve Eğlencelidir.

8 Ekim 2015 Perşembe

Metin Türkçe Karakter Çevirici

Metindeki Türkçe karakterleri İngilizce'deki karşılıklarıyla değiştiren basit bir javascript uygulaması.

Harflerini çevirmek istediğiniz metni aşağıdaki kutucuğa yapıştırın ve butona basın.

Yazıdaki Türkçe Karakterlerin İngilizceleri ile değiştirilmiş halini aşağıdaki kutudan kopyalayabilirsiniz.

3 Mayıs 2013 Cuma

HTML5 Canvas Slider

Basit ve kullanışlı bir HTML5 CANVAS slider örneği

Bu gün sadece HTML5 canvas ve JavaScript kodlarıyla oluşturulmuş basit bir slider çalışması yaptım. Bu çalışmada slider'da yazdığım JavaScript fonsiyonu ile gösterilen resimler, "resimler" adındaki bir dizi değişkeninde saklanan adresleri kullanılarak canvas nesnesine aktarılıyor. Resimlerin tarayıcıya teker teker yüklenmesini amaçladım.Bu sayede sayfa daha hızlı açılır ve bandwidthten de tasarruf edili diye umuyorum. Tabii bu konuda haklı olup olmadığımı uygulama gösterecek. Slider'ın kodlarını aşağıda kısaca açıklamaya çalıştım. ayrıca en alttaki Download likinden çalışır bir versiyonunu indirebilirsiniz. Bu slilderı Firefox, İnternet Explorer, Chrome ve Safari'de denedim. Hepsinde sorunsuz çalıştığına göre slider'ın cross browser olduğunu söyleyebilirim. Sitenizde istediğiniz gibi kullanabilirsiniz. Kullanan arkadaşlar deneyimlerini yorum olarak yazarlarsa sevinirim.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Tarayıcınız HTML5 canvas tag'ini desteklemiyor.
</canvas>

<script>
var c=document.getElementById("myCanvas");//c adlı değişkenemyCanvas id'li HTML5 elemanı atanıyor.
var ctx=c.getContext("2d");// HTML5'in 2 boyutlu çizim metodları c değişkenine aktarılıyor ve oluşturulan nesne ctx değişkenine atanıyor

var resimler= new Array("images/resim1.jpg","images/resim2.jpg","images/resim3.jpg","images/resim4.jpg");// resimlerin konumlarını tutan dizi değişkeni

adim = 0;// bilgisayarın hangi resimde olduğunu anlaması için değerini takip edeceği değişken
var pic = new Image(); // yeni bir Image nesnesi oluşturuluyor
function ciz(){// ciz fonksiyonu tanımlanıyor

pic.src=resimler[adim];//yukarıda oluşturulan değişkenin src paramatresine resimler dizisinden adim değişkeninin değeriyle aynı olan elemanın değeri atanıyor.
pic.addEventListener("load",function(){ctx.drawImage(pic,0,0,c.width,c.height),false});//ilgili resmi canvas'da gösteren fonksiyonu çalıştıran Javascript olay dinleyici

if(adim<resimler.length-1){// adim değişkeninin değerinin resimler dizisinin eleman sayısını geçmesine engel olan kontrol
adim++;
}else{
adim=0;
}
setTimeout("ciz()",3000);// ciz fonksiyonunu her 3 saniyede bir çalıştıran fonksiyon
}
window.addEventListener("load",ciz,false);// pencere yüklendiğinde ciz fonksiyonunu başlatan Javascript olay dinleyicisi
</script>
İsterseniz tüm dosyayı aşağıdaki linkten indirebilirsiniz.

DOWNLOAD

-->

8 Nisan 2013 Pazartesi

Basit Bir JavaScript Slider Örneği

JavaScript Slider Nasıl Yapılır:

Slider örneğimiz iki dosya ve 4 adet resimden oluşmaktadır. slider.html ve slide.js dosyaları ile ilgili açıklamaları aşağıda verdim. Kodları basitçe açıklamaya çalıştım. Bu aslında temel seviyede bir slider örneğidir. kodlarken sadece HTML ve JavaScript kullandım. CSS kurallarını kendi web sayfanıza göre uyarlayarak sitenizde kullanabilirsiniz. Turuncu ile işaretli satırla açıklama içindir. Kullanırken isteğe başlı olarak bu satırları silebilirsiniz.

slider.html kodları:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="slide.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Basit Slider</title> </head> <body onload="degistir()"> <img src="images/deniz-1.jpg" name="resim" width="400" height="300 " />  </body> </html> slide.js kodları: /*ilk önce Image() türünden değişkenler tanımlıyoruz bu değişkenler Image() sınıfının src özelliğini kullanarak değişkenlere resimdosyalarının fiziksel adresleri yüklenecek siz bu adresler yerine kendi resminizi koyabilirsiniz. değişken sayısını istediğiniz kadar arttırabilirsiniz. */ var image1 = new Image(); image1.src="images/deniz-1.jpg"; var image2 = new Image(); image2.src="images/deniz-2.jpg"; var image3 = new Image(); image3.src="images/deniz-3.jpg"; var image4 = new Image(); image4.src="images/deniz-4.jpg"; //şimdi resimlerin sıra ile değişmesini sağlayan degistir() adlı fonksiyonumuzu oluşturalım. var adim =1;// tarayıcının kaçıncı resimde olduğunu anlamasını sağlayan değişken function degistir(){ document.images.resim.src=eval("image"+adim+".src"); /* dokuman içinde name değeri resim olan elemanı bulur ve bu elemanın src değerine adim değişkeninin değerine karşılık gelen başta oluşturduğumuz image değerini atar*/ if(adim<4)// eğer adim 4 ten küçükse (başta 4 resim için 4 değişken tanımladık) adim++;// adim değerini bir arttırır else // değilse adim=1; // değeri 1 e eiştler setTimeout("degistir()",3000); //degistir fonksiyonunu her 3000ms(3 saniye) de bir çalıştır }

Slider'ın kodlarını aşağıdaki linkten indirebilirsiniz.

DOWNLOAD

Kaydol: Kayıtlar ( Atom )

Görsel Ara

19 Aralık 2016 Pazartesi

5 Ağustos 2016 Cuma

Javascript ile sayfadaki bir nesne nasıl gizlenir?

JavaScript öğrenmek kolay ve zevkli bir iştir.

4 Ağustos 2016 Perşembe

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

JavaScript öğrenmek kolay ve zevkli bir iştir.

1 Ağustos 2016 Pazartesi

30 Kasım 2015 Pazartesi

Javascript Nedir?

Javascript ile Neler Yapılarbilir?

Javascript İle Sayfadaki bir yazıyı değiştirebilirsiniz?

Kullandığımız Javascript Kodlarının Açıklamaları

8 Ekim 2015 Perşembe

Metindeki Türkçe karakterleri İngilizce'deki karşılıklarıyla değiştiren basit bir javascript uygulaması.

Harflerini çevirmek istediğiniz metni aşağıdaki kutucuğa yapıştırın ve butona basın.

3 Mayıs 2013 Cuma

Basit ve kullanışlı bir HTML5 CANVAS slider örneği

8 Nisan 2013 Pazartesi

JavaScript Slider Nasıl Yapılır:

Abone Ol: