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

[sample (<script>alert("hacked")</script>)]

Em thấy có nhiều trang web ngày nay đang theo hướng “Giả lập Console”. Nhìn rất sành điệu, rất bờ rồ, rất chuyên nghiệp, và em rất là thích kiểu trang web như thế này.
Các anh có thể tham khảo những mẫu trang sau:

• Alan Walker: http://www.alanwalkermusic.no/console/
• Mr.Robot: https://www.whoismrrobot.com/

Em muốn làm những trang web kiểu như thế thì cần những kiến thức gì? Các anh chị có thể gợi ý cho em vài từ khóa để tìm kiếm được không?
Em cám ơn.

[nguyenchiemminhvu (NCMV)]

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="//cdn-akamai.mookie1.com/LB/LightningBolt.js"></script>
<script src="//assets.usanetwork.com/s_code.js"></script>
<script src="/assets/main.5f05c672d81b13923aca.js"></script>

[sample (<script>alert("hacked")</script>)]

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

[Vong_Hoang_Tuong (null)]

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.

[sample (<script>alert("hacked")</script>)]

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

[thangngoc89 (Khoa Nguyen)]

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

[Vong_Hoang_Tuong (null)]

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);

[sample (<script>alert("hacked")</script>)]

Perfect