HTML5 yenilikler

HTML5 yenilikler ve değişikliklerhtml5

Formlar ve meter komutu

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders1</title>

</head>

 

<body>

toplama yapan basit hesap makinesi<br>

 

<form onSubmit=”return false”

oninput=”out.value=parseInt(a.value)+parseInt(b.value)”>

<input type=”number” name=”a” step=”any”>+

<input type=”number” name=”b” step=”any”>=

<output name=”out”></output>

<p>

Meter dediğimiz yeni bir etiketi inceliyoruz<br>

bu da istediğimiz aralıkta durum bildiren bir bar oluşturmayı sağlıyor.

<meter value=”50″ min=”0″ max=”100″></meter>

<br>

<meter value=”90″ min=”0″ max=”100″ low=”30″ high=”70″></meter>

<br>

<meter value=”10″ min=”0″ max=”100″ low=”30″ high=”70″ optimum=”100″></meter>

 

</body>

</html>

Progress etiketi

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders2</title>

<script>

function tikla(deger)

{

var num=parseInt(deger);

document.getElementById(“pg”).value=num;

}

</script>

</head>

 

<body>

yükleniyor gibi durum bildirmeye yarayan hareketli bar…

<input type=”text” id=”txt”>

<input type=”button” value=”Değiştir” onClick=”tikla(txt.value)”>

<progress id=”pg” max=”100″></progress>

</body>

</html>

Placeholder (yer tutucu) – required  (zorunlu alan) – autofocus (otomatik seçili olma) – pattern (girilecek karakter tipini belirleme) – maxlenght (maximum karakter sayısını belirleme) –autocomplete (otomatik doldurma)

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>placeholder-required-autofocus-pattern</title>

</head>

 

<body>

yer tutucu kullanmak için “placeholder” kullanıyoruz<br>

 

<input type=”text” placeholder=”Adınızı giriniz”>

<input type=”text” placeholder=”15.03.1999″>

<br>

 

zorunlu alanları yapmak için

<br><br>

required kullanıyoruz

<br>

 

<form>

<input type=”text” required>

<input type=”submit” value=”yolla”>

</form>

<br>

<br>

autofocus ile form alanındaki öğeyi sayfa yüklendiğinde seçili hale getiriyoruz.

<br>

<form>

<input type=”text” required>

<input type=”text” required>

<input type=”text” required autofocus>

<input type=”submit” value=”yolla”>

</form>

<br>

<br>

pattern etiketi ile text alanına doğru tipte veri girilmesini sağlıyoruz-zorluyoruz.

<br>

pattern ni kullanırken karakter sayısını belirtmezsek 1 karakter kullanabiliyor<br>

{}ile kaç karakterlik bilgi girileceğini belirtiyoruz.

<form>

<input type=”text” pattern=”[a-z]” placeholder=”a-z ye tek karakter giriniz”>

<input type=”text” pattern=”[a-z]{5}” placeholder=”a-z ye 5 karakter giriniz”>

<input type=”text” pattern=”[0-9]{3}” placeholder=”0-9 arası 3 karakter giriniz”>

<input type=”submit” value=”yolla”>

</form>

<br>

<br>

maxlenght ile maximum girilebilecek karakter sayısını belirtiyoruz.<br>

3 yazarsak ilgili text alanına 3 karakterden fazla giriş yapılmasına imkan tanımaz.<br>

<form>

<input type=”text” maxlength=”3″>

<input type=”submit” value=”yolla”>

</form>

<br>

<br>

birde autocomlete komutumuz var… <br>

bu komut ile text alanının daha önceden girilmiş bilgilerle otomatik doldurulmasını sağlayabiliriz<br>

on-off-default değerlerini alır<br>

çalışması için id değerinin verilmesi gerekir.<br>

<form>

<input type=”text” autocomplete=”on” id=”dene”>

<input type=”submit” value=”yolla”>

</form>

</body>

</html>

Yeni eklenen form öğeleri

Range –

Bu komut sayesinde bar üzerinde sağa sola kaydırmalar yaparak değerler üretebiliyoruz.

Color

Bu komut sayesinde renk sıkalasını ekrana gösterip kullanıcıdan seçim yapmasını bekliyoruz

url

geçerli bir alan adı girilmesini kontrol eder.

Date

Tarih seçimini otomatik yaptırabilirsiniz

Email

Geçerli email kontrolü yapacaktır

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders4</title>

<script>

function RangeChange()

