Aralık 2020 – Rumeysa❀

JavaScript | Day 5 #30DaysOfJavaScript

5thDayOf30DaysJavaScript

P.s. 5 adet veri tip, 3 adet Object tipi bulunan javaScript dilinde veri tiplerini Number, String, Boolean, Undefined, ve Null (bu da bir object’dir). Object tipini ise fonksiyon, dizi, nesne (object) gibi referanslar oluşturmaktadır.

Fonksiyonların Tanımlanması

function anahtar kelimesinden sonra,

Fonksiyonun adı yazılır
Fonksiyonun aldığı parametreler (parantezler ile çevrili ve virgüller ile birbirinden ayrılmış olmalıdırlar).
Çalıştırılacak JavaScript ifadeleri (süslü parantezler ile çevrilmelidir).

function topla(sayi1, sayi2) {

  var toplam = sayi1 + sayi2;
  return toplam;

}

Eğer bir nesneyi (Array veya bir kullanıcı tanımlı nesne gibi ilkel olmayan değer) fonksiyona parametre olarak geçerseniz, nesne fonksiyon içerisinde kopyalanmadığı için nesne üzerinde yapılan değişiklikler fonksiyon dışında da korunur. Aşağıdaki örneği inceleyelim:

function arabamıDeğiştir(araba) {
  araba.markası = "Toyota";
}

var arabam = {markası: "Honda", modeli: "Accord", yılı: 1998};
var x, y;

x = arabam.markası ; // "Honda" değerini getirir

arabamıDeğiştir(arabam);
y = arabam.markası; // "Toyota" değeri döndürülür
                    // (markası özelliği fonksiyon tarafından değiştirilmiştir)

Fonksiyonları şu iki şekilde çağırabiliriz:

<script>
     Goster();

      function  Goster(){
          window.alert("2021 süperrr geçsin! Tam 30 dk sonra 1 Ocak 2021.");   // saat: 23.30  tarih 31.12.2020
      }fonksiyonu çağ
</script>

<body>
  <div id = "result"></div>
  <button type = "button" onClick ="Hesapla();">Hesapla</button>  // fonksiyonu çağırırken "Hesapla" değil de "Hesapla();" yazdık!

    <script>
          function  Hesapla(sayi1, sayi2, sayi3){
              var x, y, z;
              x = 2;
              y = 3;
              z = (x + y) * 4;
              document.getElementById('result').innerHTML = "Sonuç:" + z;
          }
     </script>

</body>

Nesne (Object) Kullanımı

Nesne içindeki özelliklerden biri metot içinde kullanılacaksa bu özellik this anahtar sözcüğü ile kullanılmalıdır. (this.saatUcreti)

<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
<body>
 
<p><u>JavaScript Object Kullanımı</u></p>
 
<p id="bilgi"></p>
<p><b>Araç Detayları</b></p>
<p id="detay"></p>
<p id="tutar"></p>
<script>
var arac={
    marka:"Renault",
    model:"Clio",
    yil:2018,
    renk:"Beyaz",
    yakit:"Dizel",
    saatUcreti:60,
    ucretHesapla:function(saat){
        return saat*this.saatUcreti;
    }
};
 
document.getElementById("bilgi").innerHTML =
arac.marka + " " + arac.model + " model "+arac.yakit+" aracın saatlik kiralama ücreti : "+arac.saatUcreti;
    
document.getElementById("detay").innerHTML=
    "Marka      : "+arac.marka+"<br>"+
    "Model      : "+arac.model+"<br>"+
    "Model Yılı : "+arac.yil+"<br>"+
    "Renk       : "+arac.renk+"<br>"+
    "Yakıt Türü : "+arac.yakit+"<br>"+
    "Saat Ücreti: "+arac.saatUcreti;
    
document.getElementById("tutar").innerHTML="Ödenecek Tutar : "+arac.ucretHesapla(3);
    
</script>
 
</body>

