JS Eğitimi

ANA SAYFA JS Giriş JS Nereye JS Çıktı JS İfadeleri JS Sözdizimi JS Yorumları JS Değişkenleri JS Let JS Sabiti JS Operatörleri JS Aritmetiği JS Ataması JS Veri Türleri JS Fonksiyonları JS Nesneleri JS Etkinlikleri JS Dizeleri JS Dize Yöntemleri JS Dizisi Arama JS Dize Şablonları JS Numaraları JS Numarası Yöntemleri JS Dizileri JS Dizi Yöntemleri JS Dizi Sıralaması JS Dizi Yineleme JS Dizi Sabiti JS Tarihleri JS Tarih Formatları JS Tarih Alma Yöntemleri JS Tarih Ayar Yöntemleri JS Matematik JS Rastgele JS Booleanları JS Karşılaştırmaları JS Koşulları JS Anahtarı JS Döngüsü İçin JS Döngüsü İçin JS Döngüsü JS Döngüsü JS Arası JS Yinelenebilirler JS Setleri JS Haritaları JS Türü JS Tipi Dönüşüm JS Bitsel JS Normal İfade JS Hataları JS Kapsamı JS Kaldırma JS Sıkı Modu Bu Anahtar Kelimeyi JS JS Ok İşlevi JS Sınıfları JS JSON JS Hata Ayıklama JS Stil Kılavuzu JS En İyi Uygulamaları JS Hataları JS Performansı JS Ayrılmış Kelimeler

JS Sürümleri

JS Sürümleri JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Kenar JS Geçmişi

JS Nesneleri

Nesne Tanımları Nesne Özellikleri Nesne Yöntemleri Nesne Görüntüleme Nesne Erişimcileri Nesne Oluşturucuları Nesne Prototipleri Nesne Yinelenebilirler Nesne Kümeleri Nesne Haritaları Nesne Referansı

JS Fonksiyonları

Fonksiyon Tanımları Fonksiyon Parametreleri Fonksiyon Çağırma İşlev Çağrısı İşlev Uygula Fonksiyon Kapanışları

JS Sınıfları

Sınıf Tanıtımı Sınıf Kalıtımı Sınıf Statik

JS Zaman uyumsuz

JS Geri Aramaları JS Asenkron JS Sözleri JS Zaman uyumsuz/Bekliyor

JS HTML DOM'si

DOM Tanıtımı DOM Yöntemleri DOM Belgesi DOM Öğeleri DOM HTML'si DOM Formları DOM CSS'si DOM Animasyonları DOM Olayları DOM Olay Dinleyicisi DOM Gezinme DOM Düğümleri DOM Koleksiyonları DOM Düğüm Listeleri

JS Tarayıcı Malzeme Listesi

JS Penceresi JS Ekranı JS Konumu JS Geçmişi JS Navigatörü JS Açılır Pencere Uyarısı JS Zamanlaması JS Çerezleri

JS Web API'leri

Web API'sine Giriş Web Formları API'sı Web Geçmişi API'si Web Depolama API'sı Web Çalışanı API'si Web Getirme API'sı Web Coğrafi Konum API'sı

JS AJAX

AJAX'a Giriş AJAX XMLHttp AJAX İsteği AJAX Yanıtı AJAX XML Dosyası AJAX PHP AJAX ASP AJAX Veritabanı AJAX Uygulamaları AJAX Örnekleri

JS JSON

JSON'a Giriş JSON Sözdizimi JSON'a karşı XML JSON Veri Türleri JSON Ayrıştırma JSON Stringify JSON Nesneleri JSON Dizileri JSON Sunucusu JSON PHP JSON HTML'si JSON JSONP

JS ve jQuery

jQuery Seçiciler jQuery HTML'si jQuery CSS'si jQuery DOM'si

JS Grafikleri

JS Grafikleri JS Tuval JS Konusu JS Chart.js JS Google Grafiği JS D3.js

JS Örnekleri

JS Örnekleri JS HTML DOM'si JS HTML Girişi JS HTML Nesneleri JS HTML Olayları JS Tarayıcı JS Editörü JS Alıştırmaları JS Testi JS Sertifikası

JS Referansları

JavaScript Nesneleri HTML DOM Nesneleri


JavaScript En İyi Uygulamaları


Global değişkenlerden kaçının, kaçının new, kaçının ==, kaçınıneval()


Global Değişkenlerden Kaçının

Global değişkenlerin kullanımını en aza indirin.

Bu, tüm veri türlerini, nesneleri ve işlevleri içerir.