{

var count=document.getElementById(“puan”).value;

document.getElementById(“rangeCount”).innerHTML= “Min:”+puan.min+” – Max:”+puan.max+” ->”+count;

//                           document.getElementById(“rangeCount”).innerHTML=count;

}

function ColorChange()

{

var color=document.getElementById(“renk”).value;

out.value=color;

}

</script>

</head>

 

<body>

Form yapısında range kullanımı<br>

 

<form>

<input type=”range” id=”puan” name=”puan” min=”0″ max=”10″ step=”1″ value=”6″ onChange=”RangeChange();”>

<label id=”rangeCount”>min:0 – max:10</label>

<br>

<br>

Form yapısında color kullanımı<br>

<label>en sevdiğiniz renk</label>

<input id=”renk” name=”renk” type=”color” onChange=”ColorChange();”>

<output id=”out”></output>

<br>

Form yapısında date kullanımı<br>

<label>tarih seçiniz</label>

<input type=”date” name=”tarih”>

<br>

Form yapısında email kullanımı<br>

<label>email giriniz</label>

<input type=”email” name=”tarih”>

<br>

Form yapısında url kullanımı<br>

<label>url giriniz</label>

<input type=”url” id=”url”>

<input type=”submit”>

</form>

</body>

</html>

Audio ve video etiketlerinin kullanımı

Aşağıdaki komut satırı bize browser da (tarayıcı da) video ve audio desteğinin olup olmadığını gösterir

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders5</title>

<script>

if (“canPlayType” in document.createElement(“video”))

{

alert(“video desteği var”);

}

else

{

alert(“video desteği YOKKKK”);

}

if (“canPlayType” in document.createElement(“audio”))

{

alert(“audio desteği var”);

}

else

{

alert(“audio desteği YOKKKK”);

}

</script>

</head>

 

<body>

Video kontrolü yapıyoruz

</body>

</html>

Videoyu  sayfaya yükleme

Yapmamız gereken tek şey video etiketini kullanmak.

controls

Burada “controls” kontrol düğmelerinin yüklenmesini sağlar

autoplay

“autoplay” de sayfa yüklendiğinde otomatik oynatmayı sağlar.

loop

Loop deyimide tekrar başa sarmasını sağlayabiliriz

Browser tiplerine göre desteklenen video uzantılarını eklemek için aşağıdaki örneği kullanabiliriz

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders5</title>

<script>

 

</script>

</head>

 

<body>

<video src=”videolar/bisiklet.mp4″ controls >

</video>

<br>

videoları her browserda desteklendiğini garantilemek için alternatif uzantılarla yükleme yapabiliriz

<video >

<source src=”videolar/bisiklet.mp4″ />

<source src=”videolar/bisiklet.flv” />

<source src=”videolar/bisiklet.f4v” />

</video>

</body>

</html>

Poster

Videoya başlangıç resmi yüklemeye yarar

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders5</title>

</head>

<body>

video resmini göstermek için poster komutunu kullanıyoruz

<video src=”videolar/bisiklet.mp4″ controls poster=”resimler/telefon.jpg” >

</video>

</body>

</html>

Preload

Video yükleninceye kadar video hakkında bilgi verir

<video src=”videolar/bisiklet.mp4″ controls poster=”resimler/telefon.jpg”  preload=”auto”>

Geolocation komutu

Browserın Geolocation desteğinin olup olmadığını anlamak için gereken javascript kodu

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders6</title>

<script>

function GeoControl()

{

if (navigator.geolocation)

{

var o=document.querySelector(“output”);

o.value=”Geo desteği var”;

}

else

{

var o=document.querySelector(“output”);

o.value=”Geo desteği YOKKKK”;

}

}

</script>

</head>

 

<body onLoad=”GeoControl()”>

<output id=”out”></output>

</body>

</html>

 

 

 

 

Geolocation ile bir seferlik konum bilgisi okumak

 

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders6</title>

<script>

function GeoControl()

{

var o=document.querySelector(“output”);

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition

(

successCallback,

errorCallback,

{

enableHighAccuracy:true,

timeout:15000,

maximumAge:0

}

)

}

else

{

o.value=”Geo desteği YOKKKK”;

}

}

function successCallback(geo)

{

var out=document.querySelector(“output”);

out.value+=” Enlem: “+geo.coords.latitude;

out.value+=” Boylam: “+geo.coords.longitude;

}

function errorCallback(error)

{

switch (error.code)

{

case error.PERMISSION_DENIED:

alert(“kullanıcı izin vermedi”)    ;

break;

 

}

}

