Kategori: Javascript

Vue.JS Nedir? Vue.JS kurulumu

muzafferkadir 0 21 Kasım 2020

Vue.JS Nedir? Vue.js kullanıcı arayüzleri ve tek sayfa uygulamalar inşa etmek için kullanılan açık kaynak Javascript iskeleti. (Kaynak: Vikipedi) Vue.JS Githubda en çok star almış repolardan biridir. Şuanda 175 bine yakın yıldız almış ve topluluğu oldukça gelişmiştir. Bu durum da Vue.js’i daha tercih edilebilir bir duruma getiriyor. Sorularınızı StackOverflow gibi platformlarda kolayca bulabiliyorsunuz, tabii çözümlerini …

Şifre Doğrulama İşlemi JavaScript

muzafferkadir 0 9 Eylül 2017

Önizleme

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>

<body>
<div align="center" id="d1"><a>Şifre:</a><input type="text" id="s1"><br/>
<a>Şifre Tekrar</a> <input type="text" id="s2"><br/>
<input type="button" id="b1" value="OK!">
</div>
<a id="a1">aa</a>
<script>
	var s1=document.getElementById("s1");
	var s2=document.getElementById("s2");
	var b1=document.getElementById("b1");
	var d1=document.getElementById("d1");
	var a1=document.getElementById("a1");
	document.getElementById("b1").onclick=function()
	{
		if(s1.value==s2.value){
			a1.innerHTML="Kod Başarıyla Kaydedildi.";
					}
		else{
			a1.innerHTML="Şifreler aynı değil!";
		}
		
	}
	
	</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Başlıksız Belge</title>

</head>

<body>

<div align="center" id="d1"><a>Şifre:</a><input type="text" id="s1"><br/>

<a>Şifre Tekrar</a> <input type="text" id="s2"><br/>

</div>

var s1=document.getElementById("s1");

var s2=document.getElementById("s2");

var b1=document.getElementById("b1");

var d1=document.getElementById("d1");

var a1=document.getElementById("a1");

document.getElementById("b1").onclick=function()

