Cần những kiến thức gì để viết được những trang web ảo diệu?

Vào xem source code của trang Mr.Robot thì thấy khá nhiều liên kết đến các file javascript, mặc dù vào coi source code JS của nó cũng chẳng hiểu gì.

<script type="text/javascript" id="lightning_bolt" src="https://daynhauhoc.com//cdn-akamai.mookie1.com/LB/LightningBolt.js"></script>
<script src="https://daynhauhoc.com//assets.usanetwork.com/s_code.js"></script>
<script src="https://daynhauhoc.com/assets/main.5f05c672d81b13923aca.js"></script>

Anh chưa được học mấy cái trò như thế à?

Tạo một Hidden input để nhập liệu.
Dùng một số method xử lý chuỗi như indexOf() để kiểm tra lệnh người dùng gõ vào và xử lý tương ứng. Sẽ có nhiều chỗ đụng đến Regexp.
Tùy tác vụ sẽ phải dùng đến Ajax, History API.
Để tối ưu cho các tác vụ nặng thì dùng Web Workers, tối ưu cho DOM thì Document Fragment (jQuery cũng hỗ trợ cái này).
Có thể dùng thêm module loader như RequireJs, nếu dùng Web Workers thì có lẽ không cần cái này.

Nghe chả hiểu gì? Anh có thể demo một bản không?

Mấy cái đó là web app javascript đó bạn, hãy học cách làm SPA

https://jsfiddle.net/baivong/36v7yzkL/embedded/result,js,html,css/dark/

HTML

<div id="logs"></div>
<p id="cmd">
  <span class="prefix">root@example:~#</span><span id="output"><span class="blinker">|</span></span>
</p>
<textarea name="input" id="input" autocapitalize="off" autofocus></textarea>

CSS

body {
  background: black;
  color: white;
  font-family: monospace;
  font-size: 18px;
}

#input {
  position: absolute;
  width: 100px;
  height: 0;
  opacity: 0;
  left: -9999em;
}

#output {
  color: #0be80b;
  white-space: pre-wrap;
}

.prefix {
  font-weight: bold;
  padding-right: 7px;
}

.info {
  color: #2196F3;
}

.success {
  color: yellow;
}

.error {
  color: #ff1b1b;
}

.blinker {
  position: absolute;
  margin-left: -0.2em;
  color: #0be80b;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}

JS

// The simplest example of command web app
// Zzbaivong - https://baivong.github.io

(function($) {
  'use strict';

  var $input = $('#input'),
    $output = $('#output'),
    $logs = $('#logs'),
    commands = [],
    index = 0;

  function focusInput() {
    $input.focus();
  }

  function log(type, txt, cmd) {
    var $result = $('<p>', {
      'class': type,
      text: txt
    });
    if (cmd) $result.prepend($('<span>', {
      'class': 'prefix',
      text: 'root@example:~#'
    }));
    $result.appendTo($logs);
  }

  function rollCommands() {
    $input.val(commands[index]).prop('selectionStart', $input.val().length);
    rollCaret();
  }

  function rollCaret(move) {
    var value = $input.val(),
      pos = $input.prop('selectionStart');

    if (move === 'left' && pos !== 0) pos--;
    if (move === 'right') pos++;

    $output.html(value.slice(0, pos)).append($('<span>', {
      'class': 'blinker',
      text: '|'
    })).append(value.slice(pos));
  }

  focusInput();
  $(window).focus(function() {
    focusInput();
  });
  $input.on('blur keydown', function() {
    focusInput();
  });

  $input.on('input', function() {
    rollCaret();
  }).on('keydown', function(e) {
    if (e.keyCode === 13) {

      var val = $input.val();

      log('command', val, true);
      commands.push(val);
      index = commands.length;

      if (val === 'help') {
        log('info', 'echo [value]');

      } else if (/^echo\s.+$/.test(val)) {
        log('success', val.slice(5));

      } else {
        log('error', 'Error: Command not recognized. Type "help" for a list of commands.');
      }

      $input.val('');
      $output.html($('<span>', {
        'class': 'blinker',
        text: '|'
      }));
      $("html, body").scrollTop(99999);

      return false;
    } else if (e.keyCode === 38) {

      if (index > 0 && index <= commands.length) index--;
      rollCommands();

      return false;
    } else if (e.keyCode === 40) {

      if (index >= 0 && index < commands.length - 1) index++;
      rollCommands();

      return false;
    } else if (e.keyCode === 37) {

      rollCaret('left');
    } else if (e.keyCode === 39) {

      rollCaret('right');
    }
  });

})(jQuery);

Perfect