Konsep hujung hadapan II

Peringkat Muda

1. Soalan: Apakah Grid CSS? Jawapan: Grid CSS ialah sistem reka letak yang membolehkan anda membuat reka letak dua dimensi di web. Ia membahagikan halaman kepada baris dan lajur, menjadikannya lebih mudah untuk meletakkan elemen. Contohnya:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Soalan: Apakah acara "DOMContentLoaded"? Jawapan: Acara DOMContentLoaded dicetuskan apabila dokumen HTML awal telah dimuatkan dan dihuraikan sepenuhnya, tanpa menunggu lembaran gaya, imej dan subbingkai selesai dimuatkan. Ia berguna untuk menjalankan skrip sebaik sahaja DOM sedia:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Soalan: Apakah sifat "z-index" dalam CSS? Jawapan: Sifat z-index mengawal susunan susunan elemen. Elemen dengan indeks z yang lebih tinggi dipaparkan di hadapan elemen dengan indeks z yang lebih rendah. Contohnya:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. Soalan: Apakah "ini" dalam JavaScript? Jawapan: Ini dalam JavaScript merujuk kepada konteks pelaksanaan semasa. Nilai ini boleh berubah bergantung pada bagaimana fungsi dipanggil. Contohnya:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Soalan: Apakah pemilih CSS? Jawapan: Pemilih CSS ialah corak yang digunakan untuk memilih elemen yang anda mahu gayakan. Terdapat beberapa jenis pemilih seperti pemilih kelas, ID dan jenis. Contohnya:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Soalan: Apakah "localStorage" dalam JavaScript? Jawapan: localStorage ialah API yang membolehkan anda menyimpan data dalam penyemak imbas pengguna secara berterusan. Data yang disimpan dalam localStorage tidak luput dan kekal walaupun selepas menutup penyemak imbas. Contohnya:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Soalan: Apakah itu "event bubbling"?
   
   Jawapan: "Acara menggelegak" ialah mekanisme penyebaran peristiwa di mana peristiwa bermula di unsur paling dalam dan merambat ke unsur luar. Contohnya, jika butang di dalam

   diklik, acara klik akan dicetuskan terlebih dahulu pada butang dan kemudian pada

   .

2. Soalan: Apakah itu "fungsi panggil balik"?
   
   Jawapan: "Fungsi panggil balik" ialah fungsi yang dihantar sebagai hujah kepada fungsi lain, yang boleh dipanggil kemudian. Contohnya:
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Soalan: Apakah itu "reka bentuk responsif"? Jawapan: "Reka bentuk responsif" ialah pendekatan reka bentuk web yang bertujuan untuk mencipta halaman yang menyesuaikan dengan saiz skrin dan peranti yang berbeza. Ini selalunya dicapai menggunakan pertanyaan media dalam CSS. Contohnya:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Soalan: Apakah itu "fetch API"?
   
   Jawapan: API pengambilan ialah antara muka moden untuk membuat permintaan HTTP dalam JavaScript. Ia mengembalikan Janji yang menyelesaikan respons permintaan. Contohnya:
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

Tahap Penuh

1. Soalan: Apakah itu "CORS"?
   
   Jawapan: CORS (Cross-Origin Resource Sharing) ialah mekanisme keselamatan yang membenarkan sumber terhad pada halaman web diminta daripada domain yang berbeza daripada domain yang menyediakan halaman tersebut. Ini penting untuk melindungi data pengguna.

2. Soalan: Apakah "DOM maya" dalam React?
   
   Jawapan: "DOM maya" ialah perwakilan ringan DOM sebenar. React menggunakan DOM maya untuk mengoptimumkan pengemaskinian DOM, membolehkannya membuat perubahan dengan lebih cekap dengan membandingkan DOM maya dengan DOM sebenar dan hanya menggunakan perubahan yang diperlukan.

3. Soalan: Apakah "props" dalam React?
   
   Jawapan: "Props" ialah mekanisme untuk menghantar data antara komponen dalam React. Mereka membenarkan anda menghantar data daripada komponen induk kepada komponen anak. Contohnya:
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. Soalan: Apakah "keadaan" dalam React?
   
   Jawapan: "Keadaan" ialah objek yang mewakili bahagian aplikasi yang boleh berubah. Ia digunakan untuk menyimpan data yang mempengaruhi pemaparan komponen. Contohnya:
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. Soalan: Apakah itu "React Router"?
   
   Jawapan: React Router ialah perpustakaan yang membenarkan navigasi antara komponen berbeza dalam aplikasi React, memudahkan penciptaan aplikasi satu halaman (SPA). Ia membolehkan anda mentakrifkan laluan dan membuat komponen berdasarkan URL.

6. Soalan: Apakah "cangkuk" dalam React?
   
   Jawapan: Cangkuk ialah fungsi yang membolehkan anda menggunakan keadaan dan sumber React lain dalam komponen berfungsi. useState dan useEffect ialah contoh cangkuk. Contohnya:
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. Soalan:Apakah itu "Webpack"?
   
   Jawapan: Webpack ialah pembungkus modul untuk aplikasi JavaScript. Ia membolehkan anda menggabungkan JavaScript, CSS dan fail sumber lain ke dalam satu fail atau berbilang fail yang dioptimumkan pengeluaran.

