HTML5 yenilikler

by Mustafa Şadoğlu 27/09/2015 | 12:37 0 Posted in HTML5 CSS3 ve JQUERY, HTML5 yenilikler

HTML5 yenilikler ve değişiklikler

Formlar ve meter komutu

<!doctype html>

<html>

<head>

</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”>=

<p>

Meter dediğimiz yeni bir etiketi inceliyoruz<br>

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

<br>

<br>

</body>

</html>

Progress etiketi

<!doctype html>

<html>

<head>

function tikla(deger)

{

var num=parseInt(deger);

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

}

</script>

</head>

<body>

yükleniyor gibi durum bildirmeye yarayan hareketli bar…

</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>

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

</head>

<body>

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

<br>

zorunlu alanları yapmak için

required kullanıyoruz

<br>

<form>

</form>

<br>

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

<br>

<form>

</form>

<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>

</form>

<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>

</form>

<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>

</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>

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>

<br>

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

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

<br>

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

<label>tarih seçiniz</label>

<br>

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

<label>email giriniz</label>

<br>

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

<label>url giriniz</label>

</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>

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>

</script>

</head>

<body>

</video>

<br>

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

</video>

</body>

</html>

Poster

Videoya başlangıç resmi yüklemeye yarar

<!doctype html>

<html>

<head>

</head>

<body>

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

</video>

</body>

</html>

Preload

Video yükleninceye kadar video hakkında bilgi verir

Geolocation komutu

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

<!doctype html>

<html>

<head>

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>

</html>

Geolocation ile bir seferlik konum bilgisi okumak

<!doctype html>

<html>

<head>

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>

</html>

Geolocation bilgisini sürekli okumak

<!doctype html>

<html>

<head>

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>

</html>

CANVAS kullanımı

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

<!doctype html>

<html>

<head>

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

{

alert(“destekleniyor”);

}

</script>

</head>

<body>

</body>

</html>

Canvas diktörtgen çizimi

<!doctype html>

<html>

<head>

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>

<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>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

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>

<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>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

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>

<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>

<style>

canvas{

border:thick #03F solid;

background-color:#E3E3E3;

}

</style>

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>

<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>

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>

<br>

<br>

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

</body>

</html>

Web storage ile kaydedilen verileri silme

<!doctype html>

<html>

<head>

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>

<br>

<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>

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>

<br>

<br>

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

<br>

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

<br>

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

<br>

</body>

</html>

Yazar: Mustafa Şadoğlu

Mustafa sitemizde 111 yazı eklemiş...

Post Views: 630

Bilişimcilerin Otağı

HTML5 yenilikler

HTML5 yenilikler ve değişiklikler

Formlar ve meter komutu

Progress etiketi

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)

Yeni eklenen form öğeleri

Range –

Color

url

Date

Email

Audio ve video etiketlerinin kullanımı

Videoyu sayfaya yükleme

controls

autoplay

loop

Poster

Preload

Geolocation komutu

Geolocation ile bir seferlik konum bilgisi okumak

Geolocation bilgisini sürekli okumak

CANVAS kullanımı

Canvas diktörtgen çizimi

Canvas ile serbest çizim yapmak

Gradient kullanımı

Canvas içerisinde resmi background olarak kullanma (createPattern)

Web storage

Webstorage ile veri kaydetme

Web storage ile kaydedilen verileri silme

Web storge içerisine kaydedilen bilgileri okuma

Yazar: Mustafa Şadoğlu

About Author

Mustafa Şadoğlu

HTML5 yenilikler ve değişiklikler

Formlar ve meter komutu

Progress etiketi

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)

Yeni eklenen form öğeleri

Range –

Color

url

Date

Email

Audio ve video etiketlerinin kullanımı

Videoyu sayfaya yükleme

controls

autoplay

loop

Poster

Preload

Geolocation komutu

Geolocation ile bir seferlik konum bilgisi okumak

Geolocation bilgisini sürekli okumak

CANVAS kullanımı

Canvas diktörtgen çizimi

Canvas ile serbest çizim yapmak

Gradient kullanımı

Canvas içerisinde resmi background olarak kullanma (createPattern)

Web storage

Webstorage ile veri kaydetme

Web storage ile kaydedilen verileri silme

Web storge içerisine kaydedilen bilgileri okuma

Yazar: Mustafa Şadoğlu

Related Posts

About Author

Mustafa Şadoğlu