Merhaba arkadaşlar  bu yazımda javascript ile ilgili temel işlevleri   toplayacağım. Bu yazının amacı  javascript ile işlemler yaparken unuttuğum kod yapıları  olursa dönüp bakabileceğim  ve sizlere de hap bilgi şeklinde sunulabilecek bir içerik olmasıdır.

JavaScript Programlama Dili ve Temelleri-1

Merhaba arkadaşlar bu yazımda javascript ile ilgili temel işlevleri toplayacağım. Bu yazının amacı javascript ile işlemler yaparken unuttuğum kod yapıları olursa dönüp bakabileceğim ve sizlere de hap bilgi şeklinde sunulabilecek bir içerik olmasıdır.

JavaScript, web sayfalarında karmaşık işlemleri uygulamanıza izin veren bir programlama dilidir . Bir web sayfası, yalnızca size statik bilgileri gösterir . Zamanında içerik güncellemelerini veya etkileşimli haritaları veya animasyonlu 2D / 3D grafikler veya kaydırma işlemlerini javascriptle yapılabilir. Aşağıdaki kodda ekrana yazı yazdırma, console ekranına yazı yazdırma gibi temel işlemler yapılmıştır. Kodların yanında yorum satırı şeklinde işlevi ile ilgili bilgiler verilmeye çalışılmıştır.

<!DOCTYPE html>
<html>
<head>
	<title> Java Script Notları</title>


	<script type="text/javascript">

	var e="javascript notları";

	//Merhaba bu yorum satırı CTRL+SHIFT İle yapıyorum
	/*CTRL+SHIFT+7 İLE ok satırlı yorum satırı yapıyorum*/
	alert("DENEME  CTRL+SHIFT+R İLE OTOMATİK SAYFA YENİLEMESİ YAPIYORUM");

	document.write("Deneme");  //Ekrana yazdırma

	console.log(e);  //Console ekranına yazı yazdırma

	document.write("DENEME EKRANI");

	console.log("Değişkenin türünü göster:"+typeof(e));

	var sayi1=23;
	var sayi2=343;
	var toplam=parseInt(sayi1)+parseInt(sayi2);  //Toplama için integer türüne çevirme işlemi

	console.log("Sayilarin toplamı:"+toplam);



	function toplama(){
		var a=1000;
		var b=3;
		c=a+b;
		return "\n"+c;
	}
	document.write(toplama());	
	document.write("<br>Fonksiyon içerisindeki değişkenen dışarıdan ulaşılamaz //A ve b deişkenine ulaşamıyorum");

	for (var i = 100; i >= 0; i--) {

		if(0==i%10){
			document.write("<br>"+i);
			document.write(" 10 bölünüyorsun");
		}
		console.log(i);
	}

</script>

</head>

</body>
</html>

Javascript ile döngü işlemleri diğer programlama dilleri ile neredeyse aynıdır. For döngüsü, for in döngüsü, do while ve while döngüleri bulunmaktadır. Hata yönetimi için try catch finally kullanılmaktadır. Kendi hata bloklarımızı oluşturmak için throw kullanılır. Aşağıda kod parçacığında gösterilmiştir.

<!DOCTYPE html>
<html>
 <head>
	<title>Donguler ve Hata yönetimi</title>

<script type="text/javascript">
	
    var dizi={a:"1",b:"2",c:"3",d:"4"};

	for(key in dizi){
		document.writeln(dizi[key]+":");
		document.writeln(key);
	}

	var i,j;
	for(i=1; i<=9;  i++){
		for(j=1;j<=9;j++){
			 console.log(i+"x"+j+"="+i*j); //Çarpım Tablosu yapımı
		}
	}


	try{
		var a="<br>A değişkenş olmasa catch kısmına girer";
		document.writeln(a);
	}catch(error){
		document.writeln("<br>A diye bir değişken olmadığı için catch kısmı çalıştı"+error+" hatası ");
	}finally{
		document.writeln("<br>Her koşulda finally çalışır..");
	}


	var temp=1;
	var temp1=2;

	try{
		if(temp<temp1){
			throw "buyuk";  //Kendi hata bloklarımızı oluşturmaya yarar...
		}
		document.writeln("a:"+a+" b:"+ b);
	}catch(error){
		if(error=="buyuk"){
			document.writeln("temp1 temp değişkeninden büyük olduğu için bura çalışır...");
		}
	}

