mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-23 06:44:49 +02:00
Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners
This commit is contained in:
Sanjay
@@ -101,7 +101,7 @@ displayGreeting('Christopher', 'Hi');
|
||||
|
||||
## Rückgabewerte
|
||||
|
||||
Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/en-US/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
|
||||
Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
|
||||
|
||||
Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann in einer Variablen genauso gespeichert werden, wie wir einen Literalwert wie eine Zeichenfolge oder eine Zahl speichern könnten.
|
||||
|
||||
@@ -131,7 +131,7 @@ const greetingMessage = createGreetingMessage('Christopher');
|
||||
|
||||
Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser nette Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas eintreten oder abgeschlossen sein wird, aber wir wissen, dass wir als Reaktion darauf eine Operation ausführen müssen.
|
||||
|
||||
Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
|
||||
Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
|
||||
|
||||
Wenn Sie den folgenden Code ausführen, wird nach 3 Sekunden die Meldung **3 Sekunden sind verstrichen** angezeigt.
|
||||
|
||||
@@ -188,7 +188,7 @@ Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artik
|
||||
|
||||
## Review & Selbststudium
|
||||
|
||||
Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
|
||||
Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
|
||||
|
||||
## Zuordnung
|
||||
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
# Conceptos básicos de JavaScript: métodos y funciones
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y funciones")
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
|
||||
# Conceptos básicos de JavaScript: funcións y funciones
|
||||
|
||||
Cuando necesite su código para realizar una tarea, utilizará un método o una función. Analicemos las diferencias.
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "funcións y funciones")
|
||||
|
||||
## [Pre-lectura prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
|
||||
|
||||
Cuando necesite su código para realizar una tarea, utilizará un función o una función. Analicemos las diferencias.
|
||||
|
||||
## Funciones
|
||||
|
||||
@@ -16,10 +20,94 @@ function name(param, param2, param3) { // definición de función
|
||||
}
|
||||
```
|
||||
|
||||
## Métodos
|
||||
## Funciónes (Functions)
|
||||
|
||||
TODO
|
||||
En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!
|
||||
|
||||
Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.
|
||||
|
||||
## Creating and calling a function
|
||||
|
||||
La sintaxis de una función se parece a la siguiente:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
}
|
||||
```
|
||||
|
||||
Si quisiera crear una función para mostrar un saludo, podría verse así:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('¡Hola, mundo!');
|
||||
}
|
||||
```
|
||||
|
||||
Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTA:** Existe un tipo especial de función conocida como **método**, que ya ha estado utilizando. De hecho, vimos esto en nuestra demostración anterior cuando usamos `console.log`. Lo que hace que un método sea diferente de una función es que un método está adjunto a un objeto (`consola` en nuestro ejemplo), mientras que una función es flotante libre. Escuchará que muchos desarrolladores usan estos términos indistintamente.
|
||||
|
||||
### Mejores prácticas de función
|
||||
|
||||
Hay algunas prácticas recomendadas que se deben tener en cuenta al crear funciones:
|
||||
|
||||
- Como siempre, use nombres descriptivos para que sepa lo que hará la función
|
||||
- Usa **camelCasing** para combinar palabras
|
||||
- Mantenga sus funciones enfocadas en una tarea específica
|
||||
|
||||
## Pasar información a una función
|
||||
|
||||
Para que una función sea más reutilizable, a menudo querrá pasarle información. Si consideramos nuestro ejemplo de `displayGreeting` anterior, solo mostrará **¡Hola, mundo!**. No es la función más útil que uno podría crear. Si queremos hacerlo un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un **parámetro**. Un parámetro (también llamado a veces **argumento**), es información adicional enviada a una función.
|
||||
|
||||
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Podemos actualizar nuestro `displayGreeting` para aceptar un nombre y mostrarlo.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `¡Hola, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Cuando queremos llamar a nuestra función y pasar el parámetro, lo especificamos entre paréntesis.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Paco');
|
||||
// dice "¡Hola, Paco!" cuando ejecutas el comando
|
||||
```
|
||||
|
||||
## Valores predeterminados
|
||||
|
||||
Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿y si no queremos que se especifiquen todos los valores? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre según sea necesario (necesitamos saber a quién saludamos), pero queremos permitir que el saludo en sí se personalice como desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: `parameterName = 'defaultValue'`. Para ver un ejemplo completo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hola') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Cuando llamamos a la función, podemos decidir si queremos establecer un valor para el "saludo".
|
||||
|
||||
```javascript
|
||||
displayGreeting('Paco');
|
||||
// dice "Hola, Paco"
|
||||
|
||||
displayGreeting('Paco', 'Hola');
|
||||
// dice "Hola, Paco"
|
||||
```
|
||||
### Parámetro
|
||||
|
||||
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
|
||||
@@ -30,7 +118,9 @@ Los parámetros se enumeran en la parte de definición entre paréntesis y está
|
||||
|
||||
### Parámetro
|
||||
|
||||
Cuerpo de función
|
||||
Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/en-US/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
|
||||
|
||||
Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
|
||||
|
||||
Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se devuelve así:
|
||||
|
||||
@@ -52,7 +142,7 @@ En el código anterior, se devuelve la variable `sum`.
|
||||
|
||||
### Invocación
|
||||
|
||||
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El método `add()` introducido se puede invocar de la siguiente manera:
|
||||
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El función `add()` introducido se puede invocar de la siguiente manera:
|
||||
|
||||
|
||||
```javascript
|
||||
@@ -64,7 +154,7 @@ Los argumentos `1` y `3` están vinculados a los parámetros `firstValue` y `sec
|
||||
|
||||
JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.
|
||||
|
||||
> Desafío, intente llamar al método `add()` así `add(1)` y vea qué sucede
|
||||
> Desafío, intente llamar al función `add()` así `add(1)` y vea qué sucede
|
||||
|
||||
### Valores predeterminados
|
||||
|
||||
@@ -93,7 +183,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
TODO
|
||||
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
|
||||
|
||||
**Tarea**: [Práctica de tipos de datos](assignment.es.md)
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Dasar-dasar JavaScript: Metode dan Fungsi
|
||||
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
@@ -102,7 +102,7 @@ tampilkanSapaan("Christopher", "Hi");
|
||||
|
||||
## Nilai Kembali (Return values)
|
||||
|
||||
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
|
||||
|
||||
@@ -131,7 +131,7 @@ const pesanSapaan = buatPesanSapaan("Christopher");
|
||||
|
||||
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||
|
||||
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
|
||||
|
||||
@@ -187,7 +187,7 @@ Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan me
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||
|
||||
## Tugas
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Nozioni di base su JavaScript: Metodi e Funzioni
|
||||
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz pre-lezione
|
||||
@@ -131,7 +131,7 @@ const greetingMessage = createGreetingMessage('Christopher');
|
||||
|
||||
Man mano che si progredisce nella propria carriera di programmatore, ci si imbatterà in funzioni che accettano funzioni come parametri. Questo trucco è comunemente usato quando non si sa quando qualcosa accadrà o sarà completata, ma si sa che si deve eseguire un'operazione in risposta.
|
||||
|
||||
Come esempio si consideri [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
|
||||
Come esempio si consideri [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
|
||||
|
||||
Se si esegue il codice qui sopra, dopo 3 secondi si vedrà il messaggio **3 seconds has elapsed** (sono trascorsi 3 secondi).
|
||||
|
||||
@@ -188,7 +188,7 @@ Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare u
|
||||
|
||||
## Revisione e auto apprendimento
|
||||
|
||||
Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
|
||||
Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
|
||||
|
||||
## Compito
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# JavaScript の基本: メソッドと関数
|
||||
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# JavaScript 기초: 메소드와 함수
|
||||
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## 강의 전 퀴즈
|
||||
@@ -101,7 +101,7 @@ displayGreeting('Christopher', 'Hi');
|
||||
|
||||
## 반환 값
|
||||
|
||||
지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/en-US/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
|
||||
지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
|
||||
|
||||
**반환 값**을 사용하면 할 수 있습니다. 반환 값은 함수에 의해 반환되며, 문자열이나 숫자와 같은 리터럴 값을 저장할 수 있고 똑같은 변수에 저장할 수 있습니다.
|
||||
|
||||
@@ -130,7 +130,7 @@ const greetingMessage = createGreetingMessage('Christopher');
|
||||
|
||||
프로그래밍 경력을 쌓으면서, 함수를 매개 변수로 받는 함수를 보게 될 것 입니다. 이 깔끔한 트릭은 일반적으로 어떤 일이 발생되거나 완료되는 때를 알지 못하지만, 이에 반응하여 작업해야 한다는 것을 알고있을 때 사용됩니다.
|
||||
|
||||
예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
|
||||
예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
|
||||
|
||||
아래 코드를 실행하면, 3초 후에 **3 seconds has elapsed**는 메시지가 표시됩니다.
|
||||
|
||||
@@ -185,7 +185,7 @@ setTimeout(3000, () => {
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
|
||||
화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
|
||||
|
||||
## 과제
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Asas JavaScript: Kaedah dan Fungsi
|
||||
|
||||
|
||||
|
||||
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
@@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi');
|
||||
|
||||
## Nilai Pulangan
|
||||
|
||||
Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
|
||||
Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita boleh melakukan ini dengan menggunakan **nilai kembali**. Nilai kembali akan dikembalikan oleh fungsi, dan dapat disimpan dalam pemboleh ubah sama seperti kita dapat menyimpan nilai literal seperti rentetan atau angka.
|
||||
|
||||
@@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher');
|
||||
|
||||
Semasa anda maju dalam kerjaya pengaturcaraan anda, anda akan menemui fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tindak balas.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
|
||||
|
||||
Sekiranya anda menjalankan kod di bawah ini, setelah 3 saat anda akan melihat mesej **3 saat telah berlalu**.
|
||||
|
||||
@@ -188,7 +188,7 @@ Bolehkah anda menyatakan dalam satu ayat perbezaan antara fungsi dan kaedah? Men
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
|
||||
Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
|
||||
|
||||
## Tugasan
|
||||
|
||||
|
||||
195
2-js-basics/2-functions-methods/translations/README.zh-tw.md
Normal file
195
2-js-basics/2-functions-methods/translations/README.zh-tw.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# JavaScript 入門 - 函式與方法
|
||||
|
||||
|
||||
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
|
||||
|
||||
## 課前測驗
|
||||
[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=zh_tw)
|
||||
|
||||
撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "函式與方法")
|
||||
|
||||
> 點擊上方圖片觀看關於函式的影片。
|
||||
|
||||
|
||||
## 函式 (Function)
|
||||
|
||||
函式是程式碼區塊，會在程式執行時被呼叫運行。有些時候我們需要重複性的執行同一項作業，比起複製整個邏輯到其他區塊，函式是較完美的處理方式。不只方便維護，也可以在任何地方、任何時間被其他函式呼叫執行。
|
||||
|
||||
另一項重點是函式的名稱，聽來不太重要，但它能直接地解釋程式碼的內容。你可以想像它是按鈕上的文字，若按鈕上寫著「停止計時」，你會預期按壓按鈕後會終止計時器的運作。
|
||||
|
||||
## 建立並呼叫函式
|
||||
|
||||
函式的語法格式如下：
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 函式的定義
|
||||
// 函式的說明與內容
|
||||
}
|
||||
```
|
||||
|
||||
如果你想建立一個打招呼的函式，它可能會以下列的格式呈現：
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
如果你想呼叫這個函式，我們使用函式的名稱加上 `()`。我們不需要考慮函式是在被呼叫地方的前面或後面才被定義出來，JavaScript 的編譯器會幫你尋找它的定義為置。
|
||||
|
||||
```javascript
|
||||
// 呼叫函式
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注意** 另一個你正使用的函式類型稱做 **方法(method)**。事實上，我們能在執行 `console.log` 的 demo 時能找到它。它與函式的差異在於它需要接續在物件後面，在這個例子中就是 `console`，而函式並沒有強制要求的。你會發現許多開發者在兩者之間做切換。
|
||||
|
||||
### 函式的重點觀念
|
||||
|
||||
在建立函式時，你需要注意一些重點：
|
||||
|
||||
- 我們反覆提到的，函式的名字要能了解函式的主要功能。
|
||||
- 使用**駝峰式大小寫(camelCasing)**來連接單字。
|
||||
- 單一函式只專一在單一功能。
|
||||
|
||||
## 向含式傳遞資料
|
||||
|
||||
為了讓函式能被重複利用，你會需要餵給函式不同的資料。以上述 `displayGreeting` 的例子中，它只能輸出文字 **Hello, world!**。這並不是個實用的函式。要增加函式的彈性，例如打招呼的對象，我們可以增加新的**參數(parameter/argument)**。它提供額外的資料給函式使用。
|
||||
|
||||
參數會寫在定義函式的地方，以括號與逗號標記與分隔：
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
現在我們更新函式 `displayGreeting`，讓它支援打招呼的對象：
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
當我們要呼叫函式時，輸入需要的參數在括號中：
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 呼叫完，印出字串 "Hello, Christopher!"
|
||||
```
|
||||
|
||||
## 預設值(Default values)
|
||||
|
||||
我們利用參數增加了函式的彈性。但如果我們不想每次都要指定參數給函式使用呢? 繼續之前的例子，保留對象的名稱外，我們增加招呼語的種類。我們可以定義招呼語的預設值，若使用者沒有指定哪一種招呼語時，就使用預設值。它的方法就與賦予變數數值一樣 ── `parameterName = 'defaultValue'`。例如：
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
當我們呼叫函式時，我們可以選擇是否要指定招呼語到 `salutation` 中。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 輸出字串 "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// 輸出字串 "Hi, Christopher"
|
||||
```
|
||||
|
||||
## 回傳值(Return values)
|
||||
|
||||
目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/en-US/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢?
|
||||
|
||||
此時，我們可以利用**回傳值**。回傳值由函式輸出，就像變數一樣儲存像是字串或是數字的結果。
|
||||
|
||||
如果函式有定義回傳值，那就需要使用關鍵字 `return` 。關鍵字 `return` 需要附帶回傳的數值或是參考物件在後方，如：
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
我們建立一個函式專門建立招呼訊息並回傳給呼叫者：
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
當函式被呼叫時，變數會儲存函式回傳的數值。這就像我們給變數定值一樣： `const name = 'Christopher'`。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 將函式作為函式參數使用
|
||||
|
||||
在你的程式旅程中，你會見到有函式將其他函式當作參數使用。這個俐落的手法常被用在一種情況：我們不知道 A 事件什麼時候發生與完成，但我們要在 A 事件後執行 B 事件。
|
||||
|
||||
舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！
|
||||
|
||||
執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('已經過三秒鐘');
|
||||
}
|
||||
// 計時單位為毫秒。
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 不記名函式(Anonymous functions)
|
||||
|
||||
回顧我們所建的函式，這些函式都只被執行了一次。當程式越來越複雜，我們可能建了許多的函式，但他們可能都只被呼叫了一次。這並不是理想的方式，那不如，不要給它函式名稱！
|
||||
|
||||
我們可以傳遞函式作為參數使用，也可以直接在參數裡建立新的函式。同樣使用關鍵字 `function`，但我們寫在參數欄當中。
|
||||
|
||||
試著以不記名函式的方式改寫程式碼：
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
執行上述程式後可以得到相同的結果。我們建立了一個函式，一個沒有名字的函式！
|
||||
|
||||
### 箭頭函式(Fat arrow functions)
|
||||
|
||||
許多程式語言，包含 JavaScript，都有一個常見的快捷語法稱作**箭頭(arrow/fat arrow)**函式。 它使用 `=>` 表示法，就像是箭頭一樣，如同它的名稱！使用 `=>` 可以省略關鍵字 `function`。
|
||||
|
||||
再一次改寫程式碼，這次我們使用箭頭函式：
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### 使用不同策略的時機
|
||||
|
||||
現在你已經學會了三種將函式作為參數的方法了。你可能會好奇使用它們的時機點為何。如果你知道你會重複使用一個函式，請使用正常的方法；如果你知道函式只用在特定的函式內一次，這就是用無記名函式的時機；箭頭函式與傳統 `function` 語法則是取決與你自己，但多數的開發者比較偏好使用 `=>`。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
你能用一句話清楚地說明這些函式與方法的差別嗎? 試試看吧！
|
||||
|
||||
## 課後測驗
|
||||
[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。
|
||||
|
||||
## 作業
|
||||
|
||||
[把玩函式](assignment.zh-tw.md)
|
||||
@@ -0,0 +1,13 @@
|
||||
# Plezier met functies
|
||||
|
||||
## Instructies
|
||||
|
||||
Maak verschillende functies, zowel functies die iets retourneren als functies die niets retourneren.
|
||||
|
||||
Kijk of u een functie kunt maken met een combinatie van parameters en parameters met standaardwaarden.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | Oplossing wordt geboden met twee of meer goed presterende functies met diverse parameters | Werkoplossing wordt aangeboden met één functie en enkele parameters | Oplossing heeft bugs |
|
||||
@@ -0,0 +1,13 @@
|
||||
# 把玩函式
|
||||
|
||||
## 簡介
|
||||
|
||||
建立不同的函式，有的回傳數值，有的不回傳數值。
|
||||
|
||||
看看你是否能讓函式有多樣的參數輸入與參數預設值。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ------------------------------------------ | -------------------------- | -------------- |
|
||||
| | 建立兩個以上多樣參數輸入且功能豐富的函式。 | 建立一個有參數輸入的函式。 | 函式出現問題。 |
|
||||
Reference in New Issue
Block a user