|| ÇIKTI:

Yararlandıklarım:

JavaScript | Day 4 #30DaysOfJavaScript

4thDayOf30DaysJavaScript

🚀Araya birkaç gün girse de seriye devamm!

JavaScript kodlarından önce veya sonra hata kontrolü yapmak istersek debugger kullanabiliriz.

document.write('bu satır çalıştıktan sonra ekrana bir bu yazı gelecek hata kontrolü yapılacak');

debugger;

document.write('bu satır debug işleminden sonra görünecek, program çalışınca ekranda yazmayacak');

JavaScript’te tek bir ifadeyle birden fazla değişken tanımlama yapılabilir.

var value1 = value2 = value3 = "Hello";

Global ve Lokal değişkeneler

var name = "Yasemin";

if(true){
     name = "Ahmet";
     document.writeln("name");

}

document.writeln("name");


|| ÇIKTI:

Ahmet
Yasemin

typeof()

Değişken içeriğinin veri türünü bu fonksiyon ile bulabiliriz.

var value1 = true;
var value2 = "hi";
val value3 = 26;
val whatami1 = new Object();  // Object 
val whatami2 = new Array["Suspicious" + 1999];  // Object Array
val whatami3 = ["Suspicious" + 1999];  // Array

document.writeln("value1's type: " + typeof(value1));
document.writeln("value1's type: " + typeof(value2));
document.writeln("value1's type: " + typeof(value3));
document.writeln("whatami1's type: " + typeof(whatami1));
document.writeln("whatami2's type: " + typeof(whatami2));
document.writeln("whatami3's type: " + typeof(whatami3));



|| ÇIKTI:

value1's type: boolean
value1's type: string
value1's type: number
whatami1's type: object
whatami2's type: object
whatami3's type: object

length Metodu

length metodunu kullanırken eğer yazdığımız bir string ifadesi içerisinde kaçış operatörü kullanırsak, JavaScript bu ifadeelri saymaz. Gelişmiş bir dil olduğu için onların kaçış ifadesi olduğunu bilir.

var name = "Necdet";

var val = name.lengt;

document.write(name.length);



|| ÇIKTI:  6

eval() Metodu

Kendisine parametre olarak verilen değerleri JavaScript kodlamasına çevirerek komut gibi çalıştırır ve oluşan değeri geriye döndürür.

var val1 = 10 * 40;
document.writeln(val1);

val val2 = eval(10 * 40);
document.writeln(val2);


|| ÇIKTI:

10 * 40 
400

Nedir Bu Framework

Framework’ler ne bir kütüphanedir ne de bir IDE. Geliştirdiğimiz uygulamalarda kullanabileceğimiz hazır kodlar içeren kütüphaneleri ve modülleri içerisinde bulunduran yapıdır. Bizi fazla kod yazmaktan kurtarır. Ayrıca içerisinde bulunan yapılar sayesinde projemizin okunurluğunu artırır. Örneğin bir buton oluşturmak istediğimizde, bu gibi nesneleri framework sayesinde kod yazmadan oluşturabiliriz. Gelişmiş frameworklerde form kontrolü, veri tabanı bağlantısı, kullanıcı giriş çıkış, mail atma, tema motoru gibi işlemleri içerisinde bulunan kütüphanelerle yapabiliriz. Bir başka örnek ise .NET framework’ünde MVC yapısı sayesinde model, view, controller bölümleri ile kodun kontrolünü, düzenlenebilirliğini, artırmış oluruz. Framework’ler sayesinde bir kere tanımlanmış bir kodu tekrar yazmamış oluruz ve üzerinden belirli bir süre geçen projemizin düzenlenmesinde, kontrollerinde büyük bir kolaylığa sahip oluruz. Günümüzde pek çok framework opensource olarak geliştirilmektedir. Framework’leri kullanan geliştiriciler; geri bildirimde bulunarak, düzenlemeler yaparak ve üzerine ekleyerek bu yapıları büyütüler. Bu sayede Framework’ler her geçen gün gücüne güç katmakta ve gelişmektedir.

