কিভাবে এই অস্পষ্ট জাভাস্ক্রিপ্ট কাজ করে?

Question 1

নিম্নলিখিত জাভাস্ক্রিপ্ট কীভাবে কাজ করে?

আমি বুঝতে পারি যে এটি মিনিফায়েড কোড। আমি এটিকে কিছুটা দ্বিধায়িত করার চেষ্টা করেছি, তবে কীভাবে এটি এই প্রভাবটি অর্জন করে সে সম্পর্কে আমি একটি পরিষ্কার ধারণা পেতে পারি না। আমি দেখতে পাচ্ছি যে এটি স্ট্রিংগুলি কোনও ধরণের পুনরাবৃত্তির জন্য, ডেট অবজেক্টের ব্যবহার, অদ্ভুত স্ট্রিং ম্যানিপুলেশন, ম্যাথ ফাংশনগুলি, তারপরে কোডটি নিজেই মুদ্রণ করে।

ন্যূনতম উদাহরণ দিয়ে কীভাবে একই প্রভাবটি আবার লেখা যেতে পারে?

eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//

জেএসফিডাল

Question 2

পূর্বশব্দ : আমি http://jsfiddle.net/WZXYr/2/ এ কোডটি বিস্তৃতভাবে শোভিত করেছি

বাইরেরতম স্তরটি বিবেচনা করুন:

eval(z = '...');

একটি কোড স্ট্রিং ভেরিয়েবল এ সংরক্ষণ করা হয় z। অ্যাসাইনমেন্ট অপারেটর নির্ধারিত মানটি ফেরত দেয়, তাই কোড স্ট্রিংটিও একটি আর্গুমেন্ট হিসাবে পাস করা হয় eval।

কোড স্ট্রিং এর zভিতরে চলে eval। কোডটি অত্যন্ত আপত্তিজনক, এমনকি যখন পরিষ্কার করা হয় তবে মনে হয়:

অক্ষর দ্বারা বর্ণিত বেস-base numbers সংখ্যাগুলির একটি স্ট্রিং পার্স করুন 4।
মূল্যবোধের একটি মানচিত্র জনপূর্ণ করুন, গ্লোবাল ভেরিয়েবল ব্যবহার e, xএবং yথেকে হোল্ড মানচিত্র রাষ্ট্র। মানচিত্রের রাজ্যটি আংশিকভাবে প্রাচীরের ঘড়ির উপর বর্তমান সেকেন্ডের একটি কাজ ( new Date / 1e3)।
মানচিত্রের মানগুলি ব্যবহার করে কোডটি একটি আউটপুট স্ট্রিং উত্পন্ন করে, p
- কোডটি p += " *#"[index]কোনও স্থান, তারকাচিহ্ন বা হ্যাশ চিহ্ন ব্যবহার করতে হবে কিনা তা স্থির করতে সিদ্ধান্ত ব্যবহার করে, indexআসলে কোথায় রয়েছে e[x++] + e[x++](উপরে যেমন বলা হয়েছে, eএবং xমানচিত্রের রাজ্যের জন্য দায়বদ্ধ)
- যদি সূচক দৈর্ঘ্যের চেয়ে বড় " *#"হয় তবে ফ্যালব্যাক কোড রয়েছে যা pথেকে অক্ষরের সাথে আউটপুটকে জনপ্রিয় করে তোলে z। অভ্যন্তরীণ অক্ষরগুলি অ্যানিমেশন অক্ষর দ্বারা পপুলেট হয়, যখন বাইরের অক্ষরগুলি এ থেকে টানা হয় z।

কোডের শেষে, এখানে একটি কল আসে setTimeout(z), যা কোড স্ট্রিংকে অবিচ্ছিন্নভাবে মূল্যায়ন করে z। এই পুনরাবৃত্তি অনুরোধ zকোডটি লুপ করতে দেয়।

সাধারণ উদাহরণ:

