Javascript ile neler yapılabilir
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript kullancı taraflı bir dildir.Öğrenilmesi en kolay web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir.
Javascript HTML elemanlarının içeriğini değiştirebilir.Aşağıda uygulmada p1 id'ye sahip bir paragrafı Js ile içeriğini değiştirebilirsiniz.Bunun için yapmanız gereken tek şey Butonu çalıştırmak.Javascript kodlarını head kısmında da kullanabiliriz ben daha çok body etiketinden önce kullanıyorum.
Eğer kodu çalıştırdıysanız js ile bir html öğesinin içeriğinin değiştirebildiğinizi farketmişsinizdir.Şimdi bundan sonraki örneğimiz resim üzerinden olacaktır.Html'de resim oluştururken src özelliğini kullanırız.Yani bir tagın yada elemanın alt özelliği.Javascript ile resmin yolunu manipüle edeceğiz.Eğlenceli olacak deneyiniz.
Temel dersleri bitirdiğimizde javascripti projelerimizde sıklıkla kullanacağız.Bu derste js'nin html dom elemanları üzerinde nasıl etki yarattığını uygulamalarla görmüş olduk.Basite indirgeyerek anlatmaya çalışıyorum.Yorum kısmında eleştrilerinizi bekliyorum.
Bundan önceki yayında da belirttiğim gibi javascript ile bir çok uygulama ,oyun ve web programı yapabiliriz.Şunu unutmamak gerekir ne yaparsak yapalım işin içinde web kelimesi var ise temel düzeyde html ve css bilgimizin olması gerekiyor.Bol bol uygulama yaparak kendi kişisel yada kurumsal bir web site yapmaya çalışacağımız zamanlarda temel düzeyde html css ve javascript bilgimizin olması gerekecek.Ben sizlerle paylaşacağım web site yapım süreçlerimizde sunucu taraflı programlama dili olarak php üzerinde desler anlatacağım.Ve göreceksiniz ki javascriptte öğreceğimiz programlama yapıları php de benzer şekilde kullanılacak.Sonraki derste görüşmek üzere.
 |
| Javascript ile neler yapılır |
Javascript ile Html elemanlarının içeriğini değiştirme
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Js ile html belgesindeki bir elemanın içeriğini değiştirme.</title>
</head>
<body>
<p id="p1">Bu paragrafın yazını içerğini js yardımıyla değiştirebilirsiniz</p>
<button onclick="degistir()">Yazıyı Değiştir !</button>
<script type="text/javascript">
function degistir(){
//rengini değiştirdim kırmızı yaptım
document.getElementById("p1").innerHTML="Vay be JS'nin Dom üzerindeki etkisine bak.Paragrafı değiştirdi..." ;
}
</script>
</body>
</html>
Javascript ile Html elamanının özelliğini manipüle etme
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Js ile resim değiştirin.</title>
</head>
<body>
<h1>Javascript ile bir html elemanının özelliklerini değiştirebilirsiniz.</h1>
<button onclick="ac()">Lambayı Yak</button>
<img id="resmim" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJhKrbKst1jS9LnBRMPQat68oiEGhUAumDBe8ogNtUILpzC2N-BHQbdYMqkgHzJL0qcMn_qMckWkia39Rj3JTrbafQ2T1BTs53vNgek3pzdi6aGIN_UN7keQG7Fc_Xn1dyHRIQNf3Cg/s1600/kapali.gif" style="width:100px">
<button onclick="kapa()">Işığı Söndür</button>
<script type="text/javascript">
function ac(){
document.getElementById('resmim').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWirja5MvPC0fNxLIjfLyyk1rzKakasP0hGQgozPbl36p_tkbFh7QbfnNMzMAUW_85bgygUijQ9seoANx8bzXkY7rMaVKBDDOoMcSg1Wybzn6ZKUkcvLNei1hfU8sybMCNHIBPsIFHA/s1600/acik.gif';
}
function kapa(){
document.getElementById('resmim').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJhKrbKst1jS9LnBRMPQat68oiEGhUAumDBe8ogNtUILpzC2N-BHQbdYMqkgHzJL0qcMn_qMckWkia39Rj3JTrbafQ2T1BTs53vNgek3pzdi6aGIN_UN7keQG7Fc_Xn1dyHRIQNf3Cg/s1600/kapali.gif';
}
</script>
</body>
</html>
Javascript html öğelerinin css özelliklerini değiştiririr
Şimdi göstermeye çalışacağım örnek benim için gayet eğlenceliydi.Javascript kodlarıyla yeri geldiğinde html elamanlarının css özelliklerini değiştirmeye ihtiyaç duyabiliriz.Bende bir paragrafı js ile stil vererek renkli bir görüntü oluşturmaya çalıştım.Sizde aynı etkiyi yaşarsanız yorum da lütfen yazın.Şimdi sıra sizde javascript ile neler yapacaksınız butona bastığınızda ?
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Js ile css özellikleri değiştirelim mi ?</title>
</head>
<body>
<p id="p2">Bu paragrafa dikkatlice bakın ve sonra butona tıklayın ! </p>
<button type="button" onclick="stilyap()">Css Değiştir!</button>
<script type="text/javascript">
function stilyap() {
// sıkça kullanacağım için seçeceğim paragrafı bir değişkene yülüyorum.
var paragrafim = document.getElementById('p2');
//şimdi ise paragrafim adli değişkenime js syntax kuralına göre amacıma ulaşıyorum.
paragrafim.style.fontSize = '35px';
paragrafim.style.color = 'blue';
paragrafim.style.background = 'yellow';
paragrafim.style.border = '5px ridge pink';
paragrafim.style.padding = '15px';
}
</script>
</body>
</html>
Javascript ile bir html elamanını gizleyebiliriz
Css de bildiğimiz display özelliği block ya da none gibi değerler alabilirdi hatırlayınız.Bu örnekte bir paragrafı javascript yardımıyla gizlemeyi öğreneceğiz.Şimdi fark ettim genelde fonksiyonlarla konuyu anlatıyorum.Bu yazı da önem verdiğim Javascript ile neler yapılabilir uygulamalar ile göstermek.
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Js ile bir html elementini gizleme örneği ve uygulaması ?</title>
</head>
<body>
<p id="p3">Js ile bu paragrafı gizleyin ! </p>
<button type="button" onclick="gizle()">Gizle!</button>
<script type="text/javascript">
function gizle() {
var paragrafim = document.getElementById('p3');
// css deki display özelliğini kullanarak html elemanını gizliyorum
paragrafim.style.display = 'none';
}
</script>
</body>
</html>
Javascript ile gizli html elemanlarını gösterme nasıl yapılır
Son örneğimizde gizli bir html öğesini görünür hale geirmeye çalışacağız.Bu sefer uygulamada dikkat etmenizi istediğim bir detay var .Head bölümünde style tagları açarak gizli olan paragrafa display none özelliği verdim ki javascript ile onu görünür yapabilelim.Şimdi Sıra sizde !Gösterin gizli paragrafı.
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Js ile bir html elementini gizleme örneği ve uygulaması ?</title>
<style type="text/css">
#p4{
display:none;
}
</style>
</head>
<body>
<p>Ben görünen bir paragrafım.</p>
<p id="p4">Ben gizli bir paragraftım ama şimdi görünüyorum js sayesinde. </p>
<button type="button" onclick="goster()">Göster !</button>
<script type="text/javascript">
function goster() {
var paragrafim = document.getElementById('p4');
// css deki display özelliğini kullanarak html elemanını gizliyorum
paragrafim.style.display = 'block';
}
</script>
</body>
</html>
Yorumlar
Yorum Gönder