Group Details Private

Global Moderators

Forum wide moderators

  • RE: Hiểu về Scope trong Javascript

    Bài viết rất hữu ích. Mình có bổ xung thêm,
    Lí do và chúng ta nên sử dụng let thay cho var trong vòng for vì như vậy sẽ kiểm soát được biến i khi vòng for kết thúc, đảm bảo không ảnh hưởng với những đoạn code bên ngoài về sau (nếu như code bên ngoài cũng đang sử dụng một biến tên i)

    Với var

    for(var i = 0; i < 10; i++){
    
    }
    console.log(i) // kết quả = 10
    
    

    Với let

    for(let i = 0; i < 10; i++){
    
    }
    console.log(i) // i không tồn tại, i is not defined
    
    
    posted in Tutorials
  • RE: Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

    Tuyệt nhỉ,
    Cái này làm animation trong game thì tuyệt rồi.

    posted in Case Study Thực Tế
  • Hướng dẫn tạo hiệu ứng ảnh Slide Before After với Javascript

    Slide image Before After:

    Hiệu ứng Slide Before After rất hữu ích nếu như bạn muốn so sánh 2 hình ảnh với nhau tạo trải nghiệm thích thú khi sử dụng website. Chúng ta có thể dùng Slide Before After để làm nổi bật sự khác biệt giữa ảnh trước và ảnh sau một cách rõ rệt.

    Slide Before After.gif

    Rất thú vị phải không nào 😃 . Nào cùng mình bắt đầu thiết kế hiệu ứng Slide Before After nhé.

    Các bước thực hiện

    Bước 1: Tạo HTML
    Tạo file index.html

    Code hoàn chỉnh như sau

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    
    

    Lưu ý: Các bạn nhớ bổ sung file style.css và script.js vào cùng thư mục file HTML nhé

    Bước 2: Trang trí giao diện với CSS
    Tạo file với với tên style.css

    Đầu tiên chúng ta sẽ set kích thước cho khung ảnh

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    

    Ở trên nếu bạn muốn ảnh to hoặc nhỏ chỉ cần sửa max-width: 600px bằng kích thước bạn muốn là được.

    Cấu hình CSS cho ảnh trước và sau:

    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    

    Chú ý: các bạn có thể thay hình ảnh Before After tại background-image bằng đường dẫn ảnh của mình.

    Tiếp theo là handle chính là hình tròn điều khiển ở giữa 2 tấm ảnh:

    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    

    Cuối cùng là input, giúp chúng ta có thể di chuyển handle tròn bên trên theo chiều ngang một cách mượt mà:

    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    Bước 3: Thiết lập Javascipt thay đổi hiệu ứng
    Tạo file script.js

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Với hàm moveDivisor, mỗi khi chung ta di chuyển handle tròn bên trên thì tỉ lệ hiển thị ảnh của Before và After sẽ thay đổi tạo lên hiệu ứng thay đổi hình ảnh

    Tổng kết:

    File HTML:

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    

    File CSS:

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    
    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    
    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    File JS:

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Chúc mọi người thực hiện thành công hiệu ứng Slide Before After nhé 😃
    Link download code: https://github.com/namndwebdev/frontend-casestudy/tree/master/Slide-Before-After

    Video chi tiết

    Slide Before After

    Nguồn : Codepen.io

    posted in Case Study Thực Tế
  • RE: [Hỏi Ngu] Mình muốn làm siêu nhân Node.JS? Mình phải làm như thế nào?

    @NHI-Nguyen-Thi-Yen Spam? Bạn nên tạo một bài viết mới để giới thiệu về blog của mình thì tốt hơn nhé. Trường hợp, bài viết không có giá trị hoặc spam, mình sẽ xóa và block tài khoản.

    Cảm ơn bạn đã tham giá diễn đàn!

    posted in Node.JS
  • Câu lệnh điều kiện rẽ nhánh if else trong lập trình Javascript (Phần IV)

    Chào các bạn, ở bài viết trước chúng ta đã tìm hiểu về toán tử trong lập trình. Nhìn chung là khá đơn giản phải không nào. Đây là bài viết số 4 trong loạt bài lập trình javascript từ căn bản đến nâng cao cho người mới bắt đầu, nếu như bạn vẫn chưa nắm rõ kiến thức căn bản về kiểu dữ liệu, toán tử thì có thể bắt đầu xem lại từ Bài 1 nhé
    Giờ chúng ta bắt đầu với kiến thức hôm nay thôi:

    lệnh if else  trong lập trình.jpg

    Câu lệnh if else là gì

    Cậu lệnh điều kiên gồm 2 phần chính đó là khối ifkhối else. Khi chạy chương trình thì chỉ 1 trong 2 khối này được thực thi dựa vào điều kiện đã cho.

    if (condition) {
    //nếu condition có giá trị = true thì các câu lệnh bên trong khối if sẽ được thực thi
    } else {
    //nếu condition = false thì hiển nhiên tất cả code bên trong else sẽ được thực thi
    }
    

    Tại sao cần dùng hàm if else

    điều kiện trong if else.jpg
    Việc bạn dùng if else cũng như bạn đang đứng ở ngã ba, với mỗi thời điểm và điều kiện khác nhau thì lựa chọn đường đi cũng khác nhau. Vì vậy sử lệnh điều kiện if else sẽ giúp chương trình có thể thực thi code linh hoạt tùy vào điều kiện đã cho.
    Ví dụ 1 chương trình phân loại học sinh dựa vào điểm số. Mỗi một học sinh sẽ có điểm số khác nhau, chính vì vậy chúng ta cần có câu lệnh điều kiện để có thể phân loại giữa các học sinh.

    if(diem >= 8 ){
    // học sinh giỏi.
    }
    
    if( 4 < diem && diem < 8 ){
    // học sinh khá
    }
    

    Hàm if nhiều điều kiện

    Với mỗi điều kiện khác nhau thì hướng thực thi đoạn code sẽ hoàn toàn khác nhau, chính vì vậy để thành thạo trong việc vận dụng bạn cần nắm chắc kiến thức về cách TOÁN TỬ hoạt động, khi đó bạn sử dụng lệnh if else mới chính xác được.
    Giá trị của condition bên trên chính là kiểu boolean (true hoặc false) mà chúng ta đã học bài TOÁN TỬ.
    Ví dụ bạn hoàn toàn thay condition bên trên bằng các giá trị:

    • true
    • false
    • 4 > 3
    • 2 < 4 && 5 > 6
      vân vân...
      xem bài TOÁN TỬ để hiểu rõ hơn

    Câu lệnh else if rẽ nhánh

    if(score < 4){
        console.log('TB');
    }else if(score < 8){
        console.log('Kha');
    } else if(score < 9){
        console.log('Gioi');
    } else {
        console.log('xuat sac');
    }
    

    Đoạn code trên sử dụng else if, ta có thể hiểu như sau:
    Đầu tiên kiểm tra score < 4 ,

    • nếu đúng thì thực hiện lệnh console.log('TB') và không cần kiểm tra điều kiện nào nữa

    • nếu sai thì mới tiếp tục kiểm tra xem score < 8 hay không và tương tự cho đến hàm else cuối cùng.

    Lệnh if rút gọn

    Chúng ta có kiểu hàm if rút gọn mà không cần viết khối else:

    if(score < 4){
    
    console.log('TB');
    
    }
    

    Trường hợp này nếu score < 4 thì đoạn code console.log('TB'); mới được thực thi, còn lại thì không

    Chú ý khi sử dụng câu lệnh if else cho người mới

    Chú ý 1:
    Khi dùng câu lệnh if else chúng ta cần chú ý hạn chế việc lồng các if vào nhau như code bên dưới:

    if(score < 4){
        if(score < 8){
            if(score < 9){
                if(score < 10){
       
                }
            }
        }
    }
    

    Nếu bắt buộc phải lồng if trong if thì chúng ta hạn chế số lần lồng cấp tối đa là 3 lần. Việc lồng if nhiều lần sẽ khiến code chúng ta rất rối mắt, và đồng thời việc Debug - Kiểm tra lỗi sẽ rất phức tạp mất công sức.

    Chú ý 2:

    //code 1
    if(8< 4)
        console.log(1);
        console.log(2);
    
    //code 2
    if(8< 4){
        console.log(1);
        console.log(2);
    }
    

    Ở đoạn code 1 thiếu {} ở sau if. Chính vì vậy khi chạy code thì chỉ có duy nhất dòng console.log(1); được tính là trong khối if, còn lại là ngoài khối if.
    Kết quả của đoạn code 1: in ra số 2 vì console.log(2) không nằm trong khối if
    Kết quả của đoạn code 2: không in ra gì cả

    Vậy là chúng ta đã tìm hiểu xong về câu lệnh if else trong lập trình, chi tiết các bạn có thể xem video bên dưới để hiểu rõ hơn, các bạn để lại comment nếu có thắc mắc để được giải đáp nhé.

    If else tutorial

    Bài trước : TOÁN TỬ
    Bài tiếp: switch case.

    posted in Tutorials
  • RE: Nhập môn lập trình căn bản về Javascript từ căn bản đến nâng cao (Phần II)

    @Dương-Nguyễn Đây là link tham chiếu nhanh cách sử dụng Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

    posted in Tutorials
  • RE: Nhập môn lập trình căn bản về Javascript từ căn bản đến nâng cao (Phần II)

    @Dương-Nguyễn Đây là phần 2 chứ em nhỉ? 😃 có thêm ví dụ nữa thì tốt quá.

    Mà em học thêm cú pháp Markdown để viết bài trông đẹp hơn nhé.
    Ví dụ 1 đoạn code như này:

    /**
     * Autodiscover mode
     */
    require('@kites/core')
      .engine({
        loadConfig: true
      })
      .init()
      .then(app => {
        app.logger.info('Kites application started!');
      })
      .catch(err => {
        console.error('Kites start app error: ', err);
      });
    

    Trông sẽ đẹp hơn rất nhiều!

    posted in Tutorials
  • RE: Hệ thống analytic "sương sương" từ dữ liệu 30 triệu người dùng

    Rất hay !!! Thanks bạn đã chia sẻ

    posted in Hỏi Đáp