Bir javascript programcısının sorumlulukları nelerdir? JavaScript Programlama Dili: Yeni Başlayanlar İçin Bilgiler. JavaScript nedir?

Javascript sürekli gelişen bir dildir, özellikle ECMAScript spesifikasyon güncellemeleri yıllık olarak yayınlanacak şekilde ayarlandığından. Bu bakımdan jQuery dışında Javascript bilmenin önemi artıyor.

Tabii ki, bu yazıda gerekli tüm bilgileri kapsayamayacağız. Elbette kaçırdığım anlar olacak, belki yanıldım veya gerekli bilgi seti hakkındaki görüşlerimiz farklı olacaktır.

Bu yönleri göz önünde bulundurarak başlayalım ...

FizzBizz testi nedir

FizzBizz genellikle deneyimsiz geliştiricileri ayıklamayı amaçlayan küçük bir testtir. Bence kaç javascript geliştiricisinin bu tür testleri nasıl yazacağını bilmediğine şaşıracaksınız.

Kural olarak, bu tür testler büyük bir anlamsal yük taşımaz. Yalnızca potansiyel adayların yeteneklerini test etmeyi amaçlamaktadır.

Unutmayın, bir mülakatta sizden böyle bir sınava girmeniz istenme olasılığı çok yüksektir.

Klasik bir FizzBizz testi örneği:

Bu tür testler için seçenekler sonsuzdur. Bir keresinde bir röportajda böyle bir testle karşılaştım ve ardından iki seçeneğe daha karar vermem gerekti.

