nejdetkadir/web_design.md

## web_design.md

      
    Raw
  

              web_design.md
            
          
    WEB DESIGN WORKSHEET

HTML dosyası oluşturduğumuzda, uzantısı .html olmalıdır. Sayfamız açıldıktan sonra, html:5 yazıp TAB tuşuna basarak, VSCODE bizim için HTML iskeletini oluşturur.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Worksheet</title>
</head>
<body>

</body>
</html>

<title>Worksheet</title>
Title elementi arasında yazılan metin, kullandığımız browser'da aşağıda bulunan yerde gözükmektedir.


Javascript dosyası oluşturduğumuzda uzantısı .js olmalıdır. Oluşturduğumuz javascript dosyasını html dosyamıza eklemek için script:src yazarak TAB tuşuna basarız. Bu sayede VSCODE bizim için javascript dosyasını HTML sayfamıza eklemek için gerekli olan aşağıdaki kod bloğunu oluşturur.
<script src=""></script>
src attribute'si, javascript dosyasının source'si, yani kaynağı, yani bulunduğu dizindir. Bizim Javascript dosyamız ve HTML dosyamız aynı dizinde olduğu için javascipt dosyamızın adını aşağıdaki gibi yazmamız yeterlidir.
<script src="app.js"></script>
Javascript'de değişken tanımlamak için var ifadesi kullanılır. Başka dillerdeki gibi değişkenin değerinin String, Integer veya Array olarak belirtmemize gerek yoktur. Javascript dilinde yorum satırı için:
// Örnek değişken tanımlaması
var ad = "Nejdet Kadir"
var yas = 22
var aileUyeleri = ["Ahmet", "Ceyda", "Nisa"]

Tek yorum satırı:
// ben tekli yorum satırıyım.

Çoklu yorum satırı:
/*
ben
çoklu
yorum
satırıyım
*/


DevTools, yani geliştirici aracını (Developer Tool) açmak için F12 tuşunu yada sitede herhangi bir yere sağ tıklayıp, incele tuşuna basarak Devtools'u açabilirsiniz.


// Ekranda bir uyarı penceresi açar, ve sadece OK butonu vardır.
alert("Ben bir alert kutusuyum")


// kullanıcıdan girdi alır, cancel ve OK butonuna sahiptir.
prompt("Adın kaç?")


var ad = prompt("Adınız ne?")
console.log(ad) // console'ye yaz
document.write(ad) // body tagları arasına yaz

// document'in, en son hangi tarihte güncellendiğini document.lastModified komutu ile öğrenebiliriz
console.log(document.lastModified) // console'ye yaz
document.write(document.lastModified) // body tagları arasına yaz

Fonksiyon olusturma
// kirmizi adında function olustur, ve bu function cağrıldığında body tagına background color: red olarak CSS stili verir
function kirmizi() {
  document.body.style.backgroundColor = "red"
}

// yesil adında function olustur, ve bu function cağrıldığında body tagına background color: green olarak CSS stili verir
function yesil() {
  document.body.style.backgroundColor = "green"
}

// reset adında function olustur, ve bu function cağrıldığında body tagına background color değerini null olarak ver, önceki verilen değeri sil
function reset() {
  document.body.style.backgroundColor = null
}

// parseInt methodu, içine aldığı string değeri, Integer'a çevirir. parseInt metodu eğer çeviremezse geriye NaN döner, yani Not a Number

var yas = parseInt(prompt("Yaşınız kaç"))

if (yas >= 18) {
  document.write("Mekana girebilirsiniz")
} else if (yas < 18) {
  document.write("Sen daha küçüksün.")
} else {
  document.write("Adam gibi sayı gir dedik.")
}

var a = 5
var b = 2

// 5'in 2 ile bölümünden kalanı verir
document.write(a % b)

// a üssü b yani 5 üssü 2 anlamına gelir
document.write(a ** b)

// a'nın değerini bir azalt, yani a değeri artık 4 olur
a--
document.write(a)

Operatörler


== eşitse
!= eşit değilse
&& ve
|| veya


var a = 5
var b = 2

if (a > b || a % 2 == 0) {
  document.write("a sayısı b'den büyük yada çift bir sayıdır")
} else {
  document.write("a sayısı ya b'den büyük değil, yada çift bir sayı değil, yada her iki durumda da olabilir")
}

var isim = "Ahmet"
var yas = 19

if (yas >= 18 && isim != "Ahmet") {
  document.write("Mekana girebilirsin")
} else {
  document.write("Mekana alınamazsın")
}

// for döngüsü
// üç aşamalıdır,
// başlama değeri,
// nereye kadar devam edeceği
// her dönmesinde, ne olacağı
// her aşama noktalı virgül ile ayrılır


for(var baslangicDegeri = 0; baslangicDegeri < 3; baslangicDegeri++) {
  document.write(baslangicDegeri + "<br>")
}

// sonsuz döngü yani koşulun sürekli sağlandığı döngülere denir
// infinite loop
for(var baslangicDegeri = 0; baslangicDegeri < 3; baslangicDegeri--) {
  document.write(baslangicDegeri + "<br>")
}

for(var baslangicDegeri = 1; baslangicDegeri <= 5; baslangicDegeri++) {
  document.write(baslangicDegeri + ") ybs<br>")
}

0 - 100 arasındaki çift sayıları yazdırır

for(var baslangicDegeri = 0; baslangicDegeri <= 100; baslangicDegeri++) {
  if (baslangicDegeri % 2 != 0) {
    document.write(baslangicDegeri + "<br>")
  }
}

for(var baslangicDegeri = 1; baslangicDegeri <= 99; baslangicDegeri+=2) {
  document.write(baslangicDegeri + "<br>")
}

for(var baslangicDegeri = 1; baslangicDegeri <= 99; baslangicDegeri+=2) {
  document.write(baslangicDegeri + "<br>")
}

// Icıne sorgu alır, yanı karsılastırma alır, bu karsılastırma true döndüğü sürece döngü dönmeye devam eder
var baslangicDegeri = 0;
while(baslangicDegeri < 3) {
  document.write(baslangicDegeri)
  baslangicDegeri++
}

var baslangicDegeri = 0
while(baslangicDegeri < 100) {
  if (baslangicDegeri % 2 == 0) {
    document.write(baslangicDegeri + "<br>")
  }

  baslangicDegeri++
}

var gunler = new Array("Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar", "TatilGünü")

console.log(gunler.length);

for(var i = 0; i < gunler.length; i++) {
  console.log(gunler[i]);
}

var a = 5
var b = 6
var c = 1

for (var i = c; i < a; i++) {
  if (i % 2 != 1) {
    document.write(c * i)
  } else {
    document.write(a * i)
  }
}