JAVASCRIPT: FUNC PANGGILAN FUNK

Pengenalan kepada Fungsi dalam JavaScript

JavaScript, sebagai bahasa yang serba boleh dan dinamik, menganggap fungsi sebagai warga kelas pertama. Ini bermakna fungsi boleh dimanipulasi sama seperti jenis data lain. Ia boleh ditugaskan kepada pembolehubah, disimpan dalam tatasusunan, dan diluluskan sebagai argumen kepada fungsi lain. Fleksibiliti ini adalah asas kepada keupayaan JavaScript untuk bertindak balas kepada acara pengguna dengan berkesan.

---

Soalan dan Jawapan

S1: Apakah maksud fungsi menjadi warganegara kelas pertama dalam JavaScript?
J1: Dalam JavaScript, fungsi dianggap warga kelas pertama, bermakna ia boleh diberikan kepada pembolehubah, diluluskan sebagai argumen kepada fungsi lain dan dikembalikan daripada fungsi. Ia boleh dimanipulasi sama seperti mana-mana jenis data lain.

S2: Bagaimanakah anda mentakrifkan fungsi dalam JavaScript menggunakan pengisytiharan fungsi?
A2: Fungsi dalam JavaScript boleh ditakrifkan menggunakan pengisytiharan fungsi seperti ini:

function functionName(parameters) {
    // function body
}

S3: Apakah pendengar acara dalam JavaScript?
A3: Pendengar acara ialah fungsi yang dipanggil apabila peristiwa tertentu berlaku pada elemen HTML. Ia ditambahkan pada elemen menggunakan kaedah addEventListener, yang mengambil jenis acara dan fungsi untuk dipanggil sebagai argumen.

S4: Bagaimanakah anda menambahkan pendengar acara klik pada butang dengan ID 'myButton'?
J4: Anda boleh menambah pendengar acara klik pada butang dengan ID 'myButton' seperti ini:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

S5: Mengapakah anda mungkin menggunakan fungsi bernama dan bukannya fungsi tanpa nama untuk pengendali acara?
J5: Menggunakan fungsi yang dinamakan untuk pengendali acara menjadikan kod anda lebih mudah dibaca dan boleh digunakan semula. Fungsi bernama boleh ditakrifkan sekali dan digunakan beberapa kali, manakala fungsi tanpa nama selalunya lebih sukar untuk nyahpepijat dan diselenggara.

S6: Bagaimanakah anda mengalih keluar pendengar acara dalam JavaScript?
J6: Anda boleh mengalih keluar pendengar acara menggunakan kaedah removeEventListener. Kaedah ini memerlukan rujukan fungsi tepat yang digunakan semasa pendengar acara ditambahkan. Contohnya:

document.getElementById('myButton').removeEventListener('click', handleClick);

Apakah Fungsi?

Dalam JavaScript, fungsi ialah blok kod yang direka untuk melaksanakan tugas tertentu. Ia dilaksanakan apabila sesuatu memanggilnya (memanggilnya). Fungsi boleh ditakrifkan menggunakan pengisytiharan fungsi atau ungkapan fungsi.

`Function Declaration:
function greet(name) {
    return `Hello, ${name}!`;
}

Function Expression:
const greet = function(name) {
    return `Hello, ${name}!`;
};`

Kedua-dua kaedah mencipta fungsi yang boleh digunakan untuk melaksanakan blok kod yang terkandung di dalamnya.

Warganegara Kelas Pertama

Istilah "warga kelas pertama" dalam bahasa pengaturcaraan merujuk kepada entiti yang boleh dihantar sebagai argumen kepada fungsi, dikembalikan daripada fungsi dan ditetapkan kepada pembolehubah. Dalam JavaScript, fungsi menikmati status ini, membolehkan fungsi tertib tinggi dan panggilan balik.

Contoh Menetapkan Fungsi kepada Pembolehubah:

`const sayHello = function(name) {
    return `Hello, ${name}!`;
};
console.log(sayHello('Alice'));`

Contoh Meluluskan Fungsi sebagai Hujah:

function callWithArgument(fn, arg) {
    return fn(arg);
}
console.log(callWithArgument(sayHello, 'Bob'));

Menjawab Peristiwa Pengguna

Acara pengguna ialah tindakan yang dilakukan oleh pengguna, seperti mengklik butang, menaip dalam medan teks atau menggerakkan tetikus. JavaScript menggunakan pendengar acara untuk bertindak balas kepada acara ini. Pendengar acara ialah fungsi yang dipanggil apabila acara dikesan pada elemen HTML.

Menambah Pendengar Acara