</script>

</head>

 

<body onLoad=”GeoControl()”>

<output id=”out”></output>

</body>

</html>

Geolocation bilgisini sürekli okumak

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders6</title>

<script>

function GeoControl()

{

var o=document.querySelector(“output”);

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition

(

successCallback,

errorCallback,

{

enableHighAccuracy:true,

timeout:15000,

maximumAge:0

}

)

navigator.geolocation.watchPosition

(

successCallback,

errorCallback,

{

enableHighAccuracy:true,

timeout:15000,

maximumAge:0

}

)

}

else

{

o.value=”Geo desteği YOKKKK”;

}

}

function successCallback(geo)

{

var out=document.querySelector(“output”);

out.value+=” Enlem: “+geo.coords.latitude;

out.value+=” Boylam: “+geo.coords.longitude;

}

function errorCallback(error)

{

switch (error.code)

{

case error.PERMISSION_DENIED:

alert(“kullanıcı izin vermedi”)    ;

break;

 

}

}

</script>

</head>

 

<body onLoad=”GeoControl()”>

<output id=”out”></output>

</body>

</html>

CANVAS kullanımı

Canvas desteğinin olup olmadığını kontrol eden kod

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders7</title>

<script>

if(document.createElement(“canvas”).getContext)

{

alert(“destekleniyor”);

}

</script>

</head>

 

<body>

</body>

</html>

 

Canvas diktörtgen çizimi

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders7</title>

<script>

function DortgenCiz()

{

var c=document.getElementById(“cnv”);

var context = c.getContext(“2d”);

// x,y,width,height

context.rect(150,50,200,100);

//zemin rengi

context.fillStyle=”#8ED6FF”;

//dolgu yaptırıyoruz

context.fill();

 

//kenar çizgisi kalınlığı

context.lineWidth=4;

//rengi

context.strokeStyle=”black”;

// şimdide kenar çizgilerini çizdiriyoruz

context.stroke();

 

 

}

</script>

</head>

 

<body>

<canvas id=”cnv” width=”500″ height=”400″></canvas>

<br>

<button onClick=”DortgenCiz()”>dörtgen çiz</button>

</body>

</html>

Canvas ile serbest çizim yapmak

Move to yeni bir başlangıç  için kullanılır

Lineto başlayan noktadan belirtilen noktaya düz çizgi çeker

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders7</title>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

<script>

function DortgenCiz()

{

var c=document.getElementById(“cnv”);

var context = c.getContext(“2d”);

// x,y,width,height

context.rect(150,50,200,100);

//zemin rengi

context.fillStyle=”#8ED6FF”;

//dolgu yaptırıyoruz

context.fill();

 

//kenar çizgisi kalınlığı

context.lineWidth=4;

//rengi

context.strokeStyle=”black”;

// şimdide kenar çizgilerini çizdiriyoruz

context.stroke();

}

function SerbestCiz()

{

var c = document.getElementById(“cnv”);

var con=c.getContext(“2d”);

 

// yeni bir çizime balayıp, önceki ile bağı koparmak için beginPath kullanılır

con.beginPath();

con.moveTo(100,150);

con.lineTo(450,50);

//çizgi kalınlığı

con.lineWidth=4;

//artık çizdiriyoruz

con.stroke();

 

 

//yeni bir çizim

con.beginPath();

con.moveTo(200,250);

con.lineTo(100,300);

//çizgi kalınlığı

con.lineWidth=10;

//artık çizdiriyoruz

con.stroke();

}

</script>

</head>

 

<body>

<canvas id=”cnv” width=”500″ height=”400″></canvas>

<br>

<button onClick=”DortgenCiz()”>dörtgen çiz</button>

<br>

<button onClick=”SerbestCiz()”>serbest çiz</button>

</body>

</html>

Gradient kullanımı

Bu işlem sayesinde renk geçişleri sağlayabileceğiz

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders7</title>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

<script>

function DortgenCiz()

{

var c=document.getElementById(“cnv”);

var context = c.getContext(“2d”);

// x,y,width,height

context.rect(150,50,200,100);

//zemin rengi

context.fillStyle=”#8ED6FF”;

//dolgu yaptırıyoruz

context.fill();

 

//kenar çizgisi kalınlığı

context.lineWidth=4;

//rengi

context.strokeStyle=”black”;

// şimdide kenar çizgilerini çizdiriyoruz

context.stroke();

}

function SerbestCiz()