এখানে একটি অতি-সাধারণ সংস্করণ ( http://jsfiddle.net/5QXn8/ ):

eval(z='p="<"+"pre>";for(i=0;i<172;++i)if(i > 62 && i < 67)p+="!---"[~~(new Date/1e2 + i)%4];else p += ("eval(z=\'" + z + "\')")[i];document.body.innerHTML = p;setTimeout(z)')

forলুপ যোগ করে আউটপুট স্ট্রিং প্রতিটি অক্ষর p(STRING 172 অক্ষর দীর্ঘ):
```
for(i=0;i<172;++i)
```
অভ্যন্তরীণ শর্তসাপেক্ষ সিদ্ধান্ত নেয় আমরা যদি 62২ থেকে position 67 পজিশনের মধ্যে একটি চরিত্রের উপরে থাকি যা এনিমেটেড অক্ষর:
```
if(i > 62 && i < 67)
```
যদি আমরা হয় তবে !---দ্বিতীয় প্রাচীর-ঘড়ির মান দশমের ভিত্তিতে প্রিন্ট আউট করে স্থানান্তরিত করুন। এটি অ্যানিমেশন প্রভাব সরবরাহ করে।
```
p+="!---"[~~(new Date/1e2 + i)%4]
```
(চারপাশের সমস্ত ঘৃণ্যতা new Dateকেবলমাত্র একটি তারিখের মান 0 এবং 3 এর মধ্যে একটি সংখ্যায় রূপান্তর করার জন্য কেবল সেখানে রয়েছে))
অন্যথায়, আমরা যদি কোনও অ্যানিমেটেড অক্ষরে না থাকি তবে iনির্ধারিত স্ট্রিং থেকে সূচিপত্রটি মুদ্রণ করুন
```
"eval(z='" + z + "')"
```
অর্থাৎ কোড স্ট্রিংটি zচারদিকে eval('এবং এর চারপাশে ')।
শেষ setTimeoutঅবধি , স্ট্রিং আউটপুট করুন এবং এর অন্য একটি প্রয়োগের জন্য সারিবদ্ধ করার জন্য ব্যবহার করুন z:
```
document.body.innerHTML = p;setTimeout(z)
```

মনে রাখবেন যে আমার চূড়ান্ত আউটপুটটি বেশ সঠিক নয় - আমি শেষের দিকে ব্যাকস্ল্যাশগুলির জন্য জবাবদিহি করি নি - তবে কৌশলটি কীভাবে সাধারণভাবে কাজ করে তা সম্পর্কে এটি আপনাকে এখনও বেশ ভাল ধারণা দিতে পারে।

Question 3

এখানে বর্ণিত উত্স। PS: আমি লেখক;)

function z(){                     // will be replaced with eval

  p = "<" + "pre>";               // use <pre> tag for formatted output

  for (                           // loop though lines
    y in n = (                    // y - the line number
      "zw24"      +               // n - the encoded data
      "l6k4"      +               // every line holds encoded data
      "e3t4"      +
      "jnt4"      +               // string will be concated in build process
      "qj24"      +
      "xh2  4"    +               // data after spaces will be ignored but
      "2kty24"    +               // … is used to not break block comments
      "wrt4"      +               // … which will save some chars
      "13n24"     +
      "3n9h24"    +
      "3pdxt4"    +
      "1csb   4"  +
      "3iyb6k4"   +
      "3pk724"    +
      "3nmr24"
    ).split(4)                    // data will be split by (unused) 4

  ){
    for (                         // loop throug every char in line
      a in t = parseInt(          // numbers are encoded as string
        n[y],                     // … with a base of 36
        36
      ) + (                       // large number will be converted to string
        e =                       // e - holds the rendered globe
        x =                       // x - horizonal position
        r = []                    // r - bitmap flag if pixel is set
      )
    ){
      r = !r;                     // toggle binary flag

      for (                       // look though bitmap states
        i = 0;                 
        t[a] > i;                 // draw pixel t[a]-times
        i += .05
      )
        with (Math)               // refer to Math later
          x -= .05,
          0 > cos(                // prevent backface visibility
            o =
              new Date / 1e3 +    // get rotation based on current time
              x / PI
          ) && (
            e[                    // access matrix
              ~~(                 // convert float to integer
                sin(o) *          // rotate around y axis
                sin(.5 + y/7) *
                32                // scale up the globe
              ) + 60              // move to center
            ] = -~r               // store bitmap state in render matrix
          )
    }

    for (                         // loop through columns
      x = 0;
      122 > x;                    // break after char 122
    ) p += "   *#"[               // add space, asterisk or hash
        e[x++] +                  // … based pixel opacity
        e[x++]
      ] || (S = (                 // otherwise use the original code
        "eval(z='" +              // inception of missing "eval" statement
          z
            .split(B = "\\")      // escape \ with \\
            .join(B + B)

            .split(Q = "'")       // escape ' with \'
            .join(B + Q) +

          Q +                     // add missing ')

          ")////////"             // add extra chars to fill mapping
        )[
          x / 2 +                 // get character at current position
          61 * y-1
        ]

      ).fontcolor(                // colorize outpu
        /\w/.test(S) &&           // test for [0-9A-Z]
        "#03B"                    // render blue
                                  // otherwise pink (default)
      );

    document.body.innerHTML =     // render output
      p +=                        // append new line
      B +                         // add backspace
      "\n";                       // add new line
  }

  setTimeout(z)                   // render animation on next frame
}
z()