Untuk menjadikan halaman web interaktif, anda boleh menambah pendengar acara pada elemen HTML menggunakan kaedah addEventListener. Kaedah ini mengambil dua hujah: jenis acara dan fungsi untuk memanggil apabila peristiwa itu berlaku.

Contoh:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

Dalam contoh ini, kaedah addEventListener digunakan untuk melampirkan acara klik pada butang dengan ID myButton. Apabila butang diklik, kotak amaran dipaparkan.

Menggunakan Fungsi Dinamakan untuk Pengendali Acara
Walaupun fungsi tanpa nama (seperti yang ditunjukkan di atas) sering digunakan untuk pengendalian acara, fungsi yang dinamakan boleh menjadikan kod anda lebih mudah dibaca dan boleh digunakan semula.

Contoh:

function handleClick() {
    alert('Button was clicked!');
}

document.getElementById('myButton').addEventListener('click', handleClick);

Dalam contoh ini, fungsi handleClick ditakrifkan secara berasingan dan kemudian diserahkan kepada addEventListener.

Mengalih keluar Pendengar Acara

Pendengar acara boleh dialih keluar menggunakan kaedah removeEventListener. Kaedah ini memerlukan rujukan fungsi tepat yang digunakan semasa pendengar acara ditambahkan.

Contoh:

document.getElementById('myButton').removeEventListener('click', handleClick);

Mengalih keluar pendengar acara berguna untuk mengurus sumber dan mengelakkan kebocoran memori dalam aplikasi yang kompleks.

Lagi Contoh:

Memanipulasi DOM (Model Objek Dokumen) selalunya melibatkan fungsi penghantaran, termasuk fungsi tanpa nama, sebagai argumen kepada fungsi lain. Ini amat berguna untuk pengendalian acara, kemas kini kandungan dinamik dan menerapkan transformasi yang kompleks. Berikut ialah beberapa contoh praktikal untuk menggambarkan konsep ini.

Example 1: Event Handling with Anonymous Functions
In event handling, it's common to pass an anonymous function directly into addEventListener.

document.getElementById('submitBtn').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent the default form submission behavior
    const inputText = document.getElementById('textInput').value;
    console.log(`Submitted text: ${inputText}`);
});

In this example, the anonymous function passed to addEventListener handles the click event on the button with the ID submitBtn. It prevents the default form submission and logs the input text.

Example 2: Array Methods with Anonymous Functions
Array methods like forEach, map, and filter often use anonymous functions to manipulate the DOM based on the array's content.

const listItems = document.querySelectorAll('li');
listItems.forEach(function(item, index) {
    item.textContent = `Item ${index + 1}`;
}); 

Here, an anonymous function is passed to forEach to update the text content of each list item with its respective index.

Example 3: Creating Dynamic Content
You can use anonymous functions to create and manipulate DOM elements dynamically.

document.getElementById('addItemBtn').addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.textContent = `New Item ${Date.now()}`;
    document.getElementById('itemList').appendChild(newItem);
}); 

In this example, clicking the button with the ID addItemBtn triggers an anonymous function that creates a new list item and appends it to the list with the ID itemList.

Example 4: Custom Event Handling
Sometimes, you may want to pass functions into custom event handlers.

function handleCustomEvent(eventHandler) {
    document.getElementById('triggerBtn').addEventListener('click', function() {
        const eventDetail = { message: 'Custom event triggered' };
        eventHandler(eventDetail);
    });
}

handleCustomEvent(function(eventDetail) {
    console.log(eventDetail.message);
});

In this scenario, handleCustomEvent accepts an anonymous function as an argument and uses it as an event handler for a custom event triggered by clicking the button with the ID triggerBtn.

Example 5: SetTimeout and SetInterval
The setTimeout and setInterval functions often use anonymous functions to perform actions after a delay or at regular intervals.

setTimeout(function() {
    document.getElementById('message').textContent = 'Timeout triggered!';
}, 2000);

let counter = 0;
const intervalId = setInterval(function() {
    counter++;
    document.getElementById('counter').textContent = `Counter: ${counter}`;
    if (counter === 10) {
        clearInterval(intervalId);
    }
}, 1000);

Here, the first anonymous function updates the text content of an element with the ID message after a 2-second delay. The second anonymous function increments a counter and updates the text content of an element with the ID counter every second until the counter reaches 10, at which point the interval is cleared.

Passing functions, including anonymous functions, into other functions is a powerful technique in JavaScript for DOM manipulation and event handling. These examples demonstrate how you can leverage this feature to create dynamic and interactive web applications. Whether you're handling events, updating content dynamically, or using built-in methods like setTimeout, understanding how to pass functions effectively will enhance your ability to work with the DOM.

Atas ialah kandungan terperinci JAVASCRIPT: FUNC PANGGILAN FUNK. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!