Global değişkenler ve işlevlerin üzerine diğer komut dosyaları yazılabilir.

Bunun yerine yerel değişkenleri kullanın ve kapanışları nasıl kullanacağınızı öğrenin .


Her Zaman Yerel Değişkenleri Bildir

Bir fonksiyonda kullanılan tüm değişkenler yerel değişkenler olarak bildirilmelidir.

Yerel değişkenler anahtar kelime veya anahtar kelime veya anahtar kelime ile bildirilmelidir , aksi takdirde global değişkenler haline gelirler.varletconst

Katı mod, bildirilmemiş değişkenlere izin vermez.


Üstteki Beyanlar

Tüm bildirimleri her komut dosyasının veya işlevin en üstüne koymak iyi bir kodlama uygulamasıdır.

Bu irade:

  • Daha temiz kod ver
  • Yerel değişkenleri aramak için tek bir yer sağlayın
  • İstenmeyen (zımni) global değişkenlerden kaçınmayı kolaylaştırın
  • İstenmeyen yeniden bildirim olasılığını azaltın
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Bu aynı zamanda döngü değişkenleri için de geçerlidir:

for (let i = 0; i < 5; i++) {


Değişkenleri Başlat

Değişkenleri tanımladığınızda başlatmak iyi bir kodlama uygulamasıdır.

Bu irade:

  • Daha temiz kod ver
  • Değişkenleri başlatmak için tek bir yer sağlayın
  • Tanımsız değerlerden kaçının
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Değişkenlerin başlatılması, amaçlanan kullanım (ve amaçlanan veri türü) hakkında bir fikir sağlar.


Const ile Nesneleri Bildirin

Nesneleri const ile bildirmek, herhangi bir kazara tür değişikliğini önleyecektir:

Örnek

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Dizileri const ile bildirin

Dizileri const ile bildirmek, herhangi bir kazara tür değişikliğini önleyecektir:

Örnek

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Yeni Nesne Kullanmayın()

  • ""yerine kullannew String()
  • 0yerine kullannew Number()
  • falseyerine kullannew Boolean()
  • {}yerine kullannew Object()
  • []yerine kullannew Array()
  • /()/yerine kullannew RegExp()
  • function (){}yerine kullannew Function()

Örnek

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Otomatik Tür Dönüşümlerine Dikkat Edin

JavaScript gevşek yazılmış.

Bir değişken tüm veri türlerini içerebilir.

Bir değişken, veri türünü değiştirebilir:

Örnek

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Sayıların yanlışlıkla dizelere veya NaN(Sayı Değil) dönüştürülebileceğine dikkat edin.

Matematiksel işlemler yaparken, JavaScript sayıları dizgelere dönüştürebilir:

Örnek

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Bir dizeden bir dize çıkarmak, bir hata oluşturmaz, ancak şunu döndürür NaN(Sayı Değil):

Örnek

"Hello" - "Dolly"    // returns NaN

Kullan === Karşılaştırma

Karşılaştırma operatörü , ==karşılaştırmadan önce her zaman (eşleşen türlere) dönüştürür.

Operatör , ===değerlerin ve türün karşılaştırmasını zorlar:

Örnek

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Parametre Varsayılanlarını Kullan

Bir işlev eksik bir argümanla çağrılırsa, eksik argümanın değeri olarak ayarlanır undefined.

Tanımsız değerler kodunuzu bozabilir. Argümanlara varsayılan değerler atamak iyi bir alışkanlıktır.

Örnek

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 , fonksiyon tanımında varsayılan parametrelere izin verir:

function (a=1, b=1) { /*function code*/ }

İşlev Parametrelerinde işlev parametreleri ve bağımsız değişkenler hakkında daha fazla bilgi edinin


Anahtarlarınızı Varsayılanlarla Sonlandırın

switchİfadelerinizi her zaman bir ile bitirin default. Buna gerek olmadığını düşünseniz bile.

Örnek

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Nesne Olarak Sayı, Dize ve Boole'den Kaçının

Sayıları, dizeleri veya booleanları her zaman ilkel değerler olarak ele alın. Nesneler olarak değil.

Bu türleri nesne olarak bildirmek, yürütme hızını yavaşlatır ve kötü yan etkiler üretir:

Örnek

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Veya daha da kötüsü:

Örnek

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

eval() kullanmaktan kaçının

İşlev eval(), metni kod olarak çalıştırmak için kullanılır. Hemen hemen her durumda, onu kullanmak gerekli olmamalıdır.

Rasgele kodun çalıştırılmasına izin verdiği için, aynı zamanda bir güvenlik sorununu da temsil eder.