Merhabalar, ilk yazımda sizlere elimden geldiğince Frontend Development ile alakalı naçizane bilgilerimden, deneyimlerimden, Frontend nedir ve nasıl yapılır gibi kavramlardan bahsetmeye çalışacağım.
Benim frontend alanına yönelmemin temel sebebi aslında almış olduğum lise eğitimimle başlıyor desem sanırım daha doğru olacak. O dönemlerde tanıştığım “web geliştirme” kavramı, bu alana ilgi duyduğumu fark etmem noktasında temel oluşturduğunu söyleyebilirim. Halihazırda web tabanlı olduğum için üniversite eğitimimde de frontend alanına yönelik aldığım eğitimler ve yaptığım çalışmalar bu doğrultuda belirlemiş olduğum kariyer hedeflerimle de devam ettiğini belirtebilirim.
Frontend nedir ve nasıl yapılır?
Frontend kavramından bahsedildiği zaman insanların genellikle düşündüğü şey aslında HTML, CSS ve JavaScript’ tir. Kısaca değinecek olursak yukarıda bulunan görselden yararlanmak istiyorum. HTML, bizim oluşturduğumuz web sayfalarının iskelet yapısına benzetebiliriz. Sayfalarımız bu iskelet yapısı üzerinde inşa edilir. CSS, web sayfalarındaki tasarım kısmına karşılık gelir. İçeriklerin nerede, hangi boyutta, hangi stilde görüntüleneceği konusunda yapacağımız ayarlamalarda kullanırız. JavaScript ise oluşturmuş olduğumuz yapının çalışması gereken fonksiyonlarına karşılık gelir. Bir menüye tıkladığımızı düşünelim, bu menünün açılırken yapacağı olay(event), menü açılırken içerisinde mevcutsa bir animasyon veya backend ile haberleşme işlemlerini örneklendirebiliriz.
Her ne kadar frontend’ in temelinde bunlar olsa da son yıllarda JavaScript frameworklerinin (Angular, React ve Vue gibi) popülerleşmesi ve kullanım alanının yaygınlaşması sayesinde frontend dünyasının başka boyutlar kazandığını söylememiz yanlış sayılmaz. SPA dediğimiz yani Single Page Application(Tek Sayfalık Uygulama) kavramıyla birlikte aslında frontend bir uygulama geliştirme haline geldi diyebiliriz. Bununla beraber hayatımıza giren Mobil Application kavramıyla birlikte frontend kısmını sadece web tabanlı düşünmemek gerekir. Yani demem o ki Backend aslında tek bir kısımdan oluşurken Frontend tarafı farklı platformlar içinde dizayn edilmekte veya kullanılabilmektedir. (iOS, Android, IoT vs.)
Responsive tasarıma da değinecek olursam, taşınabilir cihazların hayatımızda aktif olarak rol oynamasından sonra önemi daha da çok ortaya çıkan bir kavram olduğundan bahsedebiliriz. Eskiden mobil cihazlardan web sayfalarını görüntülediğimiz zaman sayfalar sanki desktop bir cihazdan görüntüleniyormuş gibi görüntülenirdi. Fakat responsive tasarımlarında gelişmesiyle bu durum artık sayfaları görüntülediğimiz cihaz boyutlarına göre (mobil,tablet vs.) görüntülenmeye başlandı. Yani sayfalarımız ona göre genişlik kazanıyor, içerikler ona uygun olarak hizalanıyor gibi. Bu da beraberinde mobil cihazlardaki kullanımlarında artmasına sebep oldu.
Frontend, en basit ifadeyle arayüzde kullanıcıyla etkileşime geçen taraf olarak nitelendirebiliriz. Yani kullanıcının ziyaret etmiş olduğu web sayfalarında veya web uygulamalarında görüntülediği, etkileşime girdiği kısım. Bununla ilgili de vereceğim örnekte Twitter’ı baz alalım. Twitter’da anasayfamızda olduğumuzu düşünelim. Takipleştiğimiz kullanıcıların tweetlerini görüntüleyebiliyoruz, bu tweetlere beğeni, retweet gibi farklı olaylar gerçekleştirebiliyoruz, tweet atabiliyoruz, kullanıcılara mesaj gönderebiliyoruz vs.
Özetlemem gerekirse kariyer yolculuğunun başında olan bir geliştirici olarak ilk yazımda elimden geldiğince Frontend Development alanıyla alakalı naçizane bilgi ve tecrübelerimden bahsetmeye çalıştım. Sayılan konular uzayıp gidebilir ancak üzerinde durmak istediğim bazı hususları paylaşmaya gayret ettim. Başarılı olabildiysem ne mutlu bana. Bana ulaşmak isterseniz eğer Twitter, LinkedIn, GitHub üzerinden ulaşabilirsiniz.
Son olarak yazımı Steve Jobs’ın şu sözüyle bitirmek istiyorum;
Teşekkür eder, saygılar sunarım…
The post Frontend Development Nedir, Nasıl Yapılır? first appeared on Kampüs Kod.]]>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.]]>Sublime Text, içinde birçok programlama dili arayüzü barındıran, çapraz platform bir kaynak gorabet kod düzenleme ve metin editörüdür. Arayüzü Vim’den ilham alınarak tasarlanmıştır. Sublime-paketleri yardımıyla fonksiyonelitesi genişletilebilir ancak Sublime Text açık kaynaklı ya da özgür bir yazılım değildir.
Sublime Text editörünün yapılandırma ayarları için aşağıdaki videoyu izleyebilirsiniz.
Sublime Text editörü hızlı kod yazma kısayolları:
[
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}},
{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }
]Kod Açıklaması
- ctrl + 7 = açıklama satırı oluşturmak için kullanılır. Seçili satırda olursak o satırı açıklama satırına çevirecektir.
- shift ctrl 7 Bulunduğu yerde açıklama satırı oluşturmak için.
- shift + Alt + F = Otomatik düzenleme yapmak için
Sublime Text Editörünü İndir – Download Sublime Text Editor:
Sublime Text editörünü indirmek için buraya tıklayın.
web tasarım, html,css,html5,css3,create a website,web site dersleri,
The post Html Dersleri 3 – Sublime Text Editörünü Tanıyalım first appeared on Kampüs Kod.]]>