Back to Question Center
0

JavaScript Çekirdek Nesnelerinin Yeniden Gözden Geçirilmesi            JavaScript Çekirdek Nesnelerini Gözden Geçirmek RevisitedRelated Semalt: AjaxNode.jsES6ReactnpmMore ... Sponsorlar

1 answers:
JavaScript Çekirdek Nesnelerinin Gözden Geçirilmesi Revisited

Son zamanlarda geliştirilen JavaScript Çekirdek Nesnelerim makalesinde, JavaScript'in Array , Boolean , Tarih , Matematik 'ye yeni özellikler ve yöntemlerin nasıl ekleneceği gösterildi. ), Sayı ve Dize çekirdek nesneleri. Aşağıda listelenenler de dahil olmak üzere, bu çekirdek nesneleri yeni yeteneklerle nasıl genişletileceğini gösteren diğer makaleler ve blog yazıları geleneğini izledim:

  • Matemi uzat - costo de pagina web en peru. Yuvarlak, Matematik. ceil ve Matematik. hassasiyet sağlamak için zemin
  • JavaScript Nesnelerini ve Sınıflarını Genişletme
  • JavaScript'in String nesnesini genişletme
  • Kullanıcı tanımlı yöntemlerle JavaScript Tarih Nesnesini Genişletme
  • JavaScript Dizisi İçerir

Bir çekirdek nesneye veya prototipine doğrudan özellikler eklemek tartışmalıdır. Angus Croll, JavaScript Natives'i Genişleten blog yazısında bu yaklaşımla ilgili çeşitli sorunları ele alıyor. Örneğin, gelecekteki tarayıcı sürümleri daha verimli bir özel özellik / yöntem tarafından tıkanmış verimli bir özellik veya yöntemi uygulayabilir. Bu ve diğer sorunlar hakkında daha fazla bilgi için Croll'un blog yayınını okuyun.

Çekirdek nesne büyütme işlemi güçlü ve şık olduğundan, sorunlarından kaçınırken bu özelliği kullanmanın bir yolu olmalıdır. Neyse ki, sargı deseni olarak da bilinen adaptör tasarım deseninden yararlanarak bu görevi yerine getirmenin bir yolu var. Bu makalede, çeşitli temel nesneleri gerçekten büyütmeden büyütmek için sarıcı kullanan kitaplığımın yeni bir sürümünü sunuyorum.

Yeni Bir Çekirdek Nesnesi Artırma Kütüphanesini İncele

Yeni çekirdek nesne büyütme kütüphanesi, tüm kitaplık kodunu anonim bir kapanışa yerleştiren JavaScript Modül Kalıbını kullanarak küresel ad alanındaki etkisini en aza indirmeye çalışıyor. Bu kitaplık şu an Tarih ve Matematik etrafında sarılmış _Date ve _Math nesnelerini dışa aktarır ve ca_tutortutor_AJSCOLib sorgulayarak erişilir genel değişken.

Hakkında ca_tutortutor_AJSCOLib
ca_tutortutor_AJSCOLib genel değişkeni, büyütme kütüphanesine erişim sağlar. Başka bir global değişkenle bir isim çarpışma ihtimalini en aza indirgemek için, tersine çevrilmiş İnternet alan adımla AJSCOLib ön ekinde bulundum.

