toUpperCase(), küçük harflere çevirmek için ise toLowerCase() metodlarını kullanıyoruz. Ancak türkçe karakterler işin içine girdiğinde, bu metodlar tam olarak istediğimiz sonucu vermeyebilir. Aşağıda bunun çözümünü de ayrıca belirteceğim. İlk olarak genel olarak bir datayı büyük veya küçük harf olarak nasıl değiştiriyoruz buna bakalım.
Harfleri Büyük Yapmak.
Bu örnekte id tanımlaması demo olan bir pragraf etiketi içerisine “str” değişkeninin içerisinde bulunan string ifadeyi büyük harflere çevirerek yazdırmış bulunuyoruz.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var str= "Hello World!";
var res = str.toUpperCase(); // Çıktı: HELLO WORLD!
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>Harfleri Küçük Yapmak.
Bu örnekte id tanımlaması demo olan bir pragraf etiketi içerisine “str” değişkeninin içerisinde bulunan string ifadeyi küçük harflere çevirerek yazdırmış bulunuyoruz.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sitring = "Hello World!";
var res = sitring.toLowerCase(); // Çıktı: hello world!
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
Javascript Türkçe Büyük / Küçük Harf Çevirme
Türkçe karakterlerde büyük/ küçük harf değiştirme yaparken tam istediğimiz sonuçları alamayabiliyoruz, bu problemleri çözmek için toLowerCase() yerine toLocaleLowerCase() ve toUpperCase() yerine toLocaleUpperCase() metodlarını kullanabiliriz. Böylece dile göre işlevsellik kazanacak ve istediğimiz sonucu alacağız.
Örnek:
<!DOCTYPE html>
<html>
<body>
<p id="localeLowerCase"></p>
<p id="localeUpperCase"></p>
<p id="lowerCase2"></p>
<p id="upperCase2"></p>
<script>
var str = "İstanbul";
var resLowerCase = str.toLocaleLowerCase('TR');
var resUpperCase = str.toLocaleUpperCase('TR');
document.getElementById("localeLowerCase").innerHTML = resLowerCase;
document.getElementById("localeUpperCase").innerHTML = resUpperCase;
var str = "İstanbul";
var resLowerCase2 = str.toLowerCase();
var resUpperCase2 = str.toUpperCase();
document.getElementById("lowerCase2").innerHTML = resLowerCase2;
document.getElementById("upperCase2").innerHTML = resUpperCase2;
</script>
</body>
</html>Bu javascript kütüphanesi bizlere bu uygulamayı sunuyor. Bugün sizlere Web sitelerinize girenleri bir hacker edası ile karşılıycak, kimi zaman sadece bu yazıyı merak ettikleri için girecekleri bir uygulamaya yapmayı gösterecem.
Bu kütüphane tamamiyle açık kaynak kodlu olup internette type.js olarak arattığınızda direk karşınıza çıkmaktadır. Siteden kaynak dosyalarını indirdikten sonra Web site klasörüne entegre etmeniz ve sizlere aşağıda vereceğim komutlar doğrultusunda istediğiniz yazıları kendi kendine olacak şekilde, hızlarını yazı tiplerini düzenliyebileceğiniz biz yapı oluşturabilieceksiniz.
Linux tabanlı işletim sistemlerinde kurulum için:
npm install typed.js
yarn add typed.js
bower install typed.js
kodları ile kurulumu gerçekleştirebilirsiniz
Windows işletim sistemleri için ise;
https://mattboldt.com/demos/typed-js/
internet sitesine girerek Download Zip seçeneğinden açık kaynak dosyalarını indirebilirsiniz. İndirme işleminden sonra dosyayı web sitenizin kaynak kalsörüne almanız yeterli olacaktır.
Kaynak dosyalarını entegre etmek için Web editörümüzü açtıktan sonra <head> tagları arasına Script ve Css dosyalarını dahil etmemiz gerekiyor.
<script src=”typed.js-master/lin/typed.js” type=”text/javascript”></script>
<script src=”typed.js-master/lin/typed.js” type=”text/javascript”></script>
<link href=”typed.js-master/lin/typed.js” rel=”stylesheet”>
Kaynak dosyaları entegre ettikten sonra body kısmına yazının yazılacağı alanı eklemek kalıyor.
<div class="yazi-kutusu"></div>Yazının içerisinde görüneceği bir div etiketi oluşturduk. Daha sonra kutunun daha hoş bir görünüme sahip olması için css ile biraz stil ekliyoruz.
.yazi-kutusu
{
width: 350px;
margin-left: auto;
margin-right: auto;
height: 50px;
box-sizing: border-box;
padding-top: 13px;
border:solid 1px #d5d5d5;
text-align: center;
background-color: #f0f0f0;
}
Daha sonra <script></script> tagları arasına yapması gereken işlemleri ve hangi etiket içerisinde gerçekleşmesi gerektğini yazmamız gerekiyor.
<script></script> etiketlerimizi açtıktan sonra içerisine ilk başta kütüphanemizin hangi kutu içerisinde aktif edileceğini tanımlamamız gerekiyor.
var typed = new Typed(‘.yazi-kutusu’, {
});
Kodunu yazarak az önce açmış olduğumuz .yazi-kutusu class name li etiketin içerisinde aktif olması gerektiğini kütüphanemize bildirdik.
Şimdi de içerisine kutunun içerisinde hangi metinler yazılacağını ve hangi hızlarda hazılacağını tanımlamamız gerekiyor. İçerisinde yazılacak olan String değerleri için ‘strings’ parametresini ve yazının yazılma hızı için ise ‘typeSpeed’ parametresini kullanmamız gerekiyor.
var typed = new Typed(‘.yazi-kutusu’, {
strings: [‘Birinci metin buraya gelecek’, ‘İkinci yazmasını istediğniniz metin buraya gelecek’],
typeSpeed: 40
});
Burada dikkat etmeniz ve bilmeniz gereken şey, tırnakları ve virgülleri doğru açmak ayrıca typeSpeed parametresinin yazdığınız sayı ile ters orantılı çalışması. Yani yazdığınız typeSpeed parametresi değeri büyüdükçe hızı azalır.
Bu şeklinde script kodlarımızı tanımladıktan sonra yazılarımız otomatik olarak yazılmaya hazır hale gelmiştir demektir. Bu sayede Web sitelerinizi daha interaktif ve profesyonel hale getirebilir kullanıcılarınızın ilgisini çekebilirsiniz.
The post Typed.js Kütüphanesi Nedir ? Nasıl Kullanılır ? first appeared on Kampüs Kod.]]>Javascript ile yazdığınız kodları daha az kod ile jquery ile yazabilirsiniz fakat javascript öğrenmeden framework öğrenmek tavsiye edilen bir durum değildir.
ECMAscript: Javascript’in farklı versiyonlarına verilen isim, ESx olarak bilinir.
JavaScript Dersleri 1. JavaScript Nedir? JS Avantajları
JavaScript Dersleri 2. JavaScript Ekrana Yazdırma
JavaScript Dersleri 3. JS Comment Line. Yorum Satırı
JavaScript Dersleri 4. JS Değişken Nasıl Tanımlanır? JavaScript Variables
JavaScript Dersleri 5. Js Arithmetic Operators – Aritmetik Operatörler
JavaScript Dersleri 6. Js Assignment Operators. Atama Operatörleri
JavaScript Dersleri 7. Js Comparison Operators – Karşılaştırma Operatörleri
İçerik eklendikçe güncelleme yapılacak… Başarılar dilerim.
The post JavaScript Dersleri – Ücretsiz Web Tasarım Eğitimleri first appeared on Kampüs Kod.]]>var x = 5; tanımlaması için aşağıdaki durumlardan bahsedebiliriz. Ayrıca her bir JavaScript Karşılaştırma Operatörü için detaylı örneklerler alt tarafta verilmiştir.
- x = 5;
- == equal to —-> x == 5 or x == “5” true, x == 8 false
- === equal value and equal type —-> x === 5 true, x === “5” false
- != not equal x != 4 true
- !== not equal value or not equal type x !== 5 false, x !== 4 or x !== “5” true (eşitlik sağlanmazsa ekranda yazar)
- > greater than x > 8 false
- < less than x < 8 true
- <= greater than or equal to x >= 8 false
- <= less than or equal to x <= 8 true
Equal to (==) – Değer karşılaştırma operatörü
İki farklı değeri karşılaştırmak için kullanılır. Tip kontrolü yapmadan sadece değerin eşitliğini kontrol eder. Detaylı bilgi için aşağıdaki karşılaştırma örneğini inceleyin.
<script>
/* == equal to ---> x == 5 or x == "5" true, x == 8 false */
var x = 5;
if (x == 5) {
console.log("x 5'e eşittir. qual to 1."); // consolda yazacaktır. Değer Doğru
}
if (x == "5") {
console.log("x 5'e eşittir. qual to 2."); // consolda yazacaktır. Değer Doğru
}
if (x == 4) {
console.log("x 4'e eşittir. qual to 3."); // consolda yazmayacak. Değer Yanlış
}
</script> Equal value and equal type (===) – Değer ve tip karşılaştırma operatörü
Bu operatör hem değeri hem de değerin bulunduğu değişken tipini kontrol eder. Detaylı bilgi için aşağıdaki örneği inceleyin.
<script>
/* === equal value and equal type ----> x === 5 true, x === "5" false */
var x = 5;
if (x === 5) {
console.log("x 5'e eşittir. equal value and equal type 1."); // consolda yazacaktır. Değer Doğru
}
if (x === "5") {
console.log("x 5'e eşittir. equal value and equal type 2."); // consolda yazmayacak. Değer doğru fakat tip eşit değil.
}
</script> Not equal (!=) – Eşit değil karşılaştırma operatörü
Not equal operatörü iki durumun eşit olmadığı durumlarda true(doğru) değeri döndürecektir. Bu duruma eşit olmayan durumlarda çalışacak diyebiliriz. Detaylı bilgi için aşağıdaki örneği inceleyin.
<script>
/* != not equal x != 4 true*/
var x = 5;
if (x != 3) {
console.log("not equal 1."); // consolda yazacaktır.
}
if (x != 5) {
console.log("not equal 2."); // consolda yazmayacak. x 5'e eşittir.
}
</script> Not equal value or not equal type (!==) – Değer veya tip eşit değil karşılaştırma operatörü
Not equal value or not equal type karşılaştırması değerin veya değişken tipinin eşleşmediği durumlarda true(doğru) değerini döndürür. Eşleşme olmadığı durumlarda çalışır diyebiliriz.Detaylı bilgi için aşağıdaki örneği inceleyin.
<script>
/* eşitlik sağlanmazsa ekranda yazar !== not equal value or not equal type x !== 5 false, x !== 4 or x !== "5" true */
var x = 5;
if (x !== 5) {
console.log("not equal value or not equal type 1."); // consolda yazmayacak.
}
if (x !== "5") {
console.log("not equal value or not equal type 2."); // consolda yazacak
}
if (x !== 4) {
console.log("not equal value or not equal type 3."); // consolda yazacak
}
</script> Greater than (>) – Büyüktür karşılaştırma operatörü
Greater than operatörü karşılaştırılan değerden büyük olması durumunda çalışacaktır.
<script>
/* > greater than x > 8 false */
var x = 5;
if (x > 5) {
console.log("greater than 1."); // consolda yazmayacak.
}
if (x > 3) {
console.log("greater than 2."); // consolda yazacak.
}
</script> less than (<) – Büyüktür karşılaştırma operatörü
less than operatörü karşılaştırılan değerden küçük olması durumunda çalışacaktır.
<script>
/* < less than x < 8 true*/
var x = 5;
if (x < 5) {
console.log("less than 1."); // consolda yazmayacak.
}
if (x < 50) {
console.log("less than 2."); // consolda yazacak.
}
</script> greater than or equal to (>=) – Büyük veya eşittir karşılaştırma operatörü
greater than or equal to operatörü karşılaştırılan değerden büyük veya eşit olması durumunda çalışacaktır.
<script>
/* >= greater than or equal to x >= 8 false */
var x = 5;
if (x >= 5) {
console.log("greater than or equal to 1."); // consolda yazmayak.
}
if (x >= 3) {
console.log("greater than or equal to 2."); // consolda yazacak.
}
</script> less than or equal to (<=) – Küçük veya eşittir karşılaştırma operatörü
less than or equal to operatörü karşılaştırılan değerden büyük veya eşit olması durumunda çalışacaktır.
<script>
/* <= less than or equal to x <= 8 true */
var x = 5;
if (x <= 5) {
console.log("less than or equal to 1."); // consolda yazmayak.
}
if (x <= 50) {
console.log("less than or equal to 2."); // consolda yazacak.
}
</script> Operator Örnek Karşılığı
= x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y
Aşağıda örnek bir atama kodu verilmiştir.
<script>
var x = 2; // Burada x değişkenine 2 değeri atanır.
console.log(x); // Sonuç 2
</script>
Atama işlemleri gerçekleştirilirken kısa kullanımlarından faydalanabiliriz. Buradaki kısa atama operatörleri ile değişkenin kendi değeri üzerinden işlem yapılır. Bu işlemleri anlatmak için örnekleri inceleyin.
Kısa Toplama ve Atama Operatörü:
var y = 10;
y += 5; // y = y + 5 işlemini yapmaktadır.
console.log(y); // Sonuç : 15
Kısa Çıkarma ve Atama Operatörü:
var y = 10;
y -= 5; // y = y - 5 işlemini yapmaktadır.
console.log(y); // Sonuç : 5
Kısa Çarpma ve Atama Operatörü:
var y = 10;
y *= 5; // y = y * 5 işlemini yapmaktadır.
console.log(y); // Sonuç : 50
Kısa Bölme ve Atama Operatörü:
var y = 10;
y /= 3; // y = y / 3 işlemini yapmaktadır.
console.log(y); // Sonuç : 3.33333
Kısa Mod Alma ve Atama Operatörü:
var y = 10;
y %= 3; // y = y % 3 işlemini yapmaktadır.
console.log(y); // Sonuç : 1
Kısa Üs Alma ve Atama Operatörü:
var y = 10;
y **= 2; // y = y ** 3 işlemini yapmaktadır. (Üs Alma)
console.log(y); // Sonuç : 100Bu çalışmaları string değerler üzerinden de yapabilirsiniz. Aşağıdaki örnekte Javascript String atama operetörü için bir örnek bulunmaktadır.
var firstName = "Cihan";
var lastName = "Koç";
var nameSurname = firstName + " " + lastName;
console.log(nameSurname);
var text1 = "Hello ";
text1 += "World"; // text1 = txt1 + "World"
console.log(text1); // Sonuç = Hello WorldJavaScript Aritmetik Operatörleri:
The adding operator (+) – Toplama Operatörü:
<script>
/* The adding operator (+) - Toplama Operatörü */
var x = 5;
var y = 3;
var z = x + y;
console.log("Toplam: " + z); // Sonuç: 8
</script>The subtraction operator (-) – Çıkarma Operatörü:
<script>
/* The subtraction operator (-) - Çıkarma Operatörü */
var x = 5;
var y = 3;
var z = x - y;
console.log("Fark: " + z); // Sonuç: 2
</script>The multiplication operator (*) – Çarpma Operatörü
<script>
/* The multiplication operator (*) - Çarpma Operatörü*/
var x = 5;
var y = 3;
var z = x * y;
console.log("Çarpma: " + z); // Sonuç: 15
</script>The division operator (/) – Bölme Operatörü
<script>
/* The division operator (/) - Bölme Operatörü */
var x = 5;
var y = 3;
var z = x / y;
console.log("Bölme: " + z); // Sonuç: 1.66666
</script>The modulus operator (%) – Mod Alma Operatörü
<script>
var x = 5;
var y = 3;
var z = x % y;
console.log("Kalan: " + z); // Sonuç: 2
</script>The exponentiation operator (**) – Üst Alma Operatörü
Bu özellik “ES2016” ile birlikte geldi. Math.pow(x,y) fonksiyonu ile aynı işi yapmaktadır.
<script>
/* The exponentiation operator (**) - Üst Alma Operatörü */
/* (ES2016 ile birlikte geldi) == Same Math.pow(x,y) function */
var x = 5;
var y = 3;
var z = x ** y;
console.log("Üst Alma: " + z); // Sonuç: 125
console.log("Üst alma function: " + Math.pow(x,y)); // Sonuç: 125
</script>The increment operator (++) – Arttırma Operatörü
<script>
/* The increment operator (++) - Arttırma Operatörü*/
var x = 5;
x++;
console.log("Arttırılmış Değer: " + x); // Sonuç: 6
</script>The decrement operator (–) – Azaltma Operatörü
<script>
/* The decrement operator (--) - Azaltma Operatörü */
var x = 6;
x--;
console.log("Azaltılmış Değer: " + x); // Sonuç: 5
</script>Operator Precedence: Okul matematiğinde olduğu gibi, çarpma(*) ve bölme(/) işlemleri toplama(+) ve çıkarma(-) işlemlerinden önce yapılır. Karmaşıklığın önüne geçmek için parantez kullanmak faydalı olacaktır
<script>
var x = 100 + 50 * 3;
console.log("Toplam: " + x); // Sonuç: 250
</script><script>
var x = (100 + 50) * 3;
console.log("Toplam: " + x); // Sonuç: 450
</script>Aşağıdaki örneği inceleyerek Javascript değişken tanımlamasını detaylı inceleyelim ve genel kurallarımızdan bahsedelim.
<script>
var x = 2;
var y = 3;
var z = x + y;
console.log(z);
</script>- Bu örnekte, x, y ve z değişkenlerdir: (Atama operatörleri sonraki derslerde detaylı anlatılacaktır.)
- x değişkenine 2 değeri atanmıştır.
- y değişkenine 3 değeri atanmıştır.
- x ve ye değerleri toplanarak z = 5 değerine sahip olacaktır.
- console.log ile tarayıcı üzerinde yazdırma işlemi gerçekleştirildi.
String bir değişken de tanımlayabilirsiniz. Aşağıdaki örnekte bunun bir örneği verilmiştir.
<script>
var text1 = "String değer içeriği.";
console.log(text1);
</script>
Değer ataması yapılmayan bir değişkeni yazdırmaya çalışırsanız “Undefined” dönüşünü alırsınız. Örnek:
<script>
var firstName;
console.log(firstName); /* Undefined - tanımlanmamış. */
</script>
Aynı değişkenin tekrar tanımlanması durumunda son tanımlanan değişkene değer ataması yapılmazsa 1. durumda atanmış değer geçerli geçerli olur. eğer yeni değer ataması yapılırsa yeni değer geçerli olur.’ Örnek:
<script>
var lastName = "Koç";
var lastName; // yeni değer ataması yapılmadığı için ekranda Koç yazar.
console.log(lastName);
</script>
Değişkenler adlar oluşturmak için genel kurallar (benzersiz tanımlayıcılar):
Değişken tanımlamalarını yaparken dikkat etmemiz gereken bazı kurallar vardır. Aşağıdaki maddelerde genel kuralları tanımlayalım.
- İsimler harf, rakam, alt çizgi ve dolar işareti içerebilir.
- İsimler bir harfle başlamalıdır rakam veya sayı ile başlamamalıdır
- İsimler de $ ve _ ile başlayabilir
- İsimler büyük / küçük harfe duyarlıdır (y ve Y farklı değişkenlerdir)
- Ayrılmış kelimeler (JavaScript anahtar kelimeleri gibi) ad olarak kullanılamaz
- Değişkeni bildirirken ayrıca bir değer atayabilirsiniz:
Single Line Comments – Tek satır yorumları
Tek satırlı yorumlar // ile başlar.
<p id="demo"></p>
<script>
var x = 5; // x değişkenine 5 değerini atadık
var y = x + 2; // x değeri ile 2 değerini toplayıp y değişkenine atadık
// Demo içerisine y değerini yazalım:
document.getElementById("demo").innerHTML = y;
</script>
Multi-line Comments – Çoklu satır yorumları
Çoklu satır yorumları /* ile başlar */ ile sonlandırılır.
/*
Bu alana istediğimiz
kadar yorum satırı
yazabiliriz.
document.getElementById("demo").innerHTML = "Hello World"
*/
NOT: Kodları da yorum satırına alabilirsiniz.
The post JavaScript Dersleri 3. JS Comment Line. Yorum Satırı first appeared on Kampüs Kod.]]>- İnnerHTML kullanarak bir HTML öğesine yazma.
- Document.write () kullanarak HTML çıktısına yazma.
- Window.alert () öğesini kullanarak bir uyarı kutusuna yazma.
- Console.log () kullanarak tarayıcı konsoluna yazma.
Bir HTML öğesine erişmek için JavaScript document.getElementById (id) yöntemini kullanabilir.
İd özelliği, HTML öğesini tanımlar. İnnerHTML özelliği milosbet HTML içeriğini tanımlar:
<!DOCTYPE html>
<html>
<body>
<p>İlk Javascript Çalışmam.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>
</body>
</html>
Burada demo olarak tanımlanmış paragrafın içerisinde “Hello World” yazacaktır. Bir HTML öğesinin innerHTML özelliğini değiştirmek, verileri HTML’de görüntülemek için yaygın bir yöntemdir.
Using document.write()
Test amacıyla, document.write () öğesini kullanmak uygundur:
<script>
document.write(5 + 6);
</script>Bir HTML belgesi yüklendikten sonra document.write () kullanılması, mevcut tüm HTML’leri siler:
<button type="button" onclick="document.write(5 + 6)">Try it</button>NOT: Document.write () yöntemi yalnızca test için kullanılmalıdır.
Using window.alert()
Verileri görüntülemek için bir uyarı kutusu kullanabilirsiniz:
<script>
window.alert(5 + 6);
</script>Using console.log()
Hata ayıklama amacıyla, verileri görüntülemek için tarayıcıdaki console.log () yöntemini çağırabilirsiniz. Bu değeri görmek için klavyeden f12 tuşuna basıp açılan pencereden “console” menüsüne tıklamanız gerekmektedir.
Daha sonraki bir bölümde hata ayıklama hakkında daha fazla bilgi edineceksiniz.
<script>
console.log(5 + 6);
</scriptJavaScript Print
JavaScript’in yazdırma nesnesi veya yazdırma yöntemi yoktur.
Çıkış cihazlarına JavaScript’ten erişemezsiniz.
Tek istisna, geçerli pencerenin içeriğini yazdırmak için tarayıcıdaki window.print () yöntemini çağırabilmenizdir.
<button onclick="window.print()">Print this page</button>JavaScript Eğitimleri, innerHtml, console.log,windows.print, document.write, windows.print,
The post JavaScript Dersleri 2. JavaScript Ekrana Yazdırma first appeared on Kampüs Kod.]]>Projeye Javascript kodu ekleme:
HTML’de, JavaScript kodu <script> ve </script> etiketleri arasına eklenir.
Komut dosyaları <body> veya bir favoribahis HTML sayfasının <head> bölümüne veya her ikisine birden yerleştirilebilir.
Dahili, aynı sayfa içerisinde yazma:
<script>
alert('Hello World');
</script>
Buradaki kod ile projemizi çalıştırdığımızda ekrana Hello World yazacaktır.
Harici bir dosya ile yazıp sayfamızdan çağırma:
<script src="myScript.js"></script>NOT: Harici komut dosyaları <script> etiketi içeremez.
Harici JavaScript Avantajları:
- HTML ve kodu ayırır
- HTML ve JavaScript’in okunmasını ve bakımını kolaylaştırır
- Önbelleğe alınmış JavaScript dosyaları sayfa yüklemelerini hızlandırabilir
Harici komut dosyalarına tam bir URL ile veya geçerli web sayfasından bir yol tanımlaması yapılabilir.
Aşağıdaki örnekte bir script(komut) dosyasına bağlantı oluşturmak için tam URL kullandık.
<script src="https://www.cihankoc.com.tr/js/myScript1.js"></script> Bu örnekte ise farklı klasörde bulunan bir js dosyasına erişim sağlamış oluyoruz.
<script src="js/myScript.js"></script>