Kod Şiirleri Yazarak Kodlamayı Öğrenmek

2008'de tasarım okumaya başladım ve açıkça kod görüşünün beni nasıl korkuttuğunu hatırlıyorum. Bazı kodlama derslerim vardı ve önceden kodlama deneyimim olmadığı için ilk temas kurduğum kodu anlamakta zorlandım. İngilizce'de alıştığım sözcükler ("new", "return" ve "throw/catch" gibi) birdenbire yepyeni bir anlam kazandı; şifreli sözdizimi, noktalı virgüller, parantezler ve tamamen yeni kurallar işleri benim için daha kolay hale getirmedi.

JavaScript'te yeniyseniz ve/veya onu beceri setinize eklemekte zorlanıyorsanız, bu engelleri aşmanız için size bir yaklaşımım olabilir. Kesinlikle yalnız değilsiniz ve kodlamayı öğrenmenin kırılması zor bir ceviz olduğunu düşünmeye hakkınız var.

Kodlamayı Öğrenmek Neden Bu Kadar Zor?

İnsanların JavaScript'i (ya da herhangi bir kodlama dilini) öğrenmekte veya ona ilgi duymakta neden zorlandıklarını düşündüğümle ilgili bazı yanlış kanılar şunlardır:

• Kod şifrelidir, tamamen işlevseldir ve korkutucudur;
• Kod yalnızca makineler içindir, bu nedenle insanlar kendilerine hitap edildiğini veya meşgul olduklarını hissetmezler;
• Kod bir dil olarak ele alınmaz çünkü tamamen farklı bir kullanım durumuna sahiptir ve daha önce gördüklerinden çok farklı görünür;
• İnsanlar stereotipleri düşünürler (kötü bilgisayar korsanları, belki bazı Matrix adamları) ve bu nedenle kendilerini bunlarla özdeşleştirmezler.
  

Bir geliştirici olarak, kodu çok özel bir şekilde ele almanız beklenir - hatta oldukça farklı (ve oldukça mantıklı) bir şekilde düşünmeniz bile. Kodlama dilleri oldukça katı ve hoşgörüsüzdür; tek bir karakter, makinenin ne demek istediğinizi anlamamasına ve uygulamaların çökmesine neden olabilir. Bir insan dilini konuşmaktan ve yazmaktan bildiğiniz bazı şeyleri görmezden gelmeniz ve geçersiz kılmanız beklenir (bu arada, yeni bir insan dili öğrenirken de geçerlidir).

Ancak web'deki tüm programlama dilleri, belgeler veya video eğitimleri bu "insandan programlama diline geçiş" göz önünde bulundurularak yapılmaz. Tabii ki, zorunda değiller. Sonuçta, kodun asıl amacı makinelere ne yapacaklarını söylemektir.

Yine de, bu amaç nedeniyle, bir karşılaştırma şansı basitçe eksik ve konuştuğunuz diller (kelime bilgisi ve kurallar) bir programlama dili öğrenmek için işe yaramaz hale getirilmiş gibi görünüyor. JavaScript dilinde "aşk" için bir kelime yoktur ve "Seni seviyorum" demek de mantıklı değildir. Bir makine (veya tarayıcı) aşkı bilmiyor veya umursamıyor (henüz?). Bu “tamamen yeni” ve “nereden başlayacağımı bilmiyorum” hissi cehennem kadar korkutucu olabilir.

Bu yüzden buradayım. JavaScript'i insan dili bilginizi sürdürerek ve JavaScript'i diğer herhangi bir insan dili gibi ele alarak çok daha kolay ve sanatsal bir şekilde öğrenebileceğinizi düşünüyorum. Küçük bir örnekle göstereyim.

Eğlenceli gerçek : Bazı programlama dilleri aslında bir programlama dilinden diğerine geçişi göz önünde bulundurur. Bu nedenle, birçok programlama dilini öğrenmek çok daha kolaydır - sadece bir tanesini öğrenerek.

Küçük Bir Örnek