için (var ben = 1; ben<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

== ve === arasındaki fark

Muhtemelen her iki karşılaştırma işlecine de aşinasınızdır. Ancak, bu operatörlerin tam olarak nasıl farklı olduğunu biliyor musunuz? Javascript Linter'iniz === operatörünü kullanmanızı gerektiriyor, neden acaba?

İşlenenlerin türlerini karşılaştırmaz; bunun yerine onları aynı türe çevirir. Böyle bir operasyon olumsuz bir itibara sahiptir.

Console.log(24 == "24"); // doğru

Gördüğünüz gibi, 24 dize değeri (tek tırnak içinde) bir tamsayı türüne dönüştürüldü. Elbette, tam olarak istediğiniz şeyin bu olduğu durumlar vardır, ancak çoğu zaman muhtemelen karşılaştırma operatörünün veri türlerini manipüle etmesini istemezsiniz. Verilerin == operatörünü kullanarak karşılaştırılması önerilmez, çoğu javascript kod stili kontrol sistemi sizi bu hataya yönlendirecektir.

=== (katı karşılaştırma) veri türlerini aynı türe dönüştürmeden karşılaştırır, yani veriler olduğu gibi karşılaştırılır. Ayrıca bu işlem tip dökümü içermediği için daha hızlı çalışmaktadır. Dolayısıyla bu operatörün doğru çalışması için aynı tip operatörlere ihtiyaç vardır.

Aynı örnek, ancak === işleciyle

Console.log(24 === "24"); // YANLIŞ

Yanıt olarak, işlenenler farklı türlerde olduğundan, bunlardan biri tamsayı türü ve ikincisi bir dize türü olduğu için false alırız.

Ek kitaplıklar olmadan DOM öğeleri nasıl seçilir

Elbette jQuery ile öğelerin nasıl seçileceğini biliyorsunuzdur, ancak aynısını bu kitaplığın yardımı olmadan da yapabilir misiniz?

Yalnızca belirli bir kimliğe veya sınıf kümesine sahip bir öğe seçmekten bahsetmiyorum, jQuery kullanarak öğeleri bulmaya yönelik ifadelerden bahsediyorum.

DOM'da jQuery kadar iyi olan öğeleri bulmak için birkaç yerel yöntem vardır. First-child , last-child vb. de kullanabiliriz.

Bu yöntemlerden bazılarına bir göz atalım.

• Document.getElementById, öğeleri kimliklerine göre bulmanın klasik yöntemidir.
• Document.getElementsByClassName - öğeleri className alan değerine göre getirir
• Document.querySelector, jQuery'nin $() seçicisinin neredeyse tamamen yerini alan harika bir yöntemdir, ancak zaten Javascript'e dahil edilmiştir. Tek fark, yalnızca bulduğu ilk öğeyi döndürmesidir.
• Document.querySelectorAll, önceki yönteme benzer, ancak bulunan öğelerin bir dizisini döndürür.
• document.getElementsByTagName - Bu yöntem, öğeleri etiket adına göre seçmenize yardımcı olur. Tüm div öğelerini bulmanız gerekiyorsa, bu yönteme ihtiyacınız vardır.

Ayrıca, querySelector ve querySelectorAll yöntemlerinin yalnızca tüm belgede değil, tek tek öğelerde de kullanılabileceğini, yani bir üst öğe içinde seçim yapabileceğinizi belirtmek isterim.

Bu yöntemlerin tam açıklaması için mozilla belgelerine bakın.

Kaldırma değişkeni ve işlev bildirimleri

Javascript, tümü otomatik olarak kapsamın en üstüne yükseltilen, bildirilen değişkenleri ve işlevleri nasıl ele aldığı konusunda ilginçtir. Bu şekilde, kapsam içinde ilan edilmeden önce onlara başvurabilirsiniz (örneğin, javascript'teki işlevlerin kendi kapsamları vardır).

Bu nedenle, kodun okunabilirliği için, kapsamın başında DAİMA değişken bildirmeyi bir kural haline getirin. Bir betiğin veya işlevin başında 'katı' kullan'ı belirtirseniz, bildirilmemiş bir değişkene erişirken bir hata alırsınız.

Jshint gibi kod stili kontrol araçlarının çoğu, 'usestrict' kullanmazsanız size bir hata verecektir, bu nedenle, iyi bir kod yazmaya çalışıyorsanız, zaten bildirilmeden önce değişkenleri kullanamazsınız. Her zaman olduğu gibi, herhangi bir sorunuz varsa, lütfen mozilla'nın belgelerine bakın, orada her zaman sorununuzun tam ve kapsamlı bir açıklamasını bulacaksınız.

Tarayıcıda geliştirici araçlarını kullanma

Çoğu zaman, bu tür araçlar javascript betiklerinde hata ayıklamak için kullanılır, ancak işlevleri bununla sınırlı değildir. Örneğin, bir kesme noktası kullanabilir, betiğinizde adım adım ilerleyebilir, bunu yaparken her işleve adım atabilirsiniz.

Bu araçlar, uygulamanızın performansını tam olarak izleyebileceğiniz ve sorunlu alanları bulabileceğiniz için vazgeçilmez yardımcılardır.

Geliştirici araçlarının Chrome, Firefox ve Internet Explorer'ın en son sürümleri gibi tarayıcılarda nasıl kullanılacağını öğrenerek, komut dosyanızın hatalarını ayıklayabilir, performansını ölçebilir ve algoritmayı iyileştirmeye değer yerleri bulabilirsiniz.

Hiçbir zaman kodda hata ayıklamaya çalışmayın, her zaman önce geliştirici araçlarıyla analiz edin. Var olmayan sorunları çözmek zaman kaybıdır.

Konsol komutları

Geliştirici araçlarını öğrenmede bir sonraki noktaya geçelim. Tipik olarak hepsi, Javascript kodunu etkileşimli olarak çalıştırabileceğiniz bir konsol sunar.

Muhtemelen console.log ve console.error gibi komutlara zaten aşinasınızdır, ancak konsolun işlevleri bununla sınırlı değildir.

Listelenen komutların hepsinin tüm tarayıcılarda çalışmayacağını hemen not etmek istiyorum. Yalnızca modern tarayıcılarda çalışanlardan bahsetmeye çalışacağım. Bununla birlikte, bir tavsiye olarak, kodu boşuna yığmamak için bunları kullanmadan önce performanslarını kendiniz kontrol etmeye çalışın.

• console.log - olayları günlüğe kaydetmek için kullanılır. Biçimlendirmeyi destekler.
• console.error - koddaki hataları günlüğe kaydetmek için. AJAX isteklerinde ve kodun diğer potansiyel olarak tehlikeli bölümlerinde hatalar olduğunda bu komutu kullanıyorum. Yöntem öncekine benzer, ancak yığın çağrılarının bir listesini yazdırır.
• console.dir(object) - Nesnenin biçimlendirilmiş içeriğini görüntüler. Kural olarak, bu yöntem kod hatalarını ayıklarken çok kullanışlıdır.
• console.group(title) - başlık adı verilen bir grup günlük mesajı oluşturmanıza olanak sağlar. Böylece mesajları, örneğin oluşturuldukları kod bölümüne göre gruplandırabilirsiniz.
• console.groupCollpased, bir istisna dışında önceki komuta benzer. Yani mesajları daraltılmış bir biçimde görüntüler.
• console.groupEnd - Önceden oluşturulmuş bir grubu sonlandırır.
• console.time(label) - sitenin hızını milisaniye cinsinden izlemenizi sağlar. Yöntem, potansiyel olarak zor kod bölümlerini yakalamak için kullanışlıdır.
• console.timeEnd(label), groupEnd yöntemine benzer, ancak console.time() ile ilişkili olarak çalışır.
• copy(string) - Chrome ve Firefox konsolunda, bir dizenin içeriğini panoya kopyalamanıza izin veren bir yöntem vardır. Çok faydalı bir yöntem, deneyin.

Bunda tam olarak ne var

Her şeyden önce, bu anahtar kelimenin arkasında tam olarak ne olduğunu tam olarak anlamayanlar için bu büyük bir sorun kaynağıdır. Ve içeriği tamamen kodun yapısına bağlı olduğu için bunda hata yapmak çok kolaydır.

Geleneksel programlama dillerinde bu, geçerli sınıf nesnesine bir referans içerir. Ancak javascript geleneksel olmaktan uzak olduğundan, bu değişkende yöntemin ana nesnesini ifade eder.

Bunu anlamanın en kolay yolu, onu bir yöntemin sahibi veya ebeveyni olarak almaktır. call , Apply veya bind yöntemlerini kullandığınız zamanlar dışında bu her zaman üst öğeye atıfta bulunur.

Aşağıdaki örnekte bu, pencere nesnesine atıfta bulunur:

function myFunction() ( console.log(this === pencere); // true ) myFunction();

Elbette bir sorunuz var, yöntem içinde ona atıfta bulunursak, bu nasıl pencereye eşit olabilir? Bu sorunun cevabını biliyorsanız, o zaman harika, aksi takdirde okumaya devam edin ve açıklamaya çalışacağım.

Bir işlev bu şekilde bildirildiğinde, genel pencere nesnesine bağlanır. Bunun yöntemin ebeveynine atıfta bulunduğunu söylediğimizi hatırlıyor musunuz?

Bunun değerini tamamen yeni bir nesneye değiştirmek (pencere değil):

function myFunction() ( console.log(this === window); // false ) new myFunction();

Temiz kodun savunucuları, muhtemelen böyle bir örnek karşısında şok olurlar. Bu tür örneklerle buzdağının sadece görünen kısmında yürüyoruz. Kendiniz de görebileceğiniz gibi, bunun değeri artık window değerine eşit değil.

Neden oldu?

En basit açıklama, ikinci örnekte new anahtar kelimesini kullandık, böylece yeni bir kapsam ve yeni bir nesne yarattık.

Aşağıdaki örnekte, bir sunucudan bir kitaplıktan veri yüklemek için sahte bir API oluşturacağız. Bazı metotlarla bir API nesnesi oluşturacağız.

Yeni kelimesini kullanırken, betik içeriği pencere bağlamından API'ye taşınır.

Var API = ( getData: function() ( console.log(bu === pencere); // false console.log(bu === API); // true ) ) ; API.getData();

Gördüğünüz gibi, bu değer tamamen yöntemin çağrılmasıyla belirlenir. İşlev, üst öğesi olan API nesnesi içinde çağrıldığından, this değeri API nesnesini ifade eder.

Unutmayın, bunun değeri değişir. Nasıl adlandırdığınıza bağlı olarak değişir, ancak bind yöntemini kullanırsanız, bunun değeri aynı kalır.

Quirksmode makalesinde ve Mozilla'nın belgelerinde javascript'te this anahtar kelimesi hakkında daha fazla bilgi edinebilirsiniz.

'katı kullanın';

Daha önce de belirttiğimiz gibi, kullanıcı katı, javascript dilinin daha katı bir sürümünü uygulamak için kullanılır. Bu direktif tüm betiklerde kullanılmalıdır.

Varsayılan olarak, javascript sözdiziminde oldukça gevşektir. Hatalı kod parçasını atlayacak ve size hiçbir şey söylemeden sonraki satırları yürütmeye çalışacaktır.

Mozilla'nın belgelerinde bu konuyla ilgili bütün bir makale var, okumanızı şiddetle tavsiye ederim.

Farklı döngü türleri

Şaşıracaksınız, ancak for döngüsünü doğru kullanmayı bilmeyen ve diğer döngü türlerini kesinlikle duymamış çok sayıda geliştiriciyle tanıştım. Ve bir dizi veya nesne üzerinde döngü yapabilmek, bir geliştirici için çok önemli bir beceridir. Ne zaman ve ne tür kür kullanılacağına dair net bir talimat yoktur, ancak bu konuda yönlendirilmeniz gerekir. Muhtemelen uzun zamandır aşinasınızdır, peki ya diğerleri?

Javascript'teki döngülerin listesi:

• için..içinde
• for..of (ES6'da eklendi)
• her biri için
• sırasında
• yaparken

döngü için

Bilmeniz ve anlamanız gereken kesinlikle zorunlu bir döngü. Koşul 2 karşılandığında vücudunu infaz eder.

For (koşul 1; koşul 2; koşul 3) ( // Kodunuz )

Koşul 1 - bir dizi döngünün başlamasından önce bir kez karşılanır. Çoğu durumda döngü sayacını burada başlatırsınız. Daha önce başlatma yaptıysanız bu öğe atlanabilir.

Koşul 2 - Bu koşul, döngüye devam edilip edilmeyeceğini belirlemek için kullanılır. Muhtemelen sayacınızı buradaki dizinin boyutuyla karşılaştıracaksınız. Karşılaştırma değeri doğruysa döngü devam eder. Döngüyü dahili olarak break ile kırarsanız, bu koşul atlanabilir.

Koşul 3 - bu bölüm her yinelemeden sonra yürütülür, kural olarak burası sayacınızı artırdığınız yerdir.

for...in döngüsü

Bir sonraki en önemli döngü türü. Bununla birlikte, sınıfın tüm alanlarından geçebileceksiniz.

Bir örnek alalım.

Kişi var = ( firstName: "Dwayne", lastName: "Charrington", yaş: 27, starSign: "Kova" ); // Aşağıdaki döngünün çıktısı: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) ( if (person.hasOwnProperty(p)) ( console.log(person[ P]); ) )

for...of döngüsü

ES6'da oldukça yeni bir döngü türü eklendi. Yeniliği nedeniyle tüm tarayıcılar tarafından desteklenmemektedir. Ancak belirli teknolojilerin kullanılmasıyla günümüzde bunu uygulamak oldukça mümkündür.

Bu döngü for...in'in tam tersidir, alan değerleri üzerinde yinelenir ve yalnızca yinelemeyi destekleyen, Object'in desteklemediği veri türleriyle çalışır.

Var meyveler = ["portakal", "elma", "kabak", "armut"]; for (var meyve meyveleri) ( console.log(meyve); )

Bu tür bir döngünün en büyük avantajı, artık bir işaretçi oluşturmamıza ve dizi öğelerini tamamen yinelemek için dizinin uzunluğunu takip etmemize gerek olmamasıdır.

her döngü için

Derinliği bakımından daha önce listelenen döngü türlerinden farklı olmayan başka bir döngü türü.

Yalnızca dizilerle çalışır, nesnelerle çalışmaz. Bunun avantajı, sonunda kodunuzu kirletecek fazladan değişkenler oluşturmanız gerekmemesidir.\

Bu muhtemelen en sınırlı döngü türüdür, ancak bilmeniz gereken kendi uygulama alanları vardır:

Var meyveler = ["elma", "muz", "portakal", "üzüm", "armut", "çarkıfelek"]; // Geri arama işlevindeki üç değer şunlardır: // element - Geçilen öğe // index - 0'dan başlayan dizideki öğenin geçerli dizini // dizi - Gezilen dizi (muhtemelen çoğunlukla ilgisizdir) meyveler.forEach(function(element, index, array) ( console.log(index, element); ) );

Bazen bir dizideki tüm öğeleri gözden geçirmeniz ve belki de bunlarda bazı değişiklikler yapmanız gerekir. Davranışı jQuery.each'e benzer.

Bu tür döngünün bir dezavantajı, kesintiye uğramamasıdır. ES5 kurallarına göre bir döngü oluşturmanız gerekiyorsa, mozilla belgelerinde bulabileceğiniz Array.every yöntemini kullanın.

döngü sırasında

While döngüsü for'a benzer, ancak yalnızca bir parametre alır - döngünün yinelemeye devam edip etmeyeceğini veya onları durdurup durdurmayacağını belirlediği koşulun kendisi.

Bu tür bir döngü en hızlı olarak kabul edilse de, bu noktayı oldukça tartışmalı buluyorum. Bence bu tür bir döngünün diğerlerinden daha düzgün görünmediğini ve hızının yalnızca iç mantığın basitliği ile açıklanabileceğini tartışmayacaksınız.

Deneyimlerime göre, en hızlı while döngüsü azalma döngüsüdür, sıfıra ulaşana kadar (ki bu da tartışmalıdır) birer birer azaltırsınız.

Değişken = 20; while (i--) ( console.log(i); )

do...while döngüsü

Böyle bir döngü oldukça nadirdir, ancak işini anlamak için yine de onunla tanışmaya değer.

While döngüsü herhangi bir yinelemeyi tamamlamayabilir. Yani, döngüye koşul olarak yanlış bir değer iletirseniz, o zaman tek bir yineleme yapılmaz. do...while döngüsünün en az bir işlem yürütmesi garanti edilir.

Fark burada bitmiyor. While döngüsü, koşulu yinelemeden önce ve do...while döngüsünden sonra işler.

Her zaman olduğu gibi, mozilla belgelerinde bu tür döngülerin ayrıntılı bir açıklamasını bulacaksınız.

Temel Yöntemler ve Görevler

Javascript'te bilmeniz gereken temel yöntemler vardır. Diziler ve dizelerle çalışma açısından javascript, çok sayıda yerleşik yöntem sunar. Sadece dizilere ve dizilere değineceğiz, nesneleri sonraya bırakacağız.

Diğer veri türleriyle çalışmakla ilgileniyorsanız, mozilla belgelerine başvurmaktan çekinmeyin. Elbette tüm bu yöntemleri ezbere bilmemek gerekiyor, sadece gerekli gördüklerimi anlatacağım.

Dizelerle çalışma

JavaScript'te, olası diziler ve nesneler dışında çoğunlukla dize verileriyle çalışacaksınız. Dizelerle çalışmıyor olsanız veya çalışmadığınızı düşünüyor olsanız bile, yine de bu yöntemleri öğrenmeye değer.

• String.replace(regexp | neyin değiştirileceği, neyin değiştirileceği, geri çağırma) - bir dizgenin bir kısmını değiştirmenize olanak sağlar, normal ifadelere izin verilir.
• String.concat(satır 1, satır 2...) - birkaç satırın bir satırda birleştirilmesi.
• String.indexOf(değer) - yöntem, dizenin istenen bölümünün karakterinin sıra sayısını bulmanızı sağlar, -1 - dize bulunmazsa
• String.slice(startIndex, endIndex) - dizenin startIndex'ten endIndex'e kadar olan bölümünü döndürür
• String.split(separator, limit) - dizgiyi ayırıcı karaktere göre bir diziye böler, maksimum uzunluk sınırdır.
• String.subsctr(startIndex, uzunluk) - dizenin startIndex'ten başlayarak uzunluk uzunluğundaki kısmını döndürür.
• String.toLowerCase - Bir dizgedeki tüm karakterleri küçük harfe dönüştürür
• String.toUpperCase - dizenin tüm karakterlerini büyük harfe dönüştürür
• String.trim - bir dizenin başındaki ve sonundaki boşlukları kaldırır

Dizilerle çalışma

Dizilerle çok sık karşılaşacaksınız. Veri depolamanın bir yolu olarak kendilerini kanıtladılar. Bu yöntemler, herhangi bir javascript geliştiricisi için kesinlikle bilinmeye değerdir, bunları google'da kullanmayın.

• Array.pop - Son öğeyi döndürür ve onu diziden kaldırır.
• Array.shift - İlk öğeyi döndürür ve onu diziden kaldırır.
• Array.push(val1, val2) - dizinin sonuna bir veya daha fazla değer ekler. Dizinin yeni uzunluğunu döndürür.
• Array.reverse - dizi öğelerinin sırasını tersine çevirir.
• Array.sort([karşılaştırma işlevi]) - kendi işlevinizi kullanarak bir diziyi sıralamanıza olanak tanır.
• Array.join(separator) - Ayırıcı karakterle (varsayılan olarak virgül) ayrılmış bir dizinin öğelerinden oluşan bir dize döndürür.
• Array.indexOf(değer) - Dizideki öğenin dizinini, öğe bulunmazsa -1 döndürür.

Bu, dizilerle çalışmaya yönelik yöntemlerin tam listesi değildir. Diğerleri mozilla belgelerinde bulunabilir. ES6'dan bu yana bazı çok ilginç yöntemler eklendi.

Ara ve uygula arasındaki fark

Geliştiriciler genellikle bu iki yöntemi karıştırırlar. Genellikle onlarsız yapabilirsiniz, ancak yöntemleri çağırmanıza ve yürütme sırasında bu değeri değiştirmenize yardımcı olurlar.

Aralarındaki fark çok küçük ama var. call yöntemini kullanırken, virgülle ayırarak sonsuz sayıda argüman belirtebilirsiniz.

Apply yöntemiyle, argümanları bir dizi olarak iletebilir ve this değerini değiştirebilirsiniz.

Bir diziyi bir yönteme bağımsız değişken olarak iletmeniz gerekiyorsa, ES6'dan bu yana genişletilmiş (yayılma) bir işleç eklenmiştir. Bunun değerini değiştirmenize izin vermez. Her zaman olduğu gibi mozilla'nın resmi belgelerinde onunla tanışabilirsiniz.

çağrı örneği:

function myFunc() ( console.log(arguments); ) myFunc.call(this, 1, 2, 3, 4, 5);

uygulama örneği:

işlev myFunc() ( console.log(arguments); ) myFunc.call(null, );

Kitaplıklara ve çerçevelere giriş

Günümüzde javascript çerçevelerinin en önemli temsilcileri AngularJS, React.js ve Ember'dir. Tabii ki, birkaç tane daha var.

Web uygulamaları büyüdükçe ve büyüdükçe, bu kitaplıklar çalışmayı kolaylaştırır. Artık tek başına jQuery'yi bilmenin açıkça yeterli olmadığı anlaşılmalıdır. Boş pozisyonların çoğunda, ek javascript kitaplıklarının bilgisi temel bir gereklilik olarak sergilenir.

Node.js

Node.js'nin güçlü bir konumda olduğuna şüphe yok. Hemen hemen tüm ön uç araçları node.js üzerine kuruludur ve npm (düğüm paketi yöneticisi) kullanır, eğer ona aşina değilseniz, o zaman bu ihmali düzeltmenizi şiddetle tavsiye ederim. node.js javascript kullandığından, bu dile zaten aşina olanlar için öğrenmek çok zor değil. Düğüm paketlerini kurmak için asıl kodu yazmaktan daha fazla zaman harcarsınız.

Şahsen, Node'un 2015'teki her geliştiriciye aşina olması gerektiğini düşünüyorum. Derin bilgiden bahsetmiyorum, sunucu tarafı geliştirme, prototip oluşturma, test etme vb. için uygulayabilmeniz yeterli.

Bugün hemen hemen aynı olan IO.js adında bir node.js çatalı var ve günün sonunda, birkaç küçük farkla Javascript yazıyorsunuz.

Test yapmak

Bir zamanlar javascript kodunu hiç test etmedik çünkü gerekli görmedik. Ancak AngularJS ve Node.js sayesinde betikler gittikçe büyüyor.

Javascript gelişiyor ve komut dosyalarının hacmi artıyor ve test etme hayati önem taşıyor. Kodunuzu test etmezseniz, yanlış yapıyorsunuz demektir. En sevdiğim test cihazı Karma. Başkaları da var ama bu, AngularJS ile çalışırken en iyisi olduğunu kanıtladı. AngularJS için uygunsa benim için de uygundur.

Aletler

2015'te javascript geliştiricisi olmak, yalnızca mükemmel dil bilgisi değil, aynı zamanda onunla çalışmak için çok sayıda araç anlamına gelir.

Bazen araçlar, kullandığımız tarayıcının kendisini içerir. Ve bazen durumun daha derin bir analizini yapmak için üçüncü taraf araçlara başvurmanız gerekir.

İşte akılda tutulması gereken bir dizi araç: Gulp, Webpack ve BabelJS. Daha birçok araç var, ancak Gulp ve Grunt gibi araçlar, javascript uygulamalarını geliştirmenize ve yönetmenize büyük ölçüde yardımcı oluyor.

Bir javascript dosyasını indirip sayfanıza eklediğiniz günler geride kaldı. Artık NPM veya Bower paket yöneticilerini kullanıyoruz.

Komut dosyalarını birleştirip küçültüyoruz, test ediyoruz, bu da projenin yapısını düzenlemeye yardımcı oluyor.

Javascript araçları, izomorfik Javascript (hem istemci hem de sunucu tarafında kullanılan kod) geliştirirken el ele gider. ECMAScript 6, diğer adıyla ES6, diğer adıyla ESNext

Tarayıcılar henüz ECMAScript 6'nın işlevlerinin çoğunu uygulamamıştır. Ancak bugün javascript derleyicilerinin yardımıyla ES6'nın yeniliklerini kullanabilirsiniz. Yeni API'leri ve yöntemleri tanıyın: dizeler, diziler ve WeakMaps, Semboller ve Sınıflar gibi diğer yöntemler. Her zaman yaklaşan değişikliklerden haberdar olmalısınız.

Çözüm

Sana daha fazlasını söyleyebilirim. Bu makalenin boyutuna bakılırsa, bir javascript geliştiricisinin ne kadar çok şey bilmesi gerektiğini tahmin edebilirsiniz. Buzdağının sadece görünen kısmına dokunduk. Bu makalenin geliştirici için bir rehber olarak alınması gerektiğini düşünmeyin. Bu sadece sorunla ilgili kişisel görüşüm.

Altı Haftada Tam Yığın JavaScript'ten Uyarlanmıştır: Bir Müfredat Kılavuzu

Web geliştirme, acemi programcılar arasında en basit ve bu nedenle popüler alanlardan biridir. Çalışmak için herhangi bir metin düzenleyici ve tarayıcı yeterlidir, algoritmaları ileri düzeyde incelemenize gerek yoktur, bir program yazmanın her aşamasının sonucu açıktır - genel olarak birçok avantaj vardır. Web geliştirme bağlamında önemli bir beceri, JavaScript bilgisidir.

Artık JavaScript çok hızlı gelişiyor ve bu nedenle dili öğrenirken kafanın karışması çok kolay. Size JavaScript ve ilgili teknolojilerin tüm gerekli yönlerini kapsayan iyi yapılandırılmış bir müfredat sunuyoruz.

Neden JavaScript?

Dilin açıklığına dikkat çekmekte fayda var - genellikle birbirleriyle rekabet eden şirketler, JavaScript geliştirmek için işbirliği yapıyor. Dil çok esnektir ve hem nesne yönelimli hem de işlevsel yaklaşımların destekçilerine uygundur. Çok sayıda kitaplık ve çerçeve, her tür görevi çözmeyi kolaylaştırır ve Node.js sunucu platformu, dili yalnızca tarayıcıda değil, konsolda da kullanmayı mümkün kılar. İlki Electron çerçevesini kullanarak ve ikincisi NativeScript veya React Native kullanarak masaüstü ve mobil uygulamalar bile yazabilirsiniz.

Temel bilgiler

Öncelikle JavaScript'in temel kavramlarını, web geliştirmeyi ve genel olarak programlamayı öğrenmeniz gerekir:

• nesne yönelimli JS - yapıcılar ve fabrikalar, kalıtım;
• fonksiyonel JS - daha yüksek dereceli fonksiyonlar, kapanışlar, özyineleme;
• Yasemin testi özellikleri;
• HTML, CSS ve jQuery'nin temelleri.

git

Git, geliştiriciler için önemli bir araçtır, bu nedenle mümkün olduğunca erken kullanmaya başlamanız gerekir. İşte sahip olmanız gereken temel beceriler:

• dizinlerde dosya oluşturma ve taşıma;
• Git'te başlatma ve taahhütler;
• GitHub'da depolar kurmak.

Algoritmalar ve veri yapıları

Ardından, temel veri yapılarının yanı sıra algoritmaları (özellikle algoritmaların karmaşıklığı kavramını) incelemelisiniz: bağlantılı listeler, sıralar, yığınlar, ikili arama ağaçları ve karma tablolar. Bu sana yardım edecek.

arka uç

Node.js

10 yıl önce, JavaScript yalnızca ön uç geliştirme için kullanılabiliyordu. Artık Node.js sayesinde işler tek bir "cephe" ile sınırlı değil. Düğüm yalnızca sunucu tarafı bir JS kodu yürütme ortamıdır, bu nedenle yeni sözdizimi öğrenmeniz gerekmez, ancak dosyaları içe ve dışa aktarmanız, kodu modüllere ayırmanız ve npm paket yöneticisini kullanmanız gerekir.

Sunucular, HTTP, Express.js

Düğümü öğrendikten sonra, arka uç geliştirme ile tanışmaya ve sunucuları ve yönlendirmeyi anlamaya değer. HTTP'ye odaklanarak bağlantı noktaları ve protokollerle başlayabilir ve ardından istekleri işlemek için bir Düğüm kitaplığı olan Express'e geçebilirsiniz.

Eşzamansız JavaScript

Veritabanları, şemalar, modeller ve ORM

Veritabanları, web geliştirmenin en önemli unsurlarından biridir. Uygulamanızın sayfa yenilendiğinde kaybolmayan herhangi bir veriyi yüklemesi veya depolaması gerekiyorsa, bir veritabanı kullanmanız gerekecektir. İlişkisel ve ilişkisel olmayan veritabanlarını ayırt etmeyi ve ilişki türlerini anlamayı öğrenmeniz gerekir. O zaman farklı insanlar tanı. ORM ile çalışma yeteneği de gereksiz olmayacaktır.

Başlangıç ​​aşaması

HTML ve CSS

HTML ve CSS, herhangi bir web geliştiricisi için temel bilgilerin bel kemiğidir. Onları mükemmel bir şekilde bilmenize gerek yok ama onları anlamalısınız. CSS'nizi normal kod gibi göstermek için bazı popüler kitaplıkları (Önyükleme gibi) ve Sass gibi bir CSS ön işlemcisini de öğrenebilirsiniz. HTML ile çalışmayı basitleştirmek için pug gibi popüler şablon motorlarından birini seçebilirsiniz.

jQuery ve DOM manipülasyonu

HTML ve CSS ile sayfanın görünümünü ve hissini oluşturduktan sonra, DOM'u değiştirmek için jQuery kitaplığını da kullanıyor olacaksınız. Pek çok kişi jQuery'nin işe yaramaz olduğunu ve yakında yerini Angular ve React'in alacağını düşünüyor, ancak delicesine popüler ve bu nedenle bilinmeye değer. Ayrıca bir gün kendinizi React mikroskobu ile çivi çakmanın sizin için sakıncalı olacağı bir durumda bulacaksınız ve ardından hafif jQuery imdadınıza yetişecektir.

Chrome Geliştirici Araçları

Çok sayıda olasılık sağlayan Chrome araçlarını ihmal etmek affedilemez. Onlarla DOM öğelerini inceleyebilir, konsol aracılığıyla hata ayıklayabilir, rotaları izleyebilir ve çok daha fazlasını yapabilirsiniz. C, Chrome konsolunun rutin görevlerin performansını basitleştirecek çeşitli kullanışlı özelliklerini açıklar.

AJAX

Uygulamanızın her veritabanı işleminden sonra sayfaları yeniden yüklememesini istiyorsanız, kesinlikle AJAX'a ihtiyacınız vardır - arka planda eşzamansız HTTP istekleri gönderir, yanıtlar yalnızca ekranın bir bölümünü günceller. .ajax yöntemini kullanarak jQuery aracılığıyla AJAX ile çalışabilirsiniz.

Programlama sadece büyük para kazanmanın bir yolu değildir ve hatta tamamen zihinsel bir çalışma değildir. Bu, çevreleyen dünyanın nelerden oluştuğunu anlamak, onu küçük parçacıklara ayırmak ve ardından kendi mantığınızın ve bilginizin rehberliğinde yeniden birleştirmek için bir fırsattır.

Programlama dilleri, bir kişinin oluşturulan sistemlerde kurallar oluşturduğu bir araçtır.

İnternet, parlak ve girişimci beyinlerin değerlendirdiği çok sayıda fırsat sunuyor. Elbette web geliştirmenin fikirleri hayata geçirmek için kendi araçları da vardır. Bunlardan biri, bu makalede ele alınacak olan JavaScript programlama dilidir:

Genel bilgi

Pek çok kişi, hatta IT alanıyla hiçbir ilgisi olmayanlar bile Java kelimesini duymuştur. Mobil sistemlere yönelik uygulamalar için aktif olarak yazılmış, devrim niteliğinde platformdan bağımsız bir dil. Daha sonra Oracle'ın kanatları altına giren gelecek vaat eden Sun şirketi tarafından geliştirildi. Ancak hiçbir şirketin JavaScript ile ilgisi yoktur:

Sun'ın yalnızca adın bir kısmını kullanmak için izne ihtiyacı vardı. Şaşırtıcı bir şekilde, JavaScript hiçbir firmaya ait değildir.

Web uygulamaları yazarken en sık JavaScript programlama kullanılır. Bu dilin temel özelliklerini kısaca sıralayacak olursak, aşağıdakileri vurgulamalıyız:

• Nesne yönelimi. Program yürütme, nesnelerin etkileşimidir;
• Veri türü dönüştürmesi otomatik olarak yapılır;
• Fonksiyonlar temel sınıfın nesneleridir. Bu özellik, JavaScript'i Lisp ve Haskell gibi birçok işlevsel programlama diline benzer hale getirir;
• Otomatik bellek temizleme. Sözde çöp toplama, JavaScript'in C# veya Java gibi görünmesini sağlar.

JavaScript kullanmanın özünden bahsedersek, bu dil, yürütme için çalıştırılabilen kodu kullanarak sitelerin sabit sayfalarını "canlandırmanıza" olanak tanır ( sözde komut dosyaları). Yani, html ve css'nin çizilen karakterler olduğu ve onları hareket ettiren şeyin JavaScript olduğu çizgi filmlerle bir benzetme çizebilirsiniz.

JavaScript sözdizimi hakkında konuşursak, aşağıdaki özelliklere sahiptir:

• Kayıt önemlidir. func() ve Func() adlı işlevler tamamen farklıdır;
• İfadelerden sonra noktalı virgül koymalısınız;
• Yerleşik nesneler ve işlemler;
• Boşluklar dikkate alınmaz. Kodunuzu biçimlendirmek için yeni satırların yanı sıra istediğiniz kadar girinti kullanabilirsiniz.

En basit JavaScript kodu şöyle görünür:

Uygulama kapsamı

JavaScript'e neden ihtiyaç duyulduğunu ve ne kadar çalışılması gerektiğini anlamak için bu programlama dilinin kullanıldığı bazı alanların altını çizmek gerekiyor.

• Web uygulamalarının geliştirilmesi. Basit bir sayaç kurmak, formlar arası veri aktarımını organize etmek veya sitenize bir oyun yerleştirmek mi istiyorsunuz? O zaman JavaScript bu konuda sadık bir yardımcı olarak hareket edecek;
• AJAX'a "Aktif Katılım". Bu teknoloji, "arka plan" modunda sunucuyla veri alışverişi yaparak uygulamaların çalışmasını önemli ölçüde hızlandırmayı mümkün kıldı:

• İŞLETİM SİSTEMİ. Belki birisi bilmiyordu, ancak Windows, Linux ve Mac'in tarayıcı rakipleri var, kodunda aslan payı JavaScript'te yazılmış;
• Mobil uygulamalar;
• Öğrenme alanı. Üniversitedeki herhangi bir programlama uzmanlığı, bir ciltte JavaScript çalışmasını içerir. Bunun nedeni, dilin orijinal olarak çok güçlü olmayan programcılar için geliştirilmiş olmasıdır. JavaScript dersleri, temel HTML kursuna mantıksal olarak işlenmiştir, bu nedenle ustalaşmak oldukça basittir.

Avantajlar ve dezavantajlar

JavaScript'in tüm sorunlara bir tür her derde deva olduğunu düşünmemelisiniz ve her programcı bu dili yüzünde bir gülümsemeyle kullanır. Dünyadaki her şeyin olumlu ve olumsuz yanları vardır. Öncelikle eksikliklere bakalım.

• Tarayıcılar arası uyumluluğu sağlama ihtiyacı. JavaScript bir İnternet teknolojisi gibi davrandığından, World Wide Web'in koyduğu kurallara uymanız gerekir. Kod, tüm tarayıcılarda veya en azından en popüler tarayıcılarda doğru şekilde çalışmalıdır;
• Dildeki kalıtım sistemi, olup biteni anlamayı zorlaştırır. JavaScript, prototip tabanlı kalıtımı uygular. Diğer nesne yönelimli programlama dillerini öğrenmiş olan kişiler, tanıdık " alt sınıf, üst sınıfı devralır". Ancak JavaScript'te bu tür şeyler doğrudan nesneler tarafından işlenir ve bu kafaya sığmaz;
• Standart bir kütüphane yoktur. JavaScript, dosyalarla, G/Ç akışlarıyla ve diğer faydalı şeylerle çalışmak için herhangi bir kolaylık sağlamaz;
• Genel olarak sözdizimi anlamayı zorlaştırır. Kodun güzelliği açıkça JavaScript'in güçlü noktası değildir, ancak programcıların ana kuralı gözetilir: " İşler? dokunma!».

Şimdi bazı avantajlara dikkat çekmeye değer

• JavaScript, çok çeşitli görevleri çözmek için çok sayıda olasılık sağlar. Dilin esnekliği, belirli koşullarla ilgili olarak birçok programlama modelinin kullanılmasına izin verir. Yaratıcı bir zihin gerçek zevk alacaktır;
• JavaScript'in popülaritesi, programcı için önemli sayıda hazır kitaplık açar, bu da kod yazmayı önemli ölçüde basitleştirebilir ve sözdizimi kusurlarını düzeltebilir;
• Birçok alanda uygulama. JavaScript'in geniş olanakları, programcılara kendilerini çok çeşitli uygulamaların geliştiricisi olarak deneme şansı verir ve bu, elbette profesyonel faaliyetlere olan ilgiyi artırır.

Eksilerin artılardan daha fazla olmasına dikkat etmeyin. JavaScript, nişine sıkıca yerleşmiştir ve şu anda hiçbir eleştiri onu oradan çıkaramaz.

okumak isteyenler için

JavaScript'i kapsamlı bir şekilde incelemeye karar verenleri zor ve uzun bir yol bekliyor. Yeni başlayanlar için, eğitiminizi büyük ölçüde basitleştirebileceğiniz temel öneriler vardır.

• Her şeyden önce HTML'dir. Temel bilgiler olmadan internet için hiçbir şey yapmaya başlayamazsınız. Basamaklı Stil Sayfaları (CSS) da çok kullanışlıdır;
• Yeni literatür kullanın. Programlama, yasaları çiğnenemez olan fizik değildir ve yeni öğreticiler eskilerden çıkarılır. BT teknolojileri sürekli gelişmektedir ve yararlı güncellemeler ihmal edilmemelidir;
• Programın tüm bölümlerini kendiniz yazmaya çalışın. Bir şey hiç yolunda gitmezse, başka birinin kodunu ödünç alabilirsiniz, ancak yalnızca her satırı kendiniz için netleştirdikten sonra;
• Hata ayıklama senin gerçek arkadaşın. Hataları hızlı bir şekilde bulmak, programlamadaki en önemli şeylerden biridir;
• Biçimlendirme kurallarını göz ardı etmeyin. Tabii ki, kod farklı sayıda girinti ve boşluktan daha iyi veya daha kötü hale gelmeyecektir, ancak programcı tarafından okuma ve anlama kolaylığı da önemli bir noktadır. Aşağıdaki kod? algılaması çok zor, özellikle de onun değilsen

• Değişken adlarının sözcük anlamı olmalıdır. Basit programlar yazma sürecinde bu hiç de önemli görünmüyor, ancak kod satırı sayısı bini geçtiğinde tüm şeytanların bacaklarını kırıyor;