Bazı Framework’ler

.NET

JavaScript => JQuery, Node.js, Vue.js, Angular, React

PHP => Laravel, Symfony, Zend, CodeIgniter, CakePHP ,Yii

JavaScript | Day 3 #30DaysOfJavaScript

#3rdDayOf30DaysJavaScript

Bir JavaScript dizisi,içerisinde aynı anda farklı veri tipine sahip değişkenleri içerebilir.

var myArray = ["Rumeysa", 21];

Bir JavaScript dizisi, dizi elamanı olarak içerisinde farklı diziler içerebilir. Bunlara çok boyutlu dizeler denir. (bkz. matrisler) (multi-dimensional array) İç içe geçmiş dizeler (nested array) şu şekilde oluşturulur:

var myArray = [["Rumeysa","Aydogdu",21],["JavaScript", "HTML", "CSS", 2020]];

var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11

JavaScript | Day 2 #30DaysOfJavaScript

#2ndDayOf30DaysJavaScript

Kaçış İfadeleri

I am a "double quoted" string inside "double quotes" ifadesini yazdırmak için; cümle içerisinde kullandığımız tırnak işaretlerini, string in açma kapama tırnağı sanmaması için kaçış ifadelerini kullanırız.

var myStr = "I am a \"double quoted\" string inside \"double quotes\".";

eğer string için ‘ ‘ (tek tırnak) kullanırsak, string içersinde bulunan çift tırnaklar için kaçış ifadesine kullanmamıza gerek kalmaz. Çünkü karışıklık ortadan kalkmış olur.

var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

Code	Output
`\'`	single quote
`\"`	double quote
`\\`	backslash
`\n`	newline
`\r`	carriage return
`\t`	tab
`\b`	word boundary
`\f`	form feed

FirstLine
       \SecondLine
ThirdLine

şeklinde çıktı almak için kodumuz aşağıdaki gibi olacaktır:

var myStr = "FirstLine\n\t\\SecondLine\nThirdLine";

JavaScript | Day 1 #30DaysOfJavaScript

#1stDayOf30DaysJavaScript

JavaScript Hakkında

JavaScript ” ” (çift tırnak) veya ‘ ‘ (tek tırnak) kabul eder.
JavaScrip’te değişkenlerin ilk karakteri bir harf, alt çizgi ( _ ) veya bir dolar işareti ($) olmalıdır. DEğişkenler sayı veya başka bir sembolle başlayamaz.
JavaScript kodları daha iyi çalışabilmesi için <body> etiketi kısmında en alta yazılmalıdır.
JavaScript kodalrının sonuna ; (noktalı virgül) kullanılması standartlar açısından daha iyi olur.
Birden fazla script tag’i açılabilir.

document.write("Metinler bu kod ile yazdırılır.");
alert("Uyarı mesajı bu şekilde yazdırılır.");

id İle Erişme:

document.getElementBtId('resul').innerHTML;

Fonksiyon Kullanımı:

function calistir(){
          document.getElementById('result').innerHTML="result id'li paragrafın içeriği değişti";
     }

JavaScript Çıktıları

JavaScript ile çıktı oluşturmak için 4 tane çıktı kullanılır.

innerHTML
1. Bir HTML öğresine yazdırılır. Bir HTML öğesine erişmek için document.getEelmentById(“id_name”) yöntemini kullanır.
2. Id özelliği HTML öğesini tanımlar. innerHTML özelliği HTML içeriğini tanımlar.
document.write()
window.alert()
console.log()

Kullandığım Kaynaklar:

Bilmem Kaç Adımda Github’a Proje Yükleme ve Repository Silme

Eğer siz de benim gibi bu denizde yüzmeye yeni başladıysanız, Git programıyla başınız beladaysa ve cmd ekranında hata almaktan yorulduysanız bu adımları izleyerek basit bir şekilde github repository’nize bilgisayarınızdan projelerinizin dosyalarını yükleyebilirsiniz.