Çoğu durumda, JavaScript kodunu çalıştırmak istediğinizde, örneğin HTML öğeleriyle etkileşime girebilmeniz için "belgenin" (temelde web sitesi, bir kullanıcının her ziyarette indirdiği) hazır olmasını istersiniz. Saf JavaScript'te, şöyle bir şeye rastlayabilirsiniz:

 (function() { // Your code goes here })();

(Yuck! Bu durumda, bir fonksiyon parantez içinde tanımlanır ve hemen sonunda başka bir parantez çifti ile çağrılır. Buna IIFE denir.)

Veya bazen şöyle:

 if (document.readyState === 'complete') { // Your code goes here }

İlk snippet kesinlikle bir açıklama gerektirirken, ikincisinde (ve belki biraz fantezi) yerine getirilmesi gereken bir koşulun olduğu, böylece başka bir şeyin gerçekleşmesi için sadece ona bakarak anlaşılabilir.

Yine de şöyle bir şey hayal edin:

 onceUponATime(function () { // Your code (story) goes here })

“Bir varmış bir yokmuş” bir çocuğun bile anlayabileceği bir şeydir (söylemeye cüret edebilirim). Teorik olarak aynı şeyi yaparken (çocukluk anılarına atıfta bulunarak) geliştiriciye hitap eder. Aklımda “kodlayıcı dil geçişine insan olması” olduğunu düşündüğüm şey bu.

“İşlevler” hakkında kısa not : Bir işlev, temelde siz onu çağırana kadar uykuda olan bir beceridir. “Okumak”, şunun gibi bir şey okumak istediğinizde çağrılan function read() { … } : read() . Ayrıca "anonim işlevler" adı verilen bir şey de vardır, yani "function() { … } (yukarıdaki snippet'lerde olduğu gibi adı yoktur) temel olarak bir beceri olarak kabul etmeyeceğiniz "tek seferlik / gündelik eylemler"dir. "bir düğmeye basmak" gibi.

Tabloları Döndürmek: Mesajdan Temel Bilgilere

Öyleyse bu fikri biraz daha ileri götürelim. Yukarıdaki sebepleri ve kavram yanılgılarını ele alalım ve alt üst edelim:

Küçük bir şiir.

JavaScript'te yazılmıştır.

İnsan için yapılmıştır.

İki kişi arasındaki aşk hakkında.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

İşlevsel değil. Şu anda makineler için tasarlanmamıştır. Okumanız ve anlamanız içindir.

Şiirin mesajını aldıysanız, aslında İngilizce ile karşılaştırmış olabileceğiniz bir JavaScript kodunu anladınız.

Şimdi kendinize şunu sorabilirsiniz: Bunu anlıyorum ama neden böyle yazılmış? Bu dilin kuralları (gramer) nelerdir? “Ben”in (teknik anlamda) anlamı nedir ve bu kod neden İngilizce'ye bu kadar benziyor?

Kurallar, Kelime Bilgisi ve Değişkenler

Bir programlama dili öğrenirken anlaşılması gereken en önemli şeylerden biri değişkenler kavramıdır .

Her insan dilinin kendi kuralları (gramer) ve bir çok kelime hazinesi (önceden tanımlanmış) vardır. Açıkçası, dili konuşabilmek için öncelikle bunların her ikisinin de öğrenilmesi gerekiyor.

window , diğer birçok programlama Event if , kendi kurallarıyla ( if , document arasındaki . Bu anahtar kelimeler JavaScript (ve tarayıcı) tarafından ayrılmıştır (veya 'önceden tanımlanmıştır) ve her birinin belirli bir amacı vardır.

Ancak daha önce de belirttiğim gibi, İngilizce dilinden bildiğiniz kelime ve cümleleri karşılaştırma şansı yok gibi görünüyor çünkü eşdeğerleri yok .

Değişkenler burada devreye girer; siz (geliştirici), makinelerin ve geliştiricilerin bir şeyin ne anlama geldiğini anlamalarını sağlamak için değişkenleri tanımlayabilirsiniz (hatta zorunda kalabilirsiniz). Değişkenler birçok form alabilir (dolayısıyla adı): Bunlar bir kelime ve harf zinciri (dizeler), bir sayı, bir eylem (işlev) ve hatta bir koleksiyon (dizi) olabilir. Adını koy.

Tüm dillerde muhtemelen aşk için bir kelime vardır. Bunun ne anlama geldiğini az çok biliyorsun, ama gerçekten değil, çünkü çok öznel. Ama yine de, bunun için bir kelime var.

Ancak JavaScript'te, siz var olduğunu söyleyene kadar “aşk” yoktur. Sen ne istersen o olabilir.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = { renk: 'mor', süre: 'sonsuza kadar', loveTarget: 'köpekler', };
 // ayrıca love2'nin (sabit) olduğu değişken bir ifade // yeniden tanımlanamaz / tamamen üzerine yazılamaz: // love2 = tanımsız; // => çalışmayacak
 // ("undefined", önceden tanımlanmış bir javascript anahtar sözcüğüdür, // temelde "değeri yoktur" der)

JavaScript'te önceden tanımlanmış olan (JavaScript kuralları ve kelime bilgisi) ile geliştirici tarafından gerçekten özel olarak tanımlanmış olan ('uygulama mantığı' veya 'iş mantığı' olarak da bilinir) arasında ayrım yapabilmek çok önemlidir.

Yukarıda yazılan şiire dönersek:

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Bu ifadeler aşağıdaki JavaScript sözlüğünden/kural kümesinden gelir:

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Daha Büyük Bir Örnek: Etkileşimli Kod Şiiri

Kişisel projem LoveBits böyle ortaya çıktı. LoveBits bir kod öğrenme/hikaye anlatma deneyimidir.

İnsanların JavaScript/kodlama ile ilgilenmesini sağlamaya çalışır:

• Okunabilirliği ve insan dilini ilk sıraya koymak;
• Kodu, okuyucunun zaten aşina olabileceği bir sanatla birleştirmek.

Hikaye olarak, yaklaşık iki Bit (dikdörtgen varlıklar); Bitlerden biri (blueBit) romantik olanıdır ve diğer Bit'e (purpleBit) JavaScript aşk şiirleri yazar.

LoveBits'i başlattığınızda, birden fazla aşk şiirinden (JavaScript ile yazılmış) birini seçebilirsiniz. Her şiirin, programlamaya aşina olmayan kişilerin bile anlayacağı şekilde yazılmış bir kod parçası vardır. Tek şart İngilizce dilidir.

Örneğin, “İlk görüşte aşk” (aslında LoveBits şiirlerinden biri), blueBit'in temelde söylediği şu iki Bit ile inLove: true .”

Bu şiirlerle ilgili özel olan şey, aşağıdaki "oynat" düğmesine basarak onları "çalıştırabilmeniz" veya "oynayabilmeniz". "İlk görüşte aşk" durumunda, bir sayı ile birlikte mavi ve mor bir dikdörtgen görürsünüz. Tahmin edebileceğiniz gibi, bunlar şiirde bahsedilen iki Bit'tir ve blueBit'in altındaki sayı aslında blueBit ve PurpleBit arasındaki mesafedir.

Şiirin önerdiği gibi, blueBit'in blueBit'e aşık olmasını, aralarındaki mesafeyi azaltarak isteyebilirsiniz, değil mi? Peki ne yapabilirsin? BlueBit'i etkileşime sokabilir, sürükleyebilir ve aşık olmasını sağlayabilirsiniz. Ancak dikkatli olun, bazen birden fazla sonuç vardır.

Aslında burada makinenin sen olduğun söylenebilir. Harekete geçmek ve iki dijital varlığın birbirine aşık olmasına yardımcı olmak için JavaScript kodunu yorumlaması gereken kişi sizsiniz.

Buradan Nereye Gidilir?

Zorlu bir geliştiriciyseniz, JavaScript'e bir insan dili gibi davranmayı deneyin ve gerçekte ne yaptıkları yerine ilk önce hangi kod parçacıklarının yapması gerektiğini anlayın.

Bundan sonra yapmanızı tavsiye edeceğim şey şudur:

• Bir uygulama mantığı oluşturmak için kuralları, kelimeleri ve değişkenleri bir araya getiren tüm uygulamalar için her zaman örnekler ve kodlar için doğrudan gitmeyi tercih edin;
• Uygulama mantığı, yukarıdaki kod örneklerinde olduğu gibi boşlukları doldurmanıza yardımcı olacak hikayeleri anlatacaktır. Kod kitaplıkları ve lodash gibi yardımcı programlar size yalnızca JavaScript kodunu okuyup anladıktan sonra yardımcı olacak yeni sözcükler sağlar;
• Mevcut kodu gözden geçirin ve yaptıklarını yansıtan adlarla küçük işlevlere ayırmaya çalışın. Hem insanlara hem de makinelere hitap eden kod yazın. Kodu cümle gibi okunabilecek şekilde yazın. Gerektiğinde yorumları kullanın. Bir düşünün: Bunu bir insan dilinde (başka bir geliştiriciye) nasıl ifade edebilirim?

Çözüm

Kodu, uzaylıların icat etmiş olabileceği bir şey olarak değil, bir insan dili olarak görmeye başladığınızda, kodlamayı öğrenmek daha kolay hale gelebilir. Uygulama mantığı için dil özellikleri (yerleşikler) ve değişkenler/özel kod arasında ayrım yapmayı öğrenmek çok önemlidir. Uygulama mantığını anlayabilmek, dil özelliklerini bile bilmeden bir şeyleri geliştirmek ve değiştirmek için sizi güçlü bir konuma getirecektir.

Temel bilgilerden önce mesaj : Herhangi bir kod parçacığının mesajını anlayın ve JavaScript'in temelleri doğal olarak bunu takip edecektir. Kaç kez birinin “Dili anlıyorum ama henüz konuşamıyorum” dediğini duydunuz? Hem insan hem de kodlama dillerini öğrenmek için uygulanabilecek ve belki de uygulanması gereken doğal bir süreçtir.

Ayrıca, her zaman kodun açık bir işlevsel amacı olduğunu unutmayın, ancak her zaman böyle olmak zorunda değildir. İnsan dilleri bile bir zamanlar tamamen işlevseldi, ama sonra insanları tamamen farklı şekillerde birbirine bağlayan şiirler ve hatta şarkılar (JavaScript şarkıları, herhangi biri?) geldi. Aynı şeyin burada da geçerli olabileceğini düşünüyorum veya umuyorum.

Daima kod projelerini keşfedin ve hatta belki kendiniz bir şiir yazmayı deneyin (belki aşina olduğunuz başka bir programlama dilinde bile)? LoveBits projesini oluşturmaktan keyif aldım ve aşağıdaki yorumlarda bazı fikirlerinizi görmeyi çok isterim!

Daha fazla okuma

• Angus Croll "Eğer JavaScript'i Hemingway yazsaydı"
  Bu, LoveBits'ten sonra gerçekten tökezlediğim en sevdiğim kitaplardan biri. Birkaç ünlü şair ve sanatçı ve onların JavaScript kod parçacıklarını nasıl yazdıkları hakkında. Bu çok komik!