8. Soalan:Apakah itu "Babel"?
   
   Jawapan: Babel ialah transpiler yang membolehkan anda menulis kod JavaScript moden (ES6) dan menukarnya kepada versi yang serasi dengan penyemak imbas lama. Ia sering digunakan bersama dengan Webpack.

9. Soalan: Apakah itu "SASS"?
   
   Jawapan: SASS (Syntactically Awesome Style Sheets) ialah prapemproses CSS yang membolehkan anda menggunakan pembolehubah, sarang dan fungsi, menjadikan CSS lebih dinamik dan lebih mudah diselenggara. Contohnya:
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. Soalan:Apakah itu "AJAX"?
    
    Jawapan: AJAX (Asynchronous JavaScript and XML) ialah teknik yang membolehkan anda membuat permintaan tak segerak ke pelayan tanpa memuatkan semula halaman. Ini selalunya digunakan untuk mengemas kini bahagian halaman web secara dinamik.

Peringkat Kanan

1. Soalan: Apakah itu "seni bina perkhidmatan mikro"?
   
   Jawapan: Seni bina Microservices ialah gaya seni bina yang menstrukturkan aplikasi sebagai satu set perkhidmatan kecil dan bebas yang berkomunikasi antara satu sama lain. Ini membolehkan pasukan yang berbeza bekerja pada bahagian aplikasi yang berbeza dengan lebih cekap.

2. Soalan: Apakah itu "SSR" (Rendering Sebelah Pelayan)?
   
   Jawapan: SSR ialah teknik di mana pemaparan aplikasi web dilakukan pada pelayan dan bukannya pada klien. Ini boleh meningkatkan prestasi dan SEO kerana kandungan dihantar kepada pelanggan yang telah diberikan.

3. Soalan: Apakah itu "CSR" (Penyelesaian Sebelah Pelanggan)?
   
   Jawapan: CSR ialah teknik di mana pemaparan aplikasi web dilakukan pada klien, biasanya menggunakan JavaScript. Ini membolehkan pengalaman pengguna yang lebih interaktif, tetapi boleh memberi kesan negatif pada SEO jika tidak dilaksanakan dengan betul.

4. Soalan:Apakah itu "Redux Saga"?
   
   Jawapan: Redux Saga ialah perpustakaan yang memudahkan pengurusan kesan sampingan dalam aplikasi Redux. Ia menggunakan penjana untuk mengendalikan operasi tak segerak seperti panggilan API dengan cara yang lebih mudah dibaca dan teratur.

5. Soalan: Apakah "API Konteks" dalam React?
   
   Jawapan: API Konteks ialah satu cara untuk menghantar data melalui pepohon komponen tanpa perlu menghantar prop secara manual pada setiap peringkat. Ini berguna untuk berkongsi data global seperti tema atau maklumat pengguna.

6. Soalan: Apakah itu "TypeScript"?
   
   Jawapan: TypeScript ialah superset JavaScript yang menambahkan penaipan statik pada kod. Ia membolehkan anda menentukan jenis pembolehubah, fungsi dan objek, membantu mengelakkan ralat masa jalan.

7. Soalan: Apakah itu "Progressive Web App" (PWA)?
   
   Jawapan: PWA ialah aplikasi web yang menawarkan pengalaman seperti apl asli, termasuk sokongan luar talian, pemberitahuan tolak dan pemasangan skrin utama. Ia dibina menggunakan teknologi web standard.

8. Soalan: Apakah itu "GraphQL"?
   
   Jawapan: GraphQL ialah bahasa pertanyaan untuk API yang membolehkan pelanggan meminta dengan tepat data yang mereka perlukan. Ini berbeza dengan API REST, di mana pelanggan mungkin menerima lebih banyak data daripada yang diperlukan.

9. Soalan: Apakah itu "Kebolehcapaian Web"?
   
   Jawapan: Kebolehcapaian web merujuk kepada amalan menjadikan aplikasi web boleh digunakan oleh orang kurang upaya. Ini termasuk menggunakan teg semantik, atribut ARIA dan memastikan kandungan boleh dilayari papan kekunci.

10. Soalan: Apakah itu "Pekerja Perkhidmatan"?
    
    Jawapan: Pekerja Perkhidmatan ialah skrip yang dijalankan oleh penyemak imbas di latar belakang, berasingan daripada halaman web, membolehkan kefungsian seperti caching, pemberitahuan tolak dan penyegerakan latar belakang. Ia penting untuk membina PWA.

Bibliografi

Maklumat yang dibentangkan telah diekstrak dan disesuaikan daripada beberapa sumber yang boleh dipercayai, termasuk:

1. Glassdoor - Tapak tempat orang berkongsi pengalaman temu duga dan soalan lazim mereka.

   • Pintu Kaca

2. Dokumen Web MDN - Dokumentasi komprehensif tentang HTML, CSS dan JavaScript.

   • Dokumen Web MDN

3. JavaScript.info - Panduan moden untuk JavaScript, merangkumi segala-galanya daripada asas kepada topik lanjutan.

   • JavaScript.info

4. Dokumentasi React - Dokumentasi React rasmi, yang menyediakan maklumat terperinci tentang perpustakaan.

   • Dokumentasi React

5. Css-Tricks - Tapak web dengan petua dan tutorial tentang CSS dan pembangunan bahagian hadapan.

   • Css-Helah

Sumber ini diiktiraf secara meluas dalam komuniti pembangunan web dan merupakan sumber yang hebat untuk mendalami pengetahuan bahagian hadapan.