Question 4

এখানে আর একটি ম্যানুয়ালি ডিওবাফাসেকেটেড সংস্করণ রয়েছে যা সমস্ত সূচনাটি প্রকাশের বাইরে নিয়ে যায় নিজের বিবৃতিতে:

z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)';

p = "<" + "pre>";
n = ["zw2", "l6k", "e3t", "jnt", "qj2", "xh2 x/* =<,m#F^    A W###q. */", "2kty2", "wrt", "13n2", "3n9h2", "3pdxt", "1csb yz/* #K       q##H######Am */", "3iyb6k", "3pk72", "3nmr2", ""]
for (y in n) {
    e = [];
    x = 0;
    r = true;
    t = parseInt(n[y], 36) + "";
    for (a in t) {
        r = !r
        for (i = 0; i < t[a]; i += 0.05) {
             x -= 0.05;
             o = new Date / 1e3 + x / Math.PI
             if (Math.cos(o) < 0)
                 e[~~(32 * Math.sin(o) * Math.sin(0.5 + y / 7)) + 60] = -~r;
        }
    for (x = 0; x < 122;) {
        S = "eval" + "(z='" + z.split(B = "\\").join(B + B).split(Q = "'").join(B + Q) + Q + ")//m1k"
        p += "   *#"[e[x++] + e[x++]] || S[x/2+61*y-1]).fontcolor(/\w/.test(S[x/2+61*y-1]) && "#03B");
    }
    p += B + "\n";
    document.body.innerHTML = p;
}
setTimeout(z)

যা ঘটে তা এখানে:

zসমস্ত কোড যুক্ত একটি মাল্টলাইন স্ট্রিং। এটি evalএড।
কোড শেষে, zপাস করা হয় setTimeout। এটি সর্বাধিক সম্ভাব্য হারে অন্তর অন্তর মূল্যায়ন করে requestAnimationFrameএবং এর মতো কাজ করে eval।
কোডটি নিজেই সূচনা করে p, স্ট্রিং বাফার যার উপরে এইচটিএমএল যুক্ত করা হবে এবং nবেস-36 36-এনকোডড সংখ্যার একটি অ্যারে (একটি স্ট্রিংয়ে যোগ হয়েছে "4", মন্তব্যগুলি অপ্রাসঙ্গিক আবর্জনা হিসাবে বিবেচিত নয় parseInt)।
এর প্রতিটি সংখ্যা nএকটি লাইনকে এনকোড করে ( n.length == 16)। এটি এখন গণনা করা হয়েছে ।
একটি গুচ্ছ ভেরিয়েবল সূচনা করা হয়, কিছু eঅ্যারে আক্ষরিক হিসাবে ছদ্মবেশযুক্ত তবে সেগুলি তখন ব্যবহার করা হয় এমন সংখ্যায় ( x) বা বুলিয়ান ( r) বা স্ট্রিং ( t) এ দেওয়া হয়।
সংখ্যার প্রতিটি অঙ্ক tগণনা করা হয়, rপ্রতিটি বুলিয়ান উল্টিয়ে দেয় । বিভিন্ন কোণগুলির জন্য x, এবং বর্তমান সময়ের উপর নির্ভর করে new Date / 1000(যাতে এটি একটি অ্যানিমেশন দেয়), অ্যারে eকিছু বিটওয়াইজ অপারেটর ব্যবহার করে পূরণ করা হয় - 1কখন rমিথ্যা হয় এবং 2কখন rসেই সময় সত্য হয়।
তারপরে একটি লুপটি x=0একক অক্ষরগুলিতে যুক্ত করে ডাবল পদক্ষেপে 122 থেকে চিত্রের 61 টি কলামকে পুনরাবৃত্তি করে p।
Bব্যাকস্ল্যাশ হওয়ায়, স্ট্রিংটি Sকোডের স্ট্রিং zথেকে ব্যাকস্ল্যাশ এবং অ্যাস্টোস্ট্রোফেসে পালিয়ে তৈরি করা হয়েছে, উত্সটিতে যা দেখেছে তার সঠিক প্রতিনিধিত্ব পেতে।
অ্যানিমেটেড চিত্রটি তৈরি করতে, থেকে পর পরের দুটি সংখ্যক সংখ্যক eযোগ করা হয় এবং এর থেকে কোনও চরিত্র অ্যাক্সেস করতে ব্যবহৃত হয় " *#"। সূচকগুলির কোনও একটি সংজ্ঞায়িত না হলে সূচকটি NaNএকটি অনির্ধারিত অক্ষরের সাথে সমাধান হয় এবং তার পরিবর্তে Sস্ট্রিং থেকে সংশ্লিষ্ট অক্ষর নেওয়া হয় (সূত্রটি দেখুন x/2+61*y-1)। যদি সেই অক্ষরটি কোনও শব্দের চরিত্র হওয়া উচিত , তবে fontcolorস্ট্রিং পদ্ধতিটি ব্যবহার করে এটি আলাদাভাবে রঙিন হয় ।
প্রতিটি লাইনের পরে, পিছনের ব্যাকস্পেস এবং একটি লাইনব্র্যাক যুক্ত করা হয় pএবং HTML স্ট্রিংটি নথির বডিতে নির্ধারিত হয়।

