11 Eylül 2017 Pazartesi

JavaScript Var / Let / Const


Merhaba, bu yazımızda JavaScriptde var, let , const farkını inceleyeceğiz. ES6'dan önce değişkenlerimizi var ile tanımlıyorduk. ES6 ile birlikte let ve const kavramları geldi.

Özetle var ile önceden bir değişken tanımladıktan sonra aynı isimle birdaha değişken tanımlarsak JavaScriptde hata almıyoruz. 

Örneğin;

var ad="Oguzhan";
var ad="Cevik";

Aynı şekilde bir değişkeni const ile tanımlayıp sonra o değişkene yeni bir değer verdiğimizde hata alırız.

Örneğin;

const ad = "Oguzhan";
ad = "Cevik"; // TypeError: Assignment to constant variable.

Son olarak let ile tanımladığımızda bir değişkeni sonradan başka bir değer girilmesine izin veririz.

Örneğin;

let ad = "Oguzhan";
ad = "Cevik";

8 Eylül 2017 Cuma

JavaScript Canvas Click Event



Merhaba, daha önceki yazımda JavaScript'de Canvası görmüştürk. Bu yazımda ise canvas üzerindeki eventlardan bir tanesini inceleyeceğiz. Canvas üzerinde click eventi olduğunda canvas üzerine daireler çizdireceğim.


Örneğin;


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid;">
Bu browser canvası desteklemiyor!
</canvas>
<script>
var canvas1=document.getElementById("canvas1");
var cizim=canvas1.getContext("2d");
canvas1.addEventListener('click',function(e){
cizim.beginPath();
cizim.arc(e.x,e.y,50,0,2*Math.PI);
cizim.stroke();
}
);
</script>
</body>
</html>


Ekran Çıktısı;

7 Eylül 2017 Perşembe

JavaScript Canvas


Merhaba, bu yazımızda JavaScript'de Canvas oluşturmayı göreceğiz. Canvas'lar sayfamızda çizim alanları oluşturmamıza yarar.

Örneğin;

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid;">
Bu browser canvası desteklemiyor!
</canvas>
<script>
var canvas1=document.getElementById("canvas1");
var cizim=canvas1.getContext("2d");