WTP UZME01- Java Script ile Renk Değiştirme – Hizalama
Bu dersimizde Web Tasarım ve Programlama dersinde kaldığımız yerden devam ediyoruz. Java Script’de daha önce fonksiyon yazmayı, uyarı mesajı vermeyi, harici js dosyası eklemeyi görmüştük. Bir seri eğitim şeklinde web sitesi yapıp her derste eklemeler yapacağız.
İlk olarak fonksiyon neydi ondan bahsedelim.
Foksiyonlar :
Tekrarlanan işin yapılması için gerekli işlem ve komut gruplarına “fonksiyon” adı verilir. Uygulama içerisinde bir komut ya da komut grubunu tekrar tekrar kullanmak isteyebiliriz. Kısaca fonksiyonlar tekrar eden kod bloklarını alıp paketlememize yarar. Uygulama içerisinde artık bu paketin ismini kullanarak istediğimiz yerde bu kodları çalıştırabiliriz. Bu
sayede daha sonra üstüne yapılacak değşiklikleri ve hata kontrolünü hızlı bir biçimde yapmamıza imkân sağlar.
|
1 2 3 4 5 6 7 8 |
function fonksiyon_ismi () { // Fonksiyon içinde yapmak istediklerimizi buraya yazıyoruz. // Bu işleme fonksiyon tanımla diyoruz. } // Fonksiyonu tanımladıktan sonra istediğimiz yerden çalıştırabiliriz. fonksiyon_ismi (); // Bu şekilde çalıştırabiliriz. |
Şimdi sizlerden aşağıdaki fotoğrafı verilen web sitesini tasarlamanızı istiyorum. Kaynaklar bölümünden üst resmi indirebilirsiniz.
Site Özellikleri :
- CSS, JS ve Resimler adında 3 klasörünüz olacak.
- CSS ve JS dosyaları harici olarak eklenecek
- CSS özellikleri :
- Arkaplan rengi : 2B7CB5, Font: Verdana, Font Boyutu: 20px
- Başlıklar ortalı olacak,
- Düğmelerin Genişliği: 150px, Yüksekliği: 40px; Köşe Yuvarlaklığı : 10px,
- #tasiyici {Genişliği : 1000px} ,
#ustResim { Yükseklik : 200px},
#menu { Yükseklik: 40px; Hücre içi Boşluk : 10px}
#icerik { Hücre içi Boşluk : 50px}
#footer { Arkaplan Rengi : 363535, Hücre içi Boşluk : 50px 20px, Yükseklik: 80px}
- JS Özellikleri :
- Girişte kullanıcıya adı sorulacak ve Hoşgeldin mesajı verilecek.
- Tüm düğmelere fonksiyon tanımlanacak.
Kaynaklar:
CSS Kodları :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
@charset "utf-8"; /* CSS Document */ body { background: #2B7CB5; margin: 0; font-family: Verdana; font-size: 20px; } h1 { text-align: center; color: #640204 } button { width: 150px; height: 40px; border-radius: 10px; } button:hover { color: #fff; background: #615F5F; transition-duration:0.2s; } #tasiyici { width: 1000px; margin: 0 auto; } #ustResim { height: 200px; background-color: #2C3B83; } #menu { height: 40px; background-color: #7EB8DC; padding: 10px; } #icerik { padding: 50px; background-color: #FFFFFF; } #footer{ padding:50px 20px; text-align: center; height: 80px; background-color: #363535; color: #fff; } .kirmizi {background-color:#F00;} .yesil {background-color:#093;} .mavi {background-color:#39F;} .mor {background-color:#606;} |
Java Script Kodları :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// JavaScript Document var yazi= "Değiştirilmiş yazı. Değişen yazı burada. Etiam eu felis sem. Donec nec justo vitae justo congue fringilla ut in neque. Vestibulum ullamcorper libero tempus magna malesuada consequat. " function baslangic() { var ad = prompt("Lütfen Adınızı ve Soyadınızı Girin: "); alert("Sayın "+ad+" Öğrenci Bilgi Sistemine Hoşgeldiniz."); } function fnKirmizi(){ document.getElementById("yazi1").style.color="#F00"; } function fnYesil(){ document.getElementById("yazi1").style.color="#093"; } function fnMavi(){ document.getElementById("yazi1").style.color="#39F"; } function fnMor(){ document.getElementById("yazi1").style.color="#606"; } function fnDegistir(){ document.getElementById("yazi2").innerHTML=yazi; } function fnSola(){ document.getElementById("yazi2").style.textAlign="left"; } function fnSaga(){ document.getElementById("yazi2").style.textAlign="right"; } function fnOrtala(){ document.getElementById("yazi2").style.textAlign="center"; } function fnYasla(){ document.getElementById("yazi2").style.textAlign="justify"; } |
HTML Kodları :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!--www.bilisimmatik.com Web Tasarım ve Programlama Ozaktan Mesleki Eğitim Etkinlik 01--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Uzaktan Mesleki Eğitim Etkinlik-1 | Java Script Renk Değiştirme ve Hizlama İşlemleri</title> <link href="css/stilim.css" type="text/css" rel="stylesheet"> <script src="js/etkinlik01.js" type="text/javascript" > </script> </head> <body onLoad="baslangic()"> <div id="tasiyici"> <div id="ustResim"> <img src="resimler/banner.jpg" alt="Öğrenci Bilgi sistemi"> </div> <div id="menu" align="center"> <a href="index.html"><button>Ana Sayfa</button></a> <a href="ogrenciNot.html"><button>Öğrenci Notları</button></a> <a href="yasHesapla.html"><button>Yaş Hesaplama</button></a> <a href="hacimHesapla.html"><button>Hacim Hesaplama</button> </a> </div> <div id="icerik"> <h1>Öğrenci Bilgi sistemi Hakkında </h1> <p id="yazi1">Öğrenci bilgi sistemi pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> <button onClick="fnKirmizi()" class="kirmizi">Kırmızı</button> <button onClick="fnYesil()" class="yesil">Yeşil</button> <button onClick="fnMavi()" class="mavi">Mavi</button> <button onClick="fnMor()" class="mor">Mor</button> <hr> <h1>Öğrenci Bilgileri</h1> <p id="yazi2">Bu yazı değiştirilecektir. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> <button onClick="fnDegistir()" >İçeriği Değiştir</button> <button onClick="fnSola()" >Sola Hizala</button> <button onClick="fnOrtala()" >Ortala</button> <button onClick="fnSaga()" >Sağa Hizala</button> <button onClick="fnYasla()" >İki Yana Yasla</button> </div> </div> <div id="footer">#HayatEveSığar<br> <hr> Bilişim Teknolojileri Alanı - Web Tasarım ve Programlama Dersi<br> Uzaktan Mesleki Eğitim Çalışmaları. </div> </body> </html> |