</script>

</head>
<body>

</body>
</html>

Diziler programlamada sıkça kullanıllan işlemlerdir. Tek boyutlu ve çok boyutlu dizi şeklinde tanımlanabilirler. Diziler üzerinde javascript içerisinde hazır olarak bulunan bazı fonksiyonlar vardır. Bunlar indexof, join, concat, delete, slice vb... gibi birçk fonksiyon bulunmaktadır.Aşağıdaki kod parçacığında bunlardan bazılarına çıktıları ile birlikte yer verilmeye çalışılmıştır.

<!DOCTYPE html>
<html>
<head>
	<title> Dizi İşlemleri</title>

	<script type="text/javascript">
	
	var dizi= new Array("Php","Html","Python","Java","javascript","1",1,2,3);


	document.write(dizi[2]); //Python yazar.

	//For kullanarak yazdırma işlemi
	for(var i=0; i<dizi.length; i++){
		document.write("<br>"+dizi[i]); //Tüm diziyi yazar
	}

	//For in Kullanımı
	for(var key in dizi){
		console.log(dizi[key]); //Tüm diziyi yazar 
	}


	//Çok boyutlu dizi tanımlama 

	var icicedizi=new Array("Php","Python","Java");
	var kurs=new Array(3);

	for(var i=0;i<3;i++){
		icicedizi[i]=new Array(3);
	}

	icicedizi[0][0]="Ertuğrul Deniz";
	icicedizi[0][1]="10 saat";
	icicedizi[0][2]="Youtube";

	icicedizi[1][0]="Jone Stemp";
	//.... devam ediyor

	//Diziye Ulaşma işlemii
	//Dizide tanımlanmayan icicedizi[1][2] gibi yerlerde undefined yazar ;
	for(var i=0; i<3;i++){
		document.writeln("<br>"+icicedizi[i]+"<br>");
		for(var j=0; j<3;j++){
			document.writeln(icicedizi[i][j]+"<br>"); 
		}
	}

	document.write("<br>");
	//DİZİ FONKSİYONLARI

	var dizifonk= new Array("Php","Html","Python","Java","javascript","1",1,24,3,"Elma",23);
	
	document.write(dizifonk.toString()+"<br>"); //Tostring virgüller ile diziyi ayırır.
	//Çıktı : Php,Html,Python,Java,javascript,1,1,24,3,Elma,23

	konum=dizifonk.indexOf("Java"); //Dizi içerisindeki elemanın konumunu veriyor;
	document.write(konum+"<br>");
	//Çıktı:3


	document.write(dizifonk.join("*")+"<br>"); //Join ayırıcıyı kendimiz belirtebiliyoruz...
    //Çıktı : Php*Html*Python*Java*javascript*1*1*24*3*Elma*23

    dizifonk.pop(); //Sonda bulunan 23 kaldırdı
	document.write(dizifonk.toString()+"<br>"); //Dizinin son öğesini kaldırır...
	//Çıktı : Php,Html,Python,Java,javascript,1,1,24,3,Elma

	dizifonk.push("Buyaziyiekle"); //Dizi sonuna eleman eklendi
	document.write(dizifonk.toString()+"<br>"); 
	//Çıktı : Php,Html,Python,Java,javascript,1,1,24,3,Elma,Buyaziyiekle

	dizifonk.shift(); //Dizinin ilk öğesini kaldırır.
	document.write(dizifonk.toString()+"<br>");
	//Çıktı : Html,Python,Java,javascript,1,1,24,3,Elma,Buyaziyiekle

    dizifonk.unshift("Basaekle"); //Dizinin başına öğe ekler.
	document.write(dizifonk.toString()+"<br>");
	//Çıktı : Basaekle,Html,Python,Java,javascript,1,1,24,3,Elma,Buyaziyiekle

	dizifonk.reverse(); //Diziyi tersine çevirir.
	document.write(dizifonk.toString()+"<br>");
	//Çıktı: Buyaziyiekle,Elma,3,24,1,1,javascript,Java,Python,Html,BasaekleBuyaziyiekle,Elma,3,,1,1,javascript,Java,Python,Html,Basaekle

	dizifonk.sort(); //Diziyi sıralar. Rakamlar ascıı koduna göre sıralanır
	document.write(dizifonk.toString()+"<br>");


	delete dizifonk[3]; //Diziden verilen indisdeki değeri siler. Delete işleminde indis de değerle beraber silinir.
	document.write(dizifonk.toString()+"<br>");
	//Çıktı : Basaekle,Html,Python,javascript,1,1,24,3,Elma,Buyaziyiekle

	
	var dizi2= new Array("Dizi 2 elemanı","Yenidizi");
	birlesen=dizifonk.concat(dizi2); //İki diziyi birleştirme birbirine dahil etme işlemi yapar , 1 den fazla dizi birleştirilebilir.
	document.write(birlesen.toString()+"<br>");
	//Çıktı:Basaekle,Html,Python,,javascript,1,1,24,3,Elma,Buyaziyiekle,Dizi 2 elemanı,Yenidizi



	ayirmaislemi=dizifonk.slice(2);	//Slice kullanımı belirtilen dizi indisine göre diziler ayrılabilir.
	//slice(3,9) yazarsak 3 ile 9 aralığını alır.
	document.write(ayirmaislemi+"<br>");
	//Çıktı: Python,javascript,1,1,24,3,Elma,Buyaziyiekle


	document.write(ayirmaislemi.length+"<br>"); //length dizi uzunluğunu verir.
	//Çıktı: 9

