Javascript ile neler yapılabilir

Aralık 31, 2017

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 ile neler yapılır

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.

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>

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.

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://1.bp.blogspot.com/-V7GZ7SiQN6w/WkgNJmzXw3I/AAAAAAAACBw/7VI-qBc6HrwRWd-x-UR-MUvDBHxdi4FYwCLcBGAs/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://2.bp.blogspot.com/-ovLLnl1WpBU/WkgNGGSjSKI/AAAAAAAACBs/4RwYq428Q3kqxtBWe307CVzRqvV7QHZjwCLcBGAs/s1600/acik.gif'; } function kapa(){ document.getElementById('resmim').src='https://1.bp.blogspot.com/-V7GZ7SiQN6w/WkgNJmzXw3I/AAAAAAAACBw/7VI-qBc6HrwRWd-x-UR-MUvDBHxdi4FYwCLcBGAs/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>

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.

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

Uyurken Bile Para Kazanmak İster misin