diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md index 649d2ab6..c1206550 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -2,7 +2,7 @@ ## Instructions -There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs. +There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs. ## Rubric diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md index 8e05de68..0929d7f8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.gr.md @@ -2,7 +2,7 @@ ## Οδηγίες -Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN. +Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN. ## diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md index ded90c34..8c73b4be 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md @@ -2,7 +2,7 @@ ## अनुदेश -ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें. +ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें. ## सरनामा diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md index a9d0ece7..870ed91d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md @@ -2,7 +2,7 @@ ## Instruksi -Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN. +Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN. ## Rubrik diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md index 10da2236..36c8f18d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md @@ -2,7 +2,7 @@ ## Istruzioni -Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN. +Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN. ## Rubrica diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md index a5057354..9c18dc8d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md @@ -2,7 +2,7 @@ ## 説明書 -Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 +Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 ## ルーブリック diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md index 2249bd03..ff32c318 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md @@ -2,7 +2,7 @@ ## 설명 -웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다. +웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다. ## 평가 기준 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md index c687eb01..13a6d9c4 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md @@ -1,7 +1,7 @@ # Membaca Docs ## Arahan -Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. +Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. ## Rubrik diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 99afa170..b0664840 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -24,15 +24,15 @@ At its most basic, a screen reader will read a page from top to bottom audibly. Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems. -Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. +Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. -✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. +✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. ### Zoom -Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. +Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. -Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). +Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Contrast checkers @@ -133,7 +133,7 @@ You can use `aria-label` to describe the link when the format of the page doesn' description ``` -✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `
` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contains more useful information. +✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `
` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contains more useful information. ```html

File Viewer

diff --git a/1-getting-started-lessons/3-accessibility/translations/README.es.md b/1-getting-started-lessons/3-accessibility/translations/README.es.md index 21d5a910..bf1c796d 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -23,7 +23,7 @@ En su forma más básica, un lector de pantalla leerá una página de arriba a a Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla. -✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). ### Checar contrastes @@ -127,7 +127,7 @@ Puedes usar `aria-label` para describir el enlace cuando el formato de la págin descripción ``` -✅ En general, el uso de HTML semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `
` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene más información útil. +✅ En general, el uso de HTML semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `
` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene más información útil. ```html
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md index 2cd48518..f5310d9b 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.id.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -25,7 +25,7 @@ Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suar Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar. -✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). ### Pemeriksa kontras @@ -129,7 +129,7 @@ Anda dapat menggunakan `aria-label` untuk mendeskripsikan link jika format halam deskripsi ``` -✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `
` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna. +✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `
` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna. ```html
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.it.md b/1-getting-started-lessons/3-accessibility/translations/README.it.md index 5781d5ff..8354d50e 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.it.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.it.md @@ -24,15 +24,15 @@ Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi. -Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader. +Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader. -✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita. +✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita. ### Zoom -Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati. +Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati. -Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/). +Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Verificatori di contrasto @@ -133,7 +133,7 @@ E' possibile utilizzare `aria-label` per descrivere il collegamento quando il fo description ``` -✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `
` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni. +✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `
` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni. ```html

File Viewer

diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ko.md b/1-getting-started-lessons/3-accessibility/translations/README.ko.md index ada79dda..6a239e10 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ko.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ko.md @@ -24,7 +24,7 @@ 모든 웹 개발자는 스크린 리더에 익숙해야합니다. 위에서 강조한 것처럼 사용자가 활용할 클라이언트입니다. 브라우저가 작동하는 방식에 익숙한 것과 마찬가지로 스크린 리더가 작동하는 방식을 배워야합니다. 다행히 스크린 리더는 대부분의 운영체제에 내장되어 있으며, 많은 브라우저에는 스크린 리더를 모방하는 확장이 포함되어 있습니다. -✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) 확인합니다. +✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) 확인합니다. ### Contrast checkers @@ -127,7 +127,7 @@ CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니 description ``` -✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `
`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다. +✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `
`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다. ```html
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ms.md b/1-getting-started-lessons/3-accessibility/translations/README.ms.md index 20afd58f..1c7e44bd 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ms.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ms.md @@ -24,7 +24,7 @@ Pada asasnya, pembaca skrin akan membaca halaman dari atas ke bawah dengan diden Setiap pembangun web harus membiasakan diri dengan pembaca skrin. Seperti yang dinyatakan di atas, ini adalah pelanggan yang akan digunakan pengguna anda Sama seperti anda mengetahui bagaimana penyemak imbas beroperasi, anda harus mengetahui cara pembaca skrin beroperasi. Nasib baik pembaca skrin dimasukkan ke dalam kebanyakan sistem operasi, dan banyak penyemak imbas mengandungi sambungan untuk meniru pembaca skrin. -✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). ### Pemeriksa Kontras @@ -127,7 +127,7 @@ Anda boleh menggunakan `aria-label` untuk menerangkan pautan apabila format hala description ``` -✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `
` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna. +✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `
` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna. ```html
diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index ddee1284..1d4b8eda 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -176,7 +176,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis - `let myTrueBool = true` - `let myFalseBool = false` -✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/docs/Glossary/Truthy). --- diff --git a/2-js-basics/1-data-types/translations/README.de.md b/2-js-basics/1-data-types/translations/README.de.md index 0193b6d3..b4eb8b8d 100644 --- a/2-js-basics/1-data-types/translations/README.de.md +++ b/2-js-basics/1-data-types/translations/README.de.md @@ -178,7 +178,7 @@ Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Wert - `let myTrueBool = true` - `let myFalseBool = false` -✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/docs/Glossary/Truthy). --- ---. diff --git a/2-js-basics/1-data-types/translations/README.es.md b/2-js-basics/1-data-types/translations/README.es.md index 01e1c92f..07308c15 100644 --- a/2-js-basics/1-data-types/translations/README.es.md +++ b/2-js-basics/1-data-types/translations/README.es.md @@ -174,7 +174,7 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole - `let myTrueBool = true` - `let myFalseBool = false` -✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/docs/Glossary/Truthy). 🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar? diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md index b78c8a22..257fd03b 100644 --- a/2-js-basics/1-data-types/translations/README.id.md +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -178,7 +178,7 @@ Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membant - `let myTrueBool = true` - `let myFalseBool = false` -✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/docs/Glossary/Truthy). --- diff --git a/2-js-basics/1-data-types/translations/README.it.md b/2-js-basics/1-data-types/translations/README.it.md index ec185a54..e5b8af86 100644 --- a/2-js-basics/1-data-types/translations/README.it.md +++ b/2-js-basics/1-data-types/translations/README.it.md @@ -175,7 +175,7 @@ I booleani possono avere solo due valori: vero (`true`) o falso (`false`). I bo - `let myTrueBool = true` - `let myFalseBool = false` -✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/docs/Glossary/Truthy). --- diff --git a/2-js-basics/1-data-types/translations/README.ko.md b/2-js-basics/1-data-types/translations/README.ko.md index 3a511455..275f42f1 100644 --- a/2-js-basics/1-data-types/translations/README.ko.md +++ b/2-js-basics/1-data-types/translations/README.ko.md @@ -176,7 +176,7 @@ let myString2 = "World"; - `let myTrueBool = true` - `let myFalseBool = false` -✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/docs/Glossary/Truthy). --- diff --git a/2-js-basics/1-data-types/translations/README.ms.md b/2-js-basics/1-data-types/translations/README.ms.md index b79ea7d6..9453a556 100644 --- a/2-js-basics/1-data-types/translations/README.ms.md +++ b/2-js-basics/1-data-types/translations/README.ms.md @@ -176,7 +176,7 @@ Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu me - `let myTrueBool = betul` - `let myFalseBool = salah` -✅ Pemboleh ubah boleh dianggap 'benar' jika dinilai menjadi `benar` boolean. Menariknya, dalam JavaScript, [semua nilai adalah benar kecuali ditakrifkan sebagai palsu](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). +✅ Pemboleh ubah boleh dianggap 'benar' jika dinilai menjadi `benar` boolean. Menariknya, dalam JavaScript, [semua nilai adalah benar kecuali ditakrifkan sebagai palsu](https://developer.mozilla.org/docs/Glossary/Truthy). --- diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 50efd195..b270f4b5 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi'); ## Return values -Up until now the function we built will always output to the [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere? +Up until now the function we built will always output to the [console](https://developer.mozilla.org/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere? We can do this by using a **return value**. A return value is returned by the function, and can be stored in a variable just the same as we could store a literal value such as a string or number. @@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher'); As you progress in your programming career, you will come across functions which accept functions as parameters. This neat trick is commonly used when we don't know when something is going to occur or complete, but we know we need to perform an operation in response. -As an example, consider [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function! +As an example, consider [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function! If you run the code below, after 3 seconds you'll see the message **3 seconds has elapsed**. @@ -188,7 +188,7 @@ Can you articulate in one sentence the difference between functions and methods? ## Review & Self Study -It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax. +It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax. ## Assignment diff --git a/2-js-basics/2-functions-methods/translations/README.de.md b/2-js-basics/2-functions-methods/translations/README.de.md index fbcdff8a..d57ec8a0 100644 --- a/2-js-basics/2-functions-methods/translations/README.de.md +++ b/2-js-basics/2-functions-methods/translations/README.de.md @@ -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 diff --git a/2-js-basics/2-functions-methods/translations/README.id.md b/2-js-basics/2-functions-methods/translations/README.id.md index ebb02be6..44d8fe0c 100644 --- a/2-js-basics/2-functions-methods/translations/README.id.md +++ b/2-js-basics/2-functions-methods/translations/README.id.md @@ -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 diff --git a/2-js-basics/2-functions-methods/translations/README.it.md b/2-js-basics/2-functions-methods/translations/README.it.md index 2718bb8d..e3065a4a 100644 --- a/2-js-basics/2-functions-methods/translations/README.it.md +++ b/2-js-basics/2-functions-methods/translations/README.it.md @@ -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 diff --git a/2-js-basics/2-functions-methods/translations/README.ko.md b/2-js-basics/2-functions-methods/translations/README.ko.md index fa1d587d..367eb2d0 100644 --- a/2-js-basics/2-functions-methods/translations/README.ko.md +++ b/2-js-basics/2-functions-methods/translations/README.ko.md @@ -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로 다시 작성하십시오. ## 과제 diff --git a/2-js-basics/2-functions-methods/translations/README.ms.md b/2-js-basics/2-functions-methods/translations/README.ms.md index 6d6d0360..e1139e79 100644 --- a/2-js-basics/2-functions-methods/translations/README.ms.md +++ b/2-js-basics/2-functions-methods/translations/README.ms.md @@ -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 diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index b1fcd0cd..04dc2af0 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -166,7 +166,7 @@ Create a program that is written first with logical operators, and then rewrite ## Review & Self Study -Read more about the many operators available to the user [on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). +Read more about the many operators available to the user [on MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). Go through Josh Comeau's wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)! diff --git a/2-js-basics/3-making-decisions/translations/README.de.md b/2-js-basics/3-making-decisions/translations/README.de.md index 9eea615f..509d34d9 100644 --- a/2-js-basics/3-making-decisions/translations/README.de.md +++ b/2-js-basics/3-making-decisions/translations/README.de.md @@ -162,7 +162,7 @@ Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird ## Review & Selbststudium -Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen. +Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen. ## Zuordnung diff --git a/2-js-basics/3-making-decisions/translations/README.es.md b/2-js-basics/3-making-decisions/translations/README.es.md index 7ef4c2bc..e3090959 100644 --- a/2-js-basics/3-making-decisions/translations/README.es.md +++ b/2-js-basics/3-making-decisions/translations/README.es.md @@ -156,7 +156,7 @@ if (firstNumber > secondNumber) { ## Revisión y autoestudio -Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). +Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). **Asignación**: [Operadores](assignment.es.md) diff --git a/2-js-basics/3-making-decisions/translations/README.id.md b/2-js-basics/3-making-decisions/translations/README.id.md index 07dba472..3f325be9 100644 --- a/2-js-basics/3-making-decisions/translations/README.id.md +++ b/2-js-basics/3-making-decisions/translations/README.id.md @@ -166,7 +166,7 @@ Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang ## Review & Belajar Mandiri -Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). +Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa! diff --git a/2-js-basics/3-making-decisions/translations/README.ko.md b/2-js-basics/3-making-decisions/translations/README.ko.md index 32774b54..44fc5242 100644 --- a/2-js-basics/3-making-decisions/translations/README.ko.md +++ b/2-js-basics/3-making-decisions/translations/README.ko.md @@ -164,7 +164,7 @@ if (firstNumber > secondNumber) { ## 리뷰 & 자기주도 학습 -[MDN에서](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오. +[MDN에서](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오. Josh Comeau'의 wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)을 통할 수 있습니다! diff --git a/2-js-basics/3-making-decisions/translations/README.ms.md b/2-js-basics/3-making-decisions/translations/README.ms.md index a4b46845..242257a7 100644 --- a/2-js-basics/3-making-decisions/translations/README.ms.md +++ b/2-js-basics/3-making-decisions/translations/README.ms.md @@ -166,7 +166,7 @@ Buat program yang ditulis terlebih dahulu dengan operator logik, dan kemudian tu ## Mengkaji & Belajar Sendiri -Baca lebih lanjut mengenai banyak pengendali yang ada pada pengguna[pada laman MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). +Baca lebih lanjut mengenai banyak pengendali yang ada pada pengguna[pada laman MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). Lalui laman Josh Comeau tentang [pengendali](https://joshwcomeau.com/operator-lookup/)! diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 9c0b5b7e..6fcd4fd7 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -110,7 +110,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 🚀 Challenge -There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques. +There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques. ## Post-Lecture Quiz [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14) @@ -118,7 +118,7 @@ There are other ways of looping over arrays other than for and while loops. Ther ## Review & Self Study -Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation. +Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation. ## Assignment diff --git a/2-js-basics/4-arrays-loops/translations/README.de.md b/2-js-basics/4-arrays-loops/translations/README.de.md index bfab7c69..16f00a3b 100644 --- a/2-js-basics/4-arrays-loops/translations/README.de.md +++ b/2-js-basics/4-arrays-loops/translations/README.de.md @@ -109,13 +109,13 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 🚀 Herausforderung -Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu. +Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu. ## [Quiz nach der Vorlesung](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14) ## Review & Selbststudium -An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation. +An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation. ## Zuordnung diff --git a/2-js-basics/4-arrays-loops/translations/README.es.md b/2-js-basics/4-arrays-loops/translations/README.es.md index 237b9778..840dc6e5 100644 --- a/2-js-basics/4-arrays-loops/translations/README.es.md +++ b/2-js-basics/4-arrays-loops/translations/README.es.md @@ -103,12 +103,12 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ✅ Experimente recorriendo una serie de su propia creación en la consola de su navegador. -🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas. +🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas. ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14) ## Revisión y autoestudio -Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación. +Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación. **Asignación**: [Bucle de una matriz](assignment.es.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.id.md b/2-js-basics/4-arrays-loops/translations/README.id.md index f2e02c32..4a52c874 100644 --- a/2-js-basics/4-arrays-loops/translations/README.id.md +++ b/2-js-basics/4-arrays-loops/translations/README.id.md @@ -126,7 +126,7 @@ for (let i = 0; i < rasaRasaEsKrim.length; i++) { ## 🚀 Tantangan -Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini. +Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini. ## Kuis Pasca-Kuliah @@ -134,7 +134,7 @@ Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan wh ## Review & Belajar Mandiri -Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda. +Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda. ## Tugas diff --git a/2-js-basics/4-arrays-loops/translations/README.ko.md b/2-js-basics/4-arrays-loops/translations/README.ko.md index e48f9b7b..be4aabc0 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ko.md +++ b/2-js-basics/4-arrays-loops/translations/README.ko.md @@ -109,7 +109,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 🚀 도전 -for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오. +for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오. ## 강의 후 퀴즈 [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=ko) @@ -117,7 +117,7 @@ for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. ## 리뷰 & 자기주도 학습 -JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오. +JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오. ## 과제 diff --git a/2-js-basics/4-arrays-loops/translations/README.ms.md b/2-js-basics/4-arrays-loops/translations/README.ms.md index 9ca89079..baeb4ee9 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ms.md +++ b/2-js-basics/4-arrays-loops/translations/README.ms.md @@ -110,14 +110,14 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 🚀 Cabaran -Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini. +Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini. ## Kuiz Pasca Kuliah [Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14) ## Mengkaji and Belajar Sendiri -Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda. +Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda. ## Tugasan diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index fabf656e..36ca71fe 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -48,13 +48,13 @@ Add these lines at the top of your `index.html` file: ``` -✅ There are a few different modes that can be determined by setting the DocType with a query string: [Quirks Mode and Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). These modes used to support really old browsers that aren't normally used nowadays (Netscape Navigator 4 and Internet Explorer 5). You can stick to the standard doctype declaration. +✅ There are a few different modes that can be determined by setting the DocType with a query string: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). These modes used to support really old browsers that aren't normally used nowadays (Netscape Navigator 4 and Internet Explorer 5). You can stick to the standard doctype declaration. --- ## The document's 'head' -The 'head' area of the HTML document includes crucial information about your web page, also known as [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). In our case, we tell the web server to which this page will be sent to be rendered, these four things: +The 'head' area of the HTML document includes crucial information about your web page, also known as [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In our case, we tell the web server to which this page will be sent to be rendered, these four things: - the page's title - page metadata including: @@ -75,7 +75,7 @@ Add a 'head' block to your document in between the opening and closing `` ``` -✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). --- @@ -213,7 +213,7 @@ Add this markup above the last `
` tag: ## 🚀Challenge -There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in your markup. Still, can you use the old `` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards) +There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in your markup. Still, can you use the old `` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards) ## Post-Lecture Quiz diff --git a/3-terrarium/1-intro-to-html/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md index c4eb78ff..52e2ed47 100644 --- a/3-terrarium/1-intro-to-html/translations/README.es.md +++ b/3-terrarium/1-intro-to-html/translations/README.es.md @@ -39,13 +39,13 @@ Agrega estas líneas en la parte superior de tu archivo `index.html`: ``` -✅ Hay algunos modos diferentes que se pueden determinar configurando DocType con una cadena de consulta: [Modo Quirks y Modo estándar](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Estos modos solían admitir navegadores realmente antiguos que no se utilizan normalmente en la actualidad (Netscape Navigator 4 e Internet Explorer 5). Puede ceñirse a la declaración de tipo de documento estándar. +✅ Hay algunos modos diferentes que se pueden determinar configurando DocType con una cadena de consulta: [Modo Quirks y Modo estándar](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Estos modos solían admitir navegadores realmente antiguos que no se utilizan normalmente en la actualidad (Netscape Navigator 4 e Internet Explorer 5). Puede ceñirse a la declaración de tipo de documento estándar. --- ## 2. El 'encabezado' del documento -El área 'encabezado' del documento HTML incluye información crucial sobre su página web, también conocida como [metadatos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). En nuestro caso, le decimos al servidor web al que se enviará esta página para que sea renderizada cuatro cosas: +El área 'encabezado' del documento HTML incluye información crucial sobre su página web, también conocida como [metadatos](https://developer.mozilla.org/docs/Web/HTML/Element/meta). En nuestro caso, le decimos al servidor web al que se enviará esta página para que sea renderizada cuatro cosas: - el título de la página - metadatos de la página que incluyen: @@ -66,7 +66,7 @@ Agregue un bloque de 'encabezado' a su documento entre las etiquetas de apertura ``` -✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). --- @@ -203,7 +203,7 @@ Agregue este marcado encima de la última etiqueta ``: --- -🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después) +🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16) diff --git a/3-terrarium/1-intro-to-html/translations/README.it.md b/3-terrarium/1-intro-to-html/translations/README.it.md index 7bcd7a07..6ba2c573 100644 --- a/3-terrarium/1-intro-to-html/translations/README.it.md +++ b/3-terrarium/1-intro-to-html/translations/README.it.md @@ -49,13 +49,13 @@ Aggiungere queste righe all'inizio del file `index.html` : ``` -✅ Ci sono alcune modalità differenti che possono essere determinate impostando DocType con una stringa di query: [Quirks Mode e Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Queste modalità supportano browser molto vecchi che non vengono normalmente utilizzati al giorno d'oggi (Netscape Navigator 4 e Internet Explorer 5). Ci si può attenere alla dichiarazione doctype standard. +✅ Ci sono alcune modalità differenti che possono essere determinate impostando DocType con una stringa di query: [Quirks Mode e Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Queste modalità supportano browser molto vecchi che non vengono normalmente utilizzati al giorno d'oggi (Netscape Navigator 4 e Internet Explorer 5). Ci si può attenere alla dichiarazione doctype standard. --- ## La "testa" del documento (tag head) -L'area "head" del documento HTML include informazioni cruciali sulla propria pagina web, note anche come [metadati](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). In questo caso, si dice al server web a cui verrà inviata questa pagina per essere renderizzata, queste quattro cose: +L'area "head" del documento HTML include informazioni cruciali sulla propria pagina web, note anche come [metadati](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In questo caso, si dice al server web a cui verrà inviata questa pagina per essere renderizzata, queste quattro cose: - il titolo della pagina - metadati della pagina tra cui: @@ -76,7 +76,7 @@ Aggiungere un blocco "head" al proprio documento tra i tag di apertura e di chiu ``` -✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). --- @@ -214,7 +214,7 @@ Aggiungere questo markup sopra l'ultimo tag ``: ## 🚀 Sfida -Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocare, anche se non si dovrebero usare tag deprecati come [questi tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel proprio markup. Tuttavia, si può usare il vecchio tag `` per far scorrere orizzontalmente il titolo h1? (se viene fatto, non dimenticarsi di rimuoverlo dopo) +Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocare, anche se non si dovrebero usare tag deprecati come [questi tag](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel proprio markup. Tuttavia, si può usare il vecchio tag `` per far scorrere orizzontalmente il titolo h1? (se viene fatto, non dimenticarsi di rimuoverlo dopo) ## Quiz Post-Lezione diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index c80ac593..fcbf0ecf 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -75,7 +75,7 @@ HTML ドキュメントの 'head' 領域には、Web ページに関する重要 ``` -✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。 +✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。 --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md index 8a8d4f18..a6231c53 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ko.md +++ b/3-terrarium/1-intro-to-html/translations/README.ko.md @@ -48,13 +48,13 @@ HTML 파일의 첫 번째 줄은 doctype입니다. 파일 최상단에 줄이 ``` -✅ 쿼리 문자열로 DocType을 설정하여 결정할 수 있는 몇 가지 모드가 있습니다: [Quirks Mode and Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). 이 모드는 요즘 잘 사용하지 않는 오래된 브라우저를 지원하는 데 사용되었습니다 (Netscape Navigator 4 및 Internet Explorer 5). 표준 doctype 선언을 할 수도 있습니다. +✅ 쿼리 문자열로 DocType을 설정하여 결정할 수 있는 몇 가지 모드가 있습니다: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). 이 모드는 요즘 잘 사용하지 않는 오래된 브라우저를 지원하는 데 사용되었습니다 (Netscape Navigator 4 및 Internet Explorer 5). 표준 doctype 선언을 할 수도 있습니다. --- ## 문서의 'head' -HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)라고 하는 웹 페이지의 중요한 정보가 포함되어 있습니다. 우리의 경우에는, 이 페이지가 렌더링될 웹 서버에 다음 4가지를 알립니다. +HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta)라고 하는 웹 페이지의 중요한 정보가 포함되어 있습니다. 우리의 경우에는, 이 페이지가 렌더링될 웹 서버에 다음 4가지를 알립니다. - 페이지의 제목 - 페이지 메타데이터 포함: @@ -75,7 +75,7 @@ HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/en-U ``` -✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)에 대해 자세히 알아보세요. +✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag)에 대해 자세히 알아보세요. --- @@ -213,7 +213,7 @@ HTML에서는, .html 파일에 태그를 추가하여 웹 페이지의 요소를 ## 🚀 도전 -HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에서는 [이러한 태그](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)처럼 더 이상 사용되지 않는 태그를 쓰면 안됩니다. 그래도, 예전 `` 태그를 사용하여 h1 제목을 가로로 스크롤할 수 있습니까? (한다면, 나중에 제거하는 것을 잊지 마십시오) +HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에서는 [이러한 태그](https://developer.mozilla.org/docs/Web/HTML/Element)처럼 더 이상 사용되지 않는 태그를 쓰면 안됩니다. 그래도, 예전 `` 태그를 사용하여 h1 제목을 가로로 스크롤할 수 있습니까? (한다면, 나중에 제거하는 것을 잊지 마십시오) ## 강의 후 퀴즈 diff --git a/3-terrarium/1-intro-to-html/translations/README.ms.md b/3-terrarium/1-intro-to-html/translations/README.ms.md index 864bfc98..1faaba20 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ms.md +++ b/3-terrarium/1-intro-to-html/translations/README.ms.md @@ -48,13 +48,13 @@ Tambahkan baris ini di bahagian atas fail `index.html` anda: ``` -✅ Terdapat beberapa mod berbeza yang dapat ditentukan dengan menetapkan Jenis Dokumen dengan rentetan pertanyaan: [Mod Quirks dan Mod Piawai](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) . Mod ini digunakan untuk menyokong penyemak imbas lama yang tidak biasa digunakan pada masa ini (Netscape Navigator 4 dan Internet Explorer 5). Anda boleh berpegang pada pernyataan standard documentype. +✅ Terdapat beberapa mod berbeza yang dapat ditentukan dengan menetapkan Jenis Dokumen dengan rentetan pertanyaan: [Mod Quirks dan Mod Piawai](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) . Mod ini digunakan untuk menyokong penyemak imbas lama yang tidak biasa digunakan pada masa ini (Netscape Navigator 4 dan Internet Explorer 5). Anda boleh berpegang pada pernyataan standard documentype. --- ## Dokumen 'head' -Kawasan 'head' dokumen HTML merangkumi maklumat penting mengenai laman web anda, juga dikenali sebagai [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). Dalam kes kami, kami memberitahu pelayan web tempat halaman ini akan dihantar untuk diberikan, empat perkara berikut: +Kawasan 'head' dokumen HTML merangkumi maklumat penting mengenai laman web anda, juga dikenali sebagai [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dalam kes kami, kami memberitahu pelayan web tempat halaman ini akan dihantar untuk diberikan, empat perkara berikut: - tajuk halaman - metadata halaman termasuk: @@ -75,7 +75,7 @@ Tambahkan blok 'head' ke dokumen anda di antara tag pembuka dan penutup `` ``` -✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). --- @@ -213,7 +213,7 @@ Tambahkan markup ini di atas tag `` terakhir: ## 🚀Cabaran -Terdapat beberapa tag 'lawas' liar dalam HTML yang masih menyeronokkan untuk dimainkan, walaupun anda tidak boleh menggunakan tag yang tidak digunakan seperti [tag ini](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) dalam markup anda. Masih bolehkah anda menggunakan tag `` lama untuk menjadikan tajuk h1 menatal secara mendatar? (jika anda melakukannya, jangan lupa membuangnya selepas itu) +Terdapat beberapa tag 'lawas' liar dalam HTML yang masih menyeronokkan untuk dimainkan, walaupun anda tidak boleh menggunakan tag yang tidak digunakan seperti [tag ini](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) dalam markup anda. Masih bolehkah anda menggunakan tag `` lama untuk menjadikan tajuk h1 menatal secara mendatar? (jika anda melakukannya, jangan lupa membuangnya selepas itu) ## Kuiz Pasca Kuliah diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 2bc08666..b117df31 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -250,7 +250,7 @@ Add a 'bubble' shine to the left bottom area of the jar to make it look more gla ![finished terrarium](./images/terrarium-final.png) -To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) +To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) ## Post-Lecture Quiz diff --git a/3-terrarium/2-intro-to-css/translations/README.es.md b/3-terrarium/2-intro-to-css/translations/README.es.md index e961ebf9..1a84fb6f 100644 --- a/3-terrarium/2-intro-to-css/translations/README.es.md +++ b/3-terrarium/2-intro-to-css/translations/README.es.md @@ -252,4 +252,4 @@ CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trat **Asignación**: [Refactorización CSS](assignment.es.md) -[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) +[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) diff --git a/3-terrarium/2-intro-to-css/translations/README.ko.md b/3-terrarium/2-intro-to-css/translations/README.ko.md index 7f2ec695..77a2ff8c 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ko.md +++ b/3-terrarium/2-intro-to-css/translations/README.ko.md @@ -248,7 +248,7 @@ jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이 ![finished terrarium](.././images/terrarium-final.png) -강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) +강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) ## 강의 후 퀴즈 diff --git a/3-terrarium/2-intro-to-css/translations/README.ms.md b/3-terrarium/2-intro-to-css/translations/README.ms.md index d83e4e6c..761ac540 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ms.md +++ b/3-terrarium/2-intro-to-css/translations/README.ms.md @@ -248,7 +248,7 @@ Tambahkan kilauan 'bubble' ke bahagian bawah kiri balang agar kelihatan lebih me ![finished terrarium](../images/terrarium-final.png) -Untuk menyelesaikan kuiz pasca kuliah, baca modul Belajar ini: [Gaya aplikasi HTML anda dengan CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) +Untuk menyelesaikan kuiz pasca kuliah, baca modul Belajar ini: [Gaya aplikasi HTML anda dengan CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics) ## Kuiz Pasca Kuliah diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md index 577d4139..9f8294b8 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -9,11 +9,11 @@ ### Introduction -Manipulating the DOM, or the "Document Object Model", is a key aspect of web development. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges around DOM manipulation on the web have often been the impetus behind using JavaScript frameworks instead of vanilla JavaScript to manage the DOM, but we will manage on our own! +Manipulating the DOM, or the "Document Object Model", is a key aspect of web development. According to [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges around DOM manipulation on the web have often been the impetus behind using JavaScript frameworks instead of vanilla JavaScript to manage the DOM, but we will manage on our own! -In addition, this lesson will introduce the idea of a [JavaScript closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), which you can think of as a function enclosed by another function so that the inner function has access to the outer function's scope. +In addition, this lesson will introduce the idea of a [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures), which you can think of as a function enclosed by another function so that the inner function has access to the outer function's scope. -> JavaScript closures are a vast and complex topic. This lesson touches on the most basic idea that in this terrarium's code, you will find a closure: an inner function and an outer function constructed in a way to allow the inner function access to the outer function's scope. For much more information on how this works, please visit the [extensive documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures). +> JavaScript closures are a vast and complex topic. This lesson touches on the most basic idea that in this terrarium's code, you will find a closure: an inner function and an outer function constructed in a way to allow the inner function access to the outer function's scope. For much more information on how this works, please visit the [extensive documentation](https://developer.mozilla.org/docs/Web/JavaScript/Closures). We will use a closure to manipulate the DOM. @@ -108,9 +108,9 @@ function dragElement(terrariumElement) { `dragElement` get its `terrariumElement` object from the declarations at the top of the script. Then, you set some local positions at `0` for the object passed into the function. These are the local variables that will be manipulated for each element as you add drag and drop functionality within the closure to each element. The terrarium will be populated by these dragged elements, so the application needs to keep track of where they are placed. -In addition, the terrariumElement that is passed to this function is assigned a `pointerdown` event, which is part of the [web APIs](https://developer.mozilla.org/en-US/docs/Web/API) designed to help with DOM management. `onpointerdown` fires when a button is pushed, or in our case, a draggable element is touched. This event handler works on both [web and mobile browsers](https://caniuse.com/?search=onpointerdown), with a few exceptions. +In addition, the terrariumElement that is passed to this function is assigned a `pointerdown` event, which is part of the [web APIs](https://developer.mozilla.org/docs/Web/API) designed to help with DOM management. `onpointerdown` fires when a button is pushed, or in our case, a draggable element is touched. This event handler works on both [web and mobile browsers](https://caniuse.com/?search=onpointerdown), with a few exceptions. -✅ The [event handler `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) has much more support cross-browser; why wouldn't you use it here? Think about the exact type of screen interaction you're trying to create here. +✅ The [event handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) has much more support cross-browser; why wouldn't you use it here? Think about the exact type of screen interaction you're trying to create here. --- @@ -205,9 +205,9 @@ Add new event handler to your closure to do something more to the plants; for ex ## Review & Self Study -While dragging elements around the screen seems trivial, there are many ways to do this and many pitfalls, depending on the effect you seek. In fact, there is an entire [drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) that you can try. We didn't use it in this module because the effect we wanted was somewhat different, but try this API on your own project and see what you can achieve. +While dragging elements around the screen seems trivial, there are many ways to do this and many pitfalls, depending on the effect you seek. In fact, there is an entire [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) that you can try. We didn't use it in this module because the effect we wanted was somewhat different, but try this API on your own project and see what you can achieve. -Find more information on pointer events on the [W3C docs](https://www.w3.org/TR/pointerevents1/) and on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events). +Find more information on pointer events on the [W3C docs](https://www.w3.org/TR/pointerevents1/) and on [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events). Always check browser capabilities using [CanIUse.com](https://caniuse.com/). diff --git a/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/3-terrarium/3-intro-to-DOM-and-closures/assignment.md index 6b1c9f61..4bf324c3 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/assignment.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/assignment.md @@ -2,7 +2,7 @@ ## Instructions -Research the DOM a little more by 'adopting' a DOM element. Visit the MSN's [list of DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used. +Research the DOM a little more by 'adopting' a DOM element. Visit the MSN's [list of DOM interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used. ## Rubric diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md index 29a36fe5..b1e97eeb 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md @@ -7,9 +7,9 @@ ### Introducción: -Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta! +Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta! -Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa. +Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa. Usaremos un cierre para manipular el DOM. @@ -108,9 +108,9 @@ function dragElement(terrariumElement) { `dragElement` obtiene su objeto` terrariumElement` de las declaraciones en la parte superior del script. Luego, establece algunas posiciones locales en "0" para el objeto pasado a la función. Estas son las variables locales que se manipularán para cada elemento a medida que agrega la funcionalidad de arrastrar y soltar dentro del cierre de cada elemento. El terrario estará poblado por estos elementos arrastrados, por lo que la aplicación debe realizar un seguimiento de dónde se colocan. -Además, al terrariumElement que se pasa a esta función se le asigna un evento `pointerdown`, que forma parte de las [API web](https://developer.mozilla.org/en-US/docs/Web/API) diseñadas para ayudar con la gestión del DOM. `Onpointerdown` se dispara cuando se presiona un botón, o en nuestro caso, se toca un elemento que se puede arrastrar. Este controlador de eventos funciona tanto en [navegadores web como móviles](https://caniuse.com/?search=onpointerdown), con algunas excepciones. +Además, al terrariumElement que se pasa a esta función se le asigna un evento `pointerdown`, que forma parte de las [API web](https://developer.mozilla.org/docs/Web/API) diseñadas para ayudar con la gestión del DOM. `Onpointerdown` se dispara cuando se presiona un botón, o en nuestro caso, se toca un elemento que se puede arrastrar. Este controlador de eventos funciona tanto en [navegadores web como móviles](https://caniuse.com/?search=onpointerdown), con algunas excepciones. -✅ El [controlador de eventos `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) tiene mucho más soporte entre navegadores; ¿Por qué no lo usarías aquí? Piense en el tipo exacto de interacción de pantalla que está intentando crear aquí. +✅ El [controlador de eventos `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) tiene mucho más soporte entre navegadores; ¿Por qué no lo usarías aquí? Piense en el tipo exacto de interacción de pantalla que está intentando crear aquí. --- @@ -201,7 +201,7 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa ## Revisión y autoestudio -Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr. +Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr. ** Tarea: [Trabajar un poco más con el DOM](assignment.es.md) diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md index 25d90cc2..019cba3b 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md @@ -9,11 +9,11 @@ ### Introduzione -La manipolazione del DOM, acronimo per "Document Object Model", è un aspetto chiave dello sviluppo web. Secondo [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "Il Document Object Model (DOM) è la rappresentazione dei dati degli oggetti che compongono la struttura e il contenuto di un documento sul web". Le sfide intorno alla manipolazione del DOM sul Web sono state spesso l'impulso dietro l'utilizzo di infrastrutture (framework) JavaScript invece di JavaScript puro (vanilla) per gestire il DOM, ma ce la faremo da soli! +La manipolazione del DOM, acronimo per "Document Object Model", è un aspetto chiave dello sviluppo web. Secondo [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Il Document Object Model (DOM) è la rappresentazione dei dati degli oggetti che compongono la struttura e il contenuto di un documento sul web". Le sfide intorno alla manipolazione del DOM sul Web sono state spesso l'impulso dietro l'utilizzo di infrastrutture (framework) JavaScript invece di JavaScript puro (vanilla) per gestire il DOM, ma ce la faremo da soli! -Inoltre, questa lezione introdurrà l'idea di una [closure JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), che si può intendere come una funzione racchiusa da un'altra funzione in modo che la funzione più interna abbia accesso all'ambito della funzione più esterna. +Inoltre, questa lezione introdurrà l'idea di una [closure JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), che si può intendere come una funzione racchiusa da un'altra funzione in modo che la funzione più interna abbia accesso all'ambito della funzione più esterna. -> Le closure JavaScript sono un argomento vasto e complesso. Questa lezione tocca l'idea più basilare che nel codice di questo terrario si troverà una closure: una funzione interna e una funzione esterna costruite in modo da consentire alla funzione interna di accedere all'ambito della funzione esterna. Per molte più informazioni su come funziona, visitare l'[ampia documentazione](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures). +> Le closure JavaScript sono un argomento vasto e complesso. Questa lezione tocca l'idea più basilare che nel codice di questo terrario si troverà una closure: una funzione interna e una funzione esterna costruite in modo da consentire alla funzione interna di accedere all'ambito della funzione esterna. Per molte più informazioni su come funziona, visitare l'[ampia documentazione](https://developer.mozilla.org/docs/Web/JavaScript/Closures). Verra usata una closure per manipolare il DOM. @@ -110,7 +110,7 @@ function dragElement(terrariumElement) { Inoltre, al terrariumElement passato a questa funzione viene assegnato un evento di riconoscimento pressione pulsante (`pointerdown`), che fa parte delle [API web](https://developer.mozilla.org/it/docs/Web/API) progettate per aiutare con la gestione del DOM. `onpointerdown` si attiva quando viene premuto un pulsante o, in questo caso, viene toccato un elemento trascinabile. Questo gestore di evento funziona sia su browser [web che su browser di dispositivi mobili](https://caniuse.com/?search=onpointerdown), con poche eccezioni. -✅ Il [gestore di evento `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) ha molto più supporto intra-browser; perché non viene usato qui? Si pensi al tipo esatto di interazione con lo schermo che si sta cercando di creare qui. +✅ Il [gestore di evento `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ha molto più supporto intra-browser; perché non viene usato qui? Si pensi al tipo esatto di interazione con lo schermo che si sta cercando di creare qui. --- @@ -205,9 +205,9 @@ Aggiungere un nuovo gestore di eventi alla closure per fare qualcosa di più con ## Revisione e Auto Apprendimento -Mentre trascinare elementi sullo schermo sembra banale, ci sono molti modi per farlo e molte insidie, a seconda dell'effetto che si cerca. In effetti, esiste un'intera [API di trascinamento della selezione](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) che si può provare. Non è stata usata in questo modulo perché l'effetto che si voleva era leggermente diverso, tuttavia provare questa API sul proprio progetto per vedere cosa si può ottenere. +Mentre trascinare elementi sullo schermo sembra banale, ci sono molti modi per farlo e molte insidie, a seconda dell'effetto che si cerca. In effetti, esiste un'intera [API di trascinamento della selezione](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) che si può provare. Non è stata usata in questo modulo perché l'effetto che si voleva era leggermente diverso, tuttavia provare questa API sul proprio progetto per vedere cosa si può ottenere. -Trovare ulteriori informazioni sugli eventi di puntamento nei [documenti W3C](https://www.w3.org/TR/pointerevents1/) e nei [documenti Web MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events). +Trovare ulteriori informazioni sugli eventi di puntamento nei [documenti W3C](https://www.w3.org/TR/pointerevents1/) e nei [documenti Web MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events). Controllare sempre le funzionalità del browser utilizzando [CanIUse.com](https://caniuse.com/). diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md index 6c55316b..fc3acd8d 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md @@ -9,9 +9,9 @@ ### 소개 -DOM 또는 "Document Object Model"을 조작하는 것은 웹 개발의 핵심입니다. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)에 따르면, "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." 이라고 합니다. 웹의 DOM 조작과 관련하여 간혹 DOM을 관리하기 위해 순수 JavaScript 대신 JavaScript 프레임워크를 도전하게 되는 원동력이지만, 우리는 스스로 관리할 것입니다! +DOM 또는 "Document Object Model"을 조작하는 것은 웹 개발의 핵심입니다. [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)에 따르면, "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." 이라고 합니다. 웹의 DOM 조작과 관련하여 간혹 DOM을 관리하기 위해 순수 JavaScript 대신 JavaScript 프레임워크를 도전하게 되는 원동력이지만, 우리는 스스로 관리할 것입니다! -추가로, 이 강의에서는 [JavaScript closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)에 대한 아이디어를 소개합니다. 내부 함수가 외부 함수의 범위에 접근할 수 있도록 합니다. +추가로, 이 강의에서는 [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures)에 대한 아이디어를 소개합니다. 내부 함수가 외부 함수의 범위에 접근할 수 있도록 합니다. DOM을 조작하기 위해 클로저를 사용할 예정입니다. @@ -106,9 +106,9 @@ function dragElement(terrariumElement) { `dragElement`는 스크립트 상단의 선언에서 `terrariumElement` 객체를 가져옵니다. 그러고, 함수에 전달된 객체의 일부 로컬 위치를 `0`으로 설정합니다. 클로저 안에서 드래그 앤 드롭 기능을 각 요소에 추가할 때 각 요소에 대해 조작될 지역 변수입니다. terrarium에 드래그된 요소로 채워지므로, 애플리케이션은 배치된 위치를 추적해야 합니다. -추가로, 이 함수에 전달되는 terrariumElement에는 DOM 관리에 도움이 되도록 설계된 [web APIs](https://developer.mozilla.org/en-US/docs/Web/API)의 일부인 `pointerdown` 이벤트가 할당됩니다. `onpointerdown`은 버튼이 눌리거나 드래그 하는 요소가 터치될 때 발생합니다. 이 이벤트 핸들러는 몇 가지 예외를 제외하고, [웹과 모바일 브라우저](https://caniuse.com/?search=onpointerdown) 다 작동합니다. +추가로, 이 함수에 전달되는 terrariumElement에는 DOM 관리에 도움이 되도록 설계된 [web APIs](https://developer.mozilla.org/docs/Web/API)의 일부인 `pointerdown` 이벤트가 할당됩니다. `onpointerdown`은 버튼이 눌리거나 드래그 하는 요소가 터치될 때 발생합니다. 이 이벤트 핸들러는 몇 가지 예외를 제외하고, [웹과 모바일 브라우저](https://caniuse.com/?search=onpointerdown) 다 작동합니다. -✅ [event handler `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick)은 크로스 브라우저 지원이 훨씬 더 많습니다. 왜 여기서 사용하지 않나요? 여기에서 만들고자 하는 정확한 화면 상호작용 타입에 대해 생각해보세요. +✅ [event handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick)은 크로스 브라우저 지원이 훨씬 더 많습니다. 왜 여기서 사용하지 않나요? 여기에서 만들고자 하는 정확한 화면 상호작용 타입에 대해 생각해보세요. --- @@ -203,9 +203,9 @@ function stopElementDrag() { ## 리뷰 & 자기주도 학습 -화면에서 요소를 드래그하는 것은 사소한 것처럼 보이지만, 원하는 효과에 따라 여러 가지 방식과 함정이 있습니다. 실제로, 시도할 수 있는 전체 [drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)가 있습니다. 우리가 원하는 효과가 다소 다르기 때문에 이 모듈에서는 사용하지 않았지만, 그러나 이 API를 자신의 프로젝트에서 시도해보고 얻을 수 있는 게 무엇인지 확인하시기 바랍니다. +화면에서 요소를 드래그하는 것은 사소한 것처럼 보이지만, 원하는 효과에 따라 여러 가지 방식과 함정이 있습니다. 실제로, 시도할 수 있는 전체 [drag and drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)가 있습니다. 우리가 원하는 효과가 다소 다르기 때문에 이 모듈에서는 사용하지 않았지만, 그러나 이 API를 자신의 프로젝트에서 시도해보고 얻을 수 있는 게 무엇인지 확인하시기 바랍니다. -포인터 이벤트에 대한 자세한 내용은 [W3C docs](https://www.w3.org/TR/pointerevents1/)와 [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)에서 확인하세요. +포인터 이벤트에 대한 자세한 내용은 [W3C docs](https://www.w3.org/TR/pointerevents1/)와 [MDN web docs](https://developer.mozilla.org/docs/Web/API/Pointer_events)에서 확인하세요. 항상 [CanIUse.com](https://caniuse.com/)으로 브라우저 기능을 확인하십시오. diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md index d41f99e5..2eb20e98 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md @@ -9,11 +9,11 @@ ### Pengenalan -Memanipulasi DOM, atau "Document Object Model", adalah aspek penting dalam pengembangan web. Menurut [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) adalah representasi data dari objek yang terdiri dari struktur dan kandungan dokumen di web. " Cabaran di sekitar manipulasi DOM di web sering menjadi dorongan di belakang menggunakan kerangka kerja JavaScript dan bukannya JavaScript vanila untuk menguruskan DOM, tetapi kami akan menguruskannya sendiri! +Memanipulasi DOM, atau "Document Object Model", adalah aspek penting dalam pengembangan web. Menurut [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "Document Object Model (DOM) adalah representasi data dari objek yang terdiri dari struktur dan kandungan dokumen di web. " Cabaran di sekitar manipulasi DOM di web sering menjadi dorongan di belakang menggunakan kerangka kerja JavaScript dan bukannya JavaScript vanila untuk menguruskan DOM, tetapi kami akan menguruskannya sendiri! -Selain itu, pelajaran ini akan memperkenalkan idea [Penutupan JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), yang dapat anda fikirkan sebagai fungsi yang dilampirkan oleh yang lain berfungsi sehingga fungsi dalaman mempunyai akses ke ruang fungsi scope luar. +Selain itu, pelajaran ini akan memperkenalkan idea [Penutupan JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), yang dapat anda fikirkan sebagai fungsi yang dilampirkan oleh yang lain berfungsi sehingga fungsi dalaman mempunyai akses ke ruang fungsi scope luar. -> Penutupan JavaScript adalah topik yang luas dan kompleks. Pelajaran ini menyentuh idea paling asas bahawa dalam kod terarium ini, anda akan menemui penutup: fungsi dalaman dan fungsi luar yang dibina dengan cara yang membolehkan fungsi dalaman mengakses ke ruang lingkup fungsi luar. Untuk lebih banyak maklumat mengenai cara ini berfungsi, sila lawati [dokumentasi yang luas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures). +> Penutupan JavaScript adalah topik yang luas dan kompleks. Pelajaran ini menyentuh idea paling asas bahawa dalam kod terarium ini, anda akan menemui penutup: fungsi dalaman dan fungsi luar yang dibina dengan cara yang membolehkan fungsi dalaman mengakses ke ruang lingkup fungsi luar. Untuk lebih banyak maklumat mengenai cara ini berfungsi, sila lawati [dokumentasi yang luas](https://developer.mozilla.org/docs/Web/JavaScript/Closures). Kami akan menggunakan penutup untuk memanipulasi DOM. @@ -108,9 +108,9 @@ function dragElement(terrariumElement) { `dragElement` dapatkan objek` terrariumElement` dari pernyataan di bahagian atas skrip. Kemudian, anda menetapkan beberapa kedudukan tempatan pada `0` untuk objek yang dilewatkan ke dalam fungsi. Ini adalah pemboleh ubah tempatan yang akan dimanipulasi untuk setiap elemen semasa anda menambahkan fungsi seret dan lepas dalam penutupan ke setiap elemen. Terarium akan dihuni oleh unsur-unsur yang diseret ini, jadi aplikasinya perlu memantau lokasi mereka ditempatkan. -Selain itu, elemen terarium yang diteruskan ke fungsi ini diberikan acara `pointerdown`, yang merupakan sebahagian dari [web API](https://developer.mozilla.org/en-US/docs/Web/API) yang dirancang untuk membantu pengurusan DOM. `onpointerdown` menyala apabila butang ditekan, atau dalam kes kita, elemen yang boleh diseret disentuh. Pengendali acara ini berfungsi pada [penyemak imbas web dan mudah alih](https://caniuse.com/?search=onpointerdown), dengan beberapa pengecualian. +Selain itu, elemen terarium yang diteruskan ke fungsi ini diberikan acara `pointerdown`, yang merupakan sebahagian dari [web API](https://developer.mozilla.org/docs/Web/API) yang dirancang untuk membantu pengurusan DOM. `onpointerdown` menyala apabila butang ditekan, atau dalam kes kita, elemen yang boleh diseret disentuh. Pengendali acara ini berfungsi pada [penyemak imbas web dan mudah alih](https://caniuse.com/?search=onpointerdown), dengan beberapa pengecualian. -✅ [Pengendali acara (event handler) `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) mempunyai sokongan penyemak imbas yang lebih banyak; mengapa anda tidak menggunakannya di sini? Fikirkan jenis interaksi skrin yang tepat yang ingin anda buat di sini. +✅ [Pengendali acara (event handler) `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) mempunyai sokongan penyemak imbas yang lebih banyak; mengapa anda tidak menggunakannya di sini? Fikirkan jenis interaksi skrin yang tepat yang ingin anda buat di sini. --- @@ -205,9 +205,9 @@ Tambahkan pengendali acara (event handler) baharu ke penutupan anda untuk melaku ## Mengkaji & Belajar Sendiri -Walaupun menyeret elemen di sekitar skrin kelihatan remeh, ada banyak cara untuk melakukan ini dan banyak perangkap, bergantung pada kesan yang anda cari. Sebenarnya, terdapat keseluruhan [drag and drop API] (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) yang boleh anda cuba. Kami tidak menggunakannya dalam modul ini kerana kesan yang kami mahukan agak berbeza, tetapi cuba API ini pada projek anda sendiri dan lihat apa yang boleh anda capai. +Walaupun menyeret elemen di sekitar skrin kelihatan remeh, ada banyak cara untuk melakukan ini dan banyak perangkap, bergantung pada kesan yang anda cari. Sebenarnya, terdapat keseluruhan [drag and drop API] (https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) yang boleh anda cuba. Kami tidak menggunakannya dalam modul ini kerana kesan yang kami mahukan agak berbeza, tetapi cuba API ini pada projek anda sendiri dan lihat apa yang boleh anda capai. -Dapatkan lebih banyak maklumat mengenai peristiwa penunjuk pada [dokumen W3C](https://www.w3.org/TR/pointerevents1/) dan di [dokumen web MDN](https://developer.mozilla.org/en-US/ dokumen / Web / API / Pointer_events). +Dapatkan lebih banyak maklumat mengenai peristiwa penunjuk pada [dokumen W3C](https://www.w3.org/TR/pointerevents1/) dan di [dokumen web MDN](https://developer.mozilla.org/ dokumen / Web / API / Pointer_events). Sentiasa periksa keupayaan penyemak imbas menggunakan [CanIUse.com](https://caniuse.com/). diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md index 8ba7506b..22c214bd 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md @@ -2,7 +2,7 @@ ## Instrucciones -Investigue el DOM un poco más 'adoptando' un elemento DOM. Visite la [lista de interfaces DOM de MSDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) y elija una. Encuéntrelo en un sitio web en la web y escriba una explicación de cómo se usa. +Investigue el DOM un poco más 'adoptando' un elemento DOM. Visite la [lista de interfaces DOM de MSDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) y elija una. Encuéntrelo en un sitio web en la web y escriba una explicación de cómo se usa. ## Rúbrica diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.hi.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.hi.md index 66234dc5..d9d5efb2 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.hi.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.hi.md @@ -2,7 +2,7 @@ ## अनुदेश -DOM तत्व को 'अपनाकर' DOM को थोड़ा और रिसर्च करें. MSDN की [डॉम इंटरफेसेस सुचि](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) पे जाये और एक चयन करे . इसे वेब में एक वेब साइट पर उपयोग किया जा रहा है, और यह कैसे उपयोग किया जाता है एक व्याख्या लिखें। +DOM तत्व को 'अपनाकर' DOM को थोड़ा और रिसर्च करें. MSDN की [डॉम इंटरफेसेस सुचि](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) पे जाये और एक चयन करे . इसे वेब में एक वेब साइट पर उपयोग किया जा रहा है, और यह कैसे उपयोग किया जाता है एक व्याख्या लिखें। ## शीर्ष diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ko.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ko.md index 181b3310..fe1208b5 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ko.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ko.md @@ -2,7 +2,7 @@ ## 설명 -DOM 요소를 '채택'하여 DOM을 조금 더 조사합니다. MSDN의 [DOM 인터페이스 목록](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)을 방문하여 하나를 선택합니다. 웹의 웹 사이트에서 사용중인 것을 찾아 사용 방법에 대한 설명을 작성해봅니다. +DOM 요소를 '채택'하여 DOM을 조금 더 조사합니다. MSDN의 [DOM 인터페이스 목록](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)을 방문하여 하나를 선택합니다. 웹의 웹 사이트에서 사용중인 것을 찾아 사용 방법에 대한 설명을 작성해봅니다. ## 평가 기준 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ms.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ms.md index 2a7726ca..21c0edff 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ms.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ms.md @@ -2,7 +2,7 @@ ## Arahan -Mengkaji DOM sedikit dengan 'menerapkan' elemen DOM. Lawati laman MSDN [senarai antara muka DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) dan pilih satu. Cari ia digunakan di laman web di web, dan tulis penjelasan bagaimana ia digunakan. +Mengkaji DOM sedikit dengan 'menerapkan' elemen DOM. Lawati laman MSDN [senarai antara muka DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) dan pilih satu. Cari ia digunakan di laman web di web, dan tulis penjelasan bagaimana ia digunakan. ## Rubrik diff --git a/3-terrarium/translations/README.es.md b/3-terrarium/translations/README.es.md index 5d922ac4..779d6d61 100644 --- a/3-terrarium/translations/README.es.md +++ b/3-terrarium/translations/README.es.md @@ -20,7 +20,7 @@ La obra de arte fue dibujada a mano por [Jen Looper](http://jenlooper.com) usand La solución para elementos arrastrables se inspiró en la solución de w3schools para crear un [Elemento HTML arrastrable](https://www.w3schools.com/howto/howto_js_draggable.asp). -Encuentre más información sobre eventos de punteros en los [documentos del W3C](https://www.w3.org/TR/pointerevents1/) y en los [documentos web de MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events). +Encuentre más información sobre eventos de punteros en los [documentos del W3C](https://www.w3.org/TR/pointerevents1/) y en los [documentos web de MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events). Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/). diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index 71baadd4..156dab6c 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -20,10 +20,10 @@ To handle events (button clicking, typing, etc.), we register **event listeners* There are [dozens of events](https://developer.mozilla.org/docs/Web/Events) available for you to listen to when creating an application. Basically anything a user does on a page raises an event, which gives you a lot of power to ensure they get the experience you desire. Fortunately, you'll normally only need a small handful of events. Here's a few common ones (including the two we'll use when creating our game): -- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): The user clicked on something, typically a button or hyperlink -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button -- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): The user highlighted some text -- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): The user input some text +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): The user clicked on something, typically a button or hyperlink +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): The user highlighted some text +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): The user input some text ## Creating the game @@ -332,7 +332,7 @@ Add more functionality ## Review & Self Study -Read up on [all the events available](https://developer.mozilla.org/en-US/docs/Web/Events) to the developer via the web browser, and consider the scenarios in which you would use each one. +Read up on [all the events available](https://developer.mozilla.org/docs/Web/Events) to the developer via the web browser, and consider the scenarios in which you would use each one. ## Assignment diff --git a/4-typing-game/typing-game/translations/README.it.md b/4-typing-game/typing-game/translations/README.it.md index 7c67117c..2884061b 100644 --- a/4-typing-game/typing-game/translations/README.it.md +++ b/4-typing-game/typing-game/translations/README.it.md @@ -20,10 +20,10 @@ Per gestire gli eventi (clic sul pulsante, digitazione, ecc.), si registrano gli Ci sono [dozzine di eventi](https://developer.mozilla.org/docs/Web/Events) disponibili da ascoltare quando si crea un'applicazione. Fondamentalmente qualsiasi cosa un utente fa su una pagina genera un evento, il che dà molto potere allo sviluppatore per assicurarsi che egli ottenga l'esperienza che desidera. Fortunatamente, in genere si avrà solo bisogno di una piccola manciata di eventi. Eccone alcuni comuni (inclusi i due che verranno usati durante la creazione del gioco): -- [clic](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): l'utente ha fatto clic su qualcosa, in genere un pulsante o un collegamento ipertestuale -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): l'utente ha fatto clic con il pulsante destro del mouse -- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): l'utente ha evidenziato del testo -- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): l'utente ha inserito del testo +- [clic](https://developer.mozilla.org/docs/Web/API/Element/click_event): l'utente ha fatto clic su qualcosa, in genere un pulsante o un collegamento ipertestuale +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): l'utente ha fatto clic con il pulsante destro del mouse +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): l'utente ha evidenziato del testo +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): l'utente ha inserito del testo ## Creare il gioco @@ -332,7 +332,7 @@ Aggiungere più funzionalità ## Revisione e Auto Apprendimento -Informarsi su [tutti gli eventi disponibili](https://developer.mozilla.org/en-US/docs/Web/Events) per lo sviluppatore tramite il browser web e considerare gli scenari nei quali si userebbe ciascuno di essi. +Informarsi su [tutti gli eventi disponibili](https://developer.mozilla.org/docs/Web/Events) per lo sviluppatore tramite il browser web e considerare gli scenari nei quali si userebbe ciascuno di essi. ## Compito diff --git a/4-typing-game/typing-game/translations/README.ja.md b/4-typing-game/typing-game/translations/README.ja.md index 24b352e8..11143e76 100644 --- a/4-typing-game/typing-game/translations/README.ja.md +++ b/4-typing-game/typing-game/translations/README.ja.md @@ -21,7 +21,7 @@ アプリケーションを作成するときに聞くことができる[多数のイベント](https://developer.mozilla.org/ja/docs/Web/Events)があります。基本的に、ユーザーがページ上で何かをするとイベントが発生しますが、これはプレイヤーがあなたの意図した経験を得られるようにするうえで大きな力となります。幸いなことに、通常はほんの一握りのイベントしか必要ありません。ここでは、(ゲームを作成する際に使用する 2 つのイベントを含む) いくつかの一般的なイベントを紹介します: - [click](https://developer.mozilla.org/ja/docs/Web/API/Element/click_event): ユーザーが何かをクリックした場合、通常はボタンやハイパーリンクをクリックします -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): ユーザーがマウスの右ボタンをクリックした場合 +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): ユーザーがマウスの右ボタンをクリックした場合 - [select](https://developer.mozilla.org/ja/docs/Web/API/Element/select_event): ユーザーがテキストをハイライトした場合 - [input](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event): ユーザーが何かテキストを入力した場合 diff --git a/4-typing-game/typing-game/translations/README.ko.md b/4-typing-game/typing-game/translations/README.ko.md index af6a3e5b..def36057 100644 --- a/4-typing-game/typing-game/translations/README.ko.md +++ b/4-typing-game/typing-game/translations/README.ko.md @@ -20,10 +20,10 @@ 응용 프로그램을 만들 때 수신할 수 있는 [dozens of events](https://developer.mozilla.org/docs/Web/Events)가 있습니다. 기본적으로 사용자가 페이지에서 수행하는 모든 작업은 이벤트를 발생시키므로, 원하는 경험으로 많은 도움을 줍니다. 다행스럽게, 일반적인 이벤트만 필요합니다. 다음은 일반적 몇가지입니다 (게임을 만들 때 사용할 두 가지를 포함합니다): -- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): 사용자가 버튼 또는 하이퍼링크와 같은 무언가를 클릭했습니다 -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): 사용자가 우측 마우스 버튼을 클릭했습니다 -- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): 사용자가 어떤 텍스트를 강조했습니다 -- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): 사용자가 어떤 텍스트를 입력했습니다 +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): 사용자가 버튼 또는 하이퍼링크와 같은 무언가를 클릭했습니다 +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): 사용자가 우측 마우스 버튼을 클릭했습니다 +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): 사용자가 어떤 텍스트를 강조했습니다 +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): 사용자가 어떤 텍스트를 입력했습니다 ## 게임 만들기 @@ -331,7 +331,7 @@ typedValueElement.addEventListener('input', () => { ## 리뷰 & 자기주도 학습 -웹 브라우저를 통해 [all the events available]((https://developer.mozilla.org/en-US/docs/Web/Events)) to the developer를 읽고, 각 이벤트를 사용할 시나리오를 고려합니다. +웹 브라우저를 통해 [all the events available]((https://developer.mozilla.org/docs/Web/Events)) to the developer를 읽고, 각 이벤트를 사용할 시나리오를 고려합니다. ## 과제 diff --git a/4-typing-game/typing-game/translations/README.ms.md b/4-typing-game/typing-game/translations/README.ms.md index 9fa3a691..86a47133 100644 --- a/4-typing-game/typing-game/translations/README.ms.md +++ b/4-typing-game/typing-game/translations/README.ms.md @@ -20,10 +20,10 @@ Untuk menangani acara (klik butang, menaip, dll.), Kami mendaftarkan **pendengar Terdapat [puluhan acara](https://developer.mozilla.org/docs/Web/Events) yang tersedia untuk anda dengarkan semasa membuat aplikasi. Pada asasnya apa sahaja yang dilakukan pengguna pada halaman menimbulkan peristiwa, yang memberi anda banyak kekuatan untuk memastikan mereka mendapat pengalaman yang anda inginkan. Nasib baik, anda biasanya hanya memerlukan sebilangan kecil acara. Berikut adalah beberapa perkara biasa (termasuk dua yang akan kami gunakan semasa membuat permainan kami): -- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): Pengguna mengklik sesuatu, biasanya butang atau hyperlink -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): Pengguna mengklik butang tetikus kanan -- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): Pengguna menyoroti beberapa teks -- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): Pengguna memasukkan beberapa teks +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Pengguna mengklik sesuatu, biasanya butang atau hyperlink +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Pengguna mengklik butang tetikus kanan +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Pengguna menyoroti beberapa teks +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Pengguna memasukkan beberapa teks ## Membuat permainan @@ -332,7 +332,7 @@ Tambahkan lebih banyak fungsi ## Mengkaji & Belajar Sendiri -Bacalah [semua acara yang ada](https://developer.mozilla.org/en-US/docs/Web/Events) kepada pembangun melalui penyemak imbas web, dan pertimbangkan senario di mana anda akan menggunakannya. +Bacalah [semua acara yang ada](https://developer.mozilla.org/docs/Web/Events) kepada pembangun melalui penyemak imbas web, dan pertimbangkan senario di mana anda akan menggunakannya. ## Tugasan diff --git a/5-browser-extension/1-about-browsers/README.md b/5-browser-extension/1-about-browsers/README.md index 57cbc05d..a1dea480 100644 --- a/5-browser-extension/1-about-browsers/README.md +++ b/5-browser-extension/1-about-browsers/README.md @@ -69,7 +69,7 @@ CO2 Signal's API. - the [starter code](../start). Download the `start` folder; you will be completing code in this folder. - [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset -✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) +✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) Take a minute to look through the codebase: @@ -156,7 +156,7 @@ Take a look at a browser extension store and install one to your browser. You ca In this lesson you learned a little about the history of the web browser; take this opportunity to learn about how the inventors of the World Wide Web envisioned its use by reading more about its history. Some useful sites include: -[The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/) [History of the Web](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/1-about-browsers/translations/README.es.md b/5-browser-extension/1-about-browsers/translations/README.es.md index 5296910c..b08203cb 100644 --- a/5-browser-extension/1-about-browsers/translations/README.es.md +++ b/5-browser-extension/1-about-browsers/translations/README.es.md @@ -68,7 +68,7 @@ API de CO2 Signal. - el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta. - [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web -✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) +✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) Tómate un minuto para revisar el código base: @@ -151,7 +151,7 @@ Felicitaciones, ha dado los primeros pasos para crear una extensión de navegado En esta lección aprendió un poco sobre la historia del navegador web; Aproveche esta oportunidad para aprender cómo los inventores de la World Wide Web imaginaron su uso leyendo más sobre su historia. Algunos sitios útiles incluyen: -[La historia de los navegadores web](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[La historia de los navegadores web](https://www.mozilla.org/firefox/browsers/browser-history/) [Historia de la Web](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md index a5fea876..df2933f9 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ja.md +++ b/5-browser-extension/1-about-browsers/translations/README.ja.md @@ -155,7 +155,7 @@ npm install このレッスンでは、Web ブラウザの歴史について少し学びました。この機会に、Web ブラウザの歴史を読むことで、World Wide Web の発明者がどのように Web ブラウザの使用を想定しているかを学びましょう。役に立つサイトをいくつか紹介します。 -[Web ブラウザの歴史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[Web ブラウザの歴史](https://www.mozilla.org/firefox/browsers/browser-history/) [Web の歴史](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/1-about-browsers/translations/README.ko.md b/5-browser-extension/1-about-browsers/translations/README.ko.md index ebc49db1..688eb783 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ko.md +++ b/5-browser-extension/1-about-browsers/translations/README.ko.md @@ -68,7 +68,7 @@ - [starter code](../start). `start` 폴더를 다운로드하세요; 이 폴더에서 코드를 완성하게됩니다. - [NPM](https://www.npmjs.com) - NPM은 패키지 관리 도구입니다. 로컬에 설치하고 `package.json` 파일에 나열된 패키지를 웹 어셋에서 사용하도록 설치합니다. -✅ 이 [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)에서 패키지 관리에 대해 자세히 알아보세요 +✅ 이 [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)에서 패키지 관리에 대해 자세히 알아보세요 잠시 시간을 내어 코드베이스를 보세요: @@ -155,7 +155,7 @@ npm install 이 강의에서는 웹 브라우저의 역사에 대해 조금 배웠습니다; 이 기회에 역사를 더 많이 읽어보면서 World Wide Web의 탐험가들이 어떻게 사용했는지에 대해 알아보십시오. 유용한 사이트는 다음과 같습니다: -[The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/) [History of the Web](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/1-about-browsers/translations/README.ms.md b/5-browser-extension/1-about-browsers/translations/README.ms.md index c58a4597..c208f0a3 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ms.md +++ b/5-browser-extension/1-about-browsers/translations/README.ms.md @@ -69,7 +69,7 @@ CO2 Signal's API. - [kod pemula](../start). Muat turun folder `start`; anda akan melengkapkan kod dalam folder ini. - [NPM](https://www.npmjs.com) - NPM adalah alat pengurusan pakej; memasangnya secara tempatan dan pakej yang disenaraikan dalam fail `package.json` anda akan dipasang untuk digunakan oleh aset web anda -✅ Ketahui lebih lanjut mengenai pengurusan pakej dalam [modul pembelajaran yang sangat baik](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/) +✅ Ketahui lebih lanjut mengenai pengurusan pakej dalam [modul pembelajaran yang sangat baik](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/) Luangkan masa sebentar untuk melihat pangkalan kode: @@ -156,7 +156,7 @@ Lihatlah kedai pelanjutan penyemak imbas dan pasang satu di penyemak imbas anda. Dalam pelajaran ini anda belajar sedikit mengenai sejarah penyemak imbas web; ambil kesempatan ini untuk mengetahui bagaimana pencipta World Wide Web membayangkan penggunaannya dengan membaca lebih banyak mengenai sejarahnya. Beberapa laman web yang berguna termasuk: -[Sejarah Penyemak Imbas Web](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[Sejarah Penyemak Imbas Web](https://www.mozilla.org/firefox/browsers/browser-history/) [Sejarah Tentang Web](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/2-forms-browsers-local-storage/README.md b/5-browser-extension/2-forms-browsers-local-storage/README.md index 90f041a4..9d15a3ea 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -94,7 +94,7 @@ In this function, there is some interesting logic. Reading through it, can you s - hide the form - show the reset button -Before moving on, it's useful to learn about a very important concept available in browsers: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage is a useful way to store strings in the browser as a `key-value` pair. This type of web storage can be manipulated by JavaScript to manage data in the browser. LocalStorage does not expire, while SessionStorage, another kind of web storage, is cleared when the browser is closed. The various types of storage have pros and cons to their usage. +Before moving on, it's useful to learn about a very important concept available in browsers: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage is a useful way to store strings in the browser as a `key-value` pair. This type of web storage can be manipulated by JavaScript to manage data in the browser. LocalStorage does not expire, while SessionStorage, another kind of web storage, is cleared when the browser is closed. The various types of storage have pros and cons to their usage. > Note - your browser extension has its own local storage; the main browser window is a different instance and behaves separately. @@ -145,7 +145,7 @@ Before going further, we should discuss APIs. APIs, or [Application Programming ✅ The term 'REST' stands for 'Representational State Transfer' and features using variously-configured URLs to fetch data. Do a little research on the various types of APIs available to developers. What format appeals to you? -There are important things to note about this function. First notice the [`async` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Writing your functions so that they run asynchronously means that they wait for an action, such as data being returned, to be completed before continuing. +There are important things to note about this function. First notice the [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Writing your functions so that they run asynchronously means that they wait for an action, such as data being returned, to be completed before continuing. Here's a quick video about `async`: @@ -200,7 +200,7 @@ This is a big function. What's going on here? - once the API responds, you assign various elements of its response data to the parts of your screen you set up to show this data. - if there's an error, or if there is no result, you show an error message. -✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. +✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you have a working extension! The only thing that isn't working is the icon, and you'll fix that in the next lesson. @@ -208,7 +208,7 @@ Congratulations! If you build your extension (`npm run build`) and refresh it in ## 🚀 Challenge -We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion? +We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion? ## Post-Lecture Quiz diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md index 55adbbff..160a96ac 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md @@ -93,7 +93,7 @@ En esta función, hay una lógica interesante. Al leerlo, ¿puedes ver lo que su - ocultar el formulario - mostrar el botón de reinicio -Antes de continuar, es útil conocer un concepto muy importante disponible en los navegadores: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage es una forma útil de almacenar cadenas en el navegador como un par "clave-valor". Este tipo de almacenamiento web puede ser manipulado por JavaScript para administrar datos en el navegador. LocalStorage no caduca, mientras que SessionStorage, otro tipo de almacenamiento web, se borra cuando se cierra el navegador. Los distintos tipos de almacenamiento tienen ventajas y desventajas para su uso. +Antes de continuar, es útil conocer un concepto muy importante disponible en los navegadores: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage es una forma útil de almacenar cadenas en el navegador como un par "clave-valor". Este tipo de almacenamiento web puede ser manipulado por JavaScript para administrar datos en el navegador. LocalStorage no caduca, mientras que SessionStorage, otro tipo de almacenamiento web, se borra cuando se cierra el navegador. Los distintos tipos de almacenamiento tienen ventajas y desventajas para su uso. > Nota: la extensión de su navegador tiene su propio almacenamiento local; la ventana principal del navegador es una instancia diferente y se comporta por separado. @@ -193,13 +193,13 @@ Esta es una gran función. ¿Que está pasando aqui? - una vez que la API responde, asigna varios elementos de sus datos de respuesta a las partes de su pantalla que configura para mostrar estos datos. - si hay un error o si no hay ningún resultado, muestra un mensaje de error. -✅ El uso de patrones de programación asíncronos es otra herramienta muy útil en su caja de herramientas. Lea [acerca de las diversas formas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) puede configurar este tipo de código. +✅ El uso de patrones de programación asíncronos es otra herramienta muy útil en su caja de herramientas. Lea [acerca de las diversas formas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) puede configurar este tipo de código. ¡Felicidades! Si construye su extensión (`npm run build`) y la actualiza en su panel de extensiones, ¡tiene una extensión que funciona! Lo único que no funciona es el ícono, y lo solucionará en la próxima lección. --- -🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente? +🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente? ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26) diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md index f2922d05..eab2226b 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md @@ -145,7 +145,7 @@ Prima di andare oltre, si dovrebbe parlare delle API. Le API, o [Application Pro ✅ Il termine "REST" sta per "Representational State Transfer" e prevede l'utilizzo di URL variamente configurati per recuperare dati. Fare una piccola ricerca sui vari tipi di API disponibili per gli sviluppatori. Quale formato piace? -Ci sono cose importanti da notare su questa funzione. Per prima cosa nota la [parola chiave `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Scrivere le funzioni in modo che vengano eseguite in modo asincrono significa che attendono il completamento di un'azione, come la restituzione dei dati, prima di continuare. +Ci sono cose importanti da notare su questa funzione. Per prima cosa nota la [parola chiave `async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Scrivere le funzioni in modo che vengano eseguite in modo asincrono significa che attendono il completamento di un'azione, come la restituzione dei dati, prima di continuare. Ecco un breve video su `async`: @@ -200,7 +200,7 @@ Questa è una grande funzione. Cosa sta succedendo qui? - una volta che l'API risponde, si assegnano i vari elementi dei suoi dati di risposta alle parti dello schermo che sono state impostate per mostrare questi dati. - se c'è un errore, o se non c'è risultato, viene mostrato un messaggio di errore. -✅ L'utilizzo di schemi di programmazione asincrona è un altro strumento molto utile nella propria cassetta degli attrezzi. Informarsi [sui vari modi in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) cui si può configurare questo tipo di codice. +✅ L'utilizzo di schemi di programmazione asincrona è un altro strumento molto utile nella propria cassetta degli attrezzi. Informarsi [sui vari modi in](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) cui si può configurare questo tipo di codice. Complimenti! Se si compila la propria estensione`(npm run build`) e la si aggiorna nel pannello delle estensioni, si avrà un'estensione funzionante! L'unica cosa che non funziona è l'icona, verrà risolto nella prossima lezione. @@ -208,7 +208,7 @@ Complimenti! Se si compila la propria estensione`(npm run build`) e la si aggior ## 🚀 Sfida -Finora si è discusso sui diversi tipi di API in queste lezioni. Scegliere un'API web e cercare in profondità cosa offre. Ad esempio, dare un'occhiata alle API disponibili nei browser come l' [API HTML Drag and Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Cosa si ritiene renda grande un'API? +Finora si è discusso sui diversi tipi di API in queste lezioni. Scegliere un'API web e cercare in profondità cosa offre. Ad esempio, dare un'occhiata alle API disponibili nei browser come l' [API HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Cosa si ritiene renda grande un'API? ## Quiz Post-Lezione diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md index bf8b69de..67f4bbbb 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md @@ -94,7 +94,7 @@ function reset(e) { - 폼 숨기기 - 리셋 버튼 보이기 -계속 진행하기 전, 브라우저에서 사용할 수 있는 매우 중요한 개념: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)에 대해 알아 보는 것이 좋습니다. LocalStorage는 브라우저에 문자열을 `key-value` 쌍으로 저장하는 유용한 방법입니다. 이런 타입의 웹 저장소는 브라우저에서 데이터를 관리하기 위해 JavaScript로 제어할 수 있습니다. LocalStorage는 만료되지 않지만, 다른 종류의 웹 저장소인 SessionStorage는 브라우저를 닫는 즉시 지워집니다. 다양한 타입의 저장소를 사용하는 것은 장점과 단점이 존재합니다. +계속 진행하기 전, 브라우저에서 사용할 수 있는 매우 중요한 개념: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)에 대해 알아 보는 것이 좋습니다. LocalStorage는 브라우저에 문자열을 `key-value` 쌍으로 저장하는 유용한 방법입니다. 이런 타입의 웹 저장소는 브라우저에서 데이터를 관리하기 위해 JavaScript로 제어할 수 있습니다. LocalStorage는 만료되지 않지만, 다른 종류의 웹 저장소인 SessionStorage는 브라우저를 닫는 즉시 지워집니다. 다양한 타입의 저장소를 사용하는 것은 장점과 단점이 존재합니다. > Note - 이 브라우저 확장은 로컬 저장소를 가집니다; 주요 브라우저 창은 각자 다른 객체이며 별도로 동작합니다. @@ -145,7 +145,7 @@ function setUpUser(apiKey, regionName) { ✅ 'REST'라는 용어는 'Representational State Transfer'를 의미하고 데이터를 가져오기 위해서 다양하게-구성된 URL을 쓰는 기능입니다. 개발자가 사용할 수 있는 다양한 타입의 API에 대해 약간 알아보십시오. 어떤 포맷이 좋습니까? -이 함수에 대해 유의해야 할 중요 사항이 있습니다. 먼저 [`async` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)를 확인합니다. 비동기로 실행되도록 함수를 작성한다는 것은 수행되기 전 데이터 반환 작업이 완료될 때를 기다린다는 점을 의미합니다. +이 함수에 대해 유의해야 할 중요 사항이 있습니다. 먼저 [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)를 확인합니다. 비동기로 실행되도록 함수를 작성한다는 것은 수행되기 전 데이터 반환 작업이 완료될 때를 기다린다는 점을 의미합니다. 다음은 `async`에 대한 간단한 영상입니다 : @@ -198,7 +198,7 @@ async function displayCarbonUsage(apiKey, region) { - API가 응답하면, 이 데이터를 출력하도록 설정한 화면에 응답 데이터의 다양한 요소를 할당합니다. - 오류가 있거나, 결과가 없는 경우에는, 오류 메시지가 출력됩니다. -✅ 비동기 프로그래밍 패턴을 사용하는 것은 툴박스의 다른 매우 유용한 도구입니다. [about the various ways](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)를 읽고 이런 타입의 코드를 구성할 수 있습니다. +✅ 비동기 프로그래밍 패턴을 사용하는 것은 툴박스의 다른 매우 유용한 도구입니다. [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)를 읽고 이런 타입의 코드를 구성할 수 있습니다. 축하합니다! 확장을 빌드하고 (`npm run build`) 확장 패널에서 새로 고치면, 작동하는 확장이 있습니다! 아이콘만 작동하지 않으며 다음 강의에서 수정할 예정입니다. @@ -206,7 +206,7 @@ async function displayCarbonUsage(apiKey, region) { ## 🚀 도전 -지금까지 이 강의에서 여러 타입의 API에 대해 논의했습니다. 웹 API를 선택하고 제공하는 내용에 대해 자세히 알아보세요. 예시로, [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)와 같은 브라우저에서 쓸 수 있는 API를 보세요. 당신의 의견에 비추어 볼 때 좋은 API를 만드는 방법은 무엇일까요? +지금까지 이 강의에서 여러 타입의 API에 대해 논의했습니다. 웹 API를 선택하고 제공하는 내용에 대해 자세히 알아보세요. 예시로, [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)와 같은 브라우저에서 쓸 수 있는 API를 보세요. 당신의 의견에 비추어 볼 때 좋은 API를 만드는 방법은 무엇일까요? ## 강의 후 퀴즈 diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md index 1ba31d65..39eabe86 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md @@ -94,7 +94,7 @@ Dalam fungsi ini, terdapat beberapa logik yang menarik. Bacalah, anda dapat meli - sembunyikan borang - tunjukkan butang set semula -Sebelum meneruskan, berguna untuk mengetahui konsep yang sangat penting yang terdapat dalam penyemak imbas: [LocalStorage] https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage adalah cara yang berguna untuk menyimpan rentetan dalam penyemak imbas sebagai pasangan `kunci-nilai` . Jenis storan web ini dapat dimanipulasi oleh JavaScript untuk menguruskan data di penyemak imbas. LocalStorage tidak akan habis masa berlakunya, sementara SessionStorage, jenis penyimpanan web lain, akan dihapus apabila penyemak imbas ditutup. Pelbagai jenis storan mempunyai kebaikan dan keburukan terhadap penggunaannya. +Sebelum meneruskan, berguna untuk mengetahui konsep yang sangat penting yang terdapat dalam penyemak imbas: [LocalStorage] https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage adalah cara yang berguna untuk menyimpan rentetan dalam penyemak imbas sebagai pasangan `kunci-nilai` . Jenis storan web ini dapat dimanipulasi oleh JavaScript untuk menguruskan data di penyemak imbas. LocalStorage tidak akan habis masa berlakunya, sementara SessionStorage, jenis penyimpanan web lain, akan dihapus apabila penyemak imbas ditutup. Pelbagai jenis storan mempunyai kebaikan dan keburukan terhadap penggunaannya. > Catatan - pelanjutan penyemak imbas anda mempunyai storan tempatan sendiri; tetingkap penyemak imbas utama adalah contoh yang berbeza dan berkelakuan secara berasingan. @@ -143,7 +143,7 @@ Sebelum melangkah lebih jauh, kita harus membincangkan API. API, atau [Applicati ✅ Istilah 'REST' adalah singkatan dari 'Representational State Transfer' dan ciri menggunakan URL yang dikonfigurasikan dengan pelbagai untuk mengambil data. Lakukan sedikit kajian mengenai pelbagai jenis API yang tersedia untuk pembangun. Format apa yang menarik bagi anda? -Terdapat perkara penting yang perlu diperhatikan mengenai fungsi ini. Perhatikan dahulu kata kunci [`async` kata kunci](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Menulis fungsi anda supaya mereka berjalan secara tidak segerak bermakna mereka menunggu tindakan, seperti data yang dikembalikan, diselesaikan sebelum meneruskan. +Terdapat perkara penting yang perlu diperhatikan mengenai fungsi ini. Perhatikan dahulu kata kunci [`async` kata kunci](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Menulis fungsi anda supaya mereka berjalan secara tidak segerak bermakna mereka menunggu tindakan, seperti data yang dikembalikan, diselesaikan sebelum meneruskan. Inilah video ringkas mengenai `async`: @@ -198,7 +198,7 @@ Ini adalah fungsi besar. Apa yang berlaku di sini? - setelah API bertindak balas, anda menetapkan pelbagai elemen data responsnya ke bahagian-bahagian skrin yang anda siapkan untuk menunjukkan data ini. - jika ada ralat, atau jika tidak ada hasil, anda akan menunjukkan mesej ralat. -✅ Menggunakan corak pengaturcaraan tak segerak adalah alat lain yang sangat berguna dalam kotak alat anda. Baca untuk[mengenai pelbagai cara](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) anda boleh mengkonfigurasi jenis kod ini. +✅ Menggunakan corak pengaturcaraan tak segerak adalah alat lain yang sangat berguna dalam kotak alat anda. Baca untuk[mengenai pelbagai cara](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) anda boleh mengkonfigurasi jenis kod ini. Tahniah! Sekiranya anda membina pelanjutan anda (`npm run build`) dan menyegarkannya di panel pelanjutan anda, anda mempunyai sambungan yang berfungsi! Satu-satunya perkara yang tidak berfungsi ialah ikon, dan anda akan memperbaikinya pada pelajaran seterusnya. @@ -206,7 +206,7 @@ Tahniah! Sekiranya anda membina pelanjutan anda (`npm run build`) dan menyegarka ## 🚀 Cabaran -Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pilih API web dan teliti secara mendalam apa yang ditawarkannya. Sebagai contoh, perhatikan API yang tersedia dalam penyemak imbas seperti [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Apa yang menjadikan API hebat pada pendapat anda? +Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pilih API web dan teliti secara mendalam apa yang ditawarkannya. Sebagai contoh, perhatikan API yang tersedia dalam penyemak imbas seperti [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Apa yang menjadikan API hebat pada pendapat anda? ## Kuiz Pasca Kuliah diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md index f2c4db88..1b4da135 100644 --- a/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/5-browser-extension/3-background-tasks-and-performance/README.md @@ -22,7 +22,7 @@ The Performance tab contains a Profiling tool. Open a web site (try, for example ![Edge profiler](./images/profiler.png) -✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge +✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge > Tip: to get a true reading of your web site's startup time, clear your browser's cache diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md index ebe74673..7a8723f0 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md @@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra ![Edge profiler](./images/profiler.png) -✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge +✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge > Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md index 78a01c39..fc261155 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md @@ -22,7 +22,7 @@ La scheda Prestazioni contiene uno strumento di profilazione. Aprire un sito web ![Edge profiler](../images/profiler.png) -✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge +✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge > Suggerimento: per ottenere una lettura fedele del tempo di avvio del proprio sito web, svuotare la cache del browser diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md index 073f8d84..6f88b65c 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md @@ -22,7 +22,7 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고 ![Edge profiler](.././images/profiler.png) -✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요 +✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요 > Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요 diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md index 94ee3f38..80db50fe 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md @@ -22,7 +22,7 @@ Tab Prestasi mengandungi alat Profil. Buka laman web (cuba, misalnya, https://ww ![Edge profiler](../images/profiler.png) -✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge +✅ Lawati [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance) pada panel Performance di Edge > Petua: untuk mendapatkan bacaan sebenar mengenai masa permulaan laman web anda, kosongkan cache penyemak imbas anda diff --git a/6-space-game/1-introduction/README.md b/6-space-game/1-introduction/README.md index 09f79680..658bde55 100644 --- a/6-space-game/1-introduction/README.md +++ b/6-space-game/1-introduction/README.md @@ -29,7 +29,7 @@ All we described above are behavior that game objects can have. So how do we enc The idea is to use `classes` in conjunction with `inheritance` to accomplish adding a certain behavior to a class. -✅ Inheritance is an important concept to understand. Learn more on [MDN's article about inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). +✅ Inheritance is an important concept to understand. Learn more on [MDN's article about inheritance](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). Expressed via code, a game object can typically look like this: @@ -217,7 +217,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit ## Review & Self Study -Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa). +Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa). ## Assignment diff --git a/6-space-game/1-introduction/translations/README.es.md b/6-space-game/1-introduction/translations/README.es.md index f4291066..661ae11c 100644 --- a/6-space-game/1-introduction/translations/README.es.md +++ b/6-space-game/1-introduction/translations/README.es.md @@ -27,7 +27,7 @@ Todo lo que describimos anteriormente son comportamientos que pueden tener los o La idea es usar `classes` junto con `inheritance` para lograr agregar un cierto comportamiento a una clase. -✅ La herencia es un concepto importante de comprender. Obtenga más información en el [artículo de MDN sobre herencia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). +✅ La herencia es un concepto importante de comprender. Obtenga más información en el [artículo de MDN sobre herencia](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). Expresado a través de código, un objeto de juego normalmente puede verse así: @@ -211,6 +211,6 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec ## Revisión y autoestudio -Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa). +Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa). **Tarea**: [Mock up a game](assignment.es.md) \ No newline at end of file diff --git a/6-space-game/1-introduction/translations/README.hi.md b/6-space-game/1-introduction/translations/README.hi.md index bffa5eb1..1aec19df 100644 --- a/6-space-game/1-introduction/translations/README.hi.md +++ b/6-space-game/1-introduction/translations/README.hi.md @@ -29,7 +29,7 @@ विचार एक क्लास के लिए एक निश्चित व्यवहार को जोड़ने के लिए `inheritence` के साथ संयोजन में `inheritence` का उपयोग करने के लिए है. -✅ समझने के लिए इन्हेरिटेंस एक महत्वपूर्ण अवधारणा है। [एमडीएन के इन्हेरिटेंस के बारे में लेख](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototyp_chain) पर और जानें. +✅ समझने के लिए इन्हेरिटेंस एक महत्वपूर्ण अवधारणा है। [एमडीएन के इन्हेरिटेंस के बारे में लेख](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototyp_chain) पर और जानें. कोड के माध्यम से व्यक्त, एक गेम ऑब्जेक्ट आमतौर पर इस तरह दिख सकता है: @@ -215,7 +215,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { ## समीक्षा और स्व अध्ययन -pub/sub[के बारे में पढ़े](https://docs.microsoft.com/en-us/azure/altecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa) और अधिक जानें . +pub/sub[के बारे में पढ़े](https://docs.microsoft.com/azure/altecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa) और अधिक जानें . ## असाइनमेंट diff --git a/6-space-game/1-introduction/translations/README.ko.md b/6-space-game/1-introduction/translations/README.ko.md index 7f2eaa24..133d69e9 100644 --- a/6-space-game/1-introduction/translations/README.ko.md +++ b/6-space-game/1-introduction/translations/README.ko.md @@ -29,7 +29,7 @@ 아이디어로는 클래스에 특정 동작을 추가하기 위해 `inheritance`과 함께 `classes`를 사용하는 것입니다. -✅ 상속은 이해해야 할 중요한 컨셉입니다. [MDN's article about inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)로 더 배워보세요. +✅ 상속은 이해해야 할 중요한 컨셉입니다. [MDN's article about inheritance](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)로 더 배워보세요. 코드를 통해 표현되는, 게임 객체는 일반적으로 다음과 같습니다: @@ -217,7 +217,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세 ## 리뷰 & 자기주도 학습 -[reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)으로 Pub/Sub에 대해 조금 더 배워봅시다. +[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)으로 Pub/Sub에 대해 조금 더 배워봅시다. ## 과제 diff --git a/6-space-game/1-introduction/translations/README.ms.md b/6-space-game/1-introduction/translations/README.ms.md index 7b48c2c7..70299ff4 100644 --- a/6-space-game/1-introduction/translations/README.ms.md +++ b/6-space-game/1-introduction/translations/README.ms.md @@ -29,7 +29,7 @@ Yang kami terangkan di atas adalah tingkah laku yang boleh dimiliki oleh objek p Ideanya adalah untuk menggunakan `kelas` bersama dengan `pewarisan` untuk menyelesaikan penambahan tingkah laku tertentu ke kelas. -✅ Warisan adalah konsep penting untuk difahami. Ketahui lebih lanjut mengenai [artikel MDN mengenai pewarisan](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). +✅ Warisan adalah konsep penting untuk difahami. Ketahui lebih lanjut mengenai [artikel MDN mengenai pewarisan](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). Diekspresikan melalui kod, objek permainan biasanya dapat terlihat seperti ini: @@ -217,7 +217,7 @@ Fikirkan bagaimana corak pub-sub dapat meningkatkan permainan. Bahagian mana yan ## Mengkaji & Belajar Sendiri -Ketahui lebih lanjut mengenai Pub/Sub dengan [membaca mengenainya](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber). +Ketahui lebih lanjut mengenai Pub/Sub dengan [membaca mengenainya](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber). ## Tugasan diff --git a/6-space-game/2-drawing-to-canvas/README.md b/6-space-game/2-drawing-to-canvas/README.md index 0e9d7d38..6474fd32 100644 --- a/6-space-game/2-drawing-to-canvas/README.md +++ b/6-space-game/2-drawing-to-canvas/README.md @@ -8,7 +8,7 @@ The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it. -✅ Read [more about the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) on MDN. +✅ Read [more about the Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) on MDN. Here's how it's typically declared, as part of the page's body: @@ -27,7 +27,7 @@ Above we are setting the `id`, `width` and `height`. The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location `0,0` is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas. ![the canvas's grid](canvas_grid.png) -> Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) To draw on the canvas element you will need to go through the following steps: @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` -✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). +✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API). You can draw all sorts of things with the Canvas API like: @@ -201,7 +201,7 @@ Please try solving it yourself first but if you get stuck, have a look at a [sol ## 🚀 Challenge -You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and try to draw a 3D object. +You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), and try to draw a 3D object. ## Post-Lecture Quiz @@ -209,7 +209,7 @@ You've learned about drawing with the 2D-focused Canvas API; take a look at the ## Review & Self Study -Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## Assignment diff --git a/6-space-game/2-drawing-to-canvas/translations/README.es.md b/6-space-game/2-drawing-to-canvas/translations/README.es.md index 2a4490b3..e6fdf57d 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.es.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.es.md @@ -8,7 +8,7 @@ El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle dibujo sobre él. -✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) en MDN. +✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) en MDN. Así es como se declara normalmente, como parte del cuerpo de la página: @@ -27,7 +27,7 @@ Arriba estamos configurando el `id`, `width` y `alto`. Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje xy un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que dijiste que era el ANCHO y ALTO del lienzo. ! [cuadrícula del lienzo](canvas_grid.png) -> Imagen de [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Para dibujar en el elemento de lienzo, deberá seguir los siguientes pasos: @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x, y, ancho, alto ``` -✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). +✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API). Puede dibujar todo tipo de cosas con la API de Canvas como: @@ -200,13 +200,13 @@ El resultado final debería verse así: Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una [solución](solution/app.js) -🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D. +🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D. ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32) ## Revisión y autoestudio -Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/docs/Web/API/Canvas_API). **Tarea**: [Jugar con la API de Canvas](assignment.es.md) \ No newline at end of file diff --git a/6-space-game/2-drawing-to-canvas/translations/README.hi.md b/6-space-game/2-drawing-to-canvas/translations/README.hi.md index 210a0332..c75c9aef 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.hi.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.hi.md @@ -8,7 +8,7 @@ कैनवास एक HTML तत्व है जो डिफ़ॉल्ट रूप से कोई सामग्री नहीं है; यह एक खाली स्लेट है. आपको उस पर ड्राइंग करके इसे जोड़ना होगा. -✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API). यहां बताया गया है कि पेज के मुख्य भाग के रूप में यह आमतौर पर घोषित किया जाता है: @@ -29,7 +29,7 @@ ![कैनवास का ग्रिड](../canvas_grid.png) -> [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि +> [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि कैनवास तत्व पर आकर्षित करने के लिए आपको निम्नलिखित चरणों से गुजरना होगा: @@ -54,7 +54,7 @@ ctx.fillStyle = "red"; ctx.fillRect(0, 0, 200, 200); // x,y,width, height ``` -✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं. +✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं. आप कैनवस एपीआई के साथ सभी प्रकार की चीजें आकर्षित कर सकते हैं जैसे की : @@ -203,7 +203,7 @@ npm start ## 🚀 चुनौती -आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें. +आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें. ## पोस्ट-व्याख्यान प्रश्नोत्तरी @@ -211,7 +211,7 @@ npm start ## समीक्षा और स्व अध्ययन -कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## असाइनमेंट diff --git a/6-space-game/2-drawing-to-canvas/translations/README.it.md b/6-space-game/2-drawing-to-canvas/translations/README.it.md index f460000d..3f048ee0 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.it.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.it.md @@ -8,7 +8,7 @@ Canvas è un elemento HTML che per impostazione predefinita non ha contenuto; è una lavagna vuota. Si può riempirla disegnandoci sopra. -✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) su MDN. +✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) su MDN. Ecco come viene tipicamente dichiarato, come parte dell'elemento body della pagina: @@ -27,7 +27,7 @@ Sopra si è impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (` Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas ![la griglia del canvas](../canvas_grid.png) -> Immagine da [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> Immagine da [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi: @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,larghezza, altezza ``` -✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). +✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API). Si può disegnare ogni sorta di cose con l'API Canvas come: @@ -209,7 +209,7 @@ Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata ## Revisione e Auto Apprendimento -Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## Compito diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ko.md b/6-space-game/2-drawing-to-canvas/translations/README.ko.md index 408c2ebb..73da781b 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ko.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ko.md @@ -8,7 +8,7 @@ canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니다. 그리는 작업으로 추가해야 합니다. -✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 읽어보세요. +✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/docs/Web/API/Canvas_API) 읽어보세요. 보통 페이지 본문의 일부로 선언되는 방법은 다음과 같습니다: @@ -27,7 +27,7 @@ canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니 캔버스는 데카르트 좌표계로 사물을 그립니다. 따라서 x-축과 y-축을 이용하여 무언가의 위치를 나타냅니다. 위치 `0,0`은 죄측 상단이며 우측 하단은 캔버스의 너비와 높이라고 말한 위치입니다. ![the canvas's grid](../canvas_grid.png) -> Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 캔버스 요소에 그리려면 다음 단계를 거쳐야 합니다: @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` -✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다. +✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다. Canvas API를 사용하면 다음과 같은 모든 종류를 그릴 수 있습니다: @@ -201,7 +201,7 @@ npm start ## 🚀 도전 -2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요. +2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요. ## 강의 후 퀴즈 @@ -209,7 +209,7 @@ npm start ## 리뷰 & 자기주도 학습 -[reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요. +[reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요. ## 과제 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ms.md b/6-space-game/2-drawing-to-canvas/translations/README.ms.md index bda8281d..2af525e3 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ms.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ms.md @@ -8,7 +8,7 @@ Kanvas adalah elemen HTML yang secara lalai tidak mempunyai isi; itu batu tulis kosong. Anda perlu menambahkannya dengan melukisnya. -✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) di MDN. +✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) di MDN. Inilah cara ia dinyatakan secara umum, sebagai bahagian badan halaman: @@ -27,7 +27,7 @@ Di atas kita menetapkan `id`, `lebar` dan `tinggi`. Canvas menggunakan sistem koordinat kartesian untuk menarik sesuatu. Oleh itu ia menggunakan paksi-x dan paksi-y untuk menyatakan di mana sesuatu berada. Lokasi `0,0` adalah kedudukan kiri atas dan kanan bawah adalah yang anda katakan sebagai Luas dan TINGGI kanvas. ![grid kanvas](../canvas_grid.png) -> Imej dari [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Untuk menggunakan elemen kanvas, anda perlu melalui langkah-langkah berikut: @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,luas,tinggi ``` -✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). +✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API). Anda boleh menarik pelbagai perkara dengan Canvas API seperti: @@ -201,7 +201,7 @@ Cuba selesaikannya sendiri terlebih dahulu tetapi jika anda buntu, lihatlah [sol ## 🚀 Cabaran -Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), dan cuba lukis objek 3D. +Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), dan cuba lukis objek 3D. ## Kuiz Pasca Kuliah @@ -209,7 +209,7 @@ Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://de ## Mengkaji & Belajar Sendiri -Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). +Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## Tugasan diff --git a/6-space-game/5-keeping-score/README.md b/6-space-game/5-keeping-score/README.md index e4460b29..1350bf3e 100644 --- a/6-space-game/5-keeping-score/README.md +++ b/6-space-game/5-keeping-score/README.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier! +✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier! ## Life, as a game concept diff --git a/6-space-game/5-keeping-score/translations/README.es.md b/6-space-game/5-keeping-score/translations/README.es.md index f9537510..44da53c7 100644 --- a/6-space-game/5-keeping-score/translations/README.es.md +++ b/6-space-game/5-keeping-score/translations/README.es.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante! +✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante! ## La vida, como concepto de juego diff --git a/6-space-game/5-keeping-score/translations/README.hi.md b/6-space-game/5-keeping-score/translations/README.hi.md index 837c1369..2d38aa19 100644 --- a/6-space-game/5-keeping-score/translations/README.hi.md +++ b/6-space-game/5-keeping-score/translations/README.hi.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए! +✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए! ## जीवन, एक खेल अवधारणा के रूप में diff --git a/6-space-game/5-keeping-score/translations/README.it.md b/6-space-game/5-keeping-score/translations/README.it.md index 616246e2..e34ec2f5 100644 --- a/6-space-game/5-keeping-score/translations/README.it.md +++ b/6-space-game/5-keeping-score/translations/README.it.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato! +✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato! ## La vita, come concetto di gioco diff --git a/6-space-game/5-keeping-score/translations/README.ko.md b/6-space-game/5-keeping-score/translations/README.ko.md index 139b7672..2319fcf2 100644 --- a/6-space-game/5-keeping-score/translations/README.ko.md +++ b/6-space-game/5-keeping-score/translations/README.ko.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요! +✅ [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요! ## 게임 컨셉에서 생명 diff --git a/6-space-game/5-keeping-score/translations/README.ms.md b/6-space-game/5-keeping-score/translations/README.ms.md index 40f225d2..01bbcc27 100644 --- a/6-space-game/5-keeping-score/translations/README.ms.md +++ b/6-space-game/5-keeping-score/translations/README.ms.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Baca lebih lanjut mengenai [cara menambahkan teks ke kanvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), dan jangan ragu untuk menjadikan teks anda kelihatan lebih menarik! +✅ Baca lebih lanjut mengenai [cara menambahkan teks ke kanvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), dan jangan ragu untuk menjadikan teks anda kelihatan lebih menarik! ## Hidup, sebagai konsep permainan diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md index d7a89c5c..b01a52db 100644 --- a/7-bank-project/1-template-route/README.md +++ b/7-bank-project/1-template-route/README.md @@ -41,7 +41,7 @@ If you want to create multiples screens for a web page, one solution would be to - You have to reload the entire HTML when switching screen, which can be slow. - It's difficult to share data between the different screens. -Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) using the `