Bunun için Git porogramı yerine GitHub Desktop programını kullanacağız. Bu nedenle eğer bilgisayarınıza kurmadıysanız https://desktop.github.com bağlantısına giderek bilgisayarınızla uyumlu GitHub Desktop programını bilgisayarınıza indirerek kurulumunu gerçekleştirmelisiniz.

Ardından https://github.com adresine giderek hesabınıza giriş yapın. Repositories ınızı açtıktan sonra sağ üstte bulunan New butonu ile yeni bir repo oluşturun.

Public bir repo oluşturuyoruz. Public seçeneği herhangi bir internet kullanıcısının erişimine açık veücretsizdir. README dosyası eklemeniz ve içerisinde projenizi anlatmanız; projenizin daha daha anlaşılır, daha güçlü olmasını sağlar. Bu nedenle ekliyoruz. .gitignore ile projenizde kullandığınız programlama dilini ve ya dillerini seçebilirsiniz. Paylaşım yaptığınız zaman kodlarınızın dili otomatik olarak da görünecektir zaten. license seçeneği ile projenizin kodlarının kullanılmasıyla ilgili bir lisans eklemiş olursunuz. Bunları şimdilik bu deneme uygulaması için None olarak işaretliyoruz. Create repository butonuna basarak repomuzu oluşturmuş oluyoruz.

Şimdi GitHub Desktop programını kullanacağımız kısma geldik. Programı kurup açtığınızda kendi github hesabınızla bağlantı kurmalısınız. Ardından önünüze gelen ekranda Clone a repository butonuna tıklayarak isterseniz GitHub.com kısmından oluşturduğumuz repo’yu seçerek isterseniz URL kısmından repo’nuzun linkini yapıştırarak repo’nuzu GitHub Desktop uygulamasında görünmesini sağlamış olacaksınız.

Currently repository kısmından repo’larınız arsı geçişler yapabilir, Add ile yeni bir repo ekleyip oluşturabilirsiniz.

Bu bilgisayar > belgeler >GitHub > deneme (repository_adi) şeklinde veya sizde farklı bir yerdeyse repo’nuzu programa eklerken oluşan yoldan (Local path) repo dosyanıza ulaşabilirsiniz. Artık bu repo dosyasına projenizi sürükleyip bıraktığınızda GitHub Desktop programında proje dosyalarınız görünüyor olacak.

Görünen bu dosyalar henüz github repo’nuza eklenmedi. Bunun için sol alt köşedeki Summery kısımına bir başlık ve altına bir açıklama ekleyerek önce Commit to main butonuna basarak ardından da sağ ütte Fetch orgin ile projeyi push etmiş oluyorsunuz.

Sayfanın link’ini yenilediğinizde artık proje dosyanız veya dosyalarınız görünüyor olacaktır.

Repo’nuzu silmek istediğinizde ilgili repo’nun sayfasına giderek sağ üstteki Settings kısmından repo’nun ayarlarına gidiyoruz.

Sayfanın en altında Danger Zone kısmında Delete this repository butonuna tıklayarak ve ardından önünüze gelen uyarı ekranında repo’yu silmek istediğinizden emin olduğunuzu belirtecek şekilde, istenen kısma kullanici_adiniz/repo_adiniz (bizim örneğimiz için: rumeysaaydogdu/deneme) yazıp altındaki buton ile repo’nuzu kalıcı olarak silebilirsiniz.

P.s. Git kodu yazmak istemiyorsanız ayrıca Github Desktop kullanmak istemiyorsanız Git programını bilgisayarınıza kurup bağlantı sağladıktan sonra Visual Studio Code veya Visual Studio içerisinden de projelerinizi push edebilirsiniz. Github Desktop ilk kullanım için uygun olabileceği için bunu anlatmak istedim.