{

var c = document.getElementById(“cnv”);

var con=c.getContext(“2d”);

 

// yeni bir çizime balayıp, önceki ile bağı koparmak için beginPath kullanılır

con.beginPath();

con.moveTo(100,150);

con.lineTo(450,50);

//çizgi kalınlığı

con.lineWidth=4;

//artık çizdiriyoruz

con.stroke();

 

 

//yeni bir çizim

con.beginPath();

con.moveTo(200,250);

con.lineTo(100,300);

//çizgi kalınlığı

con.lineWidth=10;

//artık çizdiriyoruz

con.stroke();

}

function Gradient()

{

var c=document.getElementById(“cnv”);

var con=c.getContext(“2d”);

 

con.beginPath();

con.rect(200,100,200,200);

//con.fillStyle=”#8ed6ff”;

//con.fill();

 

// gradient alanı oluşturuyoruz

var grd=con.createLinearGradient(0,0,400,400);

//renkleri belirliyoruz

//1. renk

grd.addColorStop(0,”#8ed6ff”);

//2. renk

grd.addColorStop(1,”#004cb3″);

//

con.fillStyle=grd;

con.fill();

// kenar çizgisi

con.lineWidth=4;

con.strokeStyle=”blue”;

con.stroke();

 

}

</script>

</head>

 

<body>

<canvas id=”cnv” width=”500″ height=”400″></canvas>

<br>

<button onClick=”DortgenCiz()”>dörtgen çiz</button>

<br>

<button onClick=”SerbestCiz()”>serbest çiz</button>

<br>

<button onClick=”Gradient()”>Gradient olusturz</button>

</body>

</html>

Canvas içerisinde resmi background olarak kullanma (createPattern)

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders7</title>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

<script>

function DortgenCiz()

{

var c=document.getElementById(“cnv”);

var context = c.getContext(“2d”);

// x,y,width,height

context.rect(150,50,200,100);

//zemin rengi

context.fillStyle=”#8ED6FF”;

//dolgu yaptırıyoruz

context.fill();

 

//kenar çizgisi kalınlığı

context.lineWidth=4;

//rengi

context.strokeStyle=”black”;

// şimdide kenar çizgilerini çizdiriyoruz

context.stroke();

}

function SerbestCiz()

{

var c = document.getElementById(“cnv”);

var con=c.getContext(“2d”);

 

// yeni bir çizime balayıp, önceki ile bağı koparmak için beginPath kullanılır

con.beginPath();

con.moveTo(100,150);

con.lineTo(450,50);

//çizgi kalınlığı

con.lineWidth=4;

//artık çizdiriyoruz

con.stroke();

 

 

//yeni bir çizim

con.beginPath();

con.moveTo(200,250);

con.lineTo(100,300);

//çizgi kalınlığı

con.lineWidth=10;

//artık çizdiriyoruz

con.stroke();

}

function Gradient()

{

var c=document.getElementById(“cnv”);

var con=c.getContext(“2d”);

 

con.beginPath();

con.rect(200,100,200,200);

//con.fillStyle=”#8ed6ff”;

//con.fill();

 

// gradient alanı oluşturuyoruz

var grd=con.createLinearGradient(0,0,400,400);

//renkleri belirliyoruz

//1. renk

grd.addColorStop(0,”#8ed6ff”);

//2. renk

grd.addColorStop(1,”#004cb3″);

//

con.fillStyle=grd;

con.fill();

// kenar çizgisi

con.lineWidth=4;

con.strokeStyle=”blue”;

con.stroke();

 

}

function PatternCreate()

{

var c=document.getElementById(“cnv”);

var con=c.getContext(“2d”);

bg=new Image();

bg.src=”resimler/zemin.jpg”;

bg.onload=function()

{

var pattern=con.createPattern(bg,”repeat”);

con.fillStyle=pattern;

con.fillRect(30,50,200,200);

};

}

</script>

</head>

 

<body>

<canvas id=”cnv” width=”500″ height=”400″></canvas>

<br>

<button onClick=”DortgenCiz()”>dörtgen çiz</button>

<br>

<button onClick=”SerbestCiz()”>serbest çiz</button>

<br>

<button onClick=”Gradient()”>Gradient olusturz</button>

<br>

<button onClick=”PatternCreate()”>PatternCreate -zemine resim</button>

</body>

</html>

Web storage

Webstorage ile kullanıcının browser ında bilgi depolayabileceğiz…

İki türlüdür… local storage uzun süre saklanır, session storage ise oturum sonlandığında silinir.

Aşağıdaki uygulama ile iki tane text alanı içine verileri kaydedeceğiz…. Birinci alan değişken adı, diğeri değişken değeri olacak…

Aşağıdaki uygulama çalıştırıp birinci kutucuğa “ad”, ikinci kutucuğa “ali” girerseniz bu bilgilerin hem localstorage de hemde sessionstorage te tutulduğunu görebilirsiniz.

Tutulan verileri chrome da görebilmek için “diğer araçlar” -> “geliştirici araçları” -> “resource” sekmesinden -> “localstorage” veya “sessionstorage “ tıklayarak verilere ulaşabilirsiniz.

Webstorage ile veri kaydetme

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders8</title>

<script>

function AddItem(p,v)

{

//localStorage.setItem(“anahtar key”,”değeri”);

localStorage.setItem(p,v);

sessionStorage.setItem(p,v);

 

// bu yollada dizi olarak yapabiliriz

//localStorage[“ad”]=”ersin”;

//localStorage[p]=v;

//sessionStorage[p]=v;

 

}

</script>

</head>

 

<body>

<input type=”text” id=”param” name=”param” placeholder=”parametre ismini giriniz”>

<br>

<input type=”text” id=”val” name=”val” placeholder=”değişkenin değeri”>

<br>

<button onClick=”AddItem(param.value,val.value)”>verileri kaydet</button>

</body>

</html>

 

Web storage ile kaydedilen verileri silme

 

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders8</title>

<script>

function AddItem(p,v)

{

//localStorage.setItem(“anahtar key”,”değeri”);

localStorage.setItem(p,v);

sessionStorage.setItem(p,v);

 

// bu yollada dizi olarak yapabiliriz

//localStorage[“ad”]=”ersin”;

//localStorage[p]=v;

//sessionStorage[p]=v;

 

}

function RemoveItem(p)

{

//localStorage.removeItem(p);

//sessionStorage.removeItem(p);

 

//başka bir yontem

// delete localStorage[p];

//silmek için boş değer atayabiliriz.

//localStorage.ad=null;

 

//başka şekilde

//localStorage

 

//delete localStorage.ad;

 

// domaine ait tüm verileri silmek için

localStorage.clear();

sessionStorage.clear();

}

</script>

</head>

 

<body>

<input type=”text” id=”param” name=”param” placeholder=”parametre ismini giriniz”>

<br>

<input type=”text” id=”val” name=”val” placeholder=”değişkenin değeri”>

<br>

<button onClick=”AddItem(param.value,val.value)”>verileri kaydet</button>

<br>

<button onClick=”RemoveItem(param.value)”>seçilen verileri sil</button>

</body>

</html>

Web storge içerisine kaydedilen bilgileri okuma

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>html5_ders8</title>

<script>

function AddItem(p,v)

{

//localStorage.setItem(“anahtar key”,”değeri”);

localStorage.setItem(p,v);

sessionStorage.setItem(p,v);

 

// bu yollada dizi olarak yapabiliriz

//localStorage[“ad”]=”ersin”;

//localStorage[p]=v;

//sessionStorage[p]=v;

 

}

function RemoveItem(p)

{

//localStorage.removeItem(p);

//sessionStorage.removeItem(p);

 

//başka bir yontem

// delete localStorage[p];

//silmek için boş değer atayabiliriz.

//localStorage.ad=null;

 

//başka şekilde

//localStorage

 

//delete localStorage.ad;

 

// domaine ait tüm verileri silmek için

localStorage.clear();

sessionStorage.clear();

}

function GetItem(p)

{

var lbl=document.getElementById(“lbl”);

lbl.innerHTML+=localStorage.getItem(p)+”<br>”;

lbl.innerHTML+=sessionStorage.getItem(p);

}

</script>

</head>

 

<body>

<input type=”text” id=”param” name=”param” placeholder=”parametre ismini giriniz”>

<br>

<input type=”text” id=”val” name=”val” placeholder=”değişkenin değeri”>

<br>

<button onClick=”AddItem(param.value,val.value)”>verileri kaydet</button>

<br>

<button onClick=”RemoveItem(param.value)”>seçilen verileri sil</button>

<br><br>

<br>

 

<button onClick=”GetItem(param.value)”>veriyi oku</button>

<br>

<label id=”lbl”>…</label>

</body>

</html>

Yazar: Mustafa Şadoğlu

Mustafa sitemizde 103 yazı eklemiş...

Share