{

if(s1.value==s2.value){

a1.innerHTML="Kod Başarıyla Kaydedildi.";

}

else{

a1.innerHTML="Şifreler aynı değil!";

}

</script>

</body>

</html>

Buttonlarla Toplama İşlemi Yaptık!!

muzafferkadir 0 23 Ağustos 201731 Ağustos 2017

<html>

<head>

<meta charset="utf-8">

<title>Başlıksız Belge</title>

</head>
<body>

<input type="button" id="t1" value="1" >
<input type="button" id="t10" value="10">

<input type="button" id="t50" value="50"><br/>

<div><a>Sonuç:</a><a id="sonuc">0</a> </div>

<script type="text/javascript">

var t1 =document.getElementById("t1");
 var t10 =document.getElementById("t10");
 var t50 =document.getElementById("t50"); 
var sonuc =document.getElementById("sonuc");
 t1.onclick=topla; 
t10.onclick=topla; 
t50.onclick=topla;
 function topla()
 { sonuc.innerHTML= Number(sonuc.innerHTML)+Number(this.value); }

</script>

</body>

</html>

<html>

<head>

<title>Başlıksız Belge</title>

</head>

<body>

<div><a>Sonuç:</a><a id="sonuc">0</a> </div>

var t1 =document.getElementById("t1");

var t10 =document.getElementById("t10");

var t50 =document.getElementById("t50");

var sonuc =document.getElementById("sonuc");

t1.onclick=topla;

t10.onclick=topla;

t50.onclick=topla;

function topla()

{ sonuc.innerHTML= Number(sonuc.innerHTML)+Number(this.value); }

</script>

</body>

</html>

Input Text’e Sadece Sayı Girdirme Ve Toplama İşlemi

muzafferkadir 0 18 Ağustos 201718 Ağustos 2017

Kodlar:

Basit bir web sitesi

muzafferkadir 0 10 Ağustos 201724 Aralık 2017

HTML

<!doctype html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ana sayfa</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1> reyiz </h1>
<hr &nbsp;/>
<div class="ortala" >&nbsp;<h2> bi site yaptık! </h2></div>
<div class="solnavigasyon"> 
<h3 > navigasyon </h3>
<a class="nav" href="http://www.google.com.tr/"> google </a> <br/> <a class="nav" href="yenisayfa.html"> yenisayfa </a>&nbsp;</div>&nbsp;<div class="sol" ><h4> sol kısım</h4><!-- <hr size=100 width="0" /> --></div><div class="sag"><h4> sağ kısım </h4><h4> önceki yazımız </h4>&nbsp;&nbsp;</div>&nbsp;<div class="ortalayazi">&nbsp;<a>UYGULAMA 12: Girilen bir tam sayının tam kare olup.................. <br/>olmadığını araştıran akış şemasını oluşturunuz.................<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a>&nbsp; &nbsp;<a>UYGULAMA 12: Girilen bir tam sayının tam kare olup <br/>olmadığını araştıran akış şemasını oluşturunuz.<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a>&nbsp; &nbsp;<a>UYGULAMA 12: Girilen bir tam sayının tam kare olup <br/>olmadığını araştıran akış şemasını oluşturunuz.................<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a></div>
<h5> herkese iyi günler felan filan inter milan ayıksss ..................................... &nbsp;</h5><a> </a>
<h6> alt kısım : basgaaan tarafından üretilmiştir...</h6>
</body>
</html>

<!doctype html><!doctype html>

<html>

<head>

<title>ana sayfa</title>

</head>

<body>

<h1> reyiz </h1>

<div class="ortala" > <h2> bi site yaptık! </h2></div>

<h3 > navigasyon </h3>

<a class="nav" href="http://www.google.com.tr/"> google </a> <br/> <a class="nav" href="yenisayfa.html"> yenisayfa </a> </div> <div class="sol" ><h4> sol kısım</h4></div><div class="sag"><h4> sağ kısım </h4><h4> önceki yazımız </h4>  </div> <div class="ortalayazi"> <a>UYGULAMA 12: Girilen bir tam sayının tam kare olup.................. <br/>olmadığını araştıran akış şemasını oluşturunuz.................<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a>   <a>UYGULAMA 12: Girilen bir tam sayının tam kare olup <br/>olmadığını araştıran akış şemasını oluşturunuz.<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a>   <a>UYGULAMA 12: Girilen bir tam sayının tam kare olup <br/>olmadığını araştıran akış şemasını oluşturunuz.................<br/>A1. Başla,<br/>A2. A sayısını gir,<br/>A3. B=A^(1/2) al,<br/>A4. C=TAM(B) al,<br/>A5. D=C^2 al,<br/>A6. Eğer A=D ise A9. adıma git,<br/>A7. “tam kare değil” yaz,<br/>A8. A10. adıma git,<br/>A9. “tam kare”yaz,<br/> A10. Dur.</a></div>

<h5> herkese iyi günler felan filan inter milan ayıksss .....................................  </h5><a> </a>

<h6> alt kısım : basgaaan tarafından üretilmiştir...</h6>

</body>

</html>

CSS

@charset "utf-8";@charset "utf-8";/* CSS Document */
body {background-color: #404040 ; }
h1 {font-family: &nbsp;ubuntu,viga,"carter-one",acme ; text-align: center; font-size: 2.5em ; color: #DD0000 ; text-transform: uppercase } /* sayfa ana başlık*/
h2{ font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans,; text-align: center; font-size:2rem; color: #c0c0c0 ; text-transform: capitalize } /* sayfa konu basligi*/
h3{ font-family: Arial; text-align: center; font-size:1rem;margin: auto; color: #000000; text-transform: capitalize ; text-decoration: underline;} /* navigasyon stili*/
h4{ font-family: adamina,"germania-one"; text-align: center ; font-size: 15px ; color: #FF5555; text-transform: uppercase;} /* sağ kısım yazı stili*/
h5{ font-family: Segoe, "ubuntu-condensed" , Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; text-align: center; font-size: 14px ; color: #FFFFFF; } /* metin*/
a{ font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";text-align: center;font-size: 14px;color: #ffffff;}
a.nav{ font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";text-align: center;font-size: 1em;color: #DD0000; text-transform: capitalize;}
h6{font-family: alice; text-align: center; font-size: 12px; color: #DD0000;} /* alt kısım*/
.solnavigasyon {/*position: relative; left: -20px;*/&nbsp; /*float: left; clear: both;*/ position: fixed; top: 20%; left: 0%;&nbsp; background-color: #C0C0C0;text-align: center;}.ortala { margin: auto;}.ortalayazi{ width: 60%; margin-left: auto; margin-right: auto; }.sol{ /*position: absolute; left: 0; top: auto;*/ float: left; clear:both; margin-right:1%; margin-bottom: all; width: 20%;}.sag{ float: right; margin: auto; width: 20%; }.sol>h4{ margin: 0;}
.sag>h4{ margin: 0;}#ab{ text-decoration: inherit;}

@charset "utf-8";@charset "utf-8";/* CSS Document */

body {background-color: #404040 ; }

h1 {font-family:  ubuntu,viga,"carter-one",acme ; text-align: center; font-size: 2.5em ; color: #DD0000 ; text-transform: uppercase } /* sayfa ana başlık*/

h2{ font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans,; text-align: center; font-size:2rem; color: #c0c0c0 ; text-transform: capitalize } /* sayfa konu basligi*/

h3{ font-family: Arial; text-align: center; font-size:1rem;margin: auto; color: #000000; text-transform: capitalize ; text-decoration: underline;} /* navigasyon stili*/

h4{ font-family: adamina,"germania-one"; text-align: center ; font-size: 15px ; color: #FF5555; text-transform: uppercase;} /* sağ kısım yazı stili*/

h5{ font-family: Segoe, "ubuntu-condensed" , Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; text-align: center; font-size: 14px ; color: #FFFFFF; } /* metin*/

a{ font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";text-align: center;font-size: 14px;color: #ffffff;}

a.nav{ font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";text-align: center;font-size: 1em;color: #DD0000; text-transform: capitalize;}

h6{font-family: alice; text-align: center; font-size: 12px; color: #DD0000;} /* alt kısım*/

.solnavigasyon {/*position: relative; left: -20px;*/  /*float: left; clear: both;*/ position: fixed; top: 20%; left: 0%;  background-color: #C0C0C0;text-align: center;}.ortala { margin: auto;}.ortalayazi{ width: 60%; margin-left: auto; margin-right: auto; }.sol{ /*position: absolute; left: 0; top: auto;*/ float: left; clear:both; margin-right:1%; margin-bottom: all; width: 20%;}.sag{ float: right; margin: auto; width: 20%; }.sol>h4{ margin: 0;}

.sag>h4{ margin: 0;}#ab{ text-decoration: inherit;}

Önizleme: