Web Tasarım

1.   Yandaki resimdeki gibi formu tasarlayıp, Aç düğmesine tıklandığında lambayı yakan, Kapat düğmesine tıklandığında lambayı sündüren javascript kodlarını yazınız. (Not: Elimizde lamba_acik.jpg ve lamba_kapali.jpg isminde 2 adet resmimiz var)

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

function degistir(){

document.getElementById(‘resim’).src=”img/lamba_acik.png”;

}

function degistir2(){

document.getElementById(‘resim’).src=”img/lamba_kapali.png”;

}

</script>

</head>

<body>

<img src=”img/lamba_kapali.png” width=”300px” id=”resim”>

<br>

<button onclick=”degistir()”>AÇ</button>

<button onclick=”degistir2()”>Kapa</button>

</body>

</html>

2. Yandaki gibi form tasarlayıp text alanına girilen sayı 1-10 arasında ise “Tebrikler geçerli değer” değilse “Girdiğiniz sayı 1-10 arasında değildir” şeklinde mesaj veren javascript kodlarını yazınız.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

function cevap() {

var say=document.getElementById(‘say’).value;

if (say<=10 && say >0) {

document.getElementById(‘mesaj’).innerHTML=”<font color=’green’>Tebrikler geçerli değer</font>”;

}

else{

document.getElementById(‘mesaj’).innerHTML=”<font color=’red’>Girdiğiniz sayı 1-10 arasında değildir.</font>”;

}

}

</script>

<style type=”text/css”>

#say{

width: 100px;

height: 15px;

</style>

</head>

<body>

1 ile 10 arasında sayı giriniz!<br><br>

<input type=”text” name=”say” id=”say”>

<button onclick=”cevap()”>Gönder</button><br>

<span id=”mesaj”></span>

</body>

</html>

3.        Aşağıdaki kodun ekran çıktısını yazınız.

Kod

Ekran Çıktısı

x = 5 + 5;

y = “5” + 5;

z = “Hello” + 5;

t = x % 3 ;

document.write(x);

document.write(y);

document.write(z);

document.write(t);

1055Hello51

4. Üzerine gelince değişen resim uygulamasını fonksiyon halinde yapınız?

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

function degistir(){

document.getElementById(‘resim’).src=”img/lale.jpg”;

}

function degistir2(){

document.getElementById(‘resim’).src=”img/pengu.jpg”;

}

</script>

</head>

<body>

<img src=”img/pengu.jpg” width=”500px” height=”250px” id=”resim” onmouseover=”degistir()” onmouseout=”degistir2()”>

</body>

</html>

5.        500px genişliğinde 250px yüksekliğinde sarı bir div oluşturarak üzerine gelindiğinde divin genişliğini 600px değiştiren programı yazınız?

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

function degistir(){

document.getElementById(‘kutu’).style.width=”600px”;

}

function degistir2(){

document.getElementById(‘kutu’).style.width=”500px”;

}

</script>

<style type=”text/css”>

#kutu {

width:500px;

height:250px;

background:yellow;

}

</style>

</head>

<body>

<div id=”kutu” onmouseover=”degistir()” onmouseout=”degistir2()”></div>

</body>

</html>

6.    Javascript For Döngüsü ile 1′den 100′e kadar olan sayıların toplamını bulan programı yazınız?

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

var toplam=0;

for(i=1;i<=100;i++){

toplam+=i;

}

document.write(“1-100 arası sayıların toplamı=”+toplam);

</script>

</head>

<body>

</body>

</html>

7.        Klavyeden 0 değeri girilene kadar, girilen tüm sayıların toplamını buldurmamızı sağlayan javascript kodlarını yazınız.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

var say;

var toplam=0;

var sayilar=””;

while (1==1)

{

say=Number(prompt(“Değer Giriniz”));

if(say!=0)

{

sayilar=sayilar+say+”,”;//girilen sayıları değişkene atıyoruz

toplam=toplam+say;

}

else{

sayilar=sayilar+say;

break;

}

}

document.write(“Girilen Sayılar:”+sayilar+”<br>”);

document.write(“Toplamları:”+toplam);

</script>

</head>

<body>

</body>

</html>

8.        Her  5  saniyede bir “Hoş Geldiniz” şeklinde mesaj veren javascript kodlarını yazınız.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type=”text/javascript”>

setInterval(function (){

alert(“Hoş Geldiniz”);},5000);

</script>

</head>

<body>

</body>

</html>

9. (Ön Bilgi javascriptte random sayı oluşturmak için Math.random() fonksiyonu kulanılır.

var sayi1=Math.random();

komutu 0-1 arası ondalıklı sayı üretir.

Ben bu üretilen sayısı herhangi bir sayı ile çarpıp yuvarladığımda (Math.round ile) 0 ile çartığım sayı arasında random tam sayı üretirim.

var rastgelesayi=Math.round(sayi1*50);

Komutu 0-50 arası sayı üretir. )

Bu bilgilere göre 50 adet random sayı üreten javascript fonksiyonunu yazınız.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<span id=”mesaj”></span>

<script type=”text/javascript”>

var i;

var sayilar=””;

for(i=1;i<=50;i++)

{

var s1=Math.random();

var rsay=Math.round(s1*50);

sayilar=sayilar+rsay+”,”;

}

document.getElementById(“mesaj”).innerHTML=”Tutulan Sayılar=”+sayilar;

</script>

</body>

</html>

Etiketler:         

Bir Yorum Bırakın