</script>

</head>
<body>

</body>
</html>

Javascript ile fonksiyon işlemleri  değer döndüren, değer alan, değer almayan ve hazır fonksiyonlar bulunmaktadır. Aşağıdaki kod parçağında bu işlemler gösterilmiştir. encodeURI, decodeURI fonksiyonları url'yi kodlama ve çözme için  kullanılmaktadır.

<!DOCTYPE html>
<html>
<head>
	<title>Fonksiyon İşlemleri</title>
	<script type="text/javascript">
		
			function topla(){
				var a=10;
				var b=20;
				var toplam=parseInt(a)+parseInt(b);
				document.write(toplam);
			}
			topla(); //Çıktı:30


			function topla2(a,b){
				var sonuc=parseInt(a)+parseInt(b);
				return sonuc;
			}
			document.write(topla2(20,3)); //Çıktı:23


			var x=(function(){
				a="Angular Js ile işlem yaparken bu tipte Fonksiyon kullanıyorum";
				return a;
			});
			document.write(x()); //Çıktı : Angular js ile işlem yaparken bu tipte fonksiyon kullanıyorum.


			//Recursive fonksiyon  kullanımı

			var i=0;

			function recursivefonk(par){

				if(i<par){
					i++;
					document.write("<br>"+i);
					recursivefonk(par);
				}
			}
			recursivefonk(10);



			//JavaScriptte Hazır Fonksiyonlar 

			//encodeURI & decodeURI Fonksiyonları URL yi kodlama ve çözme için  kullanılır

			var url="ertugruldeniz.com/ayarlar.php?ad=ertuğrul&soyad=deniz&s=ğiıww";
			document.write(url+"<br>"); //Çıktı: ertugruldeniz.com/ayarlar.php?ad=ertuğrul&soyad=deniz&s=ğiıww
            document.write(encodeURI(url)+"<br>"); //Çıktı: ertugruldeniz.com/ayarlar.php?ad=ertu%C4%9Frul&soyad=deniz&s=%C4%9Fi%C4%B1ww
	        document.write(decodeURI(url)+"<br>"); //Çıktı: ertugruldeniz.com/ayarlar.php?ad=ertuğrul&soyad=deniz&s=ğiıww

	        //eval fonksiyonu kullanımı
	        var a=20;
	        var b=1;
	        var c="a+b";
	        document.write(c); //Çıktı: a+b
	        document.write(eval(c)); //Çıktı:21  // İşlevsellik verir.Kullanımı backend tarafında yapılan işlemler için tehlikelidir.


	        //isFinite kullanımı sayısal bir değer mi diye kontrol eder true false döndürür. Değişkenin sonlu bir sayı olup olmadığına bakıyor. 
	        var a=isFinite(1);
	        document.write(a); //Çıktı: true
	        var b=isFinite("123 Str");
	        document.write(b); //Çıktı: false


	</script>