Liste 1, ajscolib'de saklanan kitaplığımın içeriğini sunar. js komut dosyası.

  var ca_tutortutor_AJSCOLib =(Fonksiyonu   {var my = {};var _Date_ = Tarih;işlevi _Date (yıl, ay, tarih, saat, dakika, saniye, ms){if (year === undefined)bu. instance = yeni _Date_   ;Başkaif (ay === tanımsız)bu. örnek = yeni _Tarihi (yıl);Başkaif (saat === tanımsız)bu. örnek = yeni _Tarihi (yıl, ay, gün);Başkabu. örnek = yeni _Date_ (yıl, ay, tarih, saat, dakika, saniye,MS);bu. kopya =fonksiyonu   {yeni _Date_ döndür (bu örnek; getTime   );};bu. getDate =fonksiyonu   {bunu geri ver. örneği. getDate   ;};bu. getDay =fonksiyonu   {bunu geri ver. örneği. getDay   ;};bu. getFullYear =fonksiyonu   {bunu geri ver. örneği. getFullYear   ;};bu. getHours =fonksiyonu   {bunu geri ver. örnek. getMilliseconds =fonksiyonu   {bunu geri ver. örneği. getMilliseconds   ;};bu. getMinutes =fonksiyonu   {bunu geri ver. örneği. getMinutes   ;};bu. getMonth =fonksiyonu   {bunu geri ver. örneği. getMonth   ;};bu. getSeconds =fonksiyonu   {bunu geri ver. örneği. getSeconds   ;};bu. getTime =fonksiyonu   {bunu geri ver. örneği. getTime   ;};bu. getTimezoneOffset =fonksiyonu   {bunu geri ver. örneği. getTimezoneOffset   ;};bu. getUTCDate =fonksiyonu   {bunu geri ver. örneği. getUTCDate   ;};bu. getUTCDay =fonksiyonu   {bunu geri ver. örneği. getUTCDay   ;};bu. getUTCFullYear =fonksiyonu   {bunu geri ver. örneği. getUTCFullYear   ;};bu. getUTCHours =fonksiyonu   {bunu geri ver. örneği. getUTCHours   ;};bu. getUTCMilliseconds =fonksiyonu   {bunu geri ver. örneği. getUTCMilliseconds   ;};bu. getUTCMinutes =fonksiyonu   {bunu geri ver. örneği. getUTCMinutes   ;};bu. getUTCMonth =fonksiyonu   {bunu geri ver. örneği. getUTCMonth   ;};bu. getUTCSeconds =fonksiyonu   {bunu geri ver. örneği. getUTCSeconds   ;};bu. getYear =fonksiyonu   {bunu geri ver. örneği. getYear   ;};bu. isLeap =fonksiyonu   {var yıl = bu. örneği. getFullYear   ;dönüş (yıl% 400 == 0) || (yıl% 4 == 0 && yıl% 100! = 0);};_date. isLeap =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;var yıl = tarih. getFullYear   ;dönüş (yıl% 400 == 0) || (yıl% 4 == 0 && yıl% 100! = 0);};bu. son gün =fonksiyonu   {yeni _Date_ döndür (bu örnek. getFullYear   ,bu. örneği. getMonth    + 1, 0). getDate   ;};_date. monthNames = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs""Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim""Kasım Aralık"];_date. Ayrıştırma =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;dönüş tarihi_. (Tarih) ayrıştırmak;};bu. ayarla =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setDate (tarih);};bu. setFullYear =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setFullYear (tarih);};bu. ayar saatleri =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setHours (tarih);};bu. setMilliseconds =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneği. setMilliseconds (tarih);};bu. setMinutes =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setMinutes (tarih);};bu. AyarlaMonarı =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setMonth (tarih);};bu. setSeconds =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setSeconds (tarih);};bu. setTime =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setTime (tarih);};bu. setUTCDate =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCDate (tarih);};bu. ayarlaUTCFullYear =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCFullYear (tarih);};bu. setUTCHours =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCHours (tarih);};bu. setUTCMilliseconds =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCMilliseconds (tarih);};bu. setUTCMinutes =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCMinutes (tarih);};bu. ayarlaUTCMonth =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCMonth (tarih);};bu. setUTCSeconds =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;bu. örneği. setUTCSeconds (tarih);};bu. toDateString =fonksiyonu   {bunu geri ver. örneği. ) (ToDateString;};bu. toISOString =fonksiyonu   {bunu geri ver. örneği. ) (ToISOString;};bu. toJSON =fonksiyonu   {bunu geri ver. örneği. toJSON   ;};bu. toLocaleDateString =fonksiyonu   {bunu geri ver. örneği. toLocaleDateString   ;};bu. toLocaleTimeString =fonksiyonu   {bunu geri ver. örneği. toLocaleTimeString   ;};bu. toString =fonksiyonu   {bunu geri ver. örneği. toString   ;};bu. toTimeString =fonksiyonu   {bunu geri ver. örneği. ) (ToTimeString;};bu. toUTCString =fonksiyonu   {bunu geri ver. örneği. toUTCString   ;};_date. UTC =fonksiyonu (tarih){if (date of instance _Date)tarih = tarih. örneğin;dönüş tarihi_. UTC (tarih);};bu. değerOf =fonksiyonu   {bunu geri ver. örneği. değeri  ;};}benim. _Date = _Date;var _Math = {};var props = Nesne. forEach (fonksiyon (anahtar){if (Matematik [anahtar])_Math [anahtar] = Matematik [anahtar];});if (! _Math. GOLDEN_RATIO)_Matematik. GOLDEN_RATIO = 1. 61803398874;if (! _Math.rnd || _Math.rnd. length! = 1)_Matematik. rnd =fonksiyonu (limit){if (typeof limit! = "sayı")"yasadışı argüman at": + limit;matematik dön rasgele    * sınır | 0;};if (! _Math.rndRange || _Math.rndRange. length! = 2)_Matematik. rndRange =fonksiyon (min, maks.){if (typeof min! = "sayı")"yasadışı argüman atmak:" + dak;if (typeof max! = "sayı")"yasadışı argüman at": + max;matematik dön zemin (Matematik rastgele    * (maks - min + 1)) + dak;};if (! _Math. toDegrees || _Math. toDegrees. length! = 1)_Matematik. toDegrees =fonksiyonu (radyan){if (typeof radyan! = "sayı")"yasadışı argüman atmak:" + radyan;dönüş radyanları * (180 / Matematik PI);};If (! _Math. toRadians || _Math. toRadians. length! = 1)_Matematik. Rahmanlar =fonksiyonu (derece){if (typeof derece! = "sayı")"yasadışı argüman at": + derece;dönüş derece * (Matematik PI / 180);};if (! _Math. trunc || _Math. trunc. uzunluğu! = 1)_Matematik. trunc =fonksiyonu (n){if (typeof n! = "sayı")"yasadışı argüman at": + n;dönüş (n> = 0)? Matematik. kat (n): -Math. Zemin (N);};benim. _Math = _Math;geri getir;}   );  

Listeleme 1: Bu kendine yeten büyütme kütüphanesi tüm çekirdek nesneleri desteklemek için genişletilebilir

Anonim kapanışta bildirilen tüm değişkenler ve işlevler bu kapanışa yereldir. Kapanışın dışından erişmek için bir değişken veya fonksiyon ihraç edilmelidir. Değişkeni veya işlevi dışa aktarmak için, bir nesneye eklemeniz ve o nesneyi kapanıştan döndürmeniz yeterlidir. Liste 1'de nesne olarak bilinir ve _Date işlev başvurusu ve _Math nesne başvurusu atanır.

Boş nesneye başlatılan değişkenin bildiriminin ardından, Liste 1, Date çekirdek nesnesine başvuran değişken _Date_ 'yi bildirir. Kütüphane içinde Tarih 'ne erişmek için nereye ihtiyacım olursa olsun, Tarih yerine Tarihine bakın. Bu yazının ilerleyen bölümlerinde bu düzenlemeye ilişkin sebebimi açıklayacağım.

Liste 1 artık _Date sarmalayıcı nesneleri oluşturmak için bir _Date yapıcısı bildiriyor. Bu yapıcı aynı yıl , ay , tarih , saat , dakika , saniye 12) ve ms parametrelerini Tarih çekirdek nesnesi olarak kullanır. Bu parametreler, Date kurucusunun hangi değişkenin çağırılacağını belirlemek için sorgulanır:

  • _Date , bir Date nesnesini geçerli tarihe başlatmak için Date işlevini çağırır. Bu senaryo, undefined için yıl test edilerek tespit edilmiştir.
  • Date nesnesini belirtilen milisaniyenin sayısına getirmek için Date (tarih) Date (milliseconds) veya Date (dateString) tarih dizesi - İki durumda da işlemek için onu Tarih bırakıyorum. Bu senaryo, ayı undefined için test edilerek tespit edilir.Bu senaryo, undefined için saat test edilerek tespit edilir.
  • _Date (yıl, ay, gün, saat, dakika, saniye, milisaniye) çağırır Tarih (yıl, ay, gün, saat, dakika, saniye, milisaniyeler) ) Tarih bireysel bileşenler tarafından tanımlanan tarihe itiraz eder. Bu senaryo varsayılan değerdir.

Hangi olursa olsun kurucu değişken (tüm veya daha az bağımsız değişkene sahip bir yapıcı çağrısı) çağrılırsa, döndürülen sonuç _Date 'nin örneği mülkünde saklanır. Date gelecekte bir örneği mülk tanımı yapması gerektiği için bu özelliği yeniden adlandırmanız gerekebileceğinden doğrudan instance 'ye hiçbir zaman erişmemelisiniz. Kütüphanenin dışında örneğine erişmek kod bakımını azaltır.

Bu noktada, Liste 1 yeni copy , isLeap ve lastDay yöntemlerini ve yeni bir monthNames _Date ile mülkiyet. Aynı zamanda Date yöntemlerini de kaydeder. Eski yöntemler, Date yerine _Date ile ilişkili olan yeni işlevsellik ile Date işlevini genişletir ve aşağıda açıklanmaktadır. İkinci yöntem, daha önce depolanan Date örneğine erişmek için genellikle Date eşdeğerlerini çağırmak için örneğini kullanır:

  • copy , bu yöntemi çağıran Date nesnesinin örneğinin bir kopyasını oluşturur. Başka bir deyişle, Tarih örneğini klonlamaktadır. Örnek: var d = yeni Date ; var d2 = d. Kopya ;
  • isLeap , çağıran Date nesne örneğinin yıl bölümü bir sıçrama yılını temsil ettiğinde true döndürür; Aksi halde yanlış döndürür. Örnek: var d = yeni Date ; uyarı (d. isLeap );
  • isLeap (date) , tarihindeki yılın yılı sıçrama yılını temsil ettiğinde true döndürür; Aksi halde yanlış döndürür. Örnek: uyarı (Tarih. IsLeap (new Date ));
  • lastDay , çağıran Date nesne örneğinin son gününü döndürür. Örnek: var d = yeni Date ; uyarı (d. lastDay );
  • Bir yöntem olmasa da, Tarihten İngilizce temelli uzun bir ay adı elde edebilirsiniz. monthNames dizi özelliği. 0'dan 11'e kadar değişen bir dizini iletir. Örnek: uyarı (Tarih. AyNames [0])

Örnekleri yerine _Date ile ilişkili yöntemler doğrudan _Date _Date gibi atanır. UTC = işlevi (tarih) . tarih parametresi, çekirdek Tarih nesne referansını veya _Date referansını tanımlar. _Date örneği ile ilişkili yöntemler için atanır. Yöntemde, Tarih örneğine aracılığıyla erişilir. örnek .

Matematik haricinde Dizi , Dize ve diğer çekirdek nesneleri desteklemek için önceki protokolü takip etmiş olursunuz. Diğer çekirdek nesnelerin aksine, Matematik nesneleri oluşturamazsınız. Bunun yerine, Matematik , yalnızca statik özellikleri ve yöntemleri depolamak için bir yer tutucudur. Bu nedenle boş nesneye ilklendirilen bir _Math değişkeni bildirerek ve bu nesneye doğrudan özellik ve yöntem atayarak Matematiğini farklı şekilde ele alıyorum.

_Math 'yi başlatmanın ilk adımı, bir diziyi döndürmek için Object ' nin getOwnPropertyNames yöntemini (ECMAScript 5'inde uygulanan ve modern masaüstü tarayıcıları tarafından desteklenen) çağırmaktır (sayılamayabilir olsun olmasın) doğrudan argüman nesnesinde bulunur; Matematik . Örnek: uyarı (Matematik GOLDEN_RATIO);

  • rnd (limit) , 0'dan 1'e limit değerine kadar bir tam sayı döndürür. Örnek: uyarı (Matematik rnd

    );

  • rndRange (min, max) , dak değerinden maks değerine kadar değişen rastgele bir tam sayı döndürür. Örnek: uyarı (Matematik rndRange (10, 20));
  • --derece (radyan) radyan değerini derece cinsinden eşdeğerliğe dönüştürür ve bu değeri döndürür. Örnek: uyarı (Math. ToDegrees (Math. PI));
  • -Radians (derece) , derece değerini radyan cinsinden eşdeğerliğe dönüştürür ve bu değeri döndürür. Örnek: uyarı (Rahmanlara karşı matematik (180));
  • trunc (n) , n 'ye iletilen pozitif veya negatif sayılardan kesirli kısmı kaldırır ve tüm parçayı döndürür. Örnek: uyarı (Matematik trunc (5.8));
  • Her yöntem, Sayı türünde olmayan bir bağımsız değişken algılarsa, geçersiz bir bağımsız değişkeni belirten bir istisna atar.

    Ayrı bir yardımcı program nesneleri (örneğin, DateUtil veya MathUtil gibi) oluşturmak yerine neden bir artırma kütüphanesi oluşturmaya özen gösterin? Kütüphane, tarayıcılar arasında tutarlı bir işlevsellik sağlamak için kapsamlı bir araç olarak hizmet eder. Örneğin, Firefox 25. 0'ın Matematik nesnesi bir trunc yöntemini ortaya çıkarırken, bu yöntem Opera 12'de bulunmamaktadır. 16. Kitaplığım, bir trunc yöntemi her zaman kullanılabilir.

    Test ve Yeni Çekirdek Nesnesi Artırma Kütüphanesi Kullanma

    Artık kütüphaneyi keşfetme şansınız olduğu için bunu denemek isteyeceksiniz. Çeşitli yeni _Date ve _Math yeteneklerini test eden bir çift komut dosyası oluşturdum ve kütüphaneyi daha kapsamlı kullanan daha pratik bir çift komut dosyası oluşturduk. Liste 2'de, test _Date için bir betik gömerek bir HTML belgesi sunulmaktadır.

              Artırılmış Tarih Deneycisi </ Title>  <script türü = "metin / javascript" src = "ajscolib. js">  </ Script>  </ Head>  <Body>  <Script> var Tarih = ca_tutortutor_AJSCOLib. _date;var date = yeni Date  <span class="f-c-white l-mr3"> ;uyarı ("Geçerli tarih:" + tarih);alert ("Geçerli tarih": + tarih. toString  <span class="f-c-white l-mr3"> );var dateCopy = tarih. Kopya  <span class="f-c-white l-mr3"> ;alert ("Geçerli tarihin kopyası:" + tarih. toString  <span class="f-c-white l-mr3"> );alert ("Geçerli tarih == Geçerli tarihin kopyası:" + (tarih == tarihCopy));alert ("Isleap" + tarih. toString  <span class="f-c-white l-mr3">  + ":" + tarih .LeLeap  <span class="f-c-white l-mr3"> );alert ("Isleap 1 Temmuz 2012:" + Tarih .Leap (yeni Tarih (2012, 6, 1)));uyarı ("Son gün:" + tarih, sonDay  <span class="f-c-white l-mr3"> );alert ("Ay adları:" + Date. monthNames); </ Script>  </ Body>  </ html>   </pre>  <p>  <b>  Liste 2:  </b>  "Artırılmış" test  <code>  Tarih  </code>  nesne  </p>  <p> 
    Bu kütüphaneyle çalışırken,  <code>  ca_tutortutor_AJSCOLib belirtmek istemeyeceksiniz. _Date  </code>  ve muhtemelen  <code>  _Date  </code>  belirtmek istemezsiniz. Bunun yerine, çekirdek nesnenin kendisiyle çalışıyormuş gibi  <code>  Tarih  </code>  belirtmek istersiniz.  <code>  Tarih  </code>  referansını başka bir şeye değiştirmek için kodunuzu değiştirmeniz gerekmez. Neyse ki, bunu yapmak zorunda değilsiniz.  </p>  <p> 
    Komut dosyasındaki ilk satır  <code>  ca_tutortutor_AJSCOLib atar. Date  </code>  -  <code>  Date  </code> ,  <code>  Date  </code>  çekirdek nesnesine tüm erişimi etkili bir şekilde kaldırır. Bunun sebebi,  <code>  var _Date_ = Date;  </code>  kütüphanede. Kitaplık kodunda  <code>  _Date_  </code>  yerine  <code>  Tarih  </code>  'ye atıfta bulunursam, "çok fazla özyineleme" (ve muhtemelen diğer sorunlar) gözlemlenir.  </p>  <p> 
    Kodun geri kalanı  <code>  Tarih  </code>  ile çalışanlara aşina görünüyor. Ancak, küçük bir hıçkırık var. Bununla birlikte, geçerli bağlamda  <code>  Geçerli tarih:  </code>  ve ardından sayısal bir milisaniye değeri gözlemliyorsunuz.  </p>  <div class="panel">  <p>  <strong>   <code>  toString  <span class="f-c-white l-mr3">   </code>  karşı  <code>  valueOf  <span class="f-c-white l-mr3">   </code>   </strong>   <br> 
    Neden  <code>  uyarısı ("Geçerli tarih": + tarih) öğrenmek için JavaScript'ten Nesne-İlkel Dönüşümleri kontrol edin;  </code> ,  <code>  tarihli bir dize veya sayısal gösterimle sonuçlanır  </code> .  </p>  </div>  <p> 
    "Takviye Edilmiş"  <code>  Tarih  </code>  nesnesini, bir takvim sayfası oluşturma gibi pratik bir kullanıma geçirelim. Senaryoda  <code>  belge kullanılacaktır.  <code>   <table>   </code>  öğesine dayanan bu sayfanın HTML'sini çıktılamak için writeln  <span class="f-c-white l-mr3">   </code> .  <code>  _Date  </code>  yapıcısının iki değişkeni  <code>  getFullYear  <span class="f-c-white l-mr3">   </code> ,  <code>  getMonth  <span class="f-c-white l-mr3">   </code> ,  <code>  getDay  <span class="f-c-white l-mr3">   </code> , )  </code>  ve  <code>  getDate  <span class="f-c-white l-mr3">   </code>  yöntemleri ve  <code>  aylıkAlanlar  </code>  mülkü kullanılacaktır. Liste 3'ü kontrol edin.  </p>  <p>   </p>  <pre>   <! DOCTYPE html>  <Html>  <Head>  <Title> Takvim </ Title>  <script türü = "metin / javascript" src = "ajscolib. js">  </ Script>  </ Head>  <Body>  <Script> var Tarih = ca_tutortutor_AJSCOLib. _date;var date = yeni Date  <span class="f-c-white l-mr3"> ;var yıl = tarih. getFullYear  <span class="f-c-white l-mr3"> ;var ay = tarih. getMonth  <span class="f-c-white l-mr3"> ;belgesi. writeln (" <table border = 1> ");belgesi. writeln (" <th bgcolor = # eeaa00 colspan = 7> ");belgesi. writeln (" <center> " + Tarih. ayNames [ay] + "" + yıl +" </center> ");belgesi. writeln ( " </ th> ");belgesi. writeln (" <tr bgcolor = # ff7700> ");belgesi. writeln (" <td>   <b>   <center>  S  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  M  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  T  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  W  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  T  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  F  </center>   </b>   </ td> ");belgesi. writeln (" <td>   <b>   <center>  S  </center>   </b>   </ td> ");belgesi. writeln ( " </ tr> ");var dayOfWeek = yeni Tarih (yıl, ay, 1). getDay  <span class="f-c-white l-mr3"> ;var day = 1;için (var satır = 0; satır <6; satır ++){belgesi. writeln ( " <tr> ");için (var col = 0; col <7; col ++){var satır;if ((satır == 0 && col  <dayOfWeek) || gün>  tarih.sonDay  <span class="f-c-white l-mr3"> ){belgesi. writeln (" <td bgcolor = # cc6622> ");belgesi. writeln (" ");}Başka{if (gün == tarih, getDate  <span class="f-c-white l-mr3"> )belgesi. writeln (" <td bgcolor = # ffff00> ");Başkaif (gün% 2 == 0)belgesi. writeln (" <td bgcolor = # ff9940> ");Başkabelgesi. writeln ( " <td> ");belgesi. writeln (gün ++);}belgesi. writeln ( " </ td> ");}belgesi. writeln ( " </ tr> ");}belgesi. writeln ( " </ tablo> "); </ Script>  </ Body>  </ html>   </pre>  <p>  <b>  Liste 3:  </b>  Takvim sayfası oluşturmak için "arttırılmış"  <code>  Tarih  </code>  nesnesini kullanma  </p>  <p> 
    Gerçekçi bir takvim sayfası oluşturmak için, haftanın hangi gününde ayın ilk gününün oluştuğunu bilmeliyiz. İfade  <code>  yeni Tarih (yıl, ay, 1). getDay  <span class="f-c-white l-mr3">   </code>  bize  <code>  dayOfWeek'e  </code>  atanan istenen bilgileri verir (Pazar için 0, Pazartesi için 1 vb.). En üst sıradaki, sütun endeksi  <code>  dayOfWeek  </code>  'den küçük olan her alan boş bırakılır.  </p>  <p> 
    Şekil 1, bir takvim sayfası örneğini göstermektedir.  </p>  <p>  </p>  <center>  <br>   <img src="/img/a6dda7367696600b82fabdf9c33b785e0.png" alt="Augmenting JavaScript Core Objects RevisitedAugmenting JavaScript Core Objects RevisitedRelated Semalt:
    AjaxNode.jsES6ReactnpmMore. Sponsors
    "/>  <b>  Şekil 1:  </b>  Gün, sarı renkte vurgulanır.  </p>  <p>   </p>  </center>  <p> 
    Liste 4'te test  <code>  _Math  </code>  için bir betik gömerek bir HTML belgesi sunulmaktadır.  </p>  <p>   </p>  <pre>   <! DOCTYPE html>  <Html>  <Head>  <Title> Artırılmış Matematik Test Aracı </ Title>  <script türü = "metin / javascript" src = "ajscolib. js">  </ Script>  </ Head>  <Body>  <Script> var Math = ca_tutortutor_AJSCOLib. _Matematik;alert ( "Matematik. ALTIN ​​ORAN);Deneyin{alert ("Matematik rnd (null):" + Matematik rnd (null));}yakalamak (err){alert ("boş değer desteklenmiyor.");}uyarı ("Matematik rnd  <p> :" + Matematik rnd  <p> );for (var i = 0; i <10; i ++) içinuyarı (Matematik rndRange (5, 9));Deneyin{alert ("Math. toDegrees (null):" + Math. toDegrees (null));}yakalamak (err){uyarı ("null derece desteklenmiyor.");}Uyarı ("Matematiğin Yasaları (Matematik PI):" + Matematik, Kesitler (Matematik PI));Deneyin{uyarı ("Matematikten Rahmanlara (boş):" + Matematikten Rahmanlara (boş));}yakalamak (err){alert ("boş radyumlar desteklenmiyor.");}Uyarı ("Matematiğe Rahmanlar (180):" + Râddal Matematik (180);Deneyin{alert ("Matematik trunc (null):" + Matematik trunc (null));}yakalamak (err){alert ("boş değer desteklenmiyor.");}uyarı ("Matematik trunc (10.83):" + Matematik trunc (10.83));uyarı ("Matematik trunc (-10,83):" + Matematik trunc (-10,83)); </ Script>  </ Body>  </ html>   </pre>  <p>  <b>  Listeleme 4:  </b>  "Artırılmış"  <code>  Matematiği  </code>  nesnesinin test edilmesi  </p>  <p> 
    "Genişletilmiş"  <code>  Matematik  </code>  nesnesini pratik olarak kullanalım; örneğin,  <i>  kardiyoit eğrisi  </i>  görüntüleme, bu eğri etrafında dönen bir çevre çevresindeki bir noktayla izlenen bir düzlem eğrisi Aynı yarıçapın sabit bir dairesidir. Senaryoda  <code>  matematik  </code>  'nin  <code>  rndRange  <span class="f-c-white l-mr3">   </code> ,  <code>  ~ Radians  </code> ,  <code>  cos  <span class="f-c-white l-mr3">   </code>  ve  <code>  sin  <span class="f-c-white l-mr3">   </code>  yöntemleri. Listeleme 5'e bakın.  </p>  <p>   </p>  <pre>   <! DOCTYPE html>  <Html>  <Head>  <Title> Kardioid </ Title>  <script türü = "metin / javascript" src = "ajscolib. js">  </ Script>  </ Head>  <Body>  <canvas id = "kanvas" width = "300" height = "300"> kanvas desteklenmiyor </ Canvas>  <Script> var Math = ca_tutortutor_AJSCOLib. _Matematik;var canvas = belge. getElementById ( "tuval");var canvasctx = kanvas. getContext ( "2d");var width = belge. getElementById ( "tuval"). Genişlik;var height = belge. getElementById ( "tuval"). yükseklik;canvasctx. fillStyle = "# 000";canvasctx. fillRect (0, 0, genişlik, yükseklik);canvasctx. fillStyle = "RGB (" + Matematik rndRange (128, 255) + "," +Matematik. rndRange (128, 255) + "," +Matematik. rndRange (128, 255) + ")";canvasctx. beginPath  <span class="f-c-white l-mr3"> ;için (var angleDeg = -180.0; angleDeg <180.0; angleDeg + = 0. 1){var açı = matematik. toRadians (angleDeg);// Kardioid eğrisi denklemini değerlendirir. Bunun için yarıçap üretir// verilen açı. Not: [r, açı] kutupsal koordinatlardır. var r = 60. 0 + 60. 0 * Matematik. cos (açı);// Kutupsal koordinatları dikdörtgen koordinatlara çevirir. Eklemek// genişlik / 2 ve yükseklik / 2 eğrisinin başlangıç ​​noktasını merkeze taşımak için// tuvale. (Menşe varsayılan olarak kanvasın sol üst köşesine ayarlıdır.)var x = r * Matematik. cos (açı) + genişlik / 2;var y = r * Matematik. günah (açı) + yükseklik / 2;if (açı == 0,0)canvasctx. moveTo (x, y);Başkacanvasctx. lineTo (x, y)}canvasctx. closePath  <span class="f-c-white l-mr3"> ;canvasctx. ) (Dolgu; </ Script>  </ Body>  </ html>   </pre>  <p>  <b>  Listeleme 5:  </b>  Kardiyot eğrisi oluşturmak için "artmış"  <code>  Matematik  </code>  nesnesinin kullanılması  </p>  <p> 
    Liste 5, tuval bağlamının  <code>  beginPath  <span class="f-c-white l-mr3">   </code> ,  <code>  moveTo  <span class="f-c-white l-mr3">   </code> ,  <code>  çizgiTo  <span class="f-c-white l-mr3">  yoluyla bir çokgen olarak oluşturulmuş kardiyot eğrisini sunmak için HTML5'in tuval öğesini ve API'sini kullanır.  </code>  ve  <code>  closePath  <span class="f-c-white l-mr3">   </code>  yöntemleri. Eğrisinin dolgu renginin her bileşeni,  <code>  rndRange  <span class="f-c-white l-mr3">   </code>  vasıtasıyla rastgele seçilir. Onun argümanları, bileşenlerin çok karanlık olmamasını sağlar. Eğri, tuval bağlamının  <code>  doldurma  <span class="f-c-white l-mr3">   </code>  yöntemiyle doldurulur.  </p>  <p> 
    Şekil 2 renkli bir kardiyot eğrisini göstermektedir.  </p>  <p>  </p>  <center>  <p>   <img src="/img/b6d9a8e9ba8b100c0e65b8e4597e98161.png" alt="Augmenting JavaScript Core Objects RevisitedAugmenting JavaScript Core Objects RevisitedRelated Semalt:
    AjaxNode.jsES6ReactnpmMore. Sponsors
    "/>  <p>  <b>  Şekil 2:  </b>  Eğri rengini değiştirmek için sayfayı yeniden yükle. Uygulamanın uyumluluk, performans veya diğer nedenlerle ayarlanmasının gerekli olabilmesine rağmen kütüphanenin genel arabirimi tarayıcılar arasında taşınabilir. Bir alıştırma olarak, bu kitaplığa önceki önceki genişletme makalesinin  <code>  Dizi  </code> ,  <code>  Boolean  </code> ,  <code>  Sayı  </code>  ve  <code>  Dize  </code>  geliştirmelerini ekleyin.  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/346476fa3c6e0d5cee7bc4f9ae76bc042.png" alt="Augmenting JavaScript Core Objects RevisitedAugmenting JavaScript Core Objects RevisitedRelated Semalt:
    AjaxNode.jsES6ReactnpmMore. Sponsors
    "/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Yazanla Tanışın  </div>  <div class="f-large"> Jeff Friesen </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Jeff Friesen, serbest öğrenim dili ve Java ve mobil teknolojileri vurgulayan yazılım geliştiricisidir. Apress için Java ve Android kitapları yazmaya ek olarak, Jeff, SitePoint, InformIT, JavaWorld, java için Java ve diğer teknolojiler hakkında çok sayıda makale yazmıştır. net ve DevSource.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </html>  </html>  </html>  </html>  </head>  </head>  </head>  </head>                                                                                                           
    March 7, 2018