ন্যূনতম উদাহরণের জন্য কীভাবে একই প্রভাবটি আবার লেখা যেতে পারে?

এখানে একটি অন্য উদাহরণ:

setInterval(z='s=("setInterval(z=\'"+\
z.replace(/[\\\\\']/g,"\\\\$&")+"\')"\
).match(/.{1,37}/g).join("\\\\\\n");d\
ocument.body.innerHTML=\"<\\pre>"+s.s\
lice(0, 175)+String( + new Date()).fo\
ntcolor("red")+s.slice(188)')

( jsfiddle.net এ ডেমো )

এটিতে আপনার এ জাতীয় অ্যানিমেশনের জন্য প্রয়োজনীয় সমস্ত রিলেভেন্ট জিনিস রয়েছে:

setIntervalএবং Dateঅ্যানিমেশন জন্য

এখানে নিজস্ব কোডের একটি পুনর্গঠন ( কুইন-লাইক ):

s = ( "setInterval(z='" // the outer invokation
      + z.replace(/[\\\']/g,"\\$&") // the escaped version
    + "\')" ) // the end of the assignment
    .match(/.{1,37}/g).join("\\\n"); // chunked into lines

মাধ্যমে আউটপুট document.body.innerHTMLএবং একটি <pre>উপাদান
কোডের কিছু অংশ অ্যানিমেটেড স্ট্রিংয়ের সাথে প্রতিস্থাপন করা হচ্ছে

Question 5

সমস্ত কোড সহ একটি স্ট্রিং মূল্যায়ন করা হয়, এবং একটি সময়সীমা লুপ তৈরি করে; স্ট্রিংটি নামের একটি ভেরিয়েবলে zএবং কোডের মাঝখানে, মন্তব্যের মধ্যে সংরক্ষণ করা হয় /*এবং */সেখানে একটি "আর্থ এএসসিআইআই আর্ট" রয়েছে। কোডটি মন্তব্যগুলির বিশ্লেষণ করে এবং ডকুমেন্টের সামগ্রীতে পরিবর্তন করে, জেএস রেখে এবং শিল্প আপডেট করে। বেলো শুধুমাত্র কাটা কোড:

  p="<pre>";
  for(y in n="zw24l6k4e3t4jnt4qj24xh2 x42kty24wrt413n243n9h243pdxt41csb yz43iyb6k43pk7243nmr24".split(4)){ 
    for(a in t = parseInt(n[y],36)+(e=x=r=[]))
      for(r=!r,i=0;t[a]>i;i+=.05)
        with(Math) x-= .05,0>cos(o=new Date/1e3+x/PI)&&(e[~~(32*sin(o)*sin(.5+y/7))+60] =-~ r);
          for(x=0;122>x;) p += "   *#"[e[x++]+e[x++\]] ||
              (S=("eval"+"(z=\'"+z.split(B = "\\\\").join(B+B).split(Q="\'").join(B+Q)+Q+")//m1k")[x/2+61*y-1]).fontcolor(/\\w/.test(S)&&"#\03B");
    p += B+"\\n"
    document.body.innerHTML= p
  }