</head>
<body>

</body>
</html>

Switch case ile çok sayıda koşulu kontrol etmeye yarar. Akılda kalıcı olması açısından haftanın günlerini bulan kod parçacığını yazdım. Bilgisayarın saatinin şuan kaç olduğunu  gösteren kod parçacığını fonksiyon şeklinde gerçekleştirdim. Aşağıdaki kodda switch case örneği ve tarih saat işlemleri yapılmıştır.

<!DOCTYPE html>
<html>
<head>
	<title>Hata Yönetimi Java Script</title>
</head>
<body>

<a href="javascript:void(0)"> Buna tıklayınca işlem yapmasın :)</a>

<a href="javascript:void(document.body.style.backgroundColor='yellow');"> Arka Planı Sarı Yap</a> 
<!-- Sayfa Yenilenmeden işlem yapar javascript:void fonksiyonu -->


<script type="text/javascript">
	
		var x=prompt("Sayi giriniz");/*Klavyeden içerik girebilir.*/

		var y=prompt("Sayi 2 giriniz");/*Klavyeden içerik girebilir.*/

		var toplam=parseInt(x)+parseInt(y);

		alert(toplam);

	
		

		document.write( new Date().getDay()); //Bulunduğumuz Günü Gösteren Kod 1,2,3,4,5,6,7 şeklinde gösteren kod



		var gun= new Date().getDay();
		switch(gun){
			case 1: document.write("Pazartesi");
			break;
			case 2: document.write("Salı");
			break;
			case 3: document.write("Çarşamba");
			break;
			case 4: document.write("Perşembe");
			break;
			case 5: document.write("Cuma");
			break;
			case 6: document.write("Cumartesi");
			break;
			case 7: document.write("Pazar");
			break;

			default:document.write("Tanımsız");
		}


		function addZero(i) {
	    if (i < 10) {
	        i = "0" + i;
	    }
	    return i;
		}
		//SAAT:DAKİKA:SANİYE dndüren kod
		function myFunction() {
		    var d = new Date();
		    var x = document.getElementById("demo");
		    var h = addZero(d.getHours());
		    var m = addZero(d.getMinutes());
		    var s = addZero(d.getSeconds());
		    x.innerHTML = h + ":" + m + ":" + s;
		}

</script>

<button onclick="myFunction()">Tıkla ve saati gör</button> //Butona tıklandığında fnksyon çalışır.

<p id="demo"></p>

</body>
</html>

Bu yazımda javascript ile temel işlemlere değinilmiştir. Bu kodlar kodlama işlemleri yapılırken takıldığımız yerlerde bakmak için örnek olması açısından paylaşılmıştır. Diğer yazılarımda görüşmek üzere...

Bu Gönderiyi Paylaş

Yorumlar (1)

  • O wu elh

    Hello there, My name is Aly and I would like to know if you would have any interest to have your website here at ertugruldeniz.com promoted as a resource on our blog alychidesign.com ? We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well . If you may be interested please in being included as a resource on our blog, please let me know. Thanks, Aly

    2019-01-17 07:00:20

İçerik Hakkında Yorum Yapın

www.000webhost.com