diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-08-17 11:37:07 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-17 11:37:07 +0900 |
| commit | 98a7793a51bdbdeefb172842e677dca22eb779e5 (patch) | |
| tree | f07cde27678193afe366832bd58c958657fadc6c | |
| parent | 6c30dec8016abec2fba8caf0bd07d0e145c37caf (diff) | |
| parent | a28f6c8632ced6d91d311614d96ab643e5ef7058 (diff) | |
| download | translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.gz translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.bz2 translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.zip | |
Merge branch 'mdn:main' into 20210811-orphaned/Web/API/NavigatorLanguage
382 files changed, 11843 insertions, 13954 deletions
diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 4fc475a04a..e6fe7a5b96 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -79,7 +79,7 @@ jobs: key: dotlocal-${{ runner.os }}-${{ hashFiles('.github/workflows/pr-review-companion.yml') }} - name: Install Python poetry - uses: snok/install-poetry@v1.1.7 + uses: snok/install-poetry@v1.1.8 with: virtualenvs-create: true virtualenvs-in-project: true diff --git a/docs/ko/markdown-guide.md b/docs/ko/markdown-guide.md new file mode 100644 index 0000000000..293e0ba550 --- /dev/null +++ b/docs/ko/markdown-guide.md @@ -0,0 +1,29 @@ +# MDN ko locale Markdown 번역에 대한 일반 지침 + +## .html 확장자에서 .md 확장자로의 파일 변경일 경우 + +아래 두 가지 경우에 총 2개의 commit으로 구분해서 PR을 제출해주세요. + +1. 확장자만 `html`에서 `md`로 바꾸고 commit 해주세요. +2. `html` 형식에서 `md` 형식으로 변경한 뒤 commit을 해주세요. + +html 파일에 대한 commit은 오로지 확장자를 바꾸는 것만 허용됩니다. 또한, 전체 commit 개수를 2개를 넘지 않도록 합니다(`squash and merge`가 아닌 `rebase and merge`를 해야하기 때문입니다.). `squash and merge`를 하거나 확장자 변경 작업이 없을 경우 Git History가 소멸되는데, 이전 기여자들의 기록을 남기기 위함입니다. 예시는 [확장자 변경 PR](https://github.com/mdn/translated-content/pull/1769/commits/c7937cf2194d218d98394cd7f5f8acebd2e88aa0)를 참고해주세요. + +다음 [PR](https://github.com/mdn/translated-content/pull/1771)은 모범적인 PR입니다. + +### 리뷰 + +리뷰로 인해 수정사항이 발생할 경우, 예외적으로 **수정 사항에 대해서 commit의 개수를 1개를 추가적으로 허용합니다.** + +> 참고 +> `git log --follow (파일)` 로 해당 파일의 git history를 볼 수 있습니다. + +## 그 이외의 경우 (이미 md 파일이 존재하거나, 해당 번역 페이지가 없는 경우) + +일반 PR 방식대로 진행합니다. + +# MDN ko locale Markdown 번역에 대한 일반 지침 (리뷰어) + +1. `존재하는 파일에 대한 변경 (존재하는 파일이 .html 확장자일 경우)`에 대해서는 `squash and merge`가 아닌 `rebase and merge`를 진행해야합니다. +2. 파일에 대한 Git History가 유지되는지 확인해주세요. +3. commit의 개수는 최소가 되어야 합니다. diff --git a/docs/ko/translation-guide.md b/docs/ko/translation-guide.md index 44898bdb04..f43ea8b627 100644 --- a/docs/ko/translation-guide.md +++ b/docs/ko/translation-guide.md @@ -89,6 +89,16 @@ EDITOR=code 그동안의 MDN 문서에서는 역주로인한 자의적인 해석이 많았고, 전체적인 문서의 품질을 낮췄습니다. 역주가 꼭 필요한 상황이 아니라면 역주는 남기지 않으며, 남기더라도 따로 역주를 표시하지 않고 본문에 포함합니다. 예시: [다음 링크 참고](https://github.com/mdn/translated-content/pull/1385#discussion_r667509255) +### 기울임꼴 + +한글은 기울임꼴에 적합하지 않습니다. 전용 이탤릭체가 없다는 것이 첫 이유이고, 문자의 조형이 (정)사각형인 것이 두 번째 이유입니다. [세부 내용 다음 링크 참고](https://github.com/mdn/translated-content/issues/1537) + +- 기본 방침은 생략하며, 기여자에 재량에 따라 아래 두 가지 규칙을 따른다. + - 한글일 경우 '' 를 tag 대신에 기입한다. + - 한글이 아닐 경우 생략한다. + +다만 진짜 강조를 해야하는 상황에는, 따옴표로 강조하고 PR로 소명합니다. + ## 용어 지침 ### 공통 diff --git a/files/fr/glossary/code_splitting/index.html b/files/fr/glossary/code_splitting/index.html new file mode 100644 index 0000000000..16b30e574e --- /dev/null +++ b/files/fr/glossary/code_splitting/index.html @@ -0,0 +1,19 @@ +--- +title: La division du code +slug: Glossary/Code_splitting +translation_of: Glossary/Code_splitting +--- +<p>La <strong>division du code</strong> (« <i>code splitting</i> » en Anglais) est le fractionnement du code en divers bundles ou composants qui peuvent ensuite être chargés à la demande ou en parallèle.</p> + +<p>Au fur et à mesure qu'une application devient de plus en plus complexe ou est maintenue, la taille en octets des fichiers ou bundles CSS et JavaScripts augmente, en particulier à mesure que le nombre et la taille des bibliothèques tierces incluses augmentent. Pour éviter d'avoir à télécharger des fichiers gigantesques, les scripts peuvent être divisés en plusieurs fichiers plus petits. Ensuite, les fonctionnalités requises au chargement de la page peuvent être téléchargées immédiatement avec des scripts supplémentaires <a href="/fr/docs/Glossary/Lazy_load">chargés passivement</a> une fois que la page ou l'application soit interactive, améliorant ainsi les performances. Bien que la quantité totale de code soit la même (et peut-être même quelques octets plus grands), la quantité de code nécessaire lors du chargement initial peut être réduite.</p> + +<p>Le code splitting est une fonctionnalité prise en charge par les contructeurs (bundlers) comme <a href="https://webpack.js.org/">Webpack</a> et <a href="https://browserify.org/">Browserify</a> qui peut créer plusieurs bundles pouvant être chargés dynamiquement au moment de l'exécution.</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>Regroupement</li> + <li><a href="/fr/docs/Web/Performance/Lazy_loading">Lazy loading</a></li> + <li><a href="/fr/docs/Glossary/HTTP_2">HTTP/2</a></li> + <li><a href="/fr/docs/Glossary/Tree_shaking">Tree shaking</a></li> +</ul> diff --git a/files/fr/learn/performance/multimedia/index.html b/files/fr/learn/performance/multimedia/index.html new file mode 100644 index 0000000000..8df0dc44e2 --- /dev/null +++ b/files/fr/learn/performance/multimedia/index.html @@ -0,0 +1,144 @@ +--- +title: 'Multimédia : Images' +slug: Learn/Performance/Multimedia +translation_of: Learn/Performance/Multimedia +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</div> + +<p>Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Connaître les différents formats d'images, apprendre leur impact sur les performances et savoir comment réduire l'impact des images sur le temps de chargement général d'une page web.</td> + </tr> + </tbody> +</table> + +<div class="notecard note"> + <p><b>Note :</b> Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que <a href="https://images.guide">https://images.guide (en anglais)</a>.</p> +</div> + +<h2 id="why_optimize_your_multimedia">Pourquoi optimiser vos éléments multimédia ?</h2> + +<p>On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos (<a href="https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367">source</a>, en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia.</p> + +<p>Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet (<a href="https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf">source</a>, en anglais).</p> + +<p>En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil.</p> + +<h2 id="optimizing_image_delivery">L'optimisation de la distribution des images</h2> + +<p>Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la <a href="/fr/docs/Learn/Performance/Perceived_performance">performance perçue</a> et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées.</p> + +<h3 id="loading_strategy">Stratégie de chargement</h3> + +<p>Une des plus grandes améliorations utilisable sur la plupart des sites web est le <a href="/fr/docs/Web/Performance/Lazy_loading">chargement différé</a> des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple <a href="https://github.com/aFarkas/lazysizes">lazysizes (en anglais)</a>, mais sachez que les navigateurs travaillent sur l'attribut <code>lazyload</code>, qui est actuellement en phase d'expérimentation.</p> + +<p>En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez :</p> + +<ul> + <li>Chargez-vous le format de fichier le plus optimal ?</li> + <li>Avez-vous bien compressé vos images ?</li> + <li>Chargez-vous des tailles d'images adaptées ?</li> +</ul> + +<h4 id="the_most_optimal_format">Le format le plus optimisé</h4> + +<p>Le format de fichier le plus optimisé dépend directement du type d'image à charger.</p> + +<div class="notecard note"> + <p><b>Note :</b> Pour obtenir des informations plus générales sur les types d'images, consultez le <a href="/fr/docs/Web/Media/Formats/Image_types">guide des types d'images et de formats d'images</a>.</p> +</div> + +<p>Le format <a href="/fr/docs/Web/Media/Formats/Image_types#svg">SVG</a> est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format <a href="/fr/docs/Web/Media/Formats/Image_types#png">PNG</a> sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.</p> + +<p>Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements :</p> + +<ul> + <li>Couleurs 24 bits + 8 bits de transparence — propose une précision complète des couleurs et des niveaux de transparence progressifs, mais au détriment de la taille du fichier. WebP est probablement une meilleure solution (voir ci-après) ;</li> + <li>Couleurs 8 bits color + 8 bits de transparence — ne propose que 255 couleurs mais maintient des niveaux de transparence progressifs. La taille des fichiers n'est pas trop importante. Il s'agit du meilleur cas d'usage du format PNG ;</li> + <li>Couleurs 8 bits + 1 bit de transparence — ne propose que 255 couleurs et ne propose pas ou peu de transparence par pixels, ce qui rend les limites des zones transparentes visibles et peu esthétiques. La taille de fichier est réduite mais au prix d'importantes dégradations visuelles.</li> +</ul> + +<p><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe <a href="https://imageoptim.com/online">ImageOptim online</a> ou <a href="https://squoosh.app/">Squoosh</a>.</p> + +<p>Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé <strong>JPEG progressif</strong>. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. <strong>MozJPEG</strong> est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne <a href="https://squoosh.app/">Squoosh</a>. Les meilleurs résultats sont obtenus avec une optimisation à 75 %.</p> + +<p>D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs.</p> + +<ul> + <li><a href="/fr/docs/Web/Media/Formats/Image_types#webp">WebP</a> : un choix excellent pour les images, qu'elles soient fixes ou animées. WebP offre une meilleure compression que PNG ou JPEG et prend en charge les grandes profondeurs de couleurs, les animations, la transparence et de nombreuses autres fonctionnalités, à l'exception de l'affichage progressif. WebP est pris en charge par tous les navigateurs les plus utilisés à l'exception de Safari 14 sur macOS 14 sur ordinateur. + <div class="notecard note"> + <p><b>Note :</b> en dépit de <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">la prise en charge annoncée de WebP sur Safari 14</a>, les images <code>.webp</code> ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.</p> + </div> + </li> + <li><a href="/fr/docs/Web/Media/Formats/Image_types#avif">AVIF</a> : un bon choix pour les images fixes ou animées, du fait du haut niveau de performances et du fait qu'il est libre de droits. AVIF est encore plus efficient que WebP, mais il n'est pas aussi bien pris en charge : il est actuellement pris en charge sur Chrome, Opera et Firefox (à l'aide des <a href="/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support">réglages de préférences</a>). <br />Vous pouvez utiliser cet <a href="https://avif-converter.online">outil en ligne pour convertir différents formats d'images en AVIF</a>.</li> + <li><strong>JPEG-XR</strong> : un format créé par Microsoft et disponible uniquement sur Internet Explorer en les versions de Edge basées sur EdgeHTML. Ce format ne prend pas en charge l'affichage progressif et le décodage de l'image n'est pas accélérée par matérielle du système et donc consommateur de ressources pour le <a href="/fr/docs/Glossary/Main_thread">fil d'exécution principal</a> du navigateur. Les JPEG progressifs situés au-dessus de la ligne de flottaison s'affichent progressivement (d'où leur nom), ce qui signifie que l'internaute voit d'abord une version en basse résolution, qui gagne progressivement en netteté au fur et à mesure que l'image se télécharge, au lieu d'avoir une image qui se charge en pleine résolution du haut vers le bas (ou directement en une seule fois).</li> + <li><strong>JPEG2000</strong> il était prévu qu'il succède au format JPEG mais n'est pris en charge que par Safari. Ce format ne prend pas non plus en charge l'affichage progressif.</li> +</ul> + +<p>Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément <code><picture></code> avec l'aide d'un élément <code><source></code> équipé d'un <a href="/fr/docs/Web/HTML/Element/picture#the_type_attribute">attribut <code>type</code></a>.</p> + +<p>Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont <a href="https://cloudinary.com/features/responsive_images">Cloudinary</a> et <a href="https://imageengine.io/">Image Engine</a>.</p> + +<p>Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments <code><img></code> et <code><picture></code>. Ces éléments vous permettent aussi d'utiliser des <strong>WebP animés</strong> pour tous les autres navigateurs modernes.</p> + +<pre class="html"><picture> + <source type="video/mp4" src="giphy.mp4"> + <source type="image/webp" src="giphy.webp"> + <img src="giphy.gif"> +</picture></pre> + +<h4 id="serving_the_optimal_size">Servir la taille optimale</h4> + +<p>Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans <i>Retina</i>). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments <code><picture></code> et <code><source></code> avec les attributs <code><a href="/fr/docs/Web/HTML/Element/Source#attr-media">media</a></code> et/ou <code><a href="/fr/docs/Web/HTML/Element/Source#attr-sizes">sizes</a></code>. Un <a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais)</a>.</p> + +<p>Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI :</p> + +<ul> + <li>avec les écrans à haut niveau de DPI, <a href="https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/">l'œil humain reconnaîtra les artefacts de compression bien plus tard</a>, ce qui signifie que pour les images destinées à ces écrans, vous pouvez aller plus loin que d'habitude en termes de compression.</li> + <li><a href="https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio">seulement une toute petite proportion des gens sont capables de détecter les améliorations supérieures à 2× DPI</a>, ce qui signifie que vous n'avez pas besoin de servir des images d'une résolution supérieure à 2×.</li> +</ul> + +<h4 id="controlling_the_priority_and_ordering_of_downloading_images">Contrôler la priorité (et l'ordre) de téléchargement des images</h4> + +<p>Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site.</p> + +<p>La première chose à vérifier est que vos images de contenu utilisent bien des éléments <code><img></code> ou <code><picture></code>, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS <code>background-image</code>. sachez que les images référencées avec les éléments <code><img></code> ou <code><picture></code> ont une priorité de chargement plus importante que les images d'arrière-plan.</p> + +<p>Deuxièmement, avec l'adoption progressive des indices de priorité (API <i>Priority Hints</i>), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut <code>importance</code> sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes.</p> + +<h3 id="rendering_strategy">Stratégie de rendu</h3> + +<p>Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un <i>reflow</i> du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs <code>width</code> et <code>height</code> pour que le navigateur puisse réserver de l'espace pour la mise en page des images.</p> + +<p>Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété <code>background-color</code> pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée.</p> + +<h2 id="conclusion">Conclusion</h2> + +<p>Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante.</p> + +<p>{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</p> + +<h2 id="in_this_module">Dans ce module</h2> + +<ul> + <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> + <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> + <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> + <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> + <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> + <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> + <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> + <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> + <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> + <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> + <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> + <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> +</ul> diff --git a/files/fr/web/http/authentication/index.html b/files/fr/web/http/authentication/index.html index c2193228d6..d7349947e0 100644 --- a/files/fr/web/http/authentication/index.html +++ b/files/fr/web/http/authentication/index.html @@ -1,12 +1,6 @@ --- title: Authentification HTTP slug: Web/HTTP/Authentication -tags: - - Access Control - - Authentication - - Guide - - HTTP - - Security translation_of: Web/HTTP/Authentication --- <div>{{HTTPSidebar}}</div> @@ -39,7 +33,7 @@ translation_of: Web/HTTP/Authentication <h3 id="authentication_of_cross-origin_images">Authentification des images multi-origines</h3> -<p>Une faille de sécurité potentielle qui a été récemment corrigée par les navigateurs est l'authentification des images multi-origines. À partir de <a href="/fr/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> et version ultérieures, les images chargées depuis des origines différentes du site courant ne sont plus en mesure de déclencher l'ouverture d'une fenêtre de dialogue (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1423146">bug 1423146</a>) demandant l'authentification HTTP, empêchant ainsi le vol d'identifiants utilisateurs si des personnes mal-intentionnées étaient en mesure d'embarquer une image aléatoire dans une page.</p> +<p>Une faille de sécurité potentielle qui a été récemment corrigée par les navigateurs est l'authentification des images multi-origines. À partir de <a href="/fr/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> et versions ultérieures, les images chargées depuis des origines différentes du site courant ne sont plus en mesure de déclencher l'ouverture d'une fenêtre de dialogue (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1423146">bug 1423146</a>) demandant l'authentification HTTP, empêchant ainsi le vol d'identifiants utilisateurs si des personnes mal-intentionnées étaient en mesure d'embarquer une image aléatoire dans une page.</p> <h3 id="character_encoding_of_http_authentication">Encodage de caractère de l'authentification HTTP</h3> @@ -75,7 +69,7 @@ Proxy-Authorization: <type> <credentials></pre> <dt>Bearer</dt> <dd>Voir <a href="https://tools.ietf.org/html/rfc6750">RFC 6750</a>, jetons <em>bearer</em> (« porteur » en français) pour accéder à des ressources protégées par OAuth 2.0.</dd> <dt>Digest</dt> - <dd>Voir <a href="https://tools.ietf.org/html/rfc7616">RFC 7616</a>, Firefox n'est compatible qu'avec l'encryption md5, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472823">bug 472823</a> pour la compatibilité avec l'encryption SHA.</dd> + <dd>Voir <a href="https://tools.ietf.org/html/rfc7616">RFC 7616</a>, Firefox n'est compatible qu'avec le chiffrement md5, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472823">bug 472823</a> pour la compatibilité avec le chiffrement SHA.</dd> <dt>HOBA</dt> <dd>Voir <a href="https://tools.ietf.org/html/rfc7486">RFC 7486</a>, <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, basé sur une signature digitale.</dd> <dt>Mutual</dt> @@ -103,7 +97,7 @@ AuthName "Accès au site de pré-production" AuthUserFile /chemin/vers/.htpasswd Require valid-user</pre> -<p>Le fichier <code>.htaccess</code> fait référence à un fichier <code>.htpasswd</code> dans lequel chaque ligne contient un nom d'utilisateur et un mot de passe séparés par deux-points (« : »). Vous ne pouvez pas déchiffrer les mots de passe à l'intérieur, car ils sont <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encryptés</a> (md5 en l'occurrence). Vous pouvez tout à fait nommer votre fichier <code>.htpasswd</code> différemment si vous le désirez, mais gardez en tête que ce fichier ne doit pas être accessible à quiconque. (Apache est normalement configuré pour empêcher l'accès aux fichiers <code>.ht*</code>).</p> +<p>Le fichier <code>.htaccess</code> fait référence à un fichier <code>.htpasswd</code> dans lequel chaque ligne contient un nom d'utilisateur et un mot de passe séparés par deux-points (« : »). Vous ne pouvez pas déchiffrer les mots de passe à l'intérieur, car ils sont <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">chiffrées</a> (en md5 en l'occurrence). Vous pouvez tout à fait nommer votre fichier <code>.htpasswd</code> différemment si vous le désirez, mais gardez en tête que ce fichier ne doit pas être accessible à quiconque (Apache est normalement configuré pour empêcher l'accès aux fichiers <code>.ht*</code>).</p> <pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/</pre> diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index afa0f48cb9..e08fe6bda3 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -135,84 +135,6 @@ /ja/docs/AppLinks/WebConsoleHelp /en-US/docs/Tools/Web_Console/Helpers /ja/docs/Applying_SVG_effects_to_HTML_content /ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content /ja/docs/Array.prototype.reduceRight /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight -/ja/docs/Bugzilla-ja /ja/docs/orphaned/Bugzilla-ja -/ja/docs/Bugzilla-ja/2.20-ja /ja/docs/orphaned/Bugzilla-ja/2.20-ja -/ja/docs/Bugzilla-ja/3.0-ja /ja/docs/orphaned/Bugzilla-ja/3.0-ja -/ja/docs/Bugzilla-ja/l10n /ja/docs/orphaned/Bugzilla-ja/l10n -/ja/docs/Bugzilla-ja:2.20-ja /ja/docs/orphaned/Bugzilla-ja/2.20-ja -/ja/docs/Bugzilla-ja:3.0-ja /ja/docs/orphaned/Bugzilla-ja/3.0-ja -/ja/docs/Bugzilla-ja:l10n /ja/docs/orphaned/Bugzilla-ja/l10n -/ja/docs/Bugzilla-jp /ja/docs/orphaned/Bugzilla-jp -/ja/docs/Bugzilla-jp/Guide /ja/docs/orphaned/Bugzilla-jp/Guide -/ja/docs/Bugzilla-jp/Guide/About /ja/docs/orphaned/Bugzilla-jp/Guide/About -/ja/docs/Bugzilla-jp/Guide/About/AccountCreation /ja/docs/orphaned/Bugzilla-jp/Guide/About/AccountCreation -/ja/docs/Bugzilla-jp/Guide/About/BugDetails /ja/docs/orphaned/Bugzilla-jp/Guide/About/BugDetails -/ja/docs/Bugzilla-jp/Guide/About/ChangeAccountPrefs /ja/docs/orphaned/Bugzilla-jp/Guide/About/ChangeAccountPrefs -/ja/docs/Bugzilla-jp/Guide/About/ProductsAndComponents /ja/docs/orphaned/Bugzilla-jp/Guide/About/ProductsAndComponents -/ja/docs/Bugzilla-jp/Guide/About/TrunkAndBranch /ja/docs/orphaned/Bugzilla-jp/Guide/About/TrunkAndBranch -/ja/docs/Bugzilla-jp/Guide/About/WhatIsBug /ja/docs/orphaned/Bugzilla-jp/Guide/About/WhatIsBug -/ja/docs/Bugzilla-jp/Guide/About/WhatIsBugzilla /ja/docs/orphaned/Bugzilla-jp/Guide/About/WhatIsBugzilla -/ja/docs/Bugzilla-jp/Guide/Comment /ja/docs/orphaned/Bugzilla-jp/Guide/Comment -/ja/docs/Bugzilla-jp/Guide/Comment/LinkRules /ja/docs/orphaned/Bugzilla-jp/Guide/Comment/LinkRules -/ja/docs/Bugzilla-jp/Guide/Contribute /ja/docs/orphaned/Bugzilla-jp/Guide/Contribute -/ja/docs/Bugzilla-jp/Guide/Grossary /ja/docs/orphaned/Bugzilla-jp/Guide/Grossary -/ja/docs/Bugzilla-jp/Guide/LifeCycle /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle -/ja/docs/Bugzilla-jp/Guide/LifeCycle/Mozilla /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/Mozilla -/ja/docs/Bugzilla-jp/Guide/LifeCycle/MozillaGumi /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/MozillaGumi -/ja/docs/Bugzilla-jp/Guide/LifeCycle/QAMozilla /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/QAMozilla -/ja/docs/Bugzilla-jp/Guide/LifeCycle/WebStandard /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/WebStandard -/ja/docs/Bugzilla-jp/Guide/LifeCycle/WebTools /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/WebTools -/ja/docs/Bugzilla-jp/Guide/Management /ja/docs/orphaned/Bugzilla-jp/Guide/Management -/ja/docs/Bugzilla-jp/Guide/Management/DeleteAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/DeleteAccount -/ja/docs/Bugzilla-jp/Guide/Management/StopAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/StopAccount -/ja/docs/Bugzilla-jp/Guide/Management/UpgradeAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/UpgradeAccount -/ja/docs/Bugzilla-jp/Guide/Report /ja/docs/orphaned/Bugzilla-jp/Guide/Report -/ja/docs/Bugzilla-jp/Guide/Report/CrashBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/CrashBugs -/ja/docs/Bugzilla-jp/Guide/Report/Enhancement /ja/docs/orphaned/Bugzilla-jp/Guide/Report/Enhancement -/ja/docs/Bugzilla-jp/Guide/Report/MemoryLeakBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/MemoryLeakBugs -/ja/docs/Bugzilla-jp/Guide/Report/RenderingBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/RenderingBugs -/ja/docs/Bugzilla-jp/Guide/Report/SecurityBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/SecurityBugs -/ja/docs/Bugzilla-jp/Guide/Report/UIBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/UIBugs -/ja/docs/Bugzilla-jp/Guide/Search /ja/docs/orphaned/Bugzilla-jp/Guide/Search -/ja/docs/Bugzilla-jp/Guide/Search/Advanced /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Advanced -/ja/docs/Bugzilla-jp/Guide/Search/Hints /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Hints -/ja/docs/Bugzilla-jp/Guide/Search/Simple /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Simple -/ja/docs/Bugzilla-jp/Guide/Tracking /ja/docs/orphaned/Bugzilla-jp/Guide/Tracking -/ja/docs/Bugzilla-jp:Guide /ja/docs/orphaned/Bugzilla-jp/Guide -/ja/docs/Bugzilla-jp:Guide:About /ja/docs/orphaned/Bugzilla-jp/Guide/About -/ja/docs/Bugzilla-jp:Guide:About:AccountCreation /ja/docs/orphaned/Bugzilla-jp/Guide/About/AccountCreation -/ja/docs/Bugzilla-jp:Guide:About:BugDetails /ja/docs/orphaned/Bugzilla-jp/Guide/About/BugDetails -/ja/docs/Bugzilla-jp:Guide:About:ChangeAccountPrefs /ja/docs/orphaned/Bugzilla-jp/Guide/About/ChangeAccountPrefs -/ja/docs/Bugzilla-jp:Guide:About:ProductsAndComponents /ja/docs/orphaned/Bugzilla-jp/Guide/About/ProductsAndComponents -/ja/docs/Bugzilla-jp:Guide:About:TrunkAndBranch /ja/docs/orphaned/Bugzilla-jp/Guide/About/TrunkAndBranch -/ja/docs/Bugzilla-jp:Guide:About:WhatIsBug /ja/docs/orphaned/Bugzilla-jp/Guide/About/WhatIsBug -/ja/docs/Bugzilla-jp:Guide:About:WhatIsBugzilla /ja/docs/orphaned/Bugzilla-jp/Guide/About/WhatIsBugzilla -/ja/docs/Bugzilla-jp:Guide:Comment /ja/docs/orphaned/Bugzilla-jp/Guide/Comment -/ja/docs/Bugzilla-jp:Guide:Comment:LinkRules /ja/docs/orphaned/Bugzilla-jp/Guide/Comment/LinkRules -/ja/docs/Bugzilla-jp:Guide:Contribute /ja/docs/orphaned/Bugzilla-jp/Guide/Contribute -/ja/docs/Bugzilla-jp:Guide:Grossary /ja/docs/orphaned/Bugzilla-jp/Guide/Grossary -/ja/docs/Bugzilla-jp:Guide:LifeCycle /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle -/ja/docs/Bugzilla-jp:Guide:LifeCycle:Mozilla /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/Mozilla -/ja/docs/Bugzilla-jp:Guide:LifeCycle:MozillaGumi /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/MozillaGumi -/ja/docs/Bugzilla-jp:Guide:LifeCycle:QAMozilla /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/QAMozilla -/ja/docs/Bugzilla-jp:Guide:LifeCycle:WebStandard /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/WebStandard -/ja/docs/Bugzilla-jp:Guide:LifeCycle:WebTools /ja/docs/orphaned/Bugzilla-jp/Guide/LifeCycle/WebTools -/ja/docs/Bugzilla-jp:Guide:Management /ja/docs/orphaned/Bugzilla-jp/Guide/Management -/ja/docs/Bugzilla-jp:Guide:Management:DeleteAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/DeleteAccount -/ja/docs/Bugzilla-jp:Guide:Management:StopAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/StopAccount -/ja/docs/Bugzilla-jp:Guide:Management:UpgradeAccount /ja/docs/orphaned/Bugzilla-jp/Guide/Management/UpgradeAccount -/ja/docs/Bugzilla-jp:Guide:Report /ja/docs/orphaned/Bugzilla-jp/Guide/Report -/ja/docs/Bugzilla-jp:Guide:Report:CrashBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/CrashBugs -/ja/docs/Bugzilla-jp:Guide:Report:Enhancement /ja/docs/orphaned/Bugzilla-jp/Guide/Report/Enhancement -/ja/docs/Bugzilla-jp:Guide:Report:MemoryLeakBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/MemoryLeakBugs -/ja/docs/Bugzilla-jp:Guide:Report:RenderingBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/RenderingBugs -/ja/docs/Bugzilla-jp:Guide:Report:SecurityBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/SecurityBugs -/ja/docs/Bugzilla-jp:Guide:Report:UIBugs /ja/docs/orphaned/Bugzilla-jp/Guide/Report/UIBugs -/ja/docs/Bugzilla-jp:Guide:Search /ja/docs/orphaned/Bugzilla-jp/Guide/Search -/ja/docs/Bugzilla-jp:Guide:Search:Advanced /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Advanced -/ja/docs/Bugzilla-jp:Guide:Search:Hints /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Hints -/ja/docs/Bugzilla-jp:Guide:Search:Simple /ja/docs/orphaned/Bugzilla-jp/Guide/Search/Simple -/ja/docs/Bugzilla-jp:Guide:Tracking /ja/docs/orphaned/Bugzilla-jp/Guide/Tracking /ja/docs/Bugzilla_(external) https://bugzilla.mozilla.org/enter_bug.cgi?format=guided /ja/docs/Building_a_Mozilla_Distribution /ja/docs/orphaned/Building_a_Mozilla_Distribution /ja/docs/Building_an_Extension /ja/docs/Mozilla/Add-ons @@ -253,7 +175,6 @@ /ja/docs/CSS/-moz-transform /ja/docs/Web/CSS/transform /ja/docs/CSS/-moz-transform-origin /ja/docs/Web/CSS/transform-origin /ja/docs/CSS/-moz-user-input /ja/docs/Web/CSS/-moz-user-input -/ja/docs/CSS/:-moz-alt-text /ja/docs/orphaned/Web/CSS/:-moz-alt-text /ja/docs/CSS/:-moz-broken /ja/docs/Web/CSS/:-moz-broken /ja/docs/CSS/:-moz-drag-over /ja/docs/Web/CSS/:-moz-drag-over /ja/docs/CSS/:-moz-first-node /ja/docs/Web/CSS/:-moz-first-node @@ -607,7 +528,6 @@ /ja/docs/CSS:-moz-background-inline-policy /ja/docs/Web/CSS/box-decoration-break /ja/docs/CSS:-moz-background-origin /ja/docs/Web/CSS/background-origin /ja/docs/CSS:-moz-user-input /ja/docs/Web/CSS/-moz-user-input -/ja/docs/CSS::-moz-alt-text /ja/docs/orphaned/Web/CSS/:-moz-alt-text /ja/docs/CSS::-moz-broken /ja/docs/Web/CSS/:-moz-broken /ja/docs/CSS::-moz-drag-over /ja/docs/Web/CSS/:-moz-drag-over /ja/docs/CSS::-moz-first-node /ja/docs/Web/CSS/:-moz-first-node @@ -648,7 +568,6 @@ /ja/docs/Chrome /ja/docs/Glossary/Chrome /ja/docs/Code_snippets/Toolbar /ja/docs/orphaned/Code_snippets/Toolbar /ja/docs/Code_snippets:Toolbar /ja/docs/orphaned/Code_snippets/Toolbar -/ja/docs/Components /ja/docs/orphaned/Components /ja/docs/Controlling_DNS_prefetching /ja/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control /ja/docs/Controlling_spell_checking_in_HTML_forms /ja/docs/Web/HTML/Global_attributes/spellcheck /ja/docs/Core_JavaScript_1.5_Guide /ja/docs/Web/JavaScript/Guide @@ -731,7 +650,6 @@ /ja/docs/Core_JavaScript_1.5_Guide:Predefined_Functions /ja/docs/orphaned/Web/JavaScript/Guide/Predefined_Functions /ja/docs/Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions /ja/docs/orphaned/Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions /ja/docs/Core_JavaScript_1.5_Guide:Predefined_Functions:eval_Function /ja/docs/orphaned/Web/JavaScript/Guide/Predefined_Functions/eval_Function -/ja/docs/Core_JavaScript_1.5_Guide:Processing_XML_with_E4X /ja/docs/orphaned/E4X/Processing_XML_with_E4X /ja/docs/Core_JavaScript_1.5_Guide:Regular_Expressions /ja/docs/Web/JavaScript/Guide/Regular_Expressions /ja/docs/Core_JavaScript_1.5_Guide:Statements /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /ja/docs/Core_JavaScript_1.5_Guide:The_Employee_Example /ja/docs/orphaned/Web/JavaScript/Guide/The_Employee_Example @@ -963,7 +881,7 @@ /ja/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/function_Operator /ja/docs/Web/JavaScript/Reference/Operators/function /ja/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator /ja/docs/Web/JavaScript/Reference/Operators/new /ja/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator /ja/docs/Web/JavaScript/Reference/Operators/this -/ja/docs/Core_JavaScript_1.5_Reference/Reserved_Words /ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/ja/docs/Core_JavaScript_1.5_Reference/Reserved_Words /ja/docs/Web/JavaScript/Reference/Lexical_grammar /ja/docs/Core_JavaScript_1.5_Reference/Statements /ja/docs/Web/JavaScript/Reference/Statements /ja/docs/Core_JavaScript_1.5_Reference/Statements/block /ja/docs/Web/JavaScript/Reference/Statements/block /ja/docs/Core_JavaScript_1.5_Reference/Statements/break /ja/docs/Web/JavaScript/Reference/Statements/break @@ -1160,7 +1078,7 @@ /ja/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:function_Operator /ja/docs/Web/JavaScript/Reference/Operators/function /ja/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:new_Operator /ja/docs/Web/JavaScript/Reference/Operators/new /ja/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:this_Operator /ja/docs/Web/JavaScript/Reference/Operators/this -/ja/docs/Core_JavaScript_1.5_Reference:Reserved_Words /ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/ja/docs/Core_JavaScript_1.5_Reference:Reserved_Words /ja/docs/Web/JavaScript/Reference/Lexical_grammar /ja/docs/Core_JavaScript_1.5_Reference:Statements /ja/docs/Web/JavaScript/Reference/Statements /ja/docs/Core_JavaScript_1.5_Reference:Statements:block /ja/docs/Web/JavaScript/Reference/Statements/block /ja/docs/Core_JavaScript_1.5_Reference:Statements:break /ja/docs/Web/JavaScript/Reference/Statements/break @@ -1472,7 +1390,7 @@ /ja/docs/DOM/event /ja/docs/Web/API/Event /ja/docs/DOM/event.altKey /ja/docs/Web/API/MouseEvent/altKey /ja/docs/DOM/event.bubbles /ja/docs/Web/API/Event/bubbles -/ja/docs/DOM/event.button /ja/docs/conflicting/Web/API/MouseEvent/button +/ja/docs/DOM/event.button /ja/docs/Web/API/MouseEvent/button /ja/docs/DOM/event.cancelable /ja/docs/Web/API/Event/cancelable /ja/docs/DOM/event.initEvent /ja/docs/Web/API/Event/initEvent /ja/docs/DOM/event.preventDefault /ja/docs/Web/API/Event/preventDefault @@ -1749,7 +1667,7 @@ /ja/docs/DOM:event /ja/docs/Web/API/Event /ja/docs/DOM:event.altKey /ja/docs/Web/API/MouseEvent/altKey /ja/docs/DOM:event.bubbles /ja/docs/Web/API/Event/bubbles -/ja/docs/DOM:event.button /ja/docs/conflicting/Web/API/MouseEvent/button +/ja/docs/DOM:event.button /ja/docs/Web/API/MouseEvent/button /ja/docs/DOM:event.cancelable /ja/docs/Web/API/Event/cancelable /ja/docs/DOM:event.initEvent /ja/docs/Web/API/Event/initEvent /ja/docs/DOM:event.preventDefault /ja/docs/Web/API/Event/preventDefault @@ -1907,7 +1825,6 @@ /ja/docs/Drawing_Graphics_with_Canvas /ja/docs/Web/API/Canvas_API/Tutorial /ja/docs/Drawing_text_using_a_canvas /ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text /ja/docs/Dynamically_modifying_XUL-based_user_interface /ja/docs/orphaned/Dynamically_modifying_XUL-based_user_interface -/ja/docs/E4X/Processing_XML_with_E4X /ja/docs/orphaned/E4X/Processing_XML_with_E4X /ja/docs/ECMA-262 /ja/docs/Web/JavaScript/Language_Resources /ja/docs/ECMAScript /ja/docs/Web/JavaScript/Language_Resources /ja/docs/EXSLT /ja/docs/Web/EXSLT @@ -1975,10 +1892,8 @@ /ja/docs/Glossary/Constant(定数) /ja/docs/Glossary/Constant /ja/docs/Glossary/Constant（定数） /ja/docs/Glossary/Constant /ja/docs/Glossary/DTD /ja/docs/Glossary/Doctype -/ja/docs/Glossary/Gaia /ja/docs/orphaned/Glossary/Gaia /ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes /ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header -/ja/docs/Glossary/Modern_web_apps /ja/docs/orphaned/Glossary/Modern_web_apps /ja/docs/Glossary/POP3 /ja/docs/Glossary/POP /ja/docs/Glossary/SSL_Glossary /ja/docs/Glossary/SSL /ja/docs/Glossary/Signature/セキュリティ /ja/docs/Glossary/Signature/Security @@ -2172,7 +2087,6 @@ /ja/docs/HTML/HTML_Elements/strong /ja/docs/Web/HTML/Element/strong /ja/docs/HTML/HTML_Elements/title /ja/docs/Web/HTML/Element/title /ja/docs/HTML/HTML_Elements/var /ja/docs/Web/HTML/Element/var -/ja/docs/HTML/HTML_Extensions /ja/docs/orphaned/Web/HTML/HTML_Extensions /ja/docs/HTML/Inline_elements /ja/docs/Web/HTML/Inline_elements /ja/docs/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 @@ -2187,7 +2101,6 @@ /ja/docs/HTML:Inline_elements /ja/docs/Web/HTML/Inline_elements /ja/docs/HTMLSpanElement /ja/docs/Web/API/HTMLSpanElement /ja/docs/HTMLSpanElement_interface /ja/docs/Web/API/HTMLSpanElement -/ja/docs/HTML_Element_Cross_Reference /ja/docs/orphaned/HTML_Element_Cross_Reference /ja/docs/HTML_in_XMLHttpRequest /ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest /ja/docs/HTTP /ja/docs/Web/HTTP /ja/docs/HTTP/HTTP_response_codes /ja/docs/Web/HTTP/Status @@ -2669,7 +2582,7 @@ /ja/docs/JavaScript/Reference/Operators2/Special_Operators/new_Operator /ja/docs/Web/JavaScript/Reference/Operators/new /ja/docs/JavaScript/Reference/Operators2/Special_Operators/this_Operator /ja/docs/Web/JavaScript/Reference/Operators/this /ja/docs/JavaScript/Reference/Operators2/Special_Operators/typeof_Operator /ja/docs/Web/JavaScript/Reference/Operators/typeof -/ja/docs/JavaScript/Reference/Reserved_Words /ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/ja/docs/JavaScript/Reference/Reserved_Words /ja/docs/Web/JavaScript/Reference/Lexical_grammar /ja/docs/JavaScript/Reference/Statements /ja/docs/Web/JavaScript/Reference/Statements /ja/docs/JavaScript/Reference/Statements/block /ja/docs/Web/JavaScript/Reference/Statements/block /ja/docs/JavaScript/Reference/Statements/break /ja/docs/Web/JavaScript/Reference/Statements/break @@ -2719,8 +2632,6 @@ /ja/docs/JavaScript_typed_arrays /ja/docs/Web/JavaScript/Typed_arrays /ja/docs/JavaScript_技術の概要 /ja/docs/Web/JavaScript/JavaScript_technologies_overview /ja/docs/JavaScript_技術概説 /ja/docs/Web/JavaScript/JavaScript_technologies_overview -/ja/docs/Jetpack/UI/Slidebar /ja/docs/orphaned/Jetpack/UI/Slidebar -/ja/docs/Jetpack/システム /ja/docs/orphaned/Jetpack/システム /ja/docs/Key-navigable_custom_DHTML_widgets /ja/docs/orphaned/Key-navigable_custom_DHTML_widgets /ja/docs/Learn/CSS/Building_blocks/セレクタ /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps @@ -2820,22 +2731,6 @@ /ja/docs/MDN/Contribute/Guidelines/Editorial /ja/docs/MDN/Guidelines/Editorial /ja/docs/MDN/Contribute/Guidelines/Video /ja/docs/MDN/Guidelines/Video /ja/docs/MDN/Contribute/Guidelines/Writing_style_guide /ja/docs/MDN/Guidelines/Writing_style_guide -/ja/docs/MDN/Contribute/Howto/Create_an_MDN_account /ja/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/ja/docs/MDN/Contribute/Howto/Create_learning_pathways /ja/docs/orphaned/MDN/Contribute/Howto/Create_learning_pathways -/ja/docs/MDN/Contribute/Howto/Do_a_technical_review /ja/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/ja/docs/MDN/Contribute/Howto/Do_an_editorial_review /ja/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/ja/docs/MDN/Contribute/Howto/Remove__Experimental__Macros /ja/docs/orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros -/ja/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request /ja/docs/orphaned/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request -/ja/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /ja/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/ja/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /ja/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/ja/docs/MDN/Contribute/Howto/Use_navigation_sidebars /ja/docs/orphaned/MDN/Contribute/Howto/Use_navigation_sidebars -/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /ja/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -/ja/docs/MDN/Contribute/Howto/Write_interface_reference_documentation /ja/docs/orphaned/MDN/Contribute/Howto/Write_interface_reference_documentation -/ja/docs/MDN/Contribute/Howto/テクニカルレビューを行うには /ja/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/ja/docs/MDN/Contribute/Onboarding /ja/docs/orphaned/MDN/Contribute/Onboarding -/ja/docs/MDN/Contribute/Processes/Browser_information_resources /ja/docs/orphaned/MDN/Contribute/Processes/Browser_information_resources -/ja/docs/MDN/Contribute/Processes/Cross-team_collaboration_tactics /ja/docs/orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics -/ja/docs/MDN/Contribute/Processes/Requesting_elevated_privileges /ja/docs/orphaned/MDN/Contribute/Processes/Requesting_elevated_privileges /ja/docs/MDN/Contribute/Structures /ja/docs/MDN/Structures /ja/docs/MDN/Contribute/Structures/API_references /ja/docs/orphaned/MDN/Structures/API_references /ja/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars /ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars @@ -2860,19 +2755,10 @@ /ja/docs/MDN/Contribute/Structures/Syntax_sections /ja/docs/MDN/Structures/Syntax_sections /ja/docs/MDN/Contribute/Structures/マクロ /ja/docs/MDN/Structures/Macros /ja/docs/MDN/Contribute/Tools /ja/docs/MDN/Tools -/ja/docs/MDN/Contribute/Tools/Add-ons_and_plug-ins /ja/docs/orphaned/MDN/Tools/Add-ons_and_plug-ins /ja/docs/MDN/Contribute/Tools/Document_parameters /ja/docs/MDN/Tools/Unsupported_GET_API -/ja/docs/MDN/Contribute/Tools/Feeds /ja/docs/orphaned/MDN/Tools/Feeds /ja/docs/MDN/Contribute/Tools/KumaScript /ja/docs/MDN/Tools/KumaScript /ja/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting /ja/docs/MDN/Tools/KumaScript/Troubleshooting -/ja/docs/MDN/Contribute/Tools/PUT_API /ja/docs/orphaned/MDN/Tools/PUT_API -/ja/docs/MDN/Contribute/Tools/Page_deletion /ja/docs/orphaned/MDN/Tools/Page_deletion -/ja/docs/MDN/Contribute/Tools/Page_moving /ja/docs/orphaned/MDN/Tools/Page_moving -/ja/docs/MDN/Contribute/Tools/Page_regeneration /ja/docs/orphaned/MDN/Tools/Page_regeneration -/ja/docs/MDN/Contribute/Tools/Page_watching /ja/docs/orphaned/MDN/Tools/Page_watching /ja/docs/MDN/Contribute/Tools/Sample_server /ja/docs/MDN/Tools/Sample_server -/ja/docs/MDN/Contribute/Tools/Search /ja/docs/orphaned/MDN/Tools/Search -/ja/docs/MDN/Contribute/Tools/Template_editing /ja/docs/orphaned/MDN/Tools/Template_editing /ja/docs/MDN/Contribute/Troubleshooting /ja/docs/orphaned/MDN/Troubleshooting /ja/docs/MDN/Dashboards /ja/docs/orphaned/MDN/Dashboards /ja/docs/MDN/Dashboards/Editors /ja/docs/orphaned/MDN/Dashboards/Editors @@ -2885,20 +2771,9 @@ /ja/docs/MDN/Structures/API_references/What_does_an_API_reference_need /ja/docs/orphaned/MDN/Structures/API_references/What_does_an_API_reference_need /ja/docs/MDN/Structures/Live_samples/Simple_live_sample_demo /ja/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo /ja/docs/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages -/ja/docs/MDN/Tools/Add-ons_and_plug-ins /ja/docs/orphaned/MDN/Tools/Add-ons_and_plug-ins /ja/docs/MDN/Tools/Document_parameters /ja/docs/MDN/Tools/Unsupported_GET_API -/ja/docs/MDN/Tools/Feeds /ja/docs/orphaned/MDN/Tools/Feeds -/ja/docs/MDN/Tools/PUT_API /ja/docs/orphaned/MDN/Tools/PUT_API -/ja/docs/MDN/Tools/Page_deletion /ja/docs/orphaned/MDN/Tools/Page_deletion -/ja/docs/MDN/Tools/Page_moving /ja/docs/orphaned/MDN/Tools/Page_moving -/ja/docs/MDN/Tools/Page_regeneration /ja/docs/orphaned/MDN/Tools/Page_regeneration -/ja/docs/MDN/Tools/Page_watching /ja/docs/orphaned/MDN/Tools/Page_watching -/ja/docs/MDN/Tools/Search /ja/docs/orphaned/MDN/Tools/Search -/ja/docs/MDN/Tools/Template_editing /ja/docs/orphaned/MDN/Tools/Template_editing /ja/docs/MDN/Troubleshooting /ja/docs/orphaned/MDN/Troubleshooting /ja/docs/MDN/User_guide /ja/docs/MDN/Tools -/ja/docs/MDN/User_guide/Advanced_search /ja/docs/orphaned/MDN/Tools/Search -/ja/docs/MDN/User_guide/Deleting_pages /ja/docs/orphaned/MDN/Tools/Page_deletion /ja/docs/MDN/User_guide/Linking_to_MDN /ja/docs/orphaned/MDN/About/Linking_to_MDN /ja/docs/MDN_at_ten /ja/docs/MDN/At_ten /ja/docs/MDN_at_ten/Contributing_to_MDN /ja/docs/MDN/Contribute @@ -2918,9 +2793,6 @@ /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/tabId /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels -/ja/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation /ja/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -/ja/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome /ja/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -/ja/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension /ja/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ /ja/docs/Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 /ja/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird /ja/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs /ja/docs/Mozilla/Add-ons/WebExtensions/API /ja/docs/Mozilla/Add-ons/WebExtensions/Walkthrough /ja/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension @@ -3085,13 +2957,12 @@ /ja/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples /ja/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions /ja/docs/Tools/Page_Inspector/Keyboard_shortcuts /ja/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts /ja/docs/Tools/Page_Inspector/Style_panel /ja/docs/Tools/Page_Inspector -/ja/docs/Tools/Performance/Profiler_walkthrough /ja/docs/conflicting/Tools/Performance/Call_Tree +/ja/docs/Tools/Performance/Profiler_walkthrough /ja/docs/Tools/Performance/Call_Tree /ja/docs/Tools/Profiler /ja/docs/conflicting/Tools/Performance /ja/docs/Tools/Release_notes /ja/docs/Mozilla/Firefox/Releases /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE /ja/docs/Tools/Responsive_Design_Mode_(before_Firefox_52) /ja/docs/Tools/Responsive_Design_Mode /ja/docs/Tools/Responsive_Design_View /ja/docs/Tools/Responsive_Design_Mode -/ja/docs/Tools/Using_the_Source_Editor /ja/docs/conflicting/tools/Keyboard_shortcuts /ja/docs/Tools/Web_Console-redirect-1 /ja/docs/Tools/Web_Console /ja/docs/Tools/Web_Console/Keyboard_shortcuts /ja/docs/orphaned/Tools/Web_Console/Keyboard_shortcuts /ja/docs/Tools/Web_Console/Opening_the_Web_Console /ja/docs/Tools/Web_Console/UI_Tour @@ -3107,7 +2978,7 @@ /ja/docs/Updating_extensions_for_Firefox_3 /ja/docs/Mozilla/Firefox/Releases/3/Updating_extensions /ja/docs/Updating_extensions_for_Firefox_3.1 /ja/docs/Mozilla/Firefox/Releases/3.5/Updating_extensions /ja/docs/Updating_web_applications_for_Firefox_3 /ja/docs/Mozilla/Firefox/Releases/3/Updating_web_applications -/ja/docs/User_Agent_Strings_Reference /ja/docs/conflicting/Web/HTTP/Headers/User-Agent/Firefox +/ja/docs/User_Agent_Strings_Reference /ja/docs/Web/HTTP/Headers/User-Agent/Firefox /ja/docs/Using_Firefox_1.5_caching /ja/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching /ja/docs/Using_HTML5_audio_and_video /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /ja/docs/Using_HTML5_audio_and_video-redirect-1 /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content @@ -3184,14 +3055,6 @@ /ja/docs/Web/API/AudioContext/onstatechange /ja/docs/Web/API/BaseAudioContext/onstatechange /ja/docs/Web/API/AudioContext/sampleRate /ja/docs/Web/API/BaseAudioContext/sampleRate /ja/docs/Web/API/AudioContext/state /ja/docs/Web/API/BaseAudioContext/state -/ja/docs/Web/API/Body /ja/docs/orphaned/Web/API/Body -/ja/docs/Web/API/Body/arrayBuffer /ja/docs/orphaned/Web/API/Body/arrayBuffer -/ja/docs/Web/API/Body/blob /ja/docs/orphaned/Web/API/Body/blob -/ja/docs/Web/API/Body/body /ja/docs/orphaned/Web/API/Body/body -/ja/docs/Web/API/Body/bodyUsed /ja/docs/orphaned/Web/API/Body/bodyUsed -/ja/docs/Web/API/Body/formData /ja/docs/orphaned/Web/API/Body/formData -/ja/docs/Web/API/Body/json /ja/docs/orphaned/Web/API/Body/json -/ja/docs/Web/API/Body/text /ja/docs/orphaned/Web/API/Body/text /ja/docs/Web/API/Boolean /ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean /ja/docs/Web/API/CSSMatrix /ja/docs/Web/API/DOMMatrix /ja/docs/Web/API/CSSStyleSheet.insertRule /ja/docs/Web/API/CSSStyleSheet/insertRule @@ -3201,16 +3064,9 @@ /ja/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded /ja/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded /ja/docs/Web/API/CanvasRenderingContext2D.removeHitRegion /ja/docs/Web/API/CanvasRenderingContext2D/removeHitRegion /ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial -/ja/docs/Web/API/ChildNode /ja/docs/orphaned/Web/API/ChildNode -/ja/docs/Web/API/ChildNode/before /ja/docs/orphaned/Web/API/ChildNode/before -/ja/docs/Web/API/ChildNode/replaceWith /ja/docs/orphaned/Web/API/ChildNode/replaceWith /ja/docs/Web/API/Console.error /ja/docs/Web/API/Console/error /ja/docs/Web/API/Coordinates /ja/docs/Web/API/GeolocationCoordinates -/ja/docs/Web/API/DOMLocator /ja/docs/orphaned/Web/API/DOMLocator /ja/docs/Web/API/DeviceAcceleration /ja/docs/Web/API/DeviceMotionEventAcceleration -/ja/docs/Web/API/DeviceProximityEvent/max /ja/docs/orphaned/Web/API/DeviceProximityEvent/max -/ja/docs/Web/API/DeviceProximityEvent/min /ja/docs/orphaned/Web/API/DeviceProximityEvent/min -/ja/docs/Web/API/DeviceProximityEvent/value /ja/docs/orphaned/Web/API/DeviceProximityEvent/value /ja/docs/Web/API/Document.domConfig /ja/docs/Web/API/Document /ja/docs/Web/API/Document/async /ja/docs/Web/API/XMLDocument/async /ja/docs/Web/API/Document/defaultView/storage_event /ja/docs/Web/API/Window/storage_event @@ -3234,9 +3090,8 @@ /ja/docs/Web/API/Element.querySelectorAll /ja/docs/Web/API/Element/querySelectorAll /ja/docs/Web/API/Element/Activate_event /ja/docs/Web/API/Element/DOMActivate_event /ja/docs/Web/API/Element/accessKey /ja/docs/Web/API/HTMLElement/accessKey -/ja/docs/Web/API/Element/currentStyle /ja/docs/orphaned/Web/API/Element/currentStyle /ja/docs/Web/API/Element/name /ja/docs/conflicting/Web/API -/ja/docs/Web/API/Event/button /ja/docs/conflicting/Web/API/MouseEvent/button +/ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/Web/API/EventHandler /ja/docs/orphaned/Web/Guide/Events/Event_handlers /ja/docs/Web/API/EventTarget.addEventListener /ja/docs/Web/API/EventTarget/addEventListener @@ -3258,7 +3113,6 @@ /ja/docs/Web/API/Geolocation/Using_geolocation /ja/docs/Web/API/Geolocation_API /ja/docs/Web/API/GlobalFetch /en-US/docs/Web/API/WindowOrWorkerGlobalScope /ja/docs/Web/API/GlobalFetch/fetch /ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch -/ja/docs/Web/API/HTMLElement/forceSpellCheck /ja/docs/orphaned/Web/API/HTMLElement/forceSpellCheck /ja/docs/Web/API/HTMLFormElement.acceptCharset /ja/docs/Web/API/HTMLFormElement/acceptCharset /ja/docs/Web/API/HTMLFormElement.action /ja/docs/Web/API/HTMLFormElement/action /ja/docs/Web/API/HTMLFormElement.elements /ja/docs/Web/API/HTMLFormElement/elements @@ -3316,8 +3170,6 @@ /ja/docs/Web/API/IDBFactory.deleteDatabase /ja/docs/Web/API/IDBFactory/deleteDatabase /ja/docs/Web/API/IDBFactory.open /ja/docs/Web/API/IDBFactory/open /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -/ja/docs/Web/API/LinkStyle /ja/docs/orphaned/Web/API/LinkStyle -/ja/docs/Web/API/LocalMediaStream /ja/docs/orphaned/Web/API/LocalMediaStream /ja/docs/Web/API/MediaRecorder_API /ja/docs/Web/API/MediaStream_Recording_API /ja/docs/Web/API/Navigator.getUserMedia /ja/docs/Web/API/Navigator/getUserMedia /ja/docs/Web/API/Navigator/registerContentHandler /ja/docs/orphaned/Web/API/Navigator/registerContentHandler @@ -3763,7 +3615,6 @@ /ja/docs/Web/CSS/-moz-zoom-out /ja/docs/Web/CSS/cursor /ja/docs/Web/CSS/-ms-high-contrast /ja/docs/Web/CSS/@media/-ms-high-contrast /ja/docs/Web/CSS/-ms-scroll-snap-type /ja/docs/Web/CSS/scroll-snap-type -/ja/docs/Web/CSS/:-moz-alt-text /ja/docs/orphaned/Web/CSS/:-moz-alt-text /ja/docs/Web/CSS/:-moz-placeholder /ja/docs/Web/CSS/:placeholder-shown /ja/docs/Web/CSS/:-ms-input-placeholder /ja/docs/Web/CSS/:placeholder-shown /ja/docs/Web/CSS/:-webkit-autofill /ja/docs/Web/CSS/:autofill @@ -4068,7 +3919,7 @@ /ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas /ja/docs/Web/Guide/HTML/Canvas_tutorial/Transformations /ja/docs/Web/API/Canvas_API/Tutorial/Transformations /ja/docs/Web/Guide/HTML/Canvas_tutorial/Using_images /ja/docs/Web/API/Canvas_API/Tutorial/Using_images -/ja/docs/Web/Guide/HTML/Event_attributes /ja/docs/conflicting/Learn/JavaScript/Building_blocks/Events +/ja/docs/Web/Guide/HTML/Event_attributes /ja/docs/Learn/JavaScript/Building_blocks/Events /ja/docs/Web/Guide/HTML/Forms /ja/docs/Learn/Forms /ja/docs/Web/Guide/HTML/Forms/Data_form_validation /ja/docs/Learn/Forms/Form_validation /ja/docs/Web/Guide/HTML/Forms/HTML_forms_in_legacy_browsers /ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers @@ -4146,7 +3997,6 @@ /ja/docs/Web/HTML/Forms/Styling_HTML_forms /ja/docs/Learn/Forms/Styling_web_forms /ja/docs/Web/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls /ja/docs/Web/HTML/Forms_in_HTML /ja/docs/Learn/Forms/HTML5_input_types -/ja/docs/Web/HTML/Global_attributes/dropzone /ja/docs/orphaned/Web/HTML/Global_attributes/dropzone /ja/docs/Web/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/Web/HTML/HTML5/Constraint_validation /ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation /ja/docs/Web/HTML/HTML5/Forms_in_HTML5 /ja/docs/Learn/Forms/HTML5_input_types @@ -4194,7 +4044,6 @@ /ja/docs/Web/HTML/HTML_Elements/strong /ja/docs/Web/HTML/Element/strong /ja/docs/Web/HTML/HTML_Elements/title /ja/docs/Web/HTML/Element/title /ja/docs/Web/HTML/HTML_Elements/var /ja/docs/Web/HTML/Element/var -/ja/docs/Web/HTML/HTML_Extensions /ja/docs/orphaned/Web/HTML/HTML_Extensions /ja/docs/Web/HTML/Introduction /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web/HTML/Introduction_to_HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /ja/docs/Glossary/speculative_parsing @@ -4428,10 +4277,10 @@ /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/clear /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet -/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype /ja/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module -/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype /ja/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table /ja/docs/Web/JavaScript/Reference/Global_Properties /ja/docs/Web/JavaScript/Reference/Global_Objects /ja/docs/Web/JavaScript/Reference/Global_Properties/Infinity /ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity /ja/docs/Web/JavaScript/Reference/Global_Properties/NaN /ja/docs/Web/JavaScript/Reference/Global_Objects/NaN @@ -4460,7 +4309,7 @@ /ja/docs/Web/JavaScript/Reference/Operators/Spread_operator /ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax /ja/docs/Web/JavaScript/Reference/Operators/get /ja/docs/Web/JavaScript/Reference/Functions/get /ja/docs/Web/JavaScript/Reference/Properties_Index /ja/docs/Web/JavaScript/Reference -/ja/docs/Web/JavaScript/Reference/Reserved_Words /ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/ja/docs/Web/JavaScript/Reference/Reserved_Words /ja/docs/Web/JavaScript/Reference/Lexical_grammar /ja/docs/Web/JavaScript/Reference/Statements/default /ja/docs/Web/JavaScript/Reference/Statements/switch /ja/docs/Web/JavaScript/Reference/Statements/yield /ja/docs/Web/JavaScript/Reference/Operators/yield /ja/docs/Web/JavaScript/Reference/arrow_functions /ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions @@ -4621,9 +4470,8 @@ /ja/docs/WebSockets-840092-dup/Writing_WebSocket_servers /ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers /ja/docs/WebSockets/WebSockets_reference /ja/docs/Web/API/WebSockets_API /ja/docs/WebSockets/Writing_WebSocket_client_applications /ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications -/ja/docs/Web_Content_Accessibility_Guidelines_1.0 /ja/docs/orphaned/Web_Content_Accessibility_Guidelines_1.0 /ja/docs/Web_Developer_Extension_(external) https://addons.mozilla.org/ja/firefox/addon/60 -/ja/docs/Web_Development /ja/docs/conflicting/Web/Guide +/ja/docs/Web_Development /ja/docs/Web/Guide /ja/docs/Web_Development/Historical_artifacts_to_avoid /ja/docs/Learn/HTML/Introduction_to_HTML /ja/docs/Web_Development/Introduction_to_Web_development /ja/docs/Web/Guide/Introduction_to_Web_development /ja/docs/Web_Development/Mobile /ja/docs/Web/Guide/Mobile @@ -4803,7 +4651,7 @@ /ja/docs/XSLT_in_Gecko:Generating_HTML /ja/docs/Web/API/XSLTProcessor/Generating_HTML /ja/docs/XSLT_in_Gecko:Introduction /ja/docs/Web/API/XSLTProcessor/Introduction /ja/docs/XSLT_in_Gecko:Resources /ja/docs/Web/API/XSLTProcessor/Resources -/ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide /ja/docs/orphaned/addons.mozilla.org_(AMO)_API_Developers'_Guide +/ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide /ja/docs/Mozilla/Add-ons /ja/docs/ant_script_to_assemble_an_extension /ja/docs/orphaned/ant_script_to_assemble_an_extension /ja/docs/console /ja/docs/Web/API/console /ja/docs/counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters @@ -5053,7 +4901,7 @@ /ja/docs/dummySlug/Reference/Operators/this /ja/docs/Web/JavaScript/Reference/Operators/this /ja/docs/dummySlug/Reference/Operators/typeof /ja/docs/Web/JavaScript/Reference/Operators/typeof /ja/docs/dummySlug/Reference/Operators/void /ja/docs/Web/JavaScript/Reference/Operators/void -/ja/docs/dummySlug/Reference/Reserved_Words /ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/ja/docs/dummySlug/Reference/Reserved_Words /ja/docs/Web/JavaScript/Reference/Lexical_grammar /ja/docs/dummySlug/Reference/Statements /ja/docs/Web/JavaScript/Reference/Statements /ja/docs/dummySlug/Reference/Statements/block /ja/docs/Web/JavaScript/Reference/Statements/block /ja/docs/dummySlug/Reference/Statements/break /ja/docs/Web/JavaScript/Reference/Statements/break diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index b3613c33d5..cc8248c8af 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -13613,6 +13613,13 @@ "Okome" ] }, + "Web/API/Element/before": { + "modified": "2020-10-17T03:58:22.731Z", + "contributors": [ + "Potappo", + "Shirasu" + ] + }, "Web/API/Element/blur_event": { "modified": "2020-10-15T21:58:39.988Z", "contributors": [ @@ -14142,6 +14149,13 @@ "Mgjbot" ] }, + "Web/API/Element/replaceWith": { + "modified": "2020-10-17T04:41:48.425Z", + "contributors": [ + "Potappo", + "Shirasu" + ] + }, "Web/API/Element/requestFullScreen": { "modified": "2019-06-03T03:04:44.040Z", "contributors": [ @@ -21014,24 +21028,78 @@ "jack-low" ] }, + "Web/API/Response/arrayBuffer": { + "modified": "2020-10-15T21:43:16.481Z", + "contributors": [ + "Wind1808", + "woodmix", + "YuichiNukiyama" + ] + }, + "Web/API/Response/blob": { + "modified": "2020-10-15T21:47:35.044Z", + "contributors": [ + "Wind1808", + "woodmix", + "YuichiNukiyama" + ] + }, + "Web/API/Response/body": { + "modified": "2020-10-15T22:25:57.301Z", + "contributors": [ + "Wind1808" + ] + }, + "Web/API/Response/bodyUsed": { + "modified": "2020-10-15T21:42:42.306Z", + "contributors": [ + "Wind1808", + "YuichiNukiyama" + ] + }, "Web/API/Response/error": { "modified": "2020-10-15T22:31:34.288Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/formData": { + "modified": "2020-10-15T21:43:16.713Z", + "contributors": [ + "Wind1808", + "YuichiNukiyama" + ] + }, "Web/API/Response/headers": { "modified": "2020-10-15T22:32:37.063Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/json": { + "modified": "2020-10-15T21:43:16.571Z", + "contributors": [ + "Wind1808", + "mfuji09", + "woodmix", + "YuichiNukiyama" + ] + }, "Web/API/Response/redirect": { "modified": "2020-10-15T22:31:37.239Z", "contributors": [ "eltociear" ] }, + "Web/API/Response/text": { + "modified": "2020-10-15T21:43:16.444Z", + "contributors": [ + "Wind1808", + "Uemmra3", + "woodmix", + "YuichiNukiyama" + ] + }, "Web/API/SVGElement": { "modified": "2020-10-15T21:57:52.067Z", "contributors": [ @@ -48393,15 +48461,6 @@ "silverskyvicto" ] }, - "conflicting/Learn/JavaScript/Building_blocks/Events": { - "modified": "2019-11-20T21:35:36.010Z", - "contributors": [ - "wbamberg", - "dskmori", - "yamaguchi-takayuki", - "mikamikuh" - ] - }, "conflicting/MDN/Yari": { "modified": "2020-08-13T21:26:07.304Z", "contributors": [ @@ -48425,13 +48484,6 @@ "yyss" ] }, - "conflicting/Tools/Performance/Call_Tree": { - "modified": "2020-07-16T22:36:14.354Z", - "contributors": [ - "wbamberg", - "yyss" - ] - }, "conflicting/Web/API": { "modified": "2019-09-25T00:26:30.367Z", "contributors": [ @@ -48440,15 +48492,6 @@ "dextra" ] }, - "conflicting/Web/API/MouseEvent/button": { - "modified": "2019-03-23T23:48:11.013Z", - "contributors": [ - "fscholz", - "khalid32", - "Mgjbot", - "Luna8bit" - ] - }, "conflicting/Web/API/URL": { "modified": "2019-03-23T23:31:44.426Z", "contributors": [ @@ -48520,342 +48563,12 @@ "Shimono" ] }, - "conflicting/Web/Guide": { - "modified": "2020-05-04T11:57:57.814Z", - "contributors": [ - "Uemmra3", - "yyss", - "happysadman", - "Hfjapancom", - "Potappo", - "Level", - "kohei.yoshino", - "Mgjbot", - "Okome" - ] - }, - "conflicting/Web/HTTP/Headers/User-Agent/Firefox": { - "modified": "2019-03-23T23:58:03.561Z", - "contributors": [ - "ethertank", - "Potappo", - "Kohei" - ] - }, "conflicting/Web/HTTP/Headers/X-DNS-Prefetch-Control": { "modified": "2019-03-24T00:00:27.042Z", "contributors": [ "RobinEgg" ] }, - "conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { - "modified": "2020-10-15T21:58:31.243Z", - "contributors": [ - "ukyo" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { - "modified": "2020-10-15T21:58:31.479Z", - "contributors": [ - "ukyo" - ] - }, - "conflicting/Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2019-12-24T12:46:59.479Z", - "contributors": [ - "Kisaragi", - "teoli", - "ethertank", - "dextra", - "Potappo", - "Mgjbot", - "Yuichirou", - "electrolysis" - ] - }, - "conflicting/tools/Keyboard_shortcuts": { - "modified": "2020-07-16T22:34:03.446Z", - "contributors": [ - "wbamberg", - "yyss" - ] - }, - "orphaned/Bugzilla-ja": { - "modified": "2019-03-24T00:01:53.796Z", - "contributors": [ - "fscholz", - "Shimono", - "drry", - "Taken" - ] - }, - "orphaned/Bugzilla-ja/2.20-ja": { - "modified": "2019-01-16T15:57:55.816Z", - "contributors": [ - "Shimono" - ] - }, - "orphaned/Bugzilla-ja/3.0-ja": { - "modified": "2019-03-23T23:50:49.325Z", - "contributors": [ - "fscholz", - "Shimono" - ] - }, - "orphaned/Bugzilla-ja/l10n": { - "modified": "2019-01-16T14:42:11.445Z", - "contributors": [ - "Shimono" - ] - }, - "orphaned/Bugzilla-jp": { - "modified": "2019-01-16T15:51:58.702Z", - "contributors": [ - "Baffclan", - "Shimono", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide": { - "modified": "2019-03-23T23:46:39.501Z", - "contributors": [ - "yassan", - "Masayuki", - "Taken" - ] - }, - "orphaned/Bugzilla-jp/Guide/About": { - "modified": "2019-03-23T23:46:42.256Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/AccountCreation": { - "modified": "2019-03-23T23:46:34.570Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/BugDetails": { - "modified": "2019-03-23T23:46:48.723Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/ChangeAccountPrefs": { - "modified": "2019-03-23T23:46:32.418Z", - "contributors": [ - "yassan", - "ethertank", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/ProductsAndComponents": { - "modified": "2019-03-23T23:46:29.901Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/TrunkAndBranch": { - "modified": "2019-03-23T23:46:31.442Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/WhatIsBug": { - "modified": "2019-03-23T23:46:29.774Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/About/WhatIsBugzilla": { - "modified": "2019-01-16T16:02:00.656Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Comment": { - "modified": "2019-03-23T23:46:32.818Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Comment/LinkRules": { - "modified": "2019-03-23T23:46:34.176Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Contribute": { - "modified": "2019-01-16T16:01:12.088Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Grossary": { - "modified": "2019-03-23T23:46:37.485Z", - "contributors": [ - "yassan", - "trevorh", - "Masayuki", - "Shimono" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle": { - "modified": "2019-03-24T00:00:42.354Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle/Mozilla": { - "modified": "2019-01-16T15:34:15.290Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle/MozillaGumi": { - "modified": "2019-01-16T15:34:04.625Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle/QAMozilla": { - "modified": "2019-01-16T15:34:14.142Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle/WebStandard": { - "modified": "2019-01-16T15:34:09.199Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/LifeCycle/WebTools": { - "modified": "2019-03-23T23:53:07.266Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Management": { - "modified": "2019-03-23T23:46:32.893Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Management/DeleteAccount": { - "modified": "2019-03-23T23:46:38.078Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Management/StopAccount": { - "modified": "2019-01-16T16:01:11.778Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Management/UpgradeAccount": { - "modified": "2019-01-16T16:01:46.647Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report": { - "modified": "2019-03-23T23:46:44.227Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/CrashBugs": { - "modified": "2019-03-23T23:46:43.597Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/Enhancement": { - "modified": "2019-03-23T23:46:35.269Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/MemoryLeakBugs": { - "modified": "2019-01-16T16:01:49.322Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/RenderingBugs": { - "modified": "2019-01-16T14:55:24.293Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/SecurityBugs": { - "modified": "2019-01-16T16:02:19.512Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Report/UIBugs": { - "modified": "2019-01-16T16:01:51.726Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Search": { - "modified": "2019-03-23T23:46:30.066Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Search/Advanced": { - "modified": "2019-03-23T23:46:37.571Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Search/Hints": { - "modified": "2019-01-16T15:49:53.324Z", - "contributors": [ - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Search/Simple": { - "modified": "2019-03-23T23:46:34.827Z", - "contributors": [ - "yassan", - "ethertank", - "Masayuki" - ] - }, - "orphaned/Bugzilla-jp/Guide/Tracking": { - "modified": "2019-03-23T23:46:46.460Z", - "contributors": [ - "yassan", - "Masayuki" - ] - }, "orphaned/Building_a_Mozilla_Distribution": { "modified": "2019-03-23T23:49:07.062Z", "contributors": [ @@ -48871,14 +48584,6 @@ "Shimono" ] }, - "orphaned/Components": { - "modified": "2019-03-23T23:49:08.351Z", - "contributors": [ - "wbamberg", - "Mgjbot", - "Okome" - ] - }, "orphaned/Creating_toolbar_buttons": { "modified": "2019-03-23T23:41:54.024Z", "contributors": [ @@ -49108,1251 +48813,6 @@ "Taken" ] }, - "orphaned/DevNews/20070213": { - "modified": "2019-03-23T23:44:43.533Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070219": { - "modified": "2019-03-23T23:44:46.951Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070223": { - "modified": "2019-03-23T23:45:04.595Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070302": { - "modified": "2019-03-23T23:45:03.605Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070304": { - "modified": "2019-03-23T23:45:22.177Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070312": { - "modified": "2019-03-23T23:45:16.576Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070315": { - "modified": "2019-03-23T23:45:19.169Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070320": { - "modified": "2019-03-23T23:45:15.886Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070322": { - "modified": "2019-03-23T23:45:17.600Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070323": { - "modified": "2019-03-23T23:45:58.656Z", - "contributors": [ - "SphinxKnight", - "Taken" - ] - }, - "orphaned/DevNews/20070411": { - "modified": "2019-01-16T16:03:49.994Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070424": { - "modified": "2019-03-23T23:45:57.284Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070427": { - "modified": "2019-03-23T23:46:27.168Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070501": { - "modified": "2019-03-23T23:46:02.439Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070502": { - "modified": "2019-03-23T23:46:11.295Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070509": { - "modified": "2019-03-23T23:46:07.520Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070512": { - "modified": "2019-03-23T23:46:17.283Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070523": { - "modified": "2019-03-23T23:46:17.752Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070523-2": { - "modified": "2019-03-23T23:46:27.081Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070529": { - "modified": "2019-01-16T16:02:01.977Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070529-2": { - "modified": "2019-03-23T23:46:24.466Z", - "contributors": [ - "SphinxKnight", - "Taken" - ] - }, - "orphaned/DevNews/20070530": { - "modified": "2019-03-23T23:46:27.380Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070530-02": { - "modified": "2019-03-23T23:46:22.037Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070604": { - "modified": "2019-03-23T23:46:24.619Z", - "contributors": [ - "SphinxKnight", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070606": { - "modified": "2019-03-24T00:02:47.249Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Taken" - ] - }, - "orphaned/DevNews/20070606-2": { - "modified": "2019-03-23T23:46:39.627Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070626": { - "modified": "2019-03-23T23:46:42.327Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070628": { - "modified": "2019-01-16T16:00:48.431Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070702": { - "modified": "2019-03-23T23:47:01.106Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070710": { - "modified": "2019-03-23T23:46:57.982Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070717": { - "modified": "2019-03-24T00:02:45.220Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Taken", - "Shimono" - ] - }, - "orphaned/DevNews/20070718": { - "modified": "2019-03-18T21:16:12.903Z", - "contributors": [ - "SphinxKnight", - "Taken" - ] - }, - "orphaned/DevNews/20070719": { - "modified": "2019-03-23T23:47:27.402Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070730": { - "modified": "2019-03-23T23:47:25.355Z", - "contributors": [ - "SphinxKnight", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070801": { - "modified": "2019-03-23T23:47:24.394Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070803": { - "modified": "2019-03-23T23:48:55.350Z", - "contributors": [ - "SphinxKnight", - "Shoot", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20070808": { - "modified": "2019-01-16T15:54:57.102Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070910": { - "modified": "2019-03-23T23:48:12.720Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070913": { - "modified": "2019-03-23T23:48:22.226Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070918": { - "modified": "2019-03-23T23:48:53.553Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20070920": { - "modified": "2019-03-24T00:02:44.096Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Shimono", - "Taken" - ] - }, - "orphaned/DevNews/20071005": { - "modified": "2019-03-23T23:49:13.148Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071008": { - "modified": "2019-03-23T23:49:35.724Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071012": { - "modified": "2019-03-23T23:49:34.408Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071018": { - "modified": "2019-03-23T23:49:30.423Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071101": { - "modified": "2019-03-23T23:49:36.140Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071115": { - "modified": "2019-03-23T23:49:32.635Z", - "contributors": [ - "SphinxKnight", - "Shimono" - ] - }, - "orphaned/DevNews/20071126": { - "modified": "2019-03-23T23:49:37.696Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20071203": { - "modified": "2019-03-23T23:51:30.713Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20071210": { - "modified": "2019-03-23T23:51:34.554Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20071210-02": { - "modified": "2019-03-23T23:50:04.941Z", - "contributors": [ - "SphinxKnight", - "Shoot" - ] - }, - "orphaned/DevNews/20071211": { - "modified": "2019-03-23T23:50:09.683Z", - "contributors": [ - "SphinxKnight", - "Shoot" - ] - }, - "orphaned/DevNews/20071217": { - "modified": "2019-03-23T23:51:30.958Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20071218": { - "modified": "2019-03-24T00:02:42.956Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Shoot" - ] - }, - "orphaned/DevNews/20080107": { - "modified": "2019-03-24T00:02:50.869Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "fscholz", - "Potappo" - ] - }, - "orphaned/DevNews/20080115": { - "modified": "2019-03-23T23:51:30.494Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080122": { - "modified": "2019-03-23T23:51:31.437Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080129": { - "modified": "2019-03-23T23:52:05.671Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080205": { - "modified": "2019-03-23T23:51:27.128Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080207": { - "modified": "2019-03-23T23:51:26.458Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080207-2": { - "modified": "2019-03-23T23:51:29.219Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080212": { - "modified": "2019-03-23T23:51:35.365Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080219": { - "modified": "2019-03-24T00:02:30.321Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Potappo" - ] - }, - "orphaned/DevNews/20080226": { - "modified": "2019-03-23T23:51:53.381Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080304": { - "modified": "2019-03-23T23:51:59.049Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080310": { - "modified": "2019-03-24T00:02:47.052Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Potappo" - ] - }, - "orphaned/DevNews/20080311": { - "modified": "2019-03-24T00:02:32.507Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Potappo" - ] - }, - "orphaned/DevNews/20080318": { - "modified": "2019-03-23T23:52:13.043Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080325": { - "modified": "2019-03-23T23:52:12.885Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080401": { - "modified": "2019-03-23T23:52:19.249Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080408": { - "modified": "2019-03-24T00:02:49.244Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "fscholz", - "Potappo" - ] - }, - "orphaned/DevNews/20080415": { - "modified": "2019-03-23T23:52:26.961Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080422": { - "modified": "2019-03-23T23:52:30.355Z", - "contributors": [ - "SphinxKnight", - "Kozawa", - "Potappo" - ] - }, - "orphaned/DevNews/20080429": { - "modified": "2019-03-23T23:52:41.098Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080501": { - "modified": "2019-03-23T23:52:46.204Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080506": { - "modified": "2019-03-23T23:52:44.180Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080513": { - "modified": "2019-03-23T23:52:55.065Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080520": { - "modified": "2019-03-23T23:52:57.914Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080527": { - "modified": "2019-03-23T23:52:55.379Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080603": { - "modified": "2019-03-23T23:53:07.574Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080610": { - "modified": "2019-03-23T23:53:25.287Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080617": { - "modified": "2019-03-23T23:53:53.800Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080624": { - "modified": "2019-03-23T23:53:34.729Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080630": { - "modified": "2019-03-23T23:58:03.917Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080708": { - "modified": "2019-03-23T23:54:07.055Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080715": { - "modified": "2019-03-23T23:53:59.538Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080722": { - "modified": "2019-03-23T23:54:06.126Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080728": { - "modified": "2019-03-23T23:54:15.467Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080729": { - "modified": "2019-03-23T23:54:16.522Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080805": { - "modified": "2019-03-23T23:56:39.931Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080810": { - "modified": "2019-03-23T23:56:37.606Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080812": { - "modified": "2019-03-23T23:56:38.905Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080819": { - "modified": "2019-03-23T23:57:11.715Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080826": { - "modified": "2019-03-23T23:57:14.535Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080902": { - "modified": "2019-03-23T23:57:31.148Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080909": { - "modified": "2019-03-23T23:57:56.153Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20080916": { - "modified": "2019-03-23T23:58:00.696Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Marsf", - "Potappo" - ] - }, - "orphaned/DevNews/20080923": { - "modified": "2019-03-23T23:58:01.633Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080930": { - "modified": "2019-03-23T23:58:00.303Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20080930-2": { - "modified": "2019-03-23T23:58:00.520Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081007": { - "modified": "2019-03-23T23:58:06.051Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "yassan", - "Potappo" - ] - }, - "orphaned/DevNews/20081014": { - "modified": "2019-03-23T23:58:07.474Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20081021": { - "modified": "2019-03-23T23:58:46.194Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081028": { - "modified": "2019-03-23T23:58:39.179Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20081104": { - "modified": "2019-03-23T23:58:39.849Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081111": { - "modified": "2019-03-23T23:58:49.910Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081118": { - "modified": "2019-03-23T23:58:53.350Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081125": { - "modified": "2019-03-23T23:58:57.400Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081202": { - "modified": "2019-03-23T23:59:03.612Z", - "contributors": [ - "SphinxKnight", - "Potappo", - "Kozawa" - ] - }, - "orphaned/DevNews/20081209": { - "modified": "2019-03-23T23:58:58.371Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081216": { - "modified": "2019-03-23T23:59:06.000Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20081223": { - "modified": "2019-03-23T23:59:06.626Z", - "contributors": [ - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20090113": { - "modified": "2019-11-06T08:39:44.056Z", - "contributors": [ - "dlwe", - "SphinxKnight", - "Potappo" - ] - }, - "orphaned/DevNews/20090120": { - "modified": "2019-03-23T23:35:17.463Z", - "contributors": [ - "ethertank" - ] - }, - "orphaned/DevNews/20090310": { - "modified": "2019-03-23T23:59:32.415Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20090324": { - "modified": "2019-03-23T23:59:42.131Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Potappo" - ] - }, - "orphaned/DevNews/20090904": { - "modified": "2019-03-24T00:01:20.431Z", - "contributors": [ - "SphinxKnight", - "ethertank", - "Aminevsky" - ] - }, - "orphaned/Developing_Mozilla": { - "modified": "2019-03-23T23:52:45.793Z", - "contributors": [ - "Marsf", - "Mgjbot", - "Verruckt", - "Okome", - "Takenbot", - "Taken Bot", - "Shimono", - "Yama" - ] - }, - "orphaned/Developing_add-ons": { - "modified": "2019-03-24T00:01:40.871Z", - "contributors": [ - "Potappo", - "dynamis" - ] - }, - "orphaned/Dynamically_modifying_XUL-based_user_interface": { - "modified": "2019-03-23T23:47:34.731Z", - "contributors": [ - "teoli", - "Shoot" - ] - }, - "orphaned/E4X/Processing_XML_with_E4X": { - "modified": "2019-03-24T00:06:02.455Z", - "contributors": [ - "wbamberg", - "yyss", - "Wladimir_Palant", - "ethertank", - "Potappo", - "happysadman", - "electrolysis" - ] - }, - "orphaned/Feed_content_access_API": { - "modified": "2019-03-23T23:53:50.032Z", - "contributors": [ - "teoli", - "Gomita", - "Mgjbot", - "Taken" - ] - }, - "orphaned/Findbar_API": { - "modified": "2019-03-23T23:43:12.004Z", - "contributors": [ - "fscholz", - "Taken" - ] - }, - "orphaned/Glossary/Gaia": { - "modified": "2019-03-18T21:26:29.596Z", - "contributors": [ - "Wind1808" - ] - }, - "orphaned/Glossary/Modern_web_apps": { - "modified": "2019-02-17T08:08:49.645Z", - "contributors": [ - "ksugimori", - "Wind1808" - ] - }, - "orphaned/HTML_Element_Cross_Reference": { - "modified": "2019-03-24T00:03:07.695Z", - "contributors": [ - "Marsf", - "Mgjbot" - ] - }, - "orphaned/Installing_Extensions_and_Themes_From_Web_Pages": { - "modified": "2019-03-23T23:45:12.220Z", - "contributors": [ - "teoli", - "Marsf", - "Mgjbot" - ] - }, - "orphaned/Installing_extensions": { - "modified": "2019-03-24T00:07:02.624Z", - "contributors": [ - "teoli", - "Piro" - ] - }, - "orphaned/Introduction_to_DOM_Inspector": { - "modified": "2019-03-24T00:01:43.152Z", - "contributors": [ - "Level" - ] - }, - "orphaned/JavaScript_Presentations": { - "modified": "2019-01-16T15:49:32.815Z", - "contributors": [ - "Mgjbot" - ] - }, - "orphaned/JavaScript_modules": { - "modified": "2019-01-16T15:32:32.464Z", - "contributors": [ - "Mgjbot", - "Potappo", - "Kohei" - ] - }, - "orphaned/Jetpack/UI/Slidebar": { - "modified": "2019-01-16T14:40:29.960Z", - "contributors": [ - "wbamberg", - "arita_san" - ] - }, - "orphaned/Jetpack/システム": { - "modified": "2019-01-16T14:40:45.346Z", - "contributors": [ - "wbamberg", - "teoli", - "Potappo", - "hiroyuki" - ] - }, - "orphaned/Key-navigable_custom_DHTML_widgets": { - "modified": "2019-03-18T20:58:51.321Z", - "contributors": [ - "SphinxKnight", - "Marsf", - "Kohei", - "Mgjbot" - ] - }, - "orphaned/Learn/HTML/Forms/HTML5_updates": { - "modified": "2019-03-24T00:08:06.257Z", - "contributors": [ - "ethertank", - "myakura", - "Taken" - ] - }, - "orphaned/Learn/How_to_contribute": { - "modified": "2020-10-25T07:13:17.063Z", - "contributors": [ - "silverskyvicto", - "SphinxKnight", - "mfuji09", - "Uemmra3", - "macitis", - "shihokambara" - ] - }, - "orphaned/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { - "modified": "2020-07-16T22:38:52.544Z", - "contributors": [ - "silverskyvicto" - ] - }, - "orphaned/Localizing_extension_descriptions": { - "modified": "2019-03-23T23:59:04.362Z", - "contributors": [ - "teoli", - "Takeshi2", - "Mgjbot", - "Kohei", - "Taken", - "Verruckt", - "Cai" - ] - }, - "orphaned/MCD": { - "modified": "2019-03-23T22:12:18.868Z", - "contributors": [ - "mkato", - "fscholz", - "Kohei", - "Nog", - "Okome" - ] - }, - "orphaned/MCD/Getting_Started": { - "modified": "2019-03-23T23:54:06.225Z", - "contributors": [ - "dynamis", - "Kohei" - ] - }, - "orphaned/MDN/About/Linking_to_MDN": { - "modified": "2019-01-16T19:51:11.298Z", - "contributors": [ - "wbamberg", - "lv7777", - "hamasaki", - "dynamis" - ] - }, - "orphaned/MDN/Community": { - "modified": "2020-10-08T07:50:01.179Z", - "contributors": [ - "mfuji09", - "SphinxKnight", - "silverskyvicto", - "wbamberg", - "Uemmra3", - "hamasaki", - "x2357" - ] - }, - "orphaned/MDN/Community/Conversations": { - "modified": "2020-07-27T15:13:24.686Z", - "contributors": [ - "mfuji09", - "wbamberg", - "yyss", - "chikoski", - "hamasaki" - ] - }, - "orphaned/MDN/Community/Doc_sprints": { - "modified": "2019-03-23T22:46:14.680Z", - "contributors": [ - "wbamberg", - "chikoski", - "hamasaki" - ] - }, - "orphaned/MDN/Community/Whats_happening": { - "modified": "2020-09-20T02:43:43.417Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Community/Working_in_community": { - "modified": "2020-09-28T13:53:00.148Z", - "contributors": [ - "mfuji09", - "jswisher", - "dskmori", - "wbamberg", - "SphinxKnight", - "yyss", - "hamasaki" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2020-03-15T07:15:15.853Z", - "contributors": [ - "mfuji09", - "wbamberg", - "SphinxKnight", - "seconoid", - "dskmori", - "shuuji3", - "lv7777", - "x2357" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_learning_pathways": { - "modified": "2019-09-11T15:38:24.837Z", - "contributors": [ - "SphinxKnight", - "silverskyvicto" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-03-18T21:11:31.022Z", - "contributors": [ - "mfuji09", - "wbamberg", - "hamasaki", - "ymizushi" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2020-06-07T14:56:40.969Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3", - "shuuji3", - "hamasaki", - "dskmori" - ] - }, - "orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros": { - "modified": "2019-03-18T21:27:24.519Z", - "contributors": [ - "silverskyvicto" - ] - }, - "orphaned/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request": { - "modified": "2019-12-24T08:41:27.716Z", - "contributors": [ - "mfuji09" - ] - }, - "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2020-09-27T11:46:06.995Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3" - ] - }, - "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { - "modified": "2020-06-14T09:24:26.779Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3", - "ymizushi", - "taiyaki32lp64", - "shota.saitoh." - ] - }, - "orphaned/MDN/Contribute/Howto/Use_navigation_sidebars": { - "modified": "2020-07-22T13:15:16.782Z", - "contributors": [ - "mfuji09" - ] - }, - "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { - "modified": "2020-02-28T22:25:15.349Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3", - "bakunyo" - ] - }, - "orphaned/MDN/Contribute/Howto/Write_interface_reference_documentation": { - "modified": "2020-08-12T14:04:04.314Z", - "contributors": [ - "mfuji09" - ] - }, - "orphaned/MDN/Contribute/Onboarding": { - "modified": "2020-02-02T00:59:59.165Z", - "contributors": [ - "mfuji09", - "silverskyvicto" - ] - }, - "orphaned/MDN/Contribute/Processes/Browser_information_resources": { - "modified": "2020-05-02T02:17:47.910Z", - "contributors": [ - "mfuji09", - "Yumal" - ] - }, - "orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics": { - "modified": "2020-07-22T12:19:51.826Z", - "contributors": [ - "mfuji09", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Contribute/Processes/Requesting_elevated_privileges": { - "modified": "2019-03-18T20:55:15.461Z", - "contributors": [ - "mfuji09", - "wbamberg", - "hamasaki" - ] - }, "orphaned/MDN/Dashboards": { "modified": "2019-03-18T21:20:57.974Z", "contributors": [ @@ -50405,108 +48865,6 @@ "Potappo" ] }, - "orphaned/MDN/Tools/Add-ons_and_plug-ins": { - "modified": "2020-09-30T16:50:22.923Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Tools/Feeds": { - "modified": "2020-09-30T16:50:20.576Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Uemmra3", - "k-kuwahara", - "hamasaki", - "dynamis", - "ethertank" - ] - }, - "orphaned/MDN/Tools/PUT_API": { - "modified": "2020-09-30T16:50:22.260Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "silverskyvicto", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Tools/Page_deletion": { - "modified": "2020-09-30T16:50:20.722Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "wbamberg", - "hamasaki", - "dynamis" - ] - }, - "orphaned/MDN/Tools/Page_moving": { - "modified": "2020-09-30T16:50:21.714Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "wbamberg", - "hamasaki", - "Uemmra3" - ] - }, - "orphaned/MDN/Tools/Page_regeneration": { - "modified": "2020-09-30T16:50:21.984Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Tools/Page_watching": { - "modified": "2020-09-30T16:50:22.753Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "silverskyvicto", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Tools/Revision_dashboard": { - "modified": "2020-09-30T16:50:21.567Z", - "contributors": [ - "chrisdavidmills", - "dlwe", - "wbamberg", - "Uemmra3", - "hamasaki" - ] - }, - "orphaned/MDN/Tools/Search": { - "modified": "2020-09-30T16:50:21.247Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "wbamberg", - "Uemmra3", - "hamasaki", - "dynamis" - ] - }, - "orphaned/MDN/Tools/Template_editing": { - "modified": "2020-09-30T16:50:21.855Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "hamasaki" - ] - }, "orphaned/MDN/Troubleshooting": { "modified": "2020-09-30T16:58:23.514Z", "contributors": [ @@ -50550,31 +48908,6 @@ "RobinEgg" ] }, - "orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_": { - "modified": "2019-03-18T21:04:26.854Z", - "contributors": [ - "Uemmra3", - "stmkza", - "MichinariNukazawa" - ] - }, - "orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension": { - "modified": "2019-03-18T21:08:02.889Z", - "contributors": [ - "Uemmra3", - "YujiSoftware", - "hashedhyphen", - "dynamis", - "lv7777" - ] - }, - "orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox": { - "modified": "2019-03-18T21:07:03.772Z", - "contributors": [ - "Raysphere24", - "hashedhyphen" - ] - }, "orphaned/Mozilla_Modules_and_Module_Ownership": { "modified": "2019-01-16T15:50:48.596Z", "contributors": [ @@ -50856,100 +49189,6 @@ "shinnn" ] }, - "orphaned/Web/API/Body": { - "modified": "2020-10-15T21:42:48.844Z", - "contributors": [ - "Wind1808", - "dlwe", - "woodmix", - "hamasaki", - "chikoski", - "YuichiNukiyama", - "fscholz" - ] - }, - "orphaned/Web/API/Body/arrayBuffer": { - "modified": "2020-10-15T21:43:16.481Z", - "contributors": [ - "Wind1808", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/blob": { - "modified": "2020-10-15T21:47:35.044Z", - "contributors": [ - "Wind1808", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/body": { - "modified": "2020-10-15T22:25:57.301Z", - "contributors": [ - "Wind1808" - ] - }, - "orphaned/Web/API/Body/bodyUsed": { - "modified": "2020-10-15T21:42:42.306Z", - "contributors": [ - "Wind1808", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/formData": { - "modified": "2020-10-15T21:43:16.713Z", - "contributors": [ - "Wind1808", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/json": { - "modified": "2020-10-15T21:43:16.571Z", - "contributors": [ - "Wind1808", - "mfuji09", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/Body/text": { - "modified": "2020-10-15T21:43:16.444Z", - "contributors": [ - "Wind1808", - "Uemmra3", - "woodmix", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/ChildNode": { - "modified": "2020-11-23T03:36:42.854Z", - "contributors": [ - "segayuu", - "Marsf", - "momoi" - ] - }, - "orphaned/Web/API/ChildNode/before": { - "modified": "2020-10-17T03:58:22.731Z", - "contributors": [ - "Potappo", - "Shirasu" - ] - }, - "orphaned/Web/API/ChildNode/replaceWith": { - "modified": "2020-10-17T04:41:48.425Z", - "contributors": [ - "Potappo", - "Shirasu" - ] - }, - "orphaned/Web/API/DOMLocator": { - "modified": "2020-08-13T09:34:48.574Z", - "contributors": [ - "eltociear" - ] - }, "orphaned/Web/API/Detecting_device_orientation": { "modified": "2020-10-15T21:21:30.973Z", "contributors": [ @@ -50959,24 +49198,6 @@ "Fajrovulpo" ] }, - "orphaned/Web/API/DeviceProximityEvent/max": { - "modified": "2019-03-23T22:15:32.868Z", - "contributors": [ - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/DeviceProximityEvent/min": { - "modified": "2019-03-23T22:15:40.764Z", - "contributors": [ - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/DeviceProximityEvent/value": { - "modified": "2019-03-23T22:15:41.294Z", - "contributors": [ - "YuichiNukiyama" - ] - }, "orphaned/Web/API/Document_Object_Model/Events": { "modified": "2020-09-27T12:30:54.835Z", "contributors": [ @@ -50986,12 +49207,6 @@ "mikamikuh" ] }, - "orphaned/Web/API/HTMLElement/forceSpellCheck": { - "modified": "2020-10-15T22:22:28.662Z", - "contributors": [ - "Wind1808" - ] - }, "orphaned/Web/API/HTMLOrForeignElement": { "modified": "2020-10-15T22:28:17.699Z", "contributors": [ @@ -51009,21 +49224,6 @@ "yyss" ] }, - "orphaned/Web/API/LinkStyle": { - "modified": "2019-03-23T23:29:59.357Z", - "contributors": [ - "yyss", - "ethertank" - ] - }, - "orphaned/Web/API/LocalMediaStream": { - "modified": "2020-10-15T21:46:16.531Z", - "contributors": [ - "teoli", - "Uemmra3", - "S_F__" - ] - }, "orphaned/Web/API/Navigator/registerContentHandler": { "modified": "2020-10-15T21:15:53.115Z", "contributors": [ @@ -51295,14 +49495,6 @@ "Wind1808" ] }, - "orphaned/Web/CSS/:-moz-alt-text": { - "modified": "2019-03-23T23:54:24.260Z", - "contributors": [ - "teoli", - "ethertank", - "Marsf" - ] - }, "orphaned/Web/CSS/@media/Index": { "modified": "2019-03-18T21:22:31.321Z", "contributors": [ @@ -51648,22 +49840,6 @@ "silverskyvicto" ] }, - "orphaned/Web/HTML/Global_attributes/dropzone": { - "modified": "2020-12-07T13:17:08.707Z", - "contributors": [ - "mfuji09", - "reodog", - "yyss", - "hamasaki" - ] - }, - "orphaned/Web/HTML/HTML_Extensions": { - "modified": "2019-01-16T14:37:34.613Z", - "contributors": [ - "ethertank", - "Marsf" - ] - }, "orphaned/Web/HTTP/Headers/Index": { "modified": "2019-03-18T21:26:05.914Z", "contributors": [ @@ -51988,12 +50164,6 @@ "dskmori" ] }, - "orphaned/Web_Content_Accessibility_Guidelines_1.0": { - "modified": "2019-01-16T16:11:29.195Z", - "contributors": [ - "Marsf" - ] - }, "orphaned/Working_with_windows_in_chrome_code": { "modified": "2019-01-16T17:12:27.632Z", "contributors": [ @@ -52016,13 +50186,6 @@ "kohei.yoshino" ] }, - "orphaned/addons.mozilla.org_(AMO)_API_Developers'_Guide": { - "modified": "2019-03-24T00:01:55.682Z", - "contributors": [ - "ethertank", - "yuki_nichiyama" - ] - }, "orphaned/ant_script_to_assemble_an_extension": { "modified": "2019-08-11T02:17:04.841Z", "contributors": [ diff --git a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index da44d92638..0000000000 --- a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Event 属性 -slug: conflicting/Learn/JavaScript/Building_blocks/Events -tags: - - Beginner - - Guide - - HTML - - Intermediate - - JavaScript -translation_of: >- - Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these -translation_of_original: Web/Guide/HTML/Event_attributes -original_slug: Web/Guide/HTML/Event_attributes ---- -<p><span class="seoSummary">すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。</span>例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を <code>onclick</code> 属性の中に書きます。</p> - -<p>イベントの応答として JavaScript のコードが実行された場合、<code>this</code> スコープは HTML 要素となり、このスコープ内にある <code>event</code> 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。</p> - -<div class="warning"> -<p><strong>警告:</strong> これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。</p> -</div> - -<p>これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。</p> - -<p>この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックする<a href="/docs/Security/CSP/Introducing_Content_Security_Policy">コンテンツ・セキュリティ・ポリシー</a>を使うことよって ブロックされる可能性があります。</p> - -<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Event 属性の使用例</h2> - -<p>この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。</p> - -<div class="note"> -<p><strong>注意:</strong> これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。</p> -</div> - -<pre class="brush: html"><!doctype html> -<html> - <head> - <title>Event 属性の例</title> - <script> - function doSomething() { - document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; - } - </script> - </head> - <body> - <div onclick="doSomething();">クリック!</div> - <div id="thanks"></div> - </body> -</html> -</pre> - -<p>この例を実行してみてください:</p> - -<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> - -<h2 id="Example_using_event_listeners" name="Example_using_event_listeners">イベントリスナーの使用例</h2> - -<p>代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。</p> - -<pre class="brush: html"><!doctype html> -<html> - <head> - <title>Event 属性の例</title> - <script> - function doSomething() { - document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; - } - - // ページのロードが完了した時に呼ばれる; - // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。 - - function setup() { - document.getElementById("click").addEventListener("click", doSomething, true); - } - // ウィンドウ内のドキュメントのロードが完了したことを知る為の、 - // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する - - window.addEventListener("load", setup, true); - </script> - </head> - <body> - <div id="click">クリック!</div> - <div id="thanks"></div> - </body> -</html></pre> - -<p>この動作を以下の例から確認できます:</p> - -<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> -<section id="Quick_Links"><ol><li><a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。">Event</a></li><li><a href="/ja/docs/Web/API/EventTarget" title="EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。">EventTarget</a></li><li><a href="/ja/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/ja/conflicting/tools/keyboard_shortcuts/index.html b/files/ja/conflicting/tools/keyboard_shortcuts/index.html deleted file mode 100644 index 1a6d7d0ea0..0000000000 --- a/files/ja/conflicting/tools/keyboard_shortcuts/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ソースエディタの使用 -slug: conflicting/tools/Keyboard_shortcuts -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor -original_slug: Tools/Using_the_Source_Editor ---- -<div>{{ToolsSidebar}}</div><p>ソースエディタは <a href="/ja/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm"><code>source-editor.jsm</code></a> によって提供されるエディタコンポーネントで、<a href="/ja/Tools/Scratchpad" title="Scratchpad">スクラッチパッド</a> や <a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a> などの開発ツールで共用しています。また、<a href="/ja/JavaScript_code_modules/Using_the_Source_Editor_API" title="Using the Source Editor API">Firefox の拡張機能から使用する</a>こともできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。</p> - -<h2 id="キーボードコマンド">キーボードコマンド</h2> - -<p>以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。</p> - -<div class="note"><strong>注意:</strong> Mac OS X では、control キーの代わりに Command キーを使用します。</div> - -<p> </p> - -<table class="standard-table" style="width: auto;"> - <thead> - <tr> - <th class="header">機能</th> - <th class="header">キーボード</th> - </tr> - </thead> - <tbody> - <tr> - <td>すべて選択</td> - <td>Ctrl-A</td> - </tr> - <tr> - <td>コピー</td> - <td>Ctrl-C</td> - </tr> - <tr> - <td>検索</td> - <td>Ctrl-F</td> - </tr> - <tr> - <td>再検索</td> - <td>Ctrl-G</td> - </tr> - <tr> - <td>指定行へ移動</td> - <td>Ctrl-L</td> - </tr> - <tr> - <td>やり直し</td> - <td>Ctrl-Shift-Z</td> - </tr> - <tr> - <td>貼り付け</td> - <td>Ctrl-V</td> - </tr> - <tr> - <td>切り取り</td> - <td>Ctrl-X</td> - </tr> - <tr> - <td>元に戻す</td> - <td>Ctrl-Z</td> - </tr> - <tr> - <td>行のインデント</td> - <td>Tab</td> - </tr> - <tr> - <td>行のインデント解除</td> - <td>Shift-Tab</td> - </tr> - <tr> - <td>前の行へ移動</td> - <td>Alt-↑ (Mac OS X では Ctrl-Option-↑)</td> - </tr> - <tr> - <td>後の行へ移動</td> - <td>Alt-↓ (Mac OS X では Ctrl-Option-↓)</td> - </tr> - <tr> - <td>選択範囲のコメント化とコメント解除</td> - <td>Ctrl-/</td> - </tr> - <tr> - <td>開き括弧へ移動</td> - <td>Ctrl-[</td> - </tr> - <tr> - <td>閉じ括弧へ移動</td> - <td>Ctlr-]</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> - <li><a href="/ja/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> - <li><a href="/ja/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> -</ul> diff --git a/files/ja/conflicting/tools/performance/call_tree/index.html b/files/ja/conflicting/tools/performance/call_tree/index.html deleted file mode 100644 index 1f857f4b74..0000000000 --- a/files/ja/conflicting/tools/performance/call_tree/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: プロファイラのチュートリアル -slug: conflicting/Tools/Performance/Call_Tree -translation_of: Tools/Performance/Call_Tree -translation_of_original: Tools/Performance/Profiler_walkthrough -original_slug: Tools/Performance/Profiler_walkthrough ---- -<div>{{ToolsSidebar}}</div><p>JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> - -<h2 id="Analysing_profiles" name="Analysing_profiles">プロファイルを分析する</h2> - -<p>パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は <code><a href="/ja/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code> のコールバックとして実行します:</p> - -<pre class="brush: js">function isPrime(i) { - for (var c = 2; c <= Math.sqrt(i); ++c) { - if (i % c === 0) { - console.log(i + " is not prime"); - return; - } - } - console.log(i + " is prime"); -} - -function timedIsPrime(i) { - setTimeout(function() { - isPrime(i); - }, 100); -} - -function testPrimes() { - var n = 10000; - for (var i = 2; i != n; ++i) { - timedIsPrime(i); - } -} - -var testPrimesButton = document.getElementById("test-primes"); -testPrimesButton.addEventListener("click", testPrimes, false);</pre> - -<p>このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:</p> - -<pre>"2 is prime" -"3 is prime" -"4 is not prime" -"5 is prime" -"6 is not prime"</pre> - -<p>このコードのプロファイルを取得すると、以下のように表示されるでしょう:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>最初の行は、<em>関数</em>列が常に <em>(ルート)</em> になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。<em>(ルート)</em> の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。<em>(ルート)</em> の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:</p> - -<ul> - <li>click イベントのリスナである <code>testPrimes()</code></li> - <li><code>timedIsPrime()</code> 内の <code>setTimeout()</code> の引数で指定した、無名のコールバック関数</li> -</ul> - -<p><code>testPrimes()</code> の行を見ていきましょう:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9515/primality-profile-testprimes.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>ここでは、78 個のサンプルのうち 29 個を <code>testPrimes()</code> 内で取得したことがわかります。<em>合計コスト</em>の列は、サンプル数をパーセント値に置き換えたものです: <code>(29/78) * 100</code> =<code> 37.17</code></p> - -<p>ところが<em>時間</em>と<em>コスト</em>は、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは <code>testPrimes()</code> が呼び出した関数の内部で取得したものです。これは次の行でわかります:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9517/primality-profile-testprimes-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>この行も <em>testPrimes</em> という名称です。これは 19 行目から始まる <code>for</code> ループが作成した、<code>testPrimes()</code> の新たなスタックフレームを指しています。前のフレームの<em>コスト</em>が 0 であったことから予想されるとおり、このフレームの<em>サンプル</em>列も 29 です。</p> - -<p>しかし、<em>コスト</em>と<em>時間</em>は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の <em>timedIsPrime</em> という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。<code>(5/78) * 100 = 6.41</code> であり、<em>コスト</em>の値と一致します。</p> - -<p>この分岐で残る 24 個のサンプル (全体の 30.76%) は <code>timedIsPrime()</code> で取得されました。つまり、<code>setTimeout()</code> (12 行目) を呼び出している部分です。</p> - -<p>コールツリーの別の分岐は、<code>setTimeout()</code> (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す <code>isPrime()</code> で取得されました。</p> - -<p>総括すると、もっとも多くのサンプルを <code>isPrime()</code> で取得しており (全体の 61.53%)、その次が <code>timedIsPrime()</code> (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。</p> - -<h3 id="Total_Time_and_Self_Time" name="Total_Time_and_Self_Time"><em>合計時間</em>と<em>時間</em></h3> - -<p><em>合計時間</em>と<em>時間</em>の列は<em>合計コスト</em>と<em>コスト</em>から算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。</p> - -<h3 id="Inverting_the_call_tree" name="Inverting_the_call_tree">呼び出しツリーを反転</h3> - -<p>既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:</p> - -<pre>testPrimes - - -> timedIsPrime - - - -(setTimeout callback) - - -> isPrime</pre> - -<p>これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。</p> - -<p>多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:</p> - -<ul> - <li><em>コスト</em>が 0 より大きいスタックフレーム、つまり、サンプルを取得したとき実際に実行していたスタックフレームのリストを作成します。</li> - <li>リストは、スタックフレームで取得したサンプル数の順に並べ替えられます。</li> - <li>リスト内の各項目で、コールスタックをトップレベル関数に向かって逆向きに表示します。</li> -</ul> - -<p>例えば testPrimes の例を、既定の表示でもう一度示します:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>呼び出しツリーを反転すると以下のようになります:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9521/primality-profile-inverted.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> - -<p>反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。</p> diff --git a/files/ja/conflicting/web/api/mouseevent/button/index.html b/files/ja/conflicting/web/api/mouseevent/button/index.html deleted file mode 100644 index 74d8e3fb44..0000000000 --- a/files/ja/conflicting/web/api/mouseevent/button/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: event.button -slug: conflicting/Web/API/MouseEvent/button -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/MouseEvent/button -translation_of_original: Web/API/event.button -original_slug: Web/API/Event/button ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Summary</h3> -<p>イベントを発生させたマウスのボタンを示しています。</p> -<h3 id="Syntax" name="Syntax">Syntax</h3> -<pre>var buttonCode = event.button; -</pre> -<p>state を変えたボタンを示す整数値を返します。</p> -<ul> - <li>0 は普通の'クリック'であり、通常は左クリック</li> - <li>1 は中ボタンであり、通常はホイールのクリック</li> - <li>2 は右ボタンであり、通常は右クリック</li> -</ul> -<p>ボタンの順序はどのようにポインティングデバイスが設定されているかによります。</p> -<h3 id="Example" name="Example">Example</h3> -<pre><script type="text/javascript"> - -function whichButton(e) -{ - // Handle different event models - var e = e || window.event; - var btnCode; - - if ('object' == typeof e){ - btnCode = e.button; - - switch (btnCode){ - case 0 : alert('Left button clicked'); - break; - case 1 : alert('Middle button clicked'); - break; - case 2 : alert('Right button clicked'); - break; - default : alert('Unexpected code: ' + btnCode); - } - } -} - -</script> - -<p onclick="whichButton(event);">Click with mouse...</p> - -</pre> -<h3 id="Notes" name="Notes">Notes</h3> -<p>マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック（通常は左クリック）でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。</p> -<p>ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。</p> -<h3 id="Specification" name="Specification">Specification</h3> -<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p> diff --git a/files/ja/conflicting/web/guide/index.html b/files/ja/conflicting/web/guide/index.html deleted file mode 100644 index d530dd43da..0000000000 --- a/files/ja/conflicting/web/guide/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Web 開発 -slug: conflicting/Web/Guide -tags: - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Web_Development ---- -<p><strong>ウェブ開発</strong> は、ウェブサイトやウェブアプリケーションの開発のすべての側面を含んでいます。</p> - -<p>ここで見つけられる記事を熟読して、単純なウェブサイトから最新のウェブ技術を用いた複雑で非常にインタラクティブなウェブサイトまでを作成する方法を学んでください。</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation_topics" name="Documentation_topics">ドキュメンテーショントピックス</h2> - - <h3 id="Technologies" name="Technologies">技術</h3> - - <dl> - <dt><a class="internal" href="/ja/docs/Web_Development/Introduction_to_Web_development" title="ja/docs/Web Development/Introduction to Web development">ウェブ開発の初歩</a></dt> - <dd>Web 向けの開発方法を学ぶためのガイド。</dd> - <dt><a class="internal" href="/ja/docs/HTML" rel="internal">HTML</a></dt> - <dd>HyperText Markup Language はウェブページやブラウザーで表示される他のドキュメントを作成するための基本言語です。</dd> - <dt><a class="internal" href="/ja/docs/CSS" rel="internal">CSS</a></dt> - <dd>Cascading Style Sheets によって Web 上で高度なレイアウトとページデザインを行うことが可能になります。</dd> - <dt><a class="internal" href="/ja/docs/JavaScript" rel="internal">JavaScript</a></dt> - <dd>JavaScript はウェブアプリケーションを開発するために最も一般的に用いられているスクリプト言語です。Mozilla ベースのソフトウェアの開発にも用いられています。</dd> - <dt><a class="internal" href="/ja/docs/DOM" rel="internal">DOM</a></dt> - <dd>Document Object Model は HTML と XML ドキュメントのための API であり、見た目の表現を変更するために変更可能であるドキュメントの構造的な表現を提供します。</dd> - <dt><a class="internal" href="/ja/docs/AJAX" rel="internal">AJAX</a></dt> - <dd>Asynchronous JavaScript and XML はひとつの技術ではなく複数の技術の組み合わせです。動的なウェブアプリケーションを作成するために JavaScript と他のモダンなウェブ技術を共に用いることを指します。</dd> - <dt><a class="internal" href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a></dt> - <dd>Extensible HyperText Markup Language は HTML よりも厳格な構文を提供する XML ベースの HTML 風の言語です。</dd> - <dt><a class="internal" href="/ja/docs/SVG" rel="internal">SVG</a></dt> - <dd>Scalable Vector Graphics は 2D ベクターグラフィックを扱うための XML マークアップ言語です。</dd> - </dl> - - <h3 id="Strategies" name="Strategies">方針</h3> - - <dl> - <dt><a class="internal" href="/ja/docs/Web_Standards" title="ja/docs/Web Standards">Web 標準</a></dt> - <dd>オープンな Web と互換性を持つことであなたのウェブサイトまたはアプリケーションを最も多くのユーザーに提供するための方法を学んでください。</dd> - <dt><a href="/ja/docs/Web_Development/Responsive_Web_design" title="ja/docs/Web development/Responsive Web design">Responsive Web design</a></dt> - <dd>同じコンテンツを携帯電話から高解像度のデスクトップディスプレイまですべてのハードウェア環境で提供できるよう、CSS を使用してください。</dd> - <dt><a href="/ja/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> - <dd>ブラウザーが更新されても壊れることのないウェブサイトを作成するためのベストプラクティスを紹介します。</dd> - <dt><a href="/ja/docs/Web_Development/Mobile" title="/ja/docs/Web development/Mobile">Mobile Web development</a></dt> - <dd>モバイル機器で表示されるウェブサイトを開発する際は、デスクトップブラウザー向けの開発に慣れた人々にはあまり知られていない独特の手法を必要とします。</dd> - <dt><a class="internal" href="/ja/docs/Mozilla_Web_Developer_FAQ" title="ja/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> - <dd>ウェブ開発者からのよく聞かれる質問です。答えもあります!</dd> - </dl> - - <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development" title="ja/docs/tag/Web_Development">すべてみる...</a></span></p> - </td> - <td> - <h2 class="Community" id="Community" name="Community">コミュニティ</h2> - - <ul> - <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a> (<a class="external" href="https://dev.mozilla.jp/hacksmozillaorg/">日本語訳</a>)</li> - <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow">WHAT Working Group</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow">WebDev FeedHouse</a></li> - </ul> - - <h2 class="Tools" id="Tools" name="Tools">ツール</h2> - - <ul> - <li><a href="/ja/docs/Tools" title="ja/docs/Tools">ツールのメインページ</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843" rel="external nofollow">Firebug 拡張機能</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/60" rel="external nofollow">Web Developer 拡張機能</a></li> - <li><a href="/ja/docs/Venkman" rel="internal">Venkman</a>: JavaScript デバッガー</li> - <li><a href="/ja/docs/DOM_Inspector" rel="internal" title="ja/docs/DOM Inspector">DOM Inspector</a></li> - <li><a href="/ja/docs/Tools/Scratchpad" title="ja/docs/Tools/Scratchpad">スクラッチパッド</a></li> - </ul> - - <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development:Tools" title="ja/docs/tag/Web_Development:Tools">すべてみる...</a></span></p> - </td> - </tr> - </tbody> -</table> diff --git a/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html deleted file mode 100644 index 2ab120d90f..0000000000 --- a/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: User Agent Strings Reference -slug: conflicting/Web/HTTP/Headers/User-Agent/Firefox -tags: - - 要更新 -translation_of: Web/HTTP/Headers/User-Agent/Firefox -translation_of_original: User_Agent_Strings_Reference -original_slug: User_Agent_Strings_Reference ---- -<h3 id="このドキュメントの状況"><a name="status">このドキュメントの状況</a></h3> -<p>これは、元の user-agent のバージョン文字列提議の改訂版です。<a class="external" href="http://www-archive.mozilla.org/build/user-agent-strings.html">元の、時代遅れの提議</a> と、<a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.seamonkey">netscape.public.mozilla.seamonkey</a> 及び <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a>での議論を改訂の参考にしてください。</p> -<p>This document is the official Mozilla user-agent string specification. However, the following issues are under review and may be revised in the near future:</p> -<ul style="border: medium solid red;"> - <li>There is concern that the attempt to separate <code>Platform</code> and <code>OS-or-CPU</code> on Windows and Macintosh is not backwards compatible and the user-agent strings should return to their old-fashioned form.</li> - <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=57555">concern</a> that giving the operating system version on Windows reveals too much information about a system (such as potential security holes).</li> - <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=55366">concern</a> that revealing localization information is a violation of privacy.</li> -</ul> -<h3 id="目標点"><a name="goals">目標点</a></h3> -<p>元の目標は:</p> -<ul> - <li>RFC 1945 や RFC 2068 で述べられている規格に従う。</li> - <li>現存の Web サーバーを破壊しない。</li> - <li>現存のログファイル解析ソフトや、user-agent 分析コードを破壊しない。</li> - <li>user-agent のバージョン文字列を適切な短い長さにとどめる。</li> - <li>一貫した、見てすぐ分かる、そして解析しやすい形式を用いる。</li> -</ul> -<p>議論の中で出てきた他の事項は:</p> -<ul> - <li>日付に基づいたバージョン情報を提供する。</li> - <li>バージョン修飾語の問題点に焦点を絞る。</li> - <li>アプリケーションに、Gecko のように Mozilla の技術が含まれていることを知らせる。しかし、Mozilla ではないので、区別できるようにする。</li> -</ul> -<h3 id="提議"><a name="proposal">提議</a></h3> -<p>Mozillaに基づくブラウザは、user-agentのバージョン文字列を以下の形式にすべきである:</p> -<p style="margin-left: 40px;"><code>MozillaProductToken (MozillaComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> -<p>Gecko レイアウトエンジンが埋め込まれたアプリケーションの user-agent のバージョン文字列は以下の形式に従うべきである:</p> -<p style="margin-left: 40px;"><code>ApplicationProductToken (ApplicationComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> -<p>上記の定義中の参照は以下の通り:</p> -<table> - <colgroup> - <col> - <col> - </colgroup> - <tbody> - <tr style="background-color: rgb(255, 255, 204);"> - <td>MozillaProductToken</td> - <td><code><strong>Mozilla/</strong></code> <em>MozillaVersion</em></td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>MozillaVersion</td> - <td><em>Major</em> <code><strong>.</strong></code> <em>minor</em></td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>Major</td> - <td>メジャーリリース番号を示す整数値。In practice, always 5.</td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>Minor</td> - <td>もし 0 でないなら、3 桁の 0 で埋められた数字であるべきで、たとえば <strong><code>001</code></strong> である。もし 0 なら、0 とするのが望ましい。</td> - </tr> - <tr> - <td>MozillaComment</td> - <td><code>(</code> <em>Platform</em> <strong><code>;</code></strong> <em>Security</em> <strong><code>;</code></strong> <em>OS-or-CPU</em> <strong><code>;</code></strong> <em>Localization information</em> <em><strong><code>;</code></strong> GeckoVersion <code>)</code></em> <em>*[<strong><code>;</code></strong> Optional Other Comments] <code>)</code></em></td> - </tr> - <tr> - <td>Platform</td> - <td>使用してよい文字列: - <ul> - <li><code><strong>Windows</strong></code>: 全ての Windows 環境</li> - <li><code><strong>Macintosh</strong></code>: 全ての Mac OS 環境</li> - <li><code><strong>X11</strong></code>: 全ての X-Window システム環境</li> - <li>etc.</li> - </ul> - </td> - </tr> - <tr> - <td>Security</td> - <td>使用してよい文字列: - <ul> - <li><code><strong>N</strong></code>: セキュリティー無し</li> - <li><code><strong>U</strong></code>: 強化セキュリティーバージョン</li> - <li><code><strong>I</strong></code>: 弱いセキュリティーバージョン</li> - </ul> - </td> - </tr> - <tr> - <td>OS-or-CPU</td> - <td><strong>Windows</strong> システム用の文字列: - <ul> - <li><code><strong>Win3.11</strong></code>: Windows 3.11</li> - <li><code><strong>WinNT3.51</strong></code>: Windows NT 3.11</li> - <li><code><strong>WinNT4.0</strong></code>: Windows NT 4.0</li> - <li><code><strong>Windows NT 5.0</strong></code>: Windows 2000</li> - <li><code><strong>Win95</strong></code>: Windows 95</li> - <li><code><strong>Win98</strong></code>: Windows 98</li> - <li><code><strong>Win 9x 4.90</strong></code>: Windows Me</li> - <li>etc.</li> - </ul> - <strong>MacOS</strong> システム用の文字列: - <ul> - <li><code><strong>68K</strong></code>: 68k ハードウエア</li> - <li><code><strong>PPC</strong></code>: PowerPC ハードウエア</li> - <li>etc.</li> - </ul> - <strong>Unix</strong> システム用の文字列: コマンド <strong><code>uname -sm</code></strong> の出力を用いる。(also accessible as the <strong>sysname</strong> and <strong>machine</strong> fields of the utsname structure.) (Previous versions of this document said they should be the output of <strong><code>uname -srm</code></strong>, but the <strong>release</strong> field of the utsname structure was considered to <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=57555">reveal too much information</a> about the system, such as potential security holes.)</td> - </tr> - <tr> - <td>Localization Information</td> - <td>文字コードの表現は、RFC 1945 及び RFC 2068 の規格に従う。例としては<br> - <code>en, en-US, es, es-CO, ja, ja-JP</code>などがあげられる。</td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>GeckoVersion</td> - <td>String starting with "rv:" followed by the Gecko version. This is a set of numbers separated by periods, possibly followed by a pre-release indicator (e.g. "a1" for the first alpha).</td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>GeckoProductToken</td> - <td><code><strong>Gecko/</strong></code><em>GeckoDate</em> - <p>Mozilla を含む、Gecko エンジンに基づく製品には、Gecko 製品文字列をその二次製品であることを明確にするために利用を許可する。</p> - </td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>GeckoDate</td> - <td>YYYYMMDD 形式の日付。正式な Mozilla ビルドにおいては、これは BuildID の中の日付に一致させる。Mozilla の公開版においては、GeckoDate はソースコードが mozilla.org から取り出された日付と一致させなければならず、必ずしも生成された BuildID の日付部分とは一致しない。複数のブランチが同時に公開される場合、この日付からは Gecko のバージョンを特定できない。</td> - </tr> - <tr> - <td>ApplicationProductToken, Application Comment</td> - <td>Gecko レイアウトエンジンに基づくアプリケーションが使用する部分である。それらの製品文字列とコメントの形式はここで指定するものではないが、HTTP 標準に基づくべきである。</td> - </tr> - <tr style="background-color: rgb(255, 255, 204);"> - <td>( VendorProductToken | VendorComment )</td> - <td>Mozilla に基づくアプリケーションの製品文字列を記述する部分である。形式や内容はベンダー規定とするが、HTTP 標準に基づくべきであり、上記の GeckoVersion を含むことが望ましい。</td> - </tr> - <tr> - <td><strong><code>*</code></strong></td> - <td>0 かそれ以上のトークンを入れることを指定する記号</td> - </tr> - <tr> - <td><strong><code>?</code></strong></td> - <td>0 か 1 つのトークンを入れることを指定する記号</td> - </tr> - </tbody> -</table> -<h3 id="例"><a name="examples">例</a></h3> -<table> - <colgroup> - <col> - <col> - </colgroup> - <tbody> - <tr> - <td>mozilla.org のブラウザ</td> - <td><code>Mozilla/5.001 (windows; U; NT4.0; en-US; rv:1.0) Gecko/25250101</code></td> - </tr> - <tr> - <td>上のブラウザと同じソースに基づいて作られた商標リリース</td> - <td><code>Mozilla/5.001 (Macintosh; N; PPC; ja; rv:1.0) Gecko/25250101 MegaCorpBrowser/1.0 (MegaCorp, Inc.)</code></td> - </tr> - <tr> - <td>再構成リリース</td> - <td><code>Mozilla/9.876 (X11; U; Linux 2.2.12-20 i686, en; rv:2.0) Gecko/25250101 Netscape/5.432b1 (C-MindSpring)</code></td> - </tr> - <tr> - <td>Gecko に基づくブラウザ</td> - <td><code>TinyBrowser/2.0 (TinyBrowser Comment; rv:1.9.1a2pre) Gecko/20201231</code></td> - </tr> - </tbody> -</table> -<h3 id="Implementation_notes_for_applications_vendors_and_extensions"><a name="implementation">Implementation notes for applications, vendors, and extensions</a></h3> -<p>Starting with Mozilla 1.8 beta2, the best way for applications, vendors, and extensions (if needed) to add to default preferences to add <code>VendorProductToken</code>s or <code>VendorComment</code>s is to add a default preference of the form <code>general.useragent.extra.<em>identifier</em></code>. <em>All</em> of the <code>general.useragent.extra.*</code> preferences will have their string values added to the User-Agent string in alphabetical order by identifier. For example:</p> -<ul> - <li><code>pref("general.useragent.extra.megabrowser", "MegaCorpBrowser/1.0 (MegaCorp, Inc.)");</code></li> - <li><code>pref("general.useragent.extra.tinydistro", "TinyDistroLinux/2.3");</code></li> -</ul> -<hr> -<p>これに対するコメントは <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a> または <a class="link-mailto" href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a> まで</p> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html deleted file mode 100644 index 656d849574..0000000000 --- a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: WebAssembly.Instance.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="説明">説明</h2> - -<p>全ての {{jsxref("WebAssembly.Instance")}} インスタンスは <code>Instance.prototype</code> を継承します。{{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Instance")}} インスタンスに影響するように変更可能です。 </p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code>Instance.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Instance()")}} コンストラクタです。</dd> - <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt> - <dd>WebAssembly モジュールインスタンスからエクスポートされた全ての関数をメンバとして持つオブジェクトを返します。これらは、JavaScriptからアクセスして使用することができます。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p>なし。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WebAssembly.Instance()")}}</li> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html deleted file mode 100644 index 4903fcfbb1..0000000000 --- a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebAssembly.Table.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -tags: - - JavaScript - - Property - - Prototype - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="説明">説明</h2> - -<p>全ての {{jsxref("WebAssembly.Table")}} インスタンスは <code>Table.prototype</code> を継承します。{{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Table")}} インスタンスに影響するように変更可能です。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code>Table.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Table()")}} コンストラクタです。</dd> - <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> - <dd>テーブルの長さを返します。すなわち、要素数です。</dd> - <dt> - <h2 id="メソッド">メソッド</h2> - </dt> - <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> - <dd>アクセサ関数。インデックスから格納された要素を取得します。</dd> - <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> - <dd>指定した要素数で Table インスタンスを拡張します。</dd> - <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> - <dd>指定したインデックスに要素を格納します。</dd> -</dl> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WebAssembly.Table")}}</li> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html deleted file mode 100644 index e84c53c5d0..0000000000 --- a/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 予約語 -slug: conflicting/Web/JavaScript/Reference/Lexical_grammar -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words -original_slug: Web/JavaScript/Reference/Reserved_Words ---- -<p>以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は <a href="/ja/docs/ECMAScript">ECMAScript</a> の仕様で既存のキーワードとして予約されているものです。</p> - -<div class="threecolumns"> -<ul> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">case</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">catch</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/continue" title="JavaScript/Reference/Statements/continue">continue</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/debugger" title="JavaScript/Reference/Statements/debugger">debugger</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">default</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/delete">delete</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/do...while" title="JavaScript/Reference/Statements/do...while">do</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">else</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">finally</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/function" title="JavaScript/Reference/Statements/function">function</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">if</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">in</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/new">new</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/return" title="JavaScript/Reference/Statements/return">return</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">switch</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this">this</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/throw" title="JavaScript/Reference/Statements/throw">throw</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">try</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/typeof">typeof</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/void">void</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/while" title="JavaScript/Reference/Statements/while">while</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/with" title="JavaScript/Reference/Statements/with">with</a></code></li> -</ul> -</div> - -<h2 id="Words_reserved_for_possible_future_use" name="Words_reserved_for_possible_future_use">将来の使用を見越した予約語</h2> - -<p>以下は ECMAScript の仕様で将来のキーワードとして予約されているものです。現在は特別な機能を持っていませんが、将来機能を持つときのために、識別子として使用できません。このキーワードは、厳格モード、非厳格モードの両方で使用できません。</p> - -<div class="note"><strong>注記:</strong> Firefox 5 (JavaScript 1.8.6) より以前では、これらのキーワードは厳格モードでないときには使用できました。この ECMAScript 違反は Firefox 5 で修正されました。</div> - -<div class="threecolumns"> -<ul> - <li><code>class</code></li> - <li><code>enum</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a></code></li> - <li><code>extends</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a></code></li> - <li><code>super</code></li> -</ul> -</div> - -<p>以下は <a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">厳格モードのコード</a> として実行されたときに 、ECMAScript の仕様で将来のキーワードとして 予約されているものです。ただし、JavaScript 1.7 以上では <code>let</code> と <code>yield</code> は伝統的な Mozilla 特有の機能を持っています。</p> - -<div class="threecolumns"> -<ul> - <li><code>implements</code></li> - <li><code>interface</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></code></li> - <li><code>package</code></li> - <li><code>private</code></li> - <li><code>protected</code></li> - <li><code>public</code></li> - <li><code>static</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/yield" title="JavaScript/Reference/Statements/yield">yield</a></code></li> -</ul> -</div> - -<p><code><a href="/ja/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const">const</a></code> は ECMAScript の仕様によって将来のキーワードとして予約されていますが、Mozilla やほとんどの他のブラウザが非標準の拡張として実装していることに注意してください。さらに、 <a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a> と <a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a> はかつて Mozilla で実装されていましたが、現在では予約語となっています。</p> - -<p>加えて、 <code>null</code> 、 <code>true</code> 、 <code>false</code> リテラルは ECMAScript の仕様で予約されています。</p> - -<h2 id="Reserved_word_usage" name="Reserved_word_usage">予約語の利用</h2> - -<p>実際に、予約語は識別子のみに適用されます。<span class="comment-copy"><a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a> の記述にあるように、これらは全て予約語を排除しない識別名です。</span></p> - -<p><span class="comment-copy"><code>a.import</code></span><br> - <span class="comment-copy"><code>a["import"]</code></span><br> - <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p> - -<p><span class="comment-copy">反対に、以下は識別子であるので違反です。識別子は関数宣言や関数式に使用されます。</span></p> - -<p><span class="comment-copy"><code>function import() {}</code></span></p> diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html index 88ab8ebcbe..52afc03922 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.html +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -313,7 +313,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <ul> <li><strong>色相(Hue)</strong>: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。</li> <li><strong>彩度(Saturation)</strong>: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。</li> - <li><strong>(Lightness)</strong>: 色がどれだけ明るいのか? こりは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li> + <li><strong>輝度(Lightness)</strong>: 色がどれだけ明るいのか? これは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li> </ul> <p>RGB の例を HSL の色に更新すると次のようになります:</p> diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html index 808a7a8371..db79c7a200 100644 --- a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html @@ -258,7 +258,7 @@ if(iceCream === 'チョコレート') { alert('あれれ、でもチョコレートは私のお気に入り......'); }</pre> -<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 <code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p> +<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列を比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 <code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p> <h3 id="Functions">関数</h3> diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html index b44a2b17bf..f1573f8af8 100644 --- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -278,7 +278,7 @@ fetch(url).then(function(result) { displayResults(json); });</pre> -<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Body/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> +<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Response/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> <h3 id="データを表示する">データを表示する</h3> diff --git a/files/ja/mdn/contribute/documentation_priorities/index.html b/files/ja/mdn/contribute/documentation_priorities/index.html index d0ebb69565..d647c6446b 100644 --- a/files/ja/mdn/contribute/documentation_priorities/index.html +++ b/files/ja/mdn/contribute/documentation_priorities/index.html @@ -156,7 +156,6 @@ translation_of: MDN/Contribute/Documentation_priorities <h3 id="fetch_api">Fetch API (47)</h3> <ul> - <li><code><a href="/ja/docs/Web/API/Body">Body</a></code> (8)</li> <li><code><a href="/ja/docs/Web/API/Headers">Headers</a></code> (11)</li> <li><code><a href="/ja/docs/Web/API/Request">Request</a></code> (15)</li> <li><code><a href="/ja/docs/Web/API/Response">Response</a></code> (13)</li> diff --git a/files/ja/mdn/contribute/howto/write_for_seo/index.html b/files/ja/mdn/contribute/howto/write_for_seo/index.html index b03503c0bf..d56b7cb817 100644 --- a/files/ja/mdn/contribute/howto/write_for_seo/index.html +++ b/files/ja/mdn/contribute/howto/write_for_seo/index.html @@ -1,71 +1,72 @@ --- -title: どのように MDN Web Docs で SEO を考慮するか +title: SEO を考慮して MDN Web Docs を書く方法 slug: MDN/Contribute/Howto/Write_for_SEO +tags: + - Contributing to MDN + - Documentation + - MDN + - MDN Meta + - MDN Web Docs + - SEO + - Search Engine Optimization translation_of: MDN/Contribute/Howto/Write_for_SEO --- <div>{{MDNSidebar}}</div> -<div>{{IncludeSubnav("/ja/docs/MDN")}}{{draft("私たちは最近、SEO を改善するためのいくつかの提案されたテクニックの評価を終了しました。この記事とその貢献者ガイドを更新する過程にあります。")}}</div> - <p><span class="seoSummary">このガイドでは、ユーザーが必要なものに簡単にアクセスできるように、検索エンジンがコンテンツを簡単に分類して索引付けできるようにするための標準的なプラクティス、推奨事項、およびコンテンツの要件について説明します。</span></p> -<h2 id="イントロダクション">イントロダクション</h2> - -<p>MDN を執筆する主な目標は、常にオープンな Web 技術について説明し、情報を提供することです。それにより開発者は実現したいことをするため、あるいはコードを完成させるために知っておく必要のある詳細を見つけるために学ぶことができます。彼らが、私たちが書いている資料を探し出せることが重要です。</p> - -<p>Since most readers reach content on MDN through search engines, as writers, we have to keep that in mind while we work. To do that, we are establishing a selection of "SEO guidelines," to help writers and editors on MDN ensure that each page they work on is reasonably well designed, written, and marked up to give search engines the context and clues they need to properly index articles.</p> - -<h2 id="この文書のステータス">この文書のステータス</h2> +<h2 id="Introduction">イントロダクション</h2> -<p>We're currently in the midst of the early stages of what is intended to be a long-term project to improve search engine optimization ({{Glossary("SEO")}}) on MDN. We have recently completed a series of small-scale experiments to test theories and to determine what changes to make to our practices and to the contributor guidelines to help improve our SEO.</p> +<p>MDN を執筆する主な目標は、常にオープンなウェブ技術について説明し、情報を提供することです。それにより開発者は実現したいことをするため、あるいはコードを完成させるために知っておく必要のある詳細を見つけるために学ぶことができます。彼らが、私たちが書いている資料を探し出せることが重要です。</p> -<p>We are still in the process of compiling our notes and updating this article and the rest of the contributor guide to incorporate our findings.</p> +<p>MDN の読者の多くは検索エンジンを経由してコンテンツにたどり着くため、執筆者としてはそのことを念頭に置いて作業をしなければなりません。そのために、 MDN の執筆者や編集者が、それぞれのページが適度にデザインされ、書かれ、マークアップされ、検索エンジンが記事を適切にインデックスするために必要な文脈や手がかりを与えることができるように、「SEOガイドライン」を制定します。</p> -<h2 id="SEO_チェックリスト">SEO チェックリスト</h2> +<h2 id="SEO_checklist">SEO チェックリスト</h2> -<p>The following is a list of things you should check while writing and reviewing content to help ensure that the page and its neighbors will be indexed properly by search engines.</p> +<p>ページとその周辺が検索エンジンに適切にインデックスされるようにするために、コンテンツを書いたり見直したりする際に確認すべきことを以下にまとめました。</p> <ul> - <li>Make sure the page's contents are <a href="/en-US/docs/MDN/Contribute/Howto/Write_for_SEO#Ensure_pages_aren't_too_similar">different enough from other pages</a> that search engines don't assume they're about the same thing.</li> + <li>ページの内容が<a href="#ensure_pages_aren't_too_similar">他のページとは十分に異なり</a>、検索エンジンが同じことについて書かれていると思わないようにしましょう。</li> + <li><a href="#avoid_pages_that_are_too_short">短すぎるページは避けましょう</a>。短すぎる記事 (SEO 用語では「薄いページ」と呼ばれます) は、正確なカタログ化が困難です。 MDN のページは、可能な限り、 300 語程度以下の短さを避けるべきです。</li> </ul> -<h2 id="Ensure_pages_aren't_too_similar">Ensure pages aren't too similar</h2> +<h2 id="Ensure_pages_aren't_too_similar">似たようなページにならないようにする</h2> -<p>Each article should be as unique as possible. Articles that look similar to one another textually will wind up being considered to be about roughly the same thing, even if they aren't. For example, if an interface has the properties <code>width</code> and <code>height</code>, it's easy for the text to be surprisingly similar, with just a few words swapped out, and using the same example. This makes it hard for search engines to know which is which, and they wind up sharing page rank, resulting in both being harder to find than they ought to be.</p> +<p>各記事はできる限り固有であるべきです。テキストが似ている記事は、実際には似ていなくても、ほぼ同じ内容であるとみなされてしまいます。例えば、インターフェイスに <code>width</code> と <code>height</code> というプロパティがある場合、同じ例を使っていくつかの単語を入れ替えただけで、驚くほど似た文章になってしまいがちです。これでは、検索エンジンはどちらがどちらなのか分かりませんし、ページランクも同じになってしまい、結果的にどちらも本来の目的よりも見つけにくくなってしまいます。</p> -<p>Understandably, writers confronted with two related properties like <code>width</code> and <code>height</code> (or any other set of functionally related features) are tempted to write the article on <code>width</code>, then copy that article and paste it into the one on <code>height</code>, replacing a few words. Done!</p> +<p>当然のことながら、 <code>width</code> と <code>height</code> のような 2 つの関連するプロパティ (または機能的に関連する他の機能のセット) に直面した執筆者は、 <code>width</code> に関する記事を書き、その記事をコピーして <code>height</code> に関する記事に貼り付け、いくつかの単語を入れ替えればよいと思うでしょう。これで完了。</p> -<p>Unfortunately, the result is two pages that, as far as search engines are concerned, may as well be the same thing.</p> +<p>残念ながら、結果として、検索エンジンが懸念する限りでは、同じものであるかもしれない 2 つのページができあがります。</p> -<p>It's important, then, to ensure that every page has its own content. Here are some suggestions to help you accomplish that:</p> +<p>そのためには、すべてのページに独自のコンテンツを持たせることが重要です。ここでは、それを実現するためのいくつかの提案を紹介します。</p> <ul> - <li>Consider use cases where there might be more differences than one would think. For instance, in the case of <code>width</code> and <code>height</code>, perhaps consider ways horizontal space and vertical space are used differently, and provide a discussion about the appropriate concepts. Perhaps you mention the use of width in terms of making room for a sidebar, while using height to handle vertical scrolling or footers or similar. Including information about accessibility issues is a useful and important idea as well.</li> - <li>Use entirely different examples on each page. Examples in these situations are often even more similar than the body text, since the examples may use both (or all) of the similar methods or properties to begin with, thereby requiring no real changes when reused. So throw out the example and write a new one, or at least provide multiple examples, with at least some of them different.</li> - <li>Include descriptions of each example. Both an overview of what the example does as well as coverage of how it works, in an appropriate level of detail given the complexity of the topic and the target audience, should be included.</li> + <li>意外と違いがあるかもしれない使用例を考えてみます。例えば、 <code>width</code> と <code>height</code> のケースでは、水平方向の空間と垂直方向の空間がどのように異なる使い方をされているかを考え、適切な概念についての議論を行います。例えば、幅についてはサイドバーを設置するための空間として、高さについては縦方向のスクロールやフッターなどのために使用することを考えます。また、アクセシビリティの問題についての情報を盛り込むことも、有用かつ重要なアイデアです。</li> + <li>各ページにまったく異なる例を使ってください。このような場合の例は、本文よりもさらに似通っていることが多いものです。というのも、例はそもそも似たようなメソッドやプロパティの両方 (またはすべて) を使用していることがあり、再利用する際に実質的な変更を必要としないからです。そのため、例を捨てて新しい例を書くか、少なくとも複数の例を用意し、そのうちのいくつかは異なる例文してください。</li> + <li>それぞれの例について説明を加えます。トピックの複雑さと対象読者を考慮して、適切なレベルの詳細で、例が何をするのかという概要と、どのように機能するのかという説明の両方を含める必要があります。</li> </ul> -<p>The easiest way to avoid being overly similar is of course to write each article from scratch if time allows.</p> +<p>同じような内容になりすぎないようにするには、時間が許す限り、それぞれの記事を一から書き直すのが一番簡単です。</p> -<h2 id="ページが短くなりすぎることは避ける">ページが短くなりすぎることは避ける</h2> +<h2 id="Avoid_pages_that_are_too_short">ページが短くなりすぎることを避ける</h2> -<p>Articles that are too short (called "thin pages" in SEO parlance) are difficult to catalog accurately. Whenever possible, pages on MDN should avoid being shorter than around 300 words or so. Here are some basic guidelines to help you create pages that have enough content to be properly searchable without resorting to cluttering them up with unnecessary text.</p> +<p>短すぎる記事 (SEO 用語で「薄いページ」と呼ばれます) は、正確なカタログ化が困難です。 MDN のページは、可能な限り 300 語前後の短さを避けるべきです。ここでは、不必要なテキストでごちゃごちゃさせずに、検索に適した内容のページを作成するための基本的なガイドラインをご紹介します。</p> <ul> - <li>Keep an eye on the convenient word counter located in the top-right corner of the editor's toolbar on MDN. This is not an exact representation of the true word count, since the true word count is based on the rendered page, not the page as you see it in the editor. That means macros that add a lot of words will result in a higher word count, while macros that insert nothing but adjust formatting will result in a lower word count.</li> - <li>Obviously, if the article is a stub, or is missing material, add it. We try to avoid outright "stub" pages on MDN, although they do exist, but there are plenty of pages that are missing large portions of their content.</li> - <li>Generally review the page to ensure that it's structured properly for the <a href="/en-US/docs/MDN/Contribute/Structures/Page_types">type of page</a> it is. Be sure every section that it should have is present and has appropriate content.</li> - <li>Make sure every section is complete and up-to-date, with no information missing. Are all parameters listed and explained? Make sure any exceptions are covered (this is a particularly common place where content is missing).</li> - <li>Be sure everything is fully fleshed-out. It's easy to give a quick explanation of something, but make sure that all the nuances are covered. Are there special cases? Known restrictions that the reader might need to know about?</li> - <li>There should be examples covering all parameters or at least the parameters (or properties, or attributes) that users from the beginner through intermediate range are likely to use, as well as any advanced ones that require extra explanation. Each example should be preceded with an overview of what the example will do, what additional knowledge might be needed to understand it, and so forth. After the example (or interspersed among pieces of the example) should be text explaining how the code works. Don't skimp on the details and the handling of errors in examples; readers <em>will</em> copy and paste your example to use in their own projects, and your code <em>will</em> wind up used on production sites! See <a href="/en-US/docs/MDN/Contribute/Structures/Code_examples">Code examples</a> and our <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a> for more useful information.</li> - <li>If there are particularly common use cases for the feature being described, talk about them! Instead of assuming the reader will figure out that the method being documented can be used to solve a common development problem, actually add a section about that use case with an example and text explaining how the example works.</li> - <li>Include proper {{htmlattrxref("alt", "img")}} text on all images and diagrams; this text counts, as do captions on tables and other figures.</li> - <li>Do <em>not</em> descend into adding repetitive, unhelpful material or blobs of keywords, in an attempt to improve the page's size and search ranking. This does more harm than good, both to content readability and to our search results.</li> + <li>もちろん、記事がスタブであったり、足りない部分があれば追加します。 MDN では、明らかな「スタブ」ページは避けるようにしていますが、実際には存在します。しかし、コンテンツの大部分が欠けているページはたくさんあります。</li> + <li>一般的には、<a href="/ja/docs/MDN/Structures/Page_types">ページの種類</a>に応じて適切に構成されていることを確認してください。持つべき節がすべて存在し、適切なコンテンツがあることを確認してください。</li> + <li>すべての節が完全で、最新の情報が含まれていることを確認してください。すべての引数がリストアップされ、説明されているか。例外がカバーされていることを確認してください (これは特にコンテンツが欠けていることが多い場所です)。</li> + <li>すべての項目が詳細に説明されているかどうか。簡単な説明をするのは簡単ですが、すべてのニュアンスが含まれているかどうかを確認してください。特別なケースはありますか？読者が知っておくべき既知の制限はありますか？</li> + <li>すべての引数、あるいは少なくとも初級から中級レベルのユーザーが使用する可能性のある引数 (またはプロパティや属性) と、追加の説明が必要な高度な引数を網羅した例を用意する必要があります。それぞれの例の前には、その例が何をするのか、それを理解するためにはどのような知識が必要なのかなどの概要を示す必要があります。例の後 (または例の一部の間) には、コードがどのように動作するかを説明する文章が必要です。例の詳細やエラー処理についても手を抜いてはいけません。読者は例をコピー＆ペーストして自分のプロジェクトで使用するでしょうから、そのコードが本番サイトで使用されることになるでしょう。より有用な情報は、<a href="/ja/docs/MDN/Structures/Code_examples">コード例</a>と<a href="/ja/docs/MDN/Guidelines/Code_guidelines">コード例のガイドライン</a>をご覧ください。</li> + <li>説明されている機能について、特に一般的な使用例がある場合は、それについて話してください。一般的な開発上の問題を解決するために文書化された方法を読者が理解すると仮定するのではなく、実際にその利用例についての節を追加し、例とその例がどのように機能するかを説明するテキストを追加してください。</li> + <li>すべての画像や図に適切な {{htmlattrxref("alt", "img")}} テキストを入れてください。このテキストは、表などのキャプションと同様に重要です。スパイダーは画像をクロールすることができないため、 {{htmlattrxref("alt", "img")}} テキストによって、埋め込まれたメディアに含まれるコンテンツを検索エンジンのクローラーに伝えることができます。注：検索エンジンのランキングを操作するために、キーワードを入れすぎたり、関係のないキーワードを使ったりすることは、ベストプラクティスではありません。このような行為は発見されやすく、罰せられる傾向にあります。</li> + <li>同様に、ページのサイズや検索順位を上げるために、反復的で役に立たない内容や、キーワードの塊を実際のページ内に追加するようなことも<em>しないでください</em>。これは、コンテンツの読みやすさと検索結果の両方に悪影響を及ぼします。</li> + <li>2013 年に行われた Google のハミングバードアップデートでは、自然言語による情報伝達が重視されるようになりました。つまり、特定のキーワードではなく、記事のトピックに沿ってコンテンツを書く方がはるかに良いということです。実際、多くの SEO 担当者は、記事の長さに応じて 5 ～ 100 種類のキーワード (ショートテール、ミディアムテール、ロングテール) をリストアップし、記事に含めるようにしています。そうすることで、表現が多様化し、繰り返しが少なくなります。</li> </ul> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/MDN/Contribute">Contributing to MDN</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide">Writing style guide</a></li> + <li><a href="/ja/docs/MDN/Contribute">MDN への協力</a></li> + <li><a href="/ja/docs/MDN/Guidelines/Writing_style_guide">執筆スタイルガイド</a></li> </ul> diff --git a/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html b/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html deleted file mode 100644 index 992b538e32..0000000000 --- a/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: addons.mozilla.org (AMO) API Developers' Guide -slug: orphaned/addons.mozilla.org_(AMO)_API_Developers'_Guide -tags: - - AMO - - AMO API - - Add-ons -original_slug: addons.mozilla.org_(AMO)_API_Developers'_Guide ---- -<p>AMO APIは、あなたのウェブまたは他のアプリケーションのためのインターフェースをAMOに提供します。APIはRESTをサポートし、レスポンスはXMLフォーマットで返されます。</p> -<p>現在、2つのコンポーネントがAPIにあります:</p> - - -<h2 id="The_generic_AMO_API"><a class="internal" href="/ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide/The_generic_AMO_API" title="The generic AMO API">The generic AMO API</a></h2> -<p><span class="CRHTML_TXN"><span id="eq00000g00000">これ</span><span id="eq00000g00001">は</span><span id="eq00000g00003">Firefoxアドオン</span><span id="eq00000g00005">マネージャーにより</span><span id="eq00000g00007">用いられるAPI呼び出しのセットです</span><span id="eq00000g00015">。</span></span>現在これは読み取り専用です。 <span class="CRHTML_TXN"><span id="eq00002g00000">一つ或いは複数</span><span id="eq00002g00007">のアドオングループについて</span><span id="eq00002g00010">データを検索するか、アドオンを探すことが出来ます。</span></span><span class="CRHTML_TXN"><span id="eq00003g00000">このAPIは利用のために</span><span id="eq00003g00005">認証またはAPIキーを必要としません。</span></span></p> - - -<h2 id="The_Bandwagon_API"><a class="internal" href="/ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide/The_Bandwagon_API" title="The Bandwagon API">The Bandwagon API</a></h2> -<p>バンドワゴンAPI はアドオンコレクションとの相互作用を可能にします。<span class="CRHTML_TXN"><span id="eq00001g00000">これ</span><span id="eq00001g00001">は</span><span id="eq00001g00003">読込み/書込み</span><span id="eq00001g00004">API</span><span id="eq00001g00005">で</span><span id="eq00001g00006">す</span><span id="eq00001g00007">。</span></span><span class="CRHTML_TXN"><span id="eq00002g00004">既存の</span><span id="eq00002g00005">AMOアカウント</span><span id="eq00002g00007">を</span><span id="eq00002g00007">使った</span><span id="eq00002g00009">認証</span><span id="eq00002g00010">を</span><span id="eq00002g00010">必要とし</span><span id="eq00002g00011">ます</span><span id="eq00002g00012">。</span></span></p> -<dl> -</dl> - - -<h2 id="利用規約">利用規約</h2> -<p>ここで<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/pages/developer_agreement">利用規約</a> を読んでください。</p> diff --git a/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html b/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html deleted file mode 100644 index 8e097925f8..0000000000 --- a/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 2.20-ja -slug: orphaned/Bugzilla-ja/2.20-ja -original_slug: Bugzilla-ja/2.20-ja ---- -<h3 id=".E9.85.8D.E5.B8.83"> 配布 </h3> -<p>2.20.1-ja の修正版 (Bugzilla-ja 2.20.1-ja-04 以降) については、 -<a class="external" href="http://svn.mozilla.gr.jp/bugzilla/2.20/">svn</a> にて提供しております。 -</p> -<pre class="eval">svn co <a class=" external" href="http://svn.mozilla.gr.jp/bugzilla/2.20/code/trunk/">http://svn.mozilla.gr.jp/bugzilla/2.20/code/trunk/</a> -</pre> -<p>などのコマンドにて取得してください。 -</p><p>2.20.1-ja までは、すべての修正項目を含む一つのパッチの形で、<a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/">FTP サイト</a> にて提供していました。 -配付ファイル (全てを含む一つのパッチファイル) へのリンク (上のほうが新しいです) は以下のとおり。 -</p> -<ol><li> <a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/bugzilla-ja-2.20.1-up-03-20060317.diff">2.20.1-ja -03</a> (2.20-ja へのパッチ) -</li><li> <a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/bugzilla-ja-2.20.1-03-20060317.diff">2.20.1-ja -03</a> -</li><li> <a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/bugzilla-ja-2.20-03-20060317.diff">2.20-ja -03</a> -</li><li> <a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/bugzilla-ja-2.20-02-20060111.diff">2.20-ja -02</a> -</li><li> <a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.20-ja/bugzilla-ja-2.20-01-20060109.diff">2.20-ja -01</a> -</li></ol> -<p>将来的には、各修正項目ごとのパッチを提供する予定です。(予定で終わりました。) -また、それらを本家 Bugzilla.org へ提出することで、 -Bugzilla の国際化に貢献することも目標としています。 -</p> -<h3 id=".E3.83.AA.E3.83.AA.E3.83.BC.E3.82.B9.E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3"> リリースバージョン </h3> -<p>Bugzilla-ja での修正項目・機能追加については、Bugzilla-ja 修正項目リスト (準備中) をご覧ください。なお、公開されている svn 管理移行時 -以降については、以下のリストをご参照ください。 -</p> -<ol><li> rev. 54 : code tag rel2.20.4-ja -</li><li> rev. 53 : template tag rel2.20.4-ja -</li><li> rev. 47 : template tag rel2.20.3-ja -</li><li> rev. 46 : code tag rel2.20.3-ja -</li><li> rev. 45 : fix Bugzilla-jp 5544 -</li><li> rev. 44 : fix Bugzilla-jp 5502 -</li><li> rev. 43 : fix Bugzilla-jp 5536 -</li><li> rev. 37 : fix Bugzilla-jp 5354 (Bugzilla-ja 2.20.1-ja final) -</li><li> rev. 29 : fix Bugzilla-jp 5346 -</li><li> rev. 23 : fix Bugzilla-jp 5327 -</li></ol> -<p><br> -</p> -<h3 id=".E4.BD.9C.E6.A5.AD.E8.A8.98.E9.8C.B2"> 作業記録 </h3> -<p>Bugzilla のリビジョン (2.20<b>.1</b> など) ごとに <a class="external" href="http://bugzilla.mozilla.gr.jp">Bugzilla-jp</a> -にメタバグを立てています。そちらを妨害しているバグをご覧ください。 -</p> -<ol><li> <a class="external" href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5501">Bugzilla-ja 2.20.3-ja (Bug# 5501)</a> -</li><li> <a class="external" href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5195">">Bugzilla-ja 2.20.1-ja (Bug# 5195)</a> -</li><li> <a class="external" href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4893">">Bugzilla-ja 2.20-ja (Bug# 4893)</a> -</li></ol> -<h3 id=".E9.80.A3.E7.B5.A1.E5.85.88"> 連絡先 </h3> -<p>Bugzilla-ja のバグについては、<a class="external" href="http://bugzilla.mozilla.gr.jp">Bugzilla-jp</a> まで報告してください。 -Bugzilla-ja についてのお問い合わせは、<a class="link-mailto" href="mailto:bugzilla@mozilla.gr.jp">Bugzilla-ja プロジェクト</a> -までお願いいたします。 -</p> diff --git a/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html b/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html deleted file mode 100644 index 4f565a2d57..0000000000 --- a/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 3.0-ja -slug: orphaned/Bugzilla-ja/3.0-ja -original_slug: Bugzilla-ja/3.0-ja ---- -<h3 id="About_trunk" name="About_trunk">About trunk</h3> - -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/">Bugzilla-jp</a> は基本的に Bugzilla-ja 3.0 trunk を利用しています。 ただし、時々コミット後に重大なバグが発見されることがあります。</p> - -<p>現在の最新版は、Bugzilla-ja 3.0.3-ja.7 です。</p> - -<h4 id=".E5.B8.B8.E7.94.A8.E5.8F.AF.E8.83.BD.E3.81.8B.E3.82.82.E3.81.97.E3.82.8C.E3.81.AA.E3.81.84_revision_.28trunk.29" name=".E5.B8.B8.E7.94.A8.E5.8F.AF.E8.83.BD.E3.81.8B.E3.82.82.E3.81.97.E3.82.8C.E3.81.AA.E3.81.84_revision_.28trunk.29">常用可能かもしれない revision (trunk)</h4> - -<p>Bugzilla-jp で実運用されている (and/or されたことがある) revision のリストです。</p> - -<h5 id="r_185" name="r_185">r 185</h5> - -<p>Bugzilla-ja 3.0.3-ja.7 リリース候補</p> - -<h5 id="r_170" name="r_170">r 170</h5> - -<p>trunk r 166 で発生した <a href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5855">5855</a> が修正されています。</p> - -<h5 id="r_149" name="r_149">r 149</h5> - -<p>Bugzilla 3.0.1 相当のセキュリティーパッチが当たったバージョン。 {{ Bug(386942) }} (<a href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5806">5806</a>) が r108、{{ Bug(386860) }} が r148、{{ Bug(382056) }} が r149 で修正されています。</p> - -<h3 id="tag_.E3.83.AA.E3.83.AA.E3.83.BC.E3.82.B9.E4.B8.80.E8.A6.A7" name="tag_.E3.83.AA.E3.83.AA.E3.83.BC.E3.82.B9.E4.B8.80.E8.A6.A7">tag リリース一覧</h3> - -<h4 id="3.0-ja.1" name="3.0-ja.1">3.0-ja.1</h4> - -<h4 id="3.0-ja.2" name="3.0-ja.2">3.0-ja.2</h4> - -<h4 id="3.0-ja.3" name="3.0-ja.3">3.0-ja.3</h4> - -<h4 id="3.0-ja.4" name="3.0-ja.4">3.0-ja.4</h4> - -<h4 id="3.0-ja.5" name="3.0-ja.5">3.0-ja.5</h4> - -<p>クリティカルなバグ <a href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5855">5855</a> があります。3.0-ja.6 を利用してください。</p> - -<h4 id="3.0-ja.6" name="3.0-ja.6">3.0-ja.6</h4> - -<p>現在の最新版です。(2007/09/05)</p> - -<h4 id="3.0.3-ja.7" name="3.0.3-ja.7">3.0.3-ja.7</h4> - -<p>Bugzilla 3.0.3 にあわせてリリースしたバージョン。</p> - -<ul> - <li>Bugzilla 3.0.3 までの Security Fix</li> - <li>utf8 関係のコードの整理 (Bugzilla.pm の先頭にある UTF8 関係の宣言をコメントアウトしている方は置き換えてください。必要なくなりました)</li> -</ul> - -<p>パラメータで、utf8関係のものは'on'にしなければ、multibyte UTF8 (日本語を含む) 環境では動作は保証されません。</p> - -<p>なお、MySQL環境についてのみ試験が行われています。PostgreSQLに関して、DB ドライバに依存する部分にバグがあるかもしれません。</p> - -<h3 id="branch_.E4.B8.80.E8.A6.A7" name="branch_.E4.B8.80.E8.A6.A7">branch 一覧</h3> - -<h4 id="3.1.1_.28abolished.29" name="3.1.1_.28abolished.29">3.1.1 (abolished)</h4> - -<p>Bugzilla.org tag BUGZILLA-3_0rc1 以降に出たパッチのうち、3.0 に適用可能なものを適用、試験を行うためのブランチ。</p> diff --git a/files/ja/orphaned/bugzilla-ja/index.html b/files/ja/orphaned/bugzilla-ja/index.html deleted file mode 100644 index 9812556e71..0000000000 --- a/files/ja/orphaned/bugzilla-ja/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Bugzilla-ja -slug: orphaned/Bugzilla-ja -original_slug: Bugzilla-ja ---- -<h2 id="Bugzilla-ja_.E3.81.A8.E3.81.AF" name="Bugzilla-ja_.E3.81.A8.E3.81.AF">Bugzilla-ja とは</h2> - -<p>Bugzilla-ja は、<a class="external" href="http://bugzilla.org">Bugzilla</a> を日本語環境で利用できるように <abbr title="internationalization">i18n</abbr> (国際化) 対応および日本語化するプロジェクトです。ユーザグループの立ち上げと<a class="external" href="http://bug-ja.org/">公式サイト</a>の構築中です。l10n -ja の作業に興味のある方は、<a href="/ja/Bugzilla-ja/l10n" title="ja/Bugzilla-ja/l10n">Bugzilla-ja l10n のドキュメント</a>を参照してください。</p> - -<p>Bugzilla-ja は、3.0.3 (or 3.1+)以降、日本語環境(もしくはCJK)のみで必要な独自パッチ以外については、Bugzilla 本家に その成果をマージする方向で活動しています。 詳細に関しては、<a class="link-https" href="https://bugzilla.mozilla.org">bmo</a> の Bugzilla プロダクトの各国際化に関するバグ、 もしくは <a class="external" href="http://wiki.mozilla.org/Bugzilla:L10n">Bugzilla Localization Working Group</a> を参照してください。</p> - -<p>Bugzilla Users Group in Japan ( <a class="external" href="http://bug-ja.org/" title="http://bug-ja.org/">bug-ja.org</a>) を立ち上げ中です。ご興味がおありの方は<a class="external" href="http://bugzilla.jpmoz.net/" title="http://bugzilla.jpmoz.net/">bugzilla@jpmoz</a>までご連絡ください。なお、<a class="external" href="http://bug-ja.org/mozwiki/index.php/Bugzilla-ja">プロジェクトの作業メモ</a>は公開されております。Bugzilla-ja に関するアナウンスについては<a class="external" href="http://shimono.no-ip.info/blog/">プロジェクトマネージャーのblog</a>などを参照してください。</p> - -<p>We are now planning to build <a class="external" href="http://bug-ja.org/">a new community named Bugzilla Users Group in Japan</a> (bug-ja.org). And refer <a class="external" href="http://shimono.no-ip.info/blog/">the project manager's blog</a> for newer announces.</p> - -<h3 id="バグ報告・日本語での議論">バグ報告・日本語での議論</h3> - -<p>日本語でのバグ報告は、<a class="external" href="http://bugzilla.jpmoz.net" title="http://bugzilla.jpmoz.net/">bugzilla@jpmoz</a>の<a class="external" href="http://bugzilla.jpmoz.net/enter_bug.cgi?product=bug-ja">bug-jaプロダクト</a>で行えます。主に、日本語にも影響する国際化に関する問題がターゲットですが、それ以外の一般的なバグの報告も受け付けています。<a class="link-https" href="https://bugzilla.mozilla.org/">bmo</a>にすでに登録されているものはそれに紐付け、それ以外については問題を特定してからbmoへ持っていきます。(すべてのパッチはbmoでのレビューが必要です。bugzilla@jpmozでは、機能要望については受け付けますが対象としません。)</p> - -<p>日本語での議論・サポートに関しては、<a class="link-irc" href="irc://irc.jpmoz.net/bug-ja" title="irc://irc.jpmoz.net/bug-ja">IRC</a>が利用可能です。反応がいつもすぐに返るとは限りませんのでご注意ください。</p> - -<h3 id="Bugzilla_.E3.81.A8.E3.81.AF" name="Bugzilla_.E3.81.A8.E3.81.AF">Bugzilla とは</h3> - -<p>Bugzilla とは、「問題追跡システム」または「バグ追跡システム」と呼ばれるもので、開発者が個人やグループで、製品に存在する問題を洗い出して追跡し、 効果的な解決の手助けをするシステムです。商用のバグ追跡システムもありますが、Mozilla プロジェクトではオープンソースソフトウェアとして、 誰もが自由に利用できるようにしています。Bugzilla の評価は非常に高く、<a class="external" href="http://www.bugzilla.org/installation-list/">多くの企業・団体</a> で採用されています。2008年11月には、NASAのスペースシャトル計画 (および将来的な宇宙機開発プロジェクト) の問題追跡システムにも採用されました。(<a class="external" href="http://www.bugzilla.org/news/#praca">*1</a> <a class="external" href="http://www.mozilla.gr.jp/~shimono/blog/?p=86">*2</a>)</p> - -<h3 id="Bugzilla-ja_for_trunk">Bugzilla-ja for trunk</h3> - -<p>Bugzilla trunk向けの<a class="external" href="http://bug-ja.org/svn/bugzilla-l10n-ja/">レポジトリ</a>が利用できます。なお、このテンプレートパックは定期的にしか更新されていませんので、最新のBugzilla trunkとあわせて動作する保障はありません。</p> - -<p>最新の開発版は3.5.1です。</p> - -<h3 id="Bugzilla-ja_3.4_branch">Bugzilla-ja 3.4 branch</h3> - -<p>Bugzilla 3.4の日本語化パックは、<a class="external" href="http://bug-ja.org/">bug-ja.org</a>で配布されており、<a class="external" href="http://bug-ja.org/svn/bugzilla-l10n-ja-3.4/">レポジトリ</a>も利用可能です。現在の最新版は3.4.3です。</p> - -<h3 id="Bugzilla-ja_3.2_branch">Bugzilla-ja 3.2 branch</h3> - -<p>Bugzilla 3.2の日本語化パックは、<a class="external" href="http://bug-ja.org">bug-ja.org</a>で配布されており、<a class="external" href="http://bug-ja.org/svn/bugzilla-l10n-ja-3.2/">レポジトリ</a>も利用可能です。現在の最新版は3.2.5です。なお、3.2をご利用の方は、3.4へのアップグレードを早急にご検討ください。まもなく日本語版のサポートは終了します。</p> - -<h3 id="サポート終了済みの過去のバージョン">サポート終了済みの過去のバージョン</h3> - -<h4 id="Bugzilla-ja_3.0">Bugzilla-ja 3.0</h4> - -<p>詳細については、<a href="/ja/Bugzilla-ja/3.0-ja" title="ja/Bugzilla-ja/3.0-ja">3.0-ja</a> を参照してください。なお、3.0ブランチはすでに更新停止しております。bmoにある最近のパッチがそのまま適用可能であろうことはチェックしていますが、レポジトリへの展開や確認はされておりません。</p> - -<p>Bugzilla-ja に含まれる日本語テンプレートは、Bugzilla 3.0 向けではありますが、bugzilla.org 配布の Bugzilla 3.0 とともに利用することは推奨しません。</p> - -<p>We strongly recommand not to use our Bugzilla-ja 3.0 template pack with bugzilla.org's 3.0. Such site will NEVER work properly.</p> - -<h4 id="Bugzilla-ja_2.20">Bugzilla-ja 2.20</h4> - -<p>注 : Bugzilla-ja 2.20シリーズはすでにサポートされていません。bugzilla.orgでの2.20シリーズのサポートは、Bugzilla 3.2リリース(2008/07予定)までです。</p> - -<h4 id=".E7.9B.AE.E7.9A.84" name=".E7.9B.AE.E7.9A.84">目的</h4> - -<p>データベースの文字コードが UTF-8 となった Bugzilla 2.20 について、 マルチバイト UTF-8 など <abbr title="internationalization">i18n</abbr> (国際化) で必要なパッチを提供します。 そのうえで日本語環境で必要な送信されるメールの文字コードについてなど の問題を解決し、日本語環境でも問題なく今までと同様に利用できるようにした Bugzilla (Bugzilla-ja) を提供するプロジェクトです。</p> - -<p>なお、過去の Bugzilla-ja 2.16-ja からのアップグレードを行うためのスクリプト・手順 も提供します。</p> - -<p>詳細は、<a href="/ja/Bugzilla-ja/2.20-ja" title="ja/Bugzilla-ja/2.20-ja">2.20-ja</a> を参照してください。</p> - -<p> </p> - -<h4 id="Bugzilla-ja_2.16">Bugzilla-ja 2.16</h4> - -<div class="notice">注：Bugzilla 2.16 の利用は推奨されていません。新規利用の方は、最新版の利用を検討してください。</div> - -<h4 id=".E7.9B.AE.E7.9A.84_2" name=".E7.9B.AE.E7.9A.84_2">目的</h4> - -<p>Bugzilla (-2.16) を日本語化し、利用、配布可能にすることを目的としていました。</p> - -<h4 id=".E9.85.8D.E5.B8.83" name=".E9.85.8D.E5.B8.83">配布</h4> - -<p><a class="link-ftp" href="ftp://ftp.mozilla.gr.jp/Bugzilla-ja/2.16-ja">もじら組 FTP サイト</a> にあります。</p> - -<h4 id=".E4.BD.9C.E6.A5.AD.E8.A8.98.E9.8C.B2.E3.81.A8.E6.8B.85.E5.BD.93.E8.80.85" name=".E4.BD.9C.E6.A5.AD.E8.A8.98.E9.8C.B2.E3.81.A8.E6.8B.85.E5.BD.93.E8.80.85">作業記録と担当者</h4> - -<p>Bugzilla-jp <a href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=2228">2228</a>, <a href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=2796">2796</a> 等のコメントをご覧ください。</p> - -<ol> - <li>Ryuzi Kambe</li> - <li>おこめ (ドキュメント和訳)</li> - <li>Itou Hiroki</li> - <li>他</li> -</ol> diff --git a/files/ja/orphaned/bugzilla-ja/l10n/index.html b/files/ja/orphaned/bugzilla-ja/l10n/index.html deleted file mode 100644 index 51aa660f3f..0000000000 --- a/files/ja/orphaned/bugzilla-ja/l10n/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: 日本語パック -slug: orphaned/Bugzilla-ja/l10n -original_slug: Bugzilla-ja/l10n ---- -<h3 id="参加するには">参加するには</h3> -<p>参加するには 2 通りの方法があります。 一つ目は、公開されるレポジトリに対してのコミット権限も持つ方法で、興味のある方は<a class=" external" href="http://bugzilla.jpmoz.net">bugzilla@jpmoz</a>までバグとして登録してください。 二つ目は、試験サイトや公開レポジトリを参照し、翻訳に問題があると思われる部分を<a class=" external" href="http://bugzilla.jpmoz.net/">指摘する</a>という方法です。 こちらでは、特にアカウント登録などの必要はありません。(詳細は、下の問題の指摘方法をご覧ください。)</p> -<p>一つ目の方法での参加を希望の方は、希望するアカウント名、メーリングリスト登録用メールアドレスをつけて<a class=" external" href="http://bugzilla.jpmoz.net/">bugzilla@jpmoz</a>にバグを登録してください。アカウントなどの情報をお送りします。 </p> -<h4 id=".E3.83.A1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.E3.83.AA.E3.82.B9.E3.83.88">メーリングリスト</h4> -<p>メーリングリストは準備中です。</p> -<h4 id=".E3.83.AC.E3.83.9D.E3.82.B8.E3.83.88.E3.83.AA">レポジトリ</h4> -<p>専用の Subversion レポジトリを用意しています。<a class=" external" href="http://bug-ja.org/svn/">公開レポジトリ</a> (仮URL)と、それに対してのコミットが可能になる SSL 経由でのレポジトリが用意されています。 コミットのたびに、試験サイトの中身が自動的に更新されます。また、この更新履歴はメーリングリストに流れます。</p> -<h4 id="試験用サイト">試験用サイト</h4> -<p>試験用サイトは準備中です。</p> -<h4 id=".E5.95.8F.E9.A1.8C.E3.81.AE.E6.8C.87.E6.91.98.E6.96.B9.E6.B3.95">問題の指摘方法</h4> -<p>テンプレートに関する問題の指摘は、<a class=" external" href="http://bugzilla.jpmoz.net/">bugzilla@jpmoz</a> までバグとして登録してください。 問題が再現できる url もしくはテンプレートファイル名をつけてお願いします。(パッチを書ける方は、できればレポジトリへのアクセス権限を取得して自分でコミットしていただければ助かります。)</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html deleted file mode 100644 index 3d30327944..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: AccountCreation -slug: orphaned/Bugzilla-jp/Guide/About/AccountCreation -original_slug: Bugzilla-jp/Guide/About/AccountCreation ---- -<h3 id=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">アカウントを作成する</h3> -<p>Bugzilla-jpを利用するにはアカウントを作成する必要があります。バグを参照する場合のみ、アカウントは必要ありませんが、バグを追跡したり、発言したりするためにはアカウントが必ず必要です。</p> -<p>アカウントを取得するのに必要なのは有効なメールアドレスのみです。ただし、Bugzilla上ではアカウントの表示に際して、メールアドレスも露出することになるので、<b>そのメールアドレスにはほぼ確実にスパムメールが来ることになります</b>。現在、常用されているメールアドレスよりもBugzillaアカウント用のメールアドレスを用意することを推奨します。</p> -<p>アカウントを作成するには以下のURIにアクセスします。(<a class="external" href="http://bugzilla.mozilla.gr.jp/">Bugzilla-jpのトップページ</a>から、「新規アカウント」でも同じです。)</p> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/createaccount.cgi" rel="freelink">http://bugzilla.mozilla.gr.jp/createaccount.cgi</a></p> -<p>ここで、次のようなフォームが表示されます。</p> -<p><img alt="アカウント作成フォームのスクリーンショット" src="/@api/deki/files/1633/=Bugzilla-jp-Guide-NewAccountForm.png"></p> -<p>まず、Bugzilla-jpのアカウントとして利用するメールアドレスを入力してください。次に、メールの文字コードも指定できますが、ここは空白のままにしてください。</p> -<p>メモ: Yahoo!メールのようにUTF-8に対応していないWebメールやメールクライアント(MUA)を利用されている場合はiso-2022-jpも利用可能です。ただし、Bugzilla-jpではUTF-8で利用可能な文字全てが入力可能ですので、ISO-2022-JPでは全てのメッセージを読むことはできませんので、Bugzilla-jpの利用においてUTF-8を利用できないメール環境の利用は推奨されません。</p> -<p>すると、次のようなメールが送信されます。</p> -<p><img alt="アカウント作成の確認メール" src="/@api/deki/files/1627/=Bugzilla-jp-Guide-ConfirmingMailForNewAccount.png"></p> -<p>ここで、そのままアカウントの作成を続ける時は一つ目のURLをブラウザで開いてください。すると、次のようなフォームが表示されます。</p> -<p><img alt="アカウント作成の確認フォームのスクリーンショット" src="/@api/deki/files/1626/=Bugzilla-jp-Guide-ConfirmingFormForNewAccount.png"></p> -<p>実名はオプションなので入力しなくてもかまいませんが、設定されることをお勧めします。実名が未設定の場合、メールアドレスが実名の代わりに表示されます。また、他の人があなたの名前を記述する場合に、メールアドレスが直に書かれることになります。これはスパムメールをより呼び込みやすくなってしまうことに注意してください。</p> -<p>多くの人がBugzilla-jp上では本名で活動していますが、実名は必ずしも本名である必要はありません。既にインターネット上でよく利用しているハンドルネームがあるなら、それを利用するのも良いでしょう。</p> -<p>「パスワード」と「パスワード再入力」では、あなたのアカウントでログインする時に使うパスワードを設定します。なりすましを避けるためにもある程度複雑なものを使用してください。</p> -<p>「送信メール文字コード」は、あなたのメールアドレスに送信されるメールの文字コードを指定します。ここは最初のフォームと同じく空白のままでかまいません。</p> -<p>必要な項目を入力し、「登録」ボタンを押すと作業完了です。</p> -<p>なお、これ以降、Bugzilla-jpを利用する際には<b>Cookieは有効</b>にしておいてください。BugzillaではCookieによってセッション管理を行っていますので、Cookie無しではログインできません。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html deleted file mode 100644 index e357efd6d9..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: BugDetails -slug: orphaned/Bugzilla-jp/Guide/About/BugDetails -original_slug: Bugzilla-jp/Guide/About/BugDetails ---- -<h3 id=".E3.83.90.E3.82.B0.E3.81.AE.E8.A9.B3.E7.B4.B0.E6.83.85.E5.A0.B1" name=".E3.83.90.E3.82.B0.E3.81.AE.E8.A9.B3.E7.B4.B0.E6.83.85.E5.A0.B1">バグの詳細情報</h3> -<p>Bugzillaのバグはフォーラムで言う一つのスレッドを一つのバグとして管理しています。各バグにはそのバグを端的に表す情報部分と、一度書き込むと修正できないコメント部分があります。情報部分はコメント部分に書き込まれた内容に基づいて、必要なら修正されます。</p> -<h4 id="Bug_.23" name="Bug_.23">Bug #</h4> -<p>バグを一意に表現するための番号、バグのIDです。 登録されたときに採番され、変更されることはありません。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.80.81.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88" name=".E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.80.81.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88">プロダクト、コンポーネント</h4> -<p>バグがどの製品の、どの部分のバグなのかを示す情報です。 詳細は、<a href="ProductsAndComponents">プロダクトとコンポーネント</a>を参照してください。</p> -<h4 id=".E3.82.B9.E3.83.86.E3.83.BC.E3.82.BF.E3.82.B9.E3.80.81.E5.87.A6.E7.90.86.E6.96.B9.E6.B3.95" name=".E3.82.B9.E3.83.86.E3.83.BC.E3.82.BF.E3.82.B9.E3.80.81.E5.87.A6.E7.90.86.E6.96.B9.E6.B3.95">ステータス、処理方法</h4> -<p>バグの状態や、解決済みのバグであれば、その処理方法を示します。 この状態や処理方法の意味はプロダクトごとに違いがあります。 詳細は、<a href="../LifeCycle">バグのライフサイクル</a>以下のプロダクトごとのドキュメントを参照してください。</p> -<h4 id=".E6.8B.85.E5.BD.93.E8.80.85" name=".E6.8B.85.E5.BD.93.E8.80.85">担当者</h4> -<p>そのバグの担当者のアカウントを示します。担当者は実際にバグの修正に関与している場合もありますし、単にそのバグの動向を追跡しているだけの場合もあります。また、プロダクトによって担当者の役割が異なることがあります。詳細は<a href="../LifeCycle">バグのライフサイクル</a>以下のプロダクトごとのドキュメントを参照してください。また、それをふまえて、各バグのコメントも参照してください。</p> -<h4 id="QA.E3.82.B3.E3.83.B3.E3.82.BF.E3.82.AF.E3.83.88" name="QA.E3.82.B3.E3.83.B3.E3.82.BF.E3.82.AF.E3.83.88">QAコンタクト</h4> -<p>QAコンタクトは直訳すると品質管理担当者を意味します。この項目は一般の利用者は特に気にする必要はありません。Bugzilla-jpでは一部のコンポーネントを除き、原則としてデフォルトの担当者は存在しません。その代わりに、各コンポーネントをデフォルトのQAコンタクトが統括管理しています。</p> -<h4 id="URL" name="URL">URL</h4> -<p>そのバグが再現する実在のサイトやテストケースへのURLです。決して報告者の運営するWebサイトを宣伝するためのものではありません。</p> -<h4 id=".E8.A6.81.E7.B4.84" name=".E8.A6.81.E7.B4.84">要約</h4> -<p>そのバグの症状や原因、条件を端的に示す、そのバグにつけられた要約です。</p> -<p>Bugzilla-jpではコンポーネントが細分化されていないため、特定の部位のバグを要約内で、{{ mediawiki.external('と') }}を使って明示していることがあります。よくあるものでは、{{ mediawiki.external('Cairo') }}や{{ mediawiki.external('CSS3') }}等があります。また、特定のプラットフォームでのみ発生するバグを明記するために、{{ mediawiki.external('Win') }}、{{ mediawiki.external('Mac') }}といった使い方もされています。</p> -<h4 id=".E3.83.9B.E3.83.AF.E3.82.A4.E3.83.88.E3.83.9C.E3.83.BC.E3.83.89" name=".E3.83.9B.E3.83.AF.E3.82.A4.E3.83.88.E3.83.9C.E3.83.BC.E3.83.89">ホワイトボード</h4> -<p>スタッフがバグの進捗を示すためにメモ書きとして使うためのフィールドです。一般的に、関連づけしたBugzilla-orgのバグIDを記述したり、そのバグの状態(FIXED等)を記述したりします。</p> -<h4 id=".E3.82.AD.E3.83.BC.E3.83.AF.E3.83.BC.E3.83.89" name=".E3.82.AD.E3.83.BC.E3.83.AF.E3.83.BC.E3.83.89">キーワード</h4> -<p>この項目にはあらかじめ登録されているキーワードをカンマ区切りで記述しています。キーワードの一覧と、各キーワードの説明は、<a class="external" href="http://bugzilla.mozilla.gr.jp/describekeywords.cgi">Bugzilla-jpのキーワードの説明</a>を参照してください。</p> -<h4 id=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0" name=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0">プラットフォーム</h4> -<p>バグが発生するプラットフォーム(ハードウェア)を示します。</p> -<h5 id="All" name="All">All</h5> -<p>全てのプラットフォームで発生するバグです。</p> -<h5 id="Macintosh" name="Macintosh">Macintosh</h5> -<p>Apple社のMacintoshで発生するバグです。Intel MacはMacintoshではなくPCになります。</p> -<h5 id="PC" name="PC">PC</h5> -<p>一般的なIntel系CPUを搭載したPCか、もしくはIntel Macで発生するバグです。</p> -<h5 id="Sun" name="Sun">Sun</h5> -<p>Sun Microsystems社のワークステーションで発生するバグです。</p> -<h5 id="Other" name="Other">Other</h5> -<p>上記に無いプラットフォームで発生するバグである場合、これが選択されますが、大抵の場合はWebサイトの問題等、分類不可能なバグの場合に利用されています。</p> -<h4 id="OS" name="OS">OS</h4> -<p>バグが発生するOSを示します。</p> -<h5 id="All_2" name="All_2">All</h5> -<p>全てのOSで発生するバグです。(実質的には、二つ以上のOSで発生する場合にAllとされます。)</p> -<h5 id="Windows_95.E3.80.81Windows_98.E3.80.81Windows_ME.E3.80.81Windows_2000.E3.80.81Windows_NT.E3.80.81Windows_XP.E3.80.81Windows_Vista" name="Windows_95.E3.80.81Windows_98.E3.80.81Windows_ME.E3.80.81Windows_2000.E3.80.81Windows_NT.E3.80.81Windows_XP.E3.80.81Windows_Vista">Windows 95、Windows 98、Windows ME、Windows 2000、Windows NT、Windows XP、Windows Vista</h5> -<p>Windowsで発生するバグです。一般的に、Windowsのバージョンに関係なく発生することが多いので最初にバグが確認されたWindowsのバージョンが選択されていることを示します。</p> -<h5 id="Mac_System_7.E3.80.81Mac_System_7.5.E3.80.81Mac_System_7.6.1.E3.80.81Mac_System_8.0.E3.80.81Mac_System_8.5.E3.80.81Mac_System_8.6.E3.80.81Mac_System_9.0" name="Mac_System_7.E3.80.81Mac_System_7.5.E3.80.81Mac_System_7.6.1.E3.80.81Mac_System_8.0.E3.80.81Mac_System_8.5.E3.80.81Mac_System_8.6.E3.80.81Mac_System_9.0">Mac System 7、Mac System 7.5、Mac System 7.6.1、Mac System 8.0、Mac System 8.5、Mac System 8.6、Mac System 9.0</h5> -<p>旧Mac OSで発生するバグです。現在は新規には取り扱っていません。</p> -<h5 id="Mac_OS_X_Server.E3.80.81Mac_OS_X" name="Mac_OS_X_Server.E3.80.81Mac_OS_X">Mac OS X Server、Mac OS X</h5> -<p>Mac OS Xで発生するバグです。</p> -<h5 id="Linux" name="Linux">Linux</h5> -<p>Linuxで発生するバグです。ディストリビューション等はコメント本文を確認する必要があります。</p> -<h5 id="FreeBSD.E3.80.81Solaris" name="FreeBSD.E3.80.81Solaris">FreeBSD、Solaris</h5> -<p>各UNIX互換OSで発生するバグです。</p> -<h5 id="OS.2F2" name="OS.2F2">OS/2</h5> -<p>OS/2で発生するバグです。</p> -<h5 id="BeOS" name="BeOS">BeOS</h5> -<p>BeOSで発生するバグです。</p> -<h5 id="other" name="other">other</h5> -<p>上記に無いOSで発生するバグである場合、これが選択されます。また、Webサイトの問題等、分類不可能なバグの場合に利用されています。</p> -<h4 id=".E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3" name=".E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3">バージョン</h4> -<p>バグの発生するバージョンを示します。unspecifiedは不明な場合や、適切なバージョンが無い場合に利用されます。Trunk、Branch等の意味は<a href="TrunkAndBranch">TrunkとBranchの違いと注意</a>を参照してください。</p> -<h4 id=".E5.84.AA.E5.85.88.E9.A0.86.E4.BD.8D" name=".E5.84.AA.E5.85.88.E9.A0.86.E4.BD.8D">優先順位</h4> -<p>そのバグを修正する人が考えている、そのバグの優先順位です。Bugzilla-orgのバグと関連づけられているバグは、Bugzilla-orgの設定しているものと同じ値になります。P1が最も優先順位が高く、P5は最も優先順位が低いことを示します。--は未設定であることを示しています。</p> -<p>あくまでも目安以上の意味はありません。P1よりもP2のバグが先に修正されることもよくあります。</p> -<h4 id=".E6.B7.B1.E5.88.BB.E5.BA.A6" name=".E6.B7.B1.E5.88.BB.E5.BA.A6">深刻度</h4> -<p>そのバグがどの程度深刻な問題であるかを示します。</p> -<h5 id="blocker" name="blocker">blocker</h5> -<p>最も重大なバグであることを意味します。例えば、プロダクトをビルドできない、起動時にクラッシュする、日本語入力が全くできない等、テストのための利用すら困難なバグが該当します。</p> -<h5 id="critical" name="critical">critical</h5> -<p>blocker程では無いにしても重大な問題であることを意味します。例えば、クラッシュや、ハングアップ、データの損失に関しては無条件にcriticalに設定されます。また、それ以外でも特に重大なバグであるものの、blockerには当たらないバグが該当します。</p> -<h5 id="major" name="major">major</h5> -<p>特定の機能の大部分が機能しないような大きめのバグであることを意味します。例えば、文字化けが原因で使い物にならない状態に陥ったり、IMEの一部機能が全く利用できない場合等がこれに該当します。</p> -<h5 id="normal" name="normal">normal</h5> -<p>通常のバグであることを意味します。</p> -<h5 id="minor" name="minor">minor</h5> -<p>あまり多くの人に利用されていない機能のバグや、修正されなくても特に困らないようなバグがこれに該当します。</p> -<h5 id="trivial" name="trivial">trivial</h5> -<p>UIの表記ミスや、機能にはほとんど影響の無いような細かいバグがこれに該当します。</p> -<h5 id="enhancement" name="enhancement">enhancement</h5> -<p>要望であることを意味します。一般的な用語としての<a href="WhatIsBug">バグ</a>には該当しないものです。</p> -<h4 id=".E3.82.BF.E3.83.BC.E3.82.B2.E3.83.83.E3.83.88.E3.83.9E.E3.82.A4.E3.83.AB.E3.82.B9.E3.83.88.E3.83.BC.E3.83.B3" name=".E3.82.BF.E3.83.BC.E3.82.B2.E3.83.83.E3.83.88.E3.83.9E.E3.82.A4.E3.83.AB.E3.82.B9.E3.83.88.E3.83.BC.E3.83.B3">ターゲットマイルストーン</h4> -<p>そのバグを修正する人が考えている、最初に修正されるリリース(アルファリリース、ベータリリースを含む)を示します。あくまでも目標であって、必ずそこまでに修正される、というものではありません。もし、Futureとなっている場合はバグを修正する目処が立っていないことを意味します。つまり、新たに別の人が修正に名乗り出ない限り、なかなか修正されないでしょう。</p> -<p>また、修正済みのバグの場合、そのバグが修正された最初のリリースを示します。ですが、1.8 branch以前はこの設定を行っていなかったので、修正済みのバグに関してこの項目を信用できるのはそれ以降のもののみです。FirefoxやThunderbirdのバージョンで言い直すと、1.5以降、ということになります。</p> -<h4 id="Bug_xxxx.E3.81.8C.E4.BE.9D.E5.AD.98.E3.81.99.E3.82.8B" name="Bug_xxxx.E3.81.8C.E4.BE.9D.E5.AD.98.E3.81.99.E3.82.8B">Bug xxxxが依存する</h4> -<p>そのバグが依存しているバグの一覧を示します。依存しているとは、例えばその依存しているバグが修正されないと、修正できない場合や、依存しているバグが修正されたら、同時にそのバグも修正されるであろう場合を言います。</p> -<p>バグIDだけでは分かりにくいので「依存ツリーを表示」を利用すると、より分かりやすいでしょう。</p> -<h4 id="Bug_xxxx.E3.81.8C.E5.A6.A8.E5.AE.B3.E3.81.99.E3.82.8B" name="Bug_xxxx.E3.81.8C.E5.A6.A8.E5.AE.B3.E3.81.99.E3.82.8B">Bug xxxxが妨害する</h4> -<p>そのバグが修正を妨害している他のバグの一覧を示します。妨害しているとは、「依存する」の逆です。そのバグが修正されないと、他のバグが修正できない、という状況です。</p> -<p>regressionバグの場合、その原因となったバグを妨害するものとして登録します。なぜなら、そのregressionが解消されないと、その原因となったバグの修正が完了したとは言えないからです。</p> -<p>こちらは、「依存グラフを表示」を利用しても見やすくはないかもしれません。</p> -<h4 id="Bug_.E3.81.AE.E5.8B.95.E3.81.8D.E3.82.92.E8.A6.8B.E3.82.8B" name="Bug_.E3.81.AE.E5.8B.95.E3.81.8D.E3.82.92.E8.A6.8B.E3.82.8B">Bug の動きを見る</h4> -<p>これまでの項目の修正履歴を一覧表の形で見ることができます。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html deleted file mode 100644 index 423cecbe9c..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: ChangeAccountPrefs -slug: orphaned/Bugzilla-jp/Guide/About/ChangeAccountPrefs -original_slug: Bugzilla-jp/Guide/About/ChangeAccountPrefs ---- -<h3 id=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">アカウントの設定を変更する</h3> -<p>Bugzillaではアカウントに関するいくつかの設定をユーザ自身で変更可能です。ここではその中でも特に有益なものを紹介しておきます。なお、アカウントの削除はできません。アカウントの削除に関しては<a href="../Management/DeleteAccount">アカウントの削除申請</a>を参照してください。</p> -<p>アカウントの設定を行うには、<a class="external" href="http://bugzilla.mozilla.gr.jp/userprefs.cgi">環境設定</a>にアクセスしてください。</p> -<h4 id=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">パスワードを変更する</h4> -<p>アカウントのパスワードは<a class="external" href="http://bugzilla.mozilla.gr.jp/userprefs.cgi?tab=account">名前とパスワード</a>で変更できます。</p> -<p>このアカウント設定で、「パスワード」欄に現在のパスワードを、「新しいパスワード」欄と、「もう一度」欄に新しいパスワードを入力して、「変更の保存」ボタンを押せば、新しいパスワードに変更されます。</p> -<h4 id=".E5.90.8D.E5.89.8D.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E5.90.8D.E5.89.8D.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">名前を変更する</h4> -<p>名前を変更する場合も<a class="external" href="http://bugzilla.mozilla.gr.jp/userprefs.cgi?tab=account">名前とパスワード</a>で、「パスワード」欄に現在のパスワードを入力してください。「名前 (オプション、でも推奨)」欄には既に現在の名前が設定されているので、これを新しい名前に変更し、「変更の保存」ボタンを押してください。</p> -<h4 id=".E3.83.A1.E3.83.BC.E3.83.AB.E3.82.A2.E3.83.89.E3.83.AC.E3.82.B9.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.83.A1.E3.83.BC.E3.83.AB.E3.82.A2.E3.83.89.E3.83.AC.E3.82.B9.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">メールアドレスを変更する</h4> -<p>メールアドレスを変更する場合も<a class="external" href="http://bugzilla.mozilla.gr.jp/userprefs.cgi?tab=account">名前とパスワード</a>で、「パスワード」欄に現在のパスワードを入力してください。そして、「新しいメールアドレス」に新しいメールアドレスを入力して、「変更の保存」ボタンを押してください。</p> -<p>そうすると、現在のメールアドレスと、新しいメールアドレスの双方に以下のようなメールが届きます。</p> -<p><img alt="現在のアドレスに届くメール" src="/@api/deki/files/1625/=Bugzilla-jp-Guide-ChangingMailAddressMailForOldAddress.png"></p> -<p><img alt="新しいアドレスに届くメール" src="/@api/deki/files/1624/=Bugzilla-jp-Guide-ChangingMailAddressMailForNewAddress.png"></p> -<p>新しいアドレスに届いたメール(下側のスクリーンショット)の一つめのURIにアクセスすると、現在のメールアドレスを確認するフォームが表示されるので、現在のメールアドレスを入力し、送信してください。</p> -<p>これで変更が完了しました。</p> -<p>なお、上記の確認メールのうち、古い方のアドレスに送られたURIに三日以内にアクセスすると、新しいメールアドレスは無効化され、設定が元に戻されます。これはセキュリティのための措置ですので、自分で変更した場合は誤ってアクセスしないように注意してください。</p> -<h4 id=".E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E9.80.81.E4.BF.A1.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E9.80.81.E4.BF.A1.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">メールの送信設定を変更する</h4> -<p>Bugzillaはバグに関する様々な変更をメールで各アカウントに通知します。多くの変更通知はバグを追跡していく上で有用なものでしょう。しかし、期待しないメールの着信は大切なメールの埋没につながるので好ましいことではありません。デフォルト設定ではかなりのケースにおいてメールが送信されるようになっているので、設定で送信する条件をより限定することができます。(もちろん、更に条件を広げることもできます。)</p> -<p>メールに関する設定は<a class="external" href="http://bugzilla.mozilla.gr.jp/userprefs.cgi?tab=email">メール関係</a>で行います。</p> -<h5 id=".E5.85.A8.E4.BD.93.E8.A8.AD.E5.AE.9A" name=".E5.85.A8.E4.BD.93.E8.A8.AD.E5.AE.9A">全体設定</h5> -<p>「誰かがフラグを要請した時にメールで通知する」と「要請したフラグが設定されたときにメールで通知する」の二つがありますが、<b>前者は絶対にオフにしないでください</b>。前者はあなたへの問い合わせを知らせるメールの設定ですので変更しないでください。もし、これが届かないとBugzilla-jpの運用を妨害してしまいます。</p> -<h5 id=".E3.83.95.E3.82.A3.E3.83.BC.E3.83.AB.E3.83.89.E3.83.BB.E5.8F.97.E4.BF.A1.E6.9D.A1.E4.BB.B6.E7.89.B9.E6.9C.89.E3.81.AE.E8.A8.AD.E5.AE.9A" name=".E3.83.95.E3.82.A3.E3.83.BC.E3.83.AB.E3.83.89.E3.83.BB.E5.8F.97.E4.BF.A1.E6.9D.A1.E4.BB.B6.E7.89.B9.E6.9C.89.E3.81.AE.E8.A8.AD.E5.AE.9A">フィールド・受信条件特有の設定</h5> -<p><img alt="フィールド・受信条件特有の設定のスクリーンショット" src="/@api/deki/files/1632/=Bugzilla-jp-Guide-MailPrefs.png"></p> -<p>このスクリーンショットはデフォルト設定のままです。デフォルト設定に戻したい場合はこのスクリーンショットの通りに設定してください。</p> -<h5 id=".E3.83.A6.E3.83.BC.E3.82.B6.E7.9B.A3.E8.A6.96" name=".E3.83.A6.E3.83.BC.E3.82.B6.E7.9B.A3.E8.A6.96">ユーザ監視</h5> -<p>「ユーザ監視」は便利な機能です。カンマ区切りで「ユーザを監視対象に追加する (カンマ区切りリスト)」に追跡したいユーザのメールアドレスを列挙することができます。あなたと共通の関心を持つスタッフのアカウントをここに登録しておくと、新しいバグを小まめにチェックしなくても、そのスタッフへの送信メールからプロダクトの動向を常にメールで受けとることができます。</p> -<h5 id="Bugzilla-jp_.E3.81.8B.E3.82.89.E3.81.AE.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E6.96.87.E5.AD.97.E3.82.B3.E3.83.BC.E3.83.89" name="Bugzilla-jp_.E3.81.8B.E3.82.89.E3.81.AE.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E6.96.87.E5.AD.97.E3.82.B3.E3.83.BC.E3.83.89">Bugzilla-jp からのメールの文字コード</h5> -<p>ここにiso-2022-jpと入れると、Bugzilla-jpからの通知メールをISO-2022-JPでエンコードしたものを受け取れます。ただし、バグがいくつか確認されており、まだ正常に機能しません。ここは空白のままにしておいてください。</p> -<hr> -<p>必要な項目を変更したら、ページの下部にある「変更の保存」ボタンで送信してください。それで設定は保存されます。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/index.html deleted file mode 100644 index 0214bf378a..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: About -slug: orphaned/Bugzilla-jp/Guide/About -original_slug: Bugzilla-jp/Guide/About ---- -<h3 id="Bugzilla-jp.E3.81.A8.E3.81.AF" name="Bugzilla-jp.E3.81.A8.E3.81.AF">Bugzilla-jpとは</h3> -<p>Bugzilla-jp(バグジラ・ジェイ・ピーと発音します)とは、バグ管理システム(Bug Tracking System、略してBTS)である<a href="About/WhatIsBugzilla">Bugzilla</a>を日本語化したBugzilla-jaを使い、Mozilla関連プロダクト(Firefox、Thunderbird、Camino、SeaMonkey等)のバグを管理、追跡、修正を行う日本語の<b>開発者向け</b>コミュニティです。</p> -<p>Mozilla関連プロダクトのバグは全て<a class="link-https" href="https://bugzilla.mozilla.org/">mozilla.orgのBugzilla</a>において管理されています。(Bugzilla-jpではmozilla.orgの運営しているBugzillaのことを本家、Bugzilla-orgと呼んでいます。Bugzilla-jpでは普段は、本家という呼び方を使いますが、このドキュメントでは文意を明確にするためにBugzilla-orgと記述します。)しかし、Bugzilla-orgでは公用語が英語である上に、登録されているバグの件数も2006年初頭で32万件を超えていますので、日本人にとっては検索するだけでも大変な作業になりがちです。</p> -<p>そこで、英語に自信が無くても日本人の開発者が不自由しないように、報告者や開発者と、Bugzilla-orgとの仲介を行っているのがBugzilla-jpです。</p> -<h4 id="Bugzilla-jp.E3.81.AF.E9.96.8B.E7.99.BA.E8.80.85.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.81.A7.E3.81.99" name="Bugzilla-jp.E3.81.AF.E9.96.8B.E7.99.BA.E8.80.85.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.81.A7.E3.81.99">Bugzilla-jpは開発者のためのコミュニティです</h4> -<p>Bugzilla-jpは開発者のためのコミュニティで開発現場です。つまり、バグの報告やコメントの追加を行うと開発者の一員という位置づけになり、その発言内容には技術的な根拠が要求されます。普通の掲示板やBBS、フォーラム等とは明確に異なっていることを理解してください。</p> -<p>もちろん、<b>サポートセンターでもありません</b>。</p> -<h4 id="Bugzilla-jp.E3.81.AF.E7.8B.AC.E7.AB.8B.E3.81.97.E3.81.9F.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.81.A7.E3.81.99" name="Bugzilla-jp.E3.81.AF.E7.8B.AC.E7.AB.8B.E3.81.97.E3.81.9F.E3.82.B3.E3.83.9F.E3.83.A5.E3.83.8B.E3.83.86.E3.82.A3.E3.81.A7.E3.81.99">Bugzilla-jpは独立したコミュニティです</h4> -<p>Bugzilla-jpはもじら組内にありますが、運用は別の独立したコミュニティで行われています。もちろん、もじら組のスタッフも参加していますが、Bugzilla-jpでのみ活動されている方もいます。また、Mozilla Foundation、Mozilla Corporation、Mozilla Japanからも独立したコミュニティです。(これらの企業の関係者も参加していますが、あくまでコミュニティの一員です。)</p> -<h4 id="Bugzilla-jp.E3.81.AE.E5.8F.82.E5.8A.A0.E8.80.85.E3.81.AF.E5.85.A8.E5.93.A1.E3.83.9C.E3.83.A9.E3.83.B3.E3.83.86.E3.82.A3.E3.82.A2.E3.81.A7.E3.81.99" name="Bugzilla-jp.E3.81.AE.E5.8F.82.E5.8A.A0.E8.80.85.E3.81.AF.E5.85.A8.E5.93.A1.E3.83.9C.E3.83.A9.E3.83.B3.E3.83.86.E3.82.A3.E3.82.A2.E3.81.A7.E3.81.99">Bugzilla-jpの参加者は全員ボランティアです</h4> -<p>Bugzilla-jpの参加者は全員がボランティアです。フルタイムで従事している人は居ますが、あくまでもその所属企業から派遣されたボランティアで、Bugzilla-jpの従業員ではありません。</p> -<p>つまり、全ての参加者はBugzilla-jp内では貢献度に応じて平等であるべきです。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html deleted file mode 100644 index 9687c47477..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: ProductsAndComponents -slug: orphaned/Bugzilla-jp/Guide/About/ProductsAndComponents -original_slug: Bugzilla-jp/Guide/About/ProductsAndComponents ---- -<h3 id=".E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.81.A8.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88" name=".E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.81.A8.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88">プロダクトとコンポーネント</h3> -<p>Bugzilla上ではバグは常に何らかのプロダクトと、コンポーネントに関連づけられています。</p> -<p>プロダクトとは文字通り、そのバグが発生する製品の名前を指します。コンポーネントとは、プロダクト内で、更にどういった部位のバグであるのかを細分化するものです。Bugzilla-jpでは以下のようなプロダクトとコンポーネントを用意しています。</p> -<h4 id="Core" name="Core">Core</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Core">コンポーネント一覧</a>。</p> -<p>全てのMozilla関連プロダクトで共有しているGeckoエンジンや、ネットワークコンポーネントであるNecko、FirefoxやThunderbirdで使われている共通部品のtoolkit、 XPCOMやNSPRといった基盤技術に関するバグを扱っています。</p> -<p>また、他のプロダクトに当てはまらないChatZillaやDOM Inspectorといった独立したXULアプリケーションも扱っています。</p> -<h4 id="Firefox" name="Firefox">Firefox</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Firefox">コンポーネント一覧</a>。</p> -<p>Firefox固有のバグを扱っています。主に、FirefoxのUIに関するバグや、移行ツール(migration)、ブックマークや履歴、ページ内検索といった固有のバグが対象となります。</p> -<h4 id="Thunderbird" name="Thunderbird">Thunderbird</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Thunderbird">コンポーネント一覧</a>。</p> -<p>Thunderbird固有のバグを扱っています。主に、ThunderbirdのUIに関するバグや、移行ツール(migration)が対象となります。</p> -<p>Firefoxとは異なり、多くのコードがCoreで共有されているため、実際にはこのプロダクトに分類されるバグは多くありません。</p> -<h4 id="Camino" name="Camino">Camino</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Camino">コンポーネント一覧</a>。</p> -<p>Camino固有のバグを扱っています。主に、CaminoのUIに関するバグが対象となります。</p> -<h4 id="Mozilla_Application_Suite" name="Mozilla_Application_Suite">Mozilla Application Suite</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Mozilla%20Application%20Suite">コンポーネント一覧</a>。</p> -<p>Mozilla Application Suiteと、その後継となるSeaMonkey固有のバグを扱っています。主にSeaMonkeyのUIに関するバグや、ブックマークや履歴といった各種の機能が対象となります。</p> -<h4 id="Calendar" name="Calendar">Calendar</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Calendar">コンポーネント一覧</a>。</p> -<p>Sunbird固有のバグを扱っていますが、残念ながら正式リリースの目処もたっていないこのプロダクトでアクティブに活動しているスタッフは居ません。もし、あなたがSunbirdのバグ管理に興味があるなら是非私たちに協力してください。</p> -<h4 id="L10N.28.E6.97.A5.E6.9C.AC.E8.AA.9E.E5.8C.96.29" name="L10N.28.E6.97.A5.E6.9C.AC.E8.AA.9E.E5.8C.96.29">L10N(日本語化)</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=L10N%20%28%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%29">コンポーネント一覧</a>。</p> -<p>各プロダクトの日本語版固有のバグ(誤訳や誤記等)を扱っています。</p> -<h4 id="mozilla.gr.jp" name="mozilla.gr.jp">mozilla.gr.jp</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=mozilla.gr.jp">コンポーネント一覧</a>。</p> -<p>もじら組のドキュメントのバグ(誤記や誤情報、もじら組フォーラムのバグ)を扱っています。</p> -<h4 id="Web.E6.A8.99.E6.BA.96.E5.8C.96" name="Web.E6.A8.99.E6.BA.96.E5.8C.96">Web標準化</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Web%E6%A8%99%E6%BA%96%E5%8C%96">コンポーネント一覧</a>。</p> -<p>Web標準仕様に従っていないために、FirefoxやSeaMonkeyで表示や動作に問題があるもじら組以外のWebサイトやページを扱っています。</p> -<p>他のプロダクトとは違い、そのバグを担当する人が問題のサイトの管理者、もしくは制作者に修正依頼を出して修正してもらうという作業になります。</p> -<h4 id="Webtools" name="Webtools">Webtools</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=Webtools">コンポーネント一覧</a>。</p> -<p>Bugzillaそのもののバグを扱っています。</p> -<h4 id="TestProduct" name="TestProduct">TestProduct</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=TestProduct">コンポーネント一覧</a>。</p> -<p>これはいかなる製品のバグも取り扱っていません。このプロダクトは、バグ投稿の練習用のものです。Bugzillaの動作テスト、確認にも利用されます。</p> -<p>このプロダクトに登録されているバグは不定期にデータベースから削除されるので、恒久的に情報を残すことはできません。</p> -<h4 id=".E8.AB.87.E8.A9.B1.E5.AE.A4.E3.81.B0.E3.81.90.E3.81.98.E3.82.89" name=".E8.AB.87.E8.A9.B1.E5.AE.A4.E3.81.B0.E3.81.90.E3.81.98.E3.82.89">談話室ばぐじら</h4> -<p><a class="external" href="http://bugzilla.mozilla.gr.jp/describecomponents.cgi?product=%E8%AB%87%E8%A9%B1%E5%AE%A4%E3%81%B0%E3%81%90%E3%81%98%E3%82%89">コンポーネント一覧</a>。</p> -<p>雑談用のプロダクトです。スタッフが運用のためのディスカッションを行ったり、他のプロダクトに当てはまらないディスカッションが必要な場合等に利用されます。</p> -<hr> -<p>原則として、ここにリストアップされていないプロダクトは扱っていません。例えばNetscapeに代表される他企業の製品や、Mozilla Japanのサイトに関する問題等は扱っていません。これら、他企業の問題は、その企業に直接コンタクトをとるようにしてください。</p> -<p>テーマや、拡張に関するバグも取り扱っていません。テーマや、拡張のバグは、その作者に直接コンタクトをとるようにしてください。</p> -<p>あなたが拡張の作者であり、Bugzilla-jpをあなたの拡張のバグ管理に利用したいのであれば談話室ばぐじらを通じてスタッフにコンタクトをとってください。あなたの熱心さがスタッフに伝われば拡張用のプロダクトが新設されるかもしれません。</p> -<p>もし、あなたがBugzilla-jpで取り扱われるべきプロダクトが他にもあると思う場合は、談話室ばぐじらを通じてスタッフにリクエストを出すことができます。ただし、リクエストした場合、あなたが積極的かつ、継続してそのプロダクトに貢献することが望まれるでしょう。貢献するつもりが無いのにリクエストすることはご遠慮ください。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html deleted file mode 100644 index 1f69e68269..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: TrunkAndBranch -slug: orphaned/Bugzilla-jp/Guide/About/TrunkAndBranch -original_slug: Bugzilla-jp/Guide/About/TrunkAndBranch ---- -<h3 id="Trunk.E3.81.A8Branch.E3.81.AE.E9.81.95.E3.81.84.E3.81.A8.E6.B3.A8.E6.84.8F" name="Trunk.E3.81.A8Branch.E3.81.AE.E9.81.95.E3.81.84.E3.81.A8.E6.B3.A8.E6.84.8F">TrunkとBranchの違いと注意</h3> -<p>Mozilla関連製品は開発中の状態をTrunk(トランク)、リリース版の元となるものをBranch(ブランチ)と呼びます。</p> -<p>Branchは製品のリリース毎に作成され、そのGeckoのバージョンからBranchの名前が決まります。例えば、Gecko1.8をベースとしたFirefox1.5/Thunderbird1.5は1.8.0Branchから、Gecko1.8.1をベースとしたFirefox2/Thunderbird2は1.8Branchから作成されています。</p> -<p><b>Bugzilla-jpでは基本的にTrunkのバグを扱います</b>。Branchは最初のリリースが行われた時点で開発は終了しているためです。</p> -<p>Branchのバグであっても受け付けるのは、</p> -<ol> - <li>セキュリティバグ</li> - <li>重大なバグで修正しないと製品として成り立たないもの</li> -</ol> -<p>のみです。後者はあいまいですが、修正のリスクと効果が天秤にかけられることになりますが、よほどのバグでない限り、リスクがある修正は行われません。</p> -<h4 id="Trunk.E3.83.93.E3.83.AB.E3.83.89.E3.81.AE.E5.85.A5.E6.89.8B.E6.96.B9.E6.B3.95" name="Trunk.E3.83.93.E3.83.AB.E3.83.89.E3.81.AE.E5.85.A5.E6.89.8B.E6.96.B9.E6.B3.95">Trunkビルドの入手方法</h4> -<p>Trunkビルドの最新版は毎晩、Nightly Build(ナイトリービルド)としてリリースされています。<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a>、<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-comm-central/">Thunderbird</a>、<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-comm-central-trunk/">SeaMonkey</a>と、それぞれ公開されています。</p> -<p>また、自分でCVSからソースコードを取得し、ビルドしてみても良いでしょう。この独自ビルドを元に報告する場合はその旨(いつのソースコードなのか)もあわせて報告してください。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html deleted file mode 100644 index 7f087cd7b9..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: WhatIsBug -slug: orphaned/Bugzilla-jp/Guide/About/WhatIsBug -original_slug: Bugzilla-jp/Guide/About/WhatIsBug ---- -<h3 id=".E3.83.90.E3.82.B0.E3.81.A8.E3.81.AF" name=".E3.83.90.E3.82.B0.E3.81.A8.E3.81.AF">バグとは</h3> -<p>バグ(bug)とはコンピュータ用語で不具合を意味します。ある機能が設計として定められている通りに動作しないというようなプログラムの問題や、あらかじめ定められている仕様や規約などに反する設計などを一般にバグと呼びます。</p> -<p>Bugzilla-org、及びBugzilla-jpで言うバグとは、そういった不具合はもちろんの事、「この製品にはこの機能が必要だ」というような新しい機能の提案も「製品が備える事が望ましいと考えられる機能が備わっていない」という観点と積極的姿勢によりバグと扱われます。(ただし、不具合という意味ではなく、「機能強化が必要」という意味です。)</p> -<p>Mozilla関連プロダクトでは一般的に、プロダクトそのものへの機能追加と、Web標準への対応強化がこれに当てはまります。</p> -<p>前者は基本的にはBugzilla-jpでは扱っていません。また、後者は既に一般化している標準仕様の場合は、通常のバグとして扱われ、草案段階の仕様の先行実装は要望として扱われることに注意してください。</p> -<p>Bugzilla-jpでは基本的には要望を受け付けていません。これに関する詳しい情報は <a href="../Report/Enhancement">要望を報告する</a>を参照してください。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html deleted file mode 100644 index 47d50978da..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: WhatIsBugzilla -slug: orphaned/Bugzilla-jp/Guide/About/WhatIsBugzilla -original_slug: Bugzilla-jp/Guide/About/WhatIsBugzilla ---- -<p> -</p> -<h3 id="Bugzilla.E3.81.A8.E3.81.AF"> Bugzillaとは </h3> -<p>Bugzilla(バグジラと発音します)とは、mozilla.orgによって開発された、Webブラウザでアクセス可能なバグ管理システム(Bug Tracking System、略してBTS)です。 -</p><p>BTSとは、バグの記録や内容の検索と参照、そして状態管理を行なうシステムの事です。おおざっぱな言い方をすれば、バグ管理専用のデータベースシステムとも言えます。 -</p><p>バグを単にメーリングリストや表などを使って手作業で管理するよりも、BTSでバグの記録や内容の検索と参照、そして状態管理を行なう事により、効率良く品質の高い作業を行う事ができるようになります。 -</p><p>バグの情報が色々な場所に散在するとそれらバグを開発者が把握する事が困難になり、また管理も煩雑で効率の悪いものになりますので、Bugzillaで集中的に管理する事が重要です。 -</p><p>また、Bugzillaでは何らかの情報を投稿するにはアカウントが必要です。(内容を見るだけならアカウントは必要ありません。)バグを追跡するにもアカウントは必要ですので注意してください。 -</p><p>Bugzillaに関するより詳細な情報は<a class="external" href="http://www.bugzilla.org/">公式サイト、Home :: Bugzilla :: bugzilla.org</a>を、日本語版のBugzilla-jaに関しては、もじら組内の<a class="external" href="http://www.mozilla.gr.jp/docs/bugzilla.html">Bugzilla-jaについて</a>を参照してください。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/comment/index.html b/files/ja/orphaned/bugzilla-jp/guide/comment/index.html deleted file mode 100644 index 98c05664bf..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/comment/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Comment -slug: orphaned/Bugzilla-jp/Guide/Comment -original_slug: Bugzilla-jp/Guide/Comment ---- -<h3 id=".E3.83.90.E3.82.B0.E3.81.AB.E3.82.B3.E3.83.A1.E3.83.B3.E3.83.88.E3.82.92.E4.BB.98.E3.81.91.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.81.AB.E3.82.B3.E3.83.A1.E3.83.B3.E3.83.88.E3.82.92.E4.BB.98.E3.81.91.E3.82.8B">バグにコメントを付ける</h3> -<p>バグにコメントを付ける場合、以下のことに注意してください。</p> -<h4 id="HTML.E3.81.AE.E3.82.BF.E3.82.B0.E3.81.AF.E4.BD.BF.E3.81.88.E3.81.AA.E3.81.84" name="HTML.E3.81.AE.E3.82.BF.E3.82.B0.E3.81.AF.E4.BD.BF.E3.81.88.E3.81.AA.E3.81.84">HTMLのタグは使えない</h4> -<p>書き込んだ内容はそのまま(ワードラップのみ適当に処理されますが)表示されます。&lt;や&gt;、&amp;等に注意を払う必要もありません。一部のテキストは自動的にアンカーとして処理されます。その詳しいルールは<a href="Comment/LinkRules">Bugzilla-jpの自動リンク機能</a>を参照してください。</p> -<h4 id=".E6.9B.B8.E3.81.8D.E8.BE.BC.E3.82.80.E9.9A.9B.E3.81.AB.E3.81.9D.E3.81.AE.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A1.E3.83.BC.E3.83.AB.E3.82.92.E5.8F.97.E3.81.91.E5.8F.96.E3.82.8C.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B" name=".E6.9B.B8.E3.81.8D.E8.BE.BC.E3.82.80.E9.9A.9B.E3.81.AB.E3.81.9D.E3.81.AE.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A1.E3.83.BC.E3.83.AB.E3.82.92.E5.8F.97.E3.81.91.E5.8F.96.E3.82.8C.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B">書き込む際にそのバグのメールを受け取れるようにする</h4> -<p>Bugzilla-jpでは書き込み時にあなたがそのバグで何の役割も持たない場合(報告者でもなく、担当者でもなく、QAコンタクトでも無い場合)、自動的にCCリストにあなたを加えるように設定しています。これを無効にすることはできますが、そうしないでください。なぜなら、そのバグであなたのコメントに対して他の貢献者からコメントがあった場合に、あなたに連絡が行き届くべきだからです。</p> -<p>また、書き込んだ内容に対して返答等がある可能性があるのでBugzilla-jpのアカウントとして登録したメールのチェックは必ず行ってください。</p> -<h4 id=".E9.9A.A0.E8.AA.9E.E3.82.84.E4.B8.80.E8.88.AC.E7.9A.84.E3.81.A7.E3.81.AF.E3.81.AA.E3.81.84.E7.95.A5.E8.AA.9E.E7.AD.89.E3.81.AF.E4.BD.BF.E3.82.8F.E3.81.AA.E3.81.84" name=".E9.9A.A0.E8.AA.9E.E3.82.84.E4.B8.80.E8.88.AC.E7.9A.84.E3.81.A7.E3.81.AF.E3.81.AA.E3.81.84.E7.95.A5.E8.AA.9E.E7.AD.89.E3.81.AF.E4.BD.BF.E3.82.8F.E3.81.AA.E3.81.84">隠語や一般的ではない略語等は使わない</h4> -<p>Bugzilla-jp内のバグは全ての技術者に意味の通じるものであるべきです。Bugzilla-jp内で使われている特殊な用語を除き、一部のコミュニティ等でしか通じない隠語や略語等の使用はしないでください。(例えば、炎狐、串、鯖、等々)</p> -<h4 id=".E9.96.8B.E7.99.BA.E8.80.85.E3.82.92.E7.85.BD.E3.82.8B.E5.86.85.E5.AE.B9.E3.81.AE.E6.9B.B8.E3.81.8D.E8.BE.BC.E3.81.BF.E3.82.92.E3.81.97.E3.81.AA.E3.81.84" name=".E9.96.8B.E7.99.BA.E8.80.85.E3.82.92.E7.85.BD.E3.82.8B.E5.86.85.E5.AE.B9.E3.81.AE.E6.9B.B8.E3.81.8D.E8.BE.BC.E3.81.BF.E3.82.92.E3.81.97.E3.81.AA.E3.81.84">開発者を煽る内容の書き込みをしない</h4> -<p>Bugzillaではよく、「まだこのバージョンでこのバグは再現する」、とか「なぜこのバグを誰も修正しないのか」といった、開発者を煽る内容の書き込みをする人が居ます。これは非常に迷惑な行為なので書かないでください。(ひどい場合はアカウント停止の可能性もあります。)</p> -<p>特定のバグが修正されないことにいらだちを覚え、我慢できないのであれば自分自身で修正すべきです。</p> -<h3 id=".E8.BF.94.E7.AD.94.E3.81.AE.E4.BB.95.E6.96.B9" name=".E8.BF.94.E7.AD.94.E3.81.AE.E4.BB.95.E6.96.B9">返答の仕方</h3> -<p>Bugzillaでは他人のコメントに対して返答することがよくあります。この際に元の文章を引用しておく方が便利なことがあります。(後から見た人や、返答を読むべき人が内容を把握しやすい。)</p> -<p>特定のコメントに対して返答する場合、そのコメントにある{{ mediawiki.external('返信') }}というリンクをクリックしてください。そうすると、コメント入力欄に自動的にそのコメントが引用されます。ここから<b>不要な部分を削除して</b>利用してください。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html b/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html deleted file mode 100644 index a1cbde0345..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: LinkRules -slug: orphaned/Bugzilla-jp/Guide/Comment/LinkRules -original_slug: Bugzilla-jp/Guide/Comment/LinkRules ---- -<h3 id="Bugzilla-jp.E3.81.AE.E8.87.AA.E5.8B.95.E3.83.AA.E3.83.B3.E3.82.AF.E6.A9.9F.E8.83.BD" name="Bugzilla-jp.E3.81.AE.E8.87.AA.E5.8B.95.E3.83.AA.E3.83.B3.E3.82.AF.E6.A9.9F.E8.83.BD">Bugzilla-jpの自動リンク機能</h3> -<p>Bugzillaでは<a href="../Comment#HTML.E3.81.AE.E3.82.BF.E3.82.B0.E3.81.AF.E4.BD.BF.E3.81.88.E3.81.AA.E3.81.84">プレーンテキストしか使えません</a>。ですが、それだけでは不便なのでいくつかの自動リンク機能が用意されています。</p> -<h4 id="URL.E3.82.92.E8.A8.98.E8.BF.B0.E3.81.97.E3.81.9F.E5.A0.B4.E5.90.88.E3.81.AF.E8.87.AA.E5.8B.95.E7.9A.84.E3.81.AB.E3.83.AA.E3.83.B3.E3.82.AF.E3.81.95.E3.82.8C.E3.81.BE.E3.81.99" name="URL.E3.82.92.E8.A8.98.E8.BF.B0.E3.81.97.E3.81.9F.E5.A0.B4.E5.90.88.E3.81.AF.E8.87.AA.E5.8B.95.E7.9A.84.E3.81.AB.E3.83.AA.E3.83.B3.E3.82.AF.E3.81.95.E3.82.8C.E3.81.BE.E3.81.99">URLを記述した場合は自動的にリンクされます</h4> -<p>URLの記述時には自動的にそのURLの文字列がそのURLへのリンクとなります。対応しているスキームはhttp、https、ftpです。国際化ドメインにも対応しています。</p> -<p>また、URLに続けて日本語を記述する場合、半角のスペースをはさんでください。国際化されたURLに対応するため、非ASCII文字でもURLの一部と判定されてリンクの対象となります。閉じ括弧")"でもURLは終了したとみなされることに注意してください。</p> -<h4 id="Bugzilla-jp.E5.86.85.E3.81.AE.E3.83.90.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name="Bugzilla-jp.E5.86.85.E3.81.AE.E3.83.90.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">Bugzilla-jp内のバグへのリンク</h4> -<p>Bugzilla-jp内の別のバグへのリンクは"bug xxxx"という書式で生成されます。(xxxxはリンクしたいバグの番号)</p> -<p>また、そのバグの要約も生成されたリンクのtitle属性に自動的に入るので、明示する必要はありません。</p> -<h4 id=".E3.82.B3.E3.83.A1.E3.83.B3.E3.83.88.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name=".E3.82.B3.E3.83.A1.E3.83.B3.E3.83.88.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">コメントへのリンク</h4> -<p>特定のコメントへのリンクは"comment yyyy"という書式で生成されます。(yyyyはリンクしたいコメントの番号、報告時のコメントは0)</p> -<p>別のバグのコメントへは"bug xxxx comment yyyy"という書式で生成されます。</p> -<h4 id="Bugzilla-org.E3.81.AE.E3.83.90.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name="Bugzilla-org.E3.81.AE.E3.83.90.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">Bugzilla-orgのバグへのリンク</h4> -<p>Bugzilla-orgのバグへのリンクは"bug-org xxxx"という書式で生成されます。 Bug-orgのバグのコメントへは"bug-org xxxx comment yyyy"となります。</p> -<h4 id=".E6.B7.BB.E4.BB.98.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name=".E6.B7.BB.E4.BB.98.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">添付ファイルへのリンク</h4> -<p>Bugzilla-jp内の添付ファイルへのリンクは"attachment xxxx"という書式で生成されます。全てのバグを通して添付ファイルはユニークなIDを持つのでコメントのようにバグ番号を明示する必要はありません。</p> -<h4 id="Bugzilla-org.E3.81.AE.E6.B7.BB.E4.BB.98.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name="Bugzilla-org.E3.81.AE.E6.B7.BB.E4.BB.98.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">Bugzilla-orgの添付ファイルへのリンク</h4> -<p>Bugzilla-orgにある添付ファイルへのリンクは"attachment-org xxxx"という書式で生成されます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.83.83.E3.82.B7.E3.83.A5.E3.83.AD.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF" name=".E3.82.AF.E3.83.A9.E3.83.83.E3.82.B7.E3.83.A5.E3.83.AD.E3.82.B0.E3.81.B8.E3.81.AE.E3.83.AA.E3.83.B3.E3.82.AF">クラッシュログへのリンク</h4> -<p>Quality Feedback AgentやBreakpadのログのIDは独特の形式を持つので、そのまま書き込めば自動的にそれを解析した結果へのリンクとなります。特に接頭辞等は必要ありません。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html b/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html deleted file mode 100644 index 4df784218e..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Contribute -slug: orphaned/Bugzilla-jp/Guide/Contribute -original_slug: Bugzilla-jp/Guide/Contribute ---- -<p> -</p> -<h3 id=".E3.81.A9.E3.81.AE.E3.82.88.E3.81.86.E3.81.AA.E8.B2.A2.E7.8C.AE.E3.81.8C.E6.B1.82.E3.82.81.E3.82.89.E3.82.8C.E3.81.A6.E3.81.84.E3.81.BE.E3.81.99.E3.81.8B.3F"> どのような貢献が求められていますか? </h3> -<p>Bugzilla-jpでは常に貢献者を募集中です。 -</p><p>まず、貢献者は前提としてこのドキュメントに書かれているBugzilla-jpの運用ルールを理解し、従う必要があります。ですが、それ以外に特に必要なことはありません。具体的に、私たちは以下の作業に貢献してくれる人を待っています。 -</p> -<h4 id=".E3.83.86.E3.82.B9.E3.83.88.E3.81.97.E3.80.81.E9.81.A9.E5.88.87.E3.81.AB.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> テストし、適切にバグを報告する </h4> -<p>たとえば様々なWebページを作成し、標準仕様とは異なるレンダリングが行われないかテストし、バグがあれば報告する、といった作業が求められています。 -</p> -<h4 id=".E4.B8.8D.E5.8D.81.E5.88.86.E3.81.AA.E5.A0.B1.E5.91.8A.E5.86.85.E5.AE.B9.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.92.E3.82.A2.E3.83.AA.E3.83.B3.E3.82.B0"> 不十分な報告内容に対するヒアリング </h4> -<p>報告されるバグの内容は十分とは言えないことが多いです。報告に欠けている情報を報告者に問い合わせたり、自分でテストを行ってその結果から、補足するべきことがあれば補足を行うといった作業が求められています。 -</p> -<h4 id=".E3.83.86.E3.82.B9.E3.83.88.E3.82.B1.E3.83.BC.E3.82.B9.E3.81.AE.E4.BD.9C.E6.88.90"> テストケースの作成 </h4> -<p>シンプルでわかりやすいテストケースの作成はかなり難しいものです。報告された内容を再現させる簡単なテストケースを作ることは原因を絞り込むための第一歩です。この作業を行える人材が求められています。 -</p> -<h4 id="Bugzilla-org.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E6.8E.A2.E3.81.99"> Bugzilla-orgのバグを探す </h4> -<p>報告されたバグがBugzilla-orgに報告されているバグのどれにあたるのかを調査するという作業が求められています。もちろん、英語を読む能力と、そのバグをテストできる程度の知識が必要です。 -</p> -<h4 id="Bugzilla-org.E3.81.AB.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> Bugzilla-orgにバグを報告する </h4> -<p>Bugzilla-jpに報告されたバグがBugzilla-orgには登録されていない場合、英語でBugzilla-orgにも登録する必要があります。この作業者はBugzilla-orgのcanconfirm権限を持っていることが望まれます。 -</p> -<h4 id="Bugzilla-org.E3.81.AB.E5.A0.B1.E5.91.8A.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92Bugzilla-jp.E3.81.AB.E3.82.82.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> Bugzilla-orgに報告されているバグをBugzilla-jpにも報告する </h4> -<p>もちろん無闇に行われては困りますが、Bugzilla-orgにしか報告されていないバグでも重要なバグは多々あります。そういったバグをBugzilla-jpにも登録しておけば、日本語でそういったバグも検索可能になります。もちろん、報告したバグは報告者が担当してください。 -</p> -<h4 id="Bugzilla-org.E3.81.AE.E3.83.90.E3.82.B0.E3.81.AE.E7.8A.B6.E6.B3.81.E3.82.92.E7.A2.BA.E8.AA.8D.E3.81.99.E3.82.8B"> Bugzilla-orgのバグの状況を確認する </h4> -<p>Bugzilla-jpのバグの担当者は非常に多くのバグを担当しているため、Bugzilla-orgでの状態の変更を見落としていることが多々あります。もし、Bugzilla-jpのバグとBugzilla-orgのバグの状態がずれている場合、それを担当者に警告する必要があります。もちろん、その警告はBugzilla-jp上で行います。メール等で直接行うと、他のスタッフのサポートが期待できないからです。 -</p> -<h4 id=".E3.83.90.E3.82.B0.E3.82.92.E4.BF.AE.E6.AD.A3.E3.81.A7.E3.81.8D.E3.82.8B.E3.83.91.E3.83.83.E3.83.81.E3.82.92.E6.8F.90.E6.A1.88.E3.81.99.E3.82.8B"> バグを修正できるパッチを提案する </h4> -<p>バグの修正が可能な技術者はパッチを提案することができます。私たちは新たなハッカーの登場を常に待ちわびています。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html b/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html deleted file mode 100644 index 981728935c..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Grossary -slug: orphaned/Bugzilla-jp/Guide/Grossary -original_slug: Bugzilla-jp/Guide/Grossary ---- -<h3 id="Bugzilla-jp.E7.94.A8.E8.AA.9E.E9.9B.86" name="Bugzilla-jp.E7.94.A8.E8.AA.9E.E9.9B.86">Bugzilla-jp用語集</h3> -<h4 id="A.EF.BD.9EI" name="A.EF.BD.9EI">A～I</h4> -<dl> - <dt> - alpha</dt> - <dd> - 開発初期段階でのテスタ向けリリースをalpha版と呼ぶ。Mozilla関連製品では通常、a1、a2がリリースされる。リスクのある修正や大規模な修正はこの段階で終了しなくてはけない。</dd> -</dl> -<dl> - <dt> - beta</dt> - <dd> - 開発初期段階が終了するとbeta版と呼ばれるビルドがリリースされる。Mozilla関連製品では通常、b1、b2がリリースされる。ほぼ全ての修正はこの段階で終了していなくてはならない。</dd> -</dl> -<dl> - <dt> - branch</dt> - <dd> - <a href="About/TrunkAndBranch">TrunkとBranchの違いと注意</a>参照。</dd> -</dl> -<dl> - <dt> - bug</dt> - <dd> - <a href="About/WhatIsBug">バグとは</a>参照。</dd> -</dl> -<dl> - <dt> - bugzilla</dt> - <dd> - <a href="About/WhatIsBugzilla">Bugzillaとは</a>参照。</dd> -</dl> -<dl> - <dt> - bugzilla-org</dt> - <dd> - <a href="#.E6.9C.AC.E5.AE.B6">本家</a>のこと。</dd> -</dl> -<dl> - <dt> - bug-org</dt> - <dd> - <a href="#.E6.9C.AC.E5.AE.B6">本家</a>のこと。</dd> -</dl> -<dl> - <dt> - CVS</dt> - <dd> - Mozilla関連製品の開発に使われているバージョン管理ソフト。</dd> -</dl> -<dl> - <dt> - fx</dt> - <dd> - Firefoxの略。</dd> -</dl> -<dl> - <dt> - IME</dt> - <dd> - Input Method Editorの略。もともとWindowsの日本語入力用ソフトの名称だが、Mozilla関連製品の開発では全てのプラットフォームで日本語入力プログラムの総称として使われている。他のプラットフォームではIMやTSMといった呼称もあるが、Mozillaのソースコードではプラットフォーム固有のコードでない限りはIMEが用いられる。(固有部分でもIMEという単語は多用されている。)</dd> -</dl> -<dl> - <dt> - i18n</dt> - <dd> - <a href="#internationalization">internationalization</a>の略。</dd> -</dl> -<dl id="internationalization"> - <dt> - internationalization</dt> - <dd> - 国際化とも。製品が特定の言語や文化に依存せずにあらゆる言語等で利用可能とすることを言う。例えば、英語版の製品であっても日本語の表示や入力に対応させること。</dd> -</dl> -<dl> - <dt> - INVA</dt> - <dd> - <a href="LifeCycle/Mozilla#_INVALID_">INVALID</a>の略。</dd> -</dl> -<h4 id="J.EF.BD.9EZ" name="J.EF.BD.9EZ">J～Z</h4> -<dl> - <dt> - JLP</dt> - <dd> - 日本語版の言語パック。英語版のMozilla関連プロダクトでも、その製品用のJLPがあれば日本語化可能。</dd> -</dl> -<dl> - <dt> - l10n</dt> - <dd> - <a href="#localization">localization</a>の略。</dd> -</dl> -<dl id="localization"> - <dt> - localization</dt> - <dd> - 地域化とも。UI等の翻訳を主に指す。Bugzilla-jpでは主に英語版の製品を日本語版にすること等を指して使う。</dd> -</dl> -<dl> - <dt> - RC</dt> - <dd> - Release Candidateのこと。製品りリリース候補版。Mozillaの場合、RC1ではまだいくつかの修正が必要なことが多いが、RC2はそのまま最終版としてリリースされることがある。</dd> -</dl> -<dl id="regression"> - <dt> - regression</dt> - <dd> - リグレッション。直訳すると後退。なんらかのバグの修正によって別のバグが発生した場合、そのバグをこう呼ぶ。</dd> -</dl> -<dl> - <dt> - suite</dt> - <dd> - Mozilla Application Suiteの略。既に開発は終了し、SeaMonkeyとして再スタートしている。</dd> -</dl> -<dl> - <dt> - tb</dt> - <dd> - Thunderbirdの略。</dd> -</dl> -<dl> - <dt> - trunk</dt> - <dd> - <a href="About/TrunkAndBranch">TrunkとBranchの違いと注意</a>参照。</dd> -</dl> -<dl> - <dt> - WFM</dt> - <dd> - <a href="LifeCycle/Mozilla#_WORKSFORME_">WORKSFORME</a>の略。</dd> -</dl> -<h4 id=".E3.81.82.E3.83.BB.E3.81.8B.E3.83.BB.E3.81.95.E8.A1.8C" name=".E3.81.82.E3.83.BB.E3.81.8B.E3.83.BB.E3.81.95.E8.A1.8C">あ・か・さ行</h4> -<dl> - <dt> - クラッシュ</dt> - <dd> - アプリケーションがなんらかのバグにより、使用途中に強制終了してしまうこと。クラッシュは原因によってはセキュリティバグとして扱われる。</dd> -</dl> -<dl> - <dt> - 国際化</dt> - <dd> - <a href="#internationalization">internationalization</a>のこと。</dd> -</dl> -<dl> - <dt> - コンテキストメニュー</dt> - <dd> - Windows/GTK2/Macで右クリックで表示されるメニューのこと。</dd> -</dl> -<h4 id=".E3.81.9F.E3.83.BB.E3.81.AA.E3.83.BB.E3.81.AF.E8.A1.8C" name=".E3.81.9F.E3.83.BB.E3.81.AA.E3.83.BB.E3.81.AF.E8.A1.8C">た・な・は行</h4> -<dl> - <dt> - 地域化</dt> - <dd> - <a href="#localization">localization</a>のこと。</dd> -</dl> -<dl> - <dt> - チェックイン</dt> - <dd> - 修正パッチを開発ツリーに入れる作業。これが終わるとバグが修正される。</dd> -</dl> -<dl> - <dt> - バグ</dt> - <dd> - <a href="About/WhatIsBug">バグとは</a>参照。</dd> -</dl> -<dl> - <dt> - バックアウト</dt> - <dd> - CVSに入れられたパッチの逆のパッチをチェックインすること。つまり、もとのチェックインを無かったことにする。</dd> -</dl> -<dl> - <dt> - パッチ</dt> - <dd> - プログラムの差分を表す小さなテキストファイル。diffコマンドで生成されたもの。</dd> -</dl> -<dl> - <dt> - ハングアップ</dt> - <dd> - ハングアップはなんらかのバグにより、アプリケーションからの応答が無くなった状態を指す。再現条件から原因を判断するしか無いため、一般的にクラッシュバグよりも原因究明に手間がかかる。</dd> -</dl> -<dl id=".E6.9C.AC.E5.AE.B6"> - <dt> - 本家</dt> - <dd> - <a class="external" href="https://bugzilla.mozilla.org/">mozilla.orgの運営するBugzilla</a>のこと。このドキュメント内では検索エンジン等で表示された場合にも文意を明確にするため、bugzilla-orgという表記を用いているが、普段Bugzilla-jpでは本家という記述が一般的。</dd> -</dl> -<h4 id=".E3.81.BE.E3.83.BB.E3.82.84.E3.83.BB.E3.82.89.E3.83.BB.E3.82.8F.E8.A1.8C" name=".E3.81.BE.E3.83.BB.E3.82.84.E3.83.BB.E3.82.89.E3.83.BB.E3.82.8F.E8.A1.8C">ま・や・ら・わ行</h4> -<dl> - <dt> - メタバグ</dt> - <dd> - <a href="Search/Hints#_.E3.83.A1.E3.82.BF.E3.83.90.E3.82.B0.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B_">メタバグを利用する</a>を参照。</dd> -</dl> -<dl> - <dt> - も組</dt> - <dd> - <a class="external" href="http://www.mozilla.gr.jp/">もじら組</a>の略。</dd> -</dl> -<dl> - <dt> - リグレッション</dt> - <dd> - <a href="#regression">regression</a>参照。</dd> -</dl> diff --git a/files/ja/orphaned/bugzilla-jp/guide/index.html b/files/ja/orphaned/bugzilla-jp/guide/index.html deleted file mode 100644 index 2812bf7b39..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Guide -slug: orphaned/Bugzilla-jp/Guide -original_slug: Bugzilla-jp/Guide ---- -<h3 id=".E3.81.AF.E3.81.98.E3.82.81.E3.81.A6.E3.81.AE.E3.83.90.E3.82.B0.E3.82.B8.E3.83.A9" name=".E3.81.AF.E3.81.98.E3.82.81.E3.81.A6.E3.81.AE.E3.83.90.E3.82.B0.E3.82.B8.E3.83.A9">はじめてのバグジラ</h3> -<p>このドキュメントは<a class="external" href="http://bugzilla.mozilla.gr.jp/">Bugzilla-jp</a>を利用するのに必要な知識やノウハウを提供しています。もし、このドキュメントの内容が不十分だったり、間違った記述を発見した場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグとして報告してください。</p> -<h4 id=".E3.81.93.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE.E8.AA.AD.E3.81.BF.E6.96.B9" name=".E3.81.93.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE.E8.AA.AD.E3.81.BF.E6.96.B9">このドキュメントの読み方</h4> -<p>このドキュメントは目的に応じて読み分けることができるように、複数の章に分割されています。Bugzilla-jpを利用する<b>全ての利用者は</b>第一章と第二章は必ず目を通す必要があります。</p> -<p>そして、<b>それ以外にも</b>あなたのとりたい行動(たとえばバグを報告したい等)にあわせて、その手順を紹介したドキュメントを読む必要があります。</p> -<p>このドキュメントは各手順の単なる説明書ではなく、その際に決まっている様々なルールを明文化しています。このルールに従わない方の参加は多くの開発者の仕事を妨害してしまう可能性がありますので、Bugzilla-jpの利用前に必ず目を通し、理解していただけますよう、お願いいたします。</p> -<h4 id=".E7.9B.AE.E6.AC.A1" name=".E7.9B.AE.E6.AC.A1">目次</h4> -<ol> - <li><a href="Guide/About">Bugzilla-jpとは</a> - <ol> - <li><a href="Guide/About/WhatIsBugzilla">Bugzillaとは</a></li> - <li><a href="Guide/About/WhatIsBug">バグとは</a></li> - <li><a href="Guide/About/BugDetails">バグの詳細情報</a></li> - <li><a href="Guide/About/ProductsAndComponents">プロダクトとコンポーネント</a></li> - <li><a href="Guide/About/AccountCreation">アカウントの作成</a></li> - <li><a href="Guide/About/ChangeAccountPrefs">アカウントの設定を変更する</a></li> - <li><a href="Guide/About/TrunkAndBranch">TrunkとBranchの違いと注意</a></li> - </ol> - </li> - <li><a href="Guide/LifeCycle">バグのライフサイクル</a> - <ol> - <li><a href="Guide/LifeCycle/Mozilla">Mozilla関連製品に関するバグのライフサイクル</a></li> - <li><a href="Guide/LifeCycle/WebStandard">Web標準化プロダクトに関するバグのライフサイクル</a></li> - <li><a href="Guide/LifeCycle/WebTools">Webtoolsプロダクトに関するバグのライフサイクル</a></li> - <li><a href="Guide/LifeCycle/MozillaGumi">もじら組のコンテンツに関するバグのライフサイクル</a></li> - <li><a href="Guide/LifeCycle/QAMozilla">談話室ばぐじらに関するバグのライフサイクル</a></li> - </ol> - </li> - <li><a href="Guide/Search">バグの情報を探す</a> - <ol> - <li><a href="Guide/Search/Simple">簡単な検索</a></li> - <li><a href="Guide/Search/Advanced">詳細な検索</a></li> - <li><a href="Guide/Search/Hints">検索のコツ</a></li> - </ol> - </li> - <li><a href="Guide/Tracking">バグを追跡する</a></li> - <li><a href="Guide/Report">バグを報告する</a> - <ol> - <li><a href="Guide/Report/RenderingBugs">Webの表示に関するバグを報告する</a></li> - <li><a href="Guide/Report/UIBugs">ユーザインターフェースに関するバグを報告する</a></li> - <li><a href="Guide/Report/CrashBugs">クラッシュするバグを報告する</a></li> - <li><a href="Guide/Report/SecurityBugs">セキュリティに関するバグを報告する</a></li> - <li><a href="Guide/Report/MemoryLeakBugs">メモリリークに関するバグを報告する</a></li> - <li><a href="Guide/Report/Enhancement">要望を報告する</a></li> - </ol> - </li> - <li><a href="Guide/Comment">バグにコメントを付ける</a> - <ol> - <li><a href="Guide/Comment/LinkRules">Bugzilla-jpの自動リンク機能</a></li> - </ol> - </li> - <li><a href="Guide/Management">運用ガイド</a> - <ol> - <li><a href="Guide/Management/DeleteAccount">アカウントの削除申請</a></li> - <li><a href="Guide/Management/UpgradeAccount">アカウントの権限昇格</a></li> - <li><a href="Guide/Management/StopAccount">アカウントの緊急停止</a></li> - </ol> - </li> - <li><a href="Guide/Contribute">どのような貢献が求められていますか?</a></li> - <li><a href="Guide/Grossary">Bugzilla-jp用語集</a></li> -</ol> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html deleted file mode 100644 index db93a251ba..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: LifeCycle -slug: orphaned/Bugzilla-jp/Guide/LifeCycle -original_slug: Bugzilla-jp/Guide/LifeCycle ---- -<h3 id=".E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB" name=".E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB">バグのライフサイクル</h3> -<p>各バグはステータスによって状態を管理されています。ステータスには以下のものがあります。</p> -<h4 id="UNCONFIRMED" name="UNCONFIRMED">UNCONFIRMED</h4> -<p>通常のアカウントから報告された直後のバグの状態です。つまり、そのバグは未だに関係者によって再現が確認されていません。バグ報告としてはまだ成立していない状態ですので、再現しにくいバグの場合、報告者の助けが重要なウエイトを占めることがあります。もし、報告者の協力が得られない場合は、そのままバグを閉じられてしまうことも多々あります。</p> -<h4 id="NEW" name="NEW">NEW</h4> -<p>バグの存在が確認された状態です。UNCONFIRMEDの状態のバグがスタッフによって確認された場合にこの状態に変更されます。</p> -<p>また、スタッフや、canconfirm権限のあるアカウントで報告された場合は最初からこの状態になっています。</p> -<h4 id="ASSIGNED" name="ASSIGNED">ASSIGNED</h4> -<p>バグについて担当者が作業を開始した場合にこの状態に変更されます。担当者が行う作業はプロダクトごとに異なっています。詳しくは次ページ以降を参照してください。</p> -<h4 id="RESOLVED" name="RESOLVED">RESOLVED</h4> -<p>そのバグに対して何らかの決着がついたことを示す状態です。 一般的には、そのバグに対する作業が終了したことを示しています。 この時、同時に処理方法がFIXED、INVALID、WONTFIX、LATER、REMIND、WORKSFORME、DUPLICATEのいずれかに設定されます。DUPLICATE以外の処理方法の意味は、プロダクトによって異なってきますので、詳細はページ末尾からリンクしているプロダクトごとの解説を参照してください。</p> -<p>DUPLICATEとなった場合、そのバグは別の登録されているバグと同じものでした。報告者はこの時、同時に同じ内容だった別のバグへとCCされます。もし、重複が誤りであると思うのであれば、<b>自分が報告した方のバグ</b>に何らかのコメントを付けてください。決して、この目的でもうひとつのバグの方にコメントを付けないように注意してください。</p> -<h4 id="VERIFIED" name="VERIFIED">VERIFIED</h4> -<p>RESOLVEDとなったバグに対して、 別のスタッフか報告者がその事実を確認した状態です。 この状態になっていれば、そのバグは完全に決着が着いた状態であると言えます。</p> -<h4 id="REOPENED" name="REOPENED">REOPENED</h4> -<p>VERIFIEDとなったバグが、実はまだ解決していなかったことが分かった場合にこの状態になります。この際に、設定されていた処理方法はリセットされ、空白に戻ります。</p> -<p>多くの場合、RESOLVEDになった時に設定された処理方法が適切ではなかった場合に、一度REOPENEDとなり、適切な処理方法を再設定して、RESOLVEDに戻すために利用されます。</p> -<p>バグの修正が不十分だった場合にREOPENEDになることもありますが、実際にはそれは希です。大抵、修正が不十分だった場合は別の問題が発覚したということなので、新たにバグが登録されるからです。</p> -<p>なお、一度修正されたバグが再発しても、REOPENEDにはなりません。バグの再発は異なる原因で再発していることが大半だからです。また、バグの担当者は既にBugzilla-jpでは作業していないかもしれません。このような場合、REOPENEDは適当な処理とは言えません。この場合も新たにバグを登録しなおすのが適当です。</p> -<hr> -<p>ステータスはバグの管理において、最も重要な要素のうちのひとつです。Bugzilla-jpでの運用経験の少ないアカウントはこれを変更してはいけません。もし、ステータスが変更されるべきなのにスタッフ、もしくは開発者のミスで変更が行われない場合、コメントでその旨をスタッフに伝えて、スタッフの判断を待ってください。</p> -<p>プロダクトごとのより細かいライフサイクルと、処理方法の意味は以下のドキュメントを参考にしてください。</p> -<ol> - <li><a href="LifeCycle/Mozilla">Mozilla関連製品に関するバグのライフサイクル</a></li> - <li><a href="LifeCycle/WebStandard">Web標準化プロダクトに関するバグのライフサイクル</a></li> - <li><a href="LifeCycle/WebTools">Webtoolsプロダクトに関するバグのライフサイクル</a></li> - <li><a href="LifeCycle/MozillaGumi">もじら組のコンテンツに関するバグのライフサイクル</a></li> - <li><a href="LifeCycle/QAMozilla">談話室ばぐじらに関するバグのライフサイクル</a></li> -</ol> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html deleted file mode 100644 index 3d8ad2a96e..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Mozilla -slug: orphaned/Bugzilla-jp/Guide/LifeCycle/Mozilla -original_slug: Bugzilla-jp/Guide/LifeCycle/Mozilla ---- -<p> -</p> -<h3 id="Mozilla.E9.96.A2.E9.80.A3.E8.A3.BD.E5.93.81.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB"> Mozilla関連製品に関するバグのライフサイクル </h3> -<p>Mozilla関連製品のバグとは、Core、Firefox、Thunderbird、Camino、Mozilla Application Suite、Calendar、L10N(日本語化)プロダクトのバグのことを指します。 -</p><p><b>これらのプロダクトのステータスはTrunkでの開発状況を示します。これはBugzilla-jpで修正済みであるとされたバグであっても、次にリリースされる公式のビルドで修正されているとは限らないことに注意してください。</b> -</p><p>これらのバグで行われる作業とは、報告されたバグの確認とテスト、Bugzilla-orgの該当バグとの関連づけと、その追跡です。担当者はバグを修正するのではなく、そのバグの状態を追跡するのが仕事です。 -</p><p>処理方法の各意味は次のように定義されています。 -</p> -<h4 id="FIXED"> FIXED </h4> -<p>このバグはTrunkにおいて修正済みです。 -</p> -<h4 id="WORKSFORME"> WORKSFORME </h4> -<p>このバグはTrunkにおいて再現しません。もしくは、報告者以外の環境で再現しませんでした。 -</p> -<h4 id="INVALID"> INVALID </h4> -<p>このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -</p> -<h4 id="INCOMPLETE"> INCOMPLETE </h4> -<p>何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -</p> -<h4 id="WONTFIX"> WONTFIX </h4> -<p>このバグはバグですが修正されません。標準仕様がまずい場合や、実装するとパフォーマンスが著しく低下してしまうような場合、修正が著しく困難な場合、要望が受け入れられない場合等に用いられます。 -</p> -<h4 id="OBSOLETE"> OBSOLETE </h4> -<p>このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。 -</p> -<h4 id="DUPLICATE"> DUPLICATE </h4> -<p>このバグは別のバグと同じ内容でした。 -</p> -<h4 id="LATER"> LATER </h4> -<p>使用しません。 -</p> -<h4 id="REMIND"> REMIND </h4> -<p>使用しません。 -</p> -<hr> -<p>これらのプロダクトでは、担当の決定までのプロセスで、 -報告のされ方から三つのパターンが考えられます。 -</p><p>一つめは、Trunkの最新のNightly Buildで確認されたバグを報告されたものです。 -このバグは大抵の場合、すぐにスタッフによって確認が行われ、バグが確認されるとNEWになり、スタッフがBugzilla-orgから該当のバグを探す作業に入ります。Bugzilla-orgで該当のバグが発見されると、発見した人か、別のスタッフがバグの担当に就任し、ASSIGNEDとなり、Bugzilla-orgの該当バグの追跡を開始します。 -</p><p>もし発見できなかった場合は新たにBugzilla-orgにバグを報告し、報告者が担当に就任してBugzilla-orgの該当バグの追跡を開始します。 -</p><p>二つめは、最新のリリースビルドを使って確認されたバグを報告されたものです。このバグの場合、Trunkの最新のNightly Buildで再現確認が行われます。もし、再現した場合は一つめのケースと同様に処理されることになります。しかし、再現しなかった場合は少し面倒です。 -</p><p>まず、同じリリースビルドで再現するかどうかが確認されます。もし、ここで確認された場合、Trunkでは修正されているということで、Bugzilla-orgで該当の修正済みのバグを探すことになります。 -</p><p>もし、バグが見つかれば、Bugzilla-orgのバグがREOPENEDに戻らないか、監視するために誰かが担当に就任して、そのままRESOLVED FIXEDとなります。見つからなかった場合は、担当者不在のまま、RESOLVED WORKSFORMEとなります。 -</p><p>もし、リリースビルドでも再現できなかった場合は報告者とのやりとりによって、再現に努めることになりますが、適当な所で作業が打ち切られて、RESOLVED WORKSFORMEもしくは、RESOLVED INVALIDとなることもあります。 -</p><p>三つめは、Bugzilla-orgに報告されていて、再現するバグをBugzilla-orgのバグID付きで報告される場合です。この場合、報告者がそのまま担当に就任するか、スタッフが担当に就任し、ASSIGNEDとなります。 -</p><p>担当者によりバグの追跡が開始されると、多くの場合、そのバグの更新は修正されるまで停滞することになります。日本人開発者がそのバグの修正に取りかかった場合、日本人間でのディスカッションが必要ならそのバグで議論が行われますが、それは希です。 -</p><p>Bugzilla-orgの関連したバグで何らかの動きがあれば、担当者はその動きを報告してくれるかもしれません。しかし、担当者にその義務はありませんので、担当者次第です。リアルタイムに情報が欲しい場合は関連づけられたBugzilla-orgのバグを自分で追跡する必要があります。 -</p><p>Bugzilla-orgの該当バグがRESOLVEDになった場合、その結果によって以下の四つの対処が担当者によって行われます。 -</p><p>一つめは、Bugzilla-orgでFIXEDまたは、WORKSFORMEとなった場合です。この場合、担当者はバグのホワイトボードに<span>Bug-org [Bugzilla-orgのバグの番号] [FIXED|WORKSFORME]</span>と、関連バグの処理結果をメモします。 -</p><p>そして、担当者、またはテストできる人間が、バグの修正、または、再現しないことを確認すると、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。また、同時に、修正されたタイミングを明確化させるために、現在のTrunkのサイクルから適切な値をターゲットマイルストーンに設定します。 -</p><p>さらに別のスタッフ、もしくは報告者自身が修正を確認した場合、VERIFIEDとなります。 -</p><p>もし、修正を確認できなかった場合、関連づけていたBugzilla-orgとは関係なかった可能性があるので再調査となります。 -</p><p>二つめは、Bugzilla-orgでINVALIDまたはWONTFIXとなった場合です。この場合、担当者はバグのホワイトボードに<span>Bug-org [Bugzilla-orgのバグの番号] [INVALID|WONTFIX]</span>と、関連バグの処理結果をメモし、その根拠となったコメントを要約(翻訳)して、その理由をBugzilla-jp上でも明記し、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。さらに別のスタッフがその根拠を受け入れた場合、VERIFIEDとなります。 -</p><p>もしスタッフ以外でこの結果に納得できない人がいる場合、 -その人はスタッフに事情を説明して説得するか、 -直にBugzilla-orgの担当者と英語でディスカッションする必要があります。 -</p><p>三つめは日本人開発者がバグを修正した場合です。この場合、ホワイトボードに一つめの場合と同様の記述を行い、直ちにRESOLVED FIXEDとなります。これは、バグの修正課程において日本人の環境下でその修正がテストされているためです。 -</p><p>後に、別のスタッフが修正を確認するとVERIFIEDとなります。 -</p><p>四つめは関連づけていたBugzilla-orgのバグがRESOLVED DUPLICATEとなった場合です。この場合、担当者は新たに重複していた元のバグの監視を継続することになります。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html deleted file mode 100644 index 644a2efef9..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: MozillaGumi -slug: orphaned/Bugzilla-jp/Guide/LifeCycle/MozillaGumi -original_slug: Bugzilla-jp/Guide/LifeCycle/MozillaGumi ---- -<p> -</p> -<h3 id=".E3.82.82.E3.81.98.E3.82.89.E7.B5.84.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB"> もじら組のコンテンツに関するバグのライフサイクル </h3> -<p>このプロダクトではもじら組内のコンテンツ全般のバグ報告を扱っています。 -</p><p>またBugzilla-jpの運用方針に関するディスカッションもコンポーネント:bugzilla-jpで行っています。 -</p><p>このプロダクトのステータスは問題とされたコンテンツのバグの修正状況や、ディスカッションの状態を示します。 -</p><p>処理方法の各意味は次のように定義されています。 -</p> -<h4 id="FIXED"> FIXED </h4> -<p>このバグは既に修正済みです。 -</p><p>もしくは、ディスカッションは決着しました。 -</p> -<h4 id="WORKSFORME"> WORKSFORME </h4> -<p>このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。 -</p><p>ディスカッションでは使用されません。 -</p> -<h4 id="INVALID"> INVALID </h4> -<p>このバグはバグではありません(仕様通りです)。または、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -</p><p>ディスカッションの場合、提案は却下されました。 -</p> -<h4 id="WONTFIX"> WONTFIX </h4> -<p>このバグはバグですが修正されません。 -</p><p>ディスカッションの場合、提案の内容は的を射ていましたが、対応不能です。 -</p> -<h4 id="OBSOLETE"> OBSOLETE </h4> -<p>このバグは修正された訳ではありませんが、再現不可能になっています。バグのあったページが削除された場合等に使用されます。 -</p> -<h4 id="DUPLICATE"> DUPLICATE </h4> -<p>このバグは別のバグと同じ内容でした。 -</p> -<h4 id="LATER"> LATER </h4> -<p>使用しません。 -</p> -<h4 id="REMIND"> REMIND </h4> -<p>使用しません。 -</p> -<hr> -<p>このプロダクトでは報告された内容がバグであると確認されるか、ディスカッションすべき内容であると確認されると、NEWとなります。 -</p><p>もし、バグではない場合や、的を射ていない提案の場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合や、提案は実現不能と考えられた場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。 -</p><p>もし報告されたバグが修正可能で、担当者が作業を開始するとASSIGNEDとなります。ディスカッションの場合は誰かが議論の中心に立つ場合、担当者となりASSIGNEDとなります。 -</p><p>そして修正が完了、もしくは決着すると、RESOLVED FIXEDとなり、別のスタッフがそれを確認すると、VERIFIEDとなります。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html deleted file mode 100644 index cf57e69c10..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: QAMozilla -slug: orphaned/Bugzilla-jp/Guide/LifeCycle/QAMozilla -original_slug: Bugzilla-jp/Guide/LifeCycle/QAMozilla ---- -<p> -</p> -<h3 id=".E8.AB.87.E8.A9.B1.E5.AE.A4.E3.81.B0.E3.81.90.E3.81.98.E3.82.89.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB"> 談話室ばぐじらに関するバグのライフサイクル </h3> -<p>このプロダクトは他に適当なコンポーネントが無いディスカッションのために用いられます。 -</p><p>このプロダクトのステータスは話題の状態を示します。NEWもしくはASSIGNEDならまだ話題についての議論は続いているのでしょう。逆に、RESOLVEDやVERIFIEDならおそらく議論には決着が着いています。 -</p><p>処理方法は概ね次のような意味かもしれませんが、明確な定義はありません。 -そのバグの下の方のコメントを読んで、自分で判断するべきでしょう。 -</p> -<h4 id="FIXED"> FIXED </h4> -<p>この議論は決着したのかもしれません。もしくは、コメントが大量に付いたため、 -新たにバグを登録して、そちらでの議論に移ったのかもしれません。 -</p> -<h4 id="WORKSFORME"> WORKSFORME </h4> -<p>おそらく使用されません。 -</p> -<h4 id="INVALID"> INVALID </h4> -<p>話題は的を射ていないことだったのかもしれません。 -</p> -<h4 id="INCOMPLETE"> INCOMPLETE </h4> -<p>その議論の提案者にしか判断できない議論なのに、提案者から応答が得られなかったようです。 -</p> -<h4 id="WONTFIX"> WONTFIX </h4> -<p>議論は決着が着かなかったのかもしれません。 -</p> -<h4 id="OBSOLETE"> OBSOLETE </h4> -<p>議論の内容に意味がなくなったのかもしれません。 -</p> -<h4 id="DUPLICATE"> DUPLICATE </h4> -<p>この話題は別のバグと同じ内容でした。 -</p> -<h4 id="LATER"> LATER </h4> -<p>おそらく使用されません。 -</p> -<h4 id="REMIND"> REMIND </h4> -<p>おそらく使用されません。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html deleted file mode 100644 index 215f812702..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: WebStandard -slug: orphaned/Bugzilla-jp/Guide/LifeCycle/WebStandard -original_slug: Bugzilla-jp/Guide/LifeCycle/WebStandard ---- -<p> -</p> -<h3 id="Web.E6.A8.99.E6.BA.96.E5.8C.96.E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB"> Web標準化プロダクトに関するバグのライフサイクル </h3> -<p>このプロダクトのステータスは問題のあるサイトの管理者とのコンタクト状況や、 -問題のサイトの修正状況を示します。 -</p><p>このプロダクトで行われる作業とは、報告された問題に関する仕様の調査と、修正方法(標準仕様に準拠した代替方法)の検討、問題のあるサイトへの修正依頼と、そのサイトの監視です。担当者は問題のあるサイトにコンタクトをとった人物で、サイトの監視義務はありません。 -</p><p>注意:このプロダクトに報告された問題は、報告された時にスタッフによりチェックされますが、(色々な意味で)興味深い問題ではなく、さほど公益性のあるサイトで無い場合には誰も担当しない可能性があります。 -</p><p>ただし、興味深い問題に関しては、<a class="external" href="http://www.mozilla.gr.jp/standards/">Web標準普及プロジェクト</a>や、Geckoそのものにフィードバックが行われることがあり、この場合、そのサイトが修正されなくても大きな意義があります。 -</p><p>処理方法の各意味は次のように定義されています。 -</p> -<h4 id="FIXED"> FIXED </h4> -<p>問題のあるサイトはGeckoに対応させるために修正してくれました。 -</p> -<h4 id="WORKSFORME"> WORKSFORME </h4> -<p>問題のあるサイト、またはページが無くなりました。または、Geckoの仕様変更により、最新のリリースビルドで非標準への妥協があり、Geckoでのアクセスには問題なくなりました。 -</p> -<h4 id="INVALID"> INVALID </h4> -<p>INCOMPLETE導入前はINVALIDが代わりに利用されていましたが、現在は利用されていません。 -</p> -<h4 id="INCOMPLETE"> INCOMPLETE </h4> -<p>妥当な報告として成立しませんでした。 -</p> -<h4 id="WONTFIX"> WONTFIX </h4> -<p>問題のあるサイトにコンタクトを取りましたが、長期間に渡って反応がありませんでした。もしくは、問題のあるサイトから、修正しない旨の返事がありました。 -</p> -<h4 id="OBSOLETE"> OBSOLETE </h4> -<p>使用しません。 -</p> -<h4 id="DUPLICATE"> DUPLICATE </h4> -<p>この問題は既に報告されていました。(同一のサイトであることが条件です。) -</p> -<h4 id="LATER"> LATER </h4> -<p>問題のあるサイトにコンタクトを取ったところ、後ほど(例えば、次のリニューアル時に)対応すると返事がありました。 -</p> -<h4 id="REMIND"> REMIND </h4> -<p>問題のあるサイトにコンタクトを取ったところ、検討するという返事がありました。 -</p> -<hr> -<p>このプロダクトでは報告があると、まず、 -発生している問題がWeb標準仕様に準拠していなためであることを確認します。 -もし、Geckoのバグが原因である場合はプロダクトが変更され、{{ mediawiki.external('Bugzilla-jp:Guide:LifeCycle:Mozilla|Mozilla関連製品に関するバグのライフサイクル') }}として処理されます。 -</p><p>サイト側の問題であることが確認されると、ステータスをNEWとして、次のように処理します。 -</p><p>まず、Web標準普及プロジェクトの<a class="external" href="http://www.mozilla.gr.jp/standards/webtips/index.html">Web標準化Tips</a>に記載されている既知の問題の場合、ドキュメント内に原因や修正方法が既に記載されているので、サイトの管理者にそのドキュメントのURIを提示し、修正を依頼します。 -</p><p><a class="external" href="http://www.mozilla.gr.jp/standards/webtips/index.html">Web標準化Tips</a>に記載されていない問題の場合、修正案を作成し、コメントに修正方法を記述するか、添付ファイルで差分を提出します。もし、別のスタッフに修正案を確認してもらう必要がある場合、差分を提出し、レビューを依頼します。そして、修正案が固まったら、サイトの管理者にコンタクトをとり、修正方法の提示と、修正依頼を行います。 -</p><p>修正依頼を行う相手は、サイト上に連絡先が明記されている場合には、その連絡先になります。連絡先が明記されていない場合で、ドメインを他のサイトと共有していないサイトの場合、WHOISサービスを使って、サーバの管理者を調べ、その管理者にメールでコンタクトを取ります。もし、他のサイトと共有しているサーバで連絡先が不明な場合はコンタクトを断念し、RESOLVED WONTFIXとなります。 -</p><p>サイト側とコンタクトを取ることに成功すると、その人が、担当に就任し、ステータスをASSIGNEDとします。 -</p><p>コンタクトをとった場合、サイトから返事が返ってくることがあります。 -この場合、その内容に従って必要ならステータスを変更し、 -処理方法に適切なものを設定します。 -</p><p>連絡が無い場合はそのサイトを適当に監視するしかありません。もし、サイトが更新され、問題に変化があった場合はその旨をコメントします。スタッフがそれを確認したら、適宜、ステータスを変更し、適切な処理方法でバグを閉じます。その後、別のスタッフによって再確認が行われると、VERIFIEDとなります。 -</p><p>もし、長期間に渡って問題が改善されず、不特定多数が利用する特にメジャーなサイトでは無い場合、RESOLVED WONTFIXとして監視を中断することもあります。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html deleted file mode 100644 index c52db3cc51..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: WebTools -slug: orphaned/Bugzilla-jp/Guide/LifeCycle/WebTools -original_slug: Bugzilla-jp/Guide/LifeCycle/WebTools ---- -<h3 id="Webtools.E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB" name="Webtools.E3.83.97.E3.83.AD.E3.83.80.E3.82.AF.E3.83.88.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB">Webtoolsプロダクトに関するバグのライフサイクル</h3> -<p>このプロダクトは特殊で、コンポーネントによって異なります。このプロダクトにはBugzillaそのもののバグを取り扱うBugzillaコンポーネントと、Bugzilla-jpでカスタマイズしている部分のバグを取り扱うBugzilla-jpコンポーネントの二つがあります。前者については、Bugzilla.orgのプロダクトのバグのため、<a href="Mozilla">Mozilla関連製品に関するバグのライフサイクル</a>と同じライフサイクルとなりますので、そちらを参考にしてください。<b>このページでは、後者、Bugzilla-jpコンポーネントの場合についてのみ説明しています。</b></p> -<p>このプロダクトのステータスはBugzilla-jpのバグの修正状況を示します。</p> -<p>処理方法の各意味は次のように定義されています。</p> -<h4 id="FIXED" name="FIXED">FIXED</h4> -<p>このバグは既に修正済みです。</p> -<h4 id="WORKSFORME" name="WORKSFORME">WORKSFORME</h4> -<p>このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。</p> -<h4 id="INVALID" name="INVALID">INVALID</h4> -<p>このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)</p> -<h4 id="INCOMPLETE" name="INCOMPLETE">INCOMPLETE</h4> -<p>何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)</p> -<h4 id="WONTFIX" name="WONTFIX">WONTFIX</h4> -<p>このバグはバグですが修正されません。例えば、あまりにも巨大な修正が必要なバグは解決できません。</p> -<h4 id="OBSOLETE" name="OBSOLETE">OBSOLETE</h4> -<p>このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。</p> -<h4 id="DUPLICATE" name="DUPLICATE">DUPLICATE</h4> -<p>このバグは別のバグと同じ内容でした。</p> -<h4 id="LATER" name="LATER">LATER</h4> -<p>使用しません。</p> -<h4 id="REMIND" name="REMIND">REMIND</h4> -<p>使用しません。</p> -<hr> -<p>このプロダクトでは報告された内容がバグであると確認されると、NEWとなります。</p> -<p>もし、バグではない場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。</p> -<p>もし報告されたバグが修正可能で、担当者が修正を開始するとASSIGNEDとなります。</p> -<p>そして修正が完了すると、RESOLVED FIXEDとなり、別のスタッフが修正を確認すると、VERIFIEDとなります。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html deleted file mode 100644 index 607fffb44d..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: DeleteAccount -slug: orphaned/Bugzilla-jp/Guide/Management/DeleteAccount -original_slug: Bugzilla-jp/Guide/Management/DeleteAccount ---- -<h3 id=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E5.89.8A.E9.99.A4.E7.94.B3.E8.AB.8B" name=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E5.89.8A.E9.99.A4.E7.94.B3.E8.AB.8B">アカウントの削除申請</h3> -<p>Bugzillaにはアカウントを削除する機能がありません。</p> -<p>単にメールの配信を止めたいだけであれば、<a href="../About/ChangeAccountPrefs#.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E9.80.81.E4.BF.A1.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"> メールの送信設定を変更する</a>を参考に、メールの配信を止めてください。</p> -<p>なんらかの理由でそれだけではなく、アカウントそのものを完全に削除したい場合、プロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで削除要請のバグをたてて、理由を説明してください。</p> -<p>データベースの構造上、基本的にはアカウントの削除はできませんので、<b>全てのケースにおいて、削除申請が受理されるとは限らないことに注意してください</b>。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/index.html deleted file mode 100644 index e8fd98e74b..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/management/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Management -slug: orphaned/Bugzilla-jp/Guide/Management -original_slug: Bugzilla-jp/Guide/Management ---- -<h3 id=".E9.81.8B.E7.94.A8.E3.82.AC.E3.82.A4.E3.83.89" name=".E9.81.8B.E7.94.A8.E3.82.AC.E3.82.A4.E3.83.89">運用ガイド</h3> -<p>以下のドキュメントは権限が関係したりする、運用ルールについてまとめています。もし、ここで明記すべきルールが他にもある場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグを登録してください。</p> -<ol> - <li><a href="Management/DeleteAccount">アカウントの削除申請</a></li> - <li><a href="Management/UpgradeAccount">アカウントの権限昇格</a></li> - <li><a href="Management/StopAccount">アカウントの緊急停止</a></li> -</ol> diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html deleted file mode 100644 index 84524a65e6..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: StopAccount -slug: orphaned/Bugzilla-jp/Guide/Management/StopAccount -original_slug: Bugzilla-jp/Guide/Management/StopAccount ---- -<p> -</p> -<h3 id=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E7.B7.8A.E6.80.A5.E5.81.9C.E6.AD.A2"> アカウントの緊急停止 </h3> -<p>特定のアカウントが故意であるか否かに関わらず、Bugzilla-jpへの適切ではない投稿や、その他の行為があった場合に、即時停止されます。 -</p><p>これはBugzilla-jpのデータや運用に対する被害を最小限に抑えるために一切の事前通告等はありません。 -</p><p>もし、スタッフが問題視した行動が故意ではなかったことが判明したり、そのような行動を二度と行わないと判断された場合には、そのアカウントは再び通常の状態に戻されます。 -</p><p>アカウントを停止させたスタッフは停止メッセージの中で停止解除のための連絡先を明記すべきです。もし、停止に納得できず、連絡先が明記されていない場合、xxx@xxxに連絡してその旨を説明してください。 -</p> -<div class="note"> -<p>すみません。まだ緊急時の連絡先はまだ決定しておりません。それまでは停止メッセージの中に連絡先が記述されているはずです。 -</p> -</div> diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html deleted file mode 100644 index 845b683a52..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: UpgradeAccount -slug: orphaned/Bugzilla-jp/Guide/Management/UpgradeAccount -original_slug: Bugzilla-jp/Guide/Management/UpgradeAccount ---- -<p> -</p> -<h3 id=".E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.81.AE.E6.A8.A9.E9.99.90.E6.98.87.E6.A0.BC"> アカウントの権限昇格 </h3> -<p>アカウント毎に編集に関する権限設定が存在します。登録しただけのアカウントではNEWのバグすら登録することはできません。もし、あなたがBugzilla-jpの権限が足りずに困っているのであれば、以下の要件を確認した上でアカウントの権限昇格を申請するバグをプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで登録してください。 -</p> -<h4 id="canconfirm.E6.A8.A9.E9.99.90.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B"> canconfirm権限を取得する </h4> -<p>canconfirm権限とはNEWのバグを登録したり、ガイドモードを利用せずにバグを登録したり、UNCONFIRMEDのバグをNEWに変更することが可能です。他人の登録したバグの編集権限はありませんが、この権限は簡単に取得することができます。 -</p><p>要件として、あなたが報告したバグが3件以上必要です。また、それらのバグはこのドキュメントで説明されているような的確で分かりやすいバグである必要があります。 -</p><p>つまり、私たちはあなたのバグ報告能力をこの権限を持つに適当なものであるかどうかを確認する必要があります。 -</p> -<h4 id="editbugs.E6.A8.A9.E9.99.90.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B"> editbugs権限を取得する </h4> -<p>editbugs権限とは他人の報告したバグを編集することができる権限です。この権限があればあなたは多くの仕事をBugzilla-jp上ですることが可能になりますが、それ故に、この権限の取得にはある程度の実績が必要です。 -</p><p>あなたがパッチやテストケースを頻繁にBugzilla-jpを利用して提出するのであれば、この権限は短期間で付与されます。 -</p><p>あなたが1年以上、長期的にBugzilla-jpに貢献している(例えば多くのバグで担当者を名乗り出る等)場合もこの権限を持つ対象となります。 -</p><p>もちろん、これらの条件を満たしていなくても、スタッフがあなたはこの権限を持つべきであると判断した場合には権限は付与されます。 -</p> -<h4 id=".E3.82.BB.E3.82.AD.E3.83.A5.E3.83.AA.E3.83.86.E3.82.A3.E3.83.90.E3.82.B0.E3.82.92.E8.A6.8B.E3.82.8B.E6.A8.A9.E9.99.90.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B"> セキュリティバグを見る権限を取得する </h4> -<p>この権限はほとんどのアカウントに付与されません。 -</p><p>特定のセキュリティバグであなたの助けが必要であるとスタッフが判断した場合、あなたをそのバグのCCリストに追加し、そのバグを見ることができるようにするでしょう。 -</p><p>全てのセキュリティバグを見ることができる権限はそういった助けが常に必要であると思われる方(つまり、セキュリティバグに関する知識や、これをむやみに公表しない人であるといった印象が必要)にはスタッフ側から適時、この権限が付与されます。 -</p> -<h4 id="Bugzilla-jp.E3.81.AE.E9.81.8B.E5.96.B6.E3.81.AB.E9.96.A2.E3.82.8F.E3.82.8B.E6.A8.A9.E9.99.90.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B"> Bugzilla-jpの運営に関わる権限を取得する </h4> -<p>原則としてこの権限はほとんどのアカウントに付与されません。 -</p><p>あなたがBugzilla-jpの運営に関するディスカッションに頻繁に参加し、この権限を持つべき人だと多くのスタッフが判断した場合、あなたの意志を確認した後に付与されます。 -</p><p>この権限はアクティブな貢献者のみが持つべきものです。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html deleted file mode 100644 index 12ba4fc5af..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: CrashBugs -slug: orphaned/Bugzilla-jp/Guide/Report/CrashBugs -original_slug: Bugzilla-jp/Guide/Report/CrashBugs ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.83.83.E3.82.B7.E3.83.A5.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B" name=".E3.82.AF.E3.83.A9.E3.83.83.E3.82.B7.E3.83.A5.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B">クラッシュするバグを報告する</h3> -<p>クラッシュするバグの報告は簡単です。</p> -<h4 id="Firefox2.2FThunderbird2.E4.BB.A5.E5.89.8D" name="Firefox2.2FThunderbird2.E4.BB.A5.E5.89.8D">Firefox2/Thunderbird2以前</h4> -<p>まず、Firefox2/Thunderbird2以前では、Quality Feedback Agent(日本語版だと品質フィードバックエージェント)をインストールした状態でそのバグを再現させてください。</p> -<p>インストールしているかどうか分からない場合はアドオンマネージャでTalkbackという拡張がインストールされているか確認してください。インストールしていない場合は、Firefoxを上書きで再インストールします。その際に、カスタムインストールを使用してQuality Feedback Agentをインストールしてください。</p> -<p>シャットダウン時等、特殊な状況でのクラッシュバグを除き、大抵、クラッシュ時にQuality Feedback Agentが自動的に起動します。初回起動時のみ、英語で以下のようなツールの説明等が出てきます。</p> -<p><img alt="Quality Feedback Agentの初回起動時のダイアログのスクリーンショット" src="/@api/deki/files/1630/=Bugzilla-jp-Guide-FeedbackAgentWelcome1.png"></p> -<p>この最初の画面<b>と</b>次の画面と両方でNextボタンを押し、最後に出てくる、次の画面で「Turn Agent On」にチェックを入れ、Finishボタンを押してください。</p> -<p><img alt="Quality Feedback Agentの初回起動時のダイアログの最後の画面のスクリーンショット" src="/@api/deki/files/1631/=Bugzilla-jp-Guide-FeedbackAgentWelcome3.png"></p> -<p>そうすると以下のような実際のリポート画面が出てきますので、<b>そのまま何も入力せずに</b>Sendボタンを押してください。</p> -<p><img alt="Quality Feedback Agentの送信画面" src="/@api/deki/files/1629/=Bugzilla-jp-Guide-FeedbackAgentSend.png"></p> -<p>次に、Firefoxのインストールしたフォルダにある、talkback.exeを実行してください。そうすると、今までに送信した情報のIncident IDが表示されます。</p> -<p><img alt="Quality Feedback Agentの送信済みリストのスクリーンショット" src="/@api/deki/files/1628/=Bugzilla-jp-Guide-FeedbackAgentList.png"></p> -<p>この中から、Bugzilla-jpに報告したいクラッシュを選択し、コンテキストメニューからIncident IDをコピーして、それを私たちに報告してください。</p> -<p>その際に、そのクラッシュさせる手順も書き込んでください。Incident IDのみでのクラッシュの報告は再現確認等が行えないためです。</p> -<h4 id="Trunk.2FFirefox3.E4.BB.A5.E9.99.8D" name="Trunk.2FFirefox3.E4.BB.A5.E9.99.8D">Trunk/Firefox3以降</h4> -<p>TrunkではQuality Feedback Agentに代わり、Breakpadというツールが利用されるようになりました。</p> -<div class="note"> - <p>Breakpadの利用手順は後日紹介予定です。</p> -</div> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html deleted file mode 100644 index 6825553d15..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Enhancement -slug: orphaned/Bugzilla-jp/Guide/Report/Enhancement -original_slug: Bugzilla-jp/Guide/Report/Enhancement ---- -<h3 id=".E8.A6.81.E6.9C.9B.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B" name=".E8.A6.81.E6.9C.9B.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B">要望を報告する</h3> -<p><a href="../About/WhatIsBug">バグとは</a>で述べたように、Bugzilla-orgやBugzilla-jpでは製品に対する要望、機能強化もバグとして扱われます。ですが、<b>現在、Bugzilla-jpでは要望を受け付けていません</b>。</p> -<p>要望を挙げるのは簡単ですが、実際にそれに賛同し、パッチを作成し、更にそのコードをメンテナンスする人はまず居ないと考えてください。あなたにとって、とても有用で、素晴らしいアイデアがあったとしても、それが万人に必要とされ、受け入れられるものであることは非常に希です。(<a href="UIBugs">ユーザインターフェースに関するバグを報告する</a>も参照してください。)</p> -<p>どうしても実現したい要望があり、パッチも作るし、メンテナンスもするというのであれば、Bugzilla-jpをディスカッションの場として利用されることを私たちは拒否しません。その場合、「深刻度」を「enhancement」として登録してください。また、本家への登録やそのバグの担当もあなた自身で行ってください。(担当になる権限が無い場合、Bugzilla-jpのスタッフがあなたを担当に割り振ります。)</p> -<p>つまり、<b>私たちを頼って要望を出さないようにしてください</b>。</p> -<p>メモ: Bugzilla-orgにバグがあり、それを追跡する目的でのBugzilla-jpへの登録はかまいませんが、そのBugzilla-orgに登録されている要望はあなた以外が登録している必要があります。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/index.html deleted file mode 100644 index d95b12e755..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Report -slug: orphaned/Bugzilla-jp/Guide/Report -original_slug: Bugzilla-jp/Guide/Report ---- -<h3 id=".E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B">バグを報告する</h3> -<p>Bugzilla-jpにバグを報告する際にはいくかの決まりがあります。報告する人それぞれがガイドライン無く報告を行うと、開発者にとって必要な情報が不足したり、あなたが報告するバグを探している人が、うまくあなたの報告を見つけられないということが発生します。いわゆる「駄目な報告」はバグを処理する開発者にとっても、実際にそのバグで困っている報告者自身も不幸なものです。</p> -<p>ここではバグを報告する際のガイドラインと、開発者が報告してもらいたいと考えている情報をバグの種類ごとに紹介します。</p> -<p>バグを報告する際には、bugzilla-jpの画面上にある「新規登録」というリンクが移動します。報告する際にはまず以下のことについて注意してください。</p> -<h4 id=".E3.83.86.E3.82.B9.E3.83.88.E3.81.AF.E6.9C.80.E6.96.B0.E3.81.AETrunk.E3.81.A7.E3.82.82.E8.A1.8C.E3.81.86" name=".E3.83.86.E3.82.B9.E3.83.88.E3.81.AF.E6.9C.80.E6.96.B0.E3.81.AETrunk.E3.81.A7.E3.82.82.E8.A1.8C.E3.81.86">テストは最新のTrunkでも行う</h4> -<p>原則としてテストは最新の<a href="About/TrunkAndBranch">Trunk</a>でも行ってください。</p> -<p>もし、あなたがリリース版を常用している場合、発見したバグは報告する前に最新のTrunkビルドでも再現するかどうか確認をとってください。</p> -<p>セキュリティバグ、もしくは重大なバグ以外の場合、最新のTrunkビルドで再現しない場合は既に修正済みのバグであり、リリース版で修正されることはほとんどありません。</p> -<h4 id=".E3.83.90.E3.82.B0.E3.81.8C.E5.86.8D.E7.8F.BE.E3.81.99.E3.82.8B.E3.83.93.E3.83.AB.E3.83.89.E3.82.92.E6.98.8E.E8.A8.98.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.81.8C.E5.86.8D.E7.8F.BE.E3.81.99.E3.82.8B.E3.83.93.E3.83.AB.E3.83.89.E3.82.92.E6.98.8E.E8.A8.98.E3.81.99.E3.82.8B">バグが再現するビルドを明記する</h4> -<p>リリース版でのみ再現するバグであれば、リリースバージョン(2.0.0.4等)でかまいませんが、Trunkでのテストの場合、HelpのAboutで表示されるUser Agent名(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a6pre) Gecko/20070622 Minefield/3.0a6pre等)を書いてください。</p> -<p><img alt="MinefieldのAbout画面" src="/@api/deki/files/1622/=Bugzilla-jp-Guide-AboutDialogOfMinefield.png"></p> -<h4 id=".E6.97.A2.E3.81.AB.E5.90.8C.E3.81.98.E3.83.90.E3.82.B0.E3.81.8C.E7.99.BB.E9.8C.B2.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.81.AA.E3.81.84.E3.81.8B.E6.A4.9C.E7.B4.A2.E3.81.99.E3.82.8B" name=".E6.97.A2.E3.81.AB.E5.90.8C.E3.81.98.E3.83.90.E3.82.B0.E3.81.8C.E7.99.BB.E9.8C.B2.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.81.AA.E3.81.84.E3.81.8B.E6.A4.9C.E7.B4.A2.E3.81.99.E3.82.8B">既に同じバグが登録されていないか検索する</h4> -<p>既に同じバグが報告されている場合は報告の必要がありません。まずは検索してみてください。<a href="Search/Hints">検索に関するヒント</a>も用意していますので、参考にしてください。</p> -<p>見つからない場合は是非、報告してみてください。実際には重複となる報告だったとしても、そのバグが知られないままでいる方が問題です。</p> -<h4 id=".E4.B8.80.E5.9B.9E.E3.81.AE.E5.A0.B1.E5.91.8A.E3.81.A7.E4.BA.8C.E3.81.A4.E4.BB.A5.E4.B8.8A.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.97.E3.81.AA.E3.81.84" name=".E4.B8.80.E5.9B.9E.E3.81.AE.E5.A0.B1.E5.91.8A.E3.81.A7.E4.BA.8C.E3.81.A4.E4.BB.A5.E4.B8.8A.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.97.E3.81.AA.E3.81.84">一回の報告で二つ以上のバグを報告しない</h4> -<p>Bugzilla上ではバグ単位でステータスを管理します。そのため、ひとつの報告に二つ以上のバグを報告されると管理できなくなってしまいます。</p> -<p>例えば、同じWebページで二つのバグを見つけて、それを箇条書きにして一つの報告にまとめてはいけません。この場合、二つのバグをそれぞれ、別々に報告しなくてはいけません。</p> -<p>スタッフが後からバグを分割するだろうという期待はしないでください。それは非常に迷惑なことです。なぜなら、Bugzillaでは一度投稿されたコメントは修正できないため、あなたの当初の不適切な報告はそのままになってしまいます。それをスタッフが分割したとしても、そのバグを検索した第三者はそのバグが何を取り扱っているのかを知るためには分割作業が終わるところまでコメントを読む必要が出てきます。これでは、バグのデータベースとしては非常に品質の低いデータとなってしまいます。</p> -<p>つまり、最初の報告者のコメントの文面だけでバグの詳細を理解できるのが理想的です。</p> -<h4 id=".E3.83.90.E3.82.B0.E3.81.AE.E5.86.8D.E7.8F.BE.E6.9D.A1.E4.BB.B6.E3.82.92.E7.B4.B0.E3.81.8B.E3.81.8F.E8.AA.BF.E6.9F.BB.E3.81.97.E3.81.A6.E3.81.8B.E3.82.89.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.81.AE.E5.86.8D.E7.8F.BE.E6.9D.A1.E4.BB.B6.E3.82.92.E7.B4.B0.E3.81.8B.E3.81.8F.E8.AA.BF.E6.9F.BB.E3.81.97.E3.81.A6.E3.81.8B.E3.82.89.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B">バグの再現条件を細かく調査してから報告する</h4> -<p>バグの再現条件がいい加減なままで報告しないでください。</p> -<p>例えば、特定のパソコンでのみ再現する、といった報告は良くありません。私たちがあなたよりもあなたのパソコンの環境に詳しいということはありません。</p> -<p>しかし、どうしても再現条件の絞り込みが困難な場合はこの限りではありません。</p> -<h4 id=".E3.82.BB.E3.83.BC.E3.83.95.E3.83.A2.E3.83.BC.E3.83.89.E3.81.A7.E3.82.82.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.BB.E3.83.BC.E3.83.95.E3.83.A2.E3.83.BC.E3.83.89.E3.81.A7.E3.82.82.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">セーフモードでもテストする</h4> -<p>報告する際は、拡張を無効にした状態でも確認をしてください。あなたが報告しようとしている不具合は、拡張によるものかもしれません。報告の前に拡張をアンインストールするか、セーフモードで実行し、Mozilla製品単体で再現するかを確認してください。なお、Bugzilla-jpでは現在、拡張や(デフォルト以外の)テーマの不具合は受付けておりません。</p> -<hr> -<p>以下、バグの種類ごとにおける特殊な注意事項については以下のドキュメントを参照してください。</p> -<ol> - <li><a href="Report/RenderingBugs">Webの表示に関するバグを報告する</a></li> - <li><a href="Report/UIBugs">ユーザインターフェースに関するバグを報告する</a></li> - <li><a href="Report/CrashBugs">クラッシュするバグを報告する</a></li> - <li><a href="Report/SecurityBugs">セキュリティに関するバグを報告する</a></li> - <li><a href="Report/MemoryLeakBugs">メモリリークに関するバグを報告する</a></li> - <li><a href="Report/Enhancement">要望を報告する</a></li> -</ol> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html deleted file mode 100644 index ddf886fe47..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: MemoryLeakBugs -slug: orphaned/Bugzilla-jp/Guide/Report/MemoryLeakBugs -original_slug: Bugzilla-jp/Guide/Report/MemoryLeakBugs ---- -<p> -</p> -<h3 id=".E3.83.A1.E3.83.A2.E3.83.AA.E3.83.AA.E3.83.BC.E3.82.AF.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> メモリリークに関するバグを報告する </h3> -<p>Bugzilla-jpにメモリリークバグを報告する場合は、<b>必ず</b>原因となるコードを特定するか、Bugzilla-orgのバグのIDと共に報告してください。Bugzilla-orgではここまで厳しい要求を報告者に求めていませんが、現象のみからBugzilla-jpにバグを報告されても、これをBugzilla-orgの特定のバグを同じバグであると判断することができないため、私たちはこれをあなたに要求するしかありません。 -</p><p>もちろん、コード上から直接発見した場合を除き、実際にそのメモリリークがどうやれば発生するのかも報告してください。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html deleted file mode 100644 index c897548c6a..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: RenderingBugs -slug: orphaned/Bugzilla-jp/Guide/Report/RenderingBugs -original_slug: Bugzilla-jp/Guide/Report/RenderingBugs ---- -<p> -</p> -<h3 id="Web.E3.81.AE.E8.A1.A8.E7.A4.BA.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> Webの表示に関するバグを報告する </h3> -<p>Webコンテンツの表示に関するバグを報告する場合、Web標準仕様に関する最低限の知識は必要になります。<b>他のブラウザとは表示結果が違うということを理由に報告しないでください。</b>その判断は多くの場合、間違っています。他のブラウザとの表示結果の違いはバグを見つける良いきっかけですが、それがGeckoのバグであるかどうかはWeb標準仕様に照らし合わせて検証する必要があります。つまり、Geckoにバグがあるため、表示結果が異なったという確証を私たちは仕様書に求めます。報告する際に仕様書のどこの記述に違反しているのかを明示してください。 -</p><p>なお、仕様書は有志によって和訳された仕様書でかまいません。和訳された仕様書が利用できる場合、Bugzilla-jpではよくそれを資料として利用しています。 -</p><p>ただし、根拠として挙げようとする仕様書が勧告前のものである場合は注意してください。まず、既に先行実装していること自体にバグがある場合は報告してください。先行実装の失敗は明らかにGeckoのバグであると言えるからです。そのバグは修正されなくてはいけません。 -</p><p>ですが、先行実装すべきである、して欲しい、というバグは、あなたが実作業を行う場合を除き、報告しないでください。私たちは実現するかどうか分からない要望がBugzilla-jpにあふれかえる状態を好ましい状態とは考えていないためです。 -</p><p>また、非常にシンプルなテストケースを私たちは必要としています。何百行もあるtableレイアウトのWebページを示されて、その一部の表示にバグがあると言われても、その検証には時間がかかります。あなたが報告した後に、<b>簡単な</b>テストケースを<b>添付</b>してくれることで私たちはその時間を自分の仕事に割り当てることができます。<b>(コメント欄にソースコードを貼り付けないでください。それをテストするにはファイルを作成する必要があるため、確認を行うだけで貴重な労力を必要としてしまいます。)</b> -</p><p>なお、ひとつひとつのバグについて個別に報告していただけるようにお願いします。例えば、ひとつのWebページで二つのバグが同時に見つかったからといって、それらをまとめて一つの報告にしないでください。なぜなら、それらのバグが同時に修正される訳ではないからです。二つのバグがある場合、バグ報告もテストケースの作成も二件に分けるようにお願いします。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html deleted file mode 100644 index 019df28cce..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: SecurityBugs -slug: orphaned/Bugzilla-jp/Guide/Report/SecurityBugs -original_slug: Bugzilla-jp/Guide/Report/SecurityBugs ---- -<p> -</p> -<h3 id=".E3.82.BB.E3.82.AD.E3.83.A5.E3.83.AA.E3.83.86.E3.82.A3.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> セキュリティに関するバグを報告する </h3> -<p>もしあなたが見つけたバグがセキュリティに関わる(つまり、他のユーザがあなたの報告によって攻撃者から被害を受ける可能性がある)場合、あなたはそのバグを非公開のバグとして報告することができます。 -</p><p>バグを報告する際に「Bug 報告を送信」ボタンの直前にある「Mozilla/Firefoxのセキュリティ問題を扱うグループ」にチェックを入れてから、送信してください。このフラグが付けられたバグはスタッフと信頼できる貢献者の方々とあなたにしか見えなくなります。 -</p><p>もし、報告されたセキュリティバグが既にBugzilla-orgで公開されているものだったり、危険の無いものであった場合、スタッフによって通常の公開されたバグに変更されます。ですから、どちらか判断できない場合、セキュリティバグとして報告してもらった方が問題ありません。 -</p><p>あなたが同時にBugzilla-orgにも同一の内容を報告した場合、そのバグIDも報告してください。また、スタッフからそのバグのCCへの追加要請があった場合、対応をお願いします。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html deleted file mode 100644 index 2f259d8dd2..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: UIBugs -slug: orphaned/Bugzilla-jp/Guide/Report/UIBugs -original_slug: Bugzilla-jp/Guide/Report/UIBugs ---- -<p> -</p> -<h3 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E3.83.90.E3.82.B0.E3.82.92.E5.A0.B1.E5.91.8A.E3.81.99.E3.82.8B"> ユーザインターフェースに関するバグを報告する </h3> -<p>ユーザインターフェース(以下、UI)に関するバグは、いわゆるバグと、こうあるべきだという要望の二種類に分けて考えた場合、圧倒的に要望が多く寄せられるものです。ですが、UIに関する要望を行うことは原則的にやめてください。特に、既存の動作と賛否両論が分かれるような要望は受け付けられません。 -</p><p>何故かと言うと、現在のMozilla関連製品は全て「独裁的な」開発体制によってUIの仕様が決定されています。これは過去に様々な要望を取り込む「民主的な」開発体制で失敗した経験を持っているためです。 -</p><p>Bugzilla-orgではUIに関する議論も行われていますが、これはBugzilla-jpという"架け橋"ではできないことです。つまり、UIに関して議論が行いたい場合、Bugzilla-jpという場は良い場ではありません。 -</p><p>また、この開発体制が全ての人の要望を満たすことができない、という事実に対する回答として「拡張機能(アドオン)」という仕組みが整備されました。UI仕様に対して要望がある場合、まずは拡張機能での開発を検討してください。それが適さない場合には報告していただいてもかまいませんが、そのバグはあなたがリーダーシップを発揮して、Bugzilla-orgと連携をとる必要があります。つまり、<b>自分で開発できない場合、要望をBugzilla-jpに報告することはできません</b>。 -</p><p>要望ではないバグを見つけた場合は、是非その現象を報告してください。報告の際にはその再現手順、実際の挙動、そしてあるべき挙動を事細かく、あなたにとって、「くどい」ぐらいに細かく報告してください。意外とUIの挙動のバグ報告というのは難しいものです。それを実感するには -<a class="external" href="http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4102">bug 4102</a>は良い例かもしれません。 -</p><p>また、それがバグであるという根拠も論理的に説明してください。例えば、そのOSの他のアプリケーションとは挙動や表示が異なっているというのは良い根拠です(それが意図的な結果であることもありますが)。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html deleted file mode 100644 index 32b4fc3337..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Advanced -slug: orphaned/Bugzilla-jp/Guide/Search/Advanced -original_slug: Bugzilla-jp/Guide/Search/Advanced ---- -<h3 id=".E8.A9.B3.E7.B4.B0.E3.81.AA.E6.A4.9C.E7.B4.A2" name=".E8.A9.B3.E7.B4.B0.E3.81.AA.E6.A4.9C.E7.B4.A2">詳細な検索</h3> -<p>Bugzillaというシステムに慣れてくると、簡単な検索に不便を感じるかもしれません。そのために、Bugzillaにはより詳細に検索することができる、「高度な検索」が用意されています。簡易検索の画面の右上にある、「高度な検索」というリンクで移動するとその画面が表示されます。</p> -<p>「高度な検索」を開くと、非常に多くの項目が表示されるでしょう。この検索画面を使うにはBugzillaと、Bugzilla-jpの基本的なことが分かっていなければいけません。そのため、基本的な各項目の説明は省略し、いくつかの注意点のみを紹介することにします。</p> -<h4 id=".E3.82.AD.E3.83.BC.E3.83.AF.E3.83.BC.E3.83.89" name=".E3.82.AD.E3.83.BC.E3.83.AF.E3.83.BC.E3.83.89">キーワード</h4> -<p>キーワードを用いた検索は通常の文字列検索とは異なります。<a class="external" href="http://bugzilla.mozilla.gr.jp/describekeywords.cgi">キーワードは予めスタッフによって定義されたもの</a>のみで、この定義に無い文字列で検索することはできません。</p> -<p>例えば、"html"というキーワードの付いたバグを検索するために"ht"と入力してもエラーが表示されるだけで、検索することはできません。</p> -<h4 id=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.A7.E9.81.B8.E6.8A.9E.E3.81.A7.E3.81.8D.E3.82.8B.E9.A0.85.E7.9B.AE" name=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.A7.E9.81.B8.E6.8A.9E.E3.81.A7.E3.81.8D.E3.82.8B.E9.A0.85.E7.9B.AE">リストで選択できる項目</h4> -<p>プロダクト、コンポーネント、バージョン、ターゲットマイルストーン、ステータス、処理方法、深刻度、優先順位、ハードウェア、OS、そして「Bug の変更」にあるリストボックスは全て、複数項目を同時に選択することができます。</p> -<p>ひとつのリストボックス内で複数選択した場合、それらのうちのいずれかを含むバグが検索対象となります。</p> -<h4 id="Bug.E3.81.AE.E5.A4.89.E6.9B.B4.E3.81.AE.E6.9C.9F.E9.96.93.E5.85.A5.E5.8A.9B.E6.96.B9.E6.B3.95" name="Bug.E3.81.AE.E5.A4.89.E6.9B.B4.E3.81.AE.E6.9C.9F.E9.96.93.E5.85.A5.E5.8A.9B.E6.96.B9.E6.B3.95">Bugの変更の期間入力方法</h4> -<p>特定の期間になんらかの変更のあったバグを検索するのに便利な機能です。</p> -<p>YYYY-MM-DD形式以外にも、相対日数が入力可能となっていますが、 その説明が通常の画面にはなく、分かりにくいのでここに説明文を引用しておきます。</p> -<blockquote> - 開始・終了日時を、YYYY-MM-DD 形式 (オプションで HH:mm 形式の24時間制の時刻をつけられます) もしくは、1h, 2d, 3w, 4m, 5y といった相対時間で指定してください。 それぞれ、時間、日、週、月、年を示します。0d は直前の真夜中、 0h, 0w, 0m, 0y もそれぞれの開始時を示します。</blockquote> -<hr> -<p>もし、この説明を読んでも入力項目において何か分からないことがあるなら、要約の入力欄の左上にある、「ヘルプをつける」というリンクでフォームを再読込すると良いかもしれません。このモードになると、マウスが各項目の上に移動した際に、その項目の簡単な説明がポップアップ表示されます。</p> -<p>また、最後にあるブーリアンチャートを使った高度な検索は非常に特殊で、通常の利用者はまずこれを利用する必要はありません。ですので、これに関する説明はこのドキュメントでは行いません。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html deleted file mode 100644 index 8b11b66fd2..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Hints -slug: orphaned/Bugzilla-jp/Guide/Search/Hints -original_slug: Bugzilla-jp/Guide/Search/Hints ---- -<p> -</p> -<h3 id=".E6.A4.9C.E7.B4.A2.E3.81.AE.E3.82.B3.E3.83.84"> 検索のコツ </h3> -<p>検索をスムーズに行うには、Bugzilla-jp内で用いられる様々なルールを知っておく必要があります。最初は検索が期待通りにできないかもしれませんが、バグの件数がそれほど多い訳ではないので、以下に挙げる例を利用すればそれなりに検索可能なのではないかと思います。 -</p> -<h4 id=".E6.9C.AA.E8.A7.A3.E6.B1.BA.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E6.8E.A2.E3.81.97.E3.81.A6.E3.82.82.E8.A6.8B.E3.81.A4.E3.81.8B.E3.82.89.E3.81.AA.E3.81.84.E5.A0.B4.E5.90.88.E3.81.AF.E4.BF.AE.E6.AD.A3.E6.B8.88.E3.81.BF.E3.81.AE.E3.82.82.E3.81.AE.E3.82.92.E6.8E.A2.E3.81.99"> 未解決のバグを探しても見つからない場合は修正済みのものを探す </h4> -<p>最新の製品版を使っていて遭遇する場合なのに、未修正のバグを検索しても出てこない、そういう場合は既に開発版では修正が終わっている、つまりバグは閉じられている可能性があります。こういう場合には修正済みのバグを探すしかありません(簡易検索なら「CLOSED」)。 -</p><p>Bugzilla-jpでは製品版が最新版であるということは絶対にあり得ません。製品版がリリースされる時には開発版は既にその先を行っているからです。詳しくは開発サイクルに関するドキュメントも読んでおくと良いでしょう。 -</p> -<h4 id=".E8.A3.BD.E5.93.81.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E6.8E.A2.E3.81.99.E5.A0.B4.E5.90.88.E3.80.81.E3.80.8CCore.E3.80.8D.E3.82.82.E8.AA.BF.E3.81.B9.E3.82.8B"> 製品のバグを探す場合、「Core」も調べる </h4> -<p>Firefoxのバグを調べようとした時に、プロダクトを「Firefox」のみにすると、表示に関わる問題や、IMEに絡んだ問題等が全く出てこないことも少なくありません。 -</p><p>なぜなら、Bugzilla-jpでは複数の製品、例えばFirefoxでもThunderbird -でも発生するバグは「Core」プロダクトで管理しているためです。 -</p><p>簡易検索の場合はプロダクトを「All」にし、詳細検索の場合は「Core」も選択するようにしましょう。 -</p> -<h4 id=".E7.94.A8.E8.AA.9E.E3.81.AE.E8.AA.9E.E5.B0.BE.E3.82.92.E4.BC.B8.E3.81.B0.E3.81.95.E3.81.AA.E3.81.84"> 用語の語尾を伸ばさない </h4> -<p>技術用語では語尾が長音の場合、表記では長音符号「ー」を削除してしまう慣例があります。例えば、"Server"は、「サーバー」ではなく、「サーバ」として表記されます。 -</p><p>語尾の長音符号を削除して検索すると、語尾に長音符号がついていてもヒットするようになるで、検索の際には削除しましょう。 -</p> -<h4 id=".E5.85.A8.E8.A7.92.E3.81.AE.E8.8B.B1.E6.95.B0.E5.AD.97.E3.80.81.E5.8D.8A.E8.A7.92.E3.81.AE.E3.82.AB.E3.82.BF.E3.82.AB.E3.83.8A.E3.81.AF.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.AA.E3.81.84"> 全角の英数字、半角のカタカナは使用しない </h4> -<p>Bugzilla-jpでは基本的にこれらの文字は使用されていません。これらの文字で検索を行っても期待通りの結果は得られないでしょう。 -</p> -<h4 id=".E8.A9.B3.E7.B4.B0.E6.A4.9C.E7.B4.A2.E3.81.A7.E3.81.AF.E4.B8.80.E9.83.A8.E3.81.AE.E9.A0.85.E7.9B.AE.E3.81.AF.E4.BF.A1.E7.94.A8.E3.81.97.E3.81.AA.E3.81.84"> 詳細検索では一部の項目は信用しない </h4> -<p>Bugzilla-jpでは、バグの症状に対して一定の基準を持って設定を行っていますが、明確な場合を除き、どうしてもスタッフの主観が入ってくることがあります。 -</p><p>例えば、「深刻度」と「優先順位」は検索のキーワードとしては信用できるものではありません。また、設定が不適切だったり、忘れられたりすることの多い、「バージョン」と「ターゲットマイルストーン」も信頼できません。 -</p><p>これらの項目での絞り込みはやめておく方が良いでしょう。 -</p> -<h4 id=".E8.A9.B3.E7.B4.B0.E6.A4.9C.E7.B4.A2.E3.82.92.E4.BD.BF.E3.81.A3.E3.81.A6.E3.80.81.E3.82.AD.E3.83.BC.E3.83.AF.E3.83.BC.E3.83.89.E3.81.A8.E3.82.B9.E3.83.86.E3.83.BC.E3.82.BF.E3.82.B9.E3.81.AE.E3.81.BF.E3.81.A7.E6.A4.9C.E7.B4.A2.E3.81.99.E3.82.8B"> 詳細検索を使って、キーワードとステータスのみで検索する </h4> -<p>Bugzilla-jpでは特定のジャンルのバグや、表記揺れが激しいものについては<a class="external" href="http://bugzilla.mozilla.gr.jp/describekeywords.cgi">キーワード</a>を予め用意しています。 -</p><p>詳細検索でキーワードと、ステータス、もしくは処理方法の指定のみで検索を行うとそのキーワードのついたバグが全て列挙されます。Bugzilla-jpにあるバグの数はそれほど多くないので、そのリストから目的のバグを見つけることができるかもしれません。 -</p> -<h4 id=".E3.83.A1.E3.82.BF.E3.83.90.E3.82.B0.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B"> メタバグを利用する </h4> -<p>メタバグとは複数のバグに対するリンクを持った(具体的には複数のバグに依存している)バグです。これは特定のジャンルのバグを管理する際に作成され、キーワードに必ずmetaが指定されています。メタバグの一覧は、Bugzilla-jpのトップページにある「メタバグ一覧」を参照してください。 -</p><p>あなたの手助けとなるメタバグを発見した場合、そのバグで「依存ツリーを表示」というリンクで移動すると、そのメタバグに関連したバグが一覧で表示されるようになっています。メタバグのコメントにあるバグへのURIは情報が古いかもしれないので無視した方が良いでしょう。 -</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/index.html deleted file mode 100644 index 55fee3c919..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/search/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Search -slug: orphaned/Bugzilla-jp/Guide/Search -original_slug: Bugzilla-jp/Guide/Search ---- -<h3 id=".E3.83.90.E3.82.B0.E3.81.AE.E6.83.85.E5.A0.B1.E3.82.92.E6.8E.A2.E3.81.99" name=".E3.83.90.E3.82.B0.E3.81.AE.E6.83.85.E5.A0.B1.E3.82.92.E6.8E.A2.E3.81.99">バグの情報を探す</h3> -<p>Bugzilla-jpに既に登録されているバグを検索し、参照することができます。バグを検索するには、Bugzilla-jp内のページのフッタ部分にある、「検索」というリンクから検索用の画面に移動します。</p> -<p>検索には<a href="Search/Simple">簡単にバグを検索する「特定の Bug を検索」というモード</a>と、 <a href="Search/Advanced">ステータス等から高度に絞り込みを行う「高度な検索」</a>の二種類があります。最初は「特定の Bug を検索」で十分かもしれませんが、Bugzillaのシステムに慣れてくると「高度な検索」の方が使いやすいかもしれません。</p> -<p>バグを検索することによってどのような情報が得られるのか、また、実際に検索結果を参照する際にバグの状態について意味が分からない場合は、<a href="About/BugDetails">バグの詳細情報</a>や<a href="About/ProductsAndComponents">プロダクトとコンポーネント</a>や<a href="LifeCycle">バグのライフサイクル</a>を参照してください。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html deleted file mode 100644 index 029b3da4af..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Simple -slug: orphaned/Bugzilla-jp/Guide/Search/Simple -original_slug: Bugzilla-jp/Guide/Search/Simple ---- -<h2 id="簡単な検索">簡単な検索</h2> -<p>Bugzilla-jp でバグを検索しようとすると、まずは「特定の Bug を検索」という画面が表示されます。これは以下のスクリーンショットから分かるように、とてもシンプルなものです。</p> -<p><img alt="簡易検索画面のスクリーンショット" src="/@api/deki/files/1635/=Bugzilla-jp-Guide-SimpleSearchForm.png"></p> -<h3 id="ステータス">ステータス</h3> -<p>ステータスのドロップダウンリストには Open、Close、All の三種類が用意されています。</p> -<p>Open の場合、 <a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#UNCONFIRMED">UNCONFIRMED</a>、<a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#NEW">NEW</a>、<a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#ASSIGNED">ASSIGNED</a>、 <a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#REOPENED">REOPENED</a> のバグが検索対象となります。これらのバグはまだ解決されていなかったり、結論が出ていない、"生きている"バグです。</p> -<p>Closedの場合、Open以外の既に閉じられたバグが検索対象となります。具体的には <a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#RESOLVED">RESOLVED</a> と、<a href="/ja/docs/Bugzilla-jp/Guide/LifeCycle#VERIFIED">VERIFIED</a>、そしてごく初期にのみ使われていた CLOSED のバグです。</p> -<p>All の場合、全てのバグが検索対象となります。</p> -<h3 id="プロダクト">プロダクト</h3> -<p>プロダクトはどの製品のバグを対象とするのかを選択します。基本的には初期値の All で全てのプロダクトを対象としたままで検索した方が良いでしょう。例えば Firefox についてのバグを調べたい場合、そのバグの種類によって、<a href="/ja/docs/Bugzilla-jp/Guide/About/ProductsAndComponents#Firefox">Firefox</a> 以外に <a href="/ja/docs/Bugzilla-jp/Guide/About/ProductsAndComponents#Core">Core</a> となっている可能性があります。</p> -<p>何故このような一見すると不便な仕様になっているのかというと、Mozilla 製品は全ての製品で共通しているコードが非常に多く、これらのバグを製品ごとに管理していたのでは同じバグを複数のプロダクトで管理しなくてはいけなくなるためです。</p> -<p>しかし、All の場合、検索結果に TestProduct が含まれてしまいます。これは練習投稿や、Bugzilla-jp 自体のテストに利用されているものですので無視してください。この中に有益な情報は存在しません。</p> -<p>複数のプロダクトに対して同時に検索を行う必要がある場合には、<a href="/ja/docs/Bugzilla-jp/Guide/Search/Advanced">詳細な検索</a>を利用するしかありませんが、残念ながら手軽に使えるというものではありません。</p> -<p>All では効率悪いし、詳細な検索は使い方が分からない、という場合には、 目的のプロダクトと <a href="/ja/docs/Bugzilla-jp/Guide/About/ProductsAndComponents#Core">Core</a> で二回に分けて検索を行うしかありません。</p> -<h3 id="検索語">検索語</h3> -<p>検索したい単語を半角スペースで区切り、入力します。 検索対象は<a href="/ja/docs/Bugzilla-jp/Guide/About/BugDetails#.E8.A6.81.E7.B4.84">バグの要約</a>と、バグに付けられているコメント全文です。複数の単語を入力している場合は、いずれかの単語を含むバグが出てきます。</p> -<p>半角英字の大文字小文字は区別されませんが、ひらがな、カタカナといった日本語固有の曖昧さは全て別の文字として検索されます。</p> -<hr> -<p>これだけの情報ではきっと、どういった言葉を検索して良いのか分からないかもしれません。あわせて、<a href="/ja/docs/Bugzilla-jp/Guide/Search/Hints">検索のコツ</a>についても目を通しておくと良いかもしれません。</p> diff --git a/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html b/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html deleted file mode 100644 index 6cedf8d399..0000000000 --- a/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Tracking -slug: orphaned/Bugzilla-jp/Guide/Tracking -original_slug: Bugzilla-jp/Guide/Tracking ---- -<h3 id=".E3.83.90.E3.82.B0.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B">バグを追跡する</h3> -<p>Bugzillaではバグ毎に、メールによって変更通知を逐一受け取ることができます。</p> -<h4 id=".E3.83.90.E3.82.B0.E3.81.AECC.E3.83.AA.E3.82.B9.E3.83.88.E3.81.AB.E8.87.AA.E5.88.86.E3.81.AE.E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.81.AECC.E3.83.AA.E3.82.B9.E3.83.88.E3.81.AB.E8.87.AA.E5.88.86.E3.81.AE.E3.82.A2.E3.82.AB.E3.82.A6.E3.83.B3.E3.83.88.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">バグのCCリストに自分のアカウントを追加する</h4> -<p>まず、Bugzilla-jpにログインして、追跡したいバグを表示します。<a>バグのコメント追加欄のすぐ下に「XXXX<YYY@ZZZ> を CC に追加する」というチェックボックス</a>があるので、これにチェックを入っていることを確認し、追加コメントは<b>何も書かずに</b>そのまま「Commit」ボタンを押します。そうすると、あなたのアカウントがそのバグのCCに加えられ、以降、そのバグに何か変更があった場合にあなたのメールアドレスにメールが配信されます。</p> -<h4 id=".E3.83.90.E3.82.B0.E3.81.AE.E8.BF.BD.E8.B7.A1.E3.82.92.E4.B8.AD.E6.AD.A2.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.B0.E3.81.AE.E8.BF.BD.E8.B7.A1.E3.82.92.E4.B8.AD.E6.AD.A2.E3.81.99.E3.82.8B">バグの追跡を中止する</h4> -<p>バグの追跡を中止したい場合、ログイン後、そのバグを表示します。そして、<a>「CC:」のリストの中からあなたのアカウントを選択し、そのリストのすぐ下にある「選択された CC を削除」というチェックボックスにチェックを入れ</a>、追加コメントは<b>何も書かずに</b>そのまま「Commit」ボタンを押してください。</p> -<h4 id=".E5.8F.97.E3.81.91.E5.8F.96.E3.82.8A.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.8C.E9.85.8D.E4.BF.A1.E3.81.95.E3.82.8C.E3.81.A6.E3.81.8F.E3.82.8B" name=".E5.8F.97.E3.81.91.E5.8F.96.E3.82.8A.E3.81.9F.E3.81.8F.E3.81.AA.E3.81.84.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.8C.E9.85.8D.E4.BF.A1.E3.81.95.E3.82.8C.E3.81.A6.E3.81.8F.E3.82.8B">受け取りたくないメールが配信されてくる</h4> -<p>バグを追跡していると、デフォルト設定のままでは、あなたにとっては些細な変更の度にメールが配信されてくるかもしれません。その場合、Bugzilla-jpのフッタにある「環境」の「メール設定」からメールの配信条件を編集することができます。詳細は<a href="About/ChangeAccountPrefs#.E3.83.A1.E3.83.BC.E3.83.AB.E3.81.AE.E9.80.81.E4.BF.A1.E8.A8.AD.E5.AE.9A.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"> メールの送信設定を変更する</a>を参考にしてください。</p> -<h4 id=".E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.81.AE.E5.85.A8.E3.81.A6.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B" name=".E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.81.AE.E5.85.A8.E3.81.A6.E3.81.AE.E3.83.90.E3.82.B0.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B">コンポーネントの全てのバグを追跡する</h4> -<p>Bugzilla-jpではQAコンタクトにメタアカウントと呼ばれる特殊なアカウントを割り当てています。メタアカウントは最後が".bugs"で終わる、本来あり得ないメールアドレスになっています。つまり、メタアカウントは特定の個人のためのアカウントではありません。これをあなたのアカウントで<a href="About/ChangeAccountPrefs#.E3.83.A6.E3.83.BC.E3.82.B6.E7.9B.A3.E8.A6.96">監視</a>することで、特定のコンポーネントのバグを全て追跡することが可能です。</p> diff --git a/files/ja/orphaned/bugzilla-jp/index.html b/files/ja/orphaned/bugzilla-jp/index.html deleted file mode 100644 index d9af96736d..0000000000 --- a/files/ja/orphaned/bugzilla-jp/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Bugzilla-jp -slug: orphaned/Bugzilla-jp -tags: - - Bugzilla-jp - - Developing Mozilla - - 開発文書 -original_slug: Bugzilla-jp ---- -<p> -</p> -<h3 id="Bugzilla-jp"> Bugzilla-jp </h3> -<p>Bugzilla-jp関連コンテンツ -</p> -<ol><li> <a href="ja/Bugzilla-jp/Guide">はじめてのバグジラ</a> -</li><li> <a href="ja/Bugzilla-ja">Bugzilla-ja</a> -</li></ol> diff --git a/files/ja/orphaned/components/index.html b/files/ja/orphaned/components/index.html deleted file mode 100644 index d423bc08ba..0000000000 --- a/files/ja/orphaned/components/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Components -slug: orphaned/Components -tags: - - Disambiguation -original_slug: Components ---- -<ul> - <li><a href="ja/XPCOM_components_list">XPCOM components list</a></li> - <li><a href="ja/Components_object">Components object</a> (XPConnect)</li> -</ul> - -<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/Components", "fr": "fr/Components", "ko": "ko/Components" } ) }}</p> diff --git a/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html b/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html deleted file mode 100644 index d7421ddacf..0000000000 --- a/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: E4X を用いた XML 処理 -slug: orphaned/E4X/Processing_XML_with_E4X -tags: - - E4X - - JavaScript - - NeedsTechnicalReview - - XML -original_slug: E4X/Processing_XML_with_E4X ---- -<div><div class="warning warningHeader"> - <p><strong>警告:</strong> E4X は非推奨です。E4X は content に対して Firefox 16 からデフォルトで無効に、chrome に対して Firefox 17 からデフォルトで無効に、そして Firefox 18 で削除される予定です。代替として、DOMParser/DOMSerializer または 非ネイティブの JXON アルゴリズムを使用してください。</p> -</div></div> - -<div><div class="warning warningHeader"> - <p><strong>警告:</strong> <strong>この記事の内容は古くなっている可能性があります。</strong> 最終更新日は 2010 年 11 月 12 日です。英語版の最新の内容も合わせてご覧下さい。</p> -</div></div> - -<p>JavaScript 1.6 で初めて導入された <strong><a href="/ja/E4X" title="ja/E4X">E4X</a></strong> により、JavaScript 言語にネイティブ XML オブジェクトが導入され、さらに XML 文書リテラルを JavaScript コードに埋め込むための構文も追加されています。</p> - -<p>E4X の完全な定義は <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">Ecma-357 仕様</a> でなされています。この章では実用的な概要を示します。完全なリファレンスではありません。</p> - -<p><span id="Compatibility_issues"></span></p> - -<h2 id="互換性の問題">互換性の問題</h2> - -<p><code><script></code> 要素のサポートがブラウザの間で広く普及する前は、JavaScript をページに埋め込むときに HTML コメントタグで囲むことで、<code><script></code> を知らないブラウザが JavaScript コードをそのまま表示してしまうのを防ぐということが一般的でした。この慣習はもう不要ですが、古いコードでは残っていることがあります。後方互換性のため、E4X はコメントや CDATA セクションを無視するのがデフォルトの動作です。<code>e4x=1</code> 引数を <code><script></code> タグに加えることでこの制限を無効にできます。</p> - -<pre><script type="text/javascript;e4x=1"> -... -</script> -</pre> - -<p><span id="Creating_an_XML_object"></span></p> - -<h2 id="XML_オブジェクトの作成">XML オブジェクトの作成</h2> - -<p>E4X には XML オブジェクトを作成する方法が 2 つあります。1 つ目は <code>XML</code> コンストラクタに文字列を渡す方法です。</p> - -<pre class="eval"> var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>'); -</pre> - -<p>2 つ目はスクリプトに XML を XML リテラルとして直接埋め込むことです。</p> - -<pre class="eval"> var languages = <languages type="dynamic"> - <lang>JavaScript</lang> - <lang>Python</lang> - </languages>; -</pre> - -<p>どちらの場合も結果として得られるオブジェクトは E4X XML オブジェクトです。これには内部データにアクセスしたりそれを変更したりするための便利な構文が備わっています。</p> - -<p>XML オブジェクトは通常の JavaScript オブジェクトのように見え、そのような挙動をとりますが、その 2 つは同じものではありません。E4X では E4X XML オブジェクトにおいてのみ動作する新たな構文が導入されています。その構文は JavaScript プログラマにとって取っつきやすいように設計されていますが、E4X では XML からネイティブ JavaScript オブジェクトへの直接のマッピングが用意されていません。そう見えるだけです。</p> - -<p><span id="Working_with_attributes"></span></p> - -<h2 id="属性の操作">属性の操作</h2> - -<p>上記の例を実行すると変数 languages は XML 文書の <code><languages></code> に対応する XML オブジェクトへの参照となります。このノードには type という 1 つの属性があり、それにアクセスしたり、それを変更したりする方法はいくつもあります。</p> - -<pre class="eval"> alert(languages.@type); // "dynamic" というアラート - languages.@type = "agile"; - alert(languages.@type); // "agile" というアラート -</pre> - -<pre class="eval"> alert(languages.toString()); - /* アラート： - <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages> - */ -</pre> - -<p><span id="Working_with_XML_objects"></span></p> - -<h2 id="XML_オブジェクトの操作">XML オブジェクトの操作</h2> - -<p>XML オブジェクトにはその中身を検査したり変更するためのメソッドがたくさん用意されています。それらは JavaScript の通常のドットや <code>[]</code> という記法をサポートしていますが、オブジェクトのプロパティにアクセスするのではなく、E4X ではその要素の子にアクセスするための演算子として定義されています。</p> - -<pre>var person = <person> - <name>Bob Smith</name> - <likes> - <os>Linux</os> - <browser>Firefox</browser> - <language>JavaScript</language> - <language>Python</language> - </likes> -</person>; - -alert(person.name); // Bob Smith -alert(person['name']); // Bob Smith -alert(person.likes.browser); // Firefox -alert(person['likes'].browser); // Firefox -</pre> - -<p>複数の要素がマッチするようなものにアクセスすると <code>XMLList</code> が返されます。</p> - -<pre>alert(person.likes.language.length()); // 2 -</pre> - -<p>DOM と同様に <code>*</code> を使うことですべての子ノードにアクセスすることができます。</p> - -<pre>alert(person.likes.*.length()); // 4 -</pre> - -<p><code>.</code> 演算子は与えられたノードの直接の子にアクセスしますが、<code>..</code> 演算子はネストの深さにかかわらずすべての子にアクセスします。</p> - -<pre>alert(person..*.length()); // 11 -</pre> - -<p>この場合、<code>length()</code> メソッドは 11 を返します。結果として得られる <code>XMLList</code> には要素とテキストノードがともに含まれるためです。</p> - -<p>XML 要素を表すオブジェクトには便利なメソッドがたくさん用意されています。そのうちのいくつかを以下に示します。 <span class="comment">TODO: Add all of the methods to the JavaScript reference, link from here</span></p> - -<pre>alert(person.name.text()) // Bob Smith - -var xml = person.toXMLString(); // XML からなる文字列 - -var personCopy = person.copy(); // XML オブジェクトのディープコピー - -var child = person.child(1); // 2 番目の子ノード：この場合は <likes> 要素 -</pre> - -<p><span id="Working_with_XMLLists"></span></p> - -<h2 id="XMLLists_の操作">XMLLists の操作</h2> - -<p>XML オブジェクトに加えて、E4X では <code>XMLList</code> オブジェクトが導入されています。<code>XMLList</code> は XML オブジェクトの順序付きの集まりを表します。例えば、要素のリストです。上記の例に続き、次のようにすると <code><lang></code> 要素の <code>XMLList</code> にアクセスすることができます。</p> - -<pre class="eval"> var langs = languages.lang; -</pre> - -<p><code>XMLList</code> には格納している要素数を知るための <code>length()</code> メソッドがあります。</p> - -<pre class="eval"> alert(languages.lang.length()); -</pre> - -<p>JavaScript の配列とは違い、length はプロパティではなくメソッドであり、必ず <code>length()</code> として呼び出さなければならないことに注意してください。</p> - -<p>次のようにしてマッチする要素について繰り返すことができます。</p> - -<pre class="eval"> for (var i = 0; i < languages.lang.length(); i++) { - alert(languages.lang[i].toString()); - } -</pre> - -<p>ここでは配列のアイテムに順にアクセスするときと全く同じ構文を使っています。このように通常の配列に似ているにもかかわらず、<code>XMLList</code> は <code>forEach</code> のような <code>Array</code> のメソッドをサポートしていません。また、<code>Array.forEach()</code> のような Array のジェネリックスも <code>XMLList</code> オブジェクトとは互換性がありません。</p> - -<p>JavaScript 1.6 で JavaScript の E4X サポートの一部として導入された <a href="/ja/JavaScript/Reference/Statements/for_each...in" title="ja/JavaScript/Reference/Statements/for_each...in">for each...in 文</a> を使うこともできます。</p> - -<pre class="eval"> for each (var lang in languages.lang) { - alert(lang); - } -</pre> - -<p><code>for each...in</code> は通常の JavaScript のオブジェクトについて使うと、そのオブジェクトに含まれる値（キーではなく）に対して繰り返すこともできます。<a href="/ja/JavaScript/Reference/Statements/for...in" title="ja/JavaScript/Reference/Statements/for...in">for...in</a> と同様、配列について使用するのは <a href="/ja/JavaScript/Reference/Statements/for...in#.E8.AA.AC.E6.98.8E" title="ja/JavaScript/Reference/Statements/for...in#.E8.AA.AC.E6.98.8E">全く推奨できません</a>。</p> - -<p>整形式の XML を文書を作らずとも、次のような XML リテラル構文を用いて <code>XMLList</code> を作ることができます。</p> - -<pre class="eval"> var xmllist = <> - <lang>JavaScript</lang> - <lang>Python</lang> - </>; -</pre> - -<p><code>+=</code> 演算子を使うと文書内の <code>XMLList</code> に要素を新たに追加することができます。</p> - -<pre class="eval"> languages.lang += <lang>Ruby</lang>; -</pre> - -<p>通常の DOM メソッドで返されるノードリストとは異なり、<code>XMLList</code> は静的であり、DOM 内の変更が自動的には反映されません。既存の <code>XML</code> オブジェクトのサブセットとして <code>XMLList</code> を作成し、その後オリジナルの <code>XML</code> を変更した場合、<code>XMLList</code> にはその変更が反映されません。最新の状態にするには作り直す必要があります。</p> - -<pre class="eval"> var languages = <languages> - <lang>JavaScript</lang> - <lang>Python</lang> - </languages>; - - var lang = languages.lang; - alert(lang.length()); // 2 というアラート - - languages.lang += <lang>Ruby</lang>; - alert(lang.length()); // やはり 2 というアラート - - lang = languages.lang; // XMLList を作り直す - alert(lang.length()); // 3 というアラート -</pre> - -<p><span id="Searching_and_filtering"></span></p> - -<h2 id="検索とフィルタ">検索とフィルタ</h2> - -<p>E4X には特定の基準にマッチする文書内のノードを選択するための特別な演算子が用意されています。このようなフィルタ演算は丸括弧で囲んだ式で指定します。</p> - -<pre>var html = <html> - <p id="p1">First paragraph</p> - <p id="p2">Second paragraph</p> -</html>; - -alert(html.p.(@id == "p1")); // "First paragraph" というアラート -</pre> - -<p>式の手前のパスにマッチするノード（この場合は p 要素）は式が評価される前にスコープチェーンに追加されます。<a href="/ja/JavaScript/Reference/Statements/with" title="ja/JavaScript/Reference/Statements/with">with 文</a> を使ってノードが指定されているかのような動作です。</p> - -<p>したがって、フィルタは現在の要素内の単一ノードの値に対しても実行することができます。</p> - -<pre>var people = <people> - <person> - <name>Bob</name> - <age>32</age> - </person> - <person> - <name>Joe</name> - <age>46</age> - </person> -</people>; - -alert(people.person.(name == "Joe").age); // 46 というアラート -</pre> - -<p>フィルタ式に JavaScript 関数を使うこともできます。</p> - -<pre>function over40(i) { - return i > 40; -} - -alert(people.person.(over40(parseInt(age))).name); // Joe というアラート -</pre> - -<p><span id="Handling_namespaces"></span></p> - -<h2 id="名前空間の処理">名前空間の処理</h2> - -<p>E4X は名前空間を考慮しています。ノードや属性を表すあらゆる XML オブジェクトには <code>QName</code> オブジェクトを返す <code>name()</code> メソッドがあり、名前空間要素を簡単に検査することができます。</p> - -<pre>var xhtml = <html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title>Embedded SVG demo</title> - </head> - <body> - <h1>Embedded SVG demo</h1> - <svg xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 100 100"> - <circle cx="50" - cy="50" - r="20" - stroke="orange" - stroke-width="2px" - fill="yellow" /> - </svg> - </body> -</html>; - -alert(xhtml.name().localName); // "html" というアラート -alert(xhtml.name().uri); // "http://www.w3.org/1999/xhtml" というアラート -</pre> - -<p>名前空間内にある要素にアクセスするには、まずその名前空間についての URI を格納した <code>Namespace</code> オブジェクトを作ります。</p> - -<pre>var svgns = new Namespace('http://www.w3.org/2000/svg'); -</pre> - -<p>すると、通常の要素指定子の代わりに <code>namespace::localName</code> の形式で E4X クエリに使用することができます。</p> - -<pre>var svg = xhtml..svgns::svg; -alert(svg); // 文書の <svg> 部分が表示される -</pre> - -<p></p> diff --git a/files/ja/orphaned/glossary/gaia/index.html b/files/ja/orphaned/glossary/gaia/index.html deleted file mode 100644 index 4a2ac2514f..0000000000 --- a/files/ja/orphaned/glossary/gaia/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Gaia -slug: orphaned/Glossary/Gaia -tags: - - Boot2Gecko - - Firefox OS - - Gaia - - Glossary - - Infrastructure - - Intro -translation_of: Glossary/Gaia -original_slug: Glossary/Gaia ---- -<p>Firefox OS プラットフォームのユーザーインターフェイスとデフォルトのアプリケーションスイート。</p> - -<p>Firefox OS が起動すると、画面に表示されるものは Gaia レイヤーの産物です（ロック画面、ホーム画面、標準アプリなど）。 Gaia は {{glossary("HTML")}}、{{glossary("CSS")}}、{{glossary("JavaScript")}} で完全に実装されており、基盤となるオペレーティングシステムへの唯一のインターフェイスは、{{glossary("Gecko")}} レイヤーが実装するオープンな Web {{glossary("API")}} によるものです。 Gaia と一緒にサードパーティのアプリケーションをインストールすることができます。</p> - -<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> - -<h3 id="Technical_reference" name="Technical_reference">技術文書</h3> - -<ul> - <li><a href="/ja/Firefox_OS/Platform/Gaia">Gaia プラットフォームガイド</a></li> - <li><a href="/ja/Firefox_OS/Developing_Gaia">Gaia 開発/ハッキングガイド</a></li> -</ul> diff --git a/files/ja/orphaned/glossary/modern_web_apps/index.html b/files/ja/orphaned/glossary/modern_web_apps/index.html deleted file mode 100644 index d9303643bd..0000000000 --- a/files/ja/orphaned/glossary/modern_web_apps/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Modern web apps (最新のウェブアプリ) -slug: orphaned/Glossary/Modern_web_apps -tags: - - Composing - - Glossary - - Modern web apps -translation_of: Glossary/Modern_web_apps -original_slug: Glossary/Modern_web_apps ---- -<p>{{glossary("Progressive web apps","プログレッシブウェブアプリ")}}を参照</p> diff --git a/files/ja/orphaned/html_element_cross_reference/index.html b/files/ja/orphaned/html_element_cross_reference/index.html deleted file mode 100644 index ee2808f41f..0000000000 --- a/files/ja/orphaned/html_element_cross_reference/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: HTML 要素クロスリファレンス -slug: orphaned/HTML_Element_Cross_Reference -tags: - - HTML -original_slug: HTML_Element_Cross_Reference ---- -<p>{{ outdated() }} HTML 4.0 ではいくつかの新しい要素と属性が追加され、一部が削除、その他の要素と一部の属性は非推奨とされました。この技術ノートは、Netscape Navigator 4.x, Netscape 6, Internet Explorer 3.x-5.x, HTML 3.2 および HTML 4.0 を通しての HTML 4.0 における要素のサポートの要約です。</p> -<h3 id=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9" name=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9">リファレンス</h3> -<p>HTML 4.01 の最終的なリファレンスは次の通り:</p> -<ul> <li><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"></code></li> <li><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br> "<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"></code></li> <li><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"<br> "<span class="nowiki">http://www.w3.org/TR/html4/frameset.dtd</span>"></code></li> -</ul> -<h3 id="HTML_4.0_.E3.81.AE.E6.96.B0.E3.81.97.E3.81.84.E5.B1.9E.E6.80.A7" name="HTML_4.0_.E3.81.AE.E6.96.B0.E3.81.97.E3.81.84.E5.B1.9E.E6.80.A7">HTML 4.0 の新しい属性</h3> -<ul> <li><code>CLASS</code></li> <li><code>DIR</code></li> <li><code>ID</code></li> <li><code>LANG</code></li> <li><code>STYLE</code></li> <li><code>TITLE</code></li> <li><code>onclick</code></li> <li><code>ondblclick</code></li> <li><code>onkeydown</code></li> <li><code>onkeypress</code></li> <li><code>onkeyup</code></li> <li><code>onmousedown</code></li> <li><code>onmousemove</code></li> <li><code>onmouseout</code></li> <li><code>onmouseover</code></li> <li><code>onmouseup</code></li> -</ul> -<h3 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.99.E3.82.8B.E8.A6.81.E7.B4.A0.E3.81.AE.E3.82.AF.E3.83.AD.E3.82.B9.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.99.E3.82.8B.E8.A6.81.E7.B4.A0.E3.81.AE.E3.82.AF.E3.83.AD.E3.82.B9.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9">ブラウザのサポートする要素のクロスリファレンス</h3> -<h4 id=".E3.82.AD.E3.83.BC" name=".E3.82.AD.E3.83.BC">キー</h4> -<dl> <dt>NN4</dt> <dd>Netscape Navigator 4.x</dd> <dt>NS6</dt> <dd>Netscape 6</dd> <dt>IE3</dt> <dd>Internet Explorer 3.x</dd> <dt>IE4</dt> <dd>Internet Explorer 4.x</dd> <dt>IE5</dt> <dd>Internet Explorer 5.x</dd> <dt>HTML3</dt> <dd>HTML 3.2</dd> <dt>HTML4</dt> <dd>HTML 4.0</dd> -</dl> -<h4 id=".E3.82.AF.E3.83.AD.E3.82.B9.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9.E8.A1.A8" name=".E3.82.AF.E3.83.AD.E3.82.B9.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9.E8.A1.A8">クロスリファレンス表</h4> -<table class="standard-table"> <tbody> <tr> <th>要素</th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th>備考</th> <th>非推奨の属性</th> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/a" title="ja/HTML/Element/a">A</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/abbr" title="ja/HTML/Element/abbr">ABBR</a></td> <td> </td> <td>NS6</td> <td> </td> <td> </td> <td> </td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/acronym" title="ja/HTML/Element/acronym">ACRONYM</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/address" title="ja/HTML/Element/address">ADDRESS</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/applet" title="ja/HTML/Element/applet">APPLET</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td>ALIGN, ARCHIVE, CODE, CODEBASE, HEIGHT, NAME, OBJECT, WIDTH</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/area" title="ja/HTML/Element/area">AREA</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/b" title="ja/HTML/Element/b">B</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/base" title="ja/HTML/Element/base">BASE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/basefont" title="ja/HTML/Element/basefont">BASEFONT</a></td> <td>NN4</td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨<br> NS6 は未対応。{{ Bug(3875) }}参照</td> <td>COLOR, FACE, SIZE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/bdo" title="ja/HTML/Element/bdo">BDO</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td>IE5</td> <td> </td> <td>HTML4</td> <td>NS6 は未対応</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/bgsound" title="ja/HTML/Element/bgsound">BGSOUND</a></td> <td> </td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/big" title="ja/HTML/Element/big">BIG</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/blink" title="ja/HTML/Element/blink">BLINK</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/blockquote" title="ja/HTML/Element/blockquote">BLOCKQUOTE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/body" title="ja/HTML/Element/body">BODY</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALINK, BACKGROUND, BGCOLOR, LINK, TEXT, VLINK</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/br" title="ja/HTML/Element/br">BR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>CLEAR</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/button" title="ja/HTML/Element/button">BUTTON</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/caption" title="ja/HTML/Element/caption">CAPTION</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/center" title="ja/HTML/Element/center">CENTER</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/cite" title="ja/HTML/Element/cite">CITE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/code" title="ja/HTML/Element/code">CODE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/col" title="ja/HTML/Element/col">COL</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/colgroup" title="ja/HTML/Element/colgroup">COLGROUP</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/comment" title="ja/HTML/Element/comment">COMMENT</a></td> <td> </td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/dd" title="ja/HTML/Element/dd">DD</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/del" title="ja/HTML/Element/del">DEL</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/dfn" title="ja/HTML/Element/dfn">DFN</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/dir" title="ja/HTML/Element/dir">DIR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td>COMPACT</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/div" title="ja/HTML/Element/div">DIV</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/dl" title="ja/HTML/Element/dl">DL</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>COMPACT</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/dt" title="ja/HTML/Element/dt">DT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/em" title="ja/HTML/Element/em">EM</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/embed" title="ja/HTML/Element/embed">EMBED</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/fieldset" title="ja/HTML/Element/fieldset">FIELDSET</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/font" title="ja/HTML/Element/font">FONT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td>COLOR, FACE, SIZE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/form" title="ja/HTML/Element/form">FORM</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/frame" title="ja/HTML/Element/frame">FRAME</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/frameset" title="ja/HTML/Element/frameset">FRAMESET</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h1" title="ja/HTML/Element/h1">H1</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h2" title="ja/HTML/Element/h2">H2</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h3" title="ja/HTML/Element/h3">H3</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h4" title="ja/HTML/Element/h4">H4</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h5" title="ja/HTML/Element/h5">H5</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/h6" title="ja/HTML/Element/h6">H6</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/head" title="ja/HTML/Element/head">HEAD</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/hr" title="ja/HTML/Element/hr">HR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN, NOSHADE, SIZE, WIDTH</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/html" title="ja/HTML/Element/html">HTML</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>VERSION</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/i" title="ja/HTML/Element/i">I</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/iframe" title="ja/HTML/Element/iframe">IFRAME</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/ilayer" title="ja/HTML/Element/ilayer">ILAYER</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>代わりに相対位置指定の DIV に置き換え</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/img" title="ja/HTML/Element/img">IMG</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN, BORDER, HSPACE, VSPACE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/input" title="ja/HTML/Element/input">INPUT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/ins" title="ja/HTML/Element/ins">INS</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/isindex" title="ja/HTML/Element/isindex">ISINDEX</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td>PROMPT</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/kbd" title="ja/HTML/Element/kbd">KBD</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/keygen" title="ja/HTML/Element/keygen">KEYGEN</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/label" title="ja/HTML/Element/label">LABEL</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/layer" title="ja/HTML/Element/layer">LAYER</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>代わりに絶対位置指定の DIV に置き換え</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/legend" title="ja/HTML/Element/legend">LEGEND</a></td> <td> </td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/li" title="ja/HTML/Element/li">LI</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>TYPE, VALUE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/link" title="ja/HTML/Element/link">LINK</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/listing" title="ja/HTML/Element/listing">LISTING</a></td> <td>NN4</td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td> </td> <td>HTML 4.0 から削除</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/map" title="ja/HTML/Element/map">MAP</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/marquee" title="ja/HTML/Element/marquee">MARQUEE</a></td> <td> </td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/menu" title="ja/HTML/Element/menu">MENU</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td>COMPACT</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/meta" title="ja/HTML/Element/meta">META</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/multicol" title="ja/HTML/Element/multicol">MULTICOL</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/nobr" title="ja/HTML/Element/nobr">NOBR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td> </td> <td>HTML 4.0 から削除</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/noembed" title="ja/HTML/Element/noembed">NOEMBED</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/noframes" title="ja/HTML/Element/noframes">NOFRAMES</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/nolayer" title="ja/HTML/Element/nolayer">NOLAYER</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>完全に削除</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/noscript" title="ja/HTML/Element/noscript">NOSCRIPT</a></td> <td>NN4</td> <td>NS6</td> <td> </td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/object" title="ja/HTML/Element/object">OBJECT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td>ALIGN, BORDER, HSPACE, VSPACE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/ol" title="ja/HTML/Element/ol">OL</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>COMPACT, START, TYPE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/optgroup" title="ja/HTML/Element/optgroup">OPTGROUP</a></td> <td> </td> <td>NS6</td> <td> </td> <td> </td> <td> </td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/option" title="ja/HTML/Element/option">OPTION</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/p" title="ja/HTML/Element/p">P</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/param" title="ja/HTML/Element/param">PARAM</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/plaintext" title="ja/HTML/Element/plaintext">PLAINTEXT</a></td> <td>NN4</td> <td> </td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td> </td> <td>HTML 4.0 から削除</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/pre" title="ja/HTML/Element/pre">PRE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/q" title="ja/HTML/Element/q">Q</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/rt" title="ja/HTML/Element/rt">RT</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/ruby" title="ja/HTML/Element/ruby">RUBY</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/s" title="ja/HTML/Element/s">S</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/samp" title="ja/HTML/Element/samp">SAMP</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/Ja/HTML/Element/Script" title="Ja/HTML/Element/Script">SCRIPT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/select" title="ja/HTML/Element/select">SELECT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/server" title="ja/HTML/Element/server">SERVER</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/small" title="ja/HTML/Element/small">SMALL</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/spacer" title="ja/HTML/Element/spacer">SPACER</a></td> <td>NN4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/span" title="ja/HTML/Element/span">SPAN</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/strike" title="ja/HTML/Element/strike">STRIKE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/strong" title="ja/HTML/Element/strong">STRONG</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/style" title="ja/HTML/Element/style">STYLE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/sub" title="ja/HTML/Element/sub">SUB</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/sup" title="ja/HTML/Element/sup">SUP</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/table" title="ja/HTML/Element/table">TABLE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>ALIGN, BGCOLOR</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/tbody" title="ja/HTML/Element/tbody">TBODY</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/td" title="ja/HTML/Element/td">TD</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>BGCOLOR, HEIGHT, NOWRAP, WIDTH</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/textarea" title="ja/HTML/Element/textarea">TEXTAREA</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/tfoot" title="ja/HTML/Element/tfoot">TFOOT</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/th" title="ja/HTML/Element/th">TH</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>BGCOLOR, HEIGHT, NOWRAP, WIDTH</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/thead" title="ja/HTML/Element/thead">THEAD</a></td> <td> </td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/title" title="ja/HTML/Element/title">TITLE</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/tr" title="ja/HTML/Element/tr">TR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>BGCOLOR</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/tt" title="ja/HTML/Element/tt">TT</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/u" title="ja/HTML/Element/u">U</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td>HTML 4.0 で非推奨</td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/ul" title="ja/HTML/Element/ul">UL</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td>COMPACT, TYPE</td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/var" title="ja/HTML/Element/var">VAR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td>HTML4</td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/wbr" title="ja/HTML/Element/wbr">WBR</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/xml" title="ja/HTML/Element/xml">XML</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td>IE5</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="elementName"><a href="/ja/HTML/Element/xmp" title="ja/HTML/Element/xmp">XMP</a></td> <td>NN4</td> <td>NS6</td> <td>IE3</td> <td>IE4</td> <td>IE5</td> <td>HTML3</td> <td> </td> <td>HTML 4.0 から削除</td> <td> </td> </tr> </tbody> -</table> -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">原文書情報</h3> -<ul> <li>著者: Bob Clary, Netscape Communications</li> <li>最終更新日: Published 01 Jul 2001</li> <li>著作権情報: Copyright © 2001-2003 Netscape.</li> <li>補足: This reprinted article was originally part of the DevEdge site.</li> -</ul></div> -<div class="noinclude"> -<p>{{ languages( { "en": "en/HTML_Element_Cross_Reference", "es": "es/Referencia_cruzada_de_elementos_HTML", "pl": "pl/Wsparcie_przegl\u0105darek_dla_element\u00f3w_HTML" } ) }}</p> -</div> diff --git a/files/ja/orphaned/jetpack/ui/slidebar/index.html b/files/ja/orphaned/jetpack/ui/slidebar/index.html deleted file mode 100644 index b75ed6a763..0000000000 --- a/files/ja/orphaned/jetpack/ui/slidebar/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Slidebar -slug: orphaned/Jetpack/UI/Slidebar -original_slug: Jetpack/UI/Slidebar ---- -<h3 id="About"><span>About</span></h3> -<ul> <li><strong><span>Status</span></strong><span>: In Development</span></li> <li><strong><span>Instantiation</span></strong><span>: </span><code>jetpack.future.import('slideBar') </code></li> <li><strong>Last Update</strong>: v0.6</li> <li><strong>Summary</strong>: slideBarはブラウザの古いスライドバー機能の再開発です。 slideBarはブラウザウィンドウの横にあり、一時的な情報と永続的な情報の両方を広い範囲に早くアクセスすることが可能となります。 slideBar機能を選択すると、そのコンテンツは現在のWEBページの後方から現れます。</li> -</ul> -<h3 id="新しいslideBar_インスタンスの作成と関連するオプション"><span>新しいslideBar インスタンスの作成と関連するオプション<br> -</span></h3> -<pre class="brush: js"><span><span>jetpack.slideBar.append( options ); </span></span></pre> -<pre style="" class="js">jetpack.selection.onSelection( fn );</pre> -<p style="margin-left: 80px;"><em>引数</em><br> -<em><strong>options</strong></em>: あなたのslideBarインスタンスに特定の修正を加えたオブジェクト。</p> -<p style="margin-left: 120px;">{<br> -<code> icon</code> <em>- uri</em> - SlideBar内で見せるアイコンのhref<br> -<code> html -</code> <em>text/xml</em> - 機能のためのhtml コンテンツ<br> -<code> url</code> <em>- uri</em> - コンテンツをロードするためのurl<br> -<code> width - </code><em>num</em> - コンテンツエリアと選択したスライドサイズの横幅<br> -<code> persist</code> - <em>bool</em> - 選択された時のデフォルトのslideの動作<br> -<code> autoReload -</code> <em>bool</em> - 選択された時にコンテンツを自動的にリロードするか<br> -<code> onClick</code> - <em>func</em> - アイコンがクリックされた時のcallback関数<br> -<code> onSelect</code> - <em>func</em> - 機能が選択された時のcallback関数<br> -<code> onReady</code> - <em>func</em> - 機能がロードされた時のcallback関数<br> -}</p> diff --git a/files/ja/orphaned/jetpack/システム/index.html b/files/ja/orphaned/jetpack/システム/index.html deleted file mode 100644 index 638ecbfa26..0000000000 --- a/files/ja/orphaned/jetpack/システム/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: システム -slug: orphaned/Jetpack/システム -original_slug: Jetpack/システム ---- -<div class="note"><strong>注意！</strong>：このようなページ（英語版に対応する日本語名のページ）を作らないでください！（このページは見本として保存するためにロックされています）</div> -<dl> <dt><a href="/ja/Jetpack/システム/クリップボード" title="ja/Jetpack/システム/クリップボード">クリップボード</a></dt> <dd>OSのクリップボードを使う</dd> <dt><a href="/ja/Jetpack/システム/システムの情報" title="ja/Jetpack/システム/システムの情報">システムの情報</a></dt> <dd>Jetpackが動作しているプラットフォームの情報を取得する</dd> <dt><a href="/ja/Jetpack/システム/視覚効果" title="ja/Jetpack/システム/視覚効果">視覚効果</a></dt> <dd>OSレベルの視覚効果を使う</dd> <dt><a href="/ja/Jetpack/システム/デバイス" title="ja/Jetpack/システム/デバイス">デバイス</a></dt> <dd>デバイスへのアクセスとコントロール (ex. iPod, Zune, 携帯電話, USBデバイス)</dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 04dd75193f..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: MDN アカウントを作成するには -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Beginner - - Documentation - - Guide - - Howto - - MDN Meta - - ガイド - - 初心者 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">MDN 上にあるコンテンツを編集するには、 MDN プロフィールが必要です。 MDN を読んだり、検索したりするだけの場合はプロフィールは不要です。このガイドは、 MDN のプロフィールをセットアップする手助けをします。</span></p> - -<div class="pull-aside"> -<div class="moreinfo"><strong>MDN に登録するにはなぜメールアドレスが必要なのか</strong><br> -<br> -メールアドレスはアカウントの回復に使用されます。また MDN の管理者がアカウントやサイトでの活動などについて連絡とる場合に必要となります。<br> -<br> -また、 (<a href="/ja/docs/MDN/Contribute/Howto/Watch_a_page">特定のページが変更されたとき</a>のような) 通知やメッセージ (例えば、ベータテストチームに参加し、テストが必要な新しい機能についてのメールを受信できます) にサインアップできます。<br> -<br> -メールアドレスは、 MDN では決して表示されず、<a href="https://www.mozilla.org/privacy/websites/">プライバシーポリシー</a>に従ってのみ使用されます。 - -<div class="note">GitHub 経由でログインしている場合、そして GitHub でメールアドレスを ”通知しない” に設定している場合、MDN からメッセージ（あなたがページを購読した時などの通知も含まれます）は受信されないでしょう。</div> -</div> -</div> - -<ol> - <li>MDN の各ページの上部に<strong>ログイン</strong>と書かれたボタンがあります。ここにマウスをポイント (モバイル端末の場合はタップ) すると、 MDN へのサインインに対応している認証サービスの一覧が表示されます。</li> - <li>ログインするサービスを選択します。現在は、 GitHub のみ利用できます。 GitHub を利用すると、 GitHub プロファイルへのリンクが MDN プロファイルの公開ページに追加されることに注意してください。 <img alt="ユーザーがサインアップの詳細を入力するところ" src="https://mdn.mozillademos.org/files/16954/2019-11-17.png" style="height: 848px; width: 1896px;"></li> - <li>サービスのプロンプトに従って、 GitHub のアカウントに接続します。 <img alt="ユーザーがログインしたりアカウントを作成したりしているところ" src="https://mdn.mozillademos.org/files/16956/2019-11-17_3.png" style="height: 879px; width: 1902px;"></li> - <li>認証サービスから MDN に戻ると、ユーザー名とメールアドレスの入力を求められます。<em>ユーザ名はあなたが貢献したページなどにクレジットとして公開されます。ユーザー名にメールアドレスを使用しないでください</em>。 <img alt="ユーザーがログインしたりアカウントを作成したりしているところｓ" src="https://mdn.mozillademos.org/files/16955/2019-11-17_2.png" style="height: 862px; width: 1870px;"></li> - <li><strong>MDN プロフィールを作成する</strong>をクリックします。</li> - <li>ステップ 4 で指定したメールアドレスが、認証サービスで使用しているものと同じでない場合、メールを確認し、メール内にあるリンクをクリックする必要があります。</li> -</ol> - -<p>以上です。これで MDN アカウントができました。すぐにページを編集することができます。</p> - -<p>MDN ページの上部にある自分のユーザー名をクリックすると、プロフィールを確認できます。そこで<strong>編集</strong>ボタンをクリックすると、プロフィールを変更できます。</p> - -<div class="note"> -<p>ユーザー名に空白や "@" を含めてはいけません。ユーザー名は、あなたが貢献したページなどに表示されることを覚えておいてください。</p> -</div> diff --git a/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html b/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html deleted file mode 100644 index 56585e5696..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 学習パスの作成方法 -slug: orphaned/MDN/Contribute/Howto/Create_learning_pathways -tags: - - MDN Meta - - ガイド - - 学習 - - 方法 -translation_of: MDN/Contribute/Howto/Create_learning_pathways -original_slug: MDN/Contribute/Howto/Create_learning_pathways ---- -<div>{{MDNSidebar}}</div> - -<p>学習領域で可能なさまざまなタスクの中で、最も重要なのは学習パスを設計することです。<span class="seoSummary">学習パスは基本的に、何かを学ぶために、通常は特定の順序で、読み、実行するための一連の記事です。 しかし良い・効率的なパスを作るには、いくつかの作業が必要です。このガイドは MDN の学習パスの計画と作成方法を学ぶのに役立ちます。</span></p> - -<p>学習パスは実際にはチュートリアルのように見えますが、その通りでそれは非常に似ています。違いは、チュートリアルは、学習の道が青写真である具体的な結果だということです。MDN で素晴らしい学習コンテンツを作成するために必要なことの詳細を見てみましょう。</p> - -<h2 id="処方箋">処方箋</h2> - -<p>学習パスの設計の冒頭には、常にあなたのアイデアを定式化する時があります。そのような道筋のデザイナーとして、あなたは先生の立場にあるので、教えているレッスンを正式なものにする必要があります。要するに、あなたは次の質問に答えなければなりません：</p> - -<dl> - <dt>何を教えたいですか？</dt> - <dd> - <p>一般的な知識 (例えば、オブジェクト指向プログラミング、{{Glossary("HTML")}}、Web デザイン) もしくはより具体的な実行するタスク (例えば、<a href="/ja/docs/Learn">Web サイトを構築する</a>方法、ナビゲーションを設計する方法 メニュー) かもしれません。これは本当にあなた次第ですが、集中しておくことが重要です。Web はかなり大きな獣で、学ぶべきことがたくさんあります。あなたのパスから学ぶ人に明確な洞察を与えるために、教えたいことを絞り込んでください。</p> - </dd> - <dt>オーディエンスは誰ですか？</dt> - <dd>学習スタイル、したがって教授のアプローチは、誰が学習をしているかによって大きく異なります。あなたが子供たちに教えたいのであれば、大人を教えるときとは異なるアプローチを取ります。初心者に対して教えるときは、熟練した開発者はすぐにはっきりと分かる基本的なことに集中する必要があります。その質問に答えることで、パスに入れる必要のある情報の深みと深さを定義するのに役立ちます。</dd> - <dt>事前知識が必要ですか？</dt> - <dd>これはパスの使いやすさを定義するために重要です。パスに多くの前提条件がある場合は、難しいパスです。つまり、非常に熟練した人だけが始めることができます。初心者を対象とするパスは、前提条件が比較的少数である必要があります。たとえば、{{Glossary("WebGL")}} を教えるための学習経路を作成したい場合、その経路から学ぶ人は既に {{Glossary("JavaScript")}} を知っていなければなりません。したがって、平均的または熟練した Web 開発者だけがそのようなパスに入ることができます。 これは大丈夫ですが、最初からそれを明確にする方が良いです。</dd> -</dl> - -<div class="note"> -<p><strong>プロのヒント:</strong> これを単独で行うことは困難な時があります。 あなたのアイデアを共有し、フィードバックを収集することをお勧めします。それはあなたのアイデアをテストし、物事を忘れるのを助けるでしょう。これを行うには、<a href="https://discourse.mozilla-community.org/c/mdn">MDN ディスカッションフォーラム</a> (テクニカルコンテンツについて話す) と <a href="https://forum.learning.mozilla.org/">Mozilla ラーニングフォーラム</a> (さまざまな教授法について話す) であなたのアイデアをすべて話すことができます。また、シンプルなメモ帳ツール (<a href="https://etherpad.mozilla.org/">Etherpad</a> など) を使用して簡単に情報を共有したり収集したりすることもできます。</p> -</div> - -<h2 id="概念">概念</h2> - -<p>あなたが誰に何を教えたいのか分かったので、それを行う方法を定義しましょう。</p> - -<p>最初に行うことは、チュートリアルのレッスンを小さな個別の部分に分割することです。<br> - 基本的には、画像を持っていて、ジグソーを使用してパズルのピースを作成するようなものです。小さければ小さいほど良いです。<br> - 一度それらのすべての作品を持っていたら、それらをグループ化して論理インクリメンタルグループにソートするときです。<br> - ゼロから完了までの包括的な方法を生み出すために必要なだけ繰り返します。</p> - -<p>There is no magic way to acheive this. Each lesson has its own requirement and each teacher has their own teaching method. The way you want to teach something will have a huge impact on how you'll break things into smaller parts. As a reminder, for MDN, ultimately it will be about writing articles and providing exercises for people who will learn by themselves.</p> - -<p>Also remember that there is no hard constraint on how to sort things out. If you want to build straight forward learning pathways that's fine. But if you want to build conditional pathways, that's fine too. What is important is to make things clear. You have to put yourself into the learners' shoes. Conception of a learning pathway is not very complicated but can take quite some time.</p> - -<div class="note"> -<p><strong>Pro tip:</strong> When going to conception, it can be helpfull to discuss things with others (as for the ideation part, see above). Since creating a learning pathway is about structuring information, it can be very helpfull to use some of the techniques that come from UX design such as <a href="https://en.wikipedia.org/wiki/Card_sorting" rel="external">card sorting</a>. As an example, card sorting was used to figure out how to structure the "How to build a web site" pathway. It helped us break up and sort things out by producing a clear <a href="https://wiki.mozilla.org/MDN/Learning_Area/Tree_of_knowledge">tree of knowledge</a>.</p> -</div> - -<h2 id="作成">作成</h2> - -<p>Ultimately once you get a clear view of the pathway itself, it is important to start defining the type of content needed for each step of the pathway. On MDN, at a minimum there should be a <a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">learning article</a>. Such articles can be associated with various <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">active learning content</a> (basically: exercises). Of course, you can also imagine other types of content such as videos, assessments and tests to validate knowledge, etc.</p> - -<p>Once you are clear on those various content requirements, you are ready to shape you pathway on MDN. This is very simple <a href="/en-US/docs/new?parent=119769">create a new landing page</a> for your pathway under <a href="/en-US/Learn/tutorial">/Learn/tutorial</a>. This landing page must clearly state what the reader will learn as well as any prerequisites necessary to follow that pathway. It also must contain the full list of articles to read with an excerpt for each article. Active learning content can also be listed here but it's not mandatory if they are linked directly inside the related articles.</p> - -<p>Once the landing page is ready, it "just" requires creating the necessary content. For that, you have two options:</p> - -<ul> - <li>Do it yourself (beware, it can take a long time)</li> - <li>Engage people in order to help you. To do that, join the Learning Area community (see the topic box below) and explain by any means possible about what you are doing in order to find help. Welcome to MDN :)</li> -</ul> -<h3 id="Contact_us">Contact us</h3> - -<ul> - <li>On IRC: <a href="irc://irc.mozilla.org/mdn">#mdn</a></li> - <li><a href="https://discourse.mozilla.org/c/mdn">Discourse</a></li> -</ul> diff --git a/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 12de427e86..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 技術レビューを行う方法 -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -tags: - - Documentation - - Guide - - Howto - - MDN Meta - - Review - - レビュー -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/Howto/Do_a_technical_review ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p class="summary"><strong>技術レビュー</strong>は技術的な正確さと記事の完全性の確認と、必要に応じて修正する作業から成ります。記事の執筆者が他人に記事の技術的なコンテンツをチェックしてほしい場合、編集時に「技術レビュー」チェックボックスをチェックします。執筆者が特定の技術者に技術レビューを行うよう依頼することもありますが、その分野の技術に詳しい人は誰でも行うことができます。</p> - -<p><span class="seoSummary">この記事は、技術レビューを行う方法について説明します。技術レビューをすることで、MDN のコンテンツを正確にする手助けができます。</span></p> - -<dl> - <dt>どのような作業か</dt> - <dd>記事の技術的な正確性と完全性の確認と修正です。</dd> - <dt>行う必要があるものはどれか</dt> - <dd>特に<a href="/ja/docs/needs-review/technical">技術レビュー</a>が必要だとマークされている記事です。</dd> - <dt>作業を行う上で必要な知識</dt> - <dd> - <ul> - <li>レビューをする記事の話題に関するエキスパートとしての知識。もしその記事を読んで特に新しい知識が得られないようであれば、自分はエキスパートだと考えてください。</li> - <li>MDN のウィキの記事を編集する方法。</li> - </ul> - </dd> - <dt>作業のステップ</dt> - <dd> - <ol> - <li>レビューする記事を選んでください。 - <ol> - <li><a href="/ja/docs/needs-review/technical">技術レビュー</a>が必要なページの一覧に行きましょう。この一覧には、技術レビューが必要なページがすべて掲載されています。</li> - <li>自分が詳しい話題のページを選択しましょう。</li> - <li>記事のリンクをクリックしてページを読み込んでください。</li> - </ol> - </li> - <li><a id="core-steps" name="core-steps"></a>技術的な詳細に注意を払いながら、記事を読んでください。記事は正しいでしょうか？抜けていることはないでしょうか？最初に選択したページが自分に合わないようであれば、ためらわずに他のページに切り替えましょう。</li> - <li>エラーがなければ、レビューを完了するために記事を編集する必要はありません。ページの左のサイドバーにある「クイックレビュー」ボックスを見てください。この黄色いボックスでは、レビュー待ち項目の一覧が表示されており、レビューリクエストフラグを解除することができます。技術レビューがリクエストされていると、以下のようになります。<br> - <img alt="サイドバーに表示されるクイックレビューボックスに技術レビューが表示されている様子" src="https://mdn.mozillademos.org/files/15790/has-technical-review.png" style="height: 123px; width: 318px;"></li> - <li>「<strong>技術面</strong>」のチェックを外し、［<strong>保存</strong>］をクリックしてください。</li> - <li>エラーを見つけて修正しなければならないときは、嬉しいことにレビューリクエストの状態をエディターから変更することができます。手順は以下の通りです。 - <ol> - <li>ページを編集するために、ページの先頭付近にある［<strong>編集</strong>］ボタンを押してください。これで <a href="/ja/docs/MDN/Contribute/Editor">MDN エディター</a> に入ります。</li> - <li>正しくない技術情報を修正したり、欠けている情報を補ったりしてください。</li> - <li>記事の下にある<strong>リビジョンのコメント</strong>を入力してください。ここにはどのような編集を行ったかを短いメッセージで、「技術レビュー完了」のように書きます。情報を修正した場合は、それを「技術レビューを行い、引数の説明を修正した」のようにコメントに書いてください。これは他の協力者やサイトの編集者がなぜ変更されたのかを知る手掛かりになります。レビューの品質に達していないと感じた場合は、それを書いてもいいでしょう。</li> - <li>ページのリビジョンのコメントのすぐ上、「<strong>レビューが必要ですか？</strong>」下にある「<strong>技術レビュー</strong>」ボックスのチェックを外します。</li> - <li>［<strong>公開</strong>］ボタンを押してください。</li> - </ol> - </li> - </ol> - - <p>おめでとうございます！これで最初の技術レビューが完了しました。ご協力ありがとうございました。</p> - </dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 10b890c87e..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 編集レビューを行う方法 -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Documentation - - Editorial Review - - Guide - - Howto - - MDN Meta - - 文書化 - - 編集レビュー -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p class="summary"><strong>編集レビュー</strong>は、記事内の誤植、言葉遣い、文法、用法などの間違いの修正などの作業です。 MDN の技術文書に価値ある協力を行うためには執筆の専門家である必要はありませんが、記事には校正や精読が必要です。これが編集レビューで行われます。</p> - -<p><span class="seoSummary">この記事は、編集レビューを行う方法について記述します。編集レビューをすることで、 MDN のコンテンツを正確かつ、良く書けたものにする手助けができます。</span></p> - -<dl> - <dt>何をすればいいですか？</dt> - <dd>編集レビューが必要であるとマークされた記事の校正と精読です。</dd> - <dt>レビューが必要な記事はどこにありますか？</dt> - <dd>記事内に、編集レビューが必要とマークされています。</dd> - <dt>編集レビューをするには、何を知っておく必要がありますか？</dt> - <dd>日本語の文法と語彙についてよく知っている必要があります。編集レビューとは、正しくわかりやすい文法や言葉を選択する作業です。また、 <a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN 執筆スタイルガイド</a>にも従ってください。</dd> - <dt>レビューする手順は？</dt> - <dd> - <ol> - <li>レビューする記事を選びます。 - <ol> - <li><a href="/ja/docs/needs-review/editorial">編集レビューが必要な記事</a>の一覧に行ってください。この一覧には、編集レビューがリクエストされたすべてのページが表示します。</li> - <li>記事のリンクをクリックしてページを読み込みます。<br> - <strong>注: </strong>この一覧は自動的に生成されますが、あまり頻繁的ではないので、編集レビューが必要なくなった記事が載っていることもあります。選択した記事に「この記事は編集レビューが必要です」というバナーが表示されて<em>いなければ</em>、飛ばして別な記事を選んでください。</li> - </ol> - </li> - <li id="core-steps">記事を注意深く読み、誤植、言葉遣い、文法、用法などの間違いがないか確認します。選んだ記事が自分のやりたいものと違っていたら、気にせず別のページに移動してください。</li> - <li>これ以上直すべきところがなければ、編集はせずに、レビュー済みとしてマークしてください。ページ左のサイドバーにある「クイックレビュー」ボックスを見てください。<br> - <img alt="レビューリクエストボックス(日本語版)" src="https://mdn.mozillademos.org/files/14709/2017-02-23%2011.48.25.png" style="height: 256px; width: 692px;"></li> - <li><strong>編集レビュー</strong>のチェックボックスのチェックを解除して、<strong>保存</strong>をクリックします。</li> - <li>直すべきところを見つけた場合には、次の手順に従います。 - <ol> - <li>上部にある<strong>編集</strong>ボタンをクリックします。クリックすると、<a href="/ja/docs/Project:MDN/Contributing/Editor_guide">MDN エディター</a>が開きます。</li> - <li>誤植、言葉遣い、文法、用法などの間違いを見つけたら修正します。一度にすべての箇所を修正しなくても構いません。ただしその場合には、記事全体のレビューが完全に終わったと考えられない限り、編集レビューのリクエストはそのままにしておいてください。</li> - <li>記事の下部にある <strong>リビジョンのコメント</strong> 欄に 「<em>編集レビュー: 誤植、文法の修正。</em>」のようなコメントを入力します。このようなコメントを書いておけば、他の協力者やサイトの編集者たちが、どの部分がどんな理由で変更されたのかを簡単に知ることができます。</li> - <li><strong>レビューが必要ですか？</strong> の下にある <strong>編集レビュー</strong> のチェックボックスのチェックを外します。このボックスは、ページの「リビジョンのコメント」セクションのすぐ下にあります。</li> - <li><strong>公開</strong>ボタンをクリックします。</li> - </ol> - </li> - </ol> - - <div class="note"> - <p>あなたが行った変更は、保存直後には表示されないことがあります。背後で行っているページの処理や保存に時間がかかることがあるためです。</p> - </div> - </dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html b/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html deleted file mode 100644 index 3705f66d55..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 実験的なマクロをいつどのように削除するか -slug: orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros -tags: - - MDN Meta - - ガイド - - 方法 -translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros -original_slug: MDN/Contribute/Howto/Remove__Experimental__Macros ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p class="summary"><span class="seoSummary">MDN 上のページには、ページによって記述された Web 技術機能が実験的でまだ標準化されていないことを読者に通知するための KumaScript <a href="/ja/docs/MDN/Contribute/Structures/Macros">マクロ</a>が含まれています。</span>しかし、実験的としてフラグが設定されている項目は標準化されている可能性がありますが、そのページはマクロを削除するために再訪されません。<span class="seoSummary">これらの「実験的な」マクロを含むページを見直し、実験的でないアイテムからマクロを削除することで、MDN の改善に役立てることができます。</span></p> - -<p>問題のマクロはページ内の特定の項目にフラグを立てる {{TemplateLink("experimental_inline")}} と、ページ全体にフラグを立てる {{TemplateLink("SeeCompatTable")}} です。</p> - -<div class="warning"> -<p><strong>Warning:</strong> <code>SeeCompatTable</code>の使用は推奨しません。互換性に関するすべてのデータは、ブラウザの互換性表とその中の脚注内に表示されることが期待されています。</p> -</div> - -<p>Here is the definition of "experimental" from the <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions">MDN Definitions and Conventions</a> article:</p> - -<p>{{page("/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions", "Experimental")}}</p> - -<dl> - <dt>Where does this task need to be done?</dt> - <dd> - <p>Pages in the following lists:</p> - - <ul> - <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&locale=*" rel="nofollow noopener">All pages on MDN that use <code>\{{experimental_inline}}</code></a> (list item icon)</li> - <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&locale=en-US" rel="nofollow noopener">All pages in English that use <code>\{{experimental_inline}}</code></a> (list item icon)</li> - <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&locale=*" rel="nofollow noopener">All pages on MDN that use <code>\{{SeeCompatTable}}</code></a> (page banner)</li> - <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&locale=en-US" rel="nofollow noopener">All pages in English that use <code>\{{SeeCompatTable}}</code></a> (page banner)</li> - </ul> - </dd> - <dt>What do you need to know to do the task?</dt> - <dd>Knowledge of the standardization or implementation status of the relevant item.</dd> - <dt>What are the steps to do the task?</dt> - <dd> - <ol> - <li>Review the page to see what item or items the macro is associated with.</li> - <li>Determine whether each item is still experimental or not. The compatibility table on the page may be more current than the the macros; you can also test using the item in multiple browsers.</li> - <li>If an item is no longer experimental, remove the "experimental" macro call associated with it. (Note: an item on a summary page that has the {{TemplateLink("experimental_inline")}} macro next to it is often a link to a full reference page, containing the {{TemplateLink("SeeCompatTable")}} macro.</li> - <li>Save the page with a comment about what you did.</li> - <li>If you have removed all "experimental" macros from a page (for inline macros, you might remove only some of them), force a refresh (Shift+Refresh) on the relevant search results page (linked above) to ensure that the list is updated.</li> - </ol> - </dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html b/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html deleted file mode 100644 index c77117480c..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: 世話人のいる開発者文書リクエストの解決方法 -slug: orphaned/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request -tags: - - Beginner - - Documentation - - Guide - - MDN Meta -translation_of: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request -original_slug: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request ---- -<div>{{MDNSidebar}}</div> - -<p>MDN Web Docs プロジェクトには、 Mozilla の Bugzilla インスタンスに、変更をリクエストする大きなバックログがあります。問題を修正してリクエストを閉じていただくことによって MDN を改善することができます。</p> - -<h2 id="Where_does_this_need_to_be_done" name="Where_does_this_need_to_be_done">どこにで実施する必要があるのか</h2> - -<p><a href="https://codetribute.mozilla.org/projects/mdn">Mentored MDN bugs on Codetribute</a> から見つけることができます。 Bugzilla の課題は、改善のリクエストや新しい素材や機能のアイディアも含めて、すべて「バグ」と呼ばれています。このリストのバグは MDN に初めて協力している人にとって良いものと判断されたものであり、問題を解決する上でガイダンスやアドバイスを行ってくれる世話人が割り当てられています。</p> - -<h2 id="What_do_you_need_to_know_to_do_the_task" name="What_do_you_need_to_know_to_do_the_task">タスクを実行するのに知っておく必要があることは何か</h2> - -<p>選択した作業のリクエストの主題に詳しい必要があります。MDN の編集や <a href="https://www.bugzilla.org/">Bugzilla</a> の利用にいくらか馴染んでおくといいでしょう。</p> - -<h2 id="What_are_the_steps" name="What_are_the_steps">どのようなステップで行うのか</h2> - -<ol> - <li>関心のありそうで、自分の知識の範囲内にあるリクエストを選択してください。完全に分かっていないものを選択しても、その中で必要なことを合理的に学ぶことができるのであれば構いません。</li> - <li>リクエストを注意深く読んで、何がリクエストされているかを確認してください。また、 <strong>Mentors</strong> (世話人) フィールドに挙がっている名前に注意してください。世話人は、あなたのような人がリクエストを処理することを助けるために打ち込んでいる人です。</li> - <li>まだ済んでいないのであれば、 <a href="https://bugzilla.mozilla.org/createaccount.cgi">Bugzilla のアカウントを作成してください。</a></li> - <li>処理するリクエストを決めたら、リクエストを自分自身に割り当ててください。 <strong>Assigned To</strong> フィールド (名前やメールアドレスを入れるところ) の隣にある "take" リンクをクリックし、それから <strong>Save Changes</strong> ボタンをクリックしてください。世話人はリクエストの所有権をあなたが取ったことを知ります。</li> - <li>MDN でリクエストを満たすために必要な作業を行います。世話人に質問する必要があれば、リクエストにコメントを追加してください。仕事が基本的に終わったか、世話人にレビューを依頼するのもいいでしょう。</li> - <li>リクエストが満たされたことをあなたと世話人が確認したら、 <strong>Status</strong> を RESOLVED に変更し、解決状況を FIXED にして <strong>Save Changes</strong> をクリックしてください。</li> -</ol> - -<p>以上です。文書のバグ修正は完了です。</p> diff --git a/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index e0c4aa4004..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ページに概要を設定するには -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Documentation - - Guide - - Howto - - MDN Meta - - SEO - - Summaries - - Summary -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p><span class="seoSummary">この記事では、 MDN Web Docs サイトにおける <strong>SEO summary</strong> (<strong>description</strong> または単に <strong>summary</strong> とも) を設定する方法を示します。</span>この概要はいくつもの用途で使用されます。</p> - -<ul> - <li>Google を始めとする検索エンジンで、ページを列挙し索引をつけるのに役立てるために使われます。</li> - <li>検索エンジンが検索結果ページにこの概要を表示して、読み手が自分のニーズに最も近いページを選択するための手助けになります。</li> - <li>MDN のメニューや主題のランディングページが、記事の題名の下によくこの概要を表示し、こちらもユーザーが探している情報を見つけるための手助けになります。</li> - <li>MDN 上のリンクでは、よく概要のテキストを含むツールチップを表示し、クリックして記事を読む前にユーザーに概要が見られるようにしています。</li> -</ul> - -<p>したがって、概要は記事自体の文脈でも、他の文脈内に単独で表示された場合でも、意味が分かるようにしてください。また、概要のテキストを書く際には <a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN 執筆スタイルガイド</a>を意識しておいてください。</p> - -<h2 id="The_default_summary" name="The_default_summary">既定の概要</h2> - -<p>概要のないページは、既定の概要が明確に設定されます。既定では、概要のテキストは、 {{Glossary("HTML")}} の最初の題名ではなくテキストの内容と見られるブロックのテキスト全体です。しかし、これが使用するのに最適なテキストとはならない可能性がいくつもあり得ます。</p> - -<ul> - <li>最初のテキストブロックが、有益な記事の内容の概要ではなく、余談や何らかの注意書きである場合。</li> - <li>最初のテキストブロックが内容の段落であるものの、良い記事の概要を含んでいない場合。</li> - <li>テキストが長すぎる (または短すぎる) 場合。</li> -</ul> - -<p>明示的にページの概要を設定し、概要ができるだけ有益になるようにするのが最善です。</p> - -<h2 id="Setting_the_summary" name="Setting_the_summary">概要の設定</h2> - -<p>ページの概要の設定についての方法を見てみましょう。</p> - -<div class="note"><strong>訳注:</strong> 以下の説明は、英語版における操作方法です。英語からの翻訳ページの場合は、まず英語版の概要を修正した上で、日本語版ページ翻訳を反映してください。</div> - -<h3 id="What_is_the_task" name="What_is_the_task">どのような作業か</h3> - -<p>他の文脈で概要として使用するページ内のテキストをマークします。適切なテキストが利用できない場合は、適切な短いテキストを書く作業も含まれるかもしれません。</p> - -<h3 id="どこで行う必要があるのか">どこで行う必要があるのか</h3> - -<p>概要のないページ、概要があるが有益ではないページ、概要が推奨されるガイドラインに合っていないページです。</p> - -<h3 id="What_do_you_need_to_know_to_do_the_task" name="What_do_you_need_to_know_to_do_the_task">この作業で必要なスキル</h3> - -<p>MDN エディターが使えること。英語でよい文章を書くスキル。良い要約を書くために、主題に十分通じていること。</p> - -<h3 id="What_are_the_steps_to_do_it" name="What_are_the_steps_to_do_it">作業のステップ</h3> - -<ol> - <li>概要を設定するページを選択してください。すでにあるのであれば、素晴らしい！ステップ2まで飛ばしてください。そうでなければ、修正するページを探します。 - <ol> - <li><a href="/ja/docs/MDN/Doc_status">MDN 文書化状況</a>のページで、よく知っている主題 (例えば HTML) の <strong>Sections</strong> の下のセクションをクリックします。<br> - <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> - <li>主題についての文書化ステータスのページで、<strong>Summary</strong> 表の <strong>Pages</strong> をクリックします。その主題の節にあるすべてのページの索引が表示されます。左の列にはページへのリンクが、タグと概要は右の列に表示されます。<br> - <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> - <li>概要がないか、概要が良くないページを選択します。<br> - <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> - <li>リンクをクリックしてそのページへ移動します。</li> - </ol> - </li> - <li>概要を追加したいページに来たら、 <strong>編集</strong> をクリックして、ページを MDN エディター内に開きます。エディターの使用についての情報が必要であれば、 <a href="/ja/docs/MDN/Contribute/Editor">MDN エディター UI のガイド</a>を参照してください。</li> - <li>文脈の外に出しても概要として使える1～2文を探します。必要であれば、1～2文でよい概要として選択できる文になるようテキストを作成または変更します。{{anch("Crafting a good summary", "よい概要の作成")}}を見ると、適切な概要を選択したり作成したりするのに役立ちます。</li> - <li>概要として使用するテキストを選択します。</li> - <li>エディタツールバーの <em>Styles</em> ウィジェットで、 <strong>SEO Summary</strong> を選択します。ページのソースでは、選択したテキストが、 <code>class="seoSummary"</code> をつけた {{HTMLElement("span")}} 要素で囲まれます。<br> - <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> - <li>リビジョンのコメントをつけて変更を保存します。コメントは必須ではありませんが、付けることを強く推奨します。そうすることで、他の人が変更を追跡しやすくなります。付けるのを勧める。「SEO summary を設定」のようなものでも充分です。</li> -</ol> - -<h2 id="Crafting_a_good_summary" name="Crafting_a_good_summary">よい概要の作成</h2> - -<p>概要は以下のような、多数の異なるシナリオで使用されます。</p> - -<ul> - <li>Google を始めとする検索エンジンと同様に、 MDN の検索結果ページにおいて記事の説明として</li> - <li>MDN 自身のメニューや主題のランディングページにおける説明として</li> - <li>ユーザーがカーソルを MDN 上の記事へのリンクに当てた時のツールチップの中で</li> -</ul> - -<p>概要を作成する上で、これらのシナリオを念頭に置いておくことが重要です。これらの場面のすべてで概要がよく機能することを保証できるように、以下のガイドラインに従ってみてください。</p> - -<div class="note"> -<p><strong>メモ:</strong> 他に特別に示されていない限り、これらは<em>ガイドライン</em>であり、杓子定規の規則ではありません。これらのガイドラインに合うようにするべきですが、時には避けられない例外もあります。</p> -</div> - -<ul> - <li>概要はページの主題と種類の両方を示すようにしてください。例えば、「このガイドでは、現在画面上に表示されているアニメーションだけを更新するレスポンシブウェブアプリを作成するための Intersection Observer API の使い方を学習します。」は93文字で、どの技術を説明するのか、技術をどう使用するのか、この記事がチュートリアルであることを説明しています。</li> - <li>記事中のどの段落のどこにあるテキストを選択することもできますが、できれば最初の段落内 (または、場合によっては2段落目) にしてください。もし記事の要点がその段落にないのであれば、おそらくページの導入部を書き直す必要があるでしょう。</li> - <li>概要は記事の一部なので、記事本文の文脈内に合うようにする必要があります。</li> - <li>概要の中に他のページへのリンクを設置することが可能です。これは検索エンジンに渡される前に自動的に削除されるので、不利になることはありません。ツールチップとして使用される場合にも削除されます。 MDN のメニューやランディングページ内のページの説明として使用される場合は、とても便利なので、リンクは概要から削除され<em>ません</em>。</li> - <li>概要には、ページに含まれる情報を探している人が検索する可能性が高い重要な用語を適切に選択して含める必要があります。 Intersection Observer API の例の場合、 API の名前、「アニメーション」、「表示されている」、「レスポンシブ」、「ウェブアプリ」などのキーワードがあります。</li> - <li>検索エンジン最適化 (SEO) のためには、概要から取得される値は150文字以下の長さにする必要があります。</li> - <li>通常、<strong>検索エンジンの結果ページ</strong> (<strong>SERP</strong>) には概要の160文字を超える部分が表示されないため、それより長い概要は避けてください。テキストを不意に切り落とすと、人々がリンクをクリックするのを思いとどまらせる可能性があります。</li> - <li>ページ上で表示されない素晴らしい概要を書いて、 <code>"hidden"</code> クラスのブロック内で概要を非表示にするのは魅力的かもしれません。しかし、検索エンジンはユーザーには見えないテキストを無視するため、これは<em>機能しません</em>。</li> -</ul> - -<p>この概要は、本の裏表紙または表紙の内側の宣伝文句 ({{interwiki("wikipedia", "en:blurb")}}) に似ていると考えてください。この短いテキストは、すばやく読者の注意を惹き、読み進める気を起させるものです。読者の注意をすばやくキャッチし、読者に読み進めてもらう必要があります。</p> - -<p>検索エンジンの結果ページと記事テキスト自体の両方でうまく機能する概要を書くことは少し難しいかもしれませんが、現在 MDN はページの内容とは別に SEO 用の概要を作成する方法を提供していませんので、できる範囲でやってください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Howto/Write_for_SEO">どのように MDN Web Docs で SEO を考慮するか</a></li> -</ul> diff --git a/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index f191be5d57..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: JavaScript ページのタグ付け方法 -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -tags: - - Guide - - Howto - - JavaScript - - MDN Meta - - ガイド - - 入門 -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -<div>{{MDNSidebar}}</div> - -<p class="summary"><strong>タグ付け</strong>はページにメタ情報を追加することであり、検索ツール等において関連するコンテンツをグループ化することができます。</p> - -<dl> - <dt><strong>どこに設定すべき？</strong></dt> - <dd><a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">JavaScript 関連のページでタグの無いもの</a> (<a href="/ja/docs/MDN/Doc_status/JavaScript#No_tags">日本語版</a>) のどれか (日本語版のステータスページにはタグの無いページのリストがありません)</dd> - <dt><strong>タグ付けするために知っておくべきことは？</strong></dt> - <dd>メソッドやプロパティとは何か、というような、基本的な JavaScript コーディングの知識。</dd> - <dt><strong>どんな手順でやればいいの？</strong></dt> - <dd> - <ol> - <li>上記リンクにあるリストから、対象のページを選びます。</li> - <li>記事のリンクをクリックして、ページをロードします。</li> - <li>ページがロードできたら、上の方にある <strong>編集</strong> ボタンを押します。するとMDNエディターが始まります。</li> - <li>最低でも <code>JavaScript</code> タグは付けるべきです。以下のようなタグも付けましょう。 - <table class="standard-table"> - <thead> - <tr> - <th scope="col">タグ</th> - <th scope="col">使う対象のページ</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Method</code></td> - <td>メソッドのページ</td> - </tr> - <tr> - <td><code>Property</code></td> - <td>プロパティのページ</td> - </tr> - <tr> - <td><code>prototype</code></td> - <td>プロトタイプのページ</td> - </tr> - <tr> - <td>オブジェクトの型名</td> - <td>オブジェクトのメソッドのページ。例えば、 String.fromCharCode には <code>String</code> タグをつけるべき</td> - </tr> - <tr> - <td><code>ECMAScript6 </code> と <code>Experimental</code></td> - <td>新しい ECMAScript バージョンで追加される機能のページ</td> - </tr> - <tr> - <td><code>Deprecated</code></td> - <td>非推奨の (deprecated) 機能のページ (使うことが推奨されないが、まだサポートされている機能)</td> - </tr> - <tr> - <td><code>Obsolete</code></td> - <td>廃止された (obsolete) 機能のページ (最近のブラウザーがサポートしない機能)</td> - </tr> - <tr> - <td>その他</td> - <td>これ以外にどんなタグがあるのかは、 <a href="/ja/docs/MDN/Contribute/Howto/Tag">MDN タグ付け標準</a>をご覧ください。</td> - </tr> - </tbody> - </table> - </li> - <li>コメントを付けて保存します。</li> - <li>完了です！</li> - </ol> - </dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html b/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html deleted file mode 100644 index e80b2796eb..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ナビゲーションサイドバーの使い方 -slug: orphaned/MDN/Contribute/Howto/Use_navigation_sidebars -tags: - - Documentation - - Draft - - HTML - - MDN - - MDN Meta - - MDN Web Docs - - Macros - - Meta - - NeedsContent - - Tutorial - - sidebars - - マクロ -translation_of: MDN/Contribute/Howto/Use_navigation_sidebars -original_slug: MDN/Contribute/Howto/Use_navigation_sidebars ---- -<p>{{MDNSidebar}}{{Draft}}</p> - -<p>MDN の操作はよくサイドバーを用いて行われ、これは一連の記事や、同じ系列のドキュメントと MDN の他の領域の両方における関連コンテンツを列挙します。 <span class="seoSummary">MDN のサイドバーは自動的には生成されません。ページにサイドバーを入れるには、いくらかのマクロを作成し使用する必要があります。この記事では、 MDN サイドバーマクロの作成と記事内での使用方法の両方の手順を確認します。</span></p> - -<h2 id="Current_MDN_sidebar_macros" name="Current_MDN_sidebar_macros">現在の MDN のサイドバーマクロ</h2> - -<p>MDN には既に、サイドバーを生成するたくさんのマクロがあります。多くは MDN の特定のセクションに特化していますが、他に、特化したものがない文書領域のための一般的なサイドバーを生成するためのものがあります。</p> - -<dl> - <dt>{{TemplateLink("AddonSidebar")}}</dt> - <dd>アドオンの文書を操作するためのサイドバーを挿入します。これは主にブラウザー拡張機能の作成についてのコンテンツです。</dd> - <dt>{{TemplateLink("APIRef")}}</dt> - <dd>API インターフェイスのリファレンスページおよびサブページで使用されるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("CanvasSidebar")}}</dt> - <dd>HTML/DOM Canvas の文書の中で使用されるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("DefaultAPISidebar")}}</dt> - <dd>特化したサイドバーのタイプがない API の API 概要ページで使用することができる既定のサイドバーを挿入します。</dd> - <dt>{{TemplateLink("FirefoxSidebar")}}</dt> - <dd>Firefox に特化した文書で使用されるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("GamesSidebar")}}</dt> - <dd>ウェブ技術を使ったゲーム開発に関する MDN のコンテンツを操作するサイドバーを挿入します。</dd> - <dt>{{TemplateLink("HTMLSidebar")}}</dt> - <dd>MDN の HTML 文書で使用されるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("HTTPSidebar")}}</dt> - <dd>MDN の HTTP 文書内のページで使用するためのサイドバーを挿入します。</dd> - <dt>{{TemplateLink("JSSidebar")}}</dt> - <dd>JavaScript 文書で使用するためのサイドバーを挿入します。</dd> - <dt>{{TemplateLink("LearnSidebar")}}</dt> - <dd>学習エリアのサイドバーを挿入します。</dd> - <dt>{{TemplateLink("MDNSidebar")}}</dt> - <dd>MDN の「メタ文書」、つまり、 MDN Web Docs サイト自体の利用や編集に関する文書を操作するサイドバーを挿入します。このページで実際にマクロが使われているのを見ることができます。</dd> - <dt>{{TemplateLink("ServiceWorkerSidebar")}}</dt> - <dd>サービスワーカーについての文書で使用されるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("SpiderMonkeySidebar")}}</dt> - <dd>SpiderMonkey (Mozilla の JavaScript エンジン) のページに使用するサイドバーを挿入します。</dd> - <dt>{{TemplateLink("ToolsSidebar")}}</dt> - <dd>Firefox 開発ツールについてのページを列挙するサイドバーを挿入します。</dd> - <dt>{{TemplateLink("WebAssemblySidebar")}}</dt> - <dd>WebAssembly に関するリンクを含むサイドバーを挿入します。</dd> - <dt>{{TemplateLink("WebExtAPISidebar")}}</dt> - <dd>ブラウザー拡張 (WebExtension) についての API リファレンス文書を操作するために使われるサイドバーを挿入します。</dd> - <dt>{{TemplateLink("WebGLSidebar")}}</dt> - <dd>WebGL に関するコンテンツの操作を提供するサイドバーを挿入します。</dd> - <dt>{{TemplateLink("WebRTCSidebar")}}</dt> - <dd>MDN の WebRTC 文書の操作を提供するコンテンツのサイドバーを挿入します。</dd> - <dt>{{TemplateLink("XSLTRef")}}</dt> - <dd>XSLT, EXSLT, XPath についての文書のサイドバーを挿入します。</dd> -</dl> - -<h2 id="Using_sidebars" name="Using_sidebars">サイドバーの使用</h2> - -<p>サイドバーをページに追加するには、正しいマクロを探し、それから、サイドバーを挿入したいページで、「編集」ボタンをクリックしてください。ページに {{HTMLElement("p")}} ブロックを追加して、中身はマクロを呼ぶだけにしてください。そうすれば、マクロ呼び出しを追加することができます。通常、サイドバーマクロは引数を必要としませんので、単に次のように書くことができます。</p> - -<pre class="brush: html; no-line-numbers notranslate"><p>\{{MDNSidebar}}</p></pre> - -<p>通常は、これを文書の最初の行に入れてください。一部の文書では、代わりに末尾に入っています。これはうまく動作しますが、一貫性を保証するために、できれば先頭に配置してみてください。</p> - -<p>すでにマクロを呼び出す {{HTMLElement("p")}} ブロックがページの先頭にある場合、例えばバナーを生成する <code>\{{Non-standard_Header}}</code> などがある場合は、次のように同じ {{HTMLElement("p")}} の中にサイドバーのマクロを入れることができます。</p> - -<pre class="brush: html; no-line-numbers notranslate"><p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p></pre> - -<h2 id="Creating_sidebars" name="Creating_sidebars">サイドバーの作成</h2> - -<p><em>詳細は執筆中</em></p> - -<p>{{TemplateLink("SidebarUtilities")}} について触れておきます。</p> - -<p>サイドバーの構築に役立つマクロがいくつかあります。</p> - -<dl> - <dt>{{TemplateLink("ListSubpagesForSidebar")}}</dt> - <dd>指定されたページのサブページを使用して、サイドバー内で利用するために構築されたリンクのツリーを生成します。</dd> -</dl> diff --git a/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 37cf96c1bf..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ウェブ学習者に役立つ記事を書く方法 -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Guide - - Howto - - Learn - - MDN Meta -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -<div>{{MDNSidebar}}</div> - -<p>MDN の<a href="/ja/docs/Learn">学習エリア</a>には、ウェブ開発の初心者向けの記事がまとまっています。ほとんどの内容が初心者向けであるため、知識を共有したりウェブへの入門者を手助けするのに良い場所となっています。ウェブ開発初心者でも内容を理解できることが大事なので、それについて特に注意を払っています。</p> - -<p><span class="seoSummary">この記事は<a href="/ja/docs/Learn">学習エリア</a>のページの書き方を説明しています。</span></p> - -<div class="note"> -<p>訳注: この記事は英語の学習エリア記事を新規作成する方法について述べています。日本語の記事は英語記事を翻訳して作成してください。英語ページに該当する記事がない場合は、まず英語記事を作成してください。</p> -</div> - -<h2 id="How_to_write_a_Learning_Area_article" name="How_to_write_a_Learning_Area_article">学習エリアの記事の書き方</h2> - -<p>知識を持って協力を始めるには、大きな緑色のボタンをクリックし、以下の5つのステップに従ってください。アイディアを探しているのであれば、 <a href="https://trello.com/b/LDggrYSV">Trello のチームのボード</a>を参考にしてみてください。</p> - -<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">学習エリアの記事を書く</a></div> - -<p>この記事の場所は正しくないかもしれませんが、少なくとも MDN 上にあります。もし正しい場所へ移動するために誰かと連絡を取りたい場合、<a href="/ja/docs/Learn#Contact_us">ご連絡ください</a>。</p> - -<h3 id="Step_1_Write_a_two-liner" name="Step_1_Write_a_two-liner">ステップ 1: 最初の2文を書く</h3> - -<p>記事の1文目には、書こうとしている主題の要約を書く必要があります。2文目には記事に書こうとしている項目をもう少し具体的に書きましょう。例えば下記のようになります。</p> - -<div class="summary"> -<p>{{glossary("HTML")}} ファイルが構造的なコンテンツを持つ一方、もうひとつの主要なウェブ技術である {{Glossary("CSS")}} は、コンテンツを望み通りの外見にします。この記事では、この技術がどのように動いているのかと、基本的な書き方のサンプルを紹介します。</p> -</div> - -<p>上記の例では、CSS がページをスタイルするためのウェブ技術の核であることを簡潔に説明しています。これにより、読者は記事が対象とする範囲を予想するのに十分な情報を得ることができます。</p> - -<p>学習エリアの主な対象者は初心者です。そのため個々の記事は、読者があまりにも多い情報に圧倒されないように、1 つの単刀直入なテーマを対象にすべきです。もし要約が 1行に収まらない場合、1 つの記事に過剰な内容を書こうとしているかもしれません！</p> - -<h3 id="Step_2_Add_a_top_box" name="Step_2_Add_a_top_box">ステップ 2: 上部ボックスを追加する</h3> - -<p><strong>上部ボックス</strong>を追加して、読者が学習プロセスのどこにいるのか理解しやすくしてください。これは<a href="/ja/docs/Learn/Understanding_URLs">「URL とは何か」</a>の上部ボックスの例です。記事を書く際に、この記事をモデルとして使用することができます。</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">前提知識:</th> - <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーとは何か</a>、および <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブ上のリンクの背後にある概念</a>を知っておく必要があります。</td> - </tr> - <tr> - <th scope="row">到達目標:</th> - <td>URL の内容とウェブ上での URL の仕組みを学習します。</td> - </tr> - </tbody> -</table> - -<dl> - <dt>前提知識</dt> - <dd>読者が記事を読む際に事前に知っておくべきことを書きます。可能なら、個々の前提知識に、その概念を網羅する他の学習エリア記事のリンクをつけます (本当に初歩の記事で、前提知識を網羅する要求しない場合を除く)。</dd> - <dt>到達目標</dt> - <dd>読者が記事を読んだ後に何を学べるかを簡潔に書きます。記事の冒頭に書く要約とは少し違って、この到達目標の節では、読者が記事を読むことで達成を期待されるものを具体的に示します。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> この表を作るには、上記の例をコピーして貼り付けるか、 MDN エディターの<a href="/ja/docs/MDN/Contribute/Editor/Tables">表ツール</a>を使用してください。表ツールを使う場合は、 CSS に <code>learn-box</code> クラスを、既定値の <code>standard-table</code> クラスに加えて追加する必要があります。このために、表のプロパティを作成または編集する際に、「高度な設定」パネルに行き<strong>スタイルシートクラス</strong>欄に "<code>standard-table learn-box</code>" を設定してください。</p> -</div> - -<h3 id="Step_3_Write_a_full_description" name="Step_3_Write_a_full_description">ステップ 3: 詳細説明を書く</h3> - -<p>次に、記事で最も強調したい概念についての徹底的な概要となるような、もっと長くて詳細な説明を書きましょう。なぜ読者が時間を費やしてこの記事を読み、その内容を学ぶべきかについての説明を忘れないように！</p> - -<h3 id="Step_4_Dig_deeper" name="Step_4_Dig_deeper">ステップ 4: 深掘りする</h3> - -<p>これまでの部分をやり終えたら、トピックを深掘りしましょう。記事を好きなように構造化して問題ありません (ただし、<a href="/ja/docs/MDN/Contribute/Content">スタイルガイド</a>を気軽に参照ください)。この部分はあなたの記事を輝かせるチャンスです！書こうとしている内容を詳しく説明しましょう。参考情報へのリンクを加え、その技術がどのように動くのかを詳しく説明し、文法や使い方の詳細などを書きましょう。すべてあなた次第です！</p> - -<p>ガイドとして、以下は初心者向けの書き方のコツです。</p> - -<ul> - <li>ひとつのトピックに集中しましょう。もし他のトピックについて書く必要性を感じたならば、前提知識の記述に漏れがあるか、複数の記事として分割する必要があることを示します。</li> - <li>シンプルな言葉を使いましょう。できるだけ専門的な用語は避けましょう。最低限、それらの用語の意味を定義し、適当なものがあれば<a href="/ja/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_Glossary_macro">用語集へのリンクを貼る</a>ようにしましょう。</li> - <li>理論的な概念を簡単に理解できるように、単刀直入なサンプルを含めましょう。多くの人は実例を通じて最もよく学習できます。学術論文を書くより、初心者にとって読みやすい文章を優先しましょう。</li> - <li>視覚的な資料はより多くの情報を表し、理解の助けになることが多いです。なので画像、図表、動画、表を気軽に利用しましょう。図表やグラフにテキストを含めたいなら、我々の翻訳チームがローカライズに対応できるよう、 {{Glossary("SVG")}} を使用することをお勧めします。</li> -</ul> - -<p><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a>の記事には良い説明が含まれています。参考にしてみてください。</p> - -<h3 id="Step_5_Provide_active_learning_material" name="Step_5_Provide_active_learning_material">ステップ 5: 「アクティブラーニング」の教材を提供する</h3> - -<p>記事を解説し読者の理解を助けるために、実習、チュートリアル、達成すべきタスクを提供しましょう。読者は記事で説明されている概念を実際に使ったり、実験したりしてみることで、脳内に情報を強く結びつけることができます。</p> - -<p>用例は<a href="/ja/docs/MDN/Contribute/Structures/Live_samples">ライブデモ</a>のように記事に直接含めることもできますし、<a href="/ja/docs/MDN/Contribute/Editor/Links">リンクする</a>こともできます。もしそういった価値のある教材の作成に興味があるなら、<a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">インタラクティブな学習用教材を作成する方法</a>の記事を読んでみてください。</p> - -<p>もしアクティブラーニング教材へのリンクを提供できない (知らない・時間がなくて作れない) 場合は、記事に {{Tag("NeedsActiveLearning")}} タグを追加してください。そうすれば、他の協力者が、アクティブラーニングを必要とする記事を見つけやすくなり、収集するのを手伝うことができます。</p> - -<p><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">実習: 別な要素の選択</a> をインタラクティブな学習用教材として、 <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">アクティブラーニング: scopeで遊んでみよう</a> をファイルをダウンロードし、編集するステップを踏みながら学んでいくような、別のスタイルの実習サンプルとして参考にしてください。</p> - -<h3 id="Step_6_Get_the_article_reviewed_and_put_into_the_Learning_Area_navigation_menu" name="Step_6_Get_the_article_reviewed_and_put_into_the_Learning_Area_navigation_menu">ステップ 6: 記事のレビューを受け、ナビゲーションメニューに追加する</h3> - -<p>記事を書き終えたら、我々が確認とレビューを行ない、改善点を提案できるように教えてください。再掲になりますが、連絡を取るための最善の方法は<a href="/ja/docs/Learn#Contact_us">連絡方法</a>の節をご覧ください。</p> - -<p>記事を完了するためのもうひとつのタスクは、その記事を学習エリアのメインナビゲーションメニューに追加することです。このメニューは、編集するのに特別な許可が必要な <a href="/ja/docs/Template:LearnSidebar">LearnSidebar macro</a> によって生成されています。そのため、追加するには我々のチームにご連絡ください。</p> - -<p>メニューは少なくとも、あなたの記事には追加すべきです。 — マクロの \{{LearnSidebar}} をページ最上部の段落に加えましょう。</p> - -<ul> -</ul> - -<h2 id="Suggested_articles" name="Suggested_articles">おすすめの記事</h2> - -<p>何か記事を書きたいけど、何を書けばいいか分からないでしょうか？</p> - -<p>学習エリアのチームは書くべき<a href="https://trello.com/b/LDggrYSV">記事のアイデアを Trello のボード</a>で管理しています。好きなものを選んで取りかかってください！</p> diff --git a/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html b/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html deleted file mode 100644 index 6804978c4d..0000000000 --- a/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Mozilla インターフェイスのリファレンス文書の書き方 -slug: orphaned/MDN/Contribute/Howto/Write_interface_reference_documentation -tags: - - Guide - - Howto - - MDN Meta -translation_of: MDN/Contribute/Howto/Write_interface_reference_documentation -original_slug: MDN/Contribute/Howto/Write_interface_reference_documentation ---- -<p>{{MDNSidebar}}</p> - -<p>この記事では、 Mozilla のインターフェイスのために、適切にフォーマットされた有用なドキュメントを作成する方法を示します。それぞれのインターフェイスは、記事のタイトルをインターフェイスの名前にして、個別の記事で文書化されなければなりません。</p> - -<div class="blockIndicator warning"> -<p><strong>重要:</strong> 私たちは、Mozilla 内部のインターフェイス (ほとんどが nsI で始まる) を MDN 上で積極的にドキュメント化することはもうありません。これらのドキュメントが将来どこに置かれるべきかの最終決定はまだ検討中ですが、それまでの間、あなたの時間を使って MDN にドキュメントを書くことは一般的にお勧めしません。</p> -</div> - -<h2 id="Learn_by_example" name="Learn_by_example">Learn by example</h2> - -<p>See our <a href="/ja/docs/MDN/Contribute/Howto/Write_interface_reference_documentation/Sample_interface_document" title="Project:Sample_interface_document">sample interface document</a> for a fictional interface that implements all the features of a complete interface reference document. This article can serve as a helpful template when documenting an interface.</p> - -<h2 id="Interface_reference_sections" name="Interface_reference_sections">Interface reference sections</h2> - -<p>Each interface reference article has at least an introduction section (which has no heading). The introduction should provide an overview of what the interface is used for.</p> - -<p>Following the table of contents, use the {{TemplateLink("IFSummary")}} macro to describe the location and status of the interface in the source tree.</p> - -<p>The parameters to the <code>IFSummary</code> macro are:</p> - -<dl> - <dt>Path of the IDL file defining the interface</dt> - <dd>This is used to create a link to the interface's IDL on MXR so the reader can refer to it if they wish.</dd> - <dt>Parent interface</dt> - <dd>This is the name of the interface upon which the interface being documented is based. This will be turned into a link to that interface in the interface reference and displayed.</dd> - <dt>scriptable/not scriptable</dt> - <dd>A string indicating whether the interface is scriptable or not. You must use either "scriptable" or "not scriptable" (these are, however, case insensitive). This will be turned into an appropriate indicator in the box, colored green for scriptable interfaces or red for non-scriptable ones. The indicator will also include a link to an article explaining what this means.</dd> - <dt>Last changed in what Gecko version</dt> - <dd>This is a string indicating the version of Gecko in which the interface was last changed. It should be a string in standard Gecko version format, such as "1.9" or "1.9.2" or even "1.9.1.6".</dd> - <dt>Summary{{Optional_Inline}}</dt> - <dd>A brief textual summary of what the interface does. Should be just a sentence or two. This is only optional for backward compatibility with old interface documents using the now deprecated InterfaceStatus macro (which now calls through to this one). You should <em>always</em> provide this.</dd> - <dt>Version introduced{{Optional_Inline}}</dt> - <dd>If you know the version of Gecko in which the interface was introduced, include that here. This will trigger the inclusion of a version timeline diagram showing the availability of the interface in relation to the history of Gecko.</dd> - <dt>Version deprecated{{Optional_Inline}}</dt> - <dd>If the interface is deprecated, include that here. This will be used when drawing the version timeline diagram.</dd> - <dt>Version obsoleted{{Optional_Inline}}</dt> - <dd>Similarly, if the interface is obsolete and no longer available at all, include the Gecko version in which that took effect.</dd> -</dl> - -<dl> - <dd>{{todo("Should describe the 'Implemented by' section here")}}</dd> -</dl> - -<p>All other sections are usually optional, but may be necessary depending on the interface. The optional sections are:</p> - -<h3 id="Method_overview" name="Method_overview">Method overview</h3> - -<p>The method overview is a table that simply lists all the method signatures for each method provided by the interface. The method's name should be a clickable link to the method description itself. Ideally, the methods should be listed in alphabetical order.</p> - -<p>If a method supports multiple types for a given input parameter, you can list them using the format [type1, type2, ..., typeN].</p> - -<h3 id="Attributes" name="Attributes">Attributes</h3> - -<p>The attributes section consists of a three column table. The first column contains the names of each attribute offered by the interface. The second column indicates the types of each attribute; these types should be links for non-simple types. The third column should describe the attribute, explaining its use and providing any details needed. Please list the attributes in alphabetical order; you can sort the table after the fact by right-clicking in it; there's a "Sort Table" option in the contextual menu.</p> - -<h3 id="Constants" name="Constants">定数</h3> - -<p>Each group of constants should have a sub-section containing a table describing the relevant constants. The table should have three columns: Constant (the names of the constants), Value (their values), and Description (descriptive text explaining the use of the constant).</p> - -<h3 id="Methods" name="Methods">Methods</h3> - -<p>The methods section provides detailed documentation for each method offered by the interface. Within the methods section should be a subsection for each method. Each method's subsection name should include closing parentheses (such as "parseAsync()" in the {{Interface("nsIFeedProcessor")}} interface reference.</p> - -<p>The methods should be listed in the same order in which they appear in the "Method overview" section.</p> - -<p>Each method's subsection should begin with a description of what the method does, followed by the actual method signature itself. Each parameter to the method should be on a separate line for clarity.</p> - -<p>After the method signature should come a "Parameters" subsection. In order to avoid cluttering the table of contents for the page, we use <code><h5>Parameters</h5></code> to define the Parameters subsection's heading.</p> - -<p>The parameters are then listed with descriptions of each parameter using definition list format. If there are no parameters, write the word 'None' under the Parameters heading.</p> - -<p>If the method has a return value, include a "Return value" subsection, using the form <code><h5>Return value</h5></code>. This subsection should simply explain the return value, its type, and if applicable its possible values.</p> - -<p>If the method can throw exceptions, a similar "Exceptions thrown" subsection should be included, containing a definition list style list for each possible exception.</p> - -<h3 id="Remarks" name="Remarks">Remarks</h3> - -<p>Any general comments that apply to the interface as a whole may be placed in the Remarks section.</p> - -<h3 id="See_also" name="See_also">See also</h3> - -<p>If links to other interfaces, or to any other documents, might be helpful to the reader, these should be listed in the "See also" section.</p> - -<h2 id="Categorizing_articles" name="Categorizing_articles">Categorizing articles</h2> - -<p>Each article that documents an interface needs to be added to the Interfaces category by adding the "Interfaces" tag. Likewise, the article should have any other appropriate tags.</p> - -<h2 id="Finding_articles_that_need_help" name="Finding_articles_that_need_help">Finding articles that need help</h2> - -<p>Look through <a href="/ja/docs/tag/Interfaces" title="tag/Interfaces">the interface list</a> and see if any are marked as being in the category <a href="/ja/docs/tag/NeedsMarkupWork" title="tag/NeedsMarkupWork">NeedsMarkupWork</a>. These are interfaces that we know need to be reformatted into our new layout. If you clean one up, remove the line that adds it to that category.</p> diff --git a/files/ja/orphaned/mdn/contribute/onboarding/index.html b/files/ja/orphaned/mdn/contribute/onboarding/index.html deleted file mode 100644 index f6f0377833..0000000000 --- a/files/ja/orphaned/mdn/contribute/onboarding/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 'MDN web docs: 搭乗ガイド' -slug: orphaned/MDN/Contribute/Onboarding -tags: - - MDN Meta - - ガイド - - ドキュメント - - 初心者 - - 書き方 -translation_of: MDN/Contribute/Onboarding -original_slug: MDN/Contribute/Onboarding ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/ja/docs/MDN")}}</div> - -<p><span class="seoSummary">この文書では、 MDN でフルタイムで作業するプロのライターが、始めるにあたって知っておくべきトピックについて説明します。気軽な態度で MDN に協力する場合は、気にする必要はありません。</span>いきなり<a href="/ja/docs/MDN/Getting_started">始める</a>ことができます。また、興味があるのであれば暇な時に読んでいただいても構いません。</p> - -<h2 id="What_is_MDN_web_docs" name="What_is_MDN_web_docs">MDN web docs とは</h2> - -<ul> - <li><a href="https://wiki.mozilla.org/MDN/">Mission and vision</a> (英語)</li> - <li><a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team">Mozilla's MDN staff team</a> (英語)</li> -</ul> - -<h2 id="Guidelines" name="Guidelines">ガイドライン</h2> - -<p>以下は、プロのライターが一般的に新しい環境で働き始める前に知りたいと思うことです。</p> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Guidelines/Does_this_belong_on_MDN">MDN に含まれるものは何か</a></li> - <li><a href="/ja/docs/MDN/Contribute/Guidelines/Editorial">編集方針</a></li> - <li><a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide">執筆スタイルガイド</a></li> - <li><a href="/ja/docs/MDN/Contribute/Guidelines">その他のガイドライン</a></li> -</ul> - -<h2 id="Basic_usage_of_the_MDN_wiki" name="Basic_usage_of_the_MDN_wiki">MDN wiki の基本的な使い方</h2> - -<p>以下の記事は、 MDN でコンテンツの作成を始めるのに必要な基本的な情報を説明しています。</p> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Howto/Create_an_MDN_account">アカウントの作成</a> — 連携組織の従業員の場合は、従業員であることが分かるメールアドレスを使用して登録することを推奨します。</li> - <li><a href="/ja/docs/MDN/Contribute/Howto/Write_an_API_reference">API リファレンスの書き方</a></li> - <li><a href="/ja/docs/MDN/Contribute/Editor">MDN エディター UI の利用</a></li> - <li><a href="/ja/docs/MDN/Contribute/Editor/Source_mode">ソースモードの使い方</a></li> - <li><a href="/ja/docs/MDN/Contribute/Structures/Page_types">ページの種類</a></li> - <li><a href="/ja/docs/MDN/Contribute/Howto/Tag">ページのタグ付け方法</a></li> - <li><a href="/ja/docs/MDN/Contribute/Structures/Macros">マクロの使用</a></li> - <li><a href="/ja/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">よく使われるマクロ</a></li> - <li><a href="/ja/docs/MDN/Contribute/Troubleshooting">トラブルシューティング</a></li> -</ul> - -<h2 id="Advanced_usage" name="Advanced_usage">高度な使い方</h2> - -<p>以下の記事では、 MDN wiki の機能のうち、すぐには必要ないかもしれませんが、最終的には遭遇する可能性のある機能について説明しています。</p> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Structures/Code_examples">コード例を追加する方法</a></li> - <li><a href="/ja/docs/MDN/Contribute/Structures">文書の構造</a></li> - <li>ブラウザーの互換性情報: <a href="/ja/docs/MDN/Contribute/Structures/Compatibility_tables">Github ベースの JSON</a> またはef="/ja/docs/MDN/Contribute/Structures/Old_compatibility_tables">旧形式のページ内の表</li> - <li><a href="/ja/docs/MDN/Contribute/Editor/Images">画像の添付</a>と<a href="/ja/docs/MDN/Contribute/Editor/Basics/Attachments">添付ウィジェット</a>の使用 — SVG 画像を添付するには特殊な権限が必要です。詳しくは Mozilla の MDN スタッフメンバーに問い合わせてください。</li> - <li><a href="/ja/docs/MDN/Contribute/Structures/Quicklinks">QuickLinks によるサイドバー</a></li> - <li><a href="/ja/docs/MDN/Contribute/Tools/Page_moving">ページの移動</a></li> - <li><a href="/ja/docs/MDN/Contribute/Localize/Translating_pages">ページの翻訳</a></li> - <li><a href="/ja/docs/MDN/Contribute/Tools/Add-ons_and_plug-ins">MDN に関するアドオン</a></li> -</ul> - -<h2 id="Processes_and_communication" name="Processes_and_communication">プロセスとコミュニケーション</h2> - -<p>この節では、 MDN コミュニティで使用されているチャンネルや、 Mozilla MDN スタッフチームで使用されているプロセスについて解説します。</p> - -<ul> - <li><a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes">Mozilla MDN staff team processes</a></li> - <li><a href="https://wiki.mozilla.org/MDN/Meetings">Public meetings</a></li> - <li><a href="/ja/docs/MDN/Community/Conversations">MDN に関するコミュニケーションチャンネル</a> - <ul> - <li><a href="https://discourse.mozilla-community.org/c/mdn">MDN ディスカッションフォーラム</a>に参加し、自己紹介をして、どのような作業をしようとしているのかを伝えてください。</li> - </ul> - </li> - <li>Kuma (MDN wiki プラットフォーム) への改良提案の方法: - <ol> - <li><a href="https://bugzilla.mozilla.org">bugzilla.mozilla.org</a> に、 Github ログインを使用してアカウントを作成してください。</li> - <li><a href="https://bugzilla.mozilla.org/form.mdn">MDN feedback form</a> を使用して、バグレポートを解こうしたり、機能や機能改善のリクエストを行ってください。</li> - <li>(任意) 次の <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Dev Triage meeting</a> に参加してください。毎週 18:30 UTC です。</li> - </ol> - </li> - <li><a href="/ja/docs/MDN/Community/Working_in_community">コミュニティ内の作業</a></li> - <li><a href="/ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Find_info_in_specifications">仕様書内の情報の探し方</a></li> -</ul> - -<h2 id="MDN_web_docs_topic_areas" name="MDN_web_docs_topic_areas">MDN web docs トピックエリア</h2> - -<ul> - <li><a href="/ja/docs/MDN/Doc_status/Overview">トピック別の翻訳状況の概要</a></li> - <li>HTML の<a href="/ja/docs/MDN/Doc_status/HTML">翻訳状況</a></li> - <li>CSS の<a href="/ja/docs/MDN/Doc_status/CSS">翻訳状況</a></li> - <li>JavaScript/ECMAScript の<a href="/ja/docs/MDN/Doc_status/JavaScript">翻訳状況</a></li> - <li>API の<a href="/ja/docs/MDN/Doc_status/API">翻訳状況</a></li> - <li>SVG の<a href="/ja/docs/MDN/Doc_status/SVG">翻訳状況</a></li> -</ul> diff --git a/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html b/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html deleted file mode 100644 index ee90e6c75c..0000000000 --- a/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: ブラウザー特有の情報源 -slug: orphaned/MDN/Contribute/Processes/Browser_information_resources -tags: - - Guide - - MDN Meta - - Processes - - ガイド - - プロセス -translation_of: MDN/Contribute/Processes/Browser_information_resources -original_slug: MDN/Contribute/Processes/Browser_information_resources ---- -<p>{{MDNSidebar}}</p> - -<p>各ブラウザーの開発元では、ソフトウェアの開発、課題の追跡、議論の記録のために、様々なツールや手法を用いています。<span class="seoSummary">この記事では、 MDN のドキュメントを書いたり、互換性に関するデータを MDN に提供したりする際に役立つ、主要なブラウザーごとのツールや情報源を列挙しています。</span></p> - -<h2 id="Chrome">Chrome</h2> - -<p><em>コンテンツ作成中...</em></p> - -<h2 id="Edge">Edge</h2> - -<p><em>コンテンツ作成中...</em></p> - -<h2 id="Firefox">Firefox</h2> - -<p>Mozilla は常にすべての詳細を簡単に見つけられるようにしているわけではありませんが、 Firefox プロジェクトに関する基本的なことはすべてオープンな状態で行われているので、すべてのものが公開されています。 Firefox のすべてのリリースのソースコードには、昔、 Netscape から最初にフォークされたときまでさかのぼって完全にアクセスすることができます。 Mozilla のバグデータベースにもアクセスすることができます。メーリングリストや Mozilla の Discourse サーバー、 IRC チャンネルでの議論にアクセスできます。ソフトウェアの更新が作成され、議論され、最終的にソースリポジトリにマージされたときに、レビューノートの交換にアクセスすることができます。</p> - -<p>重要なのは、必要な情報をすべての情報から正確に切り分けることです。目の前に広がっているのは、 Mozillian たちが皮肉を込めて「Mozilla の火の海」と呼んでいる、広大なものです。利用可能な様々なリソースのそれぞれから何を学べるのかを説明するのではなく、学ぶことができるようになるために必要なものを見つけ、求める答えを見つけることができる利用可能なリソースを通る道を特定してみましょう。</p> - -<h3 id="Source_code" name="Source_code">ソースコード</h3> - -<p><a href="/ja/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Mercurial</a> を介してソースコードにアクセスする通常の方法に加えて、ローカルコピーを手元に置かずにソースコード内の情報を検索する方法があります。</p> - -<h4 id="DXR">DXR</h4> - -<p>ソースコードに素早くアクセスする最も簡単な方法は <a href="https://dxr.mozilla.org">DXR</a> を使うことで、これは Mozilla のソースツリー全体を閲覧して強力な検索を行うことができます。他のツリーに切り替えるオプションもあるので、過去のブランチにさかのぼって見ることができ、たとえば <code>mozilla1.9.2</code> は Firefox 3.6 に対応します。また、 Firefox ESR の各リリースのコードを見ることもできます。</p> - -<p>検索は特殊な演算子に対応しています。例えば、"<code>connect</code>" という単語を検索することはできますが、 "<code>connect file:.webidl</code>" を使うと、 WebIDL ファイルのみを考慮して検索することができます。</p> - -<h4 id="Unified_Firefox_repository" name="Unified_Firefox_repository">Firefox の統合リポジトリ</h4> - -<p>Firefox のソースコードにアクセスするもう一つの便利な方法が Mozilla 統合リポジトリ (<a href="https://hg.mozilla.org/mozilla-unified/"><code>mozilla-unified</code> リポジトリ</a>) です。このリポジトリには、Firefox 3 に対応する Gecko 1.9 までの Firefox のソース履歴があります。興味のある<a href="https://hg.mozilla.org/mozilla-unified/tags">バージョンに対応する Mercurial タグ</a>を見つけることで、特定のバージョンの Firefox のソースコードを見ることができます。 DXR では、いくつかの非常に古いバージョンの Firefox を見ることができますが、ほとんどのバージョンを見る方法は提供されていないので、これは貴重なものです。このリポジトリではすべてのリリースを見ることができます。</p> - -<p>タグの命名システムは時間の経過とともにあちこちで変更されているので、探しているものを見つけるにはちょっとした探索が必要になります。原則として、次のようなタグを探してください。</p> - -<ul> - <li><code>FIREFOX_<em>n</em>_release</code></li> - <li><code>FIREFOX_RELEASE_<em>n</em>_END</code></li> - <li><code>FIREFOX_RELEASE_<em>n</em>_BASE</code></li> - <li><code>FIREFOX_RELEASE_<em>n</em></code></li> - <li><code>RELEASE_BASE_<em>n</em></code></li> - <li><code>RELEASE_BASE_<em>date</em></code></li> -</ul> - -<p>特定のリリースを確認したら、通常のツールを使ってコードを閲覧したり検索したり、 changelog と pushlog オプションを使って、リリースにどのような変更が加えられたかを確認することができます。</p> - -<h4 id="Searchfox">Searchfox</h4> - -<p><a href="https://searchfox.org/">Searchfox</a> のウェブサイトでは、Firefox のソースコードを検索するための別の方法を提供しています。 Searchfox は Firefox のリポジトリをインデックス化するツールです (最も便利なのは、メインの <a href="https://searchfox.org/mozilla-central/source">mozilla-central ソースコード</a> と、興味深いことに <a href="https://searchfox.org/whatwg-html/source">WHATWG HTML 仕様書</a>もインデックス化されていることです)。</p> - -<h2 id="Opera">Opera</h2> - -<p><em>コンテンツ作成中...</em></p> - -<h2 id="Safari">Safari</h2> - -<p><em>コンテンツ作成中...</em></p> diff --git a/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html b/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html deleted file mode 100644 index af7faf63f1..0000000000 --- a/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 文書作成のためのチーム間協力作戦 -slug: orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics -tags: - - Collaborating - - Guide - - MDN Meta - - Processes -translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics -original_slug: MDN/Contribute/Processes/Cross-team_collaboration_tactics ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">私たちが MDN で学んだことのひとつは、開発チームと文書作成チームが共にあるプロジェクト、API、またはある技術について密接に協力して文書を作成した場合、その文書の品質が素晴らしいということです。このガイドは開発者と文書作成者が手と手を取って協力するための戦略を示唆するものです。</span></p> - -<div class="note"> -<p>この記事は今も作成中の、生きた文書です。もしもあなたの関わる開発者/文書作成者の協力の過程で別の方法を見出したなら、是非ここにそのアイディアを追加してください!</p> -</div> - -<h2 id="つながり始める">つながり始める</h2> - -<p>理想的には、新しいテクノロジーやプロジェクトが開発され始める時に、開発チームはライターチームに対し文書化の必要のある何かが出てくると知らせるでしょう。ときどきそうはならず、MDNチームはBugzillaを監視して文書化が必要な成果がないのか見ています。しかし完全な世界では、直接的な方法で進歩していきます。</p> - -<p>MDN チームに新プロジェクトを知らせるための最良な方法は<a href="https://bugzilla.mozilla.org/form.doc">文書化リクエストのバグを報告する</a>ことです。 質問の問い合わせ先のリストがあると助かります! プロジェクトに関連するバグのリンクが入っていてもとても助かります。</p> - -<h2 id="情報を共有する">情報を共有する</h2> - -<p>情報共有の便利な方法がいくつかあります。このようなものです。</p> - -<h3 id="バグ">バグ</h3> - -<p>単に文書化チームに文書化に影響するバグでフラグを立てることですごく助かります。dev-doc-needed キーワードとコメントタグを適切に使すうのは長くかかることもあります。詳細は<a href="/ja/docs/Developer_Guide/Getting_documentation_updated">文書を最新化する</a>を見てください。</p> - -<h3 id="ミーティング">ミーティング</h3> - -<p>開発チームは通常ミーティングをします。それが可能で役立つときには (役立つ場面は多いです)、MDN チームはミーティングに誰かを出席させようとします。何が起きているか、スケジュールはどうか、などを知るのは良い方法です。</p> - -<p>加えて、ライターは大きな文書化エリア(例えば Web API 文書)で作業し、その文書化の状況のためだけにミーティングすることもしばしばあります。ライターは開発チーム代表がこうしたミーティングに出るのを<strong>好感します</strong>; 関係する全員にとって極めて有益です。</p> - -<p>典型的にこれは短いチェックインのミーティングで、次のようなアジェンダを伴います:</p> - -<ol> - <li>貢献するライターの短い状況更新。</li> - <li>開発チームからライターへの質問/更新: 特定文書の状況の質問や、特に急ぐ特定コンテンツの情報や、既存コンテンツの問題への注意などを含みます。</li> - <li>ライターから開発チームへの質問/更新: 特定のバグがもうすぐ解決しそうか否かとか、特定の文書のレビューが可能になったりするかとか、ある API の質問に答えられるエンジニアがいるのかどうかとか、ライターがそんな種類の質問をできるチャンスです。</li> -</ol> - -<p><a href="https://docs.google.com/document/d/1N-1dYkev064CDdWFh-Ho7bDWsaFShKY3oOwVD-6GIZ0/edit#heading=h.m6id8awidm4o">Developer Content Coordination Meeting</a> は毎週火曜日の太平洋時間 9 AM に、Vidyo テレビ会議システムの <a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">"mdn" チャンネル</a> (音声のみもあり)で開催されます。このミーティングでは、MDNライターコミュニティ、開発関係チーム、API ドキュメントチーム、その他が集まって作業がどこまで進んだかや、何が出てきたかや、開発者と共有すべき最重要事項は何かといった情報交換を行います。これにより、全員がプロモーションの優先度やトピックの文書化のための同じページに乗ることができて、開発者にとって役立つ方法で知らせることのできるフィートバックを返すことにもなります。全員がそこから多くを得て、通常は30分か、少ないかくらいの時間で終わります。</p> - -<h3 id="集中作業週間">集中作業週間</h3> - -<p>開発チームに集中作業週間やミートアップがあれば、関連ドキュメントのライターの招待を真剣に考えるべきです。これは多くの利益があり、次のようなものです:</p> - -<ul> - <li>起こっていることを初めて扱うライターを派遣することによって、コミュニケーションが向上する</li> - <li>ライターと開発者がお互いを良く知ることによって、関係が改善する</li> - <li>ライターが正しい話し相手を見つけるのに便利なアクセスが得られる</li> - <li>質問や問題解決のための1対1の会話をする、時別な機会が得られる</li> -</ul> - -<p>集中作業週間があって、あなたのトピック領域の担当のライターがいるかどうかわからない場合、<a href="mailto:jperrier@mozilla.com?subject=Writer%20for%20work%20week">ドキュメントチームのリーダーにeメールしてください</a>(Jean-Yves Perrier まで)、そして彼が誰か派遣できるか確認します。行ける人を探します (あるいは、もっと良い場合、あなたのプロジェクト担当のライターのことも)! ただ覚えてほしいのは、しかしライティングチームは小さく、集中作業週間に参加できる人がちょっとした注意で見つかることはトリッキーです。</p> - -<h3 id="文書化の状態を表示するページ">文書化の状態を表示するページ</h3> - -<p>MDN の大き目の文書化プロジェクトでは<a href="/ja/docs/Project:MDN/Contributing/Doc_status_page">文書化ステータスページ</a>を使って、作業を完了させるのに何をしないといけないか、また何がすでに完了しているか、追跡しています。このページは達成する必要があるタスクと、各タスクのステータスとを一覧にしています。</p> diff --git a/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html b/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html deleted file mode 100644 index 5f0fbc2497..0000000000 --- a/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 上位権限の申請 -slug: orphaned/MDN/Contribute/Processes/Requesting_elevated_privileges -tags: - - Guide - - MDN Meta - - Processes - - ガイド - - 手続 -translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges -original_slug: MDN/Contribute/Processes/Requesting_elevated_privileges ---- -<div>{{MDNSidebar}}</div> - -<p>MDN の一部のツールや操作では、通常のユーザーでは利用できない昇格したアクセス権限が必要です。</p> - -<p>ツール使用の権限が欲しい、または必要な場合には以下の手順に従ってください。</p> - -<ol> - <li><a href="mailto:mdn-admins@mozilla.org">mdn-admins@mozilla.org</a> へ (英語で) メールを書き、何が必要かと、その理由をも説明してください。 <strong>MDN アカウント名を書いてください。</strong></li> - <li>権限を求めるそれぞれのツールについて、なぜあなたがその権限を得る条件を満たしているのかを説明していることを確認してください。分からない点は、そのツールの「<a href="/en-US/docs/MDN/Contribute/Tools/Page_moving#Conditions_for_gaining_this_privilege">この権限を得る条件</a>」の節を参照してください。</li> - <li>申請が承認されると、 <a href="/ja/docs/MDN/Community/Roles/Admins">MDN 管理者</a>の一人がそのツールに必要な権限を付与します。</li> -</ol> - -<p>誤った使用、濫用、重大な問題 (ツールに危険なバグが新たに発見された等) があった場合は、管理者がツールへのアクセスを停止することがあります。</p> diff --git a/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html b/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html deleted file mode 100644 index 73fb536750..0000000000 --- a/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: MDN に関連するアドオンとプラグイン -slug: orphaned/MDN/Tools/Add-ons_and_plug-ins -tags: - - Landing - - MDN Meta - - Site-wide - - Tools -translation_of: MDN/Tools/Add-ons_and_plug-ins -original_slug: MDN/Tools/Add-ons_and_plug-ins ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">MDN コミュニティのメンバーは多くの楽しく、便利なプロジェクトを立ち上げています。 MDN の利用や、内容への貢献を簡単にする、ツール、アドオン、ユーテリティを作成するものがあります。</span></p> - -<p>こうした数々のプロジェクトのリンクがここにあります。これらの多くは完成まで手助けも要るため、あなたが助けるものを探しているコーダーである場合、ここに機会が見つかるかもしれません!</p> - -<div class="twocolumns"> -<dl> - <dt><a href="https://github.com/mdn/doc-linter-webextension">MDN doc tests add-on</a></dt> - <dd>MDNの編集中に表示されるサイドバーを作成する Firefox アドオンで、コンテンツのテストと妥当性チェックを提供します。これは作業途中なので、より多くのテストを歓迎します!</dd> - <dt><a href="https://github.com/npny/mdn-automatic-translation">MDN automatic translation</a></dt> - <dd>{{Glossary("Regular_expression", "正規表現")}}ベースのルールを使って、自動的によくある用語を翻訳された形に置き換える。</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/mdn-search/">MDN Search</a></dt> - <dd>URLバーで <code>"mdn <searchterm>"</code> とタイプすることですばやくMDN のリファレンス素材を検索することができる <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a>。 組み込みのMDN 検索をベースにしているが、より良い結果を出すようにロジックが追加されている。JavaScript と CSS リファレンスを探すのに最適化されている。</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/mdn-interface-documentation-ge/">MDN Interface Documentation Generator</a></dt> - <dd>この Firefox アドオンは、XPCOM インターフェイス用に、適切にフォーマットされたスケルトン生成に役立ちます。しばらく更新されてないので、バージョン互換性の情報を正しく表示しませんが、いろいろと便利です。いくつか更新されたら、またかけがえないものに戻るでしょう。</dd> - <dt> </dt> - <dt><a href="https://github.com/a2sheppy/mdn-save-with-comment">Save with comment hotkey addon</a></dt> - <dd>MDNエディタのリビジョンコメント欄にすぐにスクロールさせる Firefox アドオン。つまりこれによって、あなたが編集したことに対する、小さな情報を簡単に追加できます。</dd> - <dt><a href="https://github.com/Elchi3/sublime-mdn">Sublime Text MDN search plug-in</a></dt> - <dd>コーディング中にドキュメントを得るのに、MDNをすぐに検索できる Sublime Text のプラグイン。</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/lazarus-form-recovery/?src=mdn">Lazarus</a></dt> - <dd>定期的にフォームデータをlocal storageに自動保存する Firefox 拡張機能で、すべてのデータをクラッシュやエラーから保護します。これは MDN で作業する時に便利で、なぜなら MDN エディターのコンテンツも保存し、成果を保存する前に何か失敗した場合に戻すことができるためです。</dd> -</dl> -</div> diff --git a/files/ja/orphaned/mdn/tools/feeds/index.html b/files/ja/orphaned/mdn/tools/feeds/index.html deleted file mode 100644 index 33d383c70f..0000000000 --- a/files/ja/orphaned/mdn/tools/feeds/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: MDN の Feeds API について -slug: orphaned/MDN/Tools/Feeds -tags: - - Kuma - - MDN Meta - - Site-wide - - ツール - - リファレンス -translation_of: MDN/Tools/Feeds -original_slug: MDN/Tools/Feeds ---- -<div>{{MDNSidebar}}</div><p>MDN の wiki では、サイトの更新内容を追跡する為にフィード API が提供されています。この API はまだ作成中であるかもしれませんが、この情報は役立つかもしれません。</p> - -<h2 id="Accessing_the_feeds" name="Accessing_the_feeds">フィードへのアクセス</h2> - -<p>フィードは次の様な形式の ベース URL から始まります。</p> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/<strong><locale></strong>/docs/feeds/<strong><format></strong>/</pre> - -<p>ベース URL 内の各プレースホルダーはそれぞれ次の意味を持ちます。</p> - -<ul> - <li><code><locale></code> は、標準のロケール文字列の内の一つとします。英語版の内容を取得するのであれば "en-US"、日本語なら "ja" を指定します。URL に <code>?all_locales</code> オプションを追加しない限り、そのロケールの記事のエントリを含むようにフィルターリングされます。</li> - <li><code><format></code> は、フィードの形式です。「 <code>rss</code> 」、「 <code>atom</code> 」、「 <code>json</code> 」の何れかを選択可能です。</li> -</ul> - -<p><code>json</code> 形式を使用する場合、オプションとして <a href="http://en.wikipedia.org/wiki/JSONP">the JSONP convention</a> で JavaScript としてデータを読み込むための <code>?callback=<callback name></code> クエリパラメーターが指定可能です。</p> - -<h2 id="Available_Feeds" name="Available_Feeds">購読可能フィード</h2> - -<dl> - <dt><code>all</code></dt> - <dd>最近の記事の変更すべてを編集日付順で。新規に作成された記事も含む。すべての変更は各記事のフィードのエントリーに結ばれています。例えば:<a href="https://developer.mozilla.org/ja/docs/feeds/rss/all"> https://developer.mozilla.org/ja/docs/feeds/rss/all</a></dd> - <dt><code>revisions</code></dt> - <dd>特定の記事のリビジョンを編集日付順で。新規作成も含む。各リビジョンはフィードの別々のエントリーを持ちます。例えば: <a href="https://developer.mozilla.org/ja/docs/feeds/atom/revisions">https://developer.mozilla.org/ja/docs/feeds/atom/revisions</a></dd> - <dt><code>tag/<em><tagname></em></code></dt> - <dd>フィードの指定タグの付いた記事の更新情報のみを編集日付順で取得。例えば:<a href="https://developer.mozilla.org/ja/docs/feeds/json/tag/CSS?callback=loadFeed"> https://developer.mozilla.org/ja/docs/feeds/json/tag/CSS?callback=loadFeed</a></dd> - <dt><code>files</code></dt> - <dd>最近のファイルのアップロードまたは変更。例えば:<a href="https://developer.mozilla.org/ja/docs/feeds/atom/files"> https://developer.mozilla.org/ja/docs/feeds/atom/files</a></dd> - <dt><code>l10n-updates</code></dt> - <dd>翻訳ページの最終更新時以降に翻訳の元となる言語の記事が変更された記事のリスト (つまり、他の言語から翻訳された記事で、元の言語の記事が変更された場合)。例えば:<a href="https://developer.mozilla.org/fr/docs/feeds/atom/l10n-updates"> https://developer.mozilla.org/fr/docs/feeds/atom/l10n-updates</a></dd> - <dt><code>needs-review[/<em><reviewtype></em>]</code></dt> - <dd>要レビューとされた記事のリスト。<code>technical</code> 、<code>editorial</code> 、<code>kumascript</code> の何れかに絞って取得する事も可能。 - <ul> - <li><a href="https://developer.mozilla.org/ja/docs/feeds/json/needs-review">https://developer.mozilla.org/ja/docs/feeds/json/needs-review</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/feeds/rss/needs-review/technical">https://developer.mozilla.org/fr/docs/feeds/rss/needs-review/technical</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/feeds/atom/needs-review/editorial">https://developer.mozilla.org/ja/docs/feeds/atom/needs-review/editorial</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/feeds/atom/needs-review/kumascript">https://developer.mozilla.org/ja/docs/feeds/atom/needs-review/kumascrip</a></li> - </ul> - </dd> -</dl> - -<p> </p> diff --git a/files/ja/orphaned/mdn/tools/page_deletion/index.html b/files/ja/orphaned/mdn/tools/page_deletion/index.html deleted file mode 100644 index d1af0ac170..0000000000 --- a/files/ja/orphaned/mdn/tools/page_deletion/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: ページの削除 -slug: orphaned/MDN/Tools/Page_deletion -tags: - - Guide - - MDN - - MDN Project - - Page-level -translation_of: MDN/Tools/Page_deletion -original_slug: MDN/Tools/Page_deletion ---- -<div>{{MDNSidebar}}</div> - -<p>MDN からページを完全に削除することは滅多にありません。もっともよくある理由は、ページがスパムによって作成された、または間違って作成された場合です。かつては有用であったページが時代遅れの技術の記述となった場合には、削除するのではなく MDN の /Archive セクションに移動することでアーカイブされます。</p> - -<h2 id="Requesting_page_deletion" name="Requesting_page_deletion">ページの削除の申請</h2> - -<p><span class="seoSummary">MDN の<a href="/ja/docs/MDN/Community/Roles/Admins">管理者</a>だけがページを削除することができます。管理者以外のユーザーは、ページの削除をリクエストすることができます。</span></p> - -<p>ページを削除するには次のようにしてください。</p> - -<ol> - <li><strong>ページコンテンツの削除や変更はしないでください。</strong>ページ削除時にはその時点のコンテンツを記録しておきます。</li> - <li>ページに "Junk" タグを追加してください。他のタグは削除しないでください。</li> - <li>ページの削除に緊急を要する場合 (例えばコンテンツが不適切、攻撃的、あるいは技術的に危険なものである場合など) は、 <a href="mailto:mdn-admins@mozilla.org" title="Notify an administrator">MDN 管理者にお知らせください</a>。</li> -</ol> - -<p>管理者は削除が適切かどうか判断した上で、随時ページを削除していきます。</p> - -<h2 id="How_to_delete_a_page" name="How_to_delete_a_page">ページを削除するには</h2> - -<p>ページを削除すると決めた管理者は、以下のようにしてください。</p> - -<ol> - <li>削除したいページの右上隅付近にある<strong>詳細</strong>メニューを開いてください。</li> - <li><strong>このページを削除</strong>をクリックしてください。「ページの削除」画面が次のように現れます。<br> - <br> - 削除しようと選択したページのタイトルと、関連する一部のメタデータが表示されます。</li> - <li><strong>理由</strong>欄に "Spam" や "Junk" や "Created by mistake" など、適切な理由を入力してください。</li> - <li><strong>削除</strong>ボタンをクリックしてください。「文書が削除されました」画面が表示され、このページへのリンクがあれば表示されます。 (権限のないユーザーには、<strong>この文書を復元</strong>ボタンが表示されません。)</li> -</ol> - -<h2 id="Restricted_access" name="Restricted_access">アクセス制限</h2> - -<p>ページ削除ツールには文書の構造を破壊する可能性が存在するため、アクセスには上位の権限を必要とします。</p> - -<h3 id="Roles_that_have_this_permission" name="Roles_that_have_this_permission">この権限を持つロール</h3> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Admins"><strong>Admins</strong></a></li> -</ul> - -<h3 id="Conditions_for_gaining_this_permission" name="Conditions_for_gaining_this_permission">この権限を得るための条件</h3> - -<p>このツールにアクセスする権限を得るための条件は以下のとおりです。</p> - -<ul> - <li><strong>日常的に</strong>この権限を必要としていること (例えば、頻繁にスパムや間違いのページに対応する必要がある場合)。たまにしかページを削除する必要がないのであれば、管理者に依頼してください。</li> - <li>日常的に MDN を編集しており、建設的な協力の記録がある場合。</li> -</ul> - -<p>この権限を取得する手続については、<a href="/ja/docs/MDN/Contribute/Processes/Requesting_elevated_privileges">上位権限の申請</a>を参照してください。</p> diff --git a/files/ja/orphaned/mdn/tools/page_moving/index.html b/files/ja/orphaned/mdn/tools/page_moving/index.html deleted file mode 100644 index 15c5194a7e..0000000000 --- a/files/ja/orphaned/mdn/tools/page_moving/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: ページの移動 -slug: orphaned/MDN/Tools/Page_moving -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_moving -original_slug: MDN/Tools/Page_moving ---- -<div>{{MDNSidebar}}</div> - -<p>なぜページ (またはページのツリー) を移動するのでしょう。サイトの階層の適切な場所ではなく、サイトの最上位に作成してしまったのかもしれません。あるいは既存の文書を整頓しているのかもしれませんね。古い内容をアーカイブする必要があるのかもしれません。このような理由で MDN はページを移動する機能を持っており、1つのページを移動するだけではなく、その下位のページをまとめて移動することもできます。</p> - -<p><span class="seoSummary"><strong>ページ移動ツール</strong>により、編集者は MDN ツリー内の文書およびそのすべてのサブページの URL またはスラッグを変更することができます。ページを整頓したり、間違った位置にあるページを修正したりするときに、とても手軽で強力なツールです。</span></p> - -<div class="note"> -<p><strong>メモ:</strong> 特別な権限を持つユーザーだけが MDN でページを移動することができます。<strong>この記事を移動</strong>という選択肢が<strong>詳細</strong> メニューに表示されない場合、使用するのに権限が必要です。この権限を得る方法については、下にある<a href="#Restricted_access">アクセス制限</a> を見てください。</p> -</div> - -<h2 id="How_to_move_pages" name="How_to_move_pages">ページを移動するには</h2> - -<p>ページまたはページのツリーを移動するには、以下のようにします。</p> - -<ol> - <li>MDN で移動したいページの右上の角にある<strong>詳細</strong> メニューを開いてください。<br> - <img alt="" src="https://mdn.mozillademos.org/files/14565/MDN_right_menu.png" style="height: 208px; width: 200px;"></li> - <li><strong>この記事を移動</strong> をクリックしてください。下のような「ページの移動」画面が表示されます。<br> - <img alt="" src="https://mdn.mozillademos.org/files/14567/MDN_page_move.png" style="height: 437px; width: 375px;"><br> - 一番上には、すべて (アルファベットが) 大文字で、移動しようとしているページのタイトルが表示され、続いてページを移動するためのフォームを正しく記入する方法についての注意書きの一覧が表示されます。ページタイトルは編集可能となっていますが、ここで変更しても反映されません。この問題の状態については、 {{bug(828533)}} を参照してください。</li> - <li><strong>新しい URL スラグ</strong>の隣の枠に、ページの移動先としたいスラグを入力してください。この行の上にあるのは <strong>URL のプレビュー</strong>で、ここに、<strong>新しい URL スラグ</strong>の値を反映した、ページ移動後のフルパスの URL が表示されます。</li> - <li>この移動操作によって影響を受ける全てのサブページの一覧が表示されます。<strong>N ページを移動</strong>ボタンと<strong>キャンセル</strong>ボタンの下にあります。サブページがなければ、その旨が表示されます。この一覧は、ページの移動が予測しなかった副作用を与えるのか判断するのに役立つかもしれません。閲覧の多いコンテンツの移動や、一度に大量のページを移動するのには注意を払ってください。</li> - <li>すべてが望み通り設定されていると分かったら、 <strong>N ページを移動する</strong>ボタンをクリックします。非同期のバックグラウンドプロセスが始まり、各ページを移動して<strong>かつ</strong>元のページにリダイレクトを設置します。ですので、古い URL もリダイレクトによって動作し続けます。移動のプロセスが完了したらメールが届きます。そのメールには、ページの新しい場所にクリックして移動できるリンクが含まれています。</li> -</ol> - -<h2 id="Restricted_access" name="Restricted_access">アクセス制限</h2> - -<p>内容をおかしな場所に移動することで害となる明らかな可能性が存在するため、このツールは誰もが使えるようにはなっていません。</p> - -<h3 id="Roles_that_have_this_permission" name="Roles_that_have_this_permission">この権限を持つロール</h3> - -<ul> - <li><a href="/ja/docs/MDN/Contribute/Admins"><strong>Admins</strong></a></li> - <li><a href="/ja/docs/MDN/Contribute/Topic_driver_role"><strong>Topic drivers</strong></a></li> - <li><a href="/ja/docs/MDN/Contribute/Localization_driver_role"><strong>Localization drivers</strong></a></li> -</ul> - -<h3 id="Conditions_for_gaining_this_permission" name="Conditions_for_gaining_this_permission">この権限を得るための条件</h3> - -<p>このツールにアクセスする権限を得るための条件は以下のとおりです。</p> - -<ul> - <li><strong>日常的に</strong>この権限を必要としていること (例えば、頻繁にページの移動を行う必要がある、あるトピックについて大きなリファクタリングを行っているなど)。たまにしかページを移動する必要がないのであれば、管理者に依頼してください。</li> - <li>日常的に MDN を編集していて、 <a href="/ja/docs/MDN/Contribute/Content/Style_guide#Page_titles">ページの命名</a> 規則に通じていること。</li> -</ul> - -<p>この権限を取得する手続については、<a href="/ja/docs/MDN/Contribute/Processes/Requesting_elevated_privileges">上位権限の申請</a>を参照してください。</p> diff --git a/files/ja/orphaned/mdn/tools/page_regeneration/index.html b/files/ja/orphaned/mdn/tools/page_regeneration/index.html deleted file mode 100644 index 4f2e9f5cdd..0000000000 --- a/files/ja/orphaned/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: MDN 上のページのレンダリング -slug: orphaned/MDN/Tools/Page_regeneration -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_regeneration -original_slug: MDN/Tools/Page_regeneration ---- -<div>{{MDNSidebar}}</div> - -<p>MDN サイトは性能上の理由でページをキャッシュしています。 この結果、ページに対する保存済みの変更が、次回リロード時に反映されない場合があります。常にではないがしばしば、ページがの更新が処理中であることを示すバナーが表示されます。ブラウザーで強制リフレッシュしてサーバーからページをリロードできますが、サーバー上の更新が完了しないと効果がないことがあります。</p> - -<p>いくつかのページ (特に Landing ページ【訳注: 階層下のページの一覧を列挙するページ】) では、マクロを使って自動的に内容の生成と更新を行っています。Landing ページのためにこれを行うことで、作者が手動で更新しなくても、新しい記事が自動的にページに載ることが保証されます。これは長期間の貢献者には便利であり、新参者にはサイトの階層のどこにリンクすべきか分からずに成果を見失うことを避けるのに役立ちます。</p> - -<p>またあるページを別のページにトランスクルージョンする(例えば {{TemplateLink("Page")}} マクロを使って)のにも使います。</p> - -<p><span class="seoSummary">MDN は性能上の理由でレンダリングしたコンテンツをキャッシュしているため、元の素材（たとえばマクロの出力や引用されるページ）に加わった変更は自動的にはページに反映されません。そのような元の素材に頻繁に変更が加わることがわかっているならば、ページの自動生成を有効にすることを検討したくなるかもしれません。</span></p> - -<p>自動生成を有効にするには:<strong> </strong>【訳注: この機能は現在、英語版のページでのみ設定できます】</p> - -<ol> - <li><strong>EDIT</strong> ボタンをクリックし、編集モードに入ります。</li> - <li>ページタイトルの下にある <strong>Edit page title and properties</strong> をクリックします。ページのメタデータフィールドが現れます。</li> - <li><strong>Rendering max age</strong> に値を設定します。この値が、キャッシュされたページが(マクロの再実行も含めて)再生成されるスケジュールを決定します。普通は 4 または 8 Hours を指定します。 文書が頻繁に変更される技術に関しては、より少ない数値を指定しても良いでしょう。</li> - <li>変更を保存します。リビジョンコメントに、設定内容を記録しておくのは良い習慣です。例: "Rendering max age を 4 Hours に設定"</li> -</ol> - -<p>ページは指定したスケジュールに従って再生成されます。</p> - -<div class="note"> -<p><strong>注:</strong> "Edit page title and properties" オプションは、文書の作成時には現れませんので、一度保存してから開き直す必要があります。</p> -</div> diff --git a/files/ja/orphaned/mdn/tools/page_watching/index.html b/files/ja/orphaned/mdn/tools/page_watching/index.html deleted file mode 100644 index a0a92aab7a..0000000000 --- a/files/ja/orphaned/mdn/tools/page_watching/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: ページやページ群を監視・購読する -slug: orphaned/MDN/Tools/Page_watching -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_watching -original_slug: MDN/Tools/Page_watching ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">MDN ページを購読することで、そのページが更新・変更された時はいつでもメールで通知を受け取ることができます。</span>すべての MDN ページの右上の隅に、監視ボタンがあります。購読のオプションにアクセスするには、監視ボタンの上にポインターを動かして監視メニューを開くいてください。</p> - -<p><img alt="MDN の監視メニューのスクリーンショット" src="https://mdn.mozillademos.org/files/12551/MDN_-_Watch_Menu.png" style="border-style: solid; border-width: 1px; display: block; height: 298px; margin: 0 auto; width: 463px;"></p> - -<p>そのページだけを購読するか、サブページも一緒に購読するかをオプションで選択してください。</p> - -<h2 id="Subscribe_to_a_page" name="Subscribe_to_a_page">ページを購読する</h2> - -<p>ユーザーがそのページを編集するたびにメール通知を受け取るには、ページの上部にある詳細メニューの最初のオプション「この記事を購読」をクリックします。</p> - -<h2 id="Subscribe_to_a_page_and_all_its_sub-articles" name="Subscribe_to_a_page_and_all_its_sub-articles">ページとすべてのサブページを購読する</h2> - -<p>2つ目のオプション「この記事と全サブ記事を購読」をクリックすると、ユーザーがそのページとすべてのサブページを編集するたびにメール通知を受け取るようになります。これは購読を要求した後に追加されたサブページも含むため、将来多くのサブページが作られた場合、その通知も同様に受け取ります。</p> - -<h2 id="Unsubscribe_from_a_page" name="Unsubscribe_from_a_page">ページの購読解除</h2> - -<p>購読を解除してページの監視をやめる場合は、再び監視メニューを開いて「この記事の購読を中止」をクリックしてください。ページを購読していると「この記事の購読を中止」とだけ表示されています。ページが変更されるたびにメール通知を受けることはなくなります。</p> - -<h2 id="The_page_change_emails" name="The_page_change_emails">ページ変更のメール</h2> - -<p>ページを購読すると、ページが保存されるたびにメールを受け取ります。このメールは notifications@developer.mozilla.org から MDN アカウントに登録されたメールアドレスに送信されます。各メッセージにはこの形のタイトルがあります:</p> - -<pre class="notranslate">[MDN] ページ "<em>ページタイトル</em>" が <em>ユーザー名</em> によって変更されました</pre> - -<p>メッセージはタイトル情報の繰り返しで始まり、つぎにコンテンツの標準差分を表示して、正確に何が変更されたかを示します。変更は HTML ソースコードで表示され、 MDN のコンテンツに慣れていない場合少し読みにくいかもしれません。</p> - -<p>差分の下には、変更に対応するのに役立つ、次のようなリンクの一覧があります:</p> - -<ul> - <li>その変更を行ったユーザーの MDN プロファイルを表示する</li> - <li>MDN のオンサイト履歴機能を使ってページの新旧のバージョンを比較する</li> - <li>ブラウザーで記事自体を見る</li> - <li>記事を編集する</li> - <li>記事の履歴を見る</li> -</ul> - -<p>メールの最後には、"HTML element reference とその全サブ記事に対する編集の購読を開始しました" といった、どんな購読でメールが生成されたかの通知や、購読をやめるためのリンクがあります。購読をやめるリンクをクリックすると、その監視リクエストのメッセージを受け取らなくなります。</p> diff --git a/files/ja/orphaned/mdn/tools/put_api/index.html b/files/ja/orphaned/mdn/tools/put_api/index.html deleted file mode 100644 index 7ed48e7888..0000000000 --- a/files/ja/orphaned/mdn/tools/put_api/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: PUT API -slug: orphaned/MDN/Tools/PUT_API -tags: - - Advanced - - Automation - - Documentation - - Draft - - Guide - - MDN Meta - - PUT API - - Page-level - - Tools -translation_of: MDN/Tools/PUT_API -original_slug: MDN/Tools/PUT_API ---- -<div>{{MDNSidebar}}</div> - -<div> {{draft}}</div> - -<p><span class="seoSummary">MDN Wiki はページの全体、または一部の更新のための<strong>実験的な</strong> <a href="/ja/docs/Web/HTTP">HTTP</a> PUT API を提供しています。</span>この機能は、次のような時に便利です:</p> - -<ul> - <li>プロジェクトのページを作成し、自動ビルド、テスト、デプロイスクリプトからある節のコンテンツを更新することができる。これはコミュニティがプロジェクトの進捗の最新についていくのに役立ちます。</li> - <li>ソースコードと並行してドキュメントを提供する場合、HTML をプッシュして MDN のサブセクションにレンダリングできます。これでチームの作業フローにとって適切な方法でドキュメントを維持できて、MDN に貢献したりローカライズ担当がコンテンツを翻訳できるままになります。</li> -</ul> - -<h2 id="Testing_your_application" name="Testing_your_application">アプリケーションをテストする</h2> - -<p>MDN を実行するソフトウェアを開発する中で、次のようにいろいろなステージ上のサイトインスタンスをホストしています:</p> - -<ul> - <li>Production (<a href="http://developer.mozilla.org/">http://developer.mozilla.org/</a>), the real site with stable code and where changes to content matter.</li> - <li>Staging (<a href="http://developer.allizom.org/">http://developer.allizom.org/</a>), a version of the site where changes are throwaway and upcoming features are tested.</li> - <li>Development (<a href="http://developer-dev.allizom.org/">http://developer-dev.allizom.org/</a>), a version of the site running the absolute latest and untested code.</li> -</ul> - -<p>プロダクションサイトを無駄にしないようにするには、まずステージングに対してアプリケーションを開発する必要があります。それから、あなたが望むことを合理的に実行することができたら、それをプロダクションに反映するように再構成します。また、開発に取り組むこともできますが、問題が発生する可能性があります。</p> - -<h2 id="Creating_an_API_key" name="Creating_an_API_key">API キーを作成する</h2> - -<p>APIキーを使うと、毎回 Persona ログインするような介入を要求せずに、アプリケーションを代理人として動作させることができます。SSL 上の HTTP ベーシック認証を使ってユーザー名とパスワードを提供します。基本的な使用のトラッキングを集めて、どのように使われているかがわかるようにします。そして、たまたま持つべきでない人々に渡った場合は、アクセスを無効にするよう API キーを削除できます。</p> - -<p>If you have the correct privileges to do so, to create an API key, sign into MDN and <a href="https://developer.mozilla.org/ja/users/account/keys" title="https://developer.mozilla.org/ja/users/account/keys">visit the API keys management page</a>. This page lets you create and delete API keys, as well as inspect recent usage history. Only Mozillians in good standing can currently get API keys, since they grant abilities to automate changes to content rapidly, so unprivileged users must request the ability by filing a bug.</p> - -<p>{{NoteStart}}The above link goes to the Production site, and the same keys do not work between Production and Staging. You can also get to this page by visiting your profile on the respective site: Click on your username in the upper right of the site. On your profile page, you should see a "Manage API Keys" button.{{NoteEnd}}</p> - -<p>From there, clicking on the "<a href="https://developer.mozilla.org/ja/users/account/keys/new" title="https://developer.mozilla.org/ja/users/account/keys/new">Create a new API key</a>" button should take you to an entry form so you can submit a request for an API key.</p> - -<p>After filling out and submitting the form, you will receive a key ID and secret. These are your username and password, respectively. Copy these down somewhere safe (eg. to your application's configuration settings); the site will never display them again, and there is no recovery method. If you lose them, simply delete the API key and create another.</p> - -<h2 id="Making_a_PUT_request" name="Making_a_PUT_request">PUT リクエストを作成する</h2> - -<p>Since the PUT API works by way of HTTP, it should be compatible with the application environment and libraries of your choice. This first example uses <a href="http://curl.haxx.se/">the command-line tool cURL</a> and a UNIX shell to demonstrate how to issue a simple PUT request to MDN.</p> - -<h3 id="Request" name="Request">リクエスト</h3> - -<pre class="brush: bash notranslate"># Base URL and API key from staging (example only; substitute your own) -MDN_BASE_URL="https://developer.allizom.org" -MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI" -MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs" - -# Document-specific details -DOC_USERNAME="lmorchard" # Change this to your name -DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample" -DOC_TYPE="text/html" -DOC_DATA="<b>HELLO WORLD</b>" - -# Putting it all together... -curl -si -X PUT -H"Content-Type: $DOC_TYPE" -d"$DOC_DATA" -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH"</pre> - -<p>Since there's a lot going on in this cURL invocation, the example is broken into variables:</p> - -<ul> - <li><code>MDN_BASE_URL</code> - as mentioned before, you should plan to switch your application between staging and production servers on MDN. This variable allows for that.</li> - <li><code>MDN_KEY_ID</code> - the key ID from the API key you created. Note that these are server-specific - the same keys do not work between staging and production.</li> - <li><code>MDN_SECRET</code> - the secret from the API key that corresponds with the key ID.</li> - <li><code>DOC_USERNAME</code> - change this to your MDN username.</li> - <li><code>DOC_PATH</code> - the URL path to the document with content you want to manipulate.</li> - <li><code>DOC_TYPE</code> - the content in the request will be <code>text/html</code></li> - <li><code>DOC_DATA</code> - the content sent in the PUT request body; this is the content that will be used in a new revision to the document</li> -</ul> - -<p>So, along with the variables, here are some general notes on the example and its use of the PUT API:</p> - -<ul> - <li>The key ID and secret are supplied as username and password, respectively, in HTTP Basic authentication over SSL.</li> - <li>The <code>DOC_PATH</code> for this example includes a username - presumably yours - but that's just for the sake of example and ensuring you have your own sample document to play with. You can use any URL path to any document on the wiki.</li> - <li>A <code>Content-Type</code> header is required, and lets MDN know how to process the content sent in the PUT request. Several content types are supported, and this feature will be described in greater detail shortly.</li> - <li>Content intended for the document is sent in the request body, using the representation promised in the <code>Content-Type</code> header</li> -</ul> - -<h3 id="Response" name="Response">レスポンス</h3> - -<p>There are several responses you may see if you try this example: <code>403</code>, <code>404</code>, <code>201</code>, or <code>205</code>. (You may see others, but those suggest something has gone wrong with the site. That will, hopefully, be rare.)</p> - -<h4 id="403_Forbidden" name="403_Forbidden">403 Forbidden</h4> - -<p>If either the key ID or secret are incorrect, you'll see a <code>403 Forbidden</code> response. Double check your key details and that you're using the right pair for the right server. Create a new API key, if necessary.</p> - -<h4 id="404_Not_Found" name="404_Not_Found">404 Not Found</h4> - -<p>If you've never created a document at the URL path <code>/en-US/docs/User:$MDN_USERNAME</code>, you'll see a <code>404 Not Found</code> response.</p> - -<p>{{NoteStart}}The PUT API will not automatically create parent documents. If you're creating a number of documents intended to comprise a subsection of MDN, make sure to create parent documents first from the top down in the hierarchy.{{NoteEnd}}</p> - -<h4 id="201_Created" name="201_Created">201 Created</h4> - -<p>If the parent document exists, but the path itself doesn't, you should see a <code>201 Created</code> response. This signifies that a new document was created, as opposed to an existing one having been updated.</p> - -<h4 id="205_Reset_Content" name="205_Reset_Content">205 Reset Content</h4> - -<p>In the case of an updated document, you'll see a <code>205 Reset Content</code> response. This means that the document content has been updated, and that you should reload the document if you happen to need to see the results.</p> - -<p>{{NoteStart}}MDN performs certain filtering and processing steps on content, so what you put in may not be exactly what gets served back.{{NoteEnd}}</p> - -<h2 id="Supported_Content_Types" name="Supported_Content_Types">サポートされるコンテンツのタイプ</h2> - -<p>The PUT API accepts one of several content types in the request body.</p> - -<h3 id="texthtml" name="texthtml">text/html</h3> - -<p>There are actually two forms of <code>text/html</code> accepted: fragment and document.</p> - -<h4 id="Fragment" name="Fragment">Fragment</h4> - -<p>An HTML fragment is just an arbitrary chunk of markup, and is used as-is to revise document content. This is the simplest way to update documents.</p> - -<h4 id="Document" name="Document">Document</h4> - -<p>However, if the request body consists of an <code><html></code> element containing <code><head></code> and <code><body></code> elements, it's treated as a full HTML document. In this case, the following processing happens:</p> - -<ul> - <li>From the <code><head></code> element, the contents of <code><title></code> is extracted and used as the title for the document on MDN.</li> - <li>The contents of <code><body></code> is extracted as the content for a new revision. </li> -</ul> - -<p>This is a more complex way to update documents, but is intended as a convenience to accomodate submission of existing HTML pages.</p> - -<h3 id="applicationjson" name="applicationjson">application/json</h3> - -<p>Although the <code>text/html</code> content type is handy, there are more fields belonging to documents that are useful to manage. These include the following:</p> - -<ul> - <li><code>title</code> - the document title</li> - <li><code>content</code> - the content intended for the new revision</li> - <li><code>tags</code> - tags used to organize documents: this is given as a single string, with tags separated by commas</li> - <li><code>review_tags</code> - tags used to request content reviews: this is given as a single string, with tags separated by commas</li> - <li><code>summary</code> - a comment describing the revision to be made</li> - <li><code>show_toc</code> - a flag (0/1) indicating whether the table of contents should be shown for this document</li> -</ul> - -<p>These fields can be supplied as string values in a JSON-encoded object with the <code>application/json</code> content-type in a PUT request.</p> - -<pre class="brush: bash notranslate"># Auth Stuff -DOC_USERNAME="lmorchard" # Change this to your name -MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI" -MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs" - -# Base Settings (for Staging Env) -MDN_BASE_URL="https://developer.allizom.org" -DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample" -DOC_TYPE="application/json" - -<code class="language-bash"># Doc Content -echo '{"content": "<b>Hello World</b>", "title": "New Sample Title", "show_toc": 1, "tags": "Beginner, Tutorial", "review_tags": "editorial, technical", "summary": "Sample JSON update from the API"}' > /tmp/mdn.json - -# Submitting Content</code> -curl -X PUT -H "Content-Type: $DOC_TYPE" -d @/tmp/mdn.json -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH" -</pre> - -<h3 id="multipartform-data" name="multipartform-data">multipart/form-data</h3> - -<p>This content type is handled basically like <code>application/json</code> - the same fields are accepted. But, it might be less useful than JSON and is supported mainly for testing purposes.</p> - -<h2 id="Updating_a_single_section" name="Updating_a_single_section">1 つのセクションを更新する</h2> - -<p>Normally, an HTTP PUT request replaces the entirety of a document with the submitted content in a new revision. However, you can use the query parameter <code>?section</code> to constrain revision to a single section of the document and leave the rest of the content as-is. This is handy for automating changes to one part of a document that is otherwise managed by hand, or even for aggregating changes from many sources or scripts into one document.</p> - -<h3 id="Creating_document_sections" name="Creating_document_sections">文書のセクションを作成する</h3> - -<p>Documents on MDN can be broken up into sections. These sections are useful for building a table of contents, linking to specific parts, and editing subsets of document content.</p> - -<h4 id="Using_headers" name="Using_headers">Using headers</h4> - -<p>Headers (ie. <code><h2></code> .. <code><h6></code>) make sections in MDN documents. The text of each header is transformed automatically into an ID, and that's used for anchor links in the table of contents sidebar on most documents. Those auto-generated IDs can be overriden with the <code>name</code> attribute on headers. Either way, looking at the table of contents is the easiest way to see how a document is broken up into sections, and to discover the IDs for those sections.</p> - -<p>The contents of a section include its header and everything following the header up to (but not including) another header of the same or higher level. So, a section that starts with an <code><h2></code> continues until the next <code><h2></code>, including any subsections started by <code><h3></code> .. <code><h6></code>. That also means sections can be nested: An <code><h3></code> appearing after an <code><h2></code> creates a subsection, including any further nested subsections started by <code><h4></code> .. <code><h6></code>, up to the next <code><h3></code> or <code><h2></code>.</p> - -<p>@@TODO: Show an HTML example with headers, here. This is a bit confusing.</p> - -<h4 id="Using_container_elements" name="Using_container_elements">Using container elements</h4> - -<p>Setting an <code>id</code> attribute on a container element (eg. a <code><div></code> or <code><span></code> or <code><section></code>) in the source editor also creates a section, at least with respect to the PUT API. This is a bit more advanced and requires manual changes to raw HTML, rather than using the WYSIWYG editor. But, if you want to update a chunk of the page without the need for headers, this is how to do it.</p> - -<h3 id="Specifying_a_section" name="Specifying_a_section">セクションを指定する</h3> - -<ul> - <li>Look at the table of contents, note the anchor ID for the link (ie. the <code>#hash</code> part of the URL).<br> - Example: <code>https://developer.mozilla.org/ja/docs/User:lmorchard/PUT-API#Specifying_a_section</code></li> - <li>Take everything after the "#" character, and you have the section ID.<br> - Example: <code>Specifying_a_section</code></li> - <li>Add <code>?section={ID}</code> to the URL for the document, substituting the section ID for <code>{ID}</code>.<br> - Example: <code>https://developer.mozilla.org/ja/docs/User:lmorchard/PUT-API?section=Specifying_a_section</code></li> - <li>If you view <a href="https://developer.mozilla.org/ja/docs/User:lmorchard/PUT-API?section=Specifying_a_section" title="https://developer.mozilla.org/ja/docs/User:lmorchard/PUT-API?section=Specifying_a_section">that URL</a> in a browser (ie. HTTP GET), you'll see just that section of the document.<br> - (For more details on what you can do with HTTP GET, see also: <a href="/ja/docs/Project:The_Kuma_API" title='/ja/docs/Project:The_Kuma_API""'>Project:The_Kuma_API</a>)</li> - <li>If you issue a PUT request to that URL, you'll modify just that section of the document.<br> - (But, don't do that to the example URL, or you'll clobber the page you're reading right now!)</li> -</ul> diff --git a/files/ja/orphaned/mdn/tools/search/index.html b/files/ja/orphaned/mdn/tools/search/index.html deleted file mode 100644 index 6bf48de476..0000000000 --- a/files/ja/orphaned/mdn/tools/search/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: MDN の検索機能 -slug: orphaned/MDN/Tools/Search -tags: - - Guide - - MDN Meta - - Site-wide - - Tools -translation_of: MDN/Tools/Search -original_slug: MDN/Tools/Search ---- -<div>{{MDNSidebar}}</div> - -<p class="summary"><span class="seoSummary">MDN のオンサイト検索機能では、外部の検索エンジンで MDN の記事を検索した時には得られない多くの機能が提供されます。この記事では MDN の検索エンジンを最大限に活用する方法を記します。</span></p> - -<h2 id="Basic_search_options" name="Basic_search_options">基本的な検索オプション</h2> - -<h3 id="Filtering_results" name="Filtering_results">結果をフィルタリングする</h3> - -<p>MDN で検索クエリの結果を表示する際に、トピック、技術レベル、文書タイプで結果をフィルタリングするオプションがあります。これは、関連するキーワードが複数の文脈で表示される可能性のあるメソッドを探している場合などに便利です。トピックフィルターを使用して、最も興味のある API の結果のみを表示することができます。これらのフィルターは、ページに設定されたタグによって、どのページを含めるか除外するかを決定します (ページを作成または編集する際に<a href="/ja/docs/MDN/Contribute/Howto/Tag">適切にタグ付けする</a>のはこれが理由です)。以下の種類のフィルターを適用することができます。</p> - -<dl> - <dt>トピック</dt> - <dd>トピックのタグに従って検索結果を絞り込む</dd> - <dt>技術レベル</dt> - <dd><strong>Beginner</strong>, <strong>Intermediate</strong>, <strong>Advanced</strong> の各タグで絞り込む</dd> - <dt>文書タイプ</dt> - <dd><strong>Example</strong>, <strong>Guide</strong>, <strong>Tools</strong> の各タグで絞り込む</dd> -</dl> - -<h2 id="Advanced_search_options" name="Advanced_search_options">高度な検索オプション</h2> - -<p>MDN 貢献者向けに特定のマクロや HTML 属性などを検索できるよう、マクロの出力ではなく生の HTML でページのソースを検索できる高度な検索機能を用意しています。</p> - -<p>今のところこの高度な検索用のユーザーインターフェイスは用意しておらず、URL で直接アクセスすることで利用できます。検索結果は通常の MDN の検索結果ページあるいは JSON フォーマットのいずれかで得られます (後者の検索結果は例えば KumaScript などから使うこともできます)。この節ではその使い方を説明します。</p> - -<p><strong>注:</strong> ここで紹介する検索クエリーは広く利用される目的で作る URL ではありません。ツールやユーティリティから使用するためのものであり、将来変更される可能性があります。クエリーのパフォーマンスも高くない場合があります。</p> - -<h3 id="Search_query_format" name="Search_query_format">検索クエリーの書式</h3> - -<p>高度な検索クエリーは検索に適切な引数を付けた URL で実行してください。ベースとなる URL は次のいずれかです。</p> - -<dl> - <dt><code>https://developer.mozilla.org/ja/search</code></dt> - <dd>通常の MDN 検索結果ページを出力とする場合はこちらを使います。</dd> - <dt><code>https://developer.mozilla.org/ja/search.json</code></dt> - <dd>JSON 形式で結果を取得する場合はこちらを使います。検索結果の書式については {{anch("JSON response body format")}} をご覧ください。</dd> -</dl> - -<p>これに続けて、欲しい結果を得るには適切なパラメータを追加してください。次のパラメータを組み合わせて利用できます:</p> - -<dl> - <dt><code>q=</code></dt> - <dd>マッチする検索クエリー。これは基本検索で使われるパラメーターと同じです。</dd> - <dt><code>locale=</code></dt> - <dd>検索対象とするロケール。既定ではすべてのロケールが対象となります。すべてのロケールを明示的に指定するにはワイルドカード "*" を指定することもできます。例えば、 <code>locale=ja</code> とすれば検索結果を日本語だけに絞り込めます。</dd> - <dt><code>css_classnames=</code></dt> - <dd>検索対象とする CSS クラス名。ページの HTML に少なくとも指定されたクラスが 1 つ以上含まれているページを検索します。</dd> - <dt><code>html_attributes=</code></dt> - <dd>検索対象とする HTML 属性テキスト。これは前方一致検索です。つまり、指定したテキストが HTML の属性文字列の始めにある場合、検索にマッチします。詳しくは下記をご覧ください。</dd> - <dt><code>kumascript_macros=</code></dt> - <dd>検索対象とする 1 つ以上の KumaScript のリスト。これをつかって特定のマクロを使った記事を検索できます。例えば、マクロを廃止する場合や、パラメータが変更され既存のページを更新する必要がある場合に便利です。</dd> - <dt><code>highlight=</code></dt> - <dd><code>true</code> か <code>false</code> のどちらかで、既定では <code>true</code> です。検索クエリーにマッチする結果の周りに <code><a href="/ja/docs/Web/HTML/Element/mark"><mark></a></code> 要素を含めるかどうかを決めます。</dd> - <dt><code>per_page=</code></dt> - <dd>100以下の数値です。既定では Kuma はページ当たり10個の結果を出力します。それとは異なる値を使用する場合にこの引数を使用してください。</dd> -</dl> - -<h3 id="Examples" name="Examples">例</h3> - -<p>検索例をいくつか示します。</p> - -<h4 id="Searching_by_locale" name="Searching_by_locale">ロケールによる検索</h4> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/en-US/search?locale=<var>ja</var></pre> - -<p>この例では日本語の記事のリストが得られます。言語 (ロケール) 以外での絞り込みはされません。このページの翻訳時点では 12092 ページが見つかります (もちろん翻訳ページは増え続けているのであなたが試すときにはもっと大きな数になっているはずです！)</p> - -<h4 id="Searching_by_CSS_class_name" name="Searching_by_CSS_class_name">CSS クラス名による検索</h4> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/ja/search?locale=ja&css_classnames=<var>smaller</var></pre> - -<p>この例では CSS で <code>smaller</code> クラスを使っている記事のリストが得られます。ページ翻訳時点では 42 ページに絞り込まれます。</p> - -<h4 id="Searching_by_HTML_attribute_string" name="Searching_by_HTML_attribute_string">HTML 属性文字列による検索</h4> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/ja/search?locale=ja&html_attributes=<var>style</var></pre> - -<p>この例では HTML 要素に <code>style</code> 属性が使われている記事のリストが得られます。ページ翻訳時点では 7277 ページが該当します。これらはダメなページで修正されるべきものです。少しずつ標準化したクラスで置き換えていく必要があります。</p> - -<p>属性値も含めて検索することはできますが、検索文字列に <code>=</code> や <code>/</code> を含める場合にはこれらを URL エンコードする必要があることに注意してください。例えば、www.mozilla.org にリンクしているページは次のように検索します:</p> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/ja/search?locale=ja&html_attributes=<var>href%3D%22https%3A%2F%2Fwww.mozilla.org</var></pre> - -<p>この検索結果は 80 件になりました。www.mozilla.org にリンクしているページは意外と少ないですね！</p> - -<h4 id="KumaScript_マクロの使用状況による検索">KumaScript マクロの使用状況による検索</h4> - -<pre class="syntaxbox notranslate">https://developer.mozilla.org/ja/search?locale=ja&kumascript_macros=<var>TemplateLink</var></pre> - -<p>この例では {{TemplateLink("TemplateLink")}} マクロを使用しているページを検索します。マクロの引数が変更された時や、マクロの使用をやめたいときに検索することができます。</p> - -<h3 id="JSON_response_body_format" name="JSON_response_body_format">JSON レスポンス本文の書式</h3> - -<p>JSON で検索結果を取得する場合も、通常の検索結果ページ同様に数件ずつのページ単位で結果が返されます。各ページには検索結果に関するメタデータが含まれる KumaScript オブジェクトと、通常のページオブジェクトにページ編集用の URL フィールドが追加されたものの配列が返されます。</p> - -<p>結果のオブジェクトに含まれるデータは次の通りです。</p> - -<dl> - <dt><code>count</code></dt> - <dd>検索結果の総数</dd> - <dt><code>next</code></dt> - <dd>検索結果の次ページ URL (あるいは最終ページの場合は {{JSxRef("Global_Objects/null", "null")}})</dd> - <dt><code>previous</code></dt> - <dd>検索結果の前ページ URL (あるいは最初のページの場合は {{JSxRef("Global_Objects/null", "null")}})</dd> - <dt><code>query</code></dt> - <dd>結果を検索するのに使われた検索クエリー</dd> - <dt><code>page</code></dt> - <dd>このオブジェクトに含まれる検索結果ページ番号</dd> - <dt><code>pages</code></dt> - <dd>検索結果ページの総数</dd> - <dt><code>start</code></dt> - <dd>このページの結果のうち最初の項目の番号</dd> - <dt><code>end</code></dt> - <dd>このページの結果のうち最後の項目の番号</dd> - <dt><code>filters</code></dt> - <dd>さまざまな検索フィルターの設定を含めた配列。通常の検索に利用可能なフィルターです</dd> - <dt><code>documents</code></dt> - <dd>マッチしたページの{{anch("Page_objects", "ページオブジェクト")}}の配列</dd> -</dl> - -<h4 id="Page_objects" name="Page_objects">ページオブジェクト</h4> - -<p>各ページオブジェクトには次のものが含まれます。</p> - -<dl> - <dt><code>title</code></dt> - <dd>記事タイトル</dd> - <dt><code>slug</code></dt> - <dd>記事のスラグ。ページの URL のうち、ロケール名とスラッシュに続くものすべてです。</dd> - <dt><code>locale</code></dt> - <dd>ページのロケール</dd> - <dt><code>excerpt</code></dt> - <dd>ページコンテンツの断片 (スニペット)。これは記事本文の冒頭部分か、"SEO Summary" クラスが使われていればそのクラスで指定されたコンテンツ。<a href="/ja/docs/MDN/Contribute/Tools/Search$edit#Search_query_format">検索クエリ引数</a>内で <code>highlight=false</code> を指定しない限り、excerpt には <code><a href="/ja/docs/Web/HTML/Element/mark"><mark></a></code> 要素が入ります。</dd> - <dt><code>url</code></dt> - <dd>ページの完全な URL</dd> - <dt><code>edit_url</code></dt> - <dd>ページを編集モードで開く完全な URL</dd> - <dt><code>tags</code></dt> - <dd>ページのタグの配列</dd> - <dt><code>score</code></dt> - <dd>検索エンジンで割り当てられたスコア値</dd> - <dt><code>explanation</code></dt> - <dd>検索クエリーにどのように何故マッチしたかという検索エンジンからの雑多な情報。このコンテンツの詳細についてはこのページでは解説しません。</dd> -</dl> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p>追加の<a href="/ja/docs/MDN/Kuma/Getting_started#Finding_pages">管理者のみの検索機能</a>がいくつかあり、例えばスラッグが特定の文字で始まっているページを検索したりすることができます。</p> diff --git a/files/ja/orphaned/mdn/tools/template_editing/index.html b/files/ja/orphaned/mdn/tools/template_editing/index.html deleted file mode 100644 index 932f6486ba..0000000000 --- a/files/ja/orphaned/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: テンプレートの編集 -slug: orphaned/MDN/Tools/Template_editing -tags: - - Page-level -translation_of: MDN/Tools/Template_editing -original_slug: MDN/Tools/Template_editing ---- -<div>{{MDNSidebar}}</div><p>MDNでは、 <a href="/ja/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> で書かれたテンプレートがコンテンツの自動生成、およびページのカスタマイズに使われています。 それぞれのテンプレートは、別々の Wiki ページに置かれていて、ページ名は以下のとおりです:<br> - <code>/en-US/docs/Template:<em>テンプレートの名前</em></code></p> - -<p><span class="seoSummary">MDN の Wikiを編集している人なら誰でも、マクロを通じてテンプレートを呼び出すことができます。KumaScript は強力なので、テンプレートの作成と編集のための権限は、必要な経験を持ち合わせた信頼できるユーザーのみに与えられています。</span></p> - -<h2 id="この権限を持つ役割の人">この権限を持つ役割の人</h2> - -<ul> - <li><a href="/ja/docs/MDN/Community/Roles/Admins"><strong>MDN管理者</strong></a></li> - <li><a href="/ja/docs/MDN/Community/Roles/Topic_driver_role"><strong>トピックドライバ</strong></a></li> - <li><a href="/ja/docs/MDN/Community/Roles/Localization_driver_role"><strong>ローカライゼーションドライバ</strong></a></li> -</ul> - -<h2 id="この権限を得るための条件">この権限を得るための条件</h2> - -<p>このツールにアクセスする権限を得るための条件は以下のとおりです:</p> - -<ul> - <li><strong>常に</strong>この権限を必要としていること。 例えば、新しいマクロの作成する、古いマクロを修正する、または多くをローカライズするなど。</li> - <li>MDN を定期的に編集していて、 JavaScript でのコードの書き方を知っていること、そしてKumaScript によるテンプレートの制約とリスクを知っていること。</li> - <li>"テンプレート編集権限を持っているpeer" のうち<strong>2人による</strong>保証があり、なおかつどの peer からも<strong>拒否</strong>されていないこと。</li> -</ul> - -<p>この権限を得るためのプロセスについては、<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Processes/Requesting_elevated_privileges">上位権限のリクエスト</a> を見てください。</p> - -<h2 id="テンプレート編集の権限を持っている人（peer）たち">テンプレート編集の権限を持っている人（peer）たち</h2> - -<ul> - <li>現在の peer: <a href="/en-US/profiles/sheppy/">Sheppy</a>, <a href="/en-US/profiles/teoli">teoli</a>, <a href="/en-US/profiles/Fscholz">fscholz</a>, <a href="/en-US/profiles/wbamberg">wbamberg</a>, <a href="/en-US/profiles/Chrisdavidmills">chrisdavidmills</a>, <a href="/en-US/profiles/Jeremie">Jeremie</a>.</li> - <li>新たな peer の追加、peer の削除は、現在の peer の賛同を得ることで行われます。</li> -</ul> diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html deleted file mode 100644 index 98bebc8862..0000000000 --- a/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 拡張機能をパッケージ化する -slug: orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ -original_slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension ---- -<div>{{AddonSidebar}}</div> - -<p> </p> - -<div class="pull-aside"> -<div class="moreinfo"> -<p>Firefox ではパッケージされた拡張機能を "XPI ファイル" と呼び、これは単に色々な拡張機能を集めた ZIP ファイルです。</p> - -<p>AMO にアップロードする時に、XPI 拡張機能を使う必要はありません。</p> -</div> -</div> - -<p> </p> - -<p>開発期間中、拡張機能は manifest.json ファイルとその他の必要なファイル—スクリプト、アイコン、HTML 文書などを含む 1 つのディレクトリで構成されるでしょう。AMO にアップロードするにはこれを 1 つの zip ファイルにまとめる必要があります。</p> - -<p>web-ext を使っている場合、拡張機能をパッケージ化するのに <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference#web-ext_build">web-ext build </a>を使います。その他の場合、下記の OS ごとの手順に従ってください。</p> - -<div class="note"> -<p>Tip. ZIP ファイルは拡張機能を構成するファイル自身でなくてはならず、これらを含んだディレクトリであってはいけません。</p> -</div> - -<h3 id="Windows" name="Windows">Windows</h3> - -<ol> - <li>あなたの拡張機能を格納したフォルダを開きます。</li> - <li>すべてのファイルを選択します。</li> - <li>右クリックメニューの「送る」 から zip圧縮を選びます。</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h3 id="Mac_OS_X" name="Mac_OS_X">Mac OS X</h3> - -<ol> - <li>あなたの拡張機能を格納したディレクトリを開きます。</li> - <li>すべてのファイルを選択します。</li> - <li>右クリックメニューから圧縮を選びます。</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<div class="pull-aside"> -<div class="moreinfo">コマンドについて <a href="http://www.info-zip.org/mans/zip.html">http://www.info-zip.org/mans/zip.html</a>.</div> -</div> - -<h3 id="Linux_Mac_OS_X_Terminal" name="Linux_Mac_OS_X_Terminal">Linux / Mac OS X ターミナル</h3> - -<ol> - <li>ターミナルを開きます。</li> - <li>拡張機能を含むディレクトリを開きます、そのコマンドは<br> - <code>cd path/to/<em>my-extension</em>/</code></li> - <li>ディレクトリの中身を ZIP します、そのコマンドは<br> - <code>zip -r -FS ../<em>my-extension</em>.zip *</code></li> -</ol> - -<p> </p> - -<p> </p> - -<p> </p> diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html deleted file mode 100644 index 6bb036c563..0000000000 --- a/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Google Chrome からの移行 -slug: orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -original_slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome ---- -<div>{{AddonSidebar}}</div> - -<p>WebExtension API で開発する拡張機能は、ブラウザー間で互換性が維持されるように設計されており、大半は Google Chrome や Opera でサポートされている <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> とコード互換性があります。これらのブラウザー向けに書かれた拡張機能はほとんどの場合、少しの変更を加えるだけで Firefox でも動くようになります。ほぼすべての <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension API</a> は、Chrome と同様に <code>chrome</code> 名前空間のコールバック関数を使ってサポートされています。<code>chrome</code> 名前空間でサポートされない唯一の API は、わざと Chrome と互換性がないものです。こうしたまれな場合は、API ドキュメントページでは明示的に、<code>browser</code> 名前空間だけでサポートされることを述べています。Chrome や Opera から拡張機能を移行する手順は下記の通り:</p> - -<ol> - <li>manifest.json の設定項目や使用している WebExtensionAPI が <a href="/ja/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome との非互換性リファレンス</a>に載っているか確認します。もし Firefox でサポートされていない設定項目や API を利用している場合、まだ移行できないかもしれません。 Mozilla はこの手順を自動化するサービスを次にて提供しています: <a href="https://www.extensiontest.com/">https://www.extensiontest.com/</a>.</li> - <li><a href="/ja/Add-ons/WebExtensions/Packaging_and_installation">拡張機能を Firefox にインストールしてテストします</a>。</li> - <li>もし何か問題が見つかったら、 <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> または <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a> の <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> に連絡してください。</li> - <li><a href="/ja/Add-ons/Distribution">アドオンの署名と配布を行うため、アドオンを AMO に送ります</a>。</li> -</ol> - -<p><span id="result_box" lang="ja"><span>展開された拡張機能をロードするのに Chrome のコマンドラインオプションを使用していた場合、開発用に Firefox へ自動的に</span></span><span lang="ja"><span>仮インストールを行う</span></span> <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> <span lang="ja"><span>ツールを使用してみてください。</span></span> </p> - -<ul> -</ul> - -<div id="divLookup" style="background-color: transparent; color: #000000; position: absolute; top: 683px; left: 479px; padding: 0px; border-radius: 2px;"><img></div> diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html deleted file mode 100644 index 8c84465c72..0000000000 --- a/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: パッケージ化とインストール -slug: orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -original_slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -<div>{{AddonSidebar}}</div> - -<p>この記事では、WebExtension を Firefox にインストールする方法を 2 つ紹介します。</p> - -<ul> - <li><a href="#loading_from_disk">ディスクから読み込む</a>: アドオンの開発中にテストしたい場合に最も簡単な方法です。</li> - <li><a href="#package_and_install">パッケージ化してインストールする</a>: この方法を用いると、アドオンをインストール可能なファイルにパッケージ化し、Firefox へ永続的にインストールさせることができます。自分の作ったアドオンを他の人に配布する際はこの方法を用いることになります。また、リリース版の Firefox にインストールさせるには、アドオンに署名をすることも必要になります。</li> -</ul> - -<h2 id="Loading_from_disk">ディスクから読み込む</h2> - -<p>WebExtension を Firefox で動作させるには、この方法が最もシンプルです。また、<a href="/ja/docs/Mozilla/Add-ons/Bootstrapped_extensions">ブートストラップ型拡張機能</a> や <a href="/ja/docs/Mozilla/Add-ons/SDK">Add-on SDK を使ったアドオン</a> といった、再起動の要らないアドオンはすべてこの方法でインストールできます。</p> - -<p>ここでは Firefox 45 以降が必要となります。</p> - -<p>ディスクから読み込むには、</p> - -<ul> - <li>Firefox を起動し、</li> - <li>URL バーに "about:debugging" と入力し、</li> - <li>"一時的なアドオンを読み込む" をクリックし、</li> - <li>アドオンのディレクトリを開き、アドオン中のファイルを任意に選択します。</li> -</ul> - -<p>これでアドオンがインストールされ、Firefox を再起動するまで有効になります。</p> - -<p>{{EmbedYouTube("sAM78GU4P34")}}</p> - -<h3 id="Updating_a_temporary_add-on">一時的なアドオンの更新</h3> - -<p>この方法でアドオンをインストールした場合、アドオンのファイルを更新すると何が起きるでしょうか？</p> - -<h4 id="Before_Firefox_48">Firefox 47 以前</h4> - -<ul> - <li>オンデマンドに読み込まれるファイル（<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> や <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#browser_actions_2">ポップアップ</a> など）を更新した場合、変更は自動的に取り込まれ、次に content scripts が読み込まれたりポップアップが表示された際に反映されます。</li> - <li>常に読み込まれているファイル（<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">background scripts</a> など）を更新した場合、about:addons のページでアドオンを無効化・有効化すると変更が反映されます。</li> - <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルを更新した場合、Firefox を再起動してアドオンを再度読み込ませる必要があります。</li> -</ul> - -<div class="note"> -<p>Firefox 47 以前では、Firefox を再起動せずに「一時的なアドオンを読み込む」をクリックしても更新は<em>反映されない</em> ことに注意してください。</p> -</div> - -<h4 id="Firefox_48_onwards">Firefox 48 以降</h4> - -<ul> - <li>オンデマンドに読み込まれるファイル（<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> や <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#browser_actions_2">ポップアップ</a> など）を更新した場合、変更は自動的に取り込まれ、次に content scripts が読み込まれたりポップアップが表示された際に反映されます。</li> - <li>他の場合に関しては利便性が向上しました。「デバッグ」ボタンの横にある「リロード」ボタンをクリックすることで、以下のことが可能となります。 - <ul> - <li>永続的なスクリプト（<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">background scripts</a> など）のリロード</li> - <li>manifest.json ファイルが再度パースされ、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> / <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> / <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> などに対する変更の反映</li> - </ul> - </li> -</ul> - -<div class="note"> -<p>Firefox 48 のみに関する注意点として、about:debugging と about:addons に表示されるアドオンの名前と説明文は、「リロード」ボタンをクリックしても更新されません。この問題は Firefox 49 で修正されます。</p> -</div> - -<h2 id="Package_and_install">パッケージ化してインストールする</h2> - -<p>ディスクからの読込は 開発 / テスト / デバッグ のサイクルにおいては有効です。しかし、アドオンを他の人と共有したい場合は、アドオンを インストール可能な形式にパッケージ化する必要があります。</p> - -<h3 id="Packaging">パッケージ化</h3> - -<p>Firefox のアドオンは XPI ファイルでパッケージ化されます。XPI ファイルとは単なる ZIP ファイルですが、ファイルの拡張子は ".xpi" となります。</p> - -<p>一つ注意しなければならないのは、アドオンのファイルを含んだディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルとする必要がある点です。</p> - -<h4 id="Windows">Windows</h4> - -<ol> - <li>アドオンのファイルが含まれているフォルダを開きます。</li> - <li>ファイルすべてを選択します。</li> - <li>右クリックして "送る" → "圧縮（zip 形式）フォルダー" を選択します。</li> - <li>作成されたファイルの名前を "something.zip" から "something.xpi" に変更します。</li> -</ol> - -<p><img alt="" src="install-windows.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="Mac_OS_X">Mac OS X</h4> - -<ol> - <li>アドオンのファイルが含まれているフォルダを開きます。</li> - <li>ファイルすべてを選択します。</li> - <li>右クリックして "n 項目を圧縮" を選択します。</li> - <li>作成されたファイルの名前を <code>Archive.zip</code> から <code>something.xpi</code> に変更します。</li> -</ol> - -<p><img alt="" src="install-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h4 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h4> - -<ol> - <li><code>cd path/to/my-addon/</code></li> - <li><code>zip -r ../my-addon.xpi *</code></li> -</ol> - -<h3 id="Installation">インストール</h3> - -<p>XPI ファイルをインストールする前に、次のどちらかの手順を踏む必要があります。</p> - -<ul> - <li>XPI ファイルに署名する</li> - <li>未署名の XPI ファイルをインストール可能にする。ただし、この設定は Firefox Nightly か Firefox Developer Edition のみ可能であることに注意してください。自分のアドオンを一般に配布したい場合は署名が必要です。</li> -</ul> - -<h4 id="Getting_your_add-on_signed">アドオンに署名する</h4> - -<p>XPI ファイルに署名するには、<a href="https://extensionworkshop.com/documentation/publish/signing-and-distribution-overview/#distributing-your-addon">Signing and distributing your Add-on</a> の記事を参照してください。</p> - -<h4 id="Enabling_unsigned_add-ons">未署名のアドオンを有効にする</h4> - -<p>未署名のアドオンを有効にするには、以下の手順に従ってください。</p> - -<ul> - <li><a href="https://www.mozilla.org/ja/firefox/developer/">Firefox Developer Edition</a> または <a class="external text external-icon" href="https://nightly.mozilla.org/" rel="nofollow">Firefox Nightly</a> をダウンロード、インストール、起動してください。</li> - <li>未署名アドオンのインストールを制御する Firefox の設定項目を変更します。この設定は Firefox Developer Edition と Firefox Nightly のみ可能です。 - <ul> - <li>Firefox の URL バーに <code>about:config</code> を入力します。</li> - <li>検索欄に <code>xpinstall.signatures.required</code> と入力します。</li> - <li>設定項目をダブルクリックするか、右クリックからの "切り替え" を選択し、値を <code>false</code> に変更します。</li> - </ul> - </li> -</ul> - -<p>{{EmbedYouTube("HgtBYDWtH4w")}}</p> - -<h4 id="Installing_an_XPI_in_Firefox">XPI ファイルを Firefox にインストールする</h4> - -<p>XPI ファイルに署名した場合でも、署名の制約を無効化した場合でも、XPI ファイルをインストールする手順はどちらも同じです。</p> - -<ol> - <li><code>about:addons</code> に移動します。</li> - <li>XPI ファイルをページにドラッグ & ドロップするか、歯車アイコンのメニューを開いて "ファイルからアドオンをインストール" を選択します。</li> - <li>表示されたダイアログで "インストール" をクリックします。</li> -</ol> - -<p>他にも、"ファイル" → "開く" から XPI ファイルを選択したり、Control+O (Command+O) で選択することも可能です。</p> - -<h4 id="Installing_your_extension_of_Firefox_OS">アドオンを Firefox OS にインストールする</h4> - -<p>USB か Wifi で接続されたデスクトップ PC で <a href="/ja/docs/Tools/WebIDE">WebIDE</a> を起動すれば、WebIDE からアドオンをインストールすることができます。WebIDE で "path/to/my-extension" をパッケージ型アプリとして開いてください。</p> - -<p>manifest.json の認証状況が正しければ、接続されたデバイス（Firefox OS の nightly ビルドで動作しているもの）にアドオンをインストールし、実行することができます。</p> - -<p>このアドオンの初回実行時は、Firefox OS のデバイスで Settings → Add-ons で有効にする必要があります。</p> - -<h3 id="Troubleshooting">トラブルシューティング</h3> - -<p>起こりやすい問題には以下のようなものがあります。</p> - -<h4 id="This_add-on_could_not_be_installed_because_it_has_not_been_verified.">"This add-on could not be installed because it has not been verified."</h4> - -<ul> - <li>アドオンが署名されていないため、<a href="#%e6%9c%aa%e7%bd%b2%e5%90%8d%e3%81%ae%e3%82%a2%e3%83%89%e3%82%aa%e3%83%b3%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b">未署名アドオンのインストールを有効にしているか</a> 確認してください。</li> -</ul> - -<h4 id="This_add-on_could_not_be_installed_because_it_appears_to_be_corrupt.">"This add-on could not be installed because it appears to be corrupt."</h4> - -<ul> - <li>アドオンのファイルを<em>含んだ</em> ディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルであるか確認してください。manifest.json は ZIP ファイルのルートに置かれていなければなりません。</li> - <li>manifest.json において <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">applications</a> キーの値に "gecko" が設定されているか確認してください。</li> - <li>Firefox 44 以降を使用しているか確認してください。</li> - <li>コードや JSON ファイルにシンタックスエラーがないことを確認してください。</li> - <li><a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a> に他の情報が表示されていないか確認してください。</li> -</ul> - -<h4 id="Nothing_happens">何も起こらない</h4> - -<ul> - <li>ファイル名の末尾が確かに <code>.xpi</code> であるか確認してください。OS によってはファイルの拡張子を<em>本当に</em> 隠したがるものがあります。 - - <ul> - <li>Windows の場合、 View → Show / Hide: File Name Extensions を確認してください。</li> - <li>Mac OS X の場合、 File → Get Info → Name and Extension を確認してください。</li> - </ul> - </li> - <li>インストール時のプロンプトでクリックを間違えたか、プロンプトを見失ってしまった可能性があります。Nightly の戻るボタン横にあるパズルピースのアイコンを探してください。そのアイコンをクリックするとポップアップが再度表示されます。</li> -</ul> - -<h4 id="Check_the_console">コンソールを確認する</h4> - -<p>アドオンが解凍されたり読み込まれる過程に関して、他のエラーメッセージが <a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a> に表示されている場合があります。</p> diff --git a/files/ja/orphaned/web/api/body/arraybuffer/index.html b/files/ja/orphaned/web/api/body/arraybuffer/index.html deleted file mode 100644 index ca11540bb0..0000000000 --- a/files/ja/orphaned/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: orphaned/Web/API/Body/arrayBuffer -tags: - - API - - ArrayBuffer - - BODY - - Experimental - - Fetch - - Method - - Reference -translation_of: Web/API/Body/arrayBuffer -original_slug: Web/API/Body/arrayBuffer ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} ミックスインの <strong><code>arrayBuffer()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{jsxref("ArrayBuffer")}} で解決される promise を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>response</em>.arrayBuffer().then(function(<em>buffer</em>) { - // buffer を使用した何らかの処理 -});</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<p>なし。</p> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>{{jsxref("ArrayBuffer")}} で解決される promise。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Playing_music" name="Playing_music">音楽の演奏</h3> - -<p><a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer のライブ</a>では、Play ボタンを配置して、押下されると <code>getData()</code> 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。 ダウンロード中に演奏を開始したい（つまりストリーム再生したい）なら、次のように {{domxref("HTMLAudioElement")}} を使いましょう。</p> - -<pre class="brush: js">new Audio("music.ogg").play(); -</pre> - -<p><code>getData()</code> 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックをフェッチします。 また、{{domxref("AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 フェッチが成功したら、<code>arrayBuffer()</code> を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、{{domxref("AudioContext.decodeAudioData")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（<code>source.buffer</code>）として設定し、それから {{domxref("AudioContext.destination")}} にソースを接続します。</p> - -<p><code>getData()</code> の実行が完了すると、<code>start(0)</code> で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。</p> - -<pre class="brush: js">function getData() { - source = audioCtx.createBufferSource(); - - var myRequest = new Request('viper.ogg'); - - fetch(myRequest).then(function(response) { - return response.arrayBuffer(); - }).then(function(buffer) { - audioCtx.decodeAudioData(buffer, function(decodedData) { - source.buffer = decodedData; - source.connect(audioCtx.destination); - }); - }); -}; - -// wire up buttons to stop and play audio - -play.onclick = function() { - getData(); - source.start(0); - play.setAttribute('disabled', 'disabled'); -}</pre> - -<h3 id="Reading_files" name="Reading_files">ファイルを読む</h3> - -<p>{{domxref("Response.Response","Response()")}} コンストラクターは、{{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、{{domxref("File")}} を他の形式に読み込むために使用できます。</p> - -<pre class="brush: js">function readFile(file) { - return new Response(file).arrayBuffer(); -} -</pre> - -<pre class="brush: html"><input type="file" onchange="readFile(this.files[0])"></pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.arrayBuffer")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/blob/index.html b/files/ja/orphaned/web/api/body/blob/index.html deleted file mode 100644 index c19d7b7ab5..0000000000 --- a/files/ja/orphaned/web/api/body/blob/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Body.blob() -slug: orphaned/Web/API/Body/blob -tags: - - API - - BODY - - Blob - - Experimental - - Fetch - - Method - - Reference -translation_of: Web/API/Body/blob -original_slug: Web/API/Body/blob ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} ミックスインの <strong><code>blob()</code></strong> メソッド は、 {{domxref("Response")}} ストリームを取得し、完全に読み込みます。 {{domxref("Blob")}} で解決する promise を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>response</em>.blob().then(function(<em>myBlob</em>) { - // do something with myBlob -});</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<p>なし。</p> - -<div class="note"><strong>注</strong>: {{domxref("Response")}} の {{domxref("Response.type")}} が <code>"opaque"</code> の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は <code>0</code>、{{domxref("Blob.type")}} は空の文字列 <code>""</code> になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは役に立たなくなります。</div> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>{{domxref("Blob")}} で解決する promise。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">fetch request の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request をライブで</a>実行）では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG をフェッチします。 フェッチが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> - -<pre class="brush: js">var myImage = document.querySelector('img'); - -var myRequest = new Request('flowers.jpg'); - -fetch(myRequest) -.then(response => response.blob()) -.then(function(myBlob) { - var objectURL = URL.createObjectURL(myBlob); - myImage.src = objectURL; -}); -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-blob','blob()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.blob")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/body/index.html b/files/ja/orphaned/web/api/body/body/index.html deleted file mode 100644 index 2b5cf02536..0000000000 --- a/files/ja/orphaned/web/api/body/body/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Body.body -slug: orphaned/Web/API/Body/body -tags: - - API - - BODY - - Experimental - - Fetch - - Property - - Reference - - Streams -translation_of: Web/API/Body/body -original_slug: Web/API/Body/body ---- -<div>{{APIRef("Fetch")}}{{seecompattable}}</div> - -<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>body</code></strong> 読み取り専用プロパティは、ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッターです。</span></p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>stream</em> = <em>response</em>.body;</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>{{domxref("ReadableStream")}}。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="https://mdn.github.io/dom-examples/streams/simple-pump/">単純なストリームポンプ</a>の例では、画像をフェッチし、<code>response.body</code> を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。</p> - -<pre class="brush: js">const image = document.getElementById('target'); - -// 元の画像をフェッチ -fetch('./tortoise.png') -// その body を ReadableStream として取得 -.then(response => response.body) -.then(body => { - const reader = body.getReader(); - - return new ReadableStream({ - start(controller) { - return pump(); - - function pump() { - return reader.read().then(({ done, value }) => { - // データを消費する必要がなくなったら、ストリームを閉じます - if (done) { - controller.close(); - return; - } - - // 次のデータチャンクを対象のストリームのキューに入れます - controller.enqueue(value); - return pump(); - }); - } - } - }) -}) -.then(stream => new Response(stream)) -.then(response => response.blob()) -.then(blob => URL.createObjectURL(blob)) -.then(url => console.log(image.src = url)) -.catch(err => console.error(err));</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-body','body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.body")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/bodyused/index.html b/files/ja/orphaned/web/api/body/bodyused/index.html deleted file mode 100644 index 6a785cbf9a..0000000000 --- a/files/ja/orphaned/web/api/body/bodyused/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Body.bodyUsed -slug: orphaned/Web/API/Body/bodyUsed -tags: - - API - - BODY - - Experimental - - Fetch - - Property - - Reference - - bodyUsed -translation_of: Web/API/Body/bodyUsed -original_slug: Web/API/Body/bodyUsed ---- -<div>{{APIRef("Fetch")}}</div> - -<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>bodyUsed</code></strong> 読み取り専用プロパティは、ボディが既に読み取られたかどうかを示す {{jsxref("Boolean")}} 値を含みます。</span></p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>myBodyUsed</em> = <em>response</em>.bodyUsed;</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>{{jsxref("Boolean")}} 値。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request をライブで</a>実行）では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG をフェッチします。 フェッチが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> - -<p><code>response.blob()</code> の呼び出し前後に、<code>response.bodyUsed</code> をコンソールに記録していることに注目してください。 その時点でボディが読み取られたかによるため、これは呼び出し前では <code>false</code> を返し、その後では <code>true</code> を返します。</p> - -<h3 id="HTML_Content" name="HTML_Content">HTML の内容</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content" name="JS_Content">JS の内容</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { - console.log(response.bodyUsed); - var res = response.blob(); - console.log(response.bodyUsed); - return res; -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.bodyUsed")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP のアクセス制御（CORS）</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/formdata/index.html b/files/ja/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index 922fd2986d..0000000000 --- a/files/ja/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -tags: - - API - - BODY - - Experimenal - - Fetch - - Fetch API - - FormData - - Method - - NeedsExample - - Reference -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -<div>{{APIRef("Fetch")}}</div> - -<p><span class="seoSummary">{{domxref("Body")}} ミックスインの <strong><code>formData()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決される promise を返します。</span></p> - -<div class="note"> -<p><strong>注</strong>: これは主に <a href="/ja/docs/Web/API/ServiceWorker_API">service worker</a> に関連しています。 ユーザーがフォームを送信し、service worker がリクエストをインターセプトした場合を考えてみましょう。 例えば、key-value マップを取得するために <code>formData()</code> を呼び出し、いくつかのフィールドを修正した後、フォームをサーバ側に送信できます（またはローカルで使用できます）。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>response</em>.formData() -.then(function(<em>formdata</em>) { - // formdata を使った何らかの処理 -});</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<p>なし。</p> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>TBD.</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.formData")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/index.html b/files/ja/orphaned/web/api/body/index.html deleted file mode 100644 index 01ff7c7dea..0000000000 --- a/files/ja/orphaned/web/api/body/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Body</code></strong> {{glossary("mixin","ミックスイン")}}は、リクエスト/レスポンスのボディを表し、そのコンテンツタイプが何であるかとその処理方法を宣言できます。</span></p> - -<p><code>Body</code> は {{domxref("Request")}} と {{domxref("Response")}} の両方で実装されます。 これにより、これらのオブジェクトに、関連するボディ（<a href="/ja/docs/Web/API/Streams_API">ストリーム</a>）と使用済みフラグ（初期は未設定）、MIME タイプ（初期は空のバイトシーケンス）が提供されます。（訳注：コンテンツタイプ（MIME タイプ）は、{{domxref("Headers")}} の <code>"Content-Type"</code> にあります。 でも、例を見てもわかる通り、普通はリクエストの時点で決定しているので、これを調べてはいません。）</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>ボディコンテンツの {{domxref("ReadableStream")}} を公開するために使用する単純なゲッター。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>既にボディが読み込まれたかどうかを示す {{jsxref("Boolean")}} 値。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{jsxref("ArrayBuffer")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("Blob")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("FormData")}} オブジェクトで解決する promise を返す。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 ボディのテキストを {{jsxref("JSON")}} として解析した結果で解決する promise を返す。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、完全に読み込む。 {{domxref("USVString")}}（テキスト）で解決する promise を返す。 レスポンスは常に UTF-8 でデコードする。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では、単純なフェッチ呼び出しを使用して画像を取得し、{{htmlelement("img")}} タグで表示します。 画像をリクエストしているので、{{domxref("Body.blob","Body.blob()")}} （{{domxref("Response")}} は <code>Body</code> を実装しています）を実行して、レスポンスに正しい MIME タイプを与える必要があることに注意してください。</p> - -<h3 id="HTML_Content" name="HTML_Content">HTML の内容</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content" name="JS_Content">JS の内容</h3> - -<pre class="brush: js">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/json/index.html b/files/ja/orphaned/web/api/body/json/index.html deleted file mode 100644 index 3ee9cd7c6d..0000000000 --- a/files/ja/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - BODY - - Experimental - - Fetch - - JSON - - Method - - Reference - - メソッド -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch API")}}</div> - -<p><span class="seoSummary">{{DOMxRef("Body")}} ミックスインの <strong><code>json()</code></strong> メソッドは、 {{DOMxRef("Response")}} ストリームを取得して、完全に読み取ります。 ボディのテキストを {{JSxRef("JSON")}} として解釈した結果で解決する promise を返します。</span></p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> => { - // data を使用した処理を実行する -});</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<p>なし。</p> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json をライブで</a>実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して <code>.json</code> ファイルをフェッチします。 フェッチが成功したら、<code>json()</code> を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読みだし、それらの値をリスト項目に追加して商品データとして表示します。</p> - -<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/body/text/index.html b/files/ja/orphaned/web/api/body/text/index.html deleted file mode 100644 index 9e66199603..0000000000 --- a/files/ja/orphaned/web/api/body/text/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Body.text() -slug: orphaned/Web/API/Body/text -tags: - - API - - BODY - - Experimental - - Fetch - - Method - - Reference - - Text -translation_of: Web/API/Body/text -original_slug: Web/API/Body/text ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} ミックスインの <strong><code>text()</code></strong> メソッドは、{{domxref("Response")}} ストリームを取得し、完全に読み込みます。 {{domxref("USVString")}} オブジェクト（テキスト）で解決する promise を返します。 レスポンスは<em>常に</em> UTF-8 としてデコードします。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>response</em>.text().then(function (<em>text</em>) { - // text レスポンスを使用して何か実行する。 -});</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<p>なし。</p> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>{{domxref("USVString")}} で解決する promise。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">fetch text の例</a>（<a href="http://mdn.github.io/fetch-examples/fetch-text/">fetch text をライブで</a>実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（<code>myLinks</code> 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、リンクの <code>data-page</code> 識別子を引数として渡して <code>getData()</code> 関数が実行されるように、<code>onclick</code> イベントハンドラーを設定します。</p> - -<p><code>getData()</code> が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の <code>.txt</code> ファイルをフェッチします。 フェッチが成功したら、<code>text()</code> を使用してレスポンスから {{jsxref("USVString")}}（テキスト）オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。</p> - -<pre class="brush: js">var myArticle = document.querySelector('article'); -var myLinks = document.querySelectorAll('ul a'); - -for(i = 0; i <= myLinks.length-1; i++) { - myLinks[i].onclick = function(e) { - e.preventDefault(); - var linkData = e.target.getAttribute('data-page'); - getData(linkData); - } -}; - -function getData(pageId) { - console.log(pageId); - var myRequest = new Request(pageId + '.txt'); - fetch(myRequest).then(function(response) { - return response.text().then(function(text) { - myArticle.innerHTML = text; - }); - }); -}</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-text','text()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Body.text")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御（CORS）</a></li> - <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/childnode/before/index.html b/files/ja/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index b0b091392e..0000000000 --- a/files/ja/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode.before()</strong></code> は <code>ChildNode</code> の親の子リストの、<code>ChildNode</code> の直前に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。</dd> -</dl> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Inserting_an_element" name="Inserting_an_element">要素の挿入</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="Inserting_text" name="Inserting_text">テキストの挿入</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="Inserting_an_element_and_text" name="Inserting_an_element_and_text">要素とテキストの挿入</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before_is_unscopable" name="ChildNode.before_is_unscopable"><code>ChildNode.before()</code> はスコーピングに非対応</h3> - -<p><code>before()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>以下のポリフィルで、 Internet Explorer 9 以降でも <code>before()</code> メソッドが利用できます。</p> - -<pre class="brush: js notranslate">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('before')) { - return; - } - Object.defineProperty(item, 'before', { - configurable: true, - enumerable: true, - writable: true, - value: function before() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.ChildNode.before")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ChildNode")}} と {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/childnode/index.html b/files/ja/orphaned/web/api/childnode/index.html deleted file mode 100644 index a1208b5aa0..0000000000 --- a/files/ja/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - Node -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<p>{{APIRef("DOM")}}</p> - -<p><span class="seoSummary"><code><strong>ChildNode</strong></code> ミックスインは親を持つことができる {{domxref("Node")}} オブジェクトに共通のメソッド・プロパティが含まれています。これは、{{domxref("Element")}}、{{domxref("DocumentType")}}、{{domxref("CharacterData")}} オブジェクトによって実装されています。</span></p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em>継承された、または固有のプロパティはありません。</em></p> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p><em>継承されたメソッドはありません。</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>この <code>ChildNode</code>を、その親の <code>children</code> から削除します。</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この <code>ChildNode</code> の親の <code>children</code> の、<code>ChildNode</code> の直前に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この <code>ChildNode</code> の親の <code>children</code> の、<code>ChildNode</code> の直後に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd><code>ChildNode</code> の親の <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">children</span></font> 内に含まれるこの <code>ChildNode</code> を {{domxref("Node")}} または {{domxref("DOMString")}} のセットと置き換えます。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェースは {{domxref("ParentNode")}} と <code>ChildNode</code> に分割されました。 <code>previousElementSibling</code> と <code>nextElementSibling</code> は後者で定義されています。<br> - {{domxref("CharacterData")}} と {{domxref("DocumentType")}} は新しいインターフェースが実装されています。<br> - <code>remove()</code>, <code>before()</code>, <code>after()</code> および <code>replaceWith()</code> メソッドが追加されました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td><code>ElementTraversal</code> 基本インターフェースにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill" name="Polyfill">互換コード</h2> - -<p>外部サイト (github): <code><a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></code></p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2> - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="See_also" name="See_also">関連項目</h2> - -<ul> - <li>{{domxref("ParentNode")}} インターフェース</li> - <li> - <div class="syntaxbox">{{domxref("ParentNode")}} インターフェースを実装したオブジェクト型</div> - - <ul> - <li> - <div class="syntaxbox">{{domxref("CharacterData")}}</div> - </li> - <li> - <div class="syntaxbox">{{domxref("Element")}}</div> - </li> - <li> - <div class="syntaxbox">{{domxref("DocumentType")}}</div> - </li> - </ul> - </li> - <li> - <div class="syntaxbox">The {{domxref("NonDocumentTypeChildNode")}} interface</div> - </li> -</ul> diff --git a/files/ja/orphaned/web/api/childnode/replacewith/index.html b/files/ja/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index 28896c90fd..0000000000 --- a/files/ja/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ChildNode.replaceWith()</strong></code> は親の子リストの <code>ChildNode</code> を、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">[Throws, Unscopable] -void ChildNode.replaceWith((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットで置換します。</dd> -</dl> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_replaceWith" name="Using_replaceWith"><code>replaceWith()</code> の使用</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.replaceWith(span); - -console.log(parent.outerHTML); -// "<div><span></span></div>" -</pre> - -<h3 id="ChildNode.replaceWith_is_unscopable" name="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> はスコーピングに非対応</h3> - -<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">with(node) { - replaceWith("foo"); -} -// ReferenceError: replaceWith is not defined </pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>以下のポリフィルで、 Internet Explorer 9 以降でも <code>replaceWith()</code> メソッドが利用できます。</p> - -<pre class="brush: js notranslate">function ReplaceWithPolyfill() { - 'use-strict'; // For safari, and IE > 10 - var parent = this.parentNode, i = arguments.length, currentNode; - if (!parent) return; - if (!i) // if there are no arguments - parent.removeChild(this); - while (i--) { // i-- decrements i and returns the value of i before the decrement - currentNode = arguments[i]; - if (typeof currentNode !== 'object'){ - currentNode = this.ownerDocument.createTextNode(currentNode); - } else if (currentNode.parentNode){ - currentNode.parentNode.removeChild(currentNode); - } - // the value of "i" below is after the decrement - if (!i) // if currentNode is the first argument (currentNode === arguments[0]) - parent.replaceChild(currentNode, this); - else // if currentNode isn't the first - parent.insertBefore(currentNode, this.nextSibling); - } -} -if (!Element.prototype.replaceWith) - Element.prototype.replaceWith = ReplaceWithPolyfill; -if (!CharacterData.prototype.replaceWith) - CharacterData.prototype.replaceWith = ReplaceWithPolyfill; -if (!DocumentType.prototype.replaceWith) - DocumentType.prototype.replaceWith = ReplaceWithPolyfill;</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.ChildNode.replaceWith")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ChildNode")}} と {{domxref("ParentNode")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/deviceproximityevent/max/index.html b/files/ja/orphaned/web/api/deviceproximityevent/max/index.html deleted file mode 100644 index 4a262f2362..0000000000 --- a/files/ja/orphaned/web/api/deviceproximityevent/max/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: DeviceProximityEvent.max -slug: orphaned/Web/API/DeviceProximityEvent/max -tags: - - API - - DevicProximitiy Event - - Experimenatal - - Property - - Reference -translation_of: Web/API/DeviceProximityEvent/max -original_slug: Web/API/DeviceProximityEvent/max ---- -<p>{{APIRef("Proximity Events")}}{{SeeCompatTable}}</p> - -<p><code>max</code> プロパティは、センサーが報告可能なセンチメートル単位の最大検知距離をで提供します。</p> - -<h2 id="構文">構文</h2> - -<pre>var value = instanceOfDeviceProximityEvent.max;</pre> - -<h2 id="値">値</h2> - -<p>デバイスの近接度センサーが報告可能なセンチメートル単位の最大検知距離を表す正の数値です。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("api.DeviceProximityEvent.max")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{domxref("DeviceProximityEvent")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/deviceproximityevent/min/index.html b/files/ja/orphaned/web/api/deviceproximityevent/min/index.html deleted file mode 100644 index acceaea8fa..0000000000 --- a/files/ja/orphaned/web/api/deviceproximityevent/min/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: DeviceProximityEvent.min -slug: orphaned/Web/API/DeviceProximityEvent/min -tags: - - API - - DeviceProximity Event - - Experimental - - Property - - Reference -translation_of: Web/API/DeviceProximityEvent/min -original_slug: Web/API/DeviceProximityEvent/min ---- -<p>{{APIRef("Proximity Events")}}{{SeeCompatTable}}</p> - -<p><code>min</code> プロパティは、センチメートル単位でセンサーが報告可能な距離を提供します。</p> - -<h2 id="構文">構文</h2> - -<pre>var value = instanceOfDeviceProximityEvent.min;</pre> - -<h2 id="値">値</h2> - -<p>デバイスの近接度センサーが報告可能なセンチメートル単位の最小距離を表す正の数値です。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '#device-proximity', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("api.DeviceProximityEvent.min")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{domxref("DeviceProximityEvent")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/deviceproximityevent/value/index.html b/files/ja/orphaned/web/api/deviceproximityevent/value/index.html deleted file mode 100644 index 3ae8090e6a..0000000000 --- a/files/ja/orphaned/web/api/deviceproximityevent/value/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: DeviceProximityEvent.value -slug: orphaned/Web/API/DeviceProximityEvent/value -tags: - - API - - DeviceProximity Event - - Experimental - - Property - - Reference -translation_of: Web/API/DeviceProximityEvent/value -original_slug: Web/API/DeviceProximityEvent/value ---- -<p>{{APIRef("Proximity Events")}}{{SeeCompatTable}}</p> - -<p>{{domxref("DeviceProximityEvent")}} オブジェクトの <code>value</code> プロパティは、デバイスと検出したオブジェクトの間の現在の距離をセンチメートル単位で提供します。</p> - -<h2 id="構文">構文</h2> - -<pre>var distance = instanceOfDeviceProximityEvent.value;</pre> - -<h2 id="値">値</h2> - -<p>デバイスの近接センサーと検出したオブジェクトの間の現在の距離をセンチメートル単位で表した正の数値です。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Proximity Events', '#device-proximity', 'Proximity Events') }}</td> - <td>{{ Spec2('Proximity Events') }}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("api.DeviceProximityEvent.value")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{domxref("DeviceProximityEvent")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/domlocator/index.html b/files/ja/orphaned/web/api/domlocator/index.html deleted file mode 100644 index a43fbf8320..0000000000 --- a/files/ja/orphaned/web/api/domlocator/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: DOMLocator -slug: orphaned/Web/API/DOMLocator -tags: - - API - - DOM - - DOM Reference - - Obsolete - - Reference -translation_of: Web/API/DOMLocator -original_slug: Web/API/DOMLocator ---- -<p>{{APIRef("DOM")}}{{obsolete_header}}</p> - -<div class="warning"> -<p>NOTE: これは Mozilla には実装されていません</p> -</div> - -<p>エラーが発生した場所などを示します。 <code>DOMError.location</code> によって返されます。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt>{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> - <dt>{{domxref("DOMLocator.columnNumber")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> - <dt>{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> - <dt>{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> - <dt>{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> - <dt>{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}</dt> - <dd>正の整数または-1を返します。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p><em>このインターフェイスは、メソッドを実装も継承もしません。</em></p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> diff --git a/files/ja/orphaned/web/api/element/currentstyle/index.html b/files/ja/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 5f1cfa645e..0000000000 --- a/files/ja/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - API - - NeedsExample - - Non-standard - - Property -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<p>{{Non-standard_header}}</p> - -<p class="summary"><span class="seoSummary"><strong><code>Element.currentStyle</code></strong> は独自プロパティで、標準化されている {{DOMxRef("window.getComputedStyle()")}} メソッドに似ているものです。</span>古いバージョンの Microsoft Internet Explorer で使用できます。しかし、 <code>window.getComputedStyle()</code> がピクセル数で値を返すのに対し、これは CSS で設定された単位で返します。</p> - -<h2 id="Polyfill">ポリフィル</h2> - -<div class="note"> -<p>このポリフィルは値をピクセル数で返しますが、値を読むたびに {{domxref("window.getComputedStyle()")}} を呼び出さなければならないため、かなり遅くなると思われます。</p> -</div> - -<pre class="brush: js">/* すべての著作権をパブリックドメインに寄贈します。 - * http://creativecommons.org/publicdomain/zero/1.0/ */ - -if (!("currentStyle" in Element.prototype)) { - Object.defineProperty(Element.prototype, "currentStyle", { - get: function() { - return window.getComputedStyle(this); - } - }); -} -</pre> - -<h2 id="Specifications">仕様書</h2> - -<p>どの仕様書にも含まれていません。</p> - -<p>Microsoft は <a href="https://web.archive.org/web/20150629144515/https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">MSDN で説明しています</a>。</p> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.currentStyle")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{DOMxRef("Element.runtimeStyle")}}</li> - <li>{{DOMxRef("window.getComputedStyle()")}}</li> -</ul> - -<div>{{APIRef("DOM")}}</div> diff --git a/files/ja/orphaned/web/api/htmlelement/forcespellcheck/index.html b/files/ja/orphaned/web/api/htmlelement/forcespellcheck/index.html deleted file mode 100644 index 3e0c2b978f..0000000000 --- a/files/ja/orphaned/web/api/htmlelement/forcespellcheck/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: HTMLElement.forceSpellCheck() -slug: orphaned/Web/API/HTMLElement/forceSpellCheck -tags: - - API - - Experimental - - HTML DOM - - HTMLElement - - Method - - Reference -translation_of: Web/API/HTMLElement/forceSpellCheck -original_slug: Web/API/HTMLElement/forceSpellCheck ---- -<p>{{ APIRef("HTML DOM") }}{{SeeCompatTable}}</p> - -<p><span class="seoSummary">{{domxref("HTMLElement")}} インターフェイスの <strong><code>forceSpellCheck()</code></strong> メソッドは、ユーザーが要素にフォーカスしていない場合でも、HTML 要素のスペルチェックと文法チェックを強制します。 このメソッドは、{{glossary("user agent","ユーザーエージェント")}} の振る舞いをオーバーライドします。 チェックの特定のユーザーインターフェイス（赤い下線が表示されるかどうかなど）は、ユーザーエージェントによって決定されます。</span></p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>element</em>.forceSpellCheck()</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.HTMLElement.forceSpellCheck")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a></li> - <li>{{htmlattrxref("spellcheck")}} 属性</li> -</ul> diff --git a/files/ja/orphaned/web/api/linkstyle/index.html b/files/ja/orphaned/web/api/linkstyle/index.html deleted file mode 100644 index 3b5a1ee7e9..0000000000 --- a/files/ja/orphaned/web/api/linkstyle/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: LinkStyle -slug: orphaned/Web/API/LinkStyle -tags: - - API - - CSSOM - - Interface - - NeedsBrowserCompatibility - - Reference -translation_of: Web/API/LinkStyle -original_slug: Web/API/LinkStyle ---- -<div>{{APIRef("CSSOM")}}</div> - -<p><code><strong>LinkStyle</strong></code> インターフェイスで、ノードに<em>関連付けられた CSS スタイルシート</em>にアクセスできます。</p> - -<p><code>LinkStyle</code> は生のインターフェイスであり、この型のオブジェクトは生成できません。これは {{domxref("HTMLLinkElement")}} および {{domxref("HTMLStyleElement")}} オブジェクトによって実装されています。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em>継承しているプロパティはありません。</em></p> - -<dl> - <dt>{{domxref("LinkStyle.sheet")}} {{readonlyInline}}</dt> - <dd>指定した要素に関連付けられている {{domxref("StyleSheet")}} オブジェクトを返します。何も関連付けられていない場合は <code>null</code> を返します。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p><em>このインターフェイスはメソッドを実装していません。</em></p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('CSSOM', '#the-linkstyle-interface', 'LinkStyle')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>{{SpecName('DOM2 Style')}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-LinkStyle', 'LinkStyle')}}</td> - <td>{{Spec2('DOM2 Style')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("api.LinkStyle")}}</p> diff --git a/files/ja/orphaned/web/api/localmediastream/index.html b/files/ja/orphaned/web/api/localmediastream/index.html deleted file mode 100644 index 20b4e4b056..0000000000 --- a/files/ja/orphaned/web/api/localmediastream/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: LocalMediaStream -slug: orphaned/Web/API/LocalMediaStream -tags: - - API - - DOM - - DOM Reference - - Interface - - LocalMediaStream - - Media - - Media Capture and Streams API - - Media Stream API - - Obsolete - - Reference - - WebRTC -translation_of: Web/API/LocalMediaStream -original_slug: Web/API/LocalMediaStream ---- -<div>{{APIRef("Media Capture and Streams")}} {{Obsolete_header}}</div> - -<p><strong><code>LocalMediaStream</code></strong> インターフェイスは <a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> の一部分で、ローカルに生成されたデータストリーム (例えば {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} によるもの) を表していました。しかし、今は <code>getUserMedia()</code> が代わりに {{domxref("MediaStream")}} を返し、このインターフェイスは仕様から削除されました。</p> - -<p>このインターフェイスが存在する主な理由は、親インターフェイスの{{domxref("MediaStream")}} に <code>stop()</code> メソッドを追加するためでした。しかし、メディアの再生管理は個々の {{domxref("MediaStreamTrack")}} オブジェクトに移り、これは必要なくなりました。その代わりに、メディアは停止させるべき各トラックの {{domxref("MediaStreamTrack.stop()")}} を呼ぶことで停止されます。<code>MediaStreamTrack.stop()</code> の例はマルチトラックストリームを停止する方法を示していて、それが <code>LocalMediaStream.stop()</code> がかつて使われていたことでした。</p> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{domxref("LocalMediaStream.stop()")}}</dt> - <dd>ストリームを停止します。ストリームのソースが接続済みのデバイス(カメラやマイクのような)のとき、デバイスのキャプチャを停止します。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<p>どの仕様の一部分でもない。このインターフェイスは以前は {{SpecName("Media Capture")}} の一部分でしたが、2013年に削除されました。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("api.LocalMediaStream")}}</p> - -<h2 id="See_Also" name="See_Also">See Also</h2> - -<ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> - <li>{{domxref("MediaStreamTrack.stop()")}}</li> - <li>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}</li> - <li>{{domxref("Navigator.getUserMedia()")}}、古い、<code>getUserMedia()</code> のコールバックベース版</li> -</ul> diff --git a/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html b/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html deleted file mode 100644 index 24c552759d..0000000000 --- a/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ':-moz-alt-text' -slug: orphaned/Web/CSS/:-moz-alt-text -tags: - - CSS - - CSS Reference - - Non-standard -original_slug: Web/CSS/:-moz-alt-text ---- -<p>{{Non-standard_header}}{{ CSSRef() }}</p> - -<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> - -<p><code>:-moz-alt-text</code> は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。</p> - -<p>このセレクタは主にテーマ開発者によって使用されるものです。</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(11011) }}</p> diff --git a/files/ja/orphaned/web/html/global_attributes/dropzone/index.html b/files/ja/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 7611ba91d8..0000000000 --- a/files/ja/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、 <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。</p> - -<ul> - <li><code>copy</code>: ドロップにより、ドロップした要素のコピーを生成することを示す</li> - <li><code>move</code>: ドロップされた要素は新しい場所に移動されることを示す</li> - <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> -</ul> diff --git a/files/ja/orphaned/web/html/html_extensions/index.html b/files/ja/orphaned/web/html/html_extensions/index.html deleted file mode 100644 index 43820aed0c..0000000000 --- a/files/ja/orphaned/web/html/html_extensions/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: HTML Extensions -slug: orphaned/Web/HTML/HTML_Extensions -tags: - - HTML -original_slug: Web/HTML/HTML_Extensions ---- -<p>Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。</p> -<ul> <li>BLINK</li> <li><a class="internal" href="/ja/HTML/HTML_Extensions/KEYGEN_Tag" title="ja/HTML/HTML Extensions/KEYGEN Tag">KEYGEN</a></li> -</ul> -<div class="noinclude"> -<p>{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}</p> -</div> diff --git a/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html b/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html deleted file mode 100644 index 7e25b8eaac..0000000000 --- a/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Web Content Accessibility Guidelines 1.0 -slug: orphaned/Web_Content_Accessibility_Guidelines_1.0 -tags: - - Accessibility - - Web Development -original_slug: Web_Content_Accessibility_Guidelines_1.0 ---- -<p> -<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 1.0 は、<a class="external" href="http://w3.org">W3C</a> の <a class="external" href="http://http://www.w3.org/WAI/">Web Accessibility Inisiative(WAI)</a> によって公開されています。 -</p> -<ul><li> <a class="external" href="http://www.w3.org/TR/WCAG10/">Web Content Accessibility Guidelines 1.0</a> -</li><li> <a class="external" href="http://www.w3.org/TR/WCAG10-CORE-TECHS/">Core Techniques for Web Content Accessibility Guidelines 1.0</a> -</li><li> <a class="external" href="http://www.w3.org/TR/WCAG10-HTML-TECHS/">HTML Techniques for Web Content Accessibility Guidelines 1.0</a> -</li><li> <a class="external" href="http://www.w3.org/TR/WCAG10-CSS-TECHS/">CSS Techniques for Web Content Accessibility Guidelines 1.0</a> -</li></ul> -<p>日本語参考訳(ZSPC訳)： -</p> -<ul><li> <a class="external" href="http://www.zspc.com/documents/wcag10/index.html">ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0</a> -</li><li> <a class="external" href="http://www.zspc.com/documents/wcag10-tech/index.html">ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書</a> -</li></ul> -<p>その他の翻訳は <a class="external" href="http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS">各国語版へのリンク集</a> を参照のこと。 -</p><p><br> -現在ワーキングドラフトが公開されている [<a class="external" href="http://www.w3.org/TR/WCAG20/">WCAG 2.0</a>] とは、基本的な課題は同じです。WCAG 1.0 に適合していれば大きな変更は必要ありませんが、WCAG 2.0 ではより明確な基準が設けられており、アプローチの仕方も違います。 -</p><p>日本においては、WCAG 1.0 のガイドラインの多くが <a href="ja/JIS_X8341-3">JIS X8341-3</a> に取り込まれています。 -</p> diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html new file mode 100644 index 0000000000..652f38c95f --- /dev/null +++ b/files/ja/web/api/element/before/index.html @@ -0,0 +1,91 @@ +--- +title: Element.before() +slug: Web/API/Element/before +tags: + - API + - DOM + - Method + - Node + - Reference +browser-compat: api.Element.before +translation_of: Web/API/Element/before +original_slug: Web/API/ChildNode/before +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">before(... nodes)</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Inserting_an_element">要素の挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span); + +console.log(container.outerHTML); +// "<div><span></span><p></p></div>" +</pre> + +<h3 id="Inserting_text">テキストの挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); + +p.before("Text"); + +console.log(container.outerHTML); +// "<div>Text<p></p></div>"</pre> + +<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span, "Text"); + +console.log(container.outerHTML); +// "<div><span></span>Text<p></p></div>"</pre> + + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.after()")}}</li> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/replacewith/index.html b/files/ja/web/api/element/replacewith/index.html new file mode 100644 index 0000000000..ad9420f041 --- /dev/null +++ b/files/ja/web/api/element/replacewith/index.html @@ -0,0 +1,73 @@ +--- +title: Element.replaceWith() +slug: Web/API/Element/replaceWith +tags: + - API + - DOM + - Method + - Element + - Reference +browser-compat: api.Element.replaceWith +translation_of: Web/API/Element/replaceWith +original_slug: Web/API/ChildNode/replaceWith +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.replaceWith()</strong></code> メソッドは、この <code>Element</code> を親の子リストの中で一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">replaceWith(...nodes)</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置換します。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にはノードを挿入できません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Using_replaceWith"><code>replaceWith()</code> の使用</h3> + +<pre class="brush: js">const div = document.createElement("div"); +const p = document.createElement("p"); +div.appendChild(p); +const span = document.createElement("span"); + +p.replaceWith(span); + +console.log(div.outerHTML); +// "<div><span></span></div>" +</pre> + +<h3 id="replaceWith_is_unscopable"><code>replaceWith()</code> はスコーピングに非対応</h3> + +<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">with(node) { + replaceWith("foo"); +} +// ReferenceError: replaceWith is not defined </pre> + +<h2 id="Specification">仕様書</h2> + +<p>{{Specifications}} + +</p> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/fetch_api/index.html b/files/ja/web/api/fetch_api/index.html index 7f1f35da9b..2eaad2cd9d 100644 --- a/files/ja/web/api/fetch_api/index.html +++ b/files/ja/web/api/fetch_api/index.html @@ -3,7 +3,6 @@ title: Fetch API slug: Web/API/Fetch_API tags: - API - - Experimental - Fetch - Landing - Reference @@ -14,101 +13,89 @@ translation_of: Web/API/Fetch_API --- <div>{{DefaultAPISidebar("Fetch API")}}</div> -<p>Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</p> +<p class="summary"><span class="seoSummary">Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</span></p> -<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2> +<p>{{AvailableInWorkers}}</p> -<p>Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。</p> +<h2 id="Concepts_and_usage">概念と利用方法</h2> -<p>また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> +<p>Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。</p> -<p>リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> +<p>また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> -<p><code>fetch()</code> メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。</p> +<p>リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> -<p>{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。</p> +<p><code>fetch()</code> メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)</p> -<p>{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> +<p>{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。</p> -<h3 id="jQueryとの違い">jQueryとの違い</h3> +<p>{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> -<p><code>fetch</code> は主に3つの点で <code>jQuery.ajax()</code> と異なります。</p> +<h3 id="Differences_from_jQuery">jQueryとの違い</h3> + +<p><code>fetch</code> は主に 3 つの点で <code>jQuery.ajax()</code> と異なります。</p> <ul> - <li><code>fetch()</code> から返された Promise は、応答が HTTP <code>404</code> または <code>500</code> であっても、<strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され（<code>ok</code> ステータスが <code>false</code> に設定されます）、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> - <li><code>fetch()</code> は <strong>クロスサイト Cookie</strong> を受信<s>できません</s>。フェッチを使用してクロスサイトセッションを確立することは<s>できません</s>。<s>他のサイトの <code>Set-Cookie</code> ヘッダーは黙って無視されます。</s></li> - <li><code>認証情報: 'same-origin'</code> を設定しない限り、<code>fetch()</code> は <strong>Cookie を送信しません</strong>。 + <li><code>fetch()</code> から返された Promise は、レスポンスが HTTP <code>404</code> または <code>500</code> であっても、 <strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され (<code>ok</code> ステータスが <code>false</code> に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> + <li><code>fetch()</code> は<em>認証情報</em>の<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">初期化オプション</a>を (<code>include</code> に) 設定しない限り、<strong>オリジンをまたいだ Cookie を送信しません</strong>。 <ul> - <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2017年8月</a>、仕様によりデフォルトの認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。 - <ul> - <li>Firefox バージョン 61.0b13</li> - <li>Safari バージョン 12</li> - <li>Chrome バージョン 68</li> - </ul> - </li> - <li>これらのブラウザより古いバージョンをターゲットにしている場合は、Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init オプション</a> の認証情報を必ず含めてください。</li> + <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2018 年 4 月</a>、に仕様が既定の認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。</li> + <li>これらのブラウザより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">init オプション</a> の認証情報を必ず含めてください。</li> </ul> </li> </ul> <div class="note"> -<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a> では、Fetch API の基本概念が解説されています。</p> +<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch の使用</a>を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a>では、Fetch API の基本概念が解説されています。</p> </div> -<h3 id="Aborting_a_fetch" name="Aborting_a_fetch">フェッチを中止する</h3> +<h3 id="Aborting_a_fetch">フェッチの中止</h3> -<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> +<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> -<h2 id="Fetch_Interfaces" name="Fetch_Interfaces">Fetch インターフェイス</h2> +<h2 id="Fetch_Interfaces">Fetch インターフェイス</h2> <dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> <dd><code>fetch()</code> メソッドはリソース取得のために使用されます。</dd> - <dt>{{domxref("Headers")}}</dt> + <dt>{{DOMxRef("Headers")}}</dt> <dd>リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。</dd> - <dt>{{domxref("Request")}}</dt> + <dt>{{DOMxRef("Request")}}</dt> <dd>リソースのリクエストを表します。</dd> - <dt>{{domxref("Response")}}</dt> + <dt>{{DOMxRef("Response")}}</dt> <dd>リクエストに対するレスポンスを表します。</dd> </dl> -<h2 id="Fetch_mixin" name="Fetch_mixin">Fetch ミックスイン</h2> - -<dl> - <dt>{{domxref("Body")}}</dt> - <dd>レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> - <tbody> + <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> + </thead> + <tbody> <tr> - <td>{{SpecName('Fetch')}}</td> - <td>{{Spec2('Fetch')}}</td> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> <td>初回定義</td> </tr> </tbody> </table> -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> - <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> - <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch のポリフィル</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a></li> </ul> diff --git a/files/ja/web/api/push_api/index.html b/files/ja/web/api/push_api/index.html index 15c7aa781c..295bb675dd 100644 --- a/files/ja/web/api/push_api/index.html +++ b/files/ja/web/api/push_api/index.html @@ -12,66 +12,49 @@ tags: - プッシュ通知 translation_of: Web/API/Push_API --- -<div>{{DefaultAPISidebar("Push API")}}</div> +<div>{{ApiRef("Push API")}}</div> -<p class="summary"><ruby><strong>Push API</strong><rp> (</rp><rt>プッシュ通知 API</rt><rp>) </rp></ruby>は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p> +<p class="summary"><strong>Push API</strong> は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p> -<h2 id="Push_concepts_and_usage" name="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2> +<h2 id="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2> <div class="warning"> -<p>PushManager への加入を実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。</p> +<p>PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。</p> <ul> - <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li> + <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li> <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li> </ul> </div> -<p>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p> - -<p>これはボタンのクリックなどといったユーザーの操作への応答として行います。例えば以下のようにします。</p> - -<pre class="brush: js">btn.addEventListener('click', function() { - serviceWorkerRegistration.pushManager.subscribe(options) - .then(function(pushSubscription) { - // handle subscription - }); -})</pre> - -<p>これは単なるベストプラクティスではありません — ユーザーが同意していない通知によってユーザーにスパムを送るべきではありません — が、ブラウザーはユーザーの操作への応答以外で起動される通知を明確に許可しなくなってきています。例えば Firefox は、すでにこれをバージョン72で行っています。</p> +<p>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p> <p>返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。</p> <p>プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。</p> -<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="http://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p> +<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="https://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p> <p>プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。</p> -<div class="note"> -<p><strong>メモ</strong>: Gecko 44 以降では、通知の表示中に別のプッシュ通知メッセージが発行された場合、アプリケーションごとのプッシュ通知メッセージ数の上限は、3秒経つまで加算されません。これは、大量のプッシュ通知メッセージを受け取り、そのすべてが表示される通知を生成するわけではない場合に有効です。</p> -</div> - -<div class="note"> -<p><strong>メモ</strong>: Chrome バージョン 52 より前のバージョンでは、プッシュ通知メッセージの配信のために <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> にプロジェクトを作成する必要があり、そのプロジェクト番号と紐付いた API キーをプッシュ通知の配信に利用していました。また、このサービスを利用するには、アプリマニフェストに特別な値を設定する必要があります。</p> -</div> - -<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> +<h2 id="Interfaces">インターフェイス</h2> <dl> <dt>{{domxref("PushEvent")}}</dt> - <dd>{{domxref("ServiceWorker")}} の<a href="/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd> + <dd>{{domxref("ServiceWorker")}} の<a href="/ja/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd> <dt>{{domxref("PushManager")}}</dt> - <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。このインターフェイスは、非推奨になった {{domxref("PushRegistrationManager")}} インターフェイスの機能を置き換えるものです。</dd> + <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。</dd> <dt>{{domxref("PushMessageData")}}</dt> <dd>サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。</dd> <dt>{{domxref("PushSubscription")}}</dt> <dd>サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。</dd> + <dt>{{domxref("PushSubscriptionOptions")}}</dt> + <dd>プッシュサブスクリプションに関連付けられたオプションを表します。</dd> </dl> -<h2 id="Service_worker_additions" name="Service_worker_additions">サービスワーカーへの追加機能</h2> +<h2 id="Service_worker_additions">サービスワーカーへの追加機能</h2> -<p>以下の <a href="/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p> +<p>以下の <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p> <dl> <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> @@ -82,11 +65,11 @@ translation_of: Web/API/Push_API <dd>{{Event("pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <p>Mozilla の <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> は便利なプッシュ通知の例をたくさん揃えています。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -105,23 +88,17 @@ translation_of: Web/API/Push_API </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<div> <h3 id="PushEvent"><code>PushEvent</code></h3> -<div> <p>{{Compat("api.PushEvent")}}</p> <h3 id="PushMessageData"><code>PushMessageData</code></h3> -<div> <p>{{Compat("api.PushMessageData")}}</p> -</div> -</div> -</div> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html index 3eb39c4f7a..b7d8f9f250 100644 --- a/files/ja/web/api/request/index.html +++ b/files/ja/web/api/request/index.html @@ -60,7 +60,7 @@ browser-compat: api.Request <dl> <dt>{{domxref("Request.arrayBuffer()")}}</dt> - <dd>リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> + <dd>リクエスト本体を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.blob()")}}</dt> <dd>リクエスト本体を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.clone()")}}</dt> diff --git a/files/ja/web/api/response/arraybuffer/index.html b/files/ja/web/api/response/arraybuffer/index.html new file mode 100644 index 0000000000..444a450415 --- /dev/null +++ b/files/ja/web/api/response/arraybuffer/index.html @@ -0,0 +1,95 @@ +--- +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +translation_of: Web/API/Response/arrayBuffer +original_slug: Web/API/Body/arrayBuffer +browser-compat: api.Response.arrayBuffer +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>arrayBuffer()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、リクエストの本文を読み取り、 {{jsxref("ArrayBuffer")}} で解決されるプロミスを返します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.arrayBuffer().then(function(<em>buffer</em>) { + // buffer を使用した何らかの処理 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{jsxref("ArrayBuffer")}} で解決されるプロミス。</p> + +<h2 id="Examples">例</h2> + +<h3 id="Playing_music">音楽の演奏</h3> + +<p><a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer のライブ</a>では、Play ボタンを配置して、押下されると <code>getData()</code> 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように {{domxref("HTMLAudioElement")}} を使いましょう。</p> + +<pre class="brush: js">new Audio("music.ogg").play(); +</pre> + +<p><code>getData()</code> 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、{{domxref("BaseAudioContext/createBufferSource", "AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 読み取りが成功したら、<code>arrayBuffer()</code> を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（<code>source.buffer</code>）として設定し、それから {{domxref("BaseAudioContext/destination", "AudioContext.destination")}} にソースを接続します。</p> + +<p><code>getData()</code> の実行が完了すると、<code>start(0)</code> で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。</p> + +<pre class="brush: js">function getData() { + source = audioCtx.createBufferSource(); + + var myRequest = new Request('viper.ogg'); + + fetch(myRequest).then(function(response) { + return response.arrayBuffer(); + }).then(function(buffer) { + audioCtx.decodeAudioData(buffer, function(decodedData) { + source.buffer = decodedData; + source.connect(audioCtx.destination); + }); + }); +}; + +// wire up buttons to stop and play audio + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +}</pre> + +<h3 id="Reading_files">ファイルを読む</h3> + +<p>{{domxref("Response.Response","Response()")}} コンストラクターは、 {{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、 {{domxref("File")}} を他の形式に読み込むために使用することができます。</p> + +<pre class="brush: js">function readFile(file) { + return new Response(file).arrayBuffer(); +} +</pre> + +<pre + class="brush: html"><input type="file" onchange="readFile(this.files[0])"></pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/blob/index.html b/files/ja/web/api/response/blob/index.html new file mode 100644 index 0000000000..4709a8d364 --- /dev/null +++ b/files/ja/web/api/response/blob/index.html @@ -0,0 +1,65 @@ +--- +title: Response.blob() +slug: Web/API/Response/blob +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob +translation_of: Web/API/Response/blob +original_slug: Web/API/Body/blob +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>blob()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。</span></p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.blob().then(function(<em>myBlob</em>) { + // do something with myBlob +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<div class="note"><strong>注:</strong> {{domxref("Response")}} の {{domxref("Response.type")}} が <code>"opaque"</code> の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は <code>0</code>、{{domxref("Blob.type")}} は空文字列 <code>""</code> になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは<em>役に立たなく</em>なります。</div> + +<h3 id="Return_value">返値</h3> + +<p>{{domxref("Blob")}} で解決するプロミスです。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">fetch request の例</a> (<a href="https://mdn.github.io/fetch-examples/fetch-request/">fetch request をライブで</a>実行) では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest) +.then(response => response.blob()) +.then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; +}); +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/body/index.html b/files/ja/web/api/response/body/index.html new file mode 100644 index 0000000000..8d78608350 --- /dev/null +++ b/files/ja/web/api/response/body/index.html @@ -0,0 +1,80 @@ +--- +title: Response.body +slug: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body +translation_of: Web/API/Response/body +original_slug: Web/API/Body/body +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>body</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文コンテンツの {{domxref("ReadableStream")}} です。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">response.body;</pre> + +<h3 id="Value">値</h3> + +<p>{{domxref("ReadableStream")}} です。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://mdn.github.io/dom-examples/streams/simple-pump/">単純なストリームポンプ</a>の例では、画像を読み取り、<code>response.body</code> を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。</p> + +<pre class="brush: js">const image = document.getElementById('target'); + +// 元の画像をフェッチ +fetch('./tortoise.png') +// その body を ReadableStream として取得 +.then(response => response.body) +.then(body => { + const reader = body.getReader(); + + return new ReadableStream({ + start(controller) { + return pump(); + + function pump() { + return reader.read().then(({ done, value }) => { + // データを消費する必要がなくなったら、ストリームを閉じます + if (done) { + controller.close(); + return; + } + + // 次のデータチャンクを対象のストリームのキューに入れます + controller.enqueue(value); + return pump(); + }); + } + } + }) +}) +.then(stream => new Response(stream)) +.then(response => response.blob()) +.then(blob => URL.createObjectURL(blob)) +.then(url => console.log(image.src = url)) +.catch(err => console.error(err));</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> +</ul> diff --git a/files/ja/web/api/response/bodyused/index.html b/files/ja/web/api/response/bodyused/index.html new file mode 100644 index 0000000000..75c0ca3d1d --- /dev/null +++ b/files/ja/web/api/response/bodyused/index.html @@ -0,0 +1,67 @@ +--- +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +translation_of: Web/API/Response/bodyUsed +original_slug: Web/API/Body/bodyUsed +browser-compat: api.Response.bodyUsed +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>bodyUsed</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文が読取済みであるかどうかを示す論理値です。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">response.bodyUsed;</pre> + +<h3 id="Value">値</h3> + +<p>論理値。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch リクエストの例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch リクエストをライブで</a>実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> + +<p><code>response.bodyUsed</code> を <code>response.blob()</code> の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では <code>false</code> を返し、その後では <code>true</code> を返します。</p> + +<h3 id="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</pre> + +<h3 id="JS_Content">JS コンテンツ</h3> + +<pre class="brush: js">var myImage = document.querySelector('.my-image'); +fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { + console.log(response.bodyUsed); + var res = response.blob(); + console.log(response.bodyUsed); + return res; +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/formdata/index.html b/files/ja/web/api/response/formdata/index.html new file mode 100644 index 0000000000..00e18dd12d --- /dev/null +++ b/files/ja/web/api/response/formdata/index.html @@ -0,0 +1,58 @@ +--- +title: Response.formData() +slug: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +translation_of: Web/API/Response/formData +original_slug: Web/API/Body/formData +browser-compat: api.Response.formData +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>formData()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。</p> + +<div class="note"> + <p><strong>メモ</strong>: これは主に<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>に関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために <code>formData()</code> を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.formData() +.then(function(<em>formdata</em>) { + // formdata を使った何らかの処理 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。</p> + +<h2 id="Example">例</h2> + +<p>TBD.</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/index.html b/files/ja/web/api/response/index.html index 3884020535..3fb9af40df 100644 --- a/files/ja/web/api/response/index.html +++ b/files/ja/web/api/response/index.html @@ -9,120 +9,121 @@ tags: - Interface - Reference - Response +browser-compat: api.Response translation_of: Web/API/Response --- <div>{{APIRef("Fetch API")}}</div> -<p><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Response</code></strong> インターフェイスは、リクエストのレスポンスを表します。</p> +<p><span class="seoSummary"><strong><code>Response</code></strong> は <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> のインターフェイスで、リクエストのレスポンスを表します。</span></p> -<p>{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。</p> +<p><code>Response</code> オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される <code>Response</code> オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。</p> -<h2 id="コンストラクタ">コンストラクタ</h2> +<h2 id="Constructor">コンストラクター</h2> <dl> <dt>{{domxref("Response.Response","Response()")}}</dt> <dd>新しい <code>Response</code> オブジェクトを返します。</dd> </dl> -<h2 id="プロパティ">プロパティ</h2> +<h2 id="Properties">プロパティ</h2> <dl> + <dt>{{domxref("Response.body")}} {{readonlyInline}}</dt> + <dd>本文のコンテンツの {{domxref("ReadableStream")}} です。</dd> + <dt>{{domxref("Response.bodyUsed")}} {{readonlyInline}}</dt> + <dd>本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。</dd> <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> - <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。</dd> + <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。</dd> <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> - <dd>レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。</dd> + <dd>レスポンスが成功 (<code>200</code>–<code>299</code> の範囲のステータス) したか否かを通知する論理値が入ります。</dd> <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> - <dd>レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。</dd> + <dd>レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。</dd> <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> - <dd>HTTPステータスコードを返す。(例：200 成功)</dd> + <dd>このレスポンスのステータスコードを返します (成功ならば <code>200</code> になります)。</dd> <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> - <dd>ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。</dd> + <dd>ステータスコードに対応したステータスメッセージが入ります (たとえば <code>200</code> ならば <code>OK</code>)。</dd> + <dt>{{domxref("Response.trailers")}}</dt> + <dd>{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。</dd> <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> - <dd>レスポンスのタイプを示す。(例：basic,cors)</dd> + <dd>レスポンスの種類です。 (例えば <code>basic</code>, <code>cors</code>)</dd> <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> - <dd>レスポンスのURLを返す。</dd> - <dt>{{domxref("Response.useFinalURL")}}</dt> - <dd>レスポンスの最後の URL かどうかを通知する boolean 値を含む。</dd> + <dd>レスポンスのURLを返します。</dd> </dl> -<p><code>Response</code> は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:</p> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> +<h2 id="Methods">メソッド</h2> <dl> + <dt>{{domxref("Response.arrayBuffer()")}}</dt> + <dd>レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.blob()")}}</dt> + <dd>レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Response.clone()")}}</dt> - <dd><code>Response</code> オブジェクトのクローンを生成する。</dd> + <dd><code>Response</code> オブジェクトの複製を生成します。</dd> <dt>{{domxref("Response.error()")}}</dt> - <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返す。</dd> + <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返します。</dd> + <dt>{{domxref("Response.formData()")}}</dt> + <dd>レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.json()")}}</dt> + <dd>レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.redirect()")}}</dt> - <dd>異なる URL で新しい response を生成する</dd> + <dd>異なる URL で新しい response を生成します。</dd> + <dt>{{domxref("Response.text()")}}</dt> + <dd>レスポンスの本文のテキスト表現で解決するプロミスを返します。</dd> </dl> -<p><code>Response</code> は {{domxref("Body")}} を実装しているため、次のメソッドも使用可能です:</p> -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("ArrayBuffer")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("Blob")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("FormData")}} オブジェクトで解決する promise を返す。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{jsxref("JSON")}} オブジェクトで解決する promise を返す。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("USVString")}} （text）で解決する promise を返す。</dd> -</dl> +<h2 id="Examples">例</h2> + +<h3 id="Fetching_an_image">画像のフェッチ</h3> -<h2 id="例">例</h2> +<p><a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="https://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた <code>Response</code> オブジェクトで解決します。</p> -<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。</p> +<p>画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。</p> -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(blob) { - var objectURL = URL.createObjectURL(blob); - myImage.src = objectURL; +<pre class="brush: js">const image = document.querySelector('.my-image'); +fetch('flowers.jpg') +.then(response => response.blob()) +.then(blob => { + const objectURL = URL.createObjectURL(blob); + image.src = objectURL; });</pre> -<p>カスタム <code>Response</code> オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：</p> +<p>{{domxref("Response.Response()")}} コンストラクターを使用して、独自の <code>Response</code> オブジェクトを生成することもできます。</p> + +<pre class="brush: js">const response = new Response();</pre> + +<h3 id="An_Ajax_Call">Ajax 呼び出し</h3> -<pre class="brush: js">var myResponse = new Response();</pre> +<p>ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。</p> -<h2 id="仕様">仕様</h2> +<pre class="brush: js">// Function to do an Ajax call +const doAjax = async () => { + const response = await fetch('Ajax.php'); // Generate the Response object + if (response.ok) { + const jsonValue = await response.json(); // Get JSON value from the response body + return Promise.resolve(jsonValue); + } else { + return Promise.reject('*** PHP file not found'); + } +} -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#response-class','Response')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +// Call the function and output value or error message to console +doAjax().then(console.log).catch(console.log); +</pre> -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> +<h2 id="Specifications">仕様書</h2> +{{Specifications}} +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.Response")}}</p> +<p>{{Compat}}</p> -<h2 id="関連項目">関連項目</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/response/json/index.html b/files/ja/web/api/response/json/index.html new file mode 100644 index 0000000000..f59b3f4313 --- /dev/null +++ b/files/ja/web/api/response/json/index.html @@ -0,0 +1,78 @@ +--- +title: Response.json() +slug: Web/API/Response/json +tags: + - API + - Fetch + - JSON + - Method + - Reference + - メソッド + - Response +translation_of: Web/API/Response/json +original_slug: Web/API/Body/json +browser-compat: api.Response.json +--- +<div>{{APIRef("Fetch API")}}</div> + +<p><strong><code>json()</code></strong> は {{DOMxRef("Response")}} インターフェイスのメソッドで、 {{DOMxRef("Response")}} のストリームを取得して完全に読み取ります。本文のテキストを {{JSxRef("JSON")}} として解釈した結果で解決するプロミスを返します。</p> + +<p>なお、このメソッドは <code>json()</code> という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.json().then(<em>data</em> => { + // data を使用した処理を実行する +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-json/">fetch json をライブで</a>実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して <code>.json</code> ファイルを読み取ります。読み取りに成功したら、<code>json()</code> を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。</p> + +<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); +const myRequest = new Request('products.json'); + +fetch(myRequest) + .then(response => response.json()) + .then(data => { + for (const product of data.products) { + let listItem = document.createElement('li'); + listItem.appendChild( + document.createElement('strong') + ).textContent = product.Name; + listItem.append( + ` can be found in ${ + product.Location + }. Cost: ` + ); + listItem.appendChild( + document.createElement('strong') + ).textContent = `£${product.Price}`; + myList.appendChild(listItem); + } + }) + .catch(console.error);</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/text/index.html b/files/ja/web/api/response/text/index.html new file mode 100644 index 0000000000..26aafdcfe7 --- /dev/null +++ b/files/ja/web/api/response/text/index.html @@ -0,0 +1,74 @@ +--- +title: Response.text() +slug: Web/API/Response/text +tags: + - API + - Fetch + - Method + - Reference + - Text + - Response +translation_of: Web/API/Response/text +original_slug: Web/API/Body/text +browser-compat: api.Response.text +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>text()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{jsxref("String")}} で解決するプロミスを返します。 レスポンスは<em>常に</em> UTF-8 としてデコードされます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><var>response</var>.text().then(function (<var>text</var>) { + // text レスポンスを使用して何か実行する。 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{jsxref("String")}} で解決するプロミスです。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">fetch text の例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-text/">fetch text をライブで</a>実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（<code>myLinks</code> 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、 <code>getData()</code> 関数がリンクの <code>data-page</code> 識別子を引数として実行されるように、<code>onclick</code> イベントハンドラーを設定します。</p> + +<p><code>getData()</code> が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の <code>.txt</code> ファイルをフェッチします。 フェッチが成功したら、<code>text()</code> を使用してレスポンスから {{domxref("USVString")}} (テキスト) オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。</p> + +<pre class="brush: js">let myArticle = document.querySelector('article'); +let myLinks = document.querySelectorAll('ul a'); + +for(let i = 0; i <= myLinks.length-1; i++) { + myLinks[i].onclick = function(e) { + e.preventDefault(); + let linkData = e.target.getAttribute('data-page'); + getData(linkData); + } +}; + +function getData(pageId) { + console.log(pageId); + var myRequest = new Request(pageId + '.txt'); + fetch(myRequest).then(function(response) { + return response.text().then(function(text) { + myArticle.innerHTML = text; + }); + }); +}</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html index 531e02d875..13be6a4506 100644 --- a/files/ja/web/css/caret-color/index.html +++ b/files/ja/web/css/caret-color/index.html @@ -3,68 +3,81 @@ title: caret-color slug: Web/CSS/caret-color tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - HTML 整形 - - HTML 色 + - CSS Property + - CSS User Interface + - Editing + - HTML Colors + - Input - Reference + - Styling HTML + - Text Editing + - caret + - caret-color - contenteditable - - テキスト編集 - - 入力 - - 編集 + - 'recipe:css-property' +browser-compat: css.properties.caret-color translation_of: Web/CSS/caret-color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">CSS の <strong><code>caret-color</code></strong> プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。</span>キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> +<p><strong><code>caret-color</code></strong> は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである<strong>入力キャレット</strong>の色を設定します。これは<strong>テキスト入力カーソル</strong>と呼ばれることもあります。キャレットは {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> <div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが <code>auto</code> のときにテキスト上に移動した場合や、 <code>cursor</code> プロパティが <code>text</code> または <code>vertical-text</code> の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush: css no-line-numbers">/* キーワード値 */ caret-color: auto; caret-color: transparent; -caret-color: currentColor; +caret-color: currentcolor; /* <color> 値 */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); -</pre> -<h3 id="Values" name="Values">値</h3> +/* グローバル値 */ +caret-color: inherit; +caret-color: initial; +caret-color: revert; +caret-color: unset;</pre> + +<h3 id="Values">値</h3> <dl> <dt><code>auto</code></dt> - <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 + <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 <div class="note"> - <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションで補完されません。</p> + <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションでは補完されません。</p> </div> </dd> <dt>{{cssxref("<color>")}}</dt> <dd>キャレットの色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Setting_a_custom_caret_color">独自のキャレット色の設定</h3> -<pre class="brush: html"><input value="この入力欄は既定のキャレットを使用します。" size="64"/> -<input class="custom" value="キャレットが独自の色です！" size="64"/> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input value="このフィールドは既定のキャレットを使用します。" size="64"/> +<input class="custom" value="キャレットが独自の色になります！" size="64"/> <p contenteditable class="custom">この段落は編集可能であり、 同様にキャレットが独自の色です！</p></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">input { caret-color: auto; @@ -76,47 +89,29 @@ input.custom { caret-color: red; } - p.custom { caret-color: green; }</pre> -<h3 id="結果">結果</h3> - -<p>{{EmbedLiveSample('Example', 500, 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td> - <td>{{Spec2("CSS3 UI")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h4 id="Result">結果</h4> -<p>{{cssinfo}}</p> +<p>{{EmbedLiveSample('Setting_a_custom_caret_color', 500, 200)}}</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.caret-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{HTMLElement("input")}} 要素</li> <li>要素のテキストを編集可能にする HTML の {{htmlattrxref("contenteditable")}} 属性</li> - <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> - <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">内容を編集可能にする</a></li> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> <li>{{cssxref("<color>")}} データ型</li> <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> </ul> diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html index cc1879d559..768c36a8d8 100644 --- a/files/ja/web/css/column-rule/index.html +++ b/files/ja/web/css/column-rule/index.html @@ -3,16 +3,11 @@ title: column-rule slug: Web/CSS/column-rule tags: - CSS + - CSS Multi-column Layout - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - column-rule - - column-rule-color - - column-rule-style - - column-rule-width - - リファレンス - - 一括指定プロパティ - - 段組み + - Reference + - 'recipe:css-property' +browser-compat: css.properties.column-rule translation_of: Web/CSS/column-rule --- <div>{{CSSRef}}</div> @@ -21,15 +16,13 @@ translation_of: Web/CSS/column-rule <div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>これは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>であり、一回の便利な宣言で個別の <code>column-rule-*</code> プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。</p> <div class="note"> <p><strong>メモ:</strong> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">column-rule: dotted; column-rule: solid 8px; @@ -39,43 +32,48 @@ column-rule: thick inset blue; /* グローバル値 */ column-rule: inherit; column-rule: initial; +column-rule: revert; column-rule: unset; </pre> -<p><code>column-rule</code> プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。</p> +<p><code>column-rule</code> プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。</p> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code><'column-rule-width'></code></dt> - <dd>{{cssxref("<length>")}} または3つのキーワード、 <code>thin</code>, <code>medium</code>, <code>thick</code> のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> + <dd>{{cssxref("<length>")}} または 3 つのキーワード、 <code>thin</code>、<code>medium</code>、<code>thick</code> のうちの 1 つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> <dt><code><'column-rule-style'></code></dt> <dd>有効な値と詳細は {{cssxref("border-style")}} を参照してください。</dd> <dt><code><'column-rule-color'></code></dt> <dd>{{cssxref("<color>")}} 値です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Example_1" name="Example_1">例1</h3> +<h3 id="Example_1">例 1</h3> -<pre class="brush: css">/* "medium dotted currentColor" と同じ */ +<pre class="brush: css">/* "medium dotted currentcolor" と同じ */ p.foo { column-rule: dotted; } /* "medium solid blue" と同じ */ p.bar { column-rule: solid blue; } -/* "8px solid currentColor" と同じ */ +/* "8px solid currentcolor" と同じ */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } </pre> -<h3 id="Example_2" name="Example_2">例2</h3> +<h3 id="Example_2">例 2</h3> <h4 id="HTML">HTML</h4> @@ -97,31 +95,23 @@ p.abc { column-rule: thick inset blue; } } </pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample('Example_2')}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="See_also">関連情報</h2> -<p>{{Compat("css.properties.column-rule")}}</p> +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li>{{CSSXref("column-rule-style")}}</li> + <li>{{CSSXref("column-rule-width")}}</li> + <li>{{CSSXref("column-rule-color")}}</li> +</ul> diff --git a/files/ja/web/html/attributes/rel/index.html b/files/ja/web/html/attributes/rel/index.html new file mode 100644 index 0000000000..9a3da3d8be --- /dev/null +++ b/files/ja/web/html/attributes/rel/index.html @@ -0,0 +1,419 @@ +--- +title: 'HTML attribute: rel' +slug: Web/HTML/Attributes/rel +tags: + - Attribute + - Attributes + - Constraint validation + - Link + - form + - rel +translation_of: Web/HTML/Attributes/rel +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p class="summary"><strong><code>rel</code></strong> 属性は、リンク先のリソースと現在の文書との関係を定義します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}}、{{htmlelement('form')}} で有効で、対応する値は属性が見つかった要素に依存します。</p> + +<p>関係の種類は <code>rel</code> 属性の値によって決まりますが、 <code>rel</code> 属性が存在する場合は、一連の固有のキーワードが順不同で空白で区切られたものであることが必要です。意味を表現しないクラス名とは異なり、 <code>rel</code> 属性は機械と人間の両方にとって意味のあるトークンを表現しなければなりません。現在、 <code>rel</code> 属性の値として登録されているのは、 <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">IANA link relation registry</a>、<a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">HTML Living Standard</a>、そして Living Standard が<a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types">提案している</a> microformats wiki の自由に編集可能な <a href="https://microformats.org/wiki/existing-rel-values">existing-rel-values page</a> ページです。上記の 3 つの情報源のいずれにも存在しない <code>rel</code> 属性が使用された場合、 HTML バリデーター (<a href="https://validator.w3.org/">W3C Markup Validation Service</a> など) によっては警告を生成します。</p> + +<p>次の表は、既存のキーワードの中でも特に重要なものです。空白で区切られた値の中のすべてのキーワードは、その値の中で一意でなければなりません。</p> + +<table class="standard-table"> + <caption><code>rel</code> 属性の値と、それぞれが関連する要素</caption> + <thead> + <tr> + <th><code>rel</code> の値</th> + <th>説明</th> + <th><code>{{htmlelement('link')}}</code></th> + <th><code>{{htmlelement('a')}}</code> および <code>{{htmlelement('area')}}</code></th> + <th><code>{{htmlelement('form')}}</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("attr-alternate", "alternate")}}</code></td> + <td>現在の文書の別な表現。</td> + <td>リンク</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-author", "author")}}</code></td> + <td>現在の文書や記事の著者。</td> + <td>リンク</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-bookmark", "bookmark")}}</code></td> + <td>直近の祖先の章に対するパーマリンク。</td> + <td class="not-allowed">不許可</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-canonical", "canonical")}}</code></td> + <td>現在の文書の推奨 URL。</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code></td> + <td>宛先リソースのオリジンに対する DNS 解決を先取りして行うようブラウザーに指示する</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-external", "external")}}</code></td> + <td>参照先の文書は、現在の文書と同じサイトの一部ではありません。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-help", "help")}}</code></td> + <td>コンテンツに応じたヘルプにリンクします。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-icon", "icon")}}</code></td> + <td>現在の文書を表すアイコンです。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-license", "license")}}</code></td> + <td>現在の文書のメインコンテンツが、参照先の文書で説明されている著作権ライセンスによってカバーされていることを示す。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> + <td>ウェブアプリマニフェスト</td> + <td>リンク</td> + <td>不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td> + <td>スクリプトを先取りして取得し、後で評価できるようにこの文書のモジュールマップに保存するようブラウザーに指示します。オプションで、モジュールの依存関係も読み取ることができます。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-next", "next")}}</code></td> + <td>現在の文書が一連の文書の一部であり、その中の次の文書が参照先の文書であることを示します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-nofollow", "nofollow")}}</code></td> + <td>現在の文書の原著者または発行者が、参照先の文書を支持していないことを示します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/noopener">noopener</a></code></td> + <td>ハイパーリンクが補助的な閲覧コンテキストのいずれかを生成する (つまり、適切な <code>target</code> 属性値を持つ) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを生成します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-noreferrer", "noreferrer")}}</code></td> + <td><code>Referer</code> ヘッダーを含めません。さらに、 <code>noopener</code> と同じ効果もあります。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-opener", "opener")}}</code></td> + <td>ハイパーリンクによって、補助閲覧コンテキストではない最上位の閲覧コンテキストが生成される場合 (すなわち、 <code>target</code> 属性の値が "<code>_blank</code>" である場合)、補助閲覧コンテキストを生成します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-pingback", "pingback")}}</code></td> + <td>現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preconnect">preconnect</a></code></td> + <td>ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みすることを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td> + <td>ユーザーエージェントが、後続のナビゲーションに必要となる可能性の高いターゲットリソースを先取りしてキャッシュすることを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preload">preload</a></code></td> + <td><code><a href="as">as</a></code> 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュしなければならないことを指定する。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prerender">prerender</a></code></td> + <td>ユーザーエージェントが、対象となるリソースを先取りして取得し、将来的に高速なレスポンスを実現するための処理を行うことを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-prev", "prev")}}</code></td> + <td>現在の文書が一連の文書の一部であり、その中の前の文書が参照先の文書であることを示します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-search", "search")}}</code></td> + <td>現在の文書とその関連ページを検索するのに使用できるリソースへのリンクを提供します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-stylesheet", "stylesheet")}}</code></td> + <td>スタイルシートをインポートします。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-tag", "tag")}}</code></td> + <td>現在の文書に適用される (与えられたアドレスで識別される) タグを与えます。</td> + <td class="not-allowed">不許可</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + </tbody> +</table> + +<p><code>rel</code> 属性は {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}}、{{htmlelement('form')}} の各要素に関連していますが、これらの要素のサブセットにのみ関連する値もあります。他の HTML キーワード属性の値と同様に、これらの値は大文字小文字の区別がありません。</p> + +<p><code>rel</code> rel属性には既定値がありません。属性が省略された場合や、属性の値がいずれも対応されていない場合、文書は宛先のリソースとの間にハイパーリンクがあるということ以外には、特に関係を持ちません。この場合、 {{htmlelement('link')}} と {{htmlelement('form')}} では、 <code>rel</code> 属性がない場合、キーワードがない場合、または上記のスペースで区切られたキーワードのうち 1 つ以上がない場合、その要素はいかなるリンクも生成しません。 {{htmlelement('a')}} と {{htmlelement('area')}} はリンクを生成しますが、関係は定義されません。</p> + +<h2 id="Values">値</h2> + +<dl> + <dt>{{htmlattrdef("alternate")}}</dt> + <dd>現在の文書の代替表現を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} で有効であり、意味は他の属性の値に依存します。 + <ul> + <li><code>{{anch('stylesheet')}}</code> キーワードと共に <code><link></code> で使用された場合は、代替スタイルシートを生成します。 + <pre class="brush:html"><!-- 常設スタイルシート --> +<link rel="stylesheet" href="default.css"> +<!-- 代替スタイルシート --> +<link rel="alternate stylesheet" href="highcontrast.css" title="High contrast"></pre> + </li> + <li>この文書の言語と異なる <a href="hreflang">hreflang</a> 属性と共に使用された場合は、翻訳版を表します。</li> + <li><a href="type">type</a> 属性と共に使用された場合は、属性によって、参照先の文書が異なるファイル形式のの同じコンテンツであることを示します。例えば、 <code>type="application/rss+xml"</code> とすると、シンジケーションフィードを参照するハイパーリンクが生成されます。 + <pre class="brush:html"><link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog"></pre> + </li> + <li><a href="hreflang">hreflang</a> と <a href="type">type</a> の両属性と共に使用された場合は、この文書の別の言語、他のメディア向けの別なファイル形式の版へのリンクを指定します。 + <pre class="brush:html"><link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> +<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"></pre> + </li> + </ul> + <p class="note">メモ: 廃止された <code>rev="made"</code> は <code>rel="alternate"</code> として扱われます。</p> + </dd> + <dt>{{htmlattrdef("author")}}</dt> + <dd>現在の文書や記事の著者を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} 要素で使用された場合、 <code>author</code> キーワードはハイパーリンクを生成します。 {{htmlelement('a')}} と {{htmlelement('area')}} では、リンクされた文書 (または<code>mailto:</code>) が、最も近い祖先の {{htmlelement('article')}} があればその祖先の著者に関する情報を提供することを示し、そうでなければ文書全体を示します。 {{htmlelement('link')}} の場合は、文書全体の著者を表します。</dd> + <dt>{{htmlattrdef("bookmark")}}</dt> + <dd>{{htmlelement('a')}} および {{htmlelement('area')}} の <code>rel</code> 属性の値として使用されると、このブックマークは祖先のセクションに対して、 1 つ以上あれば最も近い祖先の {{htmlelement('article')}} または {{htmlelement('section')}} を、そうでなければ最も近い見出しの兄弟または祖先の子孫・・・というようにパーマリンクを提供します。</dd> + <dt>{{htmlattrdef("canonical")}}</dt> + <dd>{{htmlelement('link')}} で有効であり、現在の文書で推奨される URL を示します。検索エンジンで有用です。</dd> + <dt>{{htmlattrdef("dns-prefetch")}}</dt> + <dd>{{htmlelement('link')}} 要素が {{htmlelement('body')}} と {{htmlelement('head')}} の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある <a href="/ja/docs/Web/Performance/dns-prefetch">dns-prefetch</a> を参照してください。</dd> + <dt>{{htmlattrdef("external")}}</dt> + <dd>{{htmlelement('form')}}、{{htmlelement('a')}}、{{htmlelement('area')}} に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。</dd> + <dt>{{htmlattrdef("help")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} に関連し、 <code>help</code> キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。 <code><link></code> 内で使用された場合、ヘルプは文書全体を対象とします。 {{htmlelement('a')}} および {{htmlelement('area')}} に含まれていて対応している場合、既定のカーソルが <code>pointer</code> ではなく <code>help</code> になります。</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd> + <p>{{htmlelement('link')}} と共に有効で、リンクされたリソースは、現在の文書の、ユーザーインターフェースでページを表現するためのリソースであるアイコンを表します。</p> + + <p><code>icon</code> の値の最も一般的な用途はファビコンです。</p> + + <pre class="brush: html"><link rel="icon" href="favicon.ico"></pre> + + <p>複数の <code><link rel="icon"></code> があった場合、ブラウザーはそれぞれの <a href="media"><code>media</code></a> 属性、<a href="type"><code>type</code></a> 属性、 <a href="sizes"><code>sizes</code></a> 属性を使って、最も適切なアイコンを選択します。複数のアイコンが同じように適切である場合は、最後のアイコンが使用されます。最も適切なアイコンが、対応していないファイル形式を使用しているなどの理由で不適切であることが後に判明した場合、ブラウザーは次に適切なアイコンを選択します。</p> + + <div class="notecard note"> + <p>Firefox 83 以前は <a href="/ja/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> 属性が <code>rel="icon"</code> で対応していませんでしたが、 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">Chrome でも未解決の問題があります</a>。</p> + </div> + + <p><strong>メモ:</strong> Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や <a href="sizes"><code>sizes</code></a> 属性を使用していません。代わりに、標準外の <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> および <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> をそれぞれ使用しています。</p> + + <p class="note"><code>shortcut</code> リンク種別が <code>icon</code> の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので<strong>使用しないでください</strong>。</p> + </dd> + <dt>{{htmlattrdef("license")}}</dt> + <dd> + <p>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} の各要素で有効である <code>license</code> の値は、ハイパーリンクがライセンス情報を記述した文書につながること、現在の文書のメインコンテンツが、参照された文書で記述された著作権ライセンスによってカバーされていることを示します。 {{HTMLElement("head")}} 要素内にない場合、規格では、文書の特定の部分に適用されるハイパーリンクか、文書全体に適用されるハイパーリンクかを区別していません。ページ上のデータのみがこれを示すことができます。</p> + + <pre class="brush: html"><link rel="license" href="#license"></pre> + + <p><strong>メモ:</strong> 認識はされているものの、同義語の <code>copyright</code> は正しくないため使用しないでください。</p> + </dd> + <dt>{{htmlattrdef("manifest")}}</dt> + <dd><a href="/ja/docs/Web/Manifest">ウェブアプリマニフェスト</a>です。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。</dd> + <dt>{{htmlattrdef("modulepreload")}}</dt> + <dd>パフォーマンスの向上に役立ちます。文書内の {{htmlelement('link')}} に関連して、 <code>rel="modulepreload"</code> を設定すると、ブラウザーはスクリプト (および依存関係) を先取りして取得し、文書のモジュールマップに保存して後で評価するようになります。 <code>modulepreload</code> リンクは、モジュールが必ずしも必要になる前に、モジュールマップに準備された (評価されていない) モジュールでネットワークの取得を確実に行うことができます。<a href="/ja/docs/Web/HTML/Link_types/modulepreload">link types: <code>modulepreload</code></a> も参照してください。</dd> + <dt>{{htmlattrdef("next")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>next</code> の値は、現在の文書が一連の文書の一部であり、次の文書が参照先の文書であることを示します。 <code><link></code> に含まれている場合、ブラウザーはその文書が次に取得されると仮定し、リソースのヒントとして扱うことができます。</dd> + <dt>{{htmlattrdef("nofollow")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>nofollow</code> キーワードは、サーチエンジンスパイダーにリンク関係を無視するよう指示します。 nofollow の関係は、現在の文書の所有者が、参照先の文書を支持していないことを示す場合があります。このキーワードは、検索エンジンオプティマイザーが、リンクファームがスパムページではないことを示すために使用します。</dd> + <dt>{{htmlattrdef("noopener")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、ハイパーリンクがそもそもこれらのいずれかを作成する (つまり、適切な <code>target</code> 属性値を持っている) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを作成します。言い換えれば、 <code><a href="/ja/docs/Web/API/Window/opener">window.opener</a></code> が null で <code><a href="target">target</a>="_parent"</code> が設定されているかのようにリンクを動作させます。<br> + <br> + これは {{anch("opener")}} の逆です。</dd> + <dt>{{htmlattrdef("noreferrer")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、この値を含めると、リファラーを不明とし (<code>Referer</code> ヘッダーが含まれません)、あたかも <code>noopener</code> も設定されているかのように、最上位のの閲覧コンテキストが生成されます。</dd> + <dt>{{htmlattrdef("opener")}}</dt> + <dd>ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合 (すなわち "<code>_blank</code>" が <code>target</code> 属性の値として設定されている場合)、補助的な閲覧コンテキストを生成します。事実上、 {{anch("noopener")}} の逆です。</dd> + <dt>{{htmlattrdef("pingback")}}</dt> + <dd>現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。</dd> + <dt>{{htmlattrdef("preconnect")}}</dt> + <dd>ユーザーエージェントが対象リソースのオリジンに先回りして接続することを指定します。</dd> + <dt>{{htmlattrdef("prefetch")}}</dt> + <dd>ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd><code><a href="as">as</a></code> 属性で指定された潜在的な方向 (および対応する方向に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュする必要があることを指定します。</dd> + <dt>{{htmlattrdef("prerender")}}</dt> + <dd>ユーザーエージェントが先取りしてターゲットリソースを取得し、将来のより速いレスポンスに役立つ方法で処理することを指定します。</dd> + <dt>{{htmlattrdef("prev")}}</dt> + <dd> + <p>{{anch("next")}} キーワードと同様に、{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>prev</code> の値は、現在の文書が一連の文書の一部であり、このリンクが一連の文書内の直前の文書を参照していることを示します。</p> + + <p>メモ: 別名である <code>previous</code> は正しくないため使用しないでください。</p> + </dd> + <dt>{{htmlattrdef("search")}}</dt> + <dd> + <p>Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} の各要素に関連する <code>search</code> キーワードは、ハイパーリンクが、現在の文書、サイト、および関連リソースでの検索のために特別に設計されたインターフェイスを持つ文書を参照していることを示し、検索に使用できるリソースへのリンクを提供します。</p> + + <p><code><a href="type">type</a></code> 属性が <code>application/opensearchdescription+xml</code> に設定されている場合、そのリソースは、Firefox や Internet Explorer などの一部のブラウザーのインターフェイスに簡単に追加できる <a href="/ja/docs/Web/OpenSearch">OpenSearch</a> プラグインです。</p> + </dd> + <dt>{{htmlattrdef("stylesheet")}}</dt> + <dd> + <p>{{htmlelement('link')}} 要素で有効で、スタイルシートとして使われる外部リソースをインポートします。 <code><a href="type">type</a></code> 属性は <code>text/css</code> スタイルシートの場合は既定値となっているので必要ありません。 <code>text/css</code> 種類のスタイルシートでない場合は、 type を宣言するのがベストです。</p> + + <p>この属性は、リンクがスタイルシートであることを定義しますが、他の属性や rel 値内の他のキーワードとの相互作用は、スタイルシートがダウンロードされるかどうかや使用されるかどうかに影響します。</p> + + <p>{{anch('alternate')}} キーワードと一緒に使われると、代替のスタイルシートを定義します。この場合、空ではない <code><a href="type">title</a></code> を入れてください。</p> + + <p>メディアが <code><a href="media">media</a></code> 属性の値と一致しない場合、外部スタイルシートは使用されず、ダウンロードもされません。</p> + + <p>オリジンをまたいだ読み取りには CORS プロトコルが必要です。</p> + </dd> + <dt>{{htmlattrdef("tag")}}</dt> + <dd>{{htmlelement('a')}} と {{htmlelement('area')}} 要素で有効であり、現在の文書に適用される (指定されたアドレスで識別される) タグを与えます。タグの値は、リンク先の文書に適用されるタグを記述した文書を参照していることを示します。このリンク種別は、タグクラウド内のタグには適していません。タグクラウド内のタグは、複数のページに適用されるのに対し、 <code>rel</code> 属性の <code>tag</code> 値は単一の文書に適用されるからです。</dd> +</dl> + +<h3 id="Non-standard_values">標準外の値</h3> + +<dl> + <dt>apple-touch-icon-precomposed</dt> + <dd> + <pre class="brush: html"> <!-- third-generation iPad with high-resolution Retina display: --> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"> + <!-- iPhone with high-resolution Retina display: --> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png"> + <!-- first- and second-generation iPad: --> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png"> + <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> + <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png"> + <!-- basic favicon --> + <link rel="icon" href="/static/img/favicon32.7f3da72dcea1.png"></pre> + </dd> +</dl> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("html.elements.attributes.rel")}}</p> + +<h2 id="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>opener</code> を追加。<code>noopener</code> を <code>target="_blank"</code> の既定値とした。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>tag</code>、<code>search</code>、<code>prefetch</code>、<code>noreferrer</code>、<code>nofollow</code>、<code>icon</code>、<code>author</code> を追加。<br> + <code>copyright</code> を <code>license</code> に改名。<br> + <code>start</code>、<code>chapter</code>、<code>section</code>、<code>subsection</code>、<code>appendix</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td><code>preload</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td><code>dns-prefetch</code>、<code>preconnect</code>、<code>prerender</code> の値を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td><code>alternate</code>、<code>stylesheet</code>、<code>start</code>、<code>chapter</code>、<code>section</code>、<code>subsection</code>、<code>appendix</code>、<code>bookmark</code> を追加。<br> + <code>previous</code> を <code>prev</code> に改名。<br> + <code>top</code> と <code>search</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td> + <p>{{Spec2("HTML3.2")}}<span class="spec-Obsolete"> (廃止)</span></p> + </td> + <td><code>top</code>、<code>contents</code>、<code>index</code>、<code>glossary</code>、<code>copyright</code>、<code>next</code>、<code>previous</code>、<code>help</code>、<code>search</code> を追加。</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td>{{Spec2("HTML2.0")}}<span class="spec-Obsolete">(廃止)</span></td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_2">ブラウザーの互換性</h2> + +<p>{{Compat("html.elements.link.rel")}}</p> + +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLLinkElement.relList")}}</li> + <li>{{domxref("HTMLAnchorElement.relList")}}</li> + <li>{{domxref("HTMLAreaElement.relList")}}</li> +</ul> diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html index 4cb803f548..80a78a36ff 100644 --- a/files/ja/web/html/element/input/date/index.html +++ b/files/ja/web/html/element/input/date/index.html @@ -234,7 +234,7 @@ input:valid+span::after { }</pre> <div class="warning"> -<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したいrすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> +<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> </div> <h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html b/files/ja/web/javascript/reference/errors/is_not_iterable/index.html deleted file mode 100644 index 665371733f..0000000000 --- a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: 'TypeError: ''x'' is not iterable' -slug: Web/JavaScript/Reference/Errors/is_not_iterable -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/is_not_iterable ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not iterable" は、 <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: 'x' is not iterable (Firefox, Chrome) -TypeError: 'x' is not a function or its return value is not iterable (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではありません。反復可能なものは、 {{jsxref("Array")}}, {{jsxref("String")}}, {{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復可能プロトコル</a>を実装しているオブジェクトが成ることができます。</p> - -<h2 id="例">例</h2> - -<h3 id="Iterating_over_Object_properties">オブジェクトのプロパティの反復処理</h3> - -<p>JavaScript では、 {{jsxref("Object")}} は<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a> を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> を使用することはできません。</p> - -<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' }; -for (let p of obj) { // TypeError: obj is not iterable - // … -} -</pre> - -<p>代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。</p> - -<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' }; -// Iterate over the property names: -for (let country of Object.keys(obj)) { - var capital = obj[country]; - console.log(country, capital); -} - -for (const [country, capital] of Object.entries(obj)) - console.log(country, capital); - -</pre> - -<p>この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。</p> - -<pre class="brush: js example-good">var map = new Map; -map.set('France', 'Paris'); -map.set('England', 'London'); -// Iterate over the property names: -for (let country of map.keys()) { - let capital = map[country]; - console.log(country, capital); -} - -for (let capital of map.values()) - console.log(capital); - -for (const [country, capital] of map.entries()) - console.log(country, capital); -</pre> - -<h3 id="Iterating_over_a_generator">ジェネレーターを反復処理する</h3> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a> 反復可能オブジェクトを生成するために呼び出す関数です。</p> - -<pre class="brush: js example-bad">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate) // TypeError: generate is not iterable - console.log(x); -</pre> - -<p>ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。</p> - -<pre class="brush: js example-good">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate(1,2)) - console.log(x); -</pre> - -<h3 id="Iterating_over_a_custom_iterable">独自の反復可能オブジェクトでの反復処理</h3> - -<p>独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを持っている必要があります。 -</p> - -<pre class="brush: js example-bad">const myEmptyIterable = { - [Symbol.iterator]() { - return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 - } -} - -Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable -</pre> - -<p>こちらは正しい実装です。</p> - -<pre class="brush: js example-good">const myEmptyIterable = { - [Symbol.iterator]() { - return [][Symbol.iterator]() - } -} - -Array.from(myEmptyIterable); // [] -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a></li> - <li>{{jsxref("Object.keys")}}</li> - <li>{{jsxref("Object.entries")}}</li> - <li>{{jsxref("Map")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.md b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md new file mode 100644 index 0000000000..3b3ffb43aa --- /dev/null +++ b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md @@ -0,0 +1,136 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Errors/is_not_iterable +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not iterable" は、 [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: 'x' is not iterable (Firefox, Chrome) +TypeError: 'x' is not a function or its return value is not iterable (Chrome) +``` + +## エラー種別 + +{{jsxref("TypeError")}} + +## エラーの原因 + +[for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではありません。反復可能なものは、{{jsxref("Array")}}、{{jsxref("String")}}、{{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装しているオブジェクトが成ることができます。</p> + +## 例 + +### オブジェクトのプロパティの反復処理 + +JavaScript では、 {{jsxref("Object")}} は[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) を使用することはできません。</p> + +```js example-bad +var obj = { 'France': 'Paris', 'England': 'London' }; +for (let p of obj) { // TypeError: obj is not iterable + // … +} +``` + +代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。 + +```js example-good +var obj = { 'France': 'Paris', 'England': 'London' }; +// Iterate over the property names: +for (let country of Object.keys(obj)) { + var capital = obj[country]; + console.log(country, capital); +} + +for (const [country, capital] of Object.entries(obj)) + console.log(country, capital); +``` + +この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。 + +```js example-good +var map = new Map; +map.set('France', 'Paris'); +map.set('England', 'London'); +// Iterate over the property names: +for (let country of map.keys()) { + let capital = map[country]; + console.log(country, capital); +} + +for (let capital of map.values()) + console.log(capital); + +for (const [country, capital] of map.entries()) + console.log(country, capital); +``` + +### ジェネレーターの反復処理 + +[ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators)は反復可能オブジェクトを生成するために呼び出す関数です。</p> + +```js example-bad +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate) // TypeError: generate is not iterable + console.log(x); +``` + +ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。 + +```js example-good +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate(1,2)) + console.log(x); +``` + +### 独自の反復可能オブジェクトでの反復処理 + +独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを返す必要があります。 + +```js example-bad +const myEmptyIterable = { + [Symbol.iterator]() { + return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 + } +} + +Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable +``` + +こちらは正しい実装です。 + +```js example-good +const myEmptyIterable = { + [Symbol.iterator]() { + return [][Symbol.iterator]() + } +} + +Array.from(myEmptyIterable); // [] +``` + +## 関連情報 + +- [反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) +- {{jsxref("Object.keys")}} +- {{jsxref("Object.entries")}} +- {{jsxref("Map")}} +- [ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators) +- [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) +</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html b/files/ja/web/javascript/reference/errors/no_non-null_object/index.html deleted file mode 100644 index 93d167e25a..0000000000 --- a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'TypeError: "x" is not a non-null object' -slug: Web/JavaScript/Reference/Errors/No_non-null_object -tags: -- Error -- Errors -- JavaScript -- TypeError -translation_of: Web/JavaScript/Reference/Errors/No_non-null_object ---- -<div>{{JSSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a non-null object" は、オブジェクトが何かを求めているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Invalid descriptor for property {x} (Edge) -TypeError: "x" is not a non-null object (Firefox) -TypeError: Property description must be an object: "x" (Chrome) -TypeError: Invalid value used in weak set (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>どこかでオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。</p> - -<h2 id="例">例</h2> - -<h3 id="Property_descriptor_expected">プロパティディスクリプターが期待される場合</h3> - -<p>{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能なディスクリプター引数として、プロパティディスクリプターオブジェクトが想定されます。 (ただの数値のように) オブジェクトを提供しないと、エラーが発生します。</p> - -<pre class="brush: js example-bad">Object.defineProperty({}, 'key', 1); -// TypeError: 1 is not a non-null object - -Object.defineProperty({}, 'key', null); -// TypeError: null is not a non-null object -</pre> - -<p>有効なプロパティディスクリプターはこのようになります。</p> - -<pre class="brush: js example-good">Object.defineProperty({}, 'key', { value: 'foo', writable: false }); -</pre> - -<h3 id="WeakMap_and_WeakSet_objects_require_object_keys"><code>WeakMap</code> オブジェクトと <code>WeakSet</code> オブジェクトはオブジェクトキーが必要</h3> - -<p>{{jsxref("WeakMap")}} オブジェクトと {{jsxref("WeakSet")}} オブジェクトはオブジェクトキーを保持します。そのほかの型をキーとして使用できません。</p> - -<pre class="brush: js example-bad">var ws = new WeakSet(); -ws.add('foo'); -// TypeError: "foo" is not a non-null object</pre> - -<p>代わりにオブジェクトを使用してください。</p> - -<pre class="brush: js example-good">ws.add({foo: 'bar'}); -ws.add(window); -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.defineProperty()")}}、{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("WeakMap")}}、{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.md b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md new file mode 100644 index 0000000000..b548d38c6a --- /dev/null +++ b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md @@ -0,0 +1,73 @@ +--- +title: 'TypeError: "x" is not a non-null object' +slug: Web/JavaScript/Reference/Errors/No_non-null_object +tags: +- Error +- Errors +- JavaScript +- TypeError +translation_of: Web/JavaScript/Reference/Errors/No_non-null_object +--- +{{JSSidebar("Errors")}} + +JavaScript の例外 "is not a non-null object" は、ある場所でオブジェクトが期待されているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。 + +## エラーメッセージ + +```js +TypeError: Invalid descriptor for property {x} (Edge) +TypeError: "x" is not a non-null object (Firefox) +TypeError: Property description must be an object: "x" (Chrome) +TypeError: Invalid value used in weak set (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +ある場所でオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。 + +## 例 + +## プロパティ記述子が求められている場合 + +{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能な記述子の引数として、プロパティ記述子オブジェクトが想定されます。 (ただの数値など) オブジェクト以外のものを提供すると、エラーが発生します。 + +```js example-bad +Object.defineProperty({}, 'key', 1); +// TypeError: 1 is not a non-null object + +Object.defineProperty({}, 'key', null); +// TypeError: null is not a non-null object +``` + +有効なプロパティ記述子はこのようになります。 + +```js example-good +Object.defineProperty({}, 'key', { value: 'foo', writable: false }); +``` + +## `WeakMap` および `WeakSet` オブジェクトにはオブジェクトキーが必要 + +{{jsxref("WeakMap")}} および {{jsxref("WeakSet")}} オブジェクトはオブジェクトをキーとして保持します。そのほかの型をキーとして使用できません。 + +```js example-bad +var ws = new WeakSet(); +ws.add('foo'); +// TypeError: "foo" is not a non-null object +``` + +代わりにオブジェクトを使用してください。 + +```js example-good +ws.add({foo: 'bar'}); +ws.add(window); +``` + +## 関連項目 + +- {{jsxref("Object.create()")}} +- {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}} +- {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html b/files/ja/web/javascript/reference/errors/not_a_constructor/index.html deleted file mode 100644 index b916bafd40..0000000000 --- a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'TypeError: "x" is not a constructor' -slug: Web/JavaScript/Reference/Errors/Not_a_constructor -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Object doesn't support this action (Edge) -TypeError: "x" is not a constructor - -TypeError: Math is not a constructor -TypeError: JSON is not a constructor -TypeError: Symbol is not a constructor -TypeError: Reflect is not a constructor -TypeError: Intl is not a constructor -TypeError: Atomics is not a constructor -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="What_went_wrong">エラーの原因</h2> - -<p>オブジェクト、または変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、<a href="/ja/docs/Glossary/Constructor">コンストラクター</a>または <a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子を参照してください。</p> - -<p>{{jsxref("String")}} や {{jsxref("Array")}} のような、<code>new</code> を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、 それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません:。</p> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">function*</a> も、コンストラクターとして使用することはできません。</p> - -<h2 id="Examples">例</h2> - -<h3 id="Invalid_cases">無効な場合</h3> - -<pre class="brush: js example-bad">var Car = 1; -new Car(); -// TypeError: Car is not a constructor - -new Math(); -// TypeError: Math is not a constructor - -new Symbol(); -// TypeError: Symbol is not a constructor - -function* f() {}; -var obj = new f; -// TypeError: f is not a constructor -</pre> - -<h3 id="A_car_constructor">car コンストラクター</h3> - -<p>自動車のためのオブジェクト型を作成するとします。このオブジェクト型を <code>Car</code> と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>次のようにして <code>mycar</code> というオブジェクトを生成できるようになりました。</p> - -<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre> - -<h3 id="In_Promises">プロミスの場合</h3> - -<p>直ちに解決するか拒否されるプロミスを返す場合は、 <em>new Promise(...)</em> を生成して操作する必要はありません。</p> - -<p>これは正しくなく (<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise">Promise コンストラクター</a>が正しく呼び出されません)、 <code>TypeError: this is not a constructor</code> 例外が発生します。</p> - -<pre class="brush: js example-bad">return new Promise.resolve(true); -</pre> - -<p>Instead, use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">static methods</a>:</p> - -<pre class="brush: js">// This is legal, but unnecessarily long: -return new Promise((resolve, reject) => { resolve(true); }) - -// Instead, return the static method: -return Promise.resolve(true); -return Promise.reject(false); -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.md b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md new file mode 100644 index 0000000000..697342bae4 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md @@ -0,0 +1,105 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Errors/Not_a_constructor +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Object doesn't support this action (Edge) +TypeError: "x" is not a constructor + +TypeError: Math is not a constructor +TypeError: JSON is not a constructor +TypeError: Symbol is not a constructor +TypeError: Reflect is not a constructor +TypeError: Intl is not a constructor +TypeError: Atomics is not a constructor +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +オブジェクトや変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、[コンストラクター](/ja/docs/Glossary/Constructor)または [`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を参照してください。 + +{{jsxref("String")}} や {{jsxref("Array")}} のような、 `new` を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません。 + +[ジェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/function*)も、コンストラクターとして使用することはできません。 + +## 例 + +### 無効な場合 + +```js example-bad +var Car = 1; +new Car(); +// TypeError: Car is not a constructor + +new Math(); +// TypeError: Math is not a constructor + +new Symbol(); +// TypeError: Symbol is not a constructor + +function* f() {}; +var obj = new f; +// TypeError: f is not a constructor +``` + +### car コンストラクター + +自動車のためのオブジェクト型を作成するとします。このオブジェクト型を `Car` と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。 + +```js +function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +``` + +次のようにして `mycar` というオブジェクトを生成できるようになりました。 + +```js +var mycar = new Car('Eagle', 'Talon TSi', 1993); +``` + +### プロミスの場合 + +ただちに解決するか拒否されるプロミスを返す場合は、 _new Promise(...)_ を生成して操作する必要はありません。 + +これは正しくなく ([Promise コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)が正しく呼び出されません)、 `TypeError: this is not a constructor` 例外が発生します。</p> + +```js example-bad +return new Promise.resolve(true); +``` + +代わりに、 [Promise.resolve()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) または +[Promise.reject()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) の[静的メソッド](<https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%A6)#%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89>)を使用してください。 + +<pre class="brush: js">// This is legal, but unnecessarily long: +return new Promise((resolve, reject) => { resolve(true); }) + +// Instead, return the static method: +return Promise.resolve(true); +return Promise.reject(false); +</pre> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> +</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.html b/files/ja/web/javascript/reference/errors/read-only/index.html deleted file mode 100644 index f3c6566eac..0000000000 --- a/files/ja/web/javascript/reference/errors/read-only/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'TypeError: "x" is read-only' -slug: Web/JavaScript/Reference/Errors/Read-only -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>The JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict - mode</a>-only exception "is read-only" occurs when a global variable or object - property that was assigned to is a read-only property.</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) -TypeError: "x" is read-only (Firefox) -TypeError: 0 is read-only (Firefox) -TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) -TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>値を割り当てようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#writable_attribute">non-writable データプロパティ</a> です。)</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードコード</a> のときにだけ発生します。strict コードではない場合、割り当ては無視されるだけです。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成できます。</p> - -<pre class="brush: js example-bad">'use strict'; -var obj = Object.freeze({name: 'Elsa', score: 157}); -obj.score = 0; // TypeError - -'use strict'; -Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); -LUNG_COUNT = 3; // TypeError - -'use strict'; -var frozenArray = Object.freeze([0, 1, 2]); -frozenArray[0]++; // TypeError -</pre> - -<p>JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。 Math の定数を再定義しようとしたとします。</p> - -<pre class="brush: js example-bad">'use strict'; -Math.PI = 4; // TypeError -</pre> - -<p>残念ながらできません。</p> - -<p>グローバル変数の <code>undefined</code> も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。</p> - -<pre class="brush: js example-bad">'use strict'; -undefined = function() {}; // TypeError: "undefined" is read-only -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<pre class="brush: js example-good">'use strict'; -var obj = Object.freeze({name: 'Score', points: 157}); -obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える - -'use strict'; -var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない -LUNG_COUNT = 3; // ok （解剖学的にはおかしいけれども） -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.freeze()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.md b/files/ja/web/javascript/reference/errors/read-only/index.md new file mode 100644 index 0000000000..4e6ea7f36b --- /dev/null +++ b/files/ja/web/javascript/reference/errors/read-only/index.md @@ -0,0 +1,86 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Errors/Read-only +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)のみの例外 "is read-only" は、代入されたグローバル変数またはオブジェクトプロパティが読み取り専用プロパティであった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) +TypeError: "x" is read-only (Firefox) +TypeError: 0 is read-only (Firefox) +TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) +TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +代入しようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 [non-writable データプロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute)です。) + +このエラーは、 [strict モードのコード](/en-US/docs/Web/JavaScript/Reference/Strict_mode)にだけ発生します。 strict コードではない場合、割り当ては無視されるだけです。</p> + +## 例 + +### 無効な場合 + +<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成することができます。</p> + +```js example-bad +'use strict'; +var obj = Object.freeze({name: 'Elsa', score: 157}); +obj.score = 0; // TypeError + +'use strict'; +Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); +LUNG_COUNT = 3; // TypeError + +'use strict'; +var frozenArray = Object.freeze([0, 1, 2]); +frozenArray[0]++; // TypeError +``` + +JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。数学的な定数を再定義しようとしたとします。 + +```js example-bad +'use strict'; +Math.PI = 4; // TypeError +``` + +残念ながらできません。 + +グローバル変数の `undefined` も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。 + +```js example-bad +'use strict'; +undefined = function() {}; // TypeError: "undefined" is read-only +``` + +### 有効な場合 + +```js example-good +'use strict'; +var obj = Object.freeze({name: 'Score', points: 157}); +obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える + +'use strict'; +var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない +LUNG_COUNT = 3; // ok (解剖学的にはおかしいけれども) +``` + +## 関連情報 + +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Object.freeze()")}} diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html b/files/ja/web/javascript/reference/errors/var_hides_argument/index.html deleted file mode 100644 index a189e60963..0000000000 --- a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: variable "x" redeclares argument' -slug: Web/JavaScript/Reference/Errors/Var_hides_argument -tags: -- Error -- Errors -- JavaScript -- Strict Mode -- TypeError -translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言された場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: variable "x" redeclares argument (Firefox) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a> でのみ、{{jsxref("TypeError")}} の警告がでます。</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>関数の引数として使用されたものと同じ変数名が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言されています。これは命名が競合する可能性があるため、JavaScript が警告を発します。</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードのコード</a> でのみ発生します。非 strict モードでは、再宣言は暗黙裡に無視されます。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>このケースでは、変数 "arg" 引数を再宣言しています。</p> - -<pre class="brush: js example-bad">'use strict'; - -function f(arg) { - var arg = 'foo'; -} -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<p><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。</p> - -<pre class="brush: js example-good">'use strict'; - -function f(arg) { - arg = 'foo'; -} -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.md b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md new file mode 100644 index 0000000000..1bdc5a54f5 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md @@ -0,0 +1,60 @@ +--- +title: 'TypeError: variable "x" redeclares argument' +slug: Web/JavaScript/Reference/Errors/Var_hides_argument +tags: +- Error +- Errors +- JavaScript +- Strict Mode +- TypeError +translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言された場合に発生します。 + +## エラーメッセージ + +```js +TypeError: variable "x" redeclares argument (Firefox) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} の警告は [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 + +## エラーの原因 + +関数の引数として使用されたものと同じ変数名が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言されています。これは命名が競合する可能性があるため、 JavaScript が警告を発します。 + +このエラーは、 [strict モードのコード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 strict モード以外では、再宣言は暗黙裡に無視されます。</p> + +## 例 + +### 無効な場合 + +このケースでは、変数 "arg" 引数を再宣言しています。 + +```js example-bad +'use strict'; + +function f(arg) { + var arg = 'foo'; +} +``` + +### 有効な場合 + +[`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。 + +```js example-good +'use strict'; + +function f(arg) { + arg = 'foo'; +} +``` + +## 関連情報 + +- [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.html b/files/ja/web/javascript/reference/functions/default_parameters/index.html deleted file mode 100644 index 6e362bd32b..0000000000 --- a/files/ja/web/javascript/reference/functions/default_parameters/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: デフォルト引数 -slug: Web/JavaScript/Reference/Functions/Default_parameters -tags: - - ECMAScript 2015 - - Functions - - JavaScript - - Language feature - - 言語機能 - - 関数 -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -<div>{{jsSidebar("Functions")}}</div> - -<p><span class="seoSummary"><strong>関数のデフォルト引数</strong> は、関数に値が渡されない場合や <code>undefined</code> が渡される場合に、デフォルト値で初期化される形式上の引数を指定できます。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) { - <var>文</var> -} -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。</p> - -<p>以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、<code>undefined</code> であった場合に値を代入することでした。</p> - -<p>次の例では、<code><var>b</var></code> の値を指定せずに <code>multiply</code> を呼び出した場合、<code><var>a</var> * <var>b</var></code> を評価するときに <code><var>b</var></code> の値が <code>undefined</code> となり、<code>multiply</code> は <code>NaN</code> を返します。</p> - -<pre class="brush: js">function multiply(a, b) { - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // NaN ! -</pre> - -<p>こうなることを防ぐためには、2行目で使われているように、<code>multiply</code> が 1 つだけの引数で呼び出された場合に <code><var>b</var></code> を <code>1</code> に設定します。</p> - -<pre class="brush: js">function multiply(a, b) { - b = (typeof b !== 'undefined') ? b : 1 - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // 5 -</pre> - -<p>ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で <code>1</code> を <code><var>b</var></code> の既定値として設定するだけです。</p> - -<pre class="brush: js">function multiply(a, b = 1) { - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // 5 -multiply(5, undefined) // 5 -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="undefined_とその他の_falsy_な値を渡した場合"><code>undefined</code> とその他の falsy な値を渡した場合</h3> - -<p>この例の 2番目の呼び出しでは、第1引数で明示的に (<code>null</code> やその他の {{glossary("falsy")}} な値ではなく) <code>undefined</code> を設定していても、<code><var>num</var></code> 引数の値は既定値のままになります</p> - -<pre class="brush: js">function test(num = 1) { - console.log(typeof num) -} - -test() // 'number' (num は 1 に設定) -test(undefined) // 'number' (こちらも num は 1 に設定) - -// 他の falsy な値での検査 -test('') // 'string' (num は '' に設定) -test(null) // 'object' (num は null に設定) -</pre> - -<h3 id="Evaluated_at_call_time" name="Evaluated_at_call_time">呼び出し時の評価</h3> - -<p>デフォルト引数は<em>呼び出し時</em>に評価されるので、Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。</p> - -<pre class="brush: js">function append(value, array = []) { - array.push(value) - return array -} - -append(1) //[1] -append(2) //[1, 2] ではなく [2] -</pre> - -<p>これは、関数と変数にも適用されます。</p> - -<pre class="brush: js">function callSomething(thing = something()) { - return thing -} - -let numberOfTimesCalled = 0 -function something() { - numberOfTimesCalled += 1 - return numberOfTimesCalled -} - -callSomething() // 1 -callSomething() // 2 -</pre> - -<h3 id="Earlier_parameters_are_available_to_later_default_parameters" name="Earlier_parameters_are_available_to_later_default_parameters">前の引数を後のデフォルト引数で利用可能</h3> - -<p>前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。</p> - -<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) { - return [name, greeting, message] -} - -greet('David', 'Hi') // ["David", "Hi", "Hi David"] -greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] -</pre> - -<p>この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。</p> - -<pre class="brush: js">function go() { - return ':P' -} - -function withDefaults(a, b = 5, c = b, d = go(), e = this, - f = arguments, g = this.value) { - return [a, b, c, d, e, f, g] -} - -function withoutDefaults(a, b, c, d, e, f, g) { - switch (arguments.length) { - case 0: - a; - case 1: - b = 5; - case 2: - c = b; - case 3: - d = go(); - case 4: - e = this; - case 5: - f = arguments; - case 6: - g = this.value; - default: - } - return [a, b, c, d, e, f, g]; -} - -withDefaults.call({value: '=^_^='}); -// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] - -withoutDefaults.call({value: '=^_^='}); -// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] -</pre> - -<h3 id="Functions_defined_inside_function_body" name="Functions_defined_inside_function_body">関数本体の内部で定義された関数</h3> - -<p>関数の本体の中で宣言された関数は、外側の関数のデフォルト引数の中で参照することができません。これを行おうとすると、{{jsxref("ReferenceError")}} が発生します。</p> - -<p>デフォルト引数は、常に最初に実行され、関数本体内の関数宣言は、その後に評価されるからです。</p> - -<pre class="brush: js">// 動作しません。ReferenceError が発生します。 -function f(a = go()) { - function go() { return ':P' } -} -</pre> - -<h3 id="Parameters_without_defaults_after_default_parameters" name="Parameters_without_defaults_after_default_parameters">デフォルト引数の後の既定値なしの引数</h3> - -<p>引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。</p> - -<pre class="brush: js">function f(x = 1, y) { - return [x, y] -} - -f() // [1, undefined] -f(2) // [2, undefined] -</pre> - -<h3 id="Destructured_parameter_with_default_value_assignment" name="Destructured_parameter_with_default_value_assignment">既定値のある分割代入の引数</h3> - -<p>既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。</p> - -<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { - return x + y + z -} - -f() // 6</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.functions.default_parameters")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external">Original proposal at ecmascript.org</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.md b/files/ja/web/javascript/reference/functions/default_parameters/index.md new file mode 100644 index 0000000000..4d0833cd3b --- /dev/null +++ b/files/ja/web/javascript/reference/functions/default_parameters/index.md @@ -0,0 +1,229 @@ +--- +title: デフォルト引数 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +browser-compat: javascript.functions.default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +{{jsSidebar("Functions")}} + +**関数のデフォルト引数**は、関数に値が渡されない場合や `undefined` が渡された場合に、デフォルト値で初期化される形式上の引数を指定することができます。 + +{{EmbedInteractiveExample("pages/js/functions-default.html")}} + +## 構文 + +```js +function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } +``` + +## 解説 + +JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。 + +以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、`undefined` であった場合に値を代入することでした。 + +次の例では、`b` の値を指定せずに `multiply` を呼び出した場合、`a` * `b` を評価するときに `b` の値が `undefined` となり、`multiply` は `NaN` を返します。</p> + +```js +function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +``` + +こうなることを防ぐためには、 2 行目で使われているように、`multiply` が 1 つだけの引数で呼び出された場合に `b` を `1` に設定します。</p> + +```js +function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +``` + +ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で `1` を `b` の既定値として設定するだけです。 + +```js +function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +``` + +## 例 + +### `undefined` とその他の偽値を渡した場合 + +この例の 2 番目の呼び出しでは、第 1 引数で明示的に (`null` やその他の{{glossary("falsy", "偽値")}}ではなく) `undefined` を設定していても、`num` 引数の値は既定値のままになります。</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num は 1 に設定) +test(undefined) // 'number' (こちらも num は 1 に設定) + +// 他の偽値での検査 +test('') // 'string' (num は '' に設定) +test(null) // 'object' (num は null に設定) +</pre> + +### 呼び出し時の評価 + +デフォルト引数は*呼び出し時*に評価されるので、(例えば) Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。 + +```js +function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [1, 2] ではなく [2] +``` + +これは、関数と変数にも適用されます。 + +```js +function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +``` + +### 前の引数を後のデフォルト引数で利用可能 + +前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。 + +```js +function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +``` + +この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。 + +```js +function go() { + return ':P' +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g] +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +``` + +### スコープの影響 + +デフォルト引数が 1 つ以上定義された場合、引数リスト内の識別子のみに対する[第二のスコープ](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) が生成されます。このスコープは関数本体のために生成されたスコープの親になります。 + +すなわち、関数の本体で宣言された関数や変数は、デフォルト値の引数初期化子から参照することができません。これを行おうとすると、実行時に {{jsxref("ReferenceError")}} の例外が発生します。 + +また、関数の本体内で `var` を使用して宣言した変数は、同じ名前の引数をマスクするので、通常の `var` 宣言の重複に効果がないのとは異なります。 + +次の関数では、デフォルト引数が関数本体の子スコープにアクセスできないため、呼び出されると `ReferenceError` が発生します。T + +```js example-bad +function f(a = go()) { // `f` を呼び出すと `ReferenceError` が発生する。 + function go() { return ':P' } +} +``` + +...そしてこの関数は、変数 `var a` が (引数リストに作成された親スコープではなく) 関数本体に作成されたスコープの最上部にのみ巻き上げられているため、 `undefined` と表示されます。 + +```js example-bad +function f(a, b = () => console.log(a)) { + var a = 1 + b() // `undefined` と表示。デフォルト引数の値は独自のスコープにあるため +} +``` + +### デフォルト引数の後の既定値なしの引数 + +引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。 + +```js +function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +``` + +### 既定値のある分割代入の引数 + +既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。 + +```js +function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ecmascript.org における元の提案](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values) diff --git a/files/ja/web/tutorials/index.html b/files/ja/web/tutorials/index.html index 16f3ae2e10..4cd2d73e47 100644 --- a/files/ja/web/tutorials/index.html +++ b/files/ja/web/tutorials/index.html @@ -7,245 +7,196 @@ tags: - HTML - JavaScript - MDN - - Web 記事 - - Web 開発 + - ウェブ記事 + - ウェブ開発 - ガイド - コード - チュートリアル - - ブラウザ + - ブラウザー - 初心者 translation_of: Web/Tutorials --- -<p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これから始める初心者の方や基礎を勉強中の方、そして Web 開発のベテランの方にとっても、ベストプラクティスを学習するのに役に立つ教材が見つかります。</p> +<p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これからウェブ開発を始めようとしている方、基礎を学ぼうとしている方、ウェブ開発に慣れている方など、ベストプラクティスを学習するのに役立つ教材をここで見つけることができます。</p> -<p>これらの教材は、オープン標準や Web 開発のベストプラクティスを支持する、将来を見据えた先見の明のある企業やWeb 開発者が、クリエティブ・コモンズなどのオープンコンテントライセンスに準じて作成したもので、翻訳物が提供されています。もしそうでない場合は、他の人が翻訳することが許可されています。</p> +<p>これらの教材は、先見の明のある企業やウェブ開発者が、オープン標準やウェブ開発のベストプラクティスを支持して、クリエティブ・コモンズなどのオープンコンテンツライセンスに準じて提供や翻訳を許可しています。</p> -<h2 id="For_complete_beginners_to_the_Web" name="For_complete_beginners_to_the_Web">Web について全くの初心者の人たちへ</h2> +<h2 id="For_complete_beginners_to_the_Web">ウェブについて全くの初心者の人たちへ</h2> <dl> - <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a></dt> - <dd><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際に Web に公開します。</dd> + <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></dt> + <dd><em>ウェブ入門</em>は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際にウェブに公開します。</dd> </dl> -<h2 class="Documentation" id="Documentation" name="Documentation">HTML チュートリアル</h2> +<h2 class="Documentation" id="HTML-Tutorials">HTML チュートリアル</h2> -<h3 id="Introductory_level" name="Introductory_level">入門レベル</h3> +<h3 id="Introductory_level">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></dt> - <dd>HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML ドキュメントの構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。</dd> - <dt><strong><a href="/ja/docs/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt> - <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとのサポート状況も分かります。</dd> + <dd>HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML 文書の構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。</dd> + <dt><strong><a href="/ja/docs/Web/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt> + <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとの対応状況も分かります。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">HTML を使用したシンプルなWeb ページの作成</a> (The Blog Starter)</strong></dt> - <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、一般的なタグを紹介しています。また、段階ごとに基本的なWeb ページを作成するためのコード例を載せています。</dd> - <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML チャレンジ</a> (Wikiversity)</strong></dt> - <dd>問題に挑戦し HTML スキル (例: <h2> か <strong> のどちらをを使うべきか) を磨いて下さい。マークアップが意味のあるものになっているかがポイントです。</dd> + <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Creating a Simple Web Page with HTML</a> (英語)</strong></dt> + <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、よくあるタグを紹介しています。また、段階ごとに基本的なウェブページを作成するためのコード例を載せています。</dd> + <dt><strong><a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (英語)</strong></dt> + <dd>問題に挑戦し HTML のスキルを磨きましょう。マークアップが意味のあるものになっているか (例: <h2> か <strong> のどちらをを使うべきか) がポイントです。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level" name="Intermediate_level">中級レベル</h3> +<h3 id="Intermediate_level">中級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> - <dd>このモジュールでは、Web ページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のWeb ページ全体を挿入するのかについても触れています。</dd> + <dd>このモジュールでは、ウェブページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のウェブページ全体を挿入するのかについても触れています。</dd> </dl> -</div> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt> - <dd>表の形のデータを Web ページにおいて、理解可能な形式、そしてアクセシビリティに配慮した形式で表現することは少し難しいでしょう。このモジュールは、基本的な table のマークアップ、そしてさらに複雑な機能(たとえば注や要約を付加したり)を扱います。</dd> + <dd>ウェブページにおいて、表の形のデータを理解可能な形、そしてアクセシビリティに配慮した形で表現することは少し難しいでしょう。このモジュールは、基本的な表のマークアップ、そしてさらに注や要約を付加など、もっと複雑な機能を扱います。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level" name="Advanced_level">上級レベル</h3> +<h3 id="Advanced_level">上級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> - <dt><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></dt> - <dd>HTML フォームは、Web の重要な部品です。フォームは多くの機能を提供し、ユーザーが Web サイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。</dd> - <dt><a href="/ja/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">読み込みが速い HTML ページを作成するヒント</a></dt> - <dd>Web ページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。</dd> + <dt><a href="/ja/docs/Learn/Forms">HTML フォーム</a></dt> + <dd>HTML フォームは、ウェブの重要な部品です。フォームは多くの機能を提供し、ユーザーがウェブサイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。</dd> </dl> -</div> -</div> -<h2 class="Documentation" id="Documentation" name="Documentation">CSS チュートリアル</h2> +<dl> + <dt><strong><a href="/ja/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">読み込みが速い HTML ページを作成するヒント</a></strong></dt> + <dd>ウェブページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。</dd> +</dl> -<h3 id="Introductory_level_2" name="Introductory_level_2">入門レベル</h3> +<h2 class="Documentation" id="CSS-Tutorials">CSS チュートリアル</h2> + +<h3 id="Introductory_level_2">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></dt> - <dd>CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使って Web ページをどのように飾るのですか？</dd> - <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a></dt> - <dd>このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、CSS のデバッグが含まれています。</dd> + <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使ってウェブページをどのように飾るのですか？</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a></dt> + <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルづけやレイアウトに使用されます。例えば、コンテンツのフォント、色、サイズ、間隔を変更したり、複数の段に分割したり、アニメーションやその他の装飾機能を追加したりすることができます。このモジュールでは、 CSS がどのように機能するか、どのような構文になっているか、そして HTML にスタイルを追加するためにどのように使い始めるか、といった基本的な内容で、 CSS マスターへの道を順番に始めます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスのスタイリング</a></dt> - <dd>次に、ボックスのスタイリングを見てみましょう。これは Web ページのレイアウトを行う基本的なステップの 1 つです。このモジュールでは、ボックスモデルの padding、border、margin の設定や、カスタム背景色や画像や柄、ボックスのフィルターや影を描くなどの装飾機能による、ボックスレイアウトの制御をおさらいします。</dd> - <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイリング</a></dt> - <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd> - <dt><a href="/ja/docs/Web/CSS/Common_CSS_Questions">CSS に関する一般的な質問</a></dt> - <dd>初心者から寄せられる一般的な質問とその回答です。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> + <dd> + <p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>の続きです。言語とその構文に慣れ、基本的な使用方法を身につけたところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターの種類、単位、サイズ調整、背景や境界線のスタイル、デバッグなどについて学びます。</p> + + <p class="summary">このモジュールの目的は、有能な CSS を書くためのツールキットを提供し、<dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、すべての基本的な理論を理解してもらうことです。</p> + </dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a></dt> + <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストのスタイル付けの基礎を確認します。ページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd> + <dt><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS に関するよくある質問</a></dt> + <dd>初心者から寄せられるよくある質問とその回答です。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level_2" name="Intermediate_level_2">中級レベル</h3> +<h3 id="Intermediate_level_2">中級レベル</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> - <dd>この時点で、CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、CSS のレイアウト、様々なディスプレイ設定、float と positioning を含む従来のレイアウト方法、flexbox のような新しいレイアウトツールなどについて詳しく調べることができます。</dd> - <dt><strong><a href="/ja/docs/CSS/CSS_Reference">CSS リファレンス</a></strong></dt> - <dd>CSS の完全なリファレンス。Firefox やその他のブラウザーの対応の詳細もあります。</dd> + <dd>この時点で、 CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、 CSS のレイアウト、様々な display の設定、浮動 (float) と位置指定 (positioning) を含む従来のレイアウト方法、フレックスボックスのような新しいレイアウトツールなどについて詳しく調べることができます。</dd> + <dt><strong><a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a></strong></dt> + <dd>CSS の完全なリファレンスです。Firefox やその他のブラウザーの対応の詳細もあります。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a> (A List Apart)</strong></dt> - <dd>前からある印刷用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd> - <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS チャレンジ</a> (Wikiversity)</strong></dt> + <dt><strong><a href="https://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a></strong></dt> + <dd>前からある植字用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd> + <dt><strong><a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (英語)</strong></dt> <dd>CSS スキルを確認し、何を勉強すべきかを知ることができます。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level_2" name="Advanced_level_2">上級レベル</h3> +<h3 id="Advanced_level_2">上級レベル</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> - <dt><a href="/ja/docs/CSS/Using_CSS_transforms">CSS による変形処理を使う</a></dt> + <dt><strong><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変換の使用</a></strong></dt> <dd>CSS を使って、回転、傾き、拡大、縮小、移動を行います。</dd> - <dt><a href="/ja/docs/CSS/CSS_transitions">CSS トランジション</a></dt> - <dd>CSS3 ドラフトの仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a></dt> + <dd>CSS3 草稿の仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face による Web フォント指定のクイックガイド</a> (HTML5 Rocks)</dt> - <dd>CSS3 の @font-face 機能を使うとWeb 上にあるカスタム字体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd> - <dt><a href="http://davidwalsh.name/starting-css" rel="external">CSS を書き初める</a> (David Walsh)</dt> + <dt><a href="https://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face によるウェブフォント指定のクイックガイド</a></dt> + <dd>CSS3 の @font-face 機能を使うと、ウェブ上にある独自の書体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd> + <dt><a href="https://davidwalsh.name/starting-css" rel="external">CSS を書き始める</a></dt> <dd>簡潔で保守が容易、スケーラブルな CSS を書くためのツールや方法論の紹介です。</dd> </dl> -</div> -</div> -<div class="section"> <dl> - <dt><a href="/ja/docs/Canvas_tutorial">Canvas チュートリアル</a></dt> + <dt><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a></dt> <dd>canvas 要素を使用するスクリプトを書いてグラフィックを描く方法を学ぶことができます。</dd> - <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt> + <dt><strong><a href="https://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> <dd>HTML5 をすぐに使うための記事があります。</dd> </dl> -</div> -<h2 class="Documentation" id="Documentation" name="Documentation">Javascript チュートリアル</h2> +<h2 class="Documentation" id="JavaScript-Tutorials">Javascript チュートリアル</h2> -<h3 id="Introductory_level_3" name="Introductory_level_3">入門レベル</h3> +<h3 id="Introductory_level_3">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></dt> <dd>最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な体験をしていただく前に「JavaScript とは何？」や「どのように見える？」や「何ができる？」といったような基本的な質問に答えます。その後 JavaScript を理解する重要な特徴、たとえば変数や文字列、数値、配列などについてお話します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></dt> - <dd><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</span></span></dd> + <dd>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</dd> </dl> -</div> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript を始める</a></dt> <dd>JavaScript とは何か? 何の役に立つのかを学べます。</dd> - <dt><a href="http://www.codecademy.com/">コードアカデミー</a> (Codecademy)</dt> + <dt><strong><a href="https://www.codecademy.com/">Codecademy</a> </strong> (英語)</dt> <dd>Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。</dd> + <dt><a href="https://learn.freecodecamp.org/">freeCodeCamp</a> (英語)</dt> + <dd>では、ウェブ開発のための様々な言語やフレームワークを教えています。<a href="https://freecodecamp.org/forum">フォーラム</a>、<a href="https://coderadio.freecodecamp.org">インターネットラジオ局</a>、<a href="https://freecodecamp.org/news">ブログ</a>もあります。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level_3" name="Intermediate_level_3">中級レベル</h3> +<h3 id="Intermediate_level_3">中級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクトの紹介</a></dt> <dd>JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化する独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアント側 Web API</a></dt> - <dd>Web サイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (異なるブラウザーやサイトを動かしている OS 、さらに他の Web サイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最も一般的な API の使い方を調べられます。</dd> + <dd>ウェブサイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (様々なブラウザーやサイトを動かしている OS 、さらに他のウェブサイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最もよくある API の使い方を調べられます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="/ja/docs/A_re-introduction_to_JavaScript">JavaScript 再入門</a></strong></dt> + <dt><strong><a href="/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript 「再」入門</a></strong></dt> <dd>中級レベルの開発者向けの JavaScript プログラム言語復習用まとめです。</dd> - <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">表現力のある JavaScript</a></dt> - <dd>中級・上級 JavaScript 方法論への包括的ガイドです。</dd> - <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt> + <dt><strong><a href="https://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong> (英語)</dt> + <dd>JavaScript の中級・上級の方法論への包括的ガイドです。</dd> + <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (英語)</strong></dt> <dd>JavaScript の学習をすばやく正確に学びたいプログラマーや特定のトピックスを探したり、スキルを上げたいプログラマーのためのサイトです。</dd> - <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> + <dt><a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (英語)</dt> <dd>JavaScript デザイン パターンの真髄に触れてみましょう。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level_3" name="Advanced_level_3">上級レベル</h3> +<h3 id="Advanced_level_3">上級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> - <dt><a href="/ja/docs/JavaScript/Guide">JavaScript ガイド</a></dt> + <dt><a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a></dt> <dd>初心者から上級者まですべてのレベル向けの分かりやすい JavaScript ガイドです。定期的に更新されています。</dd> - <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt> + <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (英語)</strong></dt> <dd>このシリーズは、JavaScript のコアなメカニズムを深める本です。</dd> - <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt> + <dt><strong><a href="https://bonsaiden.github.io/JavaScript-Garden/" rel="external">JavaScript Garden</a> (英語)</strong></dt> <dd>JavaScript で最もはまりやすい部分をドキュメント化したものです。</dd> - <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt> + <dt><strong><a href="https://exploringjs.com/es6/" rel="external">Exploring ES6</a> (英語)</strong></dt> <dd>ECMAScript 2015 の信頼できる詳しい情報元です。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">JavaScript Patterns</a></strong></dt> - <dd>Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、一般的なパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。</dd> - <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt> + <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">JavaScript Patterns</a> (英語)</strong></dt> + <dd>Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、よくあるパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。</dd> + <dt><strong><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong> (英語)</dt> <dd>モダンブラウザーのエンジンやページレンダリングなどの違いが詳しく研究され、説明された論文です。</dd> <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt> <dd>見ておきたい JavaScript についての映像を集めたものです。</dd> </dl> -</div> -</div> -<h3 id="Extension_Development" name="Extension_Development">拡張機能の開発</h3> +<h3 id="Extension_Development">拡張機能の開発</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> <dt><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt> - <dd>WebExtensions は、ブラウザーのアドオンを開発するための、ブラウザー間互換システムです。このシステムの大半は Google Chrome や Opera でサポートされている <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。これらのブラウザー用に書かれたアドオンは、大抵の場合、<a href="/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">ほんの少し変更を加えるだけで</a>、Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも動かすことができます。この API は<a href="/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd> + <dd>WebExtensions は、ブラウザーのアドオンを開発するための、ブラウザー間互換システムです。多くの部分において、このシステムは Google Chrome や Opera が対応している<a class="external-icon external" href="https://developer.chrome.com/extensions">拡張機能 API</a> と大体において互換性があります。これらのブラウザー用に書かれたアドオンは大抵の場合、 Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも <a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">ほんの少し変更を加えるだけで</a>、動かすことができます。この API は<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd> </dl> -</div> -</div> diff --git a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html index 284e16ea68..4b95292788 100644 --- a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html @@ -1,5 +1,5 @@ --- -title: 자신만의 함수 만들기 +title: 함수 만들기 slug: Learn/JavaScript/Building_blocks/Build_your_own_function translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function --- @@ -13,7 +13,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>.</td> + <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>.</td> </tr> <tr> <th scope="row">목표:</th> @@ -22,7 +22,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function </tbody> </table> -<h2 id="Active_learning_Lets_build_a_function">Active learning: 함수를 만들어 봅시다</h2> +<h2 id="Active_learning_Lets_build_a_function">직접 해보기: 함수를 만들어 봅시다</h2> <p>우리가 만들 사용자 정의 함수는 <code>displayMessage()</code>라는 이름입니다. 이 함수는 웹 페이지에 사용자 정의 메시지 박스를 표시하고 브라우저의 내장 <a href="/ko/docs/Web/API/Window/alert">alert()</a> 함수를 대체하는 역할을 할 것입니다. 우리는 이것을 전에 보긴 했지만, 기억을 되살려 봅시다. 원하는 어떤 페이지에서든지, 다음을 브라우저의 JavaScript 콘솔에 입력해 보세요:</p> @@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <p><code>alert</code> 함수는 제한적입니다: 메시지를 바꿀 수는 있지만, 색상, 아이콘 등 그 밖에 다른 것에는 쉽게 변화를 줄 수 없습니다. 우리는 더 재미있는 것을 만들 것입니다.</p> <div class="note"> -<p><strong>Note</strong>: 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.</p> +<p><strong>참고</strong>: 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.</p> </div> <h2 id="The_basic_function">기본적인 함수</h2> @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <p>기본적인 함수를 만들면서 시작해 봅시다.</p> <div class="note"> -<p><strong>Note</strong>: 함수에 이름을 붙일 때 <a href="/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules">변수 명명 규칙</a>과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.</p> +<p><strong>참고</strong>: 함수에 이름을 붙일 때 <a href="/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules">변수 명명 규칙</a>과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.</p> </div> <ol> @@ -186,7 +186,7 @@ panel.appendChild(closeBtn);</pre> <ol> <li>우선, 이 예제를 위해 필요한 아이콘들을 GitHub에서 다운로드하세요 (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">경고</a> 그리고 <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">채팅</a>). 이것들을 HTML파일과 같은 위치에 있는 <code>icons</code> 라는 새로운 폴더에 저장하세요. - <div class="note"><strong>Note</strong>: 경고와 채팅 아이콘은 원래 <a href="https://www.iconfinder.com/">iconfinder.com</a>에서 찾아졌고, <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)</div> + <div class="note"><strong>참고</strong>: 경고와 채팅 아이콘은 원래 <a href="https://www.iconfinder.com/">iconfinder.com</a>에서 찾아졌고, <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)</div> </li> <li>다음으로, HTML 파일 내부에서 CSS를 찾으세요. 우리는 아이콘이 들어갈 자리를 만들기 위해 약간의 변경을 가할 것입니다. 우선, <code>.msgBox</code> 폭을 <pre class="brush: css notranslate">width: 200px;</pre> @@ -222,7 +222,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> +<p><strong>참고</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> </div> <h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> @@ -238,13 +238,13 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><strong>자신만의 함수 만들기</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><strong>함수 만들기</strong></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html index d42c0232eb..4c924f8047 100644 --- a/files/ko/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -1,5 +1,5 @@ --- -title: 판단을 만드세요 — 조건문 +title: 판단 내리기 — 조건문 slug: Learn/JavaScript/Building_blocks/conditionals translation_of: Learn/JavaScript/Building_blocks/conditionals original_slug: Learn/JavaScript/Building_blocks/조건문 @@ -13,9 +13,9 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">선행 조건:</th> + <th scope="row">필요한 사전 지식:</th> <td> - 기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">Javascript 첫 걸음</a> + 기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">Javascript 첫걸음</a> </td> </tr> <tr> @@ -27,17 +27,17 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 </tbody> </table> -<h2 id="You_can_have_it_on_one_condition..!">당신은 한 조건보다 우위에 있을 수 있습니다..!</h2> +<h2 id="You_can_have_it_on_one_condition..!">여러분은 한 조건보다 우위에 있을 수 있습니다..!</h2> <p>사람(과 동물)은 항상 그들의 삶에 영향을 미치는 결정을, 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 내립니다.</p> <p>조건문은 우리가, 반드시 내려져야 하는 선택에서부터 (예를 들자면, "쿠키 한 개 또는 두 개"), 그 선택들의 결과까지 (아마도 "쿠키 한 개를 먹는다" 의 결과는 "여전히 배가 고프다" 일지도 모르고, "쿠키 두 개를 먹는다" 의 결과는 "배부르다, 그러나 엄마가 쿠키를 다 먹었다고 나를 야단칠 것이다" 일지도 모릅니다), 그러한 의사 결정을 자바스크립트에서 표현할 수 있게 합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> <h2 id="if...else_statements">if ... else 문</h2> -<p>당신이 자바스크립트에서 쓸 단연코 가장 일반적인 형태의 조건문을 살펴봅시다 — 변변찮은 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"> 문</a>입니다.</p> +<p>여러분이 자바스크립트에서 쓸 단연코 가장 일반적인 형태의 조건문을 살펴봅시다 — 변변찮은 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"> 문</a>입니다.</p> <h3 id="Basic_if_..._else_syntax">기본 if ... else 문법</h3> @@ -53,7 +53,7 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 <ol> <li>키워드 <code>if</code> 뒤에 괄호가 옵니다.</li> - <li>시험할 조건은 괄호 안에 위치합니다 (전형적으로 "이 값은 다른 값보다 큰가?", 또는 "이 값은 존재하는가?"). 이 조건은 마지막 모듈에서 논의했던 비교 연산자(<a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>)를 사용할 것이고 <code>true</code>나 <code>false</code>를 리턴합니다.</li> + <li>시험할 조건은 괄호 안에 위치합니다 (전형적으로 "이 값은 다른 값보다 큰가?", 또는 "이 값은 존재하는가?"). 이 조건은 마지막 모듈에서 논의했던 비교 연산자(<a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">comparison operators</a>)를 사용할 것이고 <code>true</code>나 <code>false</code>를 리턴합니다.</li> <li>내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 어떤 코드든 될 수 있고, 오직 조건이 <code>true</code>를 반환하는 경우에만 실행됩니다.</li> <li>키워드 <code>else</code>.</li> <li>또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 어떤 코드든 될 수 있고, 오직 조건이 <code>true</code>가 아닌 경우에만 실행됩니다. — 또는 다른 말로 하자면, 조건이 <code>false</code>인 경우에만 실행됩니다.</li> @@ -69,9 +69,9 @@ original_slug: Learn/JavaScript/Building_blocks/조건문 실행할 다른 코드</pre> -<p>하지만, 여기서 조심해야 할 점 — 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않아서, 조건이 <code>true</code>나 <code>false</code>를 리턴하는 것에 관계없이 <strong>항상</strong> 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 당신이 원하는 것이 아닐 지도 모릅니다. — 종종 당신은 둘 다가 아니라, 코드의 한 블럭 또는 다른 블럭을 실행하기를 원합니다.</p> +<p>하지만, 여기서 조심해야 할 점 — 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않아서, 조건이 <code>true</code>나 <code>false</code>를 리턴하는 것에 관계없이 <strong>항상</strong> 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 여러분이 원하는 것이 아닐 지도 모릅니다. — 종종 여러분은 둘 다가 아니라, 코드의 한 블럭 또는 다른 블럭을 실행하기를 원합니다.</p> -<p>마지막으로, 당신은 때때로 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 <code>if...else</code>를 보았을 지도 모릅니다:</p> +<p>마지막으로, 여러분은 때때로 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 <code>if...else</code>를 보았을 지도 모릅니다:</p> <pre class="notranslate">if (조건) 만약 조건(condition)이 참일 경우 실행할 코드 else 대신 실행할 다른 코드</pre> @@ -94,7 +94,7 @@ if (shoppingDone === true) { <p>위 코드는 항상 <code>false</code>를 리턴하는 <code>shoppingDone</code>변수를 결과로 낳는데, 이는 우리의 불쌍한 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 부모님이 <code>shoppingDone</code>변수를 <code>true</code>로 설정하는 메커니즘을 제공하는 것은 우리에게 달렸습니다.</p> <div class="note"> -<p><strong>Note</strong>: GitHub에서 예시를 더 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">이 예제의 완성 버전 on GitHub</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">running live</a>.)</p> +<p><strong>참고</strong>: GitHub에서 예시를 더 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">이 예제의 완성 버전 on GitHub</a> (also see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">running live</a>.)</p> </div> <h3 id="else_if">else if</h3> @@ -147,12 +147,12 @@ function setWeather() { </ol> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">see it running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">see it running live</a> on there also.)</p> </div> <h3 id="A_note_on_comparison_operators">비교 연산자에 대한 메모</h3> -<p>비교 연산자는 우리의 조건문 안의 조건을 테스트하는데 사용됩니다. 우리는 먼저 이전의 <a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">자바스크립트의 기본적인 연산 - 숫자와 연산자</a> 문서에서 비교 연산자를 봤습니다. 우리의 선택들은 다음과 같습니다:</p> +<p>비교 연산자는 우리의 조건문 안의 조건을 테스트하는데 사용됩니다. 우리는 먼저 이전의 <a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">자바스크립트의 기본적인 연산 - 숫자와 연산자</a> 문서에서 비교 연산자를 봤습니다. 우리의 선택들은 다음과 같습니다:</p> <ul> <li><code>===</code>와 <code>!==</code> — 한 값이 다른 값과 같거나 다른지 테스트한다.</li> @@ -161,7 +161,7 @@ function setWeather() { </ul> <div class="note"> -<p><strong>Note</strong>: 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.</p> +<p><strong>참고</strong>: 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.</p> </div> <p>몇 번이고 다시 만날 boolean(<code>true</code>/<code>false</code>)값을 테스트하는 것과 일반적인 패턴에 대한 특별한 언급을 하고 싶었습니다. 어떠한 값들이든 <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>이나 빈 문자열(<code>''</code>)이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 <code>true</code>를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있습니다. 예를 들어:</p> @@ -201,7 +201,7 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <h3 id="Logical_operators_AND_OR_and_NOT">논리 연산자: AND, OR 그리고 NOT</h3> -<p>만약 중첩된 <code>if...else</code>문을 작성 없이 다양한 조건을 테스트하길 원한다면 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators">논리 연산자</a>가 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음의 두 가지는 다음을 합니다:</p> +<p>만약 중첩된 <code>if...else</code>문을 작성 없이 다양한 조건을 테스트하길 원한다면 <a href="/en-US/docs/Web/JavaScript/Reference/Operators">논리 연산자</a>가 여러분을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음의 두 가지는 다음을 합니다:</p> <ul> <li><code>&&</code> — AND; 전체 표현식(expression)이 <code>true</code>를 리턴하기 위해 두 개 혹은 그 이상의 표현식이 개별적으로 <code>true</code>로 평가되도록 그 식들을 같이 연결할 수 있게 합니다.</li> @@ -236,13 +236,13 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <p>위 예시에서, OR 문이 <code>true</code>를 리턴한다면, NOT 연산자는 전체 표현식이 <code>false</code>를 리턴하도록 부정할 것입니다.</p> -<p>어떤 구조든지, 당신이 원하는 만큼 많은 논리 문(statement)을 결합할 수 있습니다. 다음 예시는 오직 두 OR 문 모두가 true를 리턴하면 내부의 코드를 실행하는데, 이는 전체의 AND 문이 true를 리턴할 것임을 의미합니다.</p> +<p>어떤 구조든지, 여러분이 원하는 만큼 많은 논리 문(statement)을 결합할 수 있습니다. 다음 예시는 오직 두 OR 문 모두가 true를 리턴하면 내부의 코드를 실행하는데, 이는 전체의 AND 문이 true를 리턴할 것임을 의미합니다.</p> <pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { // run the code }</pre> -<p>조건문에서 논리적 OR 연산자를 사용할 때의 일반적인 실수는 당신이 검사하는 값의 변수를 한 번 명시하기(state)를 시도하고, 그리고 true를 리턴할 수 있는 값들의 목록을, <code>||</code> (OR) 연산자에 의해 분리하며 제공하는 것입니다. 예를 들자면:</p> +<p>조건문에서 논리적 OR 연산자를 사용할 때의 일반적인 실수는 여러분이 검사하는 값의 변수를 한 번 명시하기(state)를 시도하고, 그리고 true를 리턴할 수 있는 값들의 목록을, <code>||</code> (OR) 연산자에 의해 분리하며 제공하는 것입니다. 예를 들자면:</p> <pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { // run my code @@ -256,9 +256,9 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 <h2 id="switch_statements">switch 문</h2> -<p><code>if...else</code> 문은 조건문 코드가 잘 가능하게 하는 일을 하지만, 단점이 없지는 않습니다. 그 문은 두 가지 선택을 가지고 있고, 각각은 실행될 합리적인 양의 코드가 필요하고, 및/또는 그 조건이 복잡한 (예를 들자면, 다수의 논리 연산자) 경우에 주로 유용합니다. 당신이 단지 어떤 값의 선택에 변수를 설정하거나 조건에 달린 특정한 문(statement)을 출력하기를 원하는 경우에, 그 구문(syntax)은 다소 번거로울 수 있는데, 특히 당신이 다수의 선택을 가지고 있는 경우에 그렇습니다.</p> +<p><code>if...else</code> 문은 조건문 코드가 잘 가능하게 하는 일을 하지만, 단점이 없지는 않습니다. 그 문은 두 가지 선택을 가지고 있고, 각각은 실행될 합리적인 양의 코드가 필요하고, 및/또는 그 조건이 복잡한 (예를 들자면, 다수의 논리 연산자) 경우에 주로 유용합니다. 여러분이 단지 어떤 값의 선택에 변수를 설정하거나 조건에 달린 특정한 문(statement)을 출력하기를 원하는 경우에, 그 구문(syntax)은 다소 번거로울 수 있는데, 특히 여러분이 다수의 선택을 가지고 있는 경우에 그렇습니다.</p> -<p>그러한 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code>문</a>은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 당신에게 아이디어를 주기 위해, 여기 몇몇 많은 의사 코드가 있습니다:</p> +<p>그러한 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code>문</a>은 여러분의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여러분에게 아이디어를 주기 위해, 여기 몇몇 많은 의사 코드가 있습니다:</p> <pre class="notranslate">switch (expression) { case choice1: @@ -288,7 +288,7 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습 </ol> <div class="note"> -<p><strong>Note</strong>: <code>default</code>를 반드시 포함하지 않아도 됩니다 — 만약 표현식이 미지의 값과 같게 되어버릴 수 있는 경우가 없다면 당신은 안전하게 이것을 생략할 수 있습니다. 그러나, 그 경우가 있다면, 당신은 미지의 경우를 다루기 위해 이것을 포함할 필요가 있습니다.</p> +<p><strong>참고</strong>: <code>default</code>를 반드시 포함하지 않아도 됩니다 — 만약 표현식이 미지의 값과 같게 되어버릴 수 있는 경우가 없다면 여러분은 안전하게 이것을 생략할 수 있습니다. 그러나, 그 경우가 있다면, 여러분은 미지의 경우를 다루기 위해 이것을 포함할 필요가 있습니다.</p> </div> <h3 id="A_switch_example">A switch example</h3> @@ -336,7 +336,7 @@ function setWeather() { <p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">running live</a> on there also.)</p> </div> <h2 id="Ternary_operator">삼항연산자 </h2> @@ -384,10 +384,10 @@ select.onchange = function() { <p>끝으로, 우리는 또한 삼항연산자를 포함하고 있는 함수의 실행을 제공하는 '<a href="/ko/docs/Web/API/GlobalEventHandlers/onchange">onchange</a>' 이벤트 리스너를 가지고 있습니다. 이것은 테스트 조건으로 시작합니다 — <code>select.value === 'black'</code>. 만약 이것이 <code>true</code>를 리턴하면, 우리는 검정과 하양의 매개변수를 지니고 있는 <code>update()</code>함수를 실행하는데, 이는 배경색은 검정으로 텍스트 색은 하양으로 되는 결과를 의미합니다. 만약 이것이 <code>false</code>를 리턴하면, 우리는 하양과 검정의 매개변수를 지니고 있는 <code>update()</code>함수를 실행하는데, 이는 사이트의 색상이 반전됐다는 것을 의미합니다.</p> <div class="note"> -<p><strong>Note</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">running live</a> on there also.)</p> +<p><strong>참고</strong>: 또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">이 예제를 GitHub에서 찾을 수 있습니다</a>. (see it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">running live</a> on there also.)</p> </div> -<h2 id="Active_learning_A_simple_calendar">Active learning: 간단한 달력 만들기</h2> +<h2 id="Active_learning_A_simple_calendar">직접 해보기: 간단한 달력 만들기</h2> <p>이 예제에서는 간단한 달력 어플리케이션을 만들어 볼 것입니다. 코드에는 다음과 같은 것들이 들어 있습니다.</p> @@ -593,9 +593,9 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Active_learning_More_color_choices!">Active learning: 색깔 고르기</h2> +<h2 id="Active_learning_More_color_choices!">직접 해보기: 색깔 고르기</h2> -<p>이 예제에서는 위에서 봤던 삼항연산자 예제의 삼항연산자를 간단한 웹사이트에 더 많은 선택을 적용할 수 있게 하는 switch문으로 전환할 것입니다. {{htmlelement("select")}}을 보세요 — 이번에는 이것이 두 개의 테마 옵션을 가지고 있지 않고, 다섯 개를 가지고 있는 것을 보실 수 있을 것입니다. 당신은 <code>// ADD SWITCH STATEMENT</code> 주석 바로 밑에 추가할 필요가 있습니다:</p> +<p>이 예제에서는 위에서 봤던 삼항연산자 예제의 삼항연산자를 간단한 웹사이트에 더 많은 선택을 적용할 수 있게 하는 switch문으로 전환할 것입니다. {{htmlelement("select")}}을 보세요 — 이번에는 이것이 두 개의 테마 옵션을 가지고 있지 않고, 다섯 개를 가지고 있는 것을 보실 수 있을 것입니다. 여러분은 <code>// ADD SWITCH STATEMENT</code> 주석 바로 밑에 추가할 필요가 있습니다:</p> <ul> <li>이것은 <code>choice</code> 변수를 이것의 입력 표현식으로 받아야 합니다.</li> @@ -746,33 +746,33 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Test your skills: Conditionals</a>.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">실력을 평가해 보세요: 조건문</a>.</p> <h2 id="Conclusion">결론</h2> -<p>그리고 이것이 당신이 지금 자바스크립트에서 알아야 할 조건문 구조에 대한 모든 것입니다! 저는 당신이 이 개념들을 이해했고 이 예제들을 쉽게 통과했을 것이라고 확신합니다; 만약 이해하지 못한 게 있으시다면, 자유롭게 이 문서를 다시 읽어 보시고, 도움이 필요하시다면 <a href="/en-US/Learn#Contact_us">contact us</a>를 방문해 보세요.</p> +<p>그리고 이것이 여러분이 지금 자바스크립트에서 알아야 할 조건문 구조에 대한 모든 것입니다! 저는 여러분이 이 개념들을 이해했고 이 예제들을 쉽게 통과했을 것이라고 확신합니다; 만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li><a href="/ko/Learn/JavaScript/First_steps/Math#Comparison_operators">비교 연산자(Comparison operators)</a></li> - <li><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">조건문 자세하게 살펴보기</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else 레퍼런스</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항연산자 레퍼런스</a></li> + <li><a href="/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators">비교 연산자(Comparison operators)</a></li> + <li><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements">조건문 자세하게 살펴보기</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else 참고서</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항연산자 참고서</a></li> </ul> <p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> + <li><strong>판단 내리기 — 조건문</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> </ul> diff --git a/files/ko/learn/javascript/building_blocks/events/index.html b/files/ko/learn/javascript/building_blocks/events/index.html index 85f3fe64a5..6b1ea60a64 100644 --- a/files/ko/learn/javascript/building_blocks/events/index.html +++ b/files/ko/learn/javascript/building_blocks/events/index.html @@ -16,16 +16,16 @@ tags: <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">이벤트(event)란 당신이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 당신이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 당신은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 문서에서는, 우리는 이벤트에 대한 몇몇 중요한 개념을 논하고, 그것들이 브라우저에서 어떻게 작동하는지 살펴봅니다. 이것은 완전한 공부가 되지 않을 것입니다; 단지 지금 단계에서 당신이 알아야 할 필요가 있는 것입니다.</p> +<p class="summary">이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 여러분은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 문서에서는, 우리는 이벤트에 대한 몇몇 중요한 개념을 논하고, 그것들이 브라우저에서 어떻게 작동하는지 살펴봅니다. 이것은 완전한 공부가 되지 않을 것입니다; 단지 지금 단계에서 여러분이 알아야 할 필요가 있는 것입니다.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>에 대한 기본적인 이해</td> + <td>기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>에 대한 기본적인 이해</td> </tr> <tr> - <th scope="row">목적:</th> + <th scope="row">목표:</th> <td>이벤트에 대한 필수적인 이론, 브라우저에서 이벤트가 어떻게 작동하는지, 그리고 어떻게 다른 프로그래밍 환경에서 다를 지도 모르는지를 이해하기</td> </tr> </tbody> @@ -33,11 +33,11 @@ tags: <h2 id="A_series_of_fortunate_events">일련의 운 좋은 사건들</h2> -<p>위에서 언급했다시피, <strong>이벤트</strong>란 당신이 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생입니다 — 시스템은 이벤트가 발생할 때 몇몇 종류의 신호를 생산(produce) (또는 "발사(fire)"하고, 이벤트가 발생했을 때 사건이 자동적으로 취해질 수 있는 메커니즘 (즉, 코드의 실행)을 제공합니다. 예를 들자면, 공항에서, 활주로가 이륙을 위해 막혀 있지 않을 때, 신호가 파일럿에게 전달됩니다. 결과적으로, 비행기는 안전하게 이륙할 수 있습니다.</p> +<p>위에서 언급했다시피, <strong>이벤트</strong>란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생입니다 — 시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 생산(produce) (또는 "발생(fire)"시키고, 이벤트가 발생되었을 때 사건이 자동적으로 취해질 수 있는 메커니즘 (즉, 코드의 실행)을 제공합니다. 예를 들자면, 공항에서, 활주로가 이륙을 위해 막혀 있지 않을 때, 신호가 파일럿에게 전달됩니다. 결과적으로, 비행기는 안전하게 이륙할 수 있습니다.</p> <p><img alt="" src="mdn-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> -<p>웹의 경우에, 이벤트는 브라우저 윈도우 내에서 발사되고, 그것이 거주하는 특정한 요소에 부착되는 경향이 있습니다 — 이것은 하나의 요소, 요소들의 집합, 현재 탭에 로드된 HTML 문서, 혹은 전체 브라우저 윈도우일지도 모릅니다. 발생할 수 있는 많은 각양각색의 이벤트 타입이 있습니다. 예를 들자면:</p> +<p>웹의 경우에, 이벤트는 브라우저 윈도우 내에서 발생되고, 그것이 거주하는 특정한 요소에 부착되는 경향이 있습니다 — 이것은 하나의 요소, 요소들의 집합, 현재 탭에 로드된 HTML 문서, 혹은 전체 브라우저 윈도우일지도 모릅니다. 발생될 수 있는 많은 각양각색의 이벤트 타입이 있습니다. 예를 들자면:</p> <ul> <li>유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둡니다(hover).</li> @@ -49,18 +49,18 @@ tags: <li>오류가 발생했습니다.</li> </ul> -<p>당신은 이것으로부터 (그리고 MDN <a href="/en-US/docs/Web/Events">이벤트 레퍼런스</a>를 흘낏 보는 것으로부터) 응답되어질 수 있는 <strong>많은</strong> 이벤트들이 있다는 것을 알 수 있습니다.</p> +<p>여러분은 이것으로부터 (그리고 MDN <a href="/en-US/docs/Web/Events">이벤트 레퍼런스</a>를 흘낏 보는 것으로부터) 응답되어질 수 있는 <strong>많은</strong> 이벤트들이 있다는 것을 알 수 있습니다.</p> -<p>각각의 이용가능한 이벤트들은 <strong>이벤트 핸들러</strong>(event handler)를 가지고 있는데, 이는 이벤트가 발사되면 실행되는 코드 블럭 (보통 당신과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 <strong>이벤트 핸들러를 등록</strong>(register)했다고 말합니다. 알림: 이벤트 핸들러는 때때로 <strong>이벤트 리스너</strong>(event listener)라고 불립니다 — 이것들은 우리의 목적을 위해 꽤 교체할수 있지만, 그러나 엄밀히 말하자면, 그들은 같이 동작합니다. 리스너는 발생하는 이벤트에 대해 듣고, 핸들러는 발생하는 이벤트에 응답해서 실행되는 코드입니다.</p> +<p>각각의 이용가능한 이벤트들은 <strong>이벤트 핸들러</strong>(event handler)를 가지고 있는데, 이는 이벤트가 발생되면 실행되는 코드 블럭 (보통 여러분과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 <strong>이벤트 핸들러를 등록</strong>(register)했다고 말합니다. 알림: 이벤트 핸들러는 때때로 <strong>이벤트 리스너</strong>(event listener)라고 불립니다 — 이것들은 우리의 목적을 위해 꽤 교체할수 있지만, 그러나 엄밀히 말하자면, 그들은 같이 동작합니다. 리스너는 발생되는 이벤트에 대해 듣고, 핸들러는 발생되는 이벤트에 응답해서 실행되는 코드입니다.</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>웹 이벤트는 코어 JavaScript 언어의 일부가 아닙니다 — 이것들은 브라우저에 내장된 API의 일부로서 정의됩니다.</p> </div> <h3 id="A_simple_example">간단한 예제</h3> -<p>우리가 여기서 의미한 것의 간단한 예제를 봅시다. 당신은 이미 많은 예제들에서 사용된 이벤트와 이벤트 핸들러를 보았지만, 단지 우리의 지식을 견고하게 하기 위해 요약해 봅시다. 다음의 예제에서, 우리는 하나의 {{htmlelement("button")}}을 가지고 있는데, 눌러졌을 때, 이는 배경이 무작위의 색으로 바뀌게 만듭니다:</p> +<p>우리가 여기서 의미한 것의 간단한 예제를 봅시다. 여러분은 이미 많은 예제들에서 사용된 이벤트와 이벤트 핸들러를 보았지만, 단지 우리의 지식을 견고하게 하기 위해 요약해 봅시다. 다음의 예제에서, 우리는 하나의 {{htmlelement("button")}}을 가지고 있는데, 눌러졌을 때, 이는 배경이 무작위의 색으로 바뀌게 만듭니다:</p> <pre class="brush: html"><button>Change color</button></pre> @@ -81,9 +81,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p>이 코드에서, {{domxref("Document.querySelector()")}} 함수를 사용하여, 우리는 <code>btn</code> 상수 내부에 버튼에 대한 참조를 저장했습니다. 우리는 또한 무작위의 숫자를 반환하는 함수를 정의했습니다. 코드의 세번째 부분은 이벤트 핸들러입니다. <code>btn</code> 상수는 <code><a href="/ko/docs/Web/HTML/Element/button"><button></a></code> 요소를 가리키고, 이 타입의 객체는 발사할 수 있는 얼마간의 이벤트를 가지고 있으므로, 이벤트 핸들러를 사용 가능합니다. <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 이벤트 핸들러 프로퍼티를 무작위의 RGB 색상을 생성하고 그것과 같은 <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>를 설정하는 코드를 포함하는 익명함수에 설정함으로써, 우리는 <code><a href="/ko/docs/Web/API/Element/click_event">click</a></code> 이벤트 발사에 귀를 기울이고 있습니다.</p> +<p>이 코드에서, {{domxref("Document.querySelector()")}} 함수를 사용하여, 우리는 <code>btn</code> 상수 내부에 버튼에 대한 참조를 저장했습니다. 우리는 또한 무작위의 숫자를 반환하는 함수를 정의했습니다. 코드의 세번째 부분은 이벤트 핸들러입니다. <code>btn</code> 상수는 <code><a href="/ko/docs/Web/HTML/Element/button"><button></a></code> 요소를 가리키고, 이 타입의 객체는 발생시킬 수 있는 얼마간의 이벤트를 가지고 있으므로, 이벤트 핸들러를 사용 가능합니다. <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 이벤트 핸들러 프로퍼티를 무작위의 RGB 색상을 생성하고 그것과 같은 <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>를 설정하는 코드를 포함하는 익명함수에 설정함으로써, 우리는 <code><a href="/ko/docs/Web/API/Element/click_event">click</a></code> 이벤트 발생에 귀를 기울이고 있습니다.</p> -<p>이 코드는 언제든지 <code><button></code> 요소에서 click 이벤트가 발사될 때, 즉 언제든지 유저가 그것을 선택했을 때, 실행됩니다.</p> +<p>이 코드는 언제든지 <code><button></code> 요소에서 click 이벤트가 발생될 때, 즉 언제든지 유저가 그것을 선택했을 때, 실행됩니다.</p> <p>예제 출력은 다음과 같습니다:</p> @@ -95,13 +95,13 @@ btn.onclick = function() { <p>예를 들자면, 개발자들이 JavaScript를 네트워크와 서버사이드 어플리케이션을 제작하기 위해 사용하는 것을 가능하게 하는 <a href="/ko/docs/Learn/Server-side/Express_Nodejs">Node.js</a>는 매우 인기있는 JavaScript 런타임입니다. <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js 이벤트 모델</a>은 이벤트를 듣는 리스너와 이벤트를 주기적으로 발산하는 이미터(emitter)에 의존하고 있습니다 — 이것은 그렇게 다른 것처럼 들리지 않지만, 코드는 상당히 다른데, 이벤트 리스너를 등록하기 위해 <code>on()</code>, 이벤트 리스너를 등록하고 한 번 실행된 이후에 등록을 해제하는 <code>once()</code>같은 함수를 사용합니다. <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect 이벤트 문서</a>는 좋은 예시를 제공합니다.</p> -<p><a href="/ko/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>이라 불리는 기술을 사용하여, 당신은 또한 크로스 브라우저 애드온(cross-browser add-on) — 브라우저 기능성 강화 — 을 개발하기 위해 JavaScript를 사용할 수 있습니다. 이 이벤트 모델은 웹 이벤트 모델과 유사하나, 조금 다릅니다 — 이벤트 리스너 프로퍼티들은 (<code>onmessage</code>가 아니라 <code>onMessage</code>와 같이) 카멜케이스(camel-case)화 되어있고, <code>addListener</code> 함수와 연결될 필요가 있습니다. 예시를 위해 <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code> 페이지</a>를 봐 보세요.</p> +<p><a href="/ko/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>이라 불리는 기술을 사용하여, 여러분은 또한 크로스 브라우저 애드온(cross-browser add-on) — 브라우저 기능성 강화 — 을 개발하기 위해 JavaScript를 사용할 수 있습니다. 이 이벤트 모델은 웹 이벤트 모델과 유사하나, 조금 다릅니다 — 이벤트 리스너 프로퍼티들은 (<code>onmessage</code>가 아니라 <code>onMessage</code>와 같이) 카멜케이스(camel-case)화 되어있고, <code>addListener</code> 함수와 연결될 필요가 있습니다. 예시를 위해 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code> 페이지</a>를 봐 보세요.</p> <p>지금 배우는 단계에서는 그러한 다른 환경들에 대해서 아무것도 이해할 필요가 없습니다; 우리는 단지 이벤트가 다른 프로그래밍 환경에서 다를 수 있다는 것을 확실히 하고 싶었습니다.</p> <h2 id="Ways_of_using_web_events">웹 이벤트를 사용하는 방법들</h2> -<p>이벤트 리스너 코드가 관련된 이벤트가 발사되었을 때 실행되도록 웹 페이지에 이것을 더하는 얼마간의 방법들이 있습니다. 이 섹션에서, 우리는 다양한 메커니즘을 관찰하고 어떤 것을 당신이 사용해야만 하는지 논할 것입니다.</p> +<p>이벤트 리스너 코드가 관련된 이벤트가 발생되었을 때 실행되도록 웹 페이지에 이것을 더하는 얼마간의 방법들이 있습니다. 이 섹션에서, 우리는 다양한 메커니즘을 관찰하고 어떤 것을 여러분이 사용해야만 하는지 논할 것입니다.</p> <h3 id="Event_handler_properties">이벤트 핸들러 프로퍼티</h3> @@ -114,9 +114,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 프로퍼티는 이 상황에서 쓰이고 있는 이벤트 핸들러 프로퍼티입니다. 이것은 본질적으로 버튼에서 사용 가능한 다른 것들과 같은 프로퍼티지만 (예: <code><a href="/ko/docs/Web/API/Node/textContent">btn.textContent</a></code>, 또는 <code><a href="/ko/docs/Web/API/ElementCSSInlineStyle/style">btn.style</a></code>), 이것은 특별한 타입입니다 — 어떤 코드와 동일한 것을 설정했을 때, 그 코드는 버튼에서 이벤트가 발사되었을 때 실행됩니다.</p> +<p><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 프로퍼티는 이 상황에서 쓰이고 있는 이벤트 핸들러 프로퍼티입니다. 이것은 본질적으로 버튼에서 사용 가능한 다른 것들과 같은 프로퍼티지만 (예: <code><a href="/ko/docs/Web/API/Node/textContent">btn.textContent</a></code>, 또는 <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), 이것은 특별한 타입입니다 — 어떤 코드와 동일한 것을 설정했을 때, 그 코드는 버튼에서 이벤트가 발생되었을 때 실행됩니다.</p> -<p>당신은 또한 기명 함수 이름과 같은 핸들러 프로퍼티를 설정할 수 있습니다 (<a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>에서 본 것처럼요). 다음은 아주 똑같이 동작합니다:</p> +<p>여러분은 또한 기명 함수 이름과 같은 핸들러 프로퍼티를 설정할 수 있습니다 (<a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>에서 본 것처럼요). 다음은 아주 똑같이 동작합니다:</p> <pre class="brush: js">const btn = document.querySelector('button'); @@ -129,20 +129,20 @@ btn.onclick = bgChange;</pre> <p>사용 가능한 많은 가지각색의 이벤트 핸들러 프로퍼티가 있습니다. 실험해 봅시다.</p> -<p>우선, <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>를 다운받으시고, 당신의 브라우저에서 열어보세요. 이것은 우리가 이미 해본 단순한 무작위 색상 예제의 복사본입니다. 이제 <code>btn.onclick</code>를 다음의 다른 값들로 차례대로 바꿔 보시고, 예제에서 그 결과를 관찰해 보세요.</p> +<p>우선, <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>를 다운받으시고, 여러분의 브라우저에서 열어보세요. 이것은 우리가 이미 해본 단순한 무작위 색상 예제의 복사본입니다. 이제 <code>btn.onclick</code>를 다음의 다른 값들로 차례대로 바꿔 보시고, 예제에서 그 결과를 관찰해 보세요.</p> <ul> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code>와 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — 색상은 버튼이 포커스되고 포커스가 해제되었을 때 바뀝니다; 버튼을 포커스하기 위해 탭 키를 눌러 보시고 다시 탭 키를 눌러서 버튼으로부터 포커스를 해제해 보세요. 이것들은 종종 양식 필드(form field)가 포커스되었을 때 그것에 채움(filling)에 대한 정보를 표시하기 위해 사용되거나, 만약 양식 필드가 올바르지 않은 값으로 채워진다면 에러 메시지를 표시하기 위해 사용됩니다.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code>와 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — 색상은 버튼이 포커스되고 포커스가 해제되었을 때 바뀝니다; 버튼을 포커스하기 위해 탭 키를 눌러 보시고 다시 탭 키를 눌러서 버튼으로부터 포커스를 해제해 보세요. 이것들은 종종 양식 필드(form field)가 포커스되었을 때 그것에 채움(filling)에 대한 정보를 표시하기 위해 사용되거나, 만약 양식 필드가 올바르지 않은 값으로 채워진다면 에러 메시지를 표시하기 위해 사용됩니다.</li> <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — 오직 버튼이 더블 클릭되었을 때만 색상이 바뀝니다.</li> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — 키보드에서 키가 눌렸을 때 색상이 바뀝니다. <code>keydown</code> 과 <code>keyup</code>은 단지 각각 키 누름(keystroke)의 누름(key down)과 뗌(key up) 부분을 지칭합니다. 알림: 만약 당신이 이 이벤트 핸들러를 버튼 그 자체에 등록한다면 이것은 작동하지 않습니다 — 우리는, 전체 브라우저를 나타내는, <a href="/ko/docs/Web/API/Window">window</a>에 이것을 등록해야만 합니다.</li> - <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> 와 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — 각각 마우스 포인터가 버튼 위에 올라가 있을 때, 혹은 포인터가 버튼에서 벗어났을 때 색상이 바뀝니다.</li> + <li><code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — 키보드에서 키가 눌렸을 때 색상이 바뀝니다. <code>keydown</code> 과 <code>keyup</code>은 단지 각각 키 누름(keystroke)의 누름(key down)과 뗌(key up) 부분을 지칭합니다. 알림: 만약 여러분이 이 이벤트 핸들러를 버튼 그 자체에 등록한다면 이것은 작동하지 않습니다 — 우리는, 전체 브라우저를 나타내는, <a href="/ko/docs/Web/API/Window">window</a>에 이것을 등록해야만 합니다.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> 와 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — 각각 마우스 포인터가 버튼 위에 올라가 있을 때, 혹은 포인터가 버튼에서 벗어났을 때 색상이 바뀝니다.</li> </ul> -<p>몇몇 이벤트들은 일반적이고 거의 어디서나 사용 가능한 반면 (예: <code>onclick</code> 핸들러는 거의 어떠한 요소에서도 등록될 수 있습니다), 몇몇은 더욱 특수하고 오직 어떤 상황들에서만 유용합니다 (예: <a href="/ko/docs/Web/API/GlobalEventHandlers/onplay">onplay</a>를 오직 {{htmlelement("video")}}와 같은, 특정한 요소에서만 사용하는 것은 타당합니다).</p> +<p>몇몇 이벤트들은 일반적이고 거의 어디서나 사용 가능한 반면 (예: <code>onclick</code> 핸들러는 거의 어떠한 요소에서도 등록될 수 있습니다), 몇몇은 더욱 특수하고 오직 어떤 상황들에서만 유용합니다 (예: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onplay">onplay</a>를 오직 {{htmlelement("video")}}와 같은, 특정한 요소에서만 사용하는 것은 타당합니다).</p> <h3 id="Inline_event_handlers_—_dont_use_these">인라인 이벤트 핸들러 — 사용하지 마세요</h3> -<p>당신은 또한 코드에서 이것과 같은 패턴을 봤을 지도 모릅니다:</p> +<p>여러분은 또한 코드에서 이것과 같은 패턴을 봤을 지도 모릅니다:</p> <pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> @@ -153,19 +153,19 @@ btn.onclick = bgChange;</pre> }</pre> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">실제로 작동하는 모습</a>도 보세요).</p> + <h4>참고</h4> + <p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">실제로 작동하는 모습</a>도 보세요).</p> </div> -<p>웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 <strong>이벤트 핸들러 HTML 어트리뷰트</strong> (또는 <strong>인라인 이벤트 핸들러</strong>)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생했을 때 당신이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 당신은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:</p> +<p>웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 <strong>이벤트 핸들러 HTML 어트리뷰트</strong> (또는 <strong>인라인 이벤트 핸들러</strong>)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생되었을 때 여러분이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 여러분은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:</p> <pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> -<p>당신은 HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수도 있습니다; 그러나, 당신은 이 방법을 사용해서는 안 됩니다 — 이 방법은 나쁜 습관이라고 여겨집니다. 만약 당신이 뭔가를 정말 빨리 한다면 이벤트 핸들러 어트리뷰트를 사용하는 것이 쉬워 보일지도 모르나, 이것은 빠르게 다루기 힘들어지고 비효율적이 됩니다.</p> +<p>여러분은 HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수도 있습니다; 그러나, 여러분은 이 방법을 사용해서는 안 됩니다 — 이 방법은 나쁜 습관이라고 여겨집니다. 만약 여러분이 뭔가를 정말 빨리 한다면 이벤트 핸들러 어트리뷰트를 사용하는 것이 쉬워 보일지도 모르나, 이것은 빠르게 다루기 힘들어지고 비효율적이 됩니다.</p> -<p>우선, HTML과 JavaScript를 뒤죽박죽으로 만드는 것은 좋은 생각이 아닙니다. 왜냐하면 분석하기(parse)가 어려워지기 때문입니다 — JavaScript를 분리한 채로 놔두는 것이 좋은 습관입니다; 만약 이것이 분리된 파일 안에 있다면 당신은 이것을 다수의 HTML 문서에 적용할 수 있습니다.</p> +<p>우선, HTML과 JavaScript를 뒤죽박죽으로 만드는 것은 좋은 생각이 아닙니다. 왜냐하면 분석하기(parse)가 어려워지기 때문입니다 — JavaScript를 분리한 채로 놔두는 것이 좋은 습관입니다; 만약 이것이 분리된 파일 안에 있다면 여러분은 이것을 다수의 HTML 문서에 적용할 수 있습니다.</p> -<p>하나의 파일이더라도, 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 하나의 버튼은 괜찮지만, 100개의 버튼이라면 어떡할 건가요? 당신은 파일에 100개의 어트리뷰트를 더해야만 합니다; 이것은 빠르게 유지보수의 악몽으로 변할 것입니다. JavaScript와 함께, 다음과 같은 것을 통해서, 당신은 버튼이 얼마나 있든 간에 페이지에 있는 모든 버튼에 쉽게 이벤트 핸들러를 추가할 수 있습니다.</p> +<p>하나의 파일이더라도, 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 하나의 버튼은 괜찮지만, 100개의 버튼이라면 어떡할 건가요? 여러분은 파일에 100개의 어트리뷰트를 더해야만 합니다; 이것은 빠르게 유지보수의 악몽으로 변할 것입니다. JavaScript와 함께, 다음과 같은 것을 통해서, 여러분은 버튼이 얼마나 있든 간에 페이지에 있는 모든 버튼에 쉽게 이벤트 핸들러를 추가할 수 있습니다.</p> <pre class="brush: js">const buttons = document.querySelectorAll('button'); @@ -180,8 +180,8 @@ for (let i = 0; i < buttons.length; i++) { });</pre> <div class="notecard note"> - <h4>Note</h4> - <p>프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 당신의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다.</p> + <h4>참고</h4> + <p>프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 여러분의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다.</p> </div> <h3 id="adding_and_removing_event_handlers">이벤트 핸들러를 추가하고 제거하기</h3> @@ -198,7 +198,7 @@ function bgChange() { btn.addEventListener('click', bgChange);</pre> <div class="note"> -<p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">실제로 작동하는 모습</a>도 보세요).</p> +<p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">실제로 작동하는 모습</a>도 보세요).</p> </div> <p><code>addEventListener()</code> 함수 안에, 우리는 두 매개변수(parameter)를 명시합니다: 우리가 이 핸들러에 등록하고자 하는 이벤트의 이름과, 그것에 응답하여 우리가 실행하기를 원하는 핸들러 함수를 구성하는 코드입니다. 알림: <code>addEventListener()</code> 내부에, 다음과 같이, 익명 함수 안에 모든 코드를 넣는 것은 완벽히 괜찮습니다:</p> @@ -242,33 +242,33 @@ myElement.addEventListener('click', functionB);</pre> <h3 id="What_mechanism_should_I_use">어떤 메커니즘을 사용해야만 하는가?</h3> -<p>이 세 가지 메커니즘 중에서, 당신은 HTML 이벤트 핸들러 어트리뷰트를 사용해서는 안 됩니다 — 이것은 위에서 언급되었다시피, 구식이고, 나쁜 습관입니다.</p> +<p>이 세 가지 메커니즘 중에서, 여러분은 HTML 이벤트 핸들러 어트리뷰트를 사용해서는 안 됩니다 — 이것은 위에서 언급되었다시피, 구식이고, 나쁜 습관입니다.</p> <p>다른 두 가지는, 적어도 간단한 사용에 대해서는, 비교적 서로 바꿀 수 있습니다.</p> <ul> - <li>이벤트 핸들러 프로퍼티는 더 적은 능력과 옵션을 가지고 있지만, 더 나은 크로스 브라우저 호환성을 가지고 있습니다 (Internet Explorer 8만큼 옛날 브라우저에서도 지원됨). 당신은 아마도 학습을 시작하면서 이것들과 함께 시작해야 합니다.</li> - <li>DOM Level 2 이벤트 (<code>addEventListener()</code> 등)은 더욱 강력하지만, 또한 복잡하며 덜 지원됩니다 (Internet Explorer 9만큼 옛날 브라우저에서 지원됨). 당신은 또한 이것들로 실험해봐야 하고, 가능한 곳에서 사용해봐야 합니다.</li> + <li>이벤트 핸들러 프로퍼티는 더 적은 능력과 옵션을 가지고 있지만, 더 나은 크로스 브라우저 호환성을 가지고 있습니다 (Internet Explorer 8만큼 옛날 브라우저에서도 지원됨). 여러분은 아마도 학습을 시작하면서 이것들과 함께 시작해야 합니다.</li> + <li>DOM Level 2 이벤트 (<code>addEventListener()</code> 등)은 더욱 강력하지만, 또한 복잡하며 덜 지원됩니다 (Internet Explorer 9만큼 옛날 브라우저에서 지원됨). 여러분은 또한 이것들로 실험해봐야 하고, 가능한 곳에서 사용해봐야 합니다.</li> </ul> -<p>세 번째 메커니즘의 주된 이점은, 필요하다면 <code>removeEventListener()</code>을 사용하여 이벤트 핸들러 코드를 삭제할 수 있고, 만약 요구된다면 같은 타입의 다수의 리스너를 요소들에 추가할 수 있다는 것입니다. 예를 들어, 당신은 요소에 <code>addEventListener('click', function() { ... })</code>를, 두 번째 인자(argument)에 다른 함수를 명시한 채로, 여러 번 호출할 수 있습니다. 이것은 이벤트 핸들러 프로퍼티로는 불가능합니다. 왜냐하면 프로퍼티를 설정하려는 어떠한 연이은 시도도 앞선 것들을 덮어쓸 것이기 때문입니다. 예를 들자면:</p> +<p>세 번째 메커니즘의 주된 이점은, 필요하다면 <code>removeEventListener()</code>을 사용하여 이벤트 핸들러 코드를 삭제할 수 있고, 만약 요구된다면 같은 타입의 다수의 리스너를 요소들에 추가할 수 있다는 것입니다. 예를 들어, 여러분은 요소에 <code>addEventListener('click', function() { ... })</code>를, 두 번째 인자(argument)에 다른 함수를 명시한 채로, 여러 번 호출할 수 있습니다. 이것은 이벤트 핸들러 프로퍼티로는 불가능합니다. 왜냐하면 프로퍼티를 설정하려는 어떠한 연이은 시도도 앞선 것들을 덮어쓸 것이기 때문입니다. 예를 들자면:</p> <pre class="brush: js">element.onclick = function1; element.onclick = function2; 등등.</pre> <div class="notecard note"> - <h4>Note</h4> - <p>만약 당신이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 당신은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 <code>jQuery</code>) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요.</p> + <h4>참고</h4> + <p>만약 여러분이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 여러분은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 <code>jQuery</code>) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요.</p> </div> <h2 id="Other_event_concepts">다른 이벤트 개념들</h2> -<p>이 섹션에서는, 우리는 간략하게 이벤트에 관련된 몇몇 고급 개념들을 다룹니다. 이 개념들을 이 지점에서 완전히 이해하는 것은 중요하지 않지만, 당신이 마주칠 가능성이 있는 몇몇 코드 패턴의 설명을 제공할지도 모릅니다.</p> +<p>이 섹션에서는, 우리는 간략하게 이벤트에 관련된 몇몇 고급 개념들을 다룹니다. 이 개념들을 이 지점에서 완전히 이해하는 것은 중요하지 않지만, 여러분이 마주칠 가능성이 있는 몇몇 코드 패턴의 설명을 제공할지도 모릅니다.</p> <h3 id="Event_objects">이벤트 객체</h3> -<p>때때로 이벤트 핸들러 함수 내부에서, 당신은 <code>event</code>, <code>evt</code>, 혹은 <code>e</code>와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이것들은 <strong>이벤트 객체</strong>라고 불리고, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달됩니다. 예시로, 무작위 색상 예제를 다시 약간 재작성해 봅시다.</p> +<p>때때로 이벤트 핸들러 함수 내부에서, 여러분은 <code>event</code>, <code>evt</code>, 혹은 <code>e</code>와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이것들은 <strong>이벤트 객체</strong>라고 불리고, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달됩니다. 예시로, 무작위 색상 예제를 다시 약간 재작성해 봅시다.</p> <pre class="brush: js">function bgChange(e) { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -279,18 +279,18 @@ element.onclick = function2; btn.addEventListener('click', bgChange);</pre> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">실제로 작동하는 모습</a>도 보세요).</p> + <h4>참고</h4> + <p>여러분은 이 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">전체 소스 코드를</a> Github에서 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">실제로 작동하는 모습</a>도 보세요).</p> </div> -<p>여기서 당신은 우리가 이벤트 객체, <strong>e</strong>를, 함수에 포함하고, 함수에서 배경 색상 스타일을 — 버튼 그 자체인 — <code>e.target</code>에서 설정한 것을 볼 수 있습니다. 이벤트 객체의 <code>target</code> 프로퍼티는 항상 이벤트가 발생한 요소에 대한 참조입니다. 그래서, 이 예제에서, 우리는 무작위의 배경색을 페이지가 아니라, 버튼에 설정했습니다.</p> +<p>여기서 여러분은 우리가 이벤트 객체, <strong>e</strong>를, 함수에 포함하고, 함수에서 배경 색상 스타일을 — 버튼 그 자체인 — <code>e.target</code>에서 설정한 것을 볼 수 있습니다. 이벤트 객체의 <code>target</code> 프로퍼티는 항상 이벤트가 발생된 요소에 대한 참조입니다. 그래서, 이 예제에서, 우리는 무작위의 배경색을 페이지가 아니라, 버튼에 설정했습니다.</p> <div class="notecard note"> - <h4>Note</h4> - <p>당신은 이벤트 객체에 대해 당신이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 당신은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. <code>e</code>/<code>evt</code>/<code>event</code>가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 당신 자신과, 그리고 만약 가능하다면 타인과.</p> + <h4>참고</h4> + <p>여러분은 이벤트 객체에 대해 여러분이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 여러분은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. <code>e</code>/<code>evt</code>/<code>event</code>가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 여러분 자신과, 그리고 만약 가능하다면 타인과.</p> </div> -<p>당신이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생했을 때 그것들 모두에 뭔가를 하기를 원할 때 <code>e.target</code>은 엄청나게 유용합니다. 예를 들자면, 당신에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, <code>e.target</code>으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>에서 찾을 수 있습니다; <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">또한 실제로 작동하는 모습</a>도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 <code>onclick</code> 핸들러를 각각에 추가하며 요소들을 순회했습니다:</p> +<p>여러분이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생되었을 때 그것들 모두에 뭔가를 하기를 원할 때 <code>e.target</code>은 엄청나게 유용합니다. 예를 들자면, 여러분에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, <code>e.target</code>으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>에서 찾을 수 있습니다; <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">또한 실제로 작동하는 모습</a>도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 <code>onclick</code> 핸들러를 각각에 추가하며 요소들을 순회했습니다:</p> <pre class="brush: js">const divs = document.querySelectorAll('div'); @@ -349,13 +349,13 @@ for (let i = 0; i < divs.length; i++) { <p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> -<p>당신이 만날 대부분의 이벤트 핸들러들은 이벤트 객체에서 사용 가능한 표준 프로퍼티와 함수 (메서드) 집합을 가지고 있습니다; 전체 리스트를 위해 {{domxref("Event")}} 객체 레퍼런스를 참조해 보세요. 그러나 몇몇의 더욱 고급 핸들러들은 그들이 기능하기를 필요로 하는 추가적인 데이터를 포함하는 전문적인 프로퍼티들을 추가합니다. 예를 들어, <a href="/ko/docs/Web/API/MediaStream_Recording_API">Media Recorder API</a>는 <code>dataavailable</code> 이벤트를 가지고 있는데, 이는 몇몇 오디오나 비디오가 기록되고 뭔가를 할 수 있을 때 (예를 들자면 저장하거나, 다시 재생하거나) 발사합니다. 해당하는 <a href="/ko/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> 핸들러의 이벤트 객체는 당신이 그것에 접근하거나 그것으로 무언가를 할 수 있게 하는 녹화된 오디오나 비디오 데이터를 포함하는 이용 가능한 <code>data</code> 프로퍼티를 가지고 있습니다.</p> +<p>여러분이 만날 대부분의 이벤트 핸들러들은 이벤트 객체에서 사용 가능한 표준 프로퍼티와 함수 (메서드) 집합을 가지고 있습니다; 전체 리스트를 위해 {{domxref("Event")}} 객체 레퍼런스를 참조해 보세요. 그러나 몇몇의 더욱 고급 핸들러들은 그들이 기능하기를 필요로 하는 추가적인 데이터를 포함하는 전문적인 프로퍼티들을 추가합니다. 예를 들어, <a href="/en-US/docs/Web/API/MediaStream_Recording_API">Media Recorder API</a>는 <code>dataavailable</code> 이벤트를 가지고 있는데, 이는 몇몇 오디오나 비디오가 기록되고 뭔가를 할 수 있을 때 (예를 들자면 저장하거나, 다시 재생하거나) 발생됩니다. 해당하는 <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> 핸들러의 이벤트 객체는 여러분이 그것에 접근하거나 그것으로 무언가를 할 수 있게 하는 녹화된 오디오나 비디오 데이터를 포함하는 이용 가능한 <code>data</code> 프로퍼티를 가지고 있습니다.</p> <h3 id="Preventing_default_behavior">기본 행동 방지하기</h3> <p>때때로, 이벤트가 기본으로 하는 것을 방지하고 싶은 상황에 마주칠 수 있습니다. 가장 일반적인 예제는 웹 양식에 관한 것인데, 예를 들자면, 커스텀 등록 양식입니다. 세부 사항을 채우고 제출 버튼을 선택했을 때, 자연적인 행동은 데이터가 처리를 위해 서버에 있는 명시된 페이지로 제출되는 것이고, 브라우저는 몇몇 종류의 "성공 메시지" 페이지로 리다이렉트되는 것입니다 (혹은 만약 다른 것이 명시되지 않았다면, 같은 페이지로).</p> -<p>문제는 유저가 데이터를 옳게 제출하지 않았을 때 발생합니다 — 개발자로서, 당신은 서버로의 제출을 방지하고 무엇이 잘못되었고 옳게 되기 위해 무엇이 완료되어야 하는지를 말하는 에러 메시지를 주기를 원합니다. 몇몇 브라우저는 자동 양식 데이터 확인 기능을 제공하지만, 많은 브라우저들은 그렇지 않으므로, 그것들에 의존하지 않고 당신만의 점검 기능을 구현하는 것이 낫습니다. 간단한 예제를 살펴봅시다.</p> +<p>문제는 유저가 데이터를 옳게 제출하지 않았을 때 발생합니다 — 개발자로서, 여러분은 서버로의 제출을 방지하고 무엇이 잘못되었고 옳게 되기 위해 무엇이 완료되어야 하는지를 말하는 에러 메시지를 주기를 원합니다. 몇몇 브라우저는 자동 양식 데이터 확인 기능을 제공하지만, 많은 브라우저들은 그렇지 않으므로, 그것들에 의존하지 않고 여러분만의 점검 기능을 구현하는 것이 낫습니다. 간단한 예제를 살펴봅시다.</p> <p>우선, 이름과 성을 입력하기를 요구하는 간단한 HTML 양식입니다.</p> @@ -381,7 +381,7 @@ for (let i = 0; i < divs.length; i++) { </pre> </div> -<p>이제 JavaScript입니다 — 여기 우리는 텍스트 필드가 비었는지를 검사하는 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 이벤트 핸들러 (제출 이벤트는 양식이 제출되었을 때 발사됩니다) 내부에 아주 간단한 점검을 구현했습니다. 만약 텍스트 필드가 비었다면, 우리는 이벤트 객체에 있는 — 양식 제출을 멈추는 — <code><a href="/ko/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 함수를 호출하고 그리고서 유저에게 무엇이 잘못되었는지를 말하기 위해 양식 아래에 있는 단락에 에러 메시지를 표시합니다.</p> +<p>이제 JavaScript입니다 — 여기 우리는 텍스트 필드가 비었는지를 검사하는 <code><a href="/ko/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 이벤트 핸들러 (제출 이벤트는 양식이 제출되었을 때 발생됩니다) 내부에 아주 간단한 점검을 구현했습니다. 만약 텍스트 필드가 비었다면, 우리는 이벤트 객체에 있는 — 양식 제출을 멈추는 — <code><a href="/ko/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 함수를 호출하고 그리고서 유저에게 무엇이 잘못되었는지를 말하기 위해 양식 아래에 있는 단락에 에러 메시지를 표시합니다.</p> <pre class="brush: js">const form = document.querySelector('form'); const fname = document.getElementById('fname'); @@ -400,13 +400,13 @@ form.onsubmit = function(e) { <p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>전체 코드 소스는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a>에서 확인하실 수 있습니다 (또한 여기서 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">실제로 작동하는 모습</a>도 보세요).</p> </div> <h3 id="Event_bubbling_and_capture">이벤트 버블링과 캡처</h3> -<p>여기서 다룰 마지막 주제는 당신이 종종 마주치지 못할 무언가이지만, 만약 당신이 이것을 이해하지 못한다면 진짜 고통일 것입니다. 이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 이것을 쉽게 만드는 예시를 봅시다. <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 예시와 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">소스 코드</a>를 다른 탭에서) 여세요. 이것은 또한 아래에서 바로 이용 가능합니다.</p> +<p>여기서 다룰 마지막 주제는 여러분이 종종 마주치지 못할 무언가이지만, 만약 여러분이 이것을 이해하지 못한다면 진짜 고통일 것입니다. 이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 이것을 쉽게 만드는 예시를 봅시다. <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 예시와 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">소스 코드</a>를 다른 탭에서) 여세요. 이것은 또한 아래에서 바로 이용 가능합니다.</p> <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> @@ -518,7 +518,7 @@ video.onclick = function() { <h4 id="Bubbling_and_capturing_explained">버블링과 캡처링 설명</h4> -<p>부모 요소를 가지고 있는 요소에서 이벤트가 발사되었을 때 (이 경우, {{htmlelement("video")}}는 부모로서의 {{htmlelement("div")}}를 가지고 있습니다), 현대의 브라우저들은 두 가지 다른 단계(phase)를 실행합니다 — <strong>캡처링</strong>(capturing) 단계와 <strong>버블링</strong>(bubbling) 단계입니다.</p> +<p>부모 요소를 가지고 있는 요소에서 이벤트가 발생되었을 때 (이 경우, {{htmlelement("video")}}는 부모로서의 {{htmlelement("div")}}를 가지고 있습니다), 현대의 브라우저들은 두 가지 다른 단계(phase)를 실행합니다 — <strong>캡처링</strong>(capturing) 단계와 <strong>버블링</strong>(bubbling) 단계입니다.</p> <p><strong>캡처링</strong> 단계에서는:</p> @@ -546,7 +546,7 @@ video.onclick = function() { </ul> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>버블링과 캡처링, 두 타입의 이벤트 핸들러가 모두 존재하는 경우에, 캡처링 단계가 먼저 실행되고, 이어서 버블링 단계가 실행됩니다.</p> </div> @@ -564,47 +564,47 @@ video.onclick = function() { <p><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html 소스 코드</a>를 다운받아 직접 고쳐볼 수도 있고, <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a>에서 고쳐진 결과를 볼 수도 있습니다 (또한 여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">소스 코드</a>를 보세요).</p> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>왜 캡처링과 버블링으로 애를 쓰냐구요? 글쎄요, 브라우저들이 지금보다 훨씬 덜 호환되던 옛날의 좋지 못하던 시절에, Netscape는 오직 이벤트 캡처링만을 사용했고, Internet Explorer는 오직 이벤트 버블링만을 사용했습니다. W3C가 이 움직임을 표준화하고 합의에 이르기를 시도하기로 결정했을 때, 그들은 양 쪽을 다 포함하는 이 시스템을 채용하게 되었는데, 이것이 현대 브라우저들이 구현한 것입니다.</p> </div> <div class="notecard note"> - <h4>Note</h4> + <h4>참고</h4> <p>위에서 언급했다시피, 기본적으로 모든 이벤트 핸들러는 버블링 단계에 등록되어 있고, 이것은 대부분의 경우 더 타당합니다. 만약 정말로 이벤트를 캡처링 단계에 대신 등록하기를 원한다면, <code><a href="/ko/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 사용하고, 옵션인 세 번째 프로퍼티를 <code>true</code>로 설정하여 핸들러를 등록함으로써 그렇게 할 수 있습니다.</p> </div> <h4 id="Event_delegation">이벤트 위임(Event delegation)</h4> -<p>버블링은 또한 <strong>이벤트 위임</strong>의 이점을 취할 수 있게 합니다 — 이 개념은 만약 다수의 자식 요소 중 하나를 선택했을 때 코드를 실행하기를 원한다면, 모든 자식에 개별적으로 이벤트 리스너를 설정해야만 하는 것 대신 이벤트 리스너를 그들의 부모에 설정하고 그들에게서 일어난 이벤트가 그들의 부모에게까지 올라오게 할 수 있다는 사실에 의존합니다. 기억하세요, 버블링은 이벤트 핸들러에 대해 이벤트가 발사된 요소를 먼저 검사하고서, 요소의 부모 등등으로 올라가는 것을 포함합니다.</p> +<p>버블링은 또한 <strong>이벤트 위임</strong>의 이점을 취할 수 있게 합니다 — 이 개념은 만약 다수의 자식 요소 중 하나를 선택했을 때 코드를 실행하기를 원한다면, 모든 자식에 개별적으로 이벤트 리스너를 설정해야만 하는 것 대신 이벤트 리스너를 그들의 부모에 설정하고 그들에게서 일어난 이벤트가 그들의 부모에게까지 올라오게 할 수 있다는 사실에 의존합니다. 기억하세요, 버블링은 이벤트 핸들러에 대해 이벤트가 발생된 요소를 먼저 검사하고서, 요소의 부모 등등으로 올라가는 것을 포함합니다.</p> -<p>하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 당신은 <code>click</code> 이벤트 리스너를 부모 <code><ul></code>에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 <code><ul></code>까지 올라갈 것입니다.</p> +<p>하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 여러분은 <code>click</code> 이벤트 리스너를 부모 <code><ul></code>에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 <code><ul></code>까지 올라갈 것입니다.</p> <p>이 개념은 David Walsh의 블로그에서, 다수의 예제와 함께 더 설명됩니다. <a href="https://davidwalsh.name/event-delegate">어떻게 JavaScript 이벤트 위임은 작동하는가</a>를 보세요.</a>.</p> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">당신의 실력을 평가해 보세요: 이벤트</a>.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">실력을 평가해 보세요: 이벤트</a>.</p> <h2 id="Conclusion">결론</h2> -<p>당신은 이제 이 이른 단계에서 웹 이벤트에 대해 알아야 할 모든 것들을 알아야만 합니다. 언급했듯이, 이벤트는 코어 JavaScript의 일부가 정말 아닙니다 — 이것들은 브라우저 웹 API에 정의되어 있습니다.</p> +<p>여러분은 이제 이 이른 단계에서의 웹 이벤트에 대해 알아야 할 모든 것들을 알고 계실 것입니다. 언급했듯이, 이벤트는 코어 JavaScript의 일부가 정말 아닙니다 — 이것들은 브라우저 웹 API에 정의되어 있습니다.</p> -<p>또한, JavaScript가 쓰이는 다른 맥락들은 다른 이벤트 모델들을 가지고 있다는 것을 이해하는 것은 중요합니다 — 웹 API에서 브라우저 WebExtensions과 Node.js (서버사이드 JavaScript)와 같은 다른 영역들까지. 우리는 이 모든 영역을 지금 당신이 이해하기를 기대하지는 않지만, 이것은 당신이 웹 개발을 배우며 나아가는 동안 이벤트의 기본을 이해하는 것을 분명히 돕습니다.</p> +<p>또한, JavaScript가 쓰이는 다른 맥락들은 다른 이벤트 모델들을 가지고 있다는 것을 이해하는 것은 중요합니다 — 웹 API에서 브라우저 WebExtensions과 Node.js (서버사이드 JavaScript)와 같은 다른 영역들까지. 우리는 이 모든 영역을 지금 여러분이 이해하기를 기대하지는 않지만, 이것은 여러분이 웹 개발을 배우며 나아가는 동안 이벤트의 기본을 이해하는 것을 분명히 돕습니다.</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="https://discourse.mozilla.org/c/mdn/learn">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="https://discourse.mozilla.org/c/mdn/learn">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="https://domevents.dev/">domevents.dev</a> — 탐험을 통해 DOM 이벤트 시스템의 움직임에 대한 배울 수 있는 매우 유용한 인터랙티브 놀이터 앱</li> - <li><a href="/ko/docs/Web/Events">이벤트 레퍼런스</a></li> + <li><a href="/ko/docs/Web/Events">이벤트 참고서</a></li> <li><a href="https://www.quirksmode.org/js/events_order.html">이벤트 순서</a> (캡처링과 버블링에 대한 논의) — Peter-Paul Koch가 작성한 뛰어나게 상세한 글</li> <li><a href="https://www.quirksmode.org/js/events_access.html">이벤트 접근</a> (이벤트 객체에 대한 논의) — Peter-Paul Koch가 작성한 또 다른 뛰어나게 상세한 글</li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> diff --git a/files/ko/learn/javascript/building_blocks/functions/index.html b/files/ko/learn/javascript/building_blocks/functions/index.html index 0b5efacc40..88410c34cd 100644 --- a/files/ko/learn/javascript/building_blocks/functions/index.html +++ b/files/ko/learn/javascript/building_blocks/functions/index.html @@ -1,5 +1,5 @@ --- -title: 함수 — 재사용 가능한 코드 블록 +title: 함수 — 코드 재사용 slug: Learn/JavaScript/Building_blocks/Functions translation_of: Learn/JavaScript/Building_blocks/Functions --- @@ -7,12 +7,12 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 당신이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> +<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 여러분이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">필요 사항:</th> + <th scope="row">필요한 사전 지식:</th> <td>기본적인 컴퓨터 활용 능력, HTML과 CSS의 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">자바스크립트 첫 단계</a>.</td> </tr> <tr> @@ -26,7 +26,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <p>자바스크립트 어디서든 함수를 찾을 수 있습니다. 사실, 우리는 지금까지 수업에서 함수를 계속 사용해왔습니다. 함수에 대해서 아주 많이 말해오지 않았을 뿐이죠. 그러나 이제 함수에 대해서 분명하게 말하고, 실제로 문법을 탐험할 때가 되었습니다.</p> -<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 당신은 함수를 사용하고 있던 겁니다</p> +<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 여러분은 함수를 사용하고 있던 겁니다.</p> <h2 id="브라우저_내장_함수">브라우저 내장 함수</h2> @@ -58,20 +58,20 @@ console.log(madeAString); <p>...우리는 함수를 사용하고 있었어요!</p> <div class="note"> -<p><strong>Note</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 당신의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> +<p><strong>참고</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 여러분의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> </div> -<p>JavaScript 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> +<p>JavaScript 언어는 여러분 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> <p>몇몇 브라우저 내장함수는 핵심(core) 자바스크립트 언어의 일부가 아니라는 것을 유념하세요. 몇몇은 브라우저 API의 일부로써 정의되어 있는데, 더욱 많은 기능성을 제공하기 위해 기본(default) 언어의 위에 개발되었습니다 (<a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EA%B7%B8%EB%9E%98%EC%84%9C_%EC%A7%84%EC%A7%9C_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%A0_%EC%88%98_%EC%9E%88%EB%82%98%EC%9A%94">앞선 코스</a>에서 더 자세한 설명을 볼 수 있습니다). 브라우저 API를 다루는 법은 나중에 더 살펴보도록 하겠습니다.</p> <h2 id="함수_대_메소드">함수 대 메소드</h2> -<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 당신은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 당신은 두 용어를 만날 가능성이 있습니다.</p> +<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 여러분은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 여러분은 두 용어를 만날 가능성이 있습니다.</p> -<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 당신은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> +<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 여러분은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> -<p>당신은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 당신의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 당신은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> +<p>여러분은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 여러분의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 여러분은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -87,13 +87,13 @@ console.log(madeAString); <pre class="brush: js notranslate">draw();</pre> -<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 당신이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 당신은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> +<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 여러분이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 여러분은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> <pre class="brush: js notranslate">function random(number) { return Math.floor(Math.random()*number); }</pre> -<p>브라우저의 내장 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> +<p>브라우저의 내장 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> <h2 id="함수_호출">함수 호출</h2> @@ -107,12 +107,12 @@ myFunction() // calls the function once</pre> <div class="notecard note"> -<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 당신은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> +<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 여러분은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> </div> <h2 id="익명_함수">익명 함수</h2> -<p>당신은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> +<p>여러분은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> <pre class="brush: js notranslate">function myFunction() { alert('hello'); @@ -132,9 +132,9 @@ myButton.onclick = function() { alert('hello'); }</pre> -<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 당신은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> +<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 여러분은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> -<p>당신은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> +<p>여러분은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> <pre class="brush: js notranslate">var myGreeting = function() { alert('hello'); @@ -148,7 +148,7 @@ myButton.onclick = function() { <pre class="brush: js notranslate">myGreeting();</pre> -<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 당신은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> +<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 여러분은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> <pre class="brush: js notranslate">var anotherGreeting = function() { alert('hello'); @@ -178,7 +178,7 @@ anotherGreeting();</pre> <p>몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이것들은 함수 괄호 안에 포함될 필요가 있는 값들인데, 올바르게 동작하기 위해 필요합니다.</p> <div class="note"> -<p><strong>Note</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> +<p><strong>참고</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> </div> <p>예를 들어, 브라우저의 내장 함수인 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a>은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠. </p> @@ -191,10 +191,10 @@ anotherGreeting();</pre> var newString = myText.replace('string', 'sausage');</pre> <div class="note"> -<p><strong>Note</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> +<p><strong>참고</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> </div> -<p>매개변수는 이따금 선택 사항이기도 합니다. 당신이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> +<p>매개변수는 이따금 선택 사항이기도 합니다. 여러분이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> <pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); @@ -206,13 +206,13 @@ var madeAString = myArray.join(); <h2 id="함수_스코프와_충돌">함수 스코프와 충돌(conflicts)</h2> -<p>우리 '<a href="https://developer.mozilla.org/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> +<p>우리 '<a href="/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> <p>함수 바깥에 선언된 가장 상위 레벨의 스코프를 '<strong>전역 스코프</strong>(global scope)' 라고 부릅니다.전역 스코프 내에 정의된 값들은 어느 코드든 접근이 가능합니다.</p> -<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 당신의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 당신이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> +<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 여러분의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 여러분이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> -<p>예를 들어 , 당신에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> +<p>예를 들어 , 여러분에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> <pre class="brush: html notranslate"><!-- Excerpt from my HTML --> <script src="first.js"></script> @@ -233,21 +233,21 @@ function greeting() { alert('Our company is called ' + name + '.'); }</pre> -<p>당신이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 당신은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> +<p>여러분이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 여러분은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> <div class="note"> -<p><strong>Note</strong>: 예제를 여기서 볼 수 있습니다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a> 또한 볼 수 있습니다.).</p> +<p><strong>참고</strong>: 예제를 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub</a>에서 볼 수 있습니다. (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">소스 코드</a> 또한 볼 수 있습니다).</p> </div> <p>함수의 일부를 코드 안에 가두는 것은 이러한 문제를 피할 수 있고, 가장 좋은 방법이라 여겨집니다.</p> <p>동물원 같네요. 사자, 얼룩말, 호랑이, 그리고 펭귄은 자신들만의 울타리 안에 있으며, 그들의 울타리 내부에 있는 것만 건드릴 수 있어요. 함수 스코프처럼 말이죠. 만약 동물들이 다른 울타리 안으로 들어갈 수 있었다면, 문제가 생겼을 겁니다. 좋게는 다른 동물이 낯선 거주 환경에서 불편함을 느끼는 정도겠죠. 사자나 호랑이가 펭귄의 물기 많고 추운 영역 안에서 끔찍함을 느끼듯이요. 하지만 최악의 상황엔 사자나 호랑이가 펭귄을 먹어 치울지도 모르죠!</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="mdn-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> <p>사육사는 전역 스코프와 같습니다. 그들은 모든 울타리에 들어갈 수 있고, 먹이를 보충하고, 아픈 동물들을 돌볼 수 있어요.</p> -<h3 id="실습_스코프랑_놀자">실습: 스코프랑 놀자</h3> +<h3 id="실습_스코프랑_놀자">직접 해보기: 스코프랑 놀자</h3> <p>스코프를 설명하기 위해 스코프 사용의 실례를 한번 봅시다.</p> @@ -256,7 +256,7 @@ function greeting() { <li>예제를 인터넷 브라우저나 텍스트 에디터를 통해 열어봅시다.</li> <li>브라우저 개발자 툴에서 자바스크립트 콘솔을 엽시다. 자바스크립트 콘솔에서 아래와 같이 작성해보세요. <pre class="brush: js notranslate">output(x);</pre> - 당신은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> + 여러분은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> <li>이제 다음을 콘솔에 입력해 보세요. <pre class="brush: js notranslate">output(y); output(z);</pre> @@ -275,8 +275,8 @@ function b() { <pre class="brush: js notranslate">a(); b();</pre> - 당신은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> - <li>이제 당신의 코드를 다음과 같이 갱신해 보세요. + 여러분은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> + <li>이제 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(x); @@ -292,7 +292,7 @@ function b() { b();</pre> </li> <li>브라우저 뷰포트에 <code>a()</code> 와 <code>b()</code> 모두 x 값을 출력해야 합니다. 왜냐하면 비록 <code>output()</code> 호출이 <code>x</code>가 정의되어 있는 같은 스코프에 있지 않더라도, <code>x</code>는 전역 변수이므로 모든 코드 어디서든 이용 가능하기 때문에 이것들은 잘 작동합니다.</li> - <li>마지막으로, 당신의 코드를 다음과 같이 갱신해 보세요. + <li>마지막으로, 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(z); @@ -310,11 +310,11 @@ b();</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> +<p><strong>참고</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> </div> <div class="note"> -<p><strong>Note</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 당신이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 당신이 이 오류를 얻었고 당신이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> +<p><strong>참고</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 여러분이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 여러분이 이 오류를 얻었고 여러분이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> </div> <ul> @@ -322,7 +322,7 @@ b();</pre> <h3 id="Functions_inside_functions">함수 내부의 함수</h3> -<p>당신은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 당신이 크고 복잡한 함수를 가지고 있다면, 만약 당신이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> +<p>여러분은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 여러분이 크고 복잡한 함수를 가지고 있다면, 만약 여러분이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue; @@ -345,7 +345,7 @@ function subFunction3() { } </pre> -<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 당신은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> +<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 여러분은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue = 1; @@ -367,20 +367,20 @@ function subFunction3(value) { console.log(value); }</pre> -<h2 id="Test_your_skills!">당신의 기량을 시험해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>당신은 이 문서의 끝에 도달했지만, 가장 중요한 정보들을 기억할 수 있으신가요? 당신은 나아가기 전에 이 정보들을 보유하고 있다는 것을 확인하는 추가적인 테스트들을 찾을 수 있습니다 — 다음을 보세요: <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 당신은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">실력을 평가해 보세요: 함수</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 여러분은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> <h2 id="Conclusion">결론</h2> -<p>이 문서는, 당신만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> +<p>이 문서는, 여러분만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> -<h2 id="See_also">참조</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Guide/Functions">자세한 함수 가이드</a> — 여기 포함되지 않은 몇몇 고급 기능들을 다룹니다.</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 레퍼런스</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 레퍼런스</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 참고서</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 참고서</li> </ul> <ul> @@ -388,14 +388,14 @@ function subFunction3(value) { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">In this module</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> + <li><strong>함수 — 코드 재사용</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> </ul> diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/index.html b/files/ko/learn/javascript/building_blocks/image_gallery/index.html index 5e9e8f997b..3214dd6d0f 100644 --- a/files/ko/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ko/learn/javascript/building_blocks/image_gallery/index.html @@ -17,13 +17,13 @@ tags: <div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 당신의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.</p> +<p class="summary">이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">필요한 사전 지식:</th> - <td>이 평가를 시도하기 전에 당신은 이 모듈의 모든 문서를 독파해야만 합니다.</td> + <td>이 평가를 시도하기 전에 여러분은 이 모듈의 모든 문서를 독파해야만 합니다.</td> </tr> <tr> <th scope="row">목표:</th> @@ -44,7 +44,7 @@ tags: <h2 id="Project_brief">프로젝트 개요</h2> -<p>당신에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 당신은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:</p> +<p>여러분에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 여러분은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:</p> <pre class="brush: html"><h1>Image gallery example</h1> @@ -69,7 +69,7 @@ tags: <li>이것은 <code>thumb-bar <div></code> (소위 "섬네일" 이미지) 내부의 이미지들의 폭을 20%로 설정하고, 사진들이 한 줄에서 서로의 다음에 오도록 왼쪽으로 부유시킵니다.</li> </ul> -<p>당신의 JavaScript는 다음을 하기를 필요로 합니다:</p> +<p>여러분의 JavaScript는 다음을 하기를 필요로 합니다:</p> <ul> <li>모든 이미지를 순회하고, 각각에 대해 <code><img></code> 요소를 페이지에 그 이미지를 끼워 넣는 <code>thumb-bar <div></code> 내부에 삽입하기.</li> @@ -87,26 +87,26 @@ tags: <p>우리는 이미 <code>thumbBar</code> 상수 내부에 <code>thumb-bar <div></code>에 대한 참조를 저장하고, 새로운 <code><img></code> 요소를 생성하고, 그것의 <code>src</code> 어트리뷰트를 플레이스홀더 값 <code>xxx</code>로 설정하고, 그리고 <code>thumbBar</code> 내부에 이 새로운 <code><img></code> 요소를 추가하는 코드를 제공했습니다.</p> -<p>당신은 다음을 할 필요가 있습니다:</p> +<p>여러분은 다음을 할 필요가 있습니다:</p> <ol> - <li>5개의 모든 이미지를 순회하는 반복문 내부의 "Looping through images" 주석 아래에 코드 섹션 추가하기 — 당신은 그저 5개의 숫자를 순회할 필요가 있는데, 각 숫자는 각각의 이미지를 나타냅니다.</li> + <li>5개의 모든 이미지를 순회하는 반복문 내부의 "Looping through images" 주석 아래에 코드 섹션 추가하기 — 여러분은 그저 5개의 숫자를 순회할 필요가 있는데, 각 숫자는 각각의 이미지를 나타냅니다.</li> <li>각각의 반복에서, <code>xxx</code> 플레이스홀더 값을 각 경우의 이미지 경로와 동일한 문자열으로 대체하세요. 우리는 <code>src</code> 어트리뷰트의 값을 각 경우에서 이 값으로 설정하고 있습니다. 각 경우에서, 이미지는 이미지 디렉토리 내부에 있고 그것의 이름은 <code>pic1.jpg</code>, <code>pic2.jpg</code> 등등이라는 것을 기억해 두세요.</li> </ol> <h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">onclick 핸들러를 각 섬네일 이미지에 추가하기</h3> -<p>각각의 반복에서, 당신은 <code>onclick</code> 핸들러를 현재의 <code>newImage</code>에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 <code>src</code> 어트리뷰트의 값을 찾아야만 합니다. <code>displayed-img <img></code>의 <code>src</code> 어트리뷰트 값을 매개변수로서 전달된 <code>src</code> 값으로 설정하세요.</p> +<p>각각의 반복에서, 여러분은 <code>onclick</code> 핸들러를 현재의 <code>newImage</code>에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 <code>src</code> 어트리뷰트의 값을 찾아야만 합니다. <code>displayed-img <img></code>의 <code>src</code> 어트리뷰트 값을 매개변수로서 전달된 <code>src</code> 값으로 설정하세요.</p> -<p>그 대신에, 당신은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.</p> +<p>그 대신에, 여러분은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.</p> <h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">어두워지게/밝게 하는 버튼을 실행하는 핸들러 작성하기</h3> -<p>우리의 어두워지게/밝게 하는 <code><button></code>은 가만히 있습니다 — 우리는 이미 <code>btn</code> 상수에 <code><button></code>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 당신은 다음을 수행하는 <code>onclick</code>을 추가할 필요가 있습니다:</p> +<p>우리의 어두워지게/밝게 하는 <code><button></code>은 가만히 있습니다 — 우리는 이미 <code>btn</code> 상수에 <code><button></code>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 여러분은 다음을 수행하는 <code>onclick</code>을 추가할 필요가 있습니다:</p> <ol> - <li><code><button></code>에 설정된 현재 클래스명을 확인 — 당신은 다시 이것을 <code>getAttribute()</code>를 사용함으로써 달성할 수 있습니다.</li> - <li>만약 클래스명이 <code>"dark"</code>라면, <code><button></code> 클래스를 <code>"light"</code>로 (<code><a href="/ko/docs/Web/API/Element/setAttribute">setAttribute()</a></code>를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0.5)"</code>로 변경.</li> + <li><code><button></code>에 설정된 현재 클래스명을 확인 — 여러분은 다시 이것을 <code>getAttribute()</code>를 사용함으로써 달성할 수 있습니다.</li> + <li>만약 클래스명이 <code>"dark"</code>라면, <code><button></code> 클래스를 <code>"light"</code>로 (<code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0.5)"</code>로 변경.</li> <li>만약 클래스명이 <code>"dark"</code>가 아니라면, <code><button></code> 클래스를 <code>"dark"</code>로, 이것의 텍스트 콘텐츠를 다시 "Darken"으로, 덮어씌운 <code><div></code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0)"</code>로 변경.</li> </ol> @@ -119,34 +119,34 @@ overlay.style.backgroundColor = xxx;</pre> <h2 id="Hints_and_tips">힌트와 팁</h2> <ul> - <li>당신은 어떤 방법으로도 HTML 또는 CSS를 수정할 필요가 없습니다.</li> + <li>여러분은 어떤 방법으로도 HTML 또는 CSS를 수정할 필요가 없습니다.</li> </ul> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"이미지 갤러리에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> <p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><strong>이미지 갤러리</strong></li> diff --git a/files/ko/learn/javascript/building_blocks/index.html b/files/ko/learn/javascript/building_blocks/index.html index 27e2a90cf5..175b46c6f0 100644 --- a/files/ko/learn/javascript/building_blocks/index.html +++ b/files/ko/learn/javascript/building_blocks/index.html @@ -12,38 +12,54 @@ translation_of: Learn/JavaScript/Building_blocks --- <div>{{LearnSidebar}}</div> -<p class="summary">이번 장에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다루겠습니다.</p> +<p class="summary">이번 과정에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다룰 것입니다.</p> -<h2 id="선행사항">선행사항</h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">프론트엔드 웹 개발자가 되기를 생각해보고 계신가요?</h4> -<p>시작하기전에, 기본 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a> 기본지식을 가지고 계신 것이 좋습니다. 그리고 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫 걸음</a>을 꼭 진행하신후 오시기 바랍니다.</p> + <p>저희는 여러분의 목표를 향해 공부할 필요가 있는 모든 필수적인 정보를 담고 있는 코스를 준비해 놓았습니다.</p> + + <p><a href="/ko/docs/Learn/Front-end_web_developer"><strong>시작하기</strong></a></p> + +</div> + +<h2 id="Prerequisites">필요한 사전 지식</h2> + +<p>시작하기 전에, 기본적인 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>과 <a href="/ko/docs/Learn/CSS/First_steps">CSS</a> 지식을 알고 계셔야 하고, 또한 지난 모듈인 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>을 학습하셔야 합니다.</p> <div class="note"> -<p><strong>Note</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타장치) , <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p> +<p><strong>참고</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p> </div> -<h2 id="가이드">가이드</h2> +<h2 id="Guides">가이드</h2> <dl> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt> - <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></dt> + <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></dt> - <dd>때로는 여러 반복 작업을 수행해야 할 때가 있습니다. 예를 들면 이름 목록을 살펴보는 것입니다. 프로그래밍에서 이런 반복 작업은 매우 적합합니다. JavaScript의 반복문 구조를 살펴봅니다.</dd> + <dd>때때로 한 번보다 많이 연이어 작업을 완료해야 할 필요가 있습니다. 예를 들자면, 이름 목록을 순회하는 것입니다. 프로그래밍에서, 반복문은 이 작업을 대단히 잘 수행합니다. 여기서 우리는 JavaScript에서의 반복문 구조를 살펴볼 것입니다.</dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></dt> - <dd>코딩의 또 다른 핵심 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 구간 안에 하나의 작업을 하는 코드를 저장한 후, 같은 코드를 여러 번 입력하지 않고도 짧은 명령어를 사용해 이 코드를 이용할 수 있습니다. 기본 문법, 함수, 범위 및 매개 변수를 호출하고 정의하는 방법과 같은 함수의 기본 개념을 살펴봅니다.</dd> + <dd>코딩에서의 또 다른 필수적인 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 블록 안에 하나의 작업을 수행하는 코드 조각을 저장할 수 있고, 언제든지 그 코드 조각이 필요할 때 같은 코드를 여러번 입력하지 않고도 짧은 명령을 사용해 그 코드를 호출할 수 있습니다. 이 문서에서는 기본 문법, 어떻게 함수를 호출하고 정의하는지, 스코프, 그리고 매개변수와 같은 함수의 기본 개념을 탐사할 것입니다.</dd> <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></dt> - <dd>그동안 배운 이론을 활용해 실제 코드를 작성해봅니다. 사용자 정의 함수를 작성해 보고, 함수의 유용한 기능을 좀 더 알아봅니다.</dd> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수는 값을 반환한다</a></dt> - <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환값입니다. 어떤 함수는 완료하면서 값을 반환하지 않지만, 반환하는 함수도 있습니다. 값이 무엇인지, 코드에서 어떻게 사용하는지, 여러분이 작성한 함수가 어떻게 값을 반환하는지 이해하는 것이 중요합니다.</dd> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt> - <dd>이벤트란 프로그래밍중인 시스템에서 발생하는 동작이나 발생을 말하며, 시스템에서 그에 대해 알려주므로 원하는 경우 사용자가 어떤 방식으로든 이에 응답 할 수 있습니다. 예를 들어 사용자가 웹 페이지에서 버튼을 클릭하면 정보 상자를 표시하여 해당 작업에 응답 할 수 있습니다. 이 마지막 문서에서는 이벤트를 둘러싼 몇 가지 중요한 개념에 대해 이야기하고 브라우저에서 어떻게 작동하는지 살펴 보겠습니다.</dd> + <dd>그동안 배운 이론을 활용해, 이 문서에서는 실용적인 경험을 제공합니다. 여기서 여러분은 사용자 정의 함수를 만드는 연습을 할 것입니다. 그 과정에서, 우리는 또한 함수를 다루는 데 있어 유용한 추가적인 세부 사항을 알아볼 것입니다.</dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></dt> + <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환 값입니다. 어떤 함수는 완료 후에 중요한 값을 반환하지 않지만, 반환하는 함수도 있습니다. 그 값이 무엇인지, 어떻게 사용하는지, 그리고 어떻게 유용한 값들을 반환하는 사용자 정의 함수를 만드는지를 이해하는 것은 중요합니다.</dd> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></dt> + <dd>이벤트란 여러분이 프로그래밍하고 있는 시스템에서 발생하는 동작이나 발생인데, 이는 시스템이 여러분에게 알려주므로 만약 원한다면 어떠한 방식으로 이에 응답할 수 있습니다. 예를 들어 만약 사용자가 웹페이지의 버튼을 클릭한다면, 여러분은 그 동작에 응답하여 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 자미가 문서에서 우리는 이벤트에 대한 중요한 개념을 논하고, 이벤트가 브라우저에서 어떻게 동작하는지 살펴볼 것입니다.</dd> </dl> -<h2 id="평가">평가</h2> +<h2 id="Assessments">평가</h2> + +<p>다음의 평가는 위의 가이드에서 다뤄진 기본 JavaScript에 대한 여러분의 이해를 테스트할 것입니다.</p> + +<dl> + <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></dt> + <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로, 많은 웹 사이트에서 볼 수 있는 상당히 공통적인 항목인 JavaScript 기반 이미지 갤러리를 구현하며 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 지식을 테스트할 것입니다.</dd> +</dl> -<p>여기에선 위에서 다룬 JavaScript 기본 사항에 대해 여러분이 얼마나 이해했는지 테스트해볼 수 있습니다..</p> +<h2 id="See_also">같이 보기</h2> <dl> - <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt> - <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로 많은 웹 사이트에서 볼 수있는 공통 항목인 JavaScript 기반 이미지 갤러리를 만들어 반복문, 함수, 조건문, 이벤트에 대한 지식을 테스트합니다.</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>웹 개발자가 되려는 분들에게 훌륭한 자원입니다 — Learn JavaScript는 자동화된 평가에 의해 가이드되며, 짧은 강의와 상호작용을 하는 테스트를 가진 대화형 환경입니다. 처음 40개의 강의는 무료이며, 전체 코스는 한 번의 작은 지불로 이용 가능합니다.</dd> </dl> diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.html b/files/ko/learn/javascript/building_blocks/looping_code/index.html index 86c1d5e1bf..29cced78d2 100644 --- a/files/ko/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ko/learn/javascript/building_blocks/looping_code/index.html @@ -16,8 +16,8 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">선수 과목 :</th> - <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript</a>의 기본 이해.</td> + <th scope="row">필요한 사전 지식:</th> + <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>.</td> </tr> <tr> <th scope="row">목표:</th> @@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 봅시다. 그는 이것을 알기 위해 다음과 같은 반복을 사용할지도 모릅니다:</p> <p><br> - <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> + <img alt="" src="loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> <p>반복은 보통 다음 기능의 하나 또는 그 이상을 가집니다:</p> @@ -59,9 +59,9 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <h3 id="Why_bother">왜 굳이?</h3> -<p>이 시점에서, 당신은 아마도 반복문 뒤에 있는 고급 개념을 이해했을 것이지만, 당신은 아마도 "좋아, 훌륭하군, 하지만 어떻게 이게 내가 JavaScript 코드를 더 잘 짜게 도와준다는 거지?" 라고 생각할 것입니다. 앞서 말했듯이, <strong>반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데</strong>, 이는 <strong>빠르게 반복적인 일을 완료</strong>하는 데 뛰어납니다.</p> +<p>이 시점에서, 여러분은 아마도 반복문 뒤에 있는 고급 개념을 이해했을 것이지만, 여러분은 아마도 "좋아, 훌륭하군, 하지만 어떻게 이게 내가 JavaScript 코드를 더 잘 짜게 도와준다는 거지?" 라고 생각할 것입니다. 앞서 말했듯이, <strong>반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데</strong>, 이는 <strong>빠르게 반복적인 일을 완료</strong>하는 데 뛰어납니다.</p> -<p>종종, 코드는 반복문의 각각의 연이은 반복에서 조금 다를 것인데, 이는 당신이 비슷하지만 조금 다른 일더미를 완료할 수 있다는 것을 의미합니다; 만약 당신이 수행할 많은 다른 계산들을 가지고 있다면, 당신은 같은 것을 계속 그리고 계속 하는 것이 아니라, 각각의 다른 것을 하기를 원할 것입니다.</p> +<p>종종, 코드는 반복문의 각각의 연이은 반복에서 조금 다를 것인데, 이는 여러분이 비슷하지만 조금 다른 일더미를 완료할 수 있다는 것을 의미합니다; 만약 여러분이 수행할 많은 다른 계산들을 가지고 있다면, 여러분은 같은 것을 계속 그리고 계속 하는 것이 아니라, 각각의 다른 것을 하기를 원할 것입니다.</p> <p>왜 반복문이 그렇게 좋은 것인지를 완벽히 보여주는 예제를 봅시다. 우리가 {{htmlelement("canvas")}} 요소 위에 무작위의 원 100개를 그리고 싶다고 칩시다 (예제를 다시 실행하고, 다시 다른 무작위 집합들을 보기 위해 <em>Update</em>버튼을 누르세요):</p> @@ -164,7 +164,7 @@ ctx.fill();</pre> <h2 id="The_standard_for_loop">반복문의 표준</h2> -<p>몇몇 특정한 반복문 구조 탐구를 시작해 봅시다. 당신이 대부분의 경우에 사용하게 될, 첫번째는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문입니다. 이것은 다음의 문법(syntax)을 가지고 있습니다:</p> +<p>몇몇 특정한 반복문 구조 탐구를 시작해 봅시다. 여러분이 대부분의 경우에 사용하게 될, 첫번째는 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문입니다. 이것은 다음의 문법(syntax)을 가지고 있습니다:</p> <pre class="notranslate">for (초기화식; 종료 조건; 증감식) { // 실행할 코드 @@ -235,7 +235,7 @@ para.textContent = info;</pre> <p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">예제를 GitHub에서</a> 또한 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">예제를 GitHub에서</a> 또한 찾을 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <p>이것은 반복문이 배열 안의 요소들에 대해 반복하고 그 각각의 요소들과 무언가를 하기 위해 쓰였다는 것을 보여줍니다 — 이것은 JavaScript에서 아주 일반적인 패턴입니다. 여기서:</p> @@ -255,11 +255,11 @@ para.textContent = info;</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 우리는 조건을 <code>i <= cats.length</code>이 아니라 <code>i < cats.length</code>로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 <code>i</code>를 0에서 시작했고, <code>i = 4</code>까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, <code>cats.length</code>는 5를 반환하지만, 우리는 <code>i = 5</code>까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 <code>undefined</code>를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 <code>cats.length</code>과 같은 데까지가 아니라 (<code>i <=</code>), <code>cats.length</code>보다 1 작은 데까지 가기를 원합니다 (<code>i <</code>).</p> +<p><strong>참고</strong>: 우리는 조건을 <code>i <= cats.length</code>이 아니라 <code>i < cats.length</code>로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 <code>i</code>를 0에서 시작했고, <code>i = 4</code>까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, <code>cats.length</code>는 5를 반환하지만, 우리는 <code>i = 5</code>까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 <code>undefined</code>를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 <code>cats.length</code>과 같은 데까지가 아니라 (<code>i <=</code>), <code>cats.length</code>보다 1 작은 데까지 가기를 원합니다 (<code>i <</code>).</p> </div> <div class="note"> -<p><strong>Note</strong>: 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (<code><=</code>)가 아니라 "동등(equal to)" (<code>===</code>)을 사용하는 것입니다. 만약 우리가 반복문을 <code>i = 5</code>까지 실행하기를 원했다면, 종료 조건은 <code>i <= cats.length</code>일 필요가 있었을 것입니다. 만약 우리가 그것을 <code>i === cats.length</code>에 설정했다면, 첫 반복문 반복에서 <code>i</code>는 <code>5</code>와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.</p> +<p><strong>참고</strong>: 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (<code><=</code>)가 아니라 "동등(equal to)" (<code>===</code>)을 사용하는 것입니다. 만약 우리가 반복문을 <code>i = 5</code>까지 실행하기를 원했다면, 종료 조건은 <code>i <= cats.length</code>일 필요가 있었을 것입니다. 만약 우리가 그것을 <code>i === cats.length</code>에 설정했다면, 첫 반복문 반복에서 <code>i</code>는 <code>5</code>와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.</p> </div> <p>우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있습니다:</p> @@ -279,7 +279,7 @@ para.textContent = info;</pre> }</pre> <div class="note"> -<p><strong>Note</strong>: 당신은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">예제 코드를 Github</a>에서 또한 찾아볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 이 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">예제 코드를 Github</a>에서 또한 찾아볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <div class="warning"> @@ -288,7 +288,7 @@ para.textContent = info;</pre> <h2 id="Exiting_loops_with_break">break로 반복문 종료하기</h2> -<p>만약 당신이 모든 반복이 완료되기 전에 반복문을 종료하고 싶다면, 당신은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a>문을 사용할 수 있습니다. 우리는 이미 이것을 지난 문서에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch문</a>을 살펴볼 때 만났습니다 — 입력 표현식과 일치하는 switch문에서 case가 충족되었을 때, <code>break</code>문은 즉시 switch문을 종료하고 switch문 다음에 있는 코드로 이동합니다.</p> +<p>만약 여러분이 모든 반복이 완료되기 전에 반복문을 종료하고 싶다면, 여러분은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a>문을 사용할 수 있습니다. 우리는 이미 이것을 지난 문서에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch문</a>을 살펴볼 때 만났습니다 — 입력 표현식과 일치하는 switch문에서 case가 충족되었을 때, <code>break</code>문은 즉시 switch문을 종료하고 switch문 다음에 있는 코드로 이동합니다.</p> <p>이것은 반복문과 같은 것입니다 — <code>break</code>문은 즉시 반복문을 종료하고 브라우저가 반복문 뒤에 있는 코드로 이동하게 합니다.</p> @@ -387,7 +387,7 @@ btn.addEventListener('click', function() { </ol> <div class="note"> -<p>Note: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p> +<p>참고: 여러분은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <h2 id="Skipping_iterations_with_continue">Continue로 반복 건너뛰기</h2> @@ -465,12 +465,12 @@ for (let i = 1; i <= num; i++) { </ol> <div class="note"> -<p><strong>Note</strong>: 당신은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>).</p> +<p><strong>참고</strong>: 여러분은 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">전체 소스 코드를 GitHub에서</a> 또한 볼 수 있습니다 (또한 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">실제로 작동하는 모습도 볼 수 있습니다</a>).</p> </div> <h2 id="while_and_do_..._while">while 그리고 do ... while</h2> -<p><code>for</code> 는 JavaScript에서 사용할 수 있는 유일한 유형의 반복문이 아닙니다. 실제로 많은 다른 것들이 있고, 지금 이 모든 것을 이해할 필요는 없는 반면 당신이 약간 다른 방식으로 작업에서 같은 기능을 인식할 수 있도록 다른 두 개의 구조를 살펴 볼 가치가 있습니다.</p> +<p><code>for</code> 는 JavaScript에서 사용할 수 있는 유일한 유형의 반복문이 아닙니다. 실제로 많은 다른 것들이 있고, 지금 이 모든 것을 이해할 필요는 없는 반면 여러분이 약간 다른 방식으로 작업에서 같은 기능을 인식할 수 있도록 다른 두 개의 구조를 살펴 볼 가치가 있습니다.</p> <p>먼저 <a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 반복문을 살펴봅시다. 이 반복문의 구문은 다음과 같습니다:</p> @@ -500,7 +500,7 @@ while (i < cats.length) { }</pre> <div class="note"> -<p><strong>Note</strong>: 예상한대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">전체 소스 코드</a>도 보세요).</p> +<p><strong>참고</strong>: 예상한 대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">전체 소스 코드</a>도 보세요).</p> </div> <p><a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 반복문은 많이 비슷하지만 while 구조에 변형을 제공합니다:</p> @@ -531,38 +531,38 @@ do { } while (i < cats.length);</pre> <div class="note"> -<p><strong>Note</strong>: 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">전체 소스 코드</a>도 보세요).</p> +<p><strong>참고</strong>: 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (또한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">전체 소스 코드</a>도 보세요).</p> </div> <div class="warning"> <p><strong>중요</strong>: 모든 반복문과 마찬가지로 — while과 do...while문에서, 조건이 결국 false가 되도록, 경우에 따라, 초기화식이 증가되거나 감소되게 해야만 합니다.만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 <strong>무한 루프</strong>(infinite loop)라고 불립니다.</p> </div> -<h2 id="Active_learning_Launch_countdown!">활동 학습: 카운트 다운 시작!</h2> +<h2 id="Active_learning_Launch_countdown!">직접 해보기: 카운트 다운 시작!</h2> -<p>이 연습에서, 우리는 당신이 간단한 발사 카운트다운을, 10에서 발사까지, 출력 박스에 출력하기를 원합니다. 구체적으로 말하면, 우리는 당신이 다음을 하기를 원합니다:</p> +<p>이 연습에서, 우리는 여러분이 간단한 발사 카운트다운을, 10에서 발사까지, 출력 박스에 출력하기를 원합니다. 구체적으로 말하면, 우리는 여러분이 다음을 하기를 원합니다:</p> <ul> - <li>10에서 0까지 반복하세요. 우리는 당신에게 초기화식을 제공합니다 — <code>let i = 10;</code>.</li> - <li>각 반복마다, 새로운 단락을 만들고, 우리가 <code>const output = document.querySelector('.output');</code>를 사용해 선택한, 출력 <code><div></code>에 추가하세요. 주석에, 우리는 당신에게 반복문 내부 어딘가에서 사용될 필요가 있는 세 줄의 코드를 제공합니다. + <li>10에서 0까지 반복하세요. 우리는 여러분에게 초기화식을 제공합니다 — <code>let i = 10;</code>.</li> + <li>각 반복마다, 새로운 단락을 만들고, 우리가 <code>const output = document.querySelector('.output');</code>를 사용해 선택한, 출력 <code><div></code>에 추가하세요. 주석에, 우리는 여러분에게 반복문 내부 어딘가에서 사용될 필요가 있는 세 줄의 코드를 제공합니다. <ul> <li><code>const para = document.createElement('p');</code> — 새로운 단락을 만듭니다.</li> <li><code>output.appendChild(para);</code> — 단락을 출력 <code><div></code>에 추가합니다.</li> - <li><code>para.textContent =</code> — 등호 기호 이후에, 우항(right-hand side)에 당신이 입력한 것과 같은 텍스트를 단락 내부에 만듭니다.</li> + <li><code>para.textContent =</code> — 등호 기호 이후에, 우항(right-hand side)에 여러분이 입력한 것과 같은 텍스트를 단락 내부에 만듭니다.</li> </ul> </li> - <li>다른 반복 숫자는 그 반복에 대한 단락에 입력될 다른 텍스트를 요구합니다 (당신은 조건문과 다수의 <code>para.textContent =</code> 줄이 필요할 것입니다): + <li>다른 반복 숫자는 그 반복에 대한 단락에 입력될 다른 텍스트를 요구합니다 (여러분은 조건문과 다수의 <code>para.textContent =</code> 줄이 필요할 것입니다): <ul> <li>만약 숫자가 10이면, 단락에 "Countdown 10"을 출력하세요.</li> <li>만약 숫자가 0이면, "Blast off!"를 단락에 출력하세요.</li> <li>다른 숫자에 대해서는, 단지 단락에 그 숫자를 출력하세요.</li> </ul> </li> - <li>반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 당신은 <code>i++</code>를 원하지 <strong>않을</strong> 것입니다 — 어떻게 아래로 반복하실 건가요?</li> + <li>반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 여러분은 <code>i++</code>를 원하지 <strong>않을</strong> 것입니다 — 어떻게 아래로 반복하실 건가요?</li> </ul> <div class="note"> -<p><strong>Note</strong>: 만약 당신이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.</p> +<p><strong>참고</strong>: 만약 여러분이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.</p> </div> <p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p> @@ -710,14 +710,14 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Active_learning_Filling_in_a_guest_list">활동 학습: 손님 목록 작성</h2> +<h2 id="Active_learning_Filling_in_a_guest_list">직접 해보기: 손님 목록 작성</h2> -<p>이 연습에서, 우리는 당신이 배열에 저장된 이름 목록을 취하고 그것을 손님 명단에 넣기를 원합니다. 하지만 이것은 쉽지 않습니다 — Phil과 Lola는 탐욕스럽고 무례하고, 항상 모든 음식을 먹기 때문에 우리는 Phil과 Lola를 목록에 넣고 싶지 않습니다. 우리는 두 목록을 가지고 있는데, 하나는 승인할 손님들을 위한 것이고 하나는 거절할 손님들을 위한 것입니다.</p> +<p>이 연습에서, 우리는 여러분이 배열에 저장된 이름 목록을 취하고 그것을 손님 명단에 넣기를 원합니다. 하지만 이것은 쉽지 않습니다 — Phil과 Lola는 탐욕스럽고 무례하고, 항상 모든 음식을 먹기 때문에 우리는 Phil과 Lola를 목록에 넣고 싶지 않습니다. 우리는 두 목록을 가지고 있는데, 하나는 승인할 손님들을 위한 것이고 하나는 거절할 손님들을 위한 것입니다.</p> -<p>구체적으로, 우리는 당신이 다음을 하기를 원합니다:</p> +<p>구체적으로, 우리는 여러분이 다음을 하기를 원합니다:</p> <ul> - <li>0부터 <code>people</code> 배열의 길이까지 반복하는 반복문을 작성하세요. 당신은 초기화식 <code>let i = 0;</code>에서부터 시작할 필요가 있을 것이지만, 당신은 무슨 조건을 필요로 하나요?</li> + <li>0부터 <code>people</code> 배열의 길이까지 반복하는 반복문을 작성하세요. 여러분은 초기화식 <code>let i = 0;</code>에서부터 시작할 필요가 있을 것이지만, 여러분은 무슨 조건을 필요로 하나요?</li> <li>각 반복문 반복 동안에, 조건문을 사용하여 현재 배열 원소가 "Phil" 또는 "Lola"와 동일한지 검사하세요: <ul> <li>만약 그렇다면, 배열 원소를 <code>refused</code> 단락의 <code>textContent</code>의 끝에 콤마와 공백을 붙여 연결하세요.</li> @@ -726,7 +726,7 @@ textarea.onkeyup = function(){ </li> </ul> -<p>우리는 이미 당신에게 다음을 제공합니다:</p> +<p>우리는 이미 여러분에게 다음을 제공했습니다:</p> <ul> <li><code>let i = 0;</code> — 초기화식.</li> @@ -734,7 +734,7 @@ textarea.onkeyup = function(){ <li><code>admitted.textContent +=</code> — 무언가를 <code>admitted.textContent</code>의 끝에 연결할 줄의 시작.</li> </ul> -<p>추가 보너스 질문 — 위의 일을 성공적으로 완료한 이후에, 당신은 콤마로 나눠진 두 이름 목록을 가지고 있을 것이지만, 그것들은 단정치 못합니다 — 각 목록의 끝에 콤마가 있을 것입니다. 각 경우에 어떻게 마지막 콤마를 잘라낸 줄을 작성하고, 끝에 마침표를 추가할 지 알아내실 수 있으신가요? 도움을 위해 <a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a> 문서를 한 번 봐 보세요.</p> +<p>추가 보너스 질문 — 위의 일을 성공적으로 완료한 이후에, 여러분은 콤마로 나눠진 두 이름 목록을 가지고 있을 것이지만, 그것들은 단정치 못합니다 — 각 목록의 끝에 콤마가 있을 것입니다. 각 경우에 어떻게 마지막 콤마를 잘라낸 줄을 작성하고, 끝에 마침표를 추가할 지 알아내실 수 있으신가요? 도움을 위해 <a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a> 문서를 한 번 봐 보세요.</p> <p>만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.</p> @@ -888,7 +888,7 @@ textarea.onkeyup = function(){ <h2 id="Which_loop_type_should_you_use">어떤 반복문을 써야 할까?</h2> -<p>기본적 사용에 대해, <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> 반복문들은 대체로 교체할 수 있습니다. 이것들은 같은 문제를 풀기 위해 모두 쓰여질 수 있고, 어떤 것을 사용할지는 주로 당신의 개인적인 선호에 달려 있습니다 — 어떤 것이 가장 기억하기 쉽거나 직관적이라고 생각하시나요. 이것들을 다시 살펴봅시다.</p> +<p>기본적 사용에 대해, <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> 반복문들은 대체로 교체할 수 있습니다. 이것들은 같은 문제를 풀기 위해 모두 쓰여질 수 있고, 어떤 것을 사용할지는 주로 여러분의 개인적인 선호에 달려 있습니다 — 어떤 것이 가장 기억하기 쉽거나 직관적이라고 생각하시나요. 이것들을 다시 살펴봅시다.</p> <p>첫째로 <code>for</code>:</p> @@ -914,27 +914,27 @@ do { 증감식 } while (종료 조건)</pre> -<p>우리는, 적어도 시작하는 데, <code>for</code>를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 당신이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.</p> +<p>우리는, 적어도 시작하는 데, <code>for</code>를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 여러분이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.</p> <div class="note"> -<p><strong>Note</strong>: 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 가이드</a>를 읽어 보세요.</p> +<p><strong>참고</strong>: 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 가이드</a>를 읽어 보세요.</p> </div> -<h2 id="Test_your_skills!">당신의 실력을 평가해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> <p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">실력을 평가해 보세요: 반복문</a>.</p> -<h2 id="결론">결론</h2> +<h2 id="conclusion">결론</h2> -<p>이 문서는 당신에게 JavaScript에서의 반복문에 대한 기본 개념과 이용 가능한 다른 옵션들을 드러내 보였습니다. 당신은 이제 왜 반복문이 반복적인 코드를 다루는 데 좋은 메커니즘인지 확실히 이해하고, 당신만의 예제에서 그것들을 사용하고 싶어서 몸이 근질거려야만 합니다!</p> +<p>이 문서는 여러분에게 JavaScript에서의 반복문에 대한 기본 개념과 이용 가능한 다른 옵션들을 드러내 보였습니다. 여러분은 이제 왜 반복문이 반복적인 코드를 다루는 데 좋은 메커니즘인지 확실히 이해하고, 여러분만의 예제에서 그것들을 사용하고 싶어서 몸이 근질거리실 것입니다!</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/en-US/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복문과 반복 자세히 알아보기</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for 문 레퍼런스</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for 문 참고서</a></li> <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/while">while</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> 레퍼런스</li> <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/break">break</a> 과 <a href="/ko/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 레퍼런스</li> <li> @@ -944,13 +944,13 @@ do { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> + <li><strong>반복문</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/return_values/index.html b/files/ko/learn/javascript/building_blocks/return_values/index.html index b0896610c5..25bc6c7dbb 100644 --- a/files/ko/learn/javascript/building_blocks/return_values/index.html +++ b/files/ko/learn/javascript/building_blocks/return_values/index.html @@ -24,7 +24,7 @@ tags: <tr> <th scope="row">필요한 사전 지식:</th> <td> - 기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>. + 기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>. </td> </tr> <tr> @@ -103,7 +103,7 @@ console.log(newString); // Should print "The weather is warm" <p>함수 호출들이 먼저 실행되고, 줄 자체가 그리고서 실행되기 전에 함수의 반환 값이 함수 호출을 대신합니다.</p> -<h2 id="Active_learning_our_own_return_value_function">Active learning: 우리만의 반환 값 함수</h2> +<h2 id="Active_learning_our_own_return_value_function">직접 해보기: 우리만의 반환 값 함수</h2> <p>반환 값을 포함하는 우리만의 함수를 작성해 봅시다.</p> @@ -151,7 +151,7 @@ function factorial(num) { </ol> <div class="note"> -<p><strong>Note</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> +<p><strong>참고</strong>: 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub에 있는 완성된 버전</a>과 비교해 보거나 (<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">실제로 작동하는 모습</a>도 보세요), 우리에게 도움을 요청해 보세요.</p> </div> <h2 id="Now_its_your_turn!">이제 여러분의 차례입니다!</h2> @@ -173,9 +173,9 @@ function factorial(num) { <p>이제 끝났습니다 — 함수는 즐겁고, 아주 유용하고, 그리고 비록 함수의 문법과 기능성에 대해 이야기할 것들이 많지만, 그것들은 꽤 이해하기 쉽습니다.</p> -<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/ko/docs/Learn#contact_us">contact us</a>에서 도움을 요청해 보세요.</p> +<p>만약 뭐든지 이해하지 못한 게 있다면, 자유롭게 이 문서를 다시 읽거나, <a href="/ko/docs/Learn#contact_us">문의하기</a>에서 도움을 요청해 보세요.</p> -<h2 id="See_also">더 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 고급</a> — 더욱 고급의 함수에 관련된 정보를 다루는 자세한 가이드</li> @@ -184,13 +184,13 @@ function factorial(num) { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">이 모듈에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li> - <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> <li><strong>함수 반환 값</strong></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html index 064f234689..b1a6851605 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.html @@ -9,30 +9,30 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 평가의 목적은 당신이 <a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a> 문서를 잘 이해했는지 가늠하기 위함입니다.</p>. +<p>이 실력 평가의 목적은 여러분이 <a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a> 문서를 잘 이해했는지 평가하기 위함입니다.</p>. <div class="notecard note"> -<p><strong>Note</strong>: 당신은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a><br> +<p><strong>참고</strong>: 여러분은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a><br> <br> 정말로 막히면, 도움을 요청해 보세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 확인해 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제들에서, 만약 당신의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제들에서, 만약 여러분의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="Conditionals_1">조건문 1</h2> -<p>이 과제에서는 당신에게 두 변수가 주어집니다:</p> +<p>이 과제에서는 여러분에게 두 변수가 주어집니다:</p> <ul> <li><code>season</code> — 현재 계절이 무엇인지를 말하는 문자열을 포함합니다.</li> <li><code>response</code> — 초기화되지 않은 상태지만, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다.</li> </ul> -<p>우리는 당신이 <code>season</code>이 문자열 "summer"를 포함하는지를 확인하는 조건문을 작성하고, 만약 그렇다면 <code>response</code>에 계절에 대한 알맞은 메시지를 유저에게 주는 문자열을 할당하기를 원합니다. 만약 아니라면, <code>response</code>에 유저에게 우리는 무슨 계절인지 모른다고 말하는 일반적인 문자열을 할당해야만 합니다.</p> +<p>우리는 여러분이 <code>season</code>이 문자열 "summer"를 포함하는지를 확인하는 조건문을 작성하고, 만약 그렇다면 <code>response</code>에 계절에 대한 알맞은 메시지를 유저에게 주는 문자열을 할당하기를 원합니다. 만약 아니라면, <code>response</code>에 유저에게 우리는 무슨 계절인지 모른다고 말하는 일반적인 문자열을 할당해야만 합니다.</p> -<p>마치기 위해서, 당신은 그리고서 <code>season</code>가 문자열 "winter"를 포함하는지를 확인하는 다른 테스트를 추가하고, 다시 <code>response</code>에 적절한 문자열을 할당해야만 합니다.</p> +<p>마치기 위해서, 여러분은 그리고서 <code>season</code>가 문자열 "winter"를 포함하는지를 확인하는 다른 테스트를 추가하고, 다시 <code>response</code>에 적절한 문자열을 할당해야만 합니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -44,17 +44,17 @@ tags: <h2 id="Conditionals_2">조건문 2</h2> -<p>이 과제에 대해서 당신에게는 3개의 변수가 주어집니다:</p> +<p>이 과제에 대해서 여러분에게는 3개의 변수가 주어집니다:</p> <ul> <li><code>machineActive</code> — 대답 기계가 켜졌는지 꺼졌는지에 대한 지표를 포함합니다 (<code>true</code>/<code>false</code>)</li> - <li><code>score</code> — 가상 게임에서의 당신의 점수를 포함합니다. 이 점수는 대답 기계에 넣어지는데, 이는 당신이 얼마나 잘 했는지를 나타내는 대답을 제공합니다.</li> + <li><code>score</code> — 가상 게임에서의 여러분의 점수를 포함합니다. 이 점수는 대답 기계에 넣어지는데, 이는 여러분이 얼마나 잘 했는지를 나타내는 대답을 제공합니다.</li> <li><code>response</code> — 초기화되지 않은 상태지만, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다./li> </ul> -<p>당신은 기계가 켜졌는지 확인하고 <code>response</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들 필요가 있습니다. 만약 기계가 켜지지 않았다면, 유저에게 기계를 작동시키라고 말하세요.</p> +<p>여러분은 기계가 켜졌는지 확인하고 <code>response</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들 필요가 있습니다. 만약 기계가 켜지지 않았다면, 유저에게 기계를 작동시키라고 말하세요.</p> -<p>만약 기계가 켜져 있다면 — 첫번째 (<code>if...else</code>문) 내부에, 당신은 점수 값이 무엇인지에 따라 <code>response</code>에 적절한 메시지를 넣는 <code>if...else if...else</code>를 중첩할 필요가 있습니다. 다른 조건 테스트 (그리고 결과 대답)은 다음과 같습니다:</p> +<p>만약 기계가 켜져 있다면 — 첫번째 (<code>if...else</code>문) 내부에, 여러분은 점수 값이 무엇인지에 따라 <code>response</code>에 적절한 메시지를 넣는 <code>if...else if...else</code>를 중첩할 필요가 있습니다. 다른 조건 테스트 (그리고 결과 대답)은 다음과 같습니다:</p> <ul> <li>0보다 작거나 100보다 큰 점수 — "이것은 가능하지 않습니다, 오류가 발생했습니다."</li> @@ -75,7 +75,7 @@ tags: <h2 id="Conditionals_3">조건문 3</h2> -<p>이 과제에서 당신은 두번째 과제에서 작성했던 코드를 가져와서, 안쪽의 <code>if...else if...else</code>를 <code>switch</code> 문으로 대신 재작성할 필요가 있습니다.</p> +<p>이 과제에서 여러분은 두번째 과제에서 작성했던 코드를 가져와서, 안쪽의 <code>if...else if...else</code>를 <code>switch</code> 문으로 대신 재작성할 필요가 있습니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -87,7 +87,7 @@ tags: <h2 id="Conditionals_4">조건문 4</h2> -<p>마지막 과제에 대해서 당신에게는 4개의 변수가 주어집니다:</p> +<p>마지막 과제에 대해서 여러분에게는 4개의 변수가 주어집니다:</p> <ul> <li><code>machineActive</code> — 로그인 기계가 켜졌는지 꺼졌는지에 대한 지표를 포함합니다 (<code>true</code>/<code>false</code>).</li> @@ -96,9 +96,9 @@ tags: <li><code>pwdResult</code> — 초기화되지 않은 상태지만, 유저에게 로그인 시도가 성공적이였는지를 알게 하는, 나중에 결과 패널에 출력될 대답을 저장하기 위해 쓰입니다.</li> </ul> -<p>우리는 당신이 기계가 켜졌는지를 확인하고, 유저에게 기계가 켜졌는지 꺼졌는지를 말하는 <code>machineResult</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들기를 원합니다.</p> +<p>우리는 여러분이 기계가 켜졌는지를 확인하고, 유저에게 기계가 켜졌는지 꺼졌는지를 말하는 <code>machineResult</code> 변수에 메시지를 넣는 <code>if...else</code> 구조를 만들기를 원합니다.</p> -<p>만약 기계가 켜져 있으면, 우리는 또한 <code>pwd</code>이 <code>cheese</code>와 동일한지 확인하는 두번째 조건문을 원합니다. 만약 그렇다면, 그것은 <code>pwdResult</code>에 유저에게 성공적으로 로그인되었다고 말하는 문자열을 할당해야만 합니다. 만약 그렇지 않다면, <code>pwdResult</code>에 유저에게 로그인 시도가 성공적이지 않았다고 말하는 다른 문자열을 할당해야만 합니다. <code>if ... else</code> 구조가 아닌 무언가를 사용해서, 우리는 당신이 이것을 한 줄에서 하기를 원합니다.</p> +<p>만약 기계가 켜져 있으면, 우리는 또한 <code>pwd</code>이 <code>cheese</code>와 동일한지 확인하는 두번째 조건문을 원합니다. 만약 그렇다면, 그것은 <code>pwdResult</code>에 유저에게 성공적으로 로그인되었다고 말하는 문자열을 할당해야만 합니다. 만약 그렇지 않다면, <code>pwdResult</code>에 유저에게 로그인 시도가 성공적이지 않았다고 말하는 다른 문자열을 할당해야만 합니다. <code>if ... else</code> 구조가 아닌 무언가를 사용해서, 우리는 여러분이 이것을 한 줄에서 하기를 원합니다.</p> <p>완성된 예제를 만들기 위해 아래의 라이브 코드를 업데이트해 보세요:</p> @@ -110,18 +110,18 @@ tags: <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 실습할 수 있습니다.</p> +<p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 실습할 수 있습니다.</p> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"조건문 1 실력 평가에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html index ddf78af1cf..96ab0e6119 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.html @@ -10,27 +10,27 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 당신이 우리의 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a> 문서를 이해했는지 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a> 문서를 이해했는지 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> +<p><strong>참고</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> -<p>아래의 몇몇 문제들은 당신에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> +<p>아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> -<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 당신은 이것을 사용하는 몇몇 예제를 보았고, 우리는 당신이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> +<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> <h2 id="Events_1">이벤트 1</h2> -<p>우리의 첫 번째 이벤트에 관계된 과제에서, 당신은 버튼 (<code>btn</code>) 내부의 텍스트가 버튼이 클릭되었을 때 바뀌고, 다시 클릭되었을 때 원상복귀되게 하는 간단한 이벤트 핸들러를 생성할 필요가 있습니다.</p> +<p>우리의 첫 번째 이벤트에 관계된 과제에서, 여러분은 버튼 (<code>btn</code>) 내부의 텍스트가 버튼이 클릭되었을 때 바뀌고, 다시 클릭되었을 때 원상복귀되게 하는 간단한 이벤트 핸들러를 생성할 필요가 있습니다.</p> <p>HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니다.</p> @@ -39,12 +39,12 @@ tags: <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events1.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Events_2">이벤트 2</h2> -<p>이제 우리는 키보드 이벤트를 살펴볼 것입니다. 이 평가를 통과하기 위해서 당신은 WASD 키가 키보드에서 눌렸을 때 원을 제공된 캔버스 주위에서 움직이는 이벤트 핸들러를 만들 필요가 있습니다. 원은 <code>drawCircle()</code> 함수로 그려지는데, 이는 다음의 입력을 매개변수로 취합니다.</p> +<p>이제 우리는 키보드 이벤트를 살펴볼 것입니다. 이 평가를 통과하기 위해서 여러분은 WASD 키가 키보드에서 눌렸을 때 원을 제공된 캔버스 주위에서 움직이는 이벤트 핸들러를 만들 필요가 있습니다. 원은 <code>drawCircle()</code> 함수로 그려지는데, 이는 다음의 입력을 매개변수로 취합니다.</p> <ul> <li><code>x</code> — 원의 x 좌표.</li> @@ -57,37 +57,37 @@ tags: <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events2.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Events_3">이벤트 3</h2> -<p>우리의 마지막 이벤트에 관련된 과제에서, 당신은 <code><button></code>들의 부모 요소 (<code><div class="button-bar"> ... </div></code>)에 이벤트 핸들러를 설정할 필요가 있는데, 이는 버튼을 클릭해서 호출했을 때 <code>button-bar</code>의 배경색을 버튼의 <code>data-color</code> 어트리뷰트 안에 포함된 색으로 설정합니다.</p> +<p>우리의 마지막 이벤트에 관련된 과제에서, 여러분은 <code><button></code>들의 부모 요소 (<code><div class="button-bar"> ... </div></code>)에 이벤트 핸들러를 설정할 필요가 있는데, 이는 버튼을 클릭해서 호출했을 때 <code>button-bar</code>의 배경색을 버튼의 <code>data-color</code> 어트리뷰트 안에 포함된 색으로 설정합니다.</p> -<p>우리는 당신이 모든 버튼을 순회하고 각 버튼에 이벤트 리스너를 주지 않고 이것을 해결하기를 원합니다.</p> +<p>우리는 여러분이 모든 버튼을 순회하고 각 버튼에 이벤트 리스너를 주지 않고 이것을 해결하기를 원합니다.</p> <p>완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:</p> <p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events3.html", '100%', 400)}}</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> +<p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"이벤트 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 5436a09449..daf3a1316f 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -10,16 +10,16 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a>, 그리고 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a> 문서를 이해했는지 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a>, 그리고 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a> 문서를 이해했는지 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> +<p><strong>참고</strong>: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <div class="notecard note"> -<p><strong>Note</strong>: 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> +<p><strong>참고</strong>: 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> @@ -84,7 +84,7 @@ tags: <p>여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.</p> -<p>만약 작업을 평가받고 싶거나 막혀서 도움을 요청하기를 원한다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html index 4867a45ddf..5e06f03304 100644 --- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html +++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.html @@ -9,31 +9,31 @@ tags: --- <div>{{learnsidebar}}</div> -<p>이 실력 테스트의 목적은 당신이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a> 문서를 이해했는지를 평가하기 위함입니다.</p> +<p>이 실력 테스트의 목적은 여러분이 우리의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a> 문서를 이해했는지를 평가하기 위함입니다.</p> <div class="notecard note"> -<p><strong>Note</strong>: 당신은 코드를 다운로드하고, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!<br> +<p><strong>참고</strong>: 여러분은 코드를 다운로드하고, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!<br> <br> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p> </div> <h2 id="DOM_manipulation_considered_useful">DOM 조작: 유용하다고 생각됨</h2> -<p>아래의 몇몇 문제들은 당신에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> +<p>아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 <a href="/ko/docs/Glossary/DOM">DOM</a> 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.</p> -<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 당신은 이것을 사용하는 몇몇 예제를 보았고, 우리는 당신이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> +<p>우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">문서 조작하기</a>(Manipulating documents) 튜토리얼입니다.</p> <h2 id="Loops_1">반복문 1</h2> -<p>우리의 첫 반복문 과제에서 우리는 당신이 제공된 <code>myArray</code> 내의 모든 요소를 순회하고, 제공된 <code>list</code>에 추가될 리스트 아이템 (예: <code><a href="/ko/docs/Web/HTML/Element/li"><li></a></code> 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.</p> +<p>우리의 첫 반복문 과제에서 우리는 여러분이 제공된 <code>myArray</code> 내의 모든 요소를 순회하고, 제공된 <code>list</code>에 추가될 리스트 아이템 (예: <code><a href="/ko/docs/Web/HTML/Element/li"><li></a></code> 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Loops_2">반복문 2</h2> -<p>이 다음 과제에서, 우리는 당신이, 이름이 주어지면 이름과 전화번호 (<code>phonebook</code>)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (<code>para</code>)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.</p> +<p>이 다음 과제에서, 우리는 여러분이, 이름이 주어지면 이름과 전화번호 (<code>phonebook</code>)를 포함하고 있는 객체 배열을 탐색하고, 만약 그 이름을 찾으면, 이름과 전화번호를 단락 (<code>para</code>)에 출력하고 그리고서 반복문이 다 실행되기 전에 반복문을 빠져나오는 간단한 프로그램을 작성하기를 원합니다.</p> <p>3개의 변수가 주어집니다:</p> @@ -43,10 +43,10 @@ tags: <li><code>para</code> — 단락에 대한 참조를 포함하고 있는데, 결과를 보이기 위해 사용될 것입니다.</li> </ul> -<p>당신은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> +<p>여러분은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> <div class="notecard note"> -<p><p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p></p> +<p><p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html">이 과제의 시작점을 다운로드</a>하세요.</p></p> </div> <h2 id="Loops_3">반복문 3</h2> @@ -59,28 +59,26 @@ tags: <li><code>isPrime()</code> — 숫자가 전달되었을 때, 만약 숫자가 소수(prime number)면, <code>true</code>를 반환하고, 아니면 <code>false</code>를 반환하는 함수.</li> </ul> -<p>당신은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 <code>isPrime()</code> 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 <code>textContent</code>에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.</p> +<p>여러분은 숫자 2에서 500까지 뒤로 가는 반복문을 사용하고 (1은 소수에 포함되지 않습니다), 제공된 <code>isPrime()</code> 함수를 그 숫자들에서 실행할 필요가 있습니다. 소수가 아닌 각 숫자에 대해서는, 다음 반복으로 계속하세요. 소수인 각 숫자에 대해서는, 그것을 단락의 <code>textContent</code>에 몇몇 종류의 분리자(separator)에 덧붙여 추가하세요.</p> -<p>당신은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> +<p>여러분은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.</p> <div class="notecard note"> -<p>당신의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> +<p>여러분의 에디터나 온라인 에디터에서 작업하기 위해서 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html">이 과제의 시작점을 다운로드</a>하세요.</p> </div> <h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2> -<p>당신은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다. (역자 주: 이 문서 상단의 노트에 나와있듯이 무한 루프의 위험 때문에 다른 평가들처럼 인터랙티브 에디터가 제공되지 않았다고 안내되었기 때문에, 이 문장은 잘못 들어가 있는 듯 합니다.)</p> - -<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> +<p>만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p> <ol> - <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다: + <li>여러분의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a>와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다: <ul> <li>"반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.</li> - <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li> - <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> - <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> + <li>여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.</li> + <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li> + <li>우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li> </ul> </li> </ol> diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html index 4220f9bafc..a31c5ed163 100644 --- a/files/ko/learn/javascript/objects/basics/index.html +++ b/files/ko/learn/javascript/objects/basics/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Objects/Basics </tbody> </table> -<h2 id="객체_기본">객체 기본</h2> +<h2 id="Object_basics">객체 기본</h2> <p>객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.</p> @@ -46,13 +46,16 @@ translation_of: Learn/JavaScript/Objects/Basics <pre class="brush: js">var person = {};</pre> -<p>이제 JS 콘솔에 <code>person</code> 을 입력하면 다음과 같은 결과를 보게됩니다.</p> +<p>이제 브라우저의 <a href="/ko/docs/Learn/Common_questions/What_are_browser_developer_tools#the_javascript_console">JavaScript 콘솔</a> 을 열고 <code>person</code>을 입력 한 다음 <kbd>Enter</kbd>/<kbd>Return</kbd>을 누르세요. 아래 줄 중 하나와 유사한 결과가 표시됩니다.</p> -<pre class="brush: js">[object Object]</pre> +<pre class="brush: js">[object Object] +Object { } +{ } +</pre> -<p>축하합니다, 여러분은 벌써 첫 번째 객체를 생성하였습니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없습니다. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다.</p> +<p>축하합니다. 방금 첫번째 객체를 만들었습니다. 잘했어요! 그러나 이것은 빈 객체이므로 실제로 많은 것들을 할 수 없습니다. 파일에서 JavaScript 객체를 다음과 같이 업데이트 해보겠습니다.</p> -<pre class="brush: js">var person = { +<pre class="brush: js">const person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', @@ -66,7 +69,7 @@ translation_of: Learn/JavaScript/Objects/Basics }; </pre> -<p>저장 후 리로드 한 다음에 아래의 내용을 브라우저 개발자 도구의 JavaScript 콘솔에 입력해보세요.</p> +<p>저장하고 새로 고침 한 후 브라우저 devtools의 JavaScript 콘솔에 다음 중 일부를 입력 해보세요.</p> <pre class="brush: js">person.name person.name[0] @@ -75,7 +78,7 @@ person.interests[1] person.bio() person.greeting()</pre> -<p>자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었으며, 이것들을 간단하고 멋진 문법을 통해 사용할 수 있게되었습니다!</p> +<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!</p> <div class="note"> <p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p> @@ -95,7 +98,7 @@ person.greeting()</pre> <p>객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때 많이 쓰이는 방법입니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.</p> -<h2 id="점_표기법">점 표기법</h2> +<h2 id="Dot_notation">점 표기법</h2> <p>위에서, 우리는 객체의 프로퍼티와 메소드를 <strong>점 표기법</strong>을 통해 접근했습니다. 객체 이름(person)은 <strong>네임스페이스</strong>처럼 동작합니다. 객체내에 <strong>캡슐화되어있는</strong>것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.</p> @@ -103,7 +106,7 @@ person.greeting()</pre> person.interests[1] person.bio()</pre> -<h3 id="하위_namespaces">하위 namespaces</h3> +<h3 id="Sub-namespaces">하위 namespaces</h3> <p>다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다. 예를 들면, 다음과 같은 name 멤버를 </p> @@ -133,7 +136,7 @@ name.last</pre> <p>그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.</p> -<h2 id="괄호_표기법">괄호 표기법</h2> +<h2 id="Bracket_notation">괄호 표기법</h2> <p>객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신</p> @@ -145,9 +148,9 @@ person.name.first</pre> <pre class="brush: js">person['age'] person['name']['first']</pre> -<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 스트링을 값에 매핑합니다.</p> +<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.</p> -<h2 id="객체_멤버_설정하기">객체 멤버 설정하기</h2> +<h2 id="Setting_object_members">객체 멤버 설정하기</h2> <p>지금까지는 객체 멤버를 단순히 가져오기만(또는 <strong>반환</strong>) 했습니다. 설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 <strong>설정</strong>(갱신)하는 것도 물론 가능합니다.</p> @@ -190,7 +193,7 @@ person[myDataName] = myDataValue;</pre> <p>점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.</p> -<h2 id="this_는_무엇인가">"this" 는 무엇인가?</h2> +<h2 id="What_is_this">"this" 는 무엇인가?</h2> <p>자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다. 예제를 한번 봐주세요</p> @@ -210,30 +213,30 @@ person[myDataName] = myDataValue;</pre> } var person2 = { - name: 'Brian', + name: 'Deepti', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); } }</pre> -<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Brian." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p> +<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Deepti." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p> -<h2 id="객체를_줄곧_사용해_왔습니다">객체를 줄곧 사용해 왔습니다</h2> +<h2 id="Youve_been_using_objects_all_along">객체를 줄곧 사용해 왔습니다</h2> <p>예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤 자연스럽게 느껴질 것입니다. 물론 이 코스 내내 사용했기 때문입니다! 샘플에서 사용하였던 브라우저 내장 API 나 JavaScript 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 합니다.</p> -<p>자, 다음과 같이 String의 메소드를 사용했다고 가정합시다.</p> +<p>자, 다음과 같이 문자열의 메소드를 사용했다고 가정합시다.</p> <pre class="brush: js">myString.split(',');</pre> -<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String 을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p> +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 문자열을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p> <p>아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,</p> <pre class="brush: js">var myDiv = document.createElement('div'); var myVideo = document.querySelector('video');</pre> -<p><code><a href="https://developer.mozilla.org/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을 제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p> +<p><code><a href="/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을 제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p> <p>우리가 계속 사용해왔던 다른 내장 객체/API(<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 등등)들도 마찬가지입니다</p> @@ -247,7 +250,12 @@ var myVideo = document.querySelector('video');</pre> <p><strong>Note</strong>: 객체간 통신은 <strong>message passing</strong> 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.</p> </div> -<h2 id="요약">요약</h2> +<h2 id="Test_your_skills!">실력을 시험해보세요!</h2> + +<p>본문의 끝에 도달했지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기전에 정보들을 잘 기억하고 있는지 확인하기 위한 몇 가지 추가 테스트를 찾을 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">기술 테스트 : 객체의 기본 사항</a>을 참조하세요.</p> + + +<h2 id="Summary">요약</h2> <p>축하합니다, 첫 번째 JavaScript 객체 설명 문서를 끝까지 읽으셨습니다. 이제 여러분은 JavaScript 객체를 어떻게 활용하는지 이해하게 되었습니다. 간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다. 만약 <code>person</code> 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될 것입니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 것입니다. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.</p> @@ -255,14 +263,14 @@ var myVideo = document.querySelector('video');</pre> <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> -<h2 id="이_모듈_에서는">이 모듈 에서는</h2> +<h2 id="In_this_module">이 모듈 에서는</h2> <ul> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li> </ul> diff --git a/files/ko/web/api/analysernode/analysernode/index.html b/files/ko/web/api/analysernode/analysernode/index.html new file mode 100644 index 0000000000..dbec1b677e --- /dev/null +++ b/files/ko/web/api/analysernode/analysernode/index.html @@ -0,0 +1,59 @@ +--- +title: AnalyserNode() +slug: Web/API/AnalyserNode/AnalyserNode +tags: + - API + - AnalyserNode + - Audio + - Constructor + - Media + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.AnalyserNode +--- +<p>{{APIRef("'Web Audio API'")}}</p> + +<p class="summary"><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <strong><code>AnalyserNode()</code></strong> 생성자는 새로운 {{domxref("AnalyserNode")}} 객체 인스턴스를 생성합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <var>analyserNode</var> = new AnalyserNode(<var>context</var>, ?<var>options</var>);</pre> + +<h3 id="Parameters">매개변수</h3> + +<p><em>{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다.</em></p> + +<dl> + <dt><em>context</em></dt> + <dd>{{domxref("AudioContext")}} 또는 {{domxref("OfflineAudioContext")}}에의 참조.</dd> + <dt><em>options</em> {{optional_inline}}</dt> + <dd> + <ul> + <li><strong><code>fftSize</code></strong>: <a href="https://en.wikipedia.org/wiki/Frequency_domain">주파수 영역</a> 분석에 대한 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">FFT</a>의 원하는 초기 사이즈. <br> + 기본값은 <code>2048</code>입니다.</li> + <li><strong><code>maxDecibels</code></strong>: FFT 분석에 대한 <a href="https://en.wikipedia.org/wiki/Decibel">dB</a>단위로의 원하는 초기 최대 power.<br> + 기본값은 <code>-30</code>입니다.</li> + <li><strong><code>minDecibels</code></strong>: FFT 분석에 대한 dB단위로의 원하는 초기 최소 power.<br> + 기본값은 <code>-100</code>입니다.</li> + <li><strong><code>smoothingTimeConstant</code></strong>: FFT 분석에 대한 원하는 초기 smoothing 상수. 기본값은 <code>0.8</code>입니다.</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>새로운 {{domxref("AnalyserNode")}} 객체 인스턴스.</p> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li>{{domxref("BaseAudioContext.createAnalyser()")}}, 동등한 팩토리 메서드</li> +</ul> diff --git a/files/ko/web/api/analysernode/fftsize/index.html b/files/ko/web/api/analysernode/fftsize/index.html new file mode 100644 index 0000000000..6033ba3892 --- /dev/null +++ b/files/ko/web/api/analysernode/fftsize/index.html @@ -0,0 +1,96 @@ +--- +title: AnalyserNode.fftSize +slug: Web/API/AnalyserNode/fftSize +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - fftSize +browser-compat: api.AnalyserNode.fftSize +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>fftSize</code></strong> 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.fftSize; +<em>analyserNode</em>.fftSize = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.</p> + +<p>반드시 <math><semantics><msup><mn>2</mn><mn>5</mn></msup><annotation encoding="TeX">2^5</annotation></semantics></math>와 <math><semantics><msup><mn>2</mn><mn>15</mn></msup><annotation encoding="TeX">2^15</annotation></semantics></math> 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, <code>16384</code>, 그리고 <code>32768</code>. 기본값은 <code>2048</code>입니다.</p> + +<p class="note"><strong>참고</strong>: 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, <code>IndexSizeError</code>라는 이름의 {{domxref("DOMException")}}이 발생합니다.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount ; +var dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 현재 오디오 소스의 오실로스코프를 그립니다 + +function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/frequencybincount/index.html b/files/ko/web/api/analysernode/frequencybincount/index.html new file mode 100644 index 0000000000..cd23d8edda --- /dev/null +++ b/files/ko/web/api/analysernode/frequencybincount/index.html @@ -0,0 +1,82 @@ +--- +title: AnalyserNode.frequencyBinCount +slug: Web/API/AnalyserNode/frequencyBinCount +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - frequencyBinCount +browser-compat: api.AnalyserNode.frequencyBinCount +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>frequencyBinCount</code></strong> 읽기 전용 속성은 {{domxref("AnalyserNode.fftSize")}} 값의 절반인 unsigned 정수입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>arrayLength</em> = <em>analyserNode</em>.frequencyBinCount; +</pre> + +<h3 id="Value">값</h3> + +<p>{{domxref("AnalyserNode.getByteFrequencyData()")}}와 {{domxref("AnalyserNode.getFloatFrequencyData()")}}가 제공된 <code>TypedArray</code>내로 복사하는 값의 수와 동일한 unsigned 정수.</p> + +<p><a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">고속 푸리에 변환</a>이 정의된 방법에 관계된 기술적인 이유로, 이것은 언제나 {{domxref("AnalyserNode.fftSize")}} 값의 절반입니다. 그러므로, 이것은 다음 중 하나입니다: <code>16</code>, <code>32</code>, <code>64</code>, <code>128</code>, <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code>, 그리고 <code>16384</code>.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5 - 1; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/fttaudiodata_en.svg b/files/ko/web/api/analysernode/fttaudiodata_en.svg new file mode 100644 index 0000000000..b1c40a3868 --- /dev/null +++ b/files/ko/web/api/analysernode/fttaudiodata_en.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="692.929" height="206.323"><path fill="none" stroke="#010101" d="M25.556 31.667v59.458"/><path fill="#010101" d="M19.722 32.667l5.834-16.839 5.5 16.839zm210.915 51.914l16.839 5.834-16.839 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722 53.167h36.667s4.167-14.333 9-11c0 0 2.333.417 7.333 14 0 0 2.917 10.583 8 8.167 0 0 3.333-.417 6.667-14.167 0 0 3.333-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.333-2.666 6.167-13.5 0 0 3.167-12.667 9-7.667 0 0 2.292.562 5.667 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(252.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(23.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.556 90.667h205.081"/><path fill="none" stroke="#010101" d="M431.556 31.667v59.458"/><path fill="#010101" d="M425.722 32.667l5.834-16.839 5.5 16.839zm210.914 51.914l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722 53.167h36.666s4.167-14.333 9-11c0 0 2.334.417 7.334 14 0 0 2.916 10.583 8 8.167 0 0 3.334-.417 6.666-14.167 0 0 3.334-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.334-2.666 6.168-13.5 0 0 3.166-12.667 9-7.667 0 0 2.291.562 5.666 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(658.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(429.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.556 90.667h205.08"/><path fill="#010101" d="M401.636 47.489l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M273.555 53.576h128.081"/><path fill="#010101" d="M347.889 148.454l-5.834 16.84-5.5-16.84z"/><path fill="#719FD0" stroke="#010101" d="M299.222 35h86v96.5h-86z"/><text transform="translate(304.223 56.823)" font-family="'ArialMT'" font-size="11">AnalyserNode</text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M341.803 118v30.454"/><text transform="translate(331.889 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text><path fill="none" stroke="#2C2C76" stroke-miterlimit="10" d="M321.889 86.667h41l-8 29.333h-25.333z"/><g font-family="'ArialMT'" font-size="11"><text transform="translate(484.89 131.5)">unchanged output</text><text transform="translate(302.223 176.167)">frequency data</text></g></svg>
\ No newline at end of file diff --git a/files/ko/web/api/analysernode/getbytefrequencydata/index.html b/files/ko/web/api/analysernode/getbytefrequencydata/index.html new file mode 100644 index 0000000000..3d85f75ca5 --- /dev/null +++ b/files/ko/web/api/analysernode/getbytefrequencydata/index.html @@ -0,0 +1,102 @@ +--- +title: AnalyserNode.getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getByteFrequencyData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 주파수 데이터를 복사합니다.</p> + +<p>주파수 데이터는 0에서 255 스케일의 정수로 구성되어 있습니다.</p> + +<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p> + +<p>만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void <em>analyser</em>.getByteFrequencyData(dataArray); // getByteFrequencyData()로부터 반환된 데이터로 Uint8Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Parameters_2">매개변수</h2> + +<dl> + <dt>array</dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Uint8Array")}}.</dd> +</dl> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getbytetimedomaindata/index.html b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html new file mode 100644 index 0000000000..58c38f1288 --- /dev/null +++ b/files/ko/web/api/analysernode/getbytetimedomaindata/index.html @@ -0,0 +1,98 @@ +--- +title: AnalyserNode.getByteTimeDomainData() +slug: Web/API/AnalyserNode/getByteTimeDomainData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getByteTimeDomainData +--- +<p>{{ APIRef("Mountain View APIRef Project") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getByteTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p> + +<p>만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +const dataArray = new Uint8Array(analyser.fftSize); // Uint8Array는 fftSize와 같은 길이여야만 합니다 +analyser.getByteTimeDomainData(dataArray); // getByteTimeDomainData()로부터 반환된 데이터로 Uint8Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Uint8Array")}}.<br> + 만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p><strong><code>void</code></strong> | 없음</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 2048; +const bufferLength = analyser.fftSize; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 현재 오디오 소스의 오실로스코프를 그립니다 +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + const sliceWidth = WIDTH * 1.0 / bufferLength; + let x = 0; + + canvasCtx.beginPath(); + for(var i = 0; i < bufferLength; i++) { + const v = dataArray[i]/128.0; + const y = v * HEIGHT/2; + + if(i === 0) + canvasCtx.moveTo(x, y); + else + canvasCtx.lineTo(x, y); + + x += sliceWidth; + } + + canvasCtx.lineTo(WIDTH, HEIGHT/2); + canvasCtx.stroke(); +}; + +draw(); +</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getfloatfrequencydata/index.html b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html new file mode 100644 index 0000000000..ceef144941 --- /dev/null +++ b/files/ko/web/api/analysernode/getfloatfrequencydata/index.html @@ -0,0 +1,129 @@ +--- +title: AnalyserNode.getFloatFrequencyData() +slug: Web/API/AnalyserNode/getFloatFrequencyData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getFloatFrequencyData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>getFloatFrequencyData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</p> + +<p>배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, <code>48000</code> Hz 샘플 레이트에 대해서, 배열의 마지막 원소는 <code>24000</code> Hz에 대한 데시벨 값을 나타냅니다.</p> + +<p>만약 여러분이 더 높은 성능을 원하고 정밀성에 대해서는 상관하지 않는다면, {{domxref("AnalyserNode.getByteFrequencyData()")}}을 대신 사용할 수 있는데, 이는 {{domxref("Uint8Array")}}에서 동작합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.frequencyBinCount); // Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void <em>analyser</em>.getFloatFrequencyData(dataArray); // getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 +</pre> + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>주파수 영역 데이터가 복사될 {{domxref("Float32Array")}}. 소리가 없는 모든 샘플에 대해서, 값은 <code>-<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>입니다.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +// Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 +const myDataArray = new Float32Array(analyser.frequencyBinCount); +// getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 +analyser.getFloatFrequencyData(myDataArray); +</pre> + +<h3 id="Drawing_a_spectrum">스펙트럼 그리기</h3> + +<p>다음의 예제는 {{domxref("MediaElementAudioSourceNode")}}를 <code>AnalyserNode</code>에 연결하기 위한 {{domxref("AudioContext")}}의 기본 사용을 보여줍니다. 오디오가 재생되는 동안, 우리는 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}로 주파수 데이터를 반복적으로 수집하고 "winamp 막대그래프 스타일"을 {{htmlelement("canvas")}} 요소에 그립니다.</p> + +<p>더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요).</p> + +<pre class="brush: html, highlight:[15, 17, 18, 41]"><!doctype html> +<body> +<script> +const audioCtx = new AudioContext(); + +//오디오 소스를 생성합니다 +//여기서, 우리는 오디오 파일을 사용하나, 이것은 또한 예를 들자면 마이크 입력도 될 수 있습니다 +const audioEle = new Audio(); +audioEle.src = 'my-audio.mp3';//파일명을 여기 삽입하세요 +audioEle.autoplay = true; +audioEle.preload = 'auto'; +const audioSourceNode = audioCtx.createMediaElementSource(audioEle); + +//analyser 노드를 생성합니다 +const analyserNode = audioCtx.createAnalyser(); +analyserNode.fftSize = 256; +const bufferLength = analyserNode.frequencyBinCount; +const dataArray = new Float32Array(bufferLength); + +//오디오 노드 네트워크를 설정합니다 +audioSourceNode.connect(analyserNode); +analyserNode.connect(audioCtx.destination); + +//2D canvas를 생성합니다 +const canvas = document.createElement('canvas'); +canvas.style.position = 'absolute'; +canvas.style.top = 0; +canvas.style.left = 0; +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +document.body.appendChild(canvas); +const canvasCtx = canvas.getContext('2d'); +canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + +function draw() { + //다음 draw를 예정시킵니다 + requestAnimationFrame(draw); + + //스펙트럼 데이터를 얻습니다 + analyserNode.getFloatFrequencyData(dataArray); + + //검은색 배경을 그립니다 + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); + + //스펙트럼을 그립니다 + const barWidth = (canvas.width / bufferLength) * 2.5; + let posX = 0; + for (let i = 0; i < bufferLength; i++) { + const barHeight = (dataArray[i] + 140) * 2; + canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)'; + canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2); + posX += barWidth + 1; + } +}; + +draw(); +</script> +</body></pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/getfloattimedomaindata/index.html b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html new file mode 100644 index 0000000000..ef85673388 --- /dev/null +++ b/files/ko/web/api/analysernode/getfloattimedomaindata/index.html @@ -0,0 +1,104 @@ +--- +title: AnalyserNode.getFloatTimeDomainData() +slug: Web/API/AnalyserNode/getFloatTimeDomainData +tags: + - API + - AnalyserNode + - Method + - Reference + - Web Audio API +browser-compat: api.AnalyserNode.getFloatTimeDomainData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>getFloatTimeDomainData()</code></strong> 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.fftSize); // Float32Array는 fftSize와 같은 길이일 필요가 있습니다 +analyser.getFloatTimeDomainData(dataArray); // getFloatTimeDomainData()로부터 반환된 데이터로 Float32Array를 채웁니다 +</pre> + + +<h3 id="Parameters">매개변수</h3> + +<dl> + <dt><code>array</code></dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.<br> + 만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.</dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>없음.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> 데모를 확인하세요 (<a href="https://github.com/mdn/voice-change-o-matic-float-data">소스 코드</a>도 보세요). </p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 1024; +var bufferLength = analyser.fftSize; +console.log(bufferLength); +var dataArray = new Float32Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getFloatTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + var v = dataArray[i] * 200.0; + var y = HEIGHT/2 + v; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); +}; + +draw();</pre> + + +<h2 id="Parameters_2">매개변수</h2> + +<dl> + <dt>array</dt> + <dd>시간 영역 데이터가 복사될 {{domxref("Float32Array")}}.</dd> +</dl> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html index dcffff0050..9f02b456bb 100644 --- a/files/ko/web/api/analysernode/index.html +++ b/files/ko/web/api/analysernode/index.html @@ -3,35 +3,37 @@ title: AnalyserNode slug: Web/API/AnalyserNode tags: - API + - AnalyserNode + - Interface + - Reference - Web Audio API - - 오디오 -translation_of: Web/API/AnalyserNode +browser-compat: api.AnalyserNode --- <p>{{APIRef("Web Audio API")}}</p> -<p><strong><code>AnalyserNode</code></strong><strong> </strong>는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.</p> +<p><strong><code>AnalyserNode</code></strong> 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.</p> -<p><code>AnalyzerNode</code> 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.</p> +<p><code>AnalyserNode</code>는 정확히 하나의 입력과 하나의 출력을 가집니다. 이 노드는 출력이 연결되지 않았더라도 작동합니다.</p> -<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p> +<p><img alt="오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다." src="fttaudiodata_en.svg"></p> <table class="properties"> <tbody> <tr> - <th scope="row">Number of inputs</th> + <th scope="row">입력의 수</th> <td><code>1</code></td> </tr> <tr> - <th scope="row">Number of outputs</th> - <td><code>1</code> (but may be left unconnected)</td> + <th scope="row">출력의 수</th> + <td><code>1</code> (그러나 연결되지 않은 채로 남아있을지도 모릅니다)</td> </tr> <tr> <th scope="row">Channel count mode</th> - <td><code>"explicit"</code></td> + <td><code>"max"</code></td> </tr> <tr> <th scope="row">Channel count</th> - <td><code>1</code></td> + <td><code>2</code></td> </tr> <tr> <th scope="row">Channel interpretation</th> @@ -40,125 +42,129 @@ translation_of: Web/API/AnalyserNode </tbody> </table> -<div class="note"> -<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p> -</div> +<h2 id="Inheritance">상속</h2> + +<p>이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:</p> -<h2 id="Properties">Properties</h2> +<p>{{InheritanceDiagram}}</p> -<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p> +<h2 id="Constructor">생성자</h2> <dl> - <dt><span id="cke_bm_91S" class="hidden"> </span>{{domxref("AnalyserNode.fftSize")}}</dt> - <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd> - <dt> </dt> + <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt> + <dd><code>AnalyserNode</code> 객체의 새로운 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>부모인 {{domxref("AudioNode")}}로부터 속성을 상속받습니다</em>.</p> + +<dl> + <dt>{{domxref("AnalyserNode.fftSize")}}</dt> + <dd>주파수 영역을 결정하는 데 사용될 FFT(<a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">Fast Fourier Transform</a>)의 사이즈를 나타내는 unsigned long 값입니다.</dd> <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt> - <dd>부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.</dd> + <dd>FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</dd> <dt>{{domxref("AnalyserNode.minDecibels")}}</dt> - <dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd> + <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</dd> <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt> - <dd>double형 값으로 표현되는 FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd> + <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</dd> <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt> - <dd>double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을 변환하는데 사용된다.</dd> + <dd>마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.</dd> </dl> -<h2 id="Methods">Methods</h2> +<h2 id="Methods">메서드</h2> -<p><em>{{domxref("AudioNode")}} 을 상속하는 메서드.</em></p> +<p><em>부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다</em>.</p> <dl> <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt> - <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 로 복사해 전달한다.</span></dd> -</dl> - -<dl> + <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt> - <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> </span>{{domxref("Uint8Array")}} (unsigned byte array)<span style="line-height: 1.5;"> 로 복사해 전달한다.</span></dd> -</dl> - -<dl> + <dd>전달된 {{domxref("Uint8Array")}} (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt> - <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 배열에 전달한다.</span></dd> + <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt> - <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 {{domxref("Uint8Array")}} (unsigned byte array) 로 전달한다.</dd> + <dd>전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd> </dl> -<h2 id="Example">Example</h2> +<h2 id="Examples">예제</h2> -<p>이 예제는 {{domxref("AudioContext")}} 를 사용해 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">AnalyserNode를 생성하여 사용하는 방법을 보여주고, </span><span style="line-height: 1.5;"> {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및 </span><span style="line-height: 1.5;"> "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는 </span><span style="line-height: 1.5;"> </span><a href="http://mdn.github.io/voice-change-o-matic/" style="line-height: 1.5;">Voice-change-O-matic</a><span style="line-height: 1.5;"> demo (see </span><a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205" style="line-height: 1.5;">app.js lines 128–205</a><span style="line-height: 1.5;"> for relevant code)를 확인 하세요.</span></p> +<div class="note"> +<p><strong>참고</strong>: 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a> 가이드를 참고하세요.</p> +</div> + +<h3 id="Basic_usage">기본 사용</h3> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); + +// ... -<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); -// 새로운 <span style="font-family: courier new,andale mono,monospace;">AnalyserNode를 생성한다.</span> - ... +analyser.fftSize = 2048; + +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// 분석될 소스에 연결합니다 +source.connect(analyser); -analyser.fftSize = 2048; // FFT의 크기를 2048로 한다. -var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수 -var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성 -analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달 +// ID "oscilloscope"로 정의된 canvas를 얻습니다 +var canvas = document.getElementById("oscilloscope"); +var canvasCtx = canvas.getContext("2d"); -// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다. +// 현재 오디오 소스의 오실로스코프를 그립니다 function draw() { - drawVisual = requestAnimationFrame(draw); + requestAnimationFrame(draw); - analyser.getByteTimeDomainData(dataArray); + analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; - canvasCtx.beginPath(); + canvasCtx.beginPath(); - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; + var sliceWidth = canvas.width * 1.0 / bufferLength; + var x = 0; - for(var i = 0; i < bufferLength; i++) { + for (var i = 0; i < bufferLength; i++) { - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; + var v = dataArray[i] / 128.0; + var y = v * canvas.height / 2; - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } - x += sliceWidth; - } + x += sliceWidth; + } - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} - draw();</pre> +draw(); +</pre> -<h2 id="Specifications">Specifications</h2> +<h2 id="Specifications">명세</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> -<p>{{Compat("api.AnalyserNode")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> </ul> diff --git a/files/ko/web/api/analysernode/maxdecibels/index.html b/files/ko/web/api/analysernode/maxdecibels/index.html new file mode 100644 index 0000000000..5961655b25 --- /dev/null +++ b/files/ko/web/api/analysernode/maxdecibels/index.html @@ -0,0 +1,85 @@ +--- +title: AnalyserNode.maxDecibels +slug: Web/API/AnalyserNode/maxDecibels +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - maxDecibels +browser-compat: api.AnalyserNode.maxDecibels +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary">{{domxref("AnalyserNode")}} 인터페이스의 <strong><code>maxDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.maxDecibels; +<em>analyserNode</em>.maxDecibels = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT 분석 데이터를 스케일링하는 것에 대한 최대 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-30</code> dB입니다.</p> + +<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>maxDecibels</code> 또는 더 높은 진폭을 가진 모든 주파수는 <code>255</code>로 반환됩니다.</p> + +<p class="note"><strong>참고</strong>: 만약 <code>AnalyserNode.minDecibels</code>보다 더 작거나 같은 값이 설정된다면, <code>IndexSizeError</code> 예외가 발생합니다.</p> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/mindecibels/index.html b/files/ko/web/api/analysernode/mindecibels/index.html new file mode 100644 index 0000000000..95c51692e5 --- /dev/null +++ b/files/ko/web/api/analysernode/mindecibels/index.html @@ -0,0 +1,87 @@ +--- +title: AnalyserNode.minDecibels +slug: Web/API/AnalyserNode/minDecibels +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - minDecibels +browser-compat: api.AnalyserNode.minDecibels +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>minDecibels</code></strong> 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>curValue</em> = <em>analyserNode</em>.minDecibels; +<em>analyserNode</em>.minDecibels = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p>FFT 분석 데이터를 스케일링하는 것에 대한 최소 <a href="https://en.wikipedia.org/wiki/Decibel" title="Decibel on Wikipedia">데시벨</a> 값을 나타내는 double인데, <code>0</code> dB는 가능한 가장 큰 소리를 나타내고, <code>-10</code> dB는 그것의 10번째, 등등입니다. 기본 값은 <code>-100</code> dB입니다.</p> + +<p><code>getByteFrequencyData()</code>로부터 데이터를 얻을 때, <code>minDecibels</code> 또는 더 낮은 진폭을 가진 모든 주파수는 <code>0</code>으로 반환됩니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 만약 <code>AnalyserNode.maxDecibels</code>보다 더 큰 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p> +</div> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/analysernode/smoothingtimeconstant/index.html b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html new file mode 100644 index 0000000000..18d643160f --- /dev/null +++ b/files/ko/web/api/analysernode/smoothingtimeconstant/index.html @@ -0,0 +1,92 @@ +--- +title: AnalyserNode.smoothingTimeConstant +slug: Web/API/AnalyserNode/smoothingTimeConstant +tags: + - API + - AnalyserNode + - Property + - Reference + - Web Audio API + - smoothingTimeConstant +browser-compat: api.AnalyserNode.smoothingTimeConstant +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p class="summary">{{ domxref("AnalyserNode") }} 인터페이스의 <strong><code>smoothingTimeConstant</code></strong> 속성은 마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다. 이것은 기본적으로 현재 버퍼와 <code>AnalyserNode</code>가 처리한 마지막 버퍼 사이의 평균이고, 더욱 매끄러운 시간에 대한 값 변화의 집합을 결과로 낳습니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre class="brush: js">var <em>smoothValue</em> = <em>analyserNode</em>.smoothingTimeConstant; +<em>analyserNode</em>.smoothingTimeConstant = <em>newValue</em>; +</pre> + +<h3 id="Value">값</h3> + +<p><code>0</code>에서 <code>1</code>까지의 범위 내의 double (<code>0</code>은 시간 에버리징이 없음을 의미). 기본값은 <code>0.8</code>입니다.</p> + +<p>만약 0이 설정된다면, 완료된 에버리징이 없는 것이지만, 1의 값은 "값을 계산하는 동안 이전과 현재 버퍼를 많이 겹치기"를 의미하는데, 이는 근본적으로 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 호출에 걸쳐 변화들을 매끄럽게 합니다.</p> + +<p>기술적인 측면에서, 우리는 <a href="https://webaudio.github.io/web-audio-api/#blackman-window">Blackman window</a>를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 만약 범위 0-1 바깥의 값이 설정된다면, <code>INDEX_SIZE_ERR</code> 예외가 발생합니다.</p> +</div> + +<h2 id="Example">예제</h2> + +<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p> + +<p>만약 여러분이 <code>smoothingTimeConstant()</code>이 가진 영향에 대해 궁금하다면, 위의 예제를 복사해서 <code>analyser.smoothingTimeConstant = 0;</code>을 대신 설정해 보세요. 값 변화가 더욱 삐걱거리는 것을 인지하실 것입니다.</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html index ac48d4576c..7cf934a807 100644 --- a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.html @@ -17,7 +17,7 @@ browser-compat: api.BaseAudioContext.createPeriodicWave <p>{{ domxref("BaseAudioContext") }} 인터페이스의 <code>createPeriodicWave()</code> 메서드는 {{domxref("PeriodicWave")}}를 생성하기 위해 사용되는데, 이는 {{ domxref("OscillatorNode") }}의 출력을 형성하기 위해 사용될 수 있는 주기적인 파형을 정의하기 위해 사용됩니다.</p> -<h2 id="Syntax">문법</h2> +<h2 id="Syntax">구문</h2> <pre class="brush: js">var wave = <em>AudioContext</em>.createPeriodicWave(<em>real</em>, <em>imag</em>[, <em>constraints</em>]);</pre> @@ -137,13 +137,13 @@ osc.stop(2);</pre> <annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation> </semantics> - </math>etc.) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.</p> + </math> 등) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.</p> -<h2 id="Specifications">Specifications</h2> +<h2 id="Specifications">명세</h2> {{Specifications}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <p>{{Compat}}</p> diff --git a/files/ko/web/api/baseaudiocontext/index.html b/files/ko/web/api/baseaudiocontext/index.html new file mode 100644 index 0000000000..0c25a6dfd8 --- /dev/null +++ b/files/ko/web/api/baseaudiocontext/index.html @@ -0,0 +1,122 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Context + - Interface + - Reference + - Web Audio API + - sound +browser-compat: api.BaseAudioContext +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <code>BaseAudioContext</code> 인터페이스는 {{domxref("AudioContext")}} 와 {{domxref("OfflineAudioContext")}}에 의해 표현되는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로 작동합니다. <code>BaseAudioContext</code>는 직접적으로 사용될 수 없습니다. 대신 위에서 언급한 두 상속 인터페이스를 통해 <code>BaseAudioContext</code>의 기능을 사용할 수 있습니다.</p> + +<p><code>BaseAudioContext</code>는 이벤트의 타겟이 될 수 있는데, 따라서 이것은 {{domxref("EventTarget")}} 인터페이스를 구현합니다.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">속성</h2> + +<dl> + <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}} {{securecontext_inline}}</dt> + <dd>{{domxref("AudioWorklet")}} 객체를 반환하는데, 이는 {{domxref("AudioWorkletProcessor")}} 인터페이스를 구현하는 JavaScript 코드가 오디오 데이터를 처리하기 위해 백그라운드에서 실행되는 {{domxref("AudioNode")}}들을 생성하고 관리하는 데 쓰일 수 있습니다.</dd> + <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>스케쥴링에 사용되는 초 단위로 계속 증가하는 하드웨어 시간을 나타내는 double을 반환합니다. 이는 <code>0</code>에서 시작합니다.</dd> + <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt> + <dd>컨텍스트 내의 모든 오디오의 최종 도착지를 나타내는 {{domxref("AudioDestinationNode")}}를 반환합니다. 이것은 오디오를 렌더링하는 장치로 생각될 수 있습니다.</dd> + <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt> + <dd>3D 공간화에 사용되는 {{domxref("AudioListener")}} 객체를 반환합니다.</dd> + <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>이 컨텍스트 내의 모든 노드에 의해 사용되는 샘플 레이트(초당 샘플)를 나타내는 float을 반환합니다. {{domxref("AudioContext")}}의 샘플 레이트는 변경될 수 없습니다.</dd> + <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt> + <dd><code>AudioContext</code>의 현재 상태를 반환합니다.</dd> +</dl> + +<h3 id="Event_handlers">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt> + <dd>{{event("statechange")}} 유형의 이벤트가 발생되었을 때 실행되는 이벤트 처리기입니다. 이것은 상태 변화 메서드({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, 또는 {{domxref("AudioContext.close")}}) 중 하나의 호출에 기인해 <code>AudioContext</code>의 상태가 변경되었을 때 발생됩니다.</dd> +</dl> + +<h2 id="Methods">메서드</h2> + +<p><em>또한 {{domxref("EventTarget")}} 인터페이스로부터의 메서드를 구현합니다.</em></p> + +<dl> + <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt> + <dd>오디오 시간과 주파수 데이터를 드러내고 데이터 시각화를 생성하는 데 사용될 수 있는 {{domxref("AnalyserNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt> + <dd>high-pass, low-pass, band-pass와 같은 몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 {{domxref("BiquadFilterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt> + <dd>데이터를 넣거나 {{ domxref("AudioBufferSourceNode") }}를 통해 재생될 수 있는 새로운 빈 {{ domxref("AudioBuffer") }} 객체를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt> + <dd>{{ domxref("AudioBuffer") }} 객체 내부에 포함된 오디오 데이터를 재생하거나 조작하기 위해 사용될 수 있는 {{domxref("AudioBufferSourceNode")}}를 생성합니다. {{ domxref("AudioBuffer") }}들은 {{domxref("BaseAudioContext/createBuffer", "AudioContext.createBuffer()")}}를 사용해 생성되거나 성공적으로 오디오 트랙을 디코드했을 때 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}}에 의해 반환됩니다.</dd> + <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt> + <dd>샘플이 모두 같은 값을 가지고 있는 모노럴의(한 채널의) 사운드 신호를 계속적으로 출력하는 오디오 소스인 {{domxref("ConstantSourceNode")}} 객체를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt> + <dd>다수의 오디오 스트림으로부터 하나의 오디오 스트림에 채널을 결합하기 위해 사용되는 {{domxref("ChannelMergerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt> + <dd>오디오 스트림의 각 채널에 접근하고 별도로 그것들을 처리하기 위해 사용되는 {{domxref("ChannelSplitterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt> + <dd>오디오 그래프에 잔향(reverberation) 효과와 같은 콘볼루션 이펙트를 적용하기 위해 사용될 수 있는 {{domxref("ConvolverNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt> + <dd>들어오는 오디오 신호를 지연시키기 위해 사용되는 {{domxref("DelayNode")}}를 생성합니다. 이 노드는 Web Audio API 그래프에서 피드백 루프를 생성하는 데 유용합니다.</dd> + <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt> + <dd>음향 압축(acoustic compression)을 오디오 신호에 적용하기 위해 사용될 수 있는 {{domxref("DynamicsCompressorNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createGain()")}}</dt> + <dd>오디오 그래프의 전반적인 볼륨을 제어하기 위해 사용될 수 있는 {{domxref("GainNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt> + <dd>몇몇 다른 흔한 필터 유형으로 설정 가능한 2차 필터를 나타내는 {{domxref("IIRFilterNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt> + <dd>주기적인 파형을 나타내는 소스인 {{domxref("OscillatorNode")}}를 생성합니다. 이것은 기본적으로 음색을 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt> + <dd>들어오는 오디오 스트림을 3D 공간에서 공간화하기 위해 사용되는 {{domxref("PannerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt> + <dd>{{ domxref("OscillatorNode") }}의 출력을 결정하기 위해 사용될 수 있는 주기적인 파형을 정의하는 데 쓰이는 {{domxref("PeriodicWave")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}} {{deprecated_inline}}</dt> + <dd>JavaScript를 통한 직접적인 오디오 프로세싱을 위해 사용될 수 있는 {{domxref("ScriptProcessorNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt> + <dd>오디오 소스에 스테레오 패닝을 적용하기 위해 사용될 수 있는 {{domxref("StereoPannerNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt> + <dd>비선형 변형(non-linear distortion) 효과를 구현하기 위해 사용되는 {{domxref("WaveShaperNode")}}를 생성합니다.</dd> + <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt> + <dd>비동기적으로 {{domxref("ArrayBuffer")}}에 포함된 오디오 파일 데이터를 디코드합니다. 이 경우, ArrayBuffer는 보통 <code>arraybuffer</code>에 <code>responseType</code>을 설정한 후 {{domxref("XMLHttpRequest")}}의 <code>response</code> 특성으로부터 로딩됩니다. 이 메서드는 오디오 파일의 조각이 아니라, 오직 완전한 파일에서만 작동합니다.</dd> +</dl> + +<h2 id="Examples">예제</h2> + +<p>기본적인 오디오 컨텍스트 선언</p> + +<pre class="brush: js">const audioContext = new AudioContext();</pre> + +<p>크로스 브라우저를 위한 다른 형태</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioContext = new AudioContext(); + +const oscillatorNode = audioContext.createOscillator(); +const gainNode = audioContext.createGain(); +const finish = audioContext.destination; +</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> +</ul> diff --git a/files/ko/web/api/history/state/index.html b/files/ko/web/api/history/state/index.html index 0f889665c7..7aae615ba7 100644 --- a/files/ko/web/api/history/state/index.html +++ b/files/ko/web/api/history/state/index.html @@ -9,15 +9,15 @@ translation_of: Web/API/History/state <p>{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.</p> -<h2 id="문법">문법</h2> +<h2 id="syntax">구문</h2> <pre class="syntaxbox">const <em>currentState</em> = history.state</pre> -<h3 id="값">값</h3> +<h3 id="value">값</h3> <p>현 history에 위치한 값입니다. 이 값은 {{domxref("History.pushState","pushState()")}} 또는 {{domxref("History.replaceState","replaceState()")}}을 사용할때까지 {{jsxref("null")}} 값을 가집니다.</p> -<h2 id="예제">예제</h2> +<h2 id="examples">예제</h2> <p><code>history.state</code> 로 초기값을 보여준 후 {{domxref("History.pushState","pushState()")}}를 사용하여 State를 푸시합니다.</p> @@ -32,7 +32,7 @@ history.pushState({name: 'Example'}, "pushState example", 'page3.html'); // Now state has a value. console.log(`History.state after pushState: ${history.state}`);</pre> -<h2 id="SpecificationsE">Specifications<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -54,13 +54,13 @@ console.log(`History.state after pushState: ${history.state}`);</pre> </tbody> </table> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <p>{{Compat("api.History.state")}}</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li> diff --git a/files/ko/web/api/offlineaudiocontext/index.html b/files/ko/web/api/offlineaudiocontext/index.html new file mode 100644 index 0000000000..6ae837d718 --- /dev/null +++ b/files/ko/web/api/offlineaudiocontext/index.html @@ -0,0 +1,148 @@ +--- +title: OfflineAudioContext +slug: Web/API/OfflineAudioContext +tags: + - API + - Audio + - Interface + - OfflineAudioContext + - Reference + - Web Audio API +browser-compat: api.OfflineAudioContext +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p><code>OfflineAudioContext</code> 인터페이스는 함께 연결된 {{domxref("AudioNode")}}들로부터 만들어진 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 {{domxref("AudioContext")}}와는 대조적으로, <code>OfflineAudioContext</code>는 오디오를 장치 하드웨어로 렌더링하지 않습니다; 대신, 이것은 가능한 한 빨리 오디오를 생성하고, 그 결과를 {{domxref("AudioBuffer")}}에 출력합니다.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">생성자</h2> + +<dl> + <dt>{{domxref("OfflineAudioContext.OfflineAudioContext()")}}</dt> + <dd>새로운 <code>OfflineAudioContext</code> 인스턴스를 생성합니다.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 속성을 상속받습니다.</em></p> + +<dl> + <dt>{{domxref('OfflineAudioContext.length')}} {{readonlyinline}}</dt> + <dd>샘플 프레임의 버퍼 사이즈를 나타내는 정수.</dd> +</dl> + +<h3 id="Event_handlers">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("OfflineAudioContext.oncomplete")}}</dt> + <dd>{{domxref("OfflineAudioContext.startRendering()")}}의 이벤트 기반 버전이 사용된 이후, 프로세싱이 종료되었을 때, 즉 ({{domxref("OfflineAudioCompletionEvent")}} 유형의) {{event("complete")}} 이벤트가 발생되었을 때 호출되는 <a href="/en-US/docs/Web/Events/Event_handlers">이벤트 처리기</a>입니다.</dd> +</dl> + +<h2 id="Methods">메서드</h2> + +<p><em>또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 메서드를 상속받습니다.</em></p> + +<dl> + <dt>{{domxref("OfflineAudioContext.suspend()")}}</dt> + <dd>특정한 시간에서의 오디오 컨텍스트의 시간 진행의 연기를 스케쥴링하고 프로미스를 반환합니다.</dd> + <dt>{{domxref("OfflineAudioContext.startRendering()")}}</dt> + <dd>현재 연결과 현재 스케쥴링된 변화를 고려하며 오디오 렌더링을 시작합니다. 이 문서는 이벤트 기반 버전과 프로미스 기반 버전 모두를 다룹니다.</dd> +</dl> + +<h3 id="Deprecated_methods">더 이상 사용되지 않는 메서드</h3> + +<dl> + <dt>{{domxref("OfflineAudioContext.resume()")}}</dt> + <dd>이전에 연기된 오디오 컨텍스트에서의 시간 진행을 재개합니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고</strong>: <code>resume()</code> 메서드는 여전히 사용 가능합니다 — 이것은 이제 {{domxref("BaseAudioContext")}} 인터페이스에 정의되었고 ({{domxref("AudioContext.resume")}}을 참조하세요) 따라서 {{domxref("AudioContext")}}와 {{domxref("OfflineAudioContext")}} 인터페이스 모두에서 접근 가능합니다.</p> +</div> + +<h2 id="Events">이벤트</h2> + +<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 사용하거나 이벤트 수신기를 이 인터페이스의 <code>on<em>eventname</em></code> 속성에 부여함으로써 이 이벤트들을 수신하세요.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/OfflineAudioContext/complete_event">complete</a></code></dt> + <dd>오프라인 오디오 컨텍스트의 렌더링이 완료되었을 때 발생됩니다.<br> + 또한 <code><a href="/en-US/docs/Web/API/OfflineAudioContext/oncomplete">oncomplete</a></code> 이벤트 처리기 속성을 사용하여 이용 가능합니다.</dd> +</dl> + +<h2 id="Examples">예제</h2> + +<p>이 간단한 예제에서, 우리는 {{domxref("AudioContext")}}와 <code>OfflineAudioContext</code> 객체 모두를 선언합니다. 우리는 <code>AudioContext</code>을 XHR({{domxref("BaseAudioContext.decodeAudioData")}})을 통해 오디오 트랙을 로드하기 위해 사용하고, 그리고 나서 <code>OfflineAudioContext</code>를 오디오를 {{domxref("AudioBufferSourceNode")}}에 렌더링하고 트랙을 재생하기 위해 사용합니다. 오프라인 오디오 그래프가 준비된 후, 여러분은 {{domxref("OfflineAudioContext.startRendering")}}을 사용하여 {{domxref("AudioBuffer")}}에 이것을 렌더링할 필요가 있습니다.</p> + +<p><code>startRendering()</code> 프로미스가 이행할 때, 렌더링은 완료되었고 <code>AudioBuffer</code> 출력은 프로미스에서 반환됩니다.</p> + +<p>이 시점에서 우리는 다른 오디오 컨텍스트를 생성하고, 그것의 내부에 {{domxref("AudioBufferSourceNode")}}를 생성하고, 그리고 이것의 버퍼를 <code>AudioBuffer</code> 프로미스와 같게 설정합니다. 이것은 그리고 나서 간단한 표준 오디오 그래프의 일부로 재생됩니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 작동하는 예제를 보려면 <a href="https://mdn.github.io/webaudio-examples/offline-audio-context-promise/">offline-audio-context-promise</a> GitHub 레포지토리를 참고하세요 (<a href="https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise">소스 코드</a>도 보세요.)</p> +</div> + +<pre class="brush: js">// 온라인과 오프라인 오디오 컨텍스트를 정의합니다 + +var audioCtx = new AudioContext(); +var offlineCtx = new OfflineAudioContext(2,44100*40,44100); + +source = offlineCtx.createBufferSource(); + +// 오디오 트랙을 로딩하기 위해 XHR를 사용하고, +// 이것을 디코딩하기 위해 decodeAudioData를 사용하고 렌더링하기 위해 OfflineAudioContext를 사용합니다 + +function getData() { + request = new XMLHttpRequest(); + + request.open('GET', 'viper.ogg', true); + + request.responseType = 'arraybuffer'; + + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + myBuffer = buffer; + source.buffer = myBuffer; + source.connect(offlineCtx.destination); + source.start(); + //source.loop = true; + offlineCtx.startRendering().then(function(renderedBuffer) { + console.log('Rendering completed successfully'); + var song = audioCtx.createBufferSource(); + song.buffer = renderedBuffer; + + song.connect(audioCtx.destination); + + play.onclick = function() { + song.start(); + } + }).catch(function(err) { + console.log('Rendering failed: ' + err); + // 참고: 이 프로미스는 OfflineAudioContext에서 startRendering이 두 번째로 호출되었을 때 거부되어야만 합니다 + }); + }); + } + + request.send(); +} + +// 프로세스를 시작하기 위해 getData를 실행합니다 + +getData();</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/periodicwave/index.html b/files/ko/web/api/periodicwave/index.html new file mode 100644 index 0000000000..b976fd48d0 --- /dev/null +++ b/files/ko/web/api/periodicwave/index.html @@ -0,0 +1,55 @@ +--- +title: PeriodicWave +slug: Web/API/PeriodicWave +tags: + - API + - Audio + - Interface + - Media + - PeriodicWave + - Reference + - Web Audio + - Web Audio API + - waveform +browser-compat: api.PeriodicWave +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p><strong><code>PeriodicWave</code></strong> 인터페이스는 {{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적인 파형을 정의합니다.</p> +</div> + +<p><code>PeriodicWave</code>에는 입력도 출력도 없습니다; 이것은 {{domxref("OscillatorNode.setPeriodicWave()")}}를 호출할 때 사용자 정의 oscillator를 정의하기 위해 쓰입니다. <code>PeriodicWave</code> 그 자체는 {{domxref("BaseAudioContext.createPeriodicWave")}}에 의해 생성/반환됩니다.</p> + +<h2 id="Constructor">생성자</h2> + +<dl> + <dt>{{domxref("PeriodicWave.PeriodicWave()")}}</dt> + <dd>모든 속성에 기본값을 사용하여 새로운 <code>PeriodicWave</code> 객체 인스턴스를 생성합니다. 만약 처음에 사용자 정의 속성 값을 설정하기를 원한다면, {{domxref("BaseAudioContext.createPeriodicWave")}} 팩토리 메서드를 대신 사용하세요.</dd> +</dl> + +<h2 id="Properties">속성</h2> + +<p><em>없습니다; 또한, <code>PeriodicWave</code>는 어떠한 속성도 상속받지 않습니다.</em></p> + +<h2 id="Methods">메서드</h2> + +<p><em>없습니다; 또한, <code>PeriodicWave</code>는 어떠한 메서드도 상속받지 않습니다.</em></p> + +<h2 id="Example">예제</h2> + +<p>간단한 사인파를 포함하는 <code>PeriodicWave</code> 객체를 어떻게 생성하는지 보여주는 간단한 예제 코드를 {{domxref("BaseAudioContext.createPeriodicWave")}}에서 확인해 보세요.</p> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> +</ul> diff --git a/files/ko/web/api/periodicwave/periodicwave/index.html b/files/ko/web/api/periodicwave/periodicwave/index.html new file mode 100644 index 0000000000..edeabac774 --- /dev/null +++ b/files/ko/web/api/periodicwave/periodicwave/index.html @@ -0,0 +1,70 @@ +--- +title: PeriodicWave() +slug: Web/API/PeriodicWave/PeriodicWave +tags: + - API + - Audio + - Constructor + - PeriodicWave + - Reference + - Web Audio API +browser-compat: api.PeriodicWave.PeriodicWave +--- +<p>{{APIRef("Web Audio API")}}</p> + +<p><a + href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>의 <code><strong>PeriodicWave()</strong></code> 생성자는 새로운 {{domxref("PeriodicWave")}} 객체 인스턴스를 생성합니다.</p> + +<h2 id="Syntax">구문</h2> + +<pre + class="brush: js">var <em>myWave</em> = new PeriodicWave(<em>context</em>, <em>options</em>);</pre> + +<h3 id="Parameters">매개변수</h3> + +<p><em>{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다</em>.</p> + +<dl> + <dt><code>context</code></dt> + <dd>여러분이 노드가 관련되기를 바라는 오디오 컨텍스트를 나타내는 {{domxref("BaseAudioContext")}}</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>여러분이 <code>PeriodicWave</code>가 가지기를 바라는 속성들을 정의하는 <code><a href="https://webaudio.github.io/web-audio-api/#idl-def-PeriodicWaveOptions">PeriodicWaveOptions</a></code> dictionary 객체 (이것은 또한 <a + href="https://webaudio.github.io/web-audio-api/#idl-def-PeriodicWaveConstraints">PeriodicWaveConstraints</a> + dictionary에 정의된 옵션들도 상속받습니다.): + <ul> + <li><code>real</code>: 여러분이 파동을 형성하기 위해 사용하기를 원하는 코사인 항을 포함하는 {{domxref("Float32Array")}} ({{domxref("BaseAudioContext.createPeriodicWave")}}의 <code>real</code> 매개변수와 동일)</li> + <li><code>imag</code>: 여러분이 파동을 형성하기 위해 사용하기를 원하는 사인 항을 포함하는 {{domxref("Float32Array")}} ({{domxref("BaseAudioContext.createPeriodicWave")}}의 <code>imag</code> 매개변수와 동일)</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">반환 값</h3> + +<p>새로운 {{domxref("PeriodicWave")}} 객체 인스턴스.</p> + +<h2 id="Example">예제</h2> + +<pre class="brush: js">var real = new Float32Array(2); +var imag = new Float32Array(2); +var ac = new AudioContext(); + +real[0] = 0; +imag[0] = 0; +real[1] = 1; +imag[1] = 0; + +var options = { + real : real, + imag : imag, + disableNormalization : false +} + +var wave = new PeriodicWave(ac, options);</pre> + +<h2 id="Specifications">명세</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat}}</p> diff --git a/files/ko/web/api/streams_api/index.html b/files/ko/web/api/streams_api/index.html index 03bafe2e88..510d797db4 100644 --- a/files/ko/web/api/streams_api/index.html +++ b/files/ko/web/api/streams_api/index.html @@ -99,10 +99,10 @@ translation_of: Web/API/Streams_API <ul> <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: ReadableStream에서 어떻게 데이터를 읽어들여 다른 곳으로 전달하는지 보여줍니다.</li> - <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다..</li> + <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: 커스텀 스트림을 통해 무작위 문자열을 생성하고, 데이터 청크로 큐잉한 뒤, 다시 읽어들이는 방법에 대해 설명합니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: 이 예제는 simple random stream 예제를 확장하여, 스트림을 분할하고 각 스트림이 독립적으로 데이터를 읽는 방법을 보여줍니다.</li> - <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보옂부니다..</li> + <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보여줍니다.</li> <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> 을 통해 PNG file을 PNG 청크 스트림으로 변환하는 방식으로 ReadableStream을 다른 데이터 타입 스트림으로 전환하는 방법을 설명합니다.</li> </ul> diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/index.html b/files/ko/web/api/web_audio_api/advanced_techniques/index.html new file mode 100644 index 0000000000..d3ce7cd56d --- /dev/null +++ b/files/ko/web/api/web_audio_api/advanced_techniques/index.html @@ -0,0 +1,586 @@ +--- +title: 'Advanced techniques: Creating and sequencing audio' +slug: Web/API/Web_Audio_API/Advanced_techniques +tags: + - API + - Advanced + - Audio + - Guide + - Reference + - Web Audio API + - sequencer +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p class="summary">In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We're going to introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and you're looking for an introduction to their application within with the Web Audio API, you've come to the right place.</p> + +<h2 id="Demo">Demo</h2> + +<p>We're going to be looking at a very simple step sequencer:</p> + +<p><img alt="A sound sequencer application featuring play and BPM master controls, and 4 different voices with controls for each." src="sequencer.png"><br> + </p> + +<p>In practice this is easier to do with a library — the Web Audio API was built to be built upon. If you are about to embark on building something more complex, <a href="https://tonejs.github.io/">tone.js</a> would be a good place to start. However, we want to demonstrate how to build such a demo from first principles, as a learning exercise.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find the source code on GitHub as <a href="https://github.com/mdn/webaudio-examples/tree/master/step-sequencer">step-sequencer</a>; see the <a href="https://mdn.github.io/webaudio-examples/step-sequencer/">step-sequencer running live</a> also.</p> +</div> + +<p>The interface consists of master controls, which allow us to play/stop the sequencer, and adjust the BPM (beats per minute) to speed up or slow down the "music".</p> + +<p>There are four different sounds, or voices, which can be played. Each voice has four buttons, which represent four beats in one bar of music. When they are enabled the note will sound. When the instrument plays, it will move across this set of beats and loop the bar.</p> + +<p>Each voice also has local controls, which allow you to manipulate the effects or parameters particular to each technique we are using to create those voices. The techniques we are using are:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name of voice</th> + <th scope="col">Technique</th> + <th scope="col">Associated Web Audio API feature</th> + </tr> + </thead> + <tbody> + <tr> + <td>"Sweep"</td> + <td>Oscillator, periodic wave</td> + <td>{{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}</td> + </tr> + <tr> + <td>"Pulse"</td> + <td>Multiple oscillators</td> + <td>{{domxref("OscillatorNode")}}</td> + </tr> + <tr> + <td>"Noise"</td> + <td>Random noise buffer, Biquad filter</td> + <td>{{domxref("AudioBuffer")}}, {{domxref("AudioBufferSourceNode")}}, {{domxref("BiquadFilterNode")}}</td> + </tr> + <tr> + <td>"Dial up"</td> + <td>Loading a sound sample to play</td> + <td>{{domxref("BaseAudioContext/decodeAudioData")}}, {{domxref("AudioBufferSourceNode")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: This instrument was not created to sound good, it was created to provide demonstration code and represents a <em>very</em> simplified version of such an instrument. The sounds are based on a dial-up modem. If you are unaware of how one sounds you can <a href="https://soundcloud.com/john-pemberton/modem-dialup">listen to one here</a>.</p> +</div> + +<h2 id="Creating_an_audio_context">Creating an audio context</h2> + +<p>As you should be used to by now, each Web Audio API app starts with an audio context:</p> + +<pre class="brush: js">// for cross browser compatibility +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext();</pre> + +<h2 id="The_sweep_—_oscillators_periodic_waves_and_envelopes">The "sweep" — oscillators, periodic waves, and envelopes</h2> + +<p>For what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound.</p> + +<p>The {{domxref("OscillatorNode")}} comes with basic waveforms out of the box — sine, square, triangle or sawtooth. However, instead of using the standard waves that come by default, we're going to create our own using the {{domxref("PeriodicWave")}} interface and values set in a wavetable. We can use the {{domxref("BaseAudioContext.createPeriodicWave")}} method to use this custom wave with an oscillator.</p> + +<h3 id="The_periodic_wave">The periodic wave</h3> + +<p>First of all, we'll create our periodic wave. To do so, We need to pass real and imaginary values into the {{domxref("BaseAudioContext.createPeriodicWave()")}} method.:</p> + +<pre class="brush: js">const wave = audioCtx.createPeriodicWave(wavetable.real, wavetable.imag); +</pre> + +<div class="note"> +<p><strong>Note</strong>: In our example the wavetable is held in a separate JavaScript file (<code>wavetable.js</code>), because there are <em>so</em> many values. It is taken from a <a href="https://github.com/GoogleChromeLabs/web-audio-samples/tree/main/archive/demos/wave-tables">repository of wavetables</a>, which can be found in the <a href="https://github.com/GoogleChromeLabs/web-audio-samples/">Web Audio API examples from Google Chrome Labs</a>.</p> +</div> + +<h3 id="The_Oscillator">The Oscillator</h3> + +<p>Now we can create an {{domxref("OscillatorNode")}} and set its wave to the one we've created:</p> + +<pre class="brush: js">function playSweep(time) { + const osc = audioCtx.createOscillator(); + osc.setPeriodicWave(wave); + osc.frequency.value = 440; + osc.connect(audioCtx.destination); + osc.start(time); + osc.stop(time + 1); +}</pre> + +<p>We pass in a time parameter to the function here, which we'll use later to schedule the sweep.</p> + +<h3 id="Controlling_amplitude">Controlling amplitude</h3> + +<p>This is great, but wouldn't it be nice if we had an amplitude envelope to go with it? Let's create a simple one so we get used to the methods we need to create an envelope with the Web Audio API.</p> + +<p>Let's say our envelope has attack and release. We can allow the user to control these using <a href="/en-US/docs/Web/HTML/Element/input/range">range inputs</a> on the interface:</p> + +<pre class="brush: html"><label for="attack">Attack</label> +<input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> + +<label for="release">Release</label> +<input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /></pre> + +<p>Now we can create some variables over in JavaScript and have them change when the input values are updated:</p> + +<pre class="brush: js">let attackTime = 0.2; +const attackControl = document.querySelector('#attack'); +attackControl.addEventListener('input', function() { + attackTime = Number(this.value); +}, false); + +let releaseTime = 0.5; +const releaseControl = document.querySelector('#release'); +releaseControl.addEventListener('input', function() { + releaseTime = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playSweep_function">The final playSweep() function</h3> + +<p>Now we can expand our <code>playSweep()</code> function. We need to add a {{domxref("GainNode")}} and connect that through our audio graph to actually apply amplitude variations to our sound. The gain node has one property: <code>gain</code>, which is of type {{domxref("AudioParam")}}.</p> + +<p>This is really useful — now we can start to harness the power of the audio param methods on the gain value. We can set a value at a certain time, or we can change it <em>over</em> time with methods such as {{domxref("AudioParam.linearRampToValueAtTime")}}.</p> + +<p>For our attack and release, we'll use the <code>linearRampToValueAtTime</code> method as mentioned above. It takes two parameters — the value you want to set the parameter you are changing to (in this case the gain) and when you want to do this. In our case <em>when</em> is controlled by our inputs. So in the example below the gain is being increased to 1, at a linear rate, over the time the attack range input has been set to. Similarly, for our release, the gain is being set to 0, at a linear rate, over the time the release input has been set to.</p> + +<pre class="brush: js">let sweepLength = 2; +function playSweep(time) { + let osc = audioCtx.createOscillator(); + osc.setPeriodicWave(wave); + osc.frequency.value = 440; + + let sweepEnv = audioCtx.createGain(); + sweepEnv.gain.cancelScheduledValues(time); + sweepEnv.gain.setValueAtTime(0, time); + // set our attack + sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime); + // set our release + sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime); + + osc.connect(sweepEnv).connect(audioCtx.destination); + osc.start(time); + osc.stop(time + sweepLength); +}</pre> + +<h2 id="The_pulse_—_low_frequency_oscillator_modulation">The "pulse" — low frequency oscillator modulation</h2> + +<p>Great, now we've got our sweep! Let's move on and take a look at that nice pulse sound. We can achieve this with a basic oscillator, modulated with a second oscillator.</p> + +<h3 id="Initial_oscillator">Initial oscillator</h3> + +<p>We'll set up our first {{domxref("OscillatorNode")}} the same way as our sweep sound, except we won't use a wavetable to set a bespoke wave — we'll just use the default <code>sine</code> wave:</p> + +<pre class="brush: js">const osc = audioCtx.createOscillator(); +osc.type = 'sine'; +osc.frequency.value = 880;</pre> + +<p>Now we're going to create a {{domxref("GainNode")}}, as it's the <code>gain</code> value that we will oscillate with our second, low frequency oscillator:</p> + +<pre class="brush: js">const amp = audioCtx.createGain(); +amp.gain.setValueAtTime(1, audioCtx.currentTime);</pre> + +<h3 id="Creating_the_second_low_frequency_oscillator">Creating the second, low frequency, oscillator</h3> + +<p>We'll now create a second — <code>square</code> — wave (or pulse) oscillator, to alter the amplification of our first sine wave:</p> + +<pre class="brush: js">const lfo = audioCtx.createOscillator(); +lfo.type = 'square'; +lfo.frequency.value = 30;</pre> + +<h3 id="Connecting_the_graph">Connecting the graph</h3> + +<p>The key here is connecting the graph correctly, and also starting both oscillators:</p> + +<pre class="brush: js">lfo.connect(amp.gain); +osc.connect(amp).connect(audioCtx.destination); +lfo.start(); +osc.start(time); +osc.stop(time + pulseTime);</pre> + +<div class="note"> +<p><strong>Note</strong>: We also don't have to use the default wave types for either of these oscillators we're creating — we could use a wavetable and the periodic wave method as we did before. There is a multitude of possibilities with just a minimum of nodes.</p> +</div> + +<h3 id="Pulse_user_controls">Pulse user controls</h3> + +<p>For the UI controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs. One will change the tone and the other will change how the pulse modulates the first wave:</p> + +<pre class="brush: html"><label for="hz">Hz</label> +<input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> +<label for="lfo">LFO</label> +<input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /></pre> + +<p>As before, we'll vary the parameters when the range input values are changed by the user.</p> + +<pre class="brush: js">let pulseHz = 880; +const hzControl = document.querySelector('#hz'); +hzControl.addEventListener('input', function() { + pulseHz = Number(this.value); +}, false); + +let lfoHz = 30; +const lfoControl = document.querySelector('#lfo'); +lfoControl.addEventListener('input', function() { + lfoHz = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playPulse_function">The final playPulse() function</h3> + +<p>Here's the entire <code>playPulse()</code> function:</p> + +<pre class="brush: js">let pulseTime = 1; +function playPulse(time) { + let osc = audioCtx.createOscillator(); + osc.type = 'sine'; + osc.frequency.value = pulseHz; + + let amp = audioCtx.createGain(); + amp.gain.value = 1; + + let lfo = audioCtx.createOscillator(); + lfo.type = 'square'; + lfo.frequency.value = lfoHz; + + lfo.connect(amp.gain); + osc.connect(amp).connect(audioCtx.destination); + lfo.start(); + osc.start(time); + osc.stop(time + pulseTime); +}</pre> + +<h2 id="The_noise_—_random_noise_buffer_with_biquad_filter">The "noise" — random noise buffer with biquad filter</h2> + +<p>Now we need to make some noise! All modems have noise. Noise is just random numbers when it comes to audio data, so is, therefore, a relatively straightforward thing to create with code.</p> + +<h3 id="Creating_an_audio_buffer">Creating an audio buffer</h3> + +<p>We need to create an empty container to put these numbers into, however, one that the Web Audio API understands. This is where {{domxref("AudioBuffer")}} objects come in. You can fetch a file and decode it into a buffer (we'll get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data.</p> + +<p>For noise, let's do the latter. We first need to calculate the size of our buffer, to create it. We can use the {{domxref("BaseAudioContext.sampleRate")}} property for this:</p> + +<pre class="brush: js">const bufferSize = audioCtx.sampleRate * noiseLength; +const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);</pre> + +<p>Now we can fill it with random numbers between -1 and 1:</p> + +<pre class="brush: js">let data = buffer.getChannelData(0); // get data + +// fill the buffer with noise +for (let i = 0; i < bufferSize; i++) { + data[i] = Math.random() * 2 - 1; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Why -1 to 1? When outputting sound to a file or speakers we need to have a number to represent 0db full scale — the numerical limit of the fixed point media or DAC. In floating point audio, 1 is a convenient number to map to "full scale" for mathematical operations on signals, so oscillators, noise generators and other sound sources typically output bipolar signals in the range -1 to 1. A browser will clamp values outside this range.</p> +</div> + +<h3 id="Creating_a_buffer_source">Creating a buffer source</h3> + +<p>Now we have the audio buffer and have filled it with data, we need a node to add to our graph that can use the buffer as a source. We'll create a {{domxref("AudioBufferSourceNode")}} for this, and pass in the data we've created:</p> + +<pre class="brush: js">let noise = audioCtx.createBufferSource(); +noise.buffer = buffer;</pre> + +<p>If we connect this through our audio graph and play it —</p> + +<pre class="brush: js">noise.connect(audioCtx.destination); +noise.start();</pre> + +<p>you'll notice that it's pretty hissy or tinny. We've created white noise, that's how it should be. Our values are running from -1 to 1, which means we have peaks of all frequencies, which in turn is actually quite dramatic and piercing. We <em>could</em> modify the function to run values from 0.5 to -0.5 or similar to take the peaks off and reduce the discomfort, however, where's the fun in that? Let's route the noise we've created through a filter.</p> + +<h3 id="Adding_a_biquad_filter_to_the_mix">Adding a biquad filter to the mix</h3> + +<p>We want something in the range of pink or brown noise. We want to cut off those high frequencies and possibly some of the lower ones. Let's pick a bandpass biquad filter for the job.</p> + +<div class="note"> +<p><strong>Note</strong>: The Web Audio API comes with two types of filter nodes: {{domxref("BiquadFilterNode")}} and {{domxref("IIRFilterNode")}}. For the most part a biquad filter will be good enough — it comes with different types such as lowpass, highpass, and bandpass. If you're looking to do something more bespoke, however, the IIR filter might be a good option — see <a href="/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters">Using IIR filters</a> for more information.</p> +</div> + +<p>Wiring this up is the same as we've seen before. We create the {{domxref("BiquadFilterNode")}}, configure the properties we want for it and connect it through our graph. Different types of biquad filters have different properties — for instance setting the frequency on a bandpass type adjusts the middle frequency, however on a lowpass it would set the top frequency.</p> + +<pre class="brush: js">let bandpass = audioCtx.createBiquadFilter(); +bandpass.type = 'bandpass'; +bandpass.frequency.value = 1000; + +// connect our graph +noise.connect(bandpass).connect(audioCtx.destination);</pre> + +<h3 id="Noise_user_controls">Noise user controls</h3> + +<p>On the UI we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections:</p> + +<pre class="brush: html"><label for="duration">Duration</label> +<input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> + +<label for="band">Band</label> +<input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> +</pre> + +<pre class="brush: js">let noiseDuration = 1; +const durControl = document.querySelector('#duration'); +durControl.addEventListener('input', function() { + noiseDuration = Number(this.value); +}, false); + +let bandHz = 1000; +const bandControl = document.querySelector('#band'); +bandControl.addEventListener('input', function() { + bandHz = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playNoise_function">The final playNoise() function</h3> + +<p>Here's the entire <code>playNoise()</code> function:</p> + +<pre class="brush: js">function playNoise(time) { + const bufferSize = audioCtx.sampleRate * noiseDuration; // set the time of the note + const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); // create an empty buffer + let data = buffer.getChannelData(0); // get data + + // fill the buffer with noise + for (let i = 0; i < bufferSize; i++) { + data[i] = Math.random() * 2 - 1; + } + + // create a buffer source for our created data + let noise = audioCtx.createBufferSource(); + noise.buffer = buffer; + + let bandpass = audioCtx.createBiquadFilter(); + bandpass.type = 'bandpass'; + bandpass.frequency.value = bandHz; + + // connect our graph + noise.connect(bandpass).connect(audioCtx.destination); + noise.start(time); +}</pre> + +<h2 id="Dial_up_—_loading_a_sound_sample">"Dial up" — loading a sound sample</h2> + +<p>It's straightforward enough to emulate phone dial (DTMF) sounds, by playing a couple of oscillators together using the methods we've already looked at, however, in this section, we'll load in a sample file instead so we can take a look at what's involved.</p> + +<h3 id="Loading_the_sample">Loading the sample</h3> + +<p>We want to make sure our file has loaded and been decoded into a buffer before we use it, so let's create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> function to allow us to do this:</p> + +<pre class="brush: js">async function getFile(audioContext, filepath) { + const response = await fetch(filepath); + const arrayBuffer = await response.arrayBuffer(); + const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); + return audioBuffer; +}</pre> + +<p>We can then use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> operator when calling this function, which ensures that we can only run subsequent code when it has finished executing.</p> + +<p>Let's create another <code>async</code> function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when this file is loaded and buffered:</p> + +<pre class="brush: js">async function setupSample() { + const filePath = 'dtmf.mp3'; + const sample = await getFile(audioCtx, filePath); + return sample; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can easily modify the above function to take an array of files and loop over them to load more than one sample. This would be very handy for more complex instruments, or gaming.</p> +</div> + +<p>We can now use <code>setupSample()</code> like so:</p> + +<pre class="brush: js">setupSample() + .then((sample) => { + // sample is our buffered file + // ... +});</pre> + +<p>When the sample is ready to play, the program sets up the UI so it is ready to go.</p> + +<h3 id="Playing_the_sample">Playing the sample</h3> + +<p>Let's create a <code>playSample()</code> function in a similar manner to how we did with the other sounds. This time it will create an {{domxref("AudioBufferSourceNode")}}, and put the buffer data we've fetched and decoded into it, and play it:</p> + +<pre class="brush: js">function playSample(audioContext, audioBuffer, time) { + const sampleSource = audioContext.createBufferSource(); + sampleSource.buffer = audioBuffer; + sampleSource.connect(audioContext.destination) + sampleSource.start(time); + return sampleSource; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: We can call <code>stop()</code> on an {{domxref("AudioBufferSourceNode")}}, however, this will happen automatically when the sample has finished playing.</p> +</div> + +<h3 id="Dial-up_user_controls">Dial-up user controls</h3> + +<p>The {{domxref("AudioBufferSourceNode")}} comes with a <code><a href="/en-US/docs/Web/API/AudioBufferSourceNode/playbackRate">playbackRate</a></code> property. Let's expose that to our UI, so we can speed up and slow down our sample. We'll do that in the same sort of way as before:</p> + +<pre class="brush: html"><label for="rate">Rate</label> +<input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" /></pre> + +<pre class="brush: js">let playbackRate = 1; +const rateControl = document.querySelector('#rate'); +rateControl.addEventListener('input', function() { + playbackRate = Number(this.value); +}, false);</pre> + +<h3 id="The_final_playSample_function">The final playSample() function</h3> + +<p>We'll then add a line to update the <code>playbackRate</code> property to our <code>playSample()</code> function. The final version looks like this:</p> + +<pre class="brush: js">function playSample(audioContext, audioBuffer, time) { + const sampleSource = audioContext.createBufferSource(); + sampleSource.buffer = audioBuffer; + sampleSource.playbackRate.value = playbackRate; + sampleSource.connect(audioContext.destination) + sampleSource.start(time); + return sampleSource; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: The sound file was <a href="http://soundbible.com/1573-DTMF-Tones.html">sourced from soundbible.com</a>.</p> +</div> + +<h2 id="Playing_the_audio_in_time">Playing the audio in time</h2> + +<p>A common problem with digital audio applications is getting the sounds to play in time so that the beat remains consistent, and things do not slip out of time.</p> + +<p>We could schedule our voices to play within a <code>for</code> loop, however the biggest problem with this is updating whilst it is playing, and we've already implemented UI controls to do so. Also, it would be really nice to consider an instrument-wide BPM control. The best way to get our voices to play on the beat is to create a scheduling system, whereby we look ahead at when the notes are going to play and push them into a queue. We can start them at a precise time with the currentTime property and also take into account any changes.</p> + +<div class="note"> +<p><strong>Note</strong>: This is a much stripped down version of <a href="https://www.html5rocks.com/en/tutorials/audio/scheduling/">Chris Wilson's A Tale Of Two Clocks</a> article, which goes into this method in much more detail. There's no point repeating it all here, but it's highly recommended to read this article and use this method. Much of the code here is taken from his <a href="https://github.com/cwilso/metronome/blob/master/js/metronome.js">metronome example</a>, which he references in the article.</p> +</div> + +<p>Let's start by setting up our default BPM (beats per minute), which will also be user-controllable via — you guessed it — another range input.</p> + +<pre class="brush: js">let tempo = 60.0; +const bpmControl = document.querySelector('#bpm'); +bpmControl.addEventListener('input', function() { + tempo = Number(this.value); +}, false);</pre> + +<p>Then we'll create variables to define how far ahead we want to look, and how far ahead we want to schedule:</p> + +<pre class="brush: js">const lookahead = 25.0; // How frequently to call scheduling function (in milliseconds) +const scheduleAheadTime = 0.1; // How far ahead to schedule audio (sec)</pre> + +<p>Let's create a function that moves the note forwards by one beat, and loops back to the first when it reaches the 4th (last) one:</p> + +<pre class="brush: js">let currentNote = 0; +let nextNoteTime = 0.0; // when the next note is due. + +function nextNote() { + const secondsPerBeat = 60.0 / tempo; + + nextNoteTime += secondsPerBeat; // Add beat length to last beat time + + // Advance the beat number, wrap to zero + currentNote++; + if (currentNote === 4) { + currentNote = 0; + } +}</pre> + +<p>We want to create a reference queue for the notes that are to be played, and the functionality to play them using the functions we've previously created:</p> + +<pre class="brush: js">const notesInQueue = []; + +function scheduleNote(beatNumber, time) { + + // push the note on the queue, even if we're not playing. + notesInQueue.push({ note: beatNumber, time: time }); + + if (pads[0].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playSweep(time) + } + if (pads[1].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playPulse(time) + } + if (pads[2].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playNoise(time) + } + if (pads[3].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') { + playSample(audioCtx, dtmf, time); + } +}</pre> + +<p>Here we look at the current time and compare it to the time for the next note; when the two match it will call the previous two functions.</p> + +<p>{{domxref("AudioContext")}} object instances have a <code><a href="/en-US/docs/Web/API/BaseAudioContext/currentTime">currentTime</a></code> property, which allows us to retrieve the number of seconds after we first created the context. This is what we shall use for timing within our step sequencer — It's extremely accurate, returning a float value accurate to about 15 decimal places.</p> + +<pre class="brush: js">function scheduler() { + // while there are notes that will need to play before the next interval, schedule them and advance the pointer. + while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime ) { + scheduleNote(currentNote, nextNoteTime); + nextNote(); + } + timerID = window.setTimeout(scheduler, lookahead); +}</pre> + +<p>We also need a draw function to update the UI, so we can see when the beat progresses.</p> + +<pre class="brush: js">let lastNoteDrawn = 3; + +function draw() { + let drawNote = lastNoteDrawn; + let currentTime = audioCtx.currentTime; + + while (notesInQueue.length && notesInQueue[0].time < currentTime) { + drawNote = notesInQueue[0].note; + notesInQueue.splice(0,1); // remove note from queue + } + + // We only need to draw if the note has moved. + if (lastNoteDrawn != drawNote) { + pads.forEach(function(el, i) { + el.children[lastNoteDrawn].style.borderColor = 'hsla(0, 0%, 10%, 1)'; + el.children[drawNote].style.borderColor = 'hsla(49, 99%, 50%, 1)'; + }); + + lastNoteDrawn = drawNote; + } + // set up to draw again + requestAnimationFrame(draw); +}</pre> + +<h2 id="Putting_it_all_together">Putting it all together</h2> + +<p>Now all that's left to do is make sure we've loaded the sample before we are able to <em>play</em> the instrument. We'll add a loading screen that disappears when the file has been fetched and decoded, then we can allow the scheduler to start using the play button click event.</p> + +<pre class="brush: js">// when the sample has loaded allow play +let loadingEl = document.querySelector('.loading'); +const playButton = document.querySelector('[data-playing]'); +let isPlaying = false; +setupSample() + .then((sample) => { + loadingEl.style.display = 'none'; // remove loading screen + + dtmf = sample; // to be used in our playSample function + + playButton.addEventListener('click', function() { + isPlaying = !isPlaying; + + if (isPlaying) { // start playing + + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } + + currentNote = 0; + nextNoteTime = audioCtx.currentTime; + scheduler(); // kick off scheduling + requestAnimationFrame(draw); // start the drawing loop. + this.dataset.playing = 'true'; + + } else { + + window.clearTimeout(timerID); + this.dataset.playing = 'false'; + + } + }) + });</pre> + +<h2 id="Summary">Summary</h2> + +<p>We've now got an instrument inside our browser! Keep playing and experimenting — you can expand on any of these techniques to create something much more elaborate.</p> diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png b/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png Binary files differnew file mode 100644 index 0000000000..63de8cb0de --- /dev/null +++ b/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png diff --git a/files/ko/web/api/web_audio_api/audio-context_.png b/files/ko/web/api/web_audio_api/audio-context_.png Binary files differnew file mode 100644 index 0000000000..36d0190052 --- /dev/null +++ b/files/ko/web/api/web_audio_api/audio-context_.png diff --git a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index 571c15684e..b45db93b23 100644 --- a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -1,5 +1,5 @@ --- -title: Basic concepts behind Web Audio API +title: Web Audio API의 기본 개념 slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API tags: - 가이드 @@ -12,110 +12,116 @@ tags: translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API --- <div class="summary"> -<p><span class="seoSummary">Web Audio API의 기능이 어떻게 동작하는지에 대한 오디오 이론에 대해서 설명합니다. 마스터 사운드 엔지니어가 될 수 는 없지만, Web Audio API가 왜 그렇게 작동하는지에 대해 이해할 수 있는 충분한 배경 지식을 제공해서 개발중에 더 나은 결정을 내릴 수 있게합니다. </span></p> +<p><span class="seoSummary">오디오가 어떻게 여러분의 앱을 통해서 전송(route)되는지를 설계하는 동안 여러분이 적절한 결정을 내리는 것을 돕기 위해, 이 문서는 Web Audio API의 기능이 어떻게 동작하는가를 뒷받침하는 얼마간의 오디오 이론을 설명합니다. 이 문서를 읽는다고 해서 여러분이 숙련된 사운드 엔지니어가 될 수는 없지만, 왜 Web Audio API가 이렇게 동작하는지를 이해하기에 충분한 배경지식을 줄 것입니다.</span></p> </div> -<h2 id="Audio_graphs">Audio graphs</h2> +<h2 id="Audio_graphs">오디오 그래프</h2> -<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p> +<p><a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a>는 <a href="/ko/docs/Web/API/AudioContext">오디오 컨텍스트</a>(audio context) 내의 오디오 연산을 다루는 것을 포함하고, <strong>모듈러 라우팅</strong>(modular routing)을 허용하도록 설계되었습니다. 기본적인 오디오 연산은 <strong>오디오 노드</strong>(audio node)와 함께 수행되는데, 이는 <strong>오디오 라우팅 그래프</strong>를 형성하기 위해 함께 연결되어 있습니다. 다른 유형의 채널 레이아웃을 가진 몇몇의 소스(source)들은 심지어 하나의 컨텍스트 내에서 지원됩니다. 이 모듈식의(modular) 디자인은 역동적인 효과를 가진 복잡한 오디오 기능을 만드는 데 있어 유연함을 제공합니다.</p> -<p>Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. Although, you don't have to provide a destination if you, say, just want to visualize some audio data. A simple, typical workflow for web audio would look something like this:</p> +<p>하나 또는 더 많은 소스에서 시작하고, 하나 또는 더 많은 노드를 통과하고, 그리고서 도착지(destination)에서 끝나는 체인(chain)을 형성하며, 오디오 노드는 입력과 출력을 통해 연결되어 있습니다. 그러나, 예를 들어 여러분이 단지 오디오 데이터를 시각화하기를 원한다면 도착지를 반드시 제공할 필요는 없습니다. 웹 오디오의 단순하고, 일반적인 작업 흐름은 다음과 같습니다:</p> <ol> - <li>Create audio context.</li> - <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream.</li> - <li>Create effects nodes, such as reverb, biquad filter, panner, compressor.</li> - <li>Choose final destination of audio, for example your system speakers.</li> - <li>Connect the sources up to the effects, and the effects to the destination.</li> + <li>오디오 컨텍스트를 생성합니다.</li> + <li>컨텍스트 내에서, 다음과 같이 소스를 생성합니다 — {{HTMLElement("audio")}}, oscillator, 또는 stream.</li> + <li>효과 노드를 생성하는데, 예를 들자면 reverb, biquad filter, panner, 또는 compressor가 있습니다.</li> + <li>사용자의 컴퓨터 스피커와 같이, 오디오의 최종 도착지를 선택합니다.</li> + <li>오디오 소스로부터 0 또는 더 많은 효과를 거쳐 연결(connection)을 확립하는데, 마지막으로는 앞서 선택된 도착지에서 끝납니다.</li> </ol> -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12237/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<div class="notecard note"> +<h4>채널 표기법</h4> -<p>Each input or output is composed of several <strong>channels, </strong>which represent a specific audio layout. Any discrete channel structure is supported, including <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, and so on.</p> +<p>한 신호에서 사용 가능한 오디오 채널의 숫자는 종종 숫자 형식으로 표현되는데, 예를 들자면 2.0 또는 5.1과 같습니다. 이것은 <a href="https://en.wikipedia.org/wiki/Surround_sound#Channel_notation">채널 표기법</a>이라고 불립니다. 첫번째 숫자는 신호가 포함하는 전체 주파수 범위 오디오 채널의 숫자입니다. 마침표 뒤의 숫자는 저주파 효과(LFE) 출력에 대해 비축된 채널의 수를 나타냅니다; 이 숫자는 종종 <strong>서브 우퍼</strong>(subwoofer)로 불립니다.</p> +</div> + +<p><img alt="오디오 컨텍스트라고 써진 외부 상자와 소스, 효과, 목적지라고 써진 세 개의 내부 상자를 가진 하나의 간단한 도표. 세 개의 내부 상자는 좌에서 우를 향하는 화살표를 사이에 가지고 있는데, 이는 오디오 정보의 흐름을 나타냅니다." src="webaudioapi_en.svg" style="display: block; margin: 0px auto;"></p> + +<p>각각의 입력 또는 출력은 몇몇의 <strong>채널</strong>으로 구성되어 있는데, 이는 특정한 오디오 레이아웃을 나타냅니다. <em>모노</em>, <em>스테레오</em>, <em>quad</em>, <em>5.1</em> 등등을 포함하는, 어떠한 별개의 채널 구조든 지원됩니다.</p> -<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/14179/mdn.png" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p> +<p><img alt="입력과 출력 그리고 이 입력/출력 내부의 채널을 통해 연결하는 AudioNode의 능력을 보여줍니다." src="mdn.png"></p> -<p>Audio sources can come from a variety of places:</p> +<p>오디오 소스는 다양한 방법으로 얻어질 수 있습니다:</p> <ul> - <li>Generated directly in JavaScript by an audio node (such as an oscillator).</li> - <li>Created from raw PCM data (the audio context has methods to decode supported audio formats).</li> - <li>Taken from HTML media elements (such as {{HTMLElement("video")}} or {{HTMLElement("audio")}}).</li> - <li>Taken directly from a <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam or microphone).</li> + <li>소리는 JavaScript에서 (oscillator처럼) 오디오 노드에 의해 직접적으로 생성될 수 있습니다.</li> + <li>가공되지 않은(raw) PCM 데이터로부터 생성될 수 있습니다 (오디오 컨텍스트는 지원되는 오디오 포맷을 디코드하는 메서드를 가지고 있습니다).</li> + <li>({{HTMLElement("video")}} 또는 {{HTMLElement("audio")}}처럼) HTML 미디어 요소로부터 취해질 수 있습니다.</li> + <li>(웹캠이나 마이크처럼) <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}}로부터 직접적으로 취해질 수 있습니다.</li> </ul> -<h2 id="Audio_data_what's_in_a_sample">Audio data: what's in a sample</h2> +<h2 id="Audio_data_whats_in_a_sample">오디오 데이터: 무엇이 샘플 속에 들어있는가</h2> -<p>When an audio signal is processed, <strong>sampling</strong> means the conversion of a <a href="https://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">continuous signal</a> to a <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">discrete signal</a>; or put another way, a continuous sound wave, such as a band playing live, is converted to a sequence of samples (a discrete-time signal) that allow a computer to handle the audio in distinct blocks.</p> +<p>오디오 신호가 처리될 때, <strong>샘플링</strong>이란 <a href="https://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">연속 신호</a>(continuous signal)의 <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">불연속 신호</a>(discrete signal)로의 전환을 의미합니다; 또는 달리 말하면, 라이브로 연주하고 있는 밴드와 같이, 연속적인 음파를 컴퓨터가 오디오를 구별되는 단위로 다룰 수 있게 허용하는 일련의 샘플들로 전환하는 것을 의미합니다.</p> -<p>A lot more information can be found on the Wikipedia page <a href="https://en.wikipedia.org/wiki/Sampling_%28signal_processing%29">Sampling (signal processing)</a>.</p> +<p>더 많은 정보는 위키피디아 문서 <a href="https://en.wikipedia.org/wiki/Sampling_%28signal_processing%29">샘플링 (신호 처리)</a>에서 찾을 수 있습니다.</p> -<h2 id="Audio_buffers_frames_samples_and_channels">Audio buffers: frames, samples and channels</h2> +<h2 id="Audio_buffers_frames_samples_and_channels">오디오 버퍼: 프레임, 샘플, 그리고 채널</h2> -<p>An {{ domxref("AudioBuffer") }} takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames played per second.</p> +<p>{{ domxref("AudioBuffer") }}는 매개변수로서 채널의 수 (1은 모노, 2는 스테레오 등), 버퍼 내부의 샘플 프레임의 수를 의미하는 길이, 그리고 초당 재생되는 샘플 프레임의 수인 샘플 레이트를 취합니다.</p> -<p>A sample is a single float32 value that represents the value of the audio stream at each specific point in time, in a specific channel (left or right, if in the case of stereo). A frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for 5.1, etc.)</p> +<p>샘플은 특정한 채널(스테레오의 경우, 왼쪽 또는 오른쪽)에서, 각각의 특정한 시점에의 오디오 스트림의 값을 표현하는 단일의 float32 값입니다. 프레임 또는 샘플 프레임은, 특정한 시점에 재생될 모든 채널의 모든 값들의 집합입니다: 즉 같은 시간에 재생되는 모든 채널의 모든 샘플 (스테레오 사운드의 경우 2개, 5.1의 경우 6개 등)입니다.</p> -<p>The sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in Hz. The higher the sample rate, the better the sound quality.</p> +<p>샘플 레이트는 Hz로 측정되는, 1초에 재생될 이 샘플들 (또는 프레임들, 왜냐하면 한 프레임의 모든 샘플들이 같은 시간에 재생되므로) 의 수입니다. 샘플 레이트가 높을수록 음질이 더 좋습니다.</p> -<p>Let's look at a Mono and a Stereo audio buffer, each is one second long, and playing at 44100Hz:</p> +<p>모노와 스테레오 오디오 버퍼를 살펴봅시다, 각각 1초 길이고, 44100Hz로 재생됩니다:</p> <ul> - <li>The Mono buffer will have 44100 samples, and 44100 frames. The <code>length</code> property will be 44100.</li> - <li>The Stereo buffer will have 88200 samples, but still 44100 frames. The <code>length</code> property will still be 44100 since it's equal to the number of frames.</li> + <li>모노 버퍼는 44100 샘플과, 44100 프레임을 가질 것입니다. <code>length</code> 프로퍼티는 44100이 될 것입니다.</li> + <li>스테레오 버퍼는 88200 샘플을 가질 것이나, 여전히 44100 프레임입니다. <code>length</code> 프로퍼티는 프레임의 수와 동일하므로 여전히 44100일 것입니다.</li> </ul> -<p><img alt="A diagram showing several frames in an audio buffer in a long line, each one containing two samples, as the buffer has two channels, it is stereo." src="https://mdn.mozillademos.org/files/14801/sampleframe-english.png" style="height: 150px; width: 853px;"></p> +<p><img alt="긴 줄에서 오디오 버퍼의 몇몇 프레임을 보여주는 도표인데, 각각은 두 개의 샘플을 포함하고 있습니다. 버퍼가 두 개의 채널을 가지고 있으므로, 이것은 스테레오입니다." src="sampleframe-english.png"></p> -<p>When a buffer plays, you will hear the left most sample frame, and then the one right next to it, etc. In the case of stereo, you will hear both channels at the same time. Sample frames are very useful, because they are independent of the number of channels, and represent time, in a useful way for doing precise audio manipulation.</p> +<p>버퍼가 재생될 때, 여러분은 제일 왼쪽의 샘플 프레임을 들을 것이고, 그리고서 다음에 있는 제일 오른쪽의 샘플 프레임 등등을 들을 것입니다. 스테레오의 경우에, 여러분은 양 채널을 동시에 들을 것입니다. 샘플 프레임은 대단히 유용한데, 왜냐하면 샘플 프레임은 채널의 수에 독립적이고, 정밀한 오디오 조작을 함에 있어 유용한 방법으로 시간을 나타내기 때문입니다.</p> <div class="note"> -<p><strong>Note</strong>: To get a time in seconds from a frame count, simply divide the number of frames by the sample rate. To get a number of frames from a number of samples, simply divide by the channel count.</p> +<p><strong>노트</strong>: 프레임 카운트로부터 초로 시간을 얻기 위해서는, 프레임의 수를 샘플 레이트로 나누십시오. 샘플의 수로부터 프레임의 수를 얻기 위해서는, 채널 카운트로 나누십시오.</p> </div> -<p>Here's a couple of simple trivial examples:</p> +<p>두 개의 간단한 예제입니다:</p> <pre class="brush: js">var context = new AudioContext(); var buffer = context.createBuffer(2, 22050, 44100);</pre> <div class="note"> -<p><strong>Note</strong>: In <a href="https://en.wikipedia.org/wiki/Digital_audio" title="Digital audio">digital audio</a>, <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (alternately represented as <strong>44.1 kHz</strong>) is a common <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">sampling frequency</a>. Why 44.1kHz? <br> +<p><strong>노트</strong>: <a href="https://en.wikipedia.org/wiki/Digital_audio" title="Digital audio">디지털 오디오</a>에서, <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz">Hz</a></strong> (또한 <strong>44.1 kHz</strong>로 표현되어짐) 은 일반적인 <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">샘플링 주파수</a>입니다. 왜 44.1kHz일까요? <br> <br> - Firstly, because the <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">hearing range</a> of human ears is roughly 20 Hz to 20,000 Hz. Via the <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">Nyquist–Shannon sampling theorem</a>, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. Therefore, the sampling rate has to be greater than 40 kHz.<br> + 첫째로, 왜냐하면 인간의 <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">가청 범위</a>(hearing range)는 대략적으로 20 Hz에서 20,000 Hz이기 때문입니다. <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">표본화 정리</a>(Nyquist–Shannon sampling theorem)에 의하여, 샘플링 주파수는 반드시 재생하기를 원하는 최대 주파수의 2배보다 커야 합니다. 그러므로, 샘플링 레이트는 40 kHz보다 커야만 합니다.<br> <br> - Secondly, signals must be <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">low-pass filtered</a> before sampling, otherwise <a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a> occurs. While an ideal low-pass filter would perfectly pass frequencies below 20 kHz (without attenuating them) and perfectly cut off frequencies above 20 kHz, in practice a <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">transition band</a> is necessary, where frequencies are partly attenuated. The wider this transition band is, the easier and more economical it is to make an <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">anti-aliasing filter</a>. The 44.1 kHz sampling frequency allows for a 2.05 kHz transition band.</p> + 둘째로, 신호는 반드시 샘플링 전에 <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">저주파 통과 필터</a>(low-pass filter)를 거쳐야만 합니다, 그렇지 않으면 <a href="https://en.wikipedia.org/wiki/Aliasing">에일리어싱</a>(aliasing)이 발생합니다. 이상적인 저주파 통과 필터는 완벽히 20 kHz 아래의 주파수들을 (약화시키는 일 없이) 통과시키고 완벽히 20 kHz 위의 주파수들을 잘라낼 것이지만, 실제로는 <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">천이 대역</a>(transition band)이 필수적인데, 여기서 주파수들은 부분적으로 약화됩니다. 천이 대역이 넓을수록, <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">주파수 중복방지 필터</a>(anti-aliasing filter)를 만들기 쉽고 경제적입니다. 44.1 kHz 샘플링 주파수는 2.05 kHz 천이 대역을 감안합니다.</p> </div> -<p>If you use this call above, you will get a stereo buffer with two channels, that when played back on an AudioContext running at 44100Hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100Hz = 0.5 seconds.</p> +<p>만약 위의 이 호출을 사용한다면, 여러분은 44100Hz (아주 일반적입니다, 대부분의 보통 사운드 카드는 이 레이트에서 실행됩니다) 에서 실행되는 AudioContext에서 재생될 때 0.5초동안 지속될 두 개의 채널을 가진 스테레오 버퍼를 얻을 것입니다. (22050 프레임 / 44100Hz = 0.5초)</p> <pre class="brush: js">var context = new AudioContext(); var buffer = context.createBuffer(1, 22050, 22050);</pre> -<p>If you use this call, you will get a mono buffer with just one channel), that when played back on an AudioContext running at 44100Hz, will be automatically <em>resampled</em> to 44100Hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100Hz = 1 second.</p> +<p>만약 이 호출을 사용한다면, 여러분은 44100Hz에서 실행되는 AudioContext에서 재생될 때 자동적으로 44100Hz로 <em>리샘플</em>(resample)되고 1.0초동안 지속될 단지 하나의 채널을 가진 모노 버퍼를 얻을 것입니다. (44100 프레임 / 44100Hz = 1초)</p> <div class="note"> -<p><strong>Note</strong>: audio resampling is very similar to image resizing. Say you've got a 16 x 16 image, but you want it to fill a 32x32 area. You resize (or resample) it. The result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. Resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound.</p> +<p><strong>노트</strong>: 오디오 리샘플링은 이미지 리사이징과 몹시 유사합니다. 예를 들어 여러분이 16 x 16 이미지를 가지고 있지만 32 x 32 영역을 채우고 싶다고 가정해 봅시다. 당신은 리사이즈 (또는 리샘플) 합니다. 결과는 더 낮은 품질을 가지지만 (리사이징 알고리즘에 따라서, 흐릿하거나 각질 수 있습니다), 리사이즈된 이미지가 더 적은 공간을 차지한 채로 작동은 합니다. 리샘플된 오디오는 정확히 동일합니다: 여러분은 공간을 저장하지만, 실제로는 높은 주파수의 콘텐츠 또는 고음의 소리를 적절히 재생할 수 없을 것입니다.</p> </div> -<h3 id="Planar_versus_interleaved_buffers">Planar versus interleaved buffers</h3> +<h3 id="Planar_versus_interleaved_buffers">평면(planar) 대 인터리브(interleaved) 버퍼</h3> -<p>The Web Audio API uses a planar buffer format. The left and right channels are stored like this:</p> +<p>Web Audio API는 평면 버퍼 포맷을 사용합니다. 왼쪽과 오른쪽 채널은 다음과 같이 저장됩니다:</p> -<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)</pre> +<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (16 프레임의 버퍼에 대해)</pre> -<p>This is very common in audio processing: it makes it easy to process each channel independently.</p> +<p>이것은 오디오 프로세싱에서 아주 일반적입니다: 이것은 각 채널을 독립적으로 처리하기 쉽게 만들어줍니다.</p> -<p>The alternative is to use an interleaved buffer format:</p> +<p>대안은 인터리브 버퍼 포맷을 사용하는 것입니다:</p> -<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)</pre> +<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (16 프레임의 버퍼에 대해)</pre> -<p>This format is very common for storing and playing back audio without much processing, for example a decoded MP3 stream.<br> +<p>이 포맷은 많은 프로세싱 없이 오디오를 저장하고 재생하는 데 아주 일반적인데, 예를 들자면 디코드된 MP3 스트림이 있습니다.<br> <br> - The Web Audio API exposes <strong>only</strong> planar buffers, because it's made for processing. It works with planar, but converts the audio to interleaved when it is sent to the sound card for playback. Conversely, when an MP3 is decoded, it starts off in interleaved format, but is converted to planar for processing.</p> + Web Audio API는 <strong>오직</strong> 평면 버퍼만을 드러내는데, 왜냐하면 프로세싱을 위해 만들어졌기 때문입니다. 이것은 평면으로 동작하나, 오디오가 재생을 위해 사운드 카드에 전달되었을 때 인터리브로 전환합니다. 역으로, MP3가 디코드되었을 때, 이것은 인터리브 포맷으로 시작하나, 프로세싱을 위해 평면으로 전환됩니다.</p> -<h2 id="Audio_channels">Audio channels</h2> +<h2 id="Audio_channels">오디오 채널</h2> -<p>Different audio buffers contain different numbers of channels: from the more basic mono (only one channel) and stereo (left and right channels), to more complex sets like quad and 5.1, which have different sound samples contained in each channel, leading to a richer sound experience. The channels are usually represented by standard abbreviations detailed in the table below:</p> +<p>다른 오디오 버퍼는 다른 수의 채널을 포함합니다: 간단한 모노(오직 한 개의 채널)와 스테레오(왼쪽과 오른쪽 채널)에서부터, 각 채널에 포함된 다른 사운드 샘플을 가지고 있어 더욱 풍부한 소리 경험을 가능케 하는 quad와 5.1과 같은 더욱 복잡한 것들까지 있습니다. 채널들은 보통 아래의 테이블에 상세히 설명된 표준 약어에 의해 표현됩니다:</p> <table class="standard-table"> <tbody> @@ -147,34 +153,34 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> </tbody> </table> -<h3 id="Up-mixing_and_down-mixing">Up-mixing and down-mixing</h3> +<h3 id="Up-mixing_and_down-mixing">업믹싱(up-mixing)과 다운믹싱(down-mixing)</h3> -<p>When the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules. This can be somewhat controlled by setting the {{domxref("AudioNode.channelInterpretation")}} property to <code>speakers</code> or <code>discrete</code>:</p> +<p>채널의 수가 입력과 출력 사이에서 맞지 않을 때, 업 또는 다운 믹싱이 다음의 규칙에 따라 발생합니다. 이는 {{domxref("AudioNode.channelInterpretation")}} 프로퍼티를 <code>speakers</code> 또는 <code>discrete</code>로 설정함으로써 어느 정도 제어될 수 있습니다.</p> <table class="standard-table"> <thead> <tr> - <th scope="row">Interpretation</th> - <th scope="col">Input channels</th> - <th scope="col">Output channels</th> - <th scope="col">Mixing rules</th> + <th scope="row">해석</th> + <th scope="col">입력 채널</th> + <th scope="col">출력 채널</th> + <th scope="col">믹싱 규칙</th> </tr> </thead> <tbody> <tr> - <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th> + <th rowspan="13" scope="row"><code>스피커</code></th> <td><code>1</code> <em>(Mono)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Up-mix from mono to stereo</em>.<br> - The <code>M</code> input channel is used for both output channels (<code>L</code> and <code>R</code>).<br> + <td><em>모노에서 스테레오로 업믹스</em><br> + <code>M</code> 입력 채널이 양 출력 채널 (<code>L</code>와 <code>R</code>)에 대해 사용됩니다.<br> <code>output.L = input.M<br> output.R = input.M</code></td> </tr> <tr> <td><code>1</code> <em>(Mono)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Up-mix from mono to quad.</em><br> - The <code>M</code> input channel is used for non-surround output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br> + <td><em>모노에서 quad로 업믹스</em><br> + <code>M</code> 입력 채널이 비 서라운드(non-surround) 출력 채널에 대해 사용됩니다 (<code>L</code> 과 <code>R</code>). 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>)은 작동하지 않습니다(silent).<br> <code>output.L = input.M<br> output.R = input.M<br> output.SL = 0<br> @@ -183,8 +189,8 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>1</code> <em>(Mono)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from mono to 5.1.</em><br> - The <code>M</code> input channel is used for the center output channel (<code>C</code>). All the others (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, and <code>SR</code>) are silent.<br> + <td><em>모노에서 5.1로 업믹스</em><br> + <code>M</code> 입력 채널이 센터 출력 채널 (<code>C</code>)에 대해 사용됩니다. 모든 다른 채널들(<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, 그리고 <code>SR</code>)은 작동하지 않습니다.<br> <code>output.L = 0<br> output.R = 0</code><br> <code>output.C = input.M<br> @@ -195,15 +201,15 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from stereo to mono</em>.<br> - Both input channels (<code>L</code> and <code>R</code>) are equally combined to produce the unique output channel (<code>M</code>).<br> + <td><em>스테레오에서 모노로 다운믹스</em><br> + 양 출력 채널 (<code>L</code> 과 <code>R</code>)은 고유한 출력 채널 (<code>M</code>)을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.M = 0.5 * (input.L + input.R)</code></td> </tr> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Up-mix from stereo to quad.</em><br> - The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br> + <td><em>스테레오에서 quad로 업믹스</em><br> + <code>L</code> 과 <code>R </code> 입력 채널이 각자의 비 서라운드 출력 채널 (<code>L</code> 과 <code>R</code>)에 대해 사용됩니다. 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>) 은 작동하지 않습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.SL = 0<br> @@ -212,8 +218,8 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from stereo to 5.1.</em><br> - The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>), as well as the center (<code>C</code>) and subwoofer (<code>LFE</code>) channels, are left silent.<br> + <td><em>스테레오에서 5.1로 업믹스</em><br> + <code>L</code> 과 <code>R </code> 입력 채널이 각자의 비 서라운드 출력 채널 (<code>L</code> 과 <code>R</code>) 에 대해 사용됩니다. 서라운드 출력 채널 (<code>SL</code> 과 <code>SR</code>), 그리고 센터 (<code>C</code>) 와 서브우퍼 (<code>LFE</code>) 채널은 작동하지 않습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.C = 0<br> @@ -224,23 +230,23 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from quad to mono</em>.<br> - All four input channels (<code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code>) are equally combined to produce the unique output channel (<code>M</code>).<br> + <td><em>quad에서 모노로 다운믹스</em><br> + 모든 네 개의 입력 채널 (<code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code>) 이 고유한 출력 채널 (<code>M</code>)을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td> </tr> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Down-mix from quad to stereo</em>.<br> - Both left input channels (<code>L</code> and <code>SL</code>) are equally combined to produce the unique left output channel (<code>L</code>). And similarly, both right input channels (<code>R</code> and <code>SR</code>) are equally combined to produce the unique right output channel (<code>R</code>).<br> + <td><em>quad에서 스테레오로 다운믹스</em><br> + 왼쪽 입력 채널 (<code>L</code> 과 <code>SL</code>) 둘 다 고유한 왼쪽 출력 채널 (<code>L</code>)을 생산하기 위해 동등하게 결합됩니다. 그리고 유사하게, 오른쪽 입력 채널 (<code>R</code> 과 <code>SR</code>) 둘 다 고유한 오른쪽 출력 채널을 생산하기 위해 동등하게 결합됩니다.<br> <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br> <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td> </tr> <tr> <td><code>4</code> <em>(Quad)</em></td> <td><code>6</code> <em>(5.1)</em></td> - <td><em>Up-mix from quad to 5.1.</em><br> - The <code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code> input channels are used for their respective output channels (<code>L</code> and <code>R</code>). Center (<code>C</code>) and subwoofer (<code>LFE</code>) channels are left silent.<br> + <td><em>quad에서 5.1로 업믹스</em><br> + <code>L</code>, <code>R</code>, <code>SL</code>, 그리고 <code>SR</code> 입력 채널이 각각의 출력 채널 (<code>L</code> 과 <code>R</code>)에 대해 사용됩니다. 센터 (<code>C</code>)와 서브우퍼 (<code>LFE</code>) 채널은 작동하지 않은 채로 남아있습니다.<br> <code>output.L = input.L<br> output.R = input.R<br> output.C = 0<br> @@ -251,104 +257,99 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>Down-mix from 5.1 to mono.</em><br> - The left (<code>L</code> and <code>SL</code>), right (<code>R</code> and <code>SR</code>) and central channels are all mixed together. The surround channels are slightly attenuated and the regular lateral channels are power-compensated to make them count as a single channel by multiplying by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 모노로 다운믹스</em><br> + 왼쪽 (<code>L</code> 과 <code>SL</code>), 오른쪽 (<code>R</code> 과 <code>SR</code>) 그리고 중앙 채널이 모두 함께 믹스됩니다. 서라운드 채널은 약간 약화되고 regular lateral 채널은 하나의 채널로 카운트되도록 <code>√2/2</code>를 곱함으로써 파워가 보정(power-compensated)됩니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td> </tr> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>2</code> <em>(Stereo)</em></td> - <td><em>Down-mix from 5.1 to stereo.</em><br> - The central channel (<code>C</code>) is summed with each lateral surround channel (<code>SL</code> or <code>SR</code>) and mixed to each lateral channel. As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 스테레오로 다운믹스</em><br> + 중앙 채널 (<code>C</code>)이 각각의 측면 서라운드 채널(<code>SL</code> 또는 <code>SR</code>)과 합계되고 각각의 측면 채널로 믹스됩니다. 두 개의 채널로 다운믹스되었으므로, 더 낮은 파워로 믹스되었습니다: 각각의 경우에 <code>√2/2</code>가 곱해집니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br> output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td> </tr> <tr> <td><code>6</code> <em>(5.1)</em></td> <td><code>4</code> <em>(Quad)</em></td> - <td><em>Down-mix from 5.1 to quad.</em><br> - The central (<code>C</code>) is mixed with the lateral non-surround channels (<code>L</code> and <code>R</code>). As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The surround channels are passed unchanged. The subwoofer (<code>LFE</code>) channel is lost.<br> + <td><em>5.1에서 quad로 다운믹스</em><br> + 중앙 (<code>C</code>) 채널이 측면의 비 서라운드 채널 (<code>L</code> 과 <code>R</code>)과 믹스됩니다. 두 채널로 다운믹스되었으므로, 더 낮은 파워로 믹스되었습니다: 각각의 경우에 <code>√2/2</code>가 곱해집니다. 서라운드 채널은 변경되지 않은 채로 전달됩니다. 서브우퍼 (<code>LFE</code>) 채널은 손실됩니다.<br> <code>output.L = input.L + 0.7071 * input.C<br> output.R = input.R + 0.7071 * input.C<br> - <code>output.SL = input.SL<br> - output.SR = input.SR</code></code></td> + output.SL = input.SL<br> + output.SR = input.SR</code></td> </tr> <tr> - <td colspan="2" rowspan="1">Other, non-standard layouts</td> - <td>Non-standard channel layouts are handled as if <code>channelInterpretation</code> is set to <code>discrete</code>.<br> - The specification explicitly allows the future definition of new speaker layouts. This fallback is therefore not future proof as the behavior of the browsers for a specific number of channels may change in the future.</td> + <td colspan="2">기타 비표준 레이아웃</td> + <td>비표준 채널 레이아웃은 <code>channelInterpretation</code>이 <code>discrete</code>로 설정된 것처럼 다뤄집니다.<br> + 사양(specification)은 분명히 새로운 스피커 레이아웃의 미래의 정의를 허용합니다. 특정한 수의 채널에 대한 브라우저의 행동이 미래에 달라질지도 모르므로 이 대비책은 그러므로 미래에도 사용할 수 있는 (future proof) 것이 아닙니다.</td> </tr> <tr> - <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th> - <td rowspan="1">any (<code>x</code>)</td> - <td rowspan="1">any (<code>y</code>) where <code>x<y</code></td> - <td><em>Up-mix discrete channels.</em><br> - Fill each output channel with its input counterpart, that is the input channel with the same index. Channels with no corresponding input channels are left silent.</td> + <th rowspan="2" scope="row"><code>discrete</code></th> + <td>any (<code>x</code>)</td> + <td><code>x<y</code>인 any (<code>y</code>)</td> + <td><em>discrete 채널의 업믹스</em><br> + 대응하는 입력 채널을 가지고 있는 각각의 출력 채널을 채웁니다, 즉 같은 인덱스를 가진 입력 채널입니다. 해당하는 입력 채널이 없는 채널은 작동하지 않은 채로 남아있습니다.</td> </tr> <tr> - <td rowspan="1">any (<code>x</code>)</td> - <td rowspan="1">any (<code>y</code>) where <code>x>y</code></td> - <td><em>Down-mix discrete channels.</em><br> - Fill each output channel with its input counterpart, that is the input channel with the same index. Input channels with no corresponding output channels are dropped.</td> + <td>any (<code>x</code>)</td> + <td><code>x>y</code>인 any (<code>y</code>)</td> + <td><em>discrete 채널의 다운믹스</em><br> + 대응하는 입력 채널을 가지고 있는 각각의 출력 채널을 채웁니다, 즉 같은 인덱스를 가진 입력 채널입니다. 해당하는 출력 채널을 가지고 있지 않은 입력 채널은 탈락됩니다.</td> </tr> </tbody> </table> -<h2 id="Visualizations">Visualizations</h2> +<h2 id="Visualizations">시각화</h2> -<p>In general, audio visualizations are achieved by accessing an ouput of audio data over time, usually gain or frequency data, and then using a graphical technology to turn that into a visual output, such as a graph. The Web Audio API has an {{domxref("AnalyserNode")}} available that doesn't alter the audio signal passing through it. Instead it outputs audio data that can be passed to a visualization technology such as {{htmlelement("canvas")}}.</p> +<p>일반적으로, 오디오 시각화는 보통 진폭 이득(gain) 또는 주파수 데이터인, 시간에 대한 오디오 데이터의 출력에 접근함으로써, 그리고서 그것을 그래프와 같이 시각적 결과로 바꾸기 위해 그래픽 기술을 사용함으로써 성취됩니다. Web Audio API는 통과하는 오디오 신호를 변경하지 않는 {{domxref("AnalyserNode")}}를 가지고 있습니다. 대신 이것은 {{htmlelement("canvas")}}와 같은 시각화 기술로 전달될 수 있는 오디오 데이터를 출력합니다.</p> -<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12521/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p> +<p><img alt="오디오 스트림을 수정하는 일 없이, FFT를 사용하여, 노드가 주파수와 그것에 관련된 시간 영역(time-domain) 데이터를 얻을 수 있게 허용합니다." src="fttaudiodata_en.svg"></p> -<p>You can grab data using the following methods:</p> +<p>여러분은 다음의 메서드들을 사용해 데이터를 얻을 수 있습니다:</p> <dl> <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt> - <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd> -</dl> - -<dl> + <dd>현재 주파수 데이터를 이것 안으로 전달된 {{jsxref("Float32Array")}} 배열 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt> - <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd> -</dl> - -<dl> + <dd>현재 주파수 데이터를 이것 안으로 전달된 {{jsxref("Uint8Array")}} (unsigned byte array) 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt> - <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd> + <dd>현재 파형, 또는 시간 영역(time-domain), 데이터를 이것 안으로 전달된 {{jsxref("Float32Array")}} 안으로 복사합니다.</dd> <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt> - <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd> + <dd>현재 파형, 또는 시간 영역, 데이터를 이것 안으로 전달된 {{jsxref("Uint8Array")}} (unsigned byte array) 안으로 복사합니다.</dd> </dl> <div class="note"> -<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> article.</p> +<p><strong>노트</strong>: 더 많은 정보를 보시려면, <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API로 시각화</a> 문서를 참조하세요.</p> </div> -<h2 id="Spatialisations">Spatialisations</h2> +<h2 id="Spatialisations">공간화</h2> <div> -<p>An audio spatialisation (handled by the {{domxref("PannerNode")}} and {{domxref("AudioListener")}} nodes in the Web Audio API) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.</p> +<p>(Web Audio API의 {{domxref("PannerNode")}} 와 {{domxref("AudioListener")}} 노드에 의해 다뤄지는) 오디오 공간화는 공간의 어떤 점에서의 오디오 신호의 위치와 행동을 나타내고(model), 청자(listener)가 그 오디오를 들을 수 있게 허용합니다.</p> -<p>The panner's position is described with right-hand Cartesian coordinates; its movement using a velocity vector, necessary for creating Doppler effects, and its directionality using a directionality cone.The cone can be very large, e.g. for omnidirectional sources.</p> +<p>panner의 위치는 right-hand 데카르트 좌표 (Cartesian coordinate)로 기술됩니다; 이것의 움직임은 도플러 효과를 생성하는데 필수적인 속도 벡터를 사용하고, 이것의 방향성(directionality)은 방향성 원뿔을 사용합니다. 이 원뿔은 아주 클 수 있는데, 예를 들자면 전방향의 소스(omnidirectional source)에 대한 것일 수 있습니다.</p> </div> -<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12511/pannernode_en.svg" style="height: 340px; width: 799px;"></p> +<p><img alt="PannerNode는 공간 위치와 속도와 주어진 신호에 대한 방향성을 제공합니다." src="pannernode_en.svg"></p> <div> -<p>The listener's position is described using right-hand Cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front. These respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another.</p> +<p>청자의 위치는 right-hand 데카르트 좌표를 사용해 기술됩니다; 이것의 움직임은 속도 벡터를 사용하고 청자의 머리가 향하고 있는 방향은 위와 앞의 두 개의 방향 벡터를 사용합니다. 이것들은 각각 청자의 머리의 위의 방향과, 청자의 코가 가리키고 있는 방향을 정의하며, 서로 직각에 있습니다.</p> </div> -<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12513/listener.svg" style="height: 249px; width: 720px;"></p> +<p><img alt="AudioListener의 위와 앞의 벡터 위치를 보고 있는데, 위와 앞 벡터는 서로 90°에 있습니다." src="webaudiolistenerreduced.png"></p> <div class="note"> -<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p> +<p><strong>노트</strong>: 더 많은 정보를 보시려면, <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio 공간화 기본</a> 문서를 참조하세요.</p> </div> -<h2 id="Fan-in_and_Fan-out">Fan-in and Fan-out</h2> +<h2 id="Fan-in_and_Fan-out">팬 인(fan-in)과 팬 아웃(fan-out)</h2> -<p>In audio terms, <strong>fan-in</strong> describes the process by which a {{domxref("ChannelMergerNode")}} takes a series of mono input sources and outputs a single multi-channel signal:</p> +<p> +오디오 용어에서, <strong>팬 인</strong>은 {{domxref("ChannelMergerNode")}}가 일련의 모노 입력 소스를 취하고 단일의 다수 채널 신호를 출력하는 과정을 설명합니다:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12517/fanin.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanin.svg"></p> -<p><strong>Fan-out</strong> describes the opposite process, whereby a {{domxref("ChannelSplitterNode")}} takes a multi-channel input source and outputs multiple mono output signals:</p> +<p><strong>팬 아웃</strong>은 반대 과정을 설명하는데, {{domxref("ChannelSplitterNode")}}가 다수 채널 입력 소스를 취하고 다수의 모노 출력 신호를 출력합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12515/fanout.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanout.svg"></p> diff --git a/files/ko/web/api/web_audio_api/best_practices/index.html b/files/ko/web/api/web_audio_api/best_practices/index.html new file mode 100644 index 0000000000..784b3f1f3c --- /dev/null +++ b/files/ko/web/api/web_audio_api/best_practices/index.html @@ -0,0 +1,97 @@ +--- +title: Web Audio API best practices +slug: Web/API/Web_Audio_API/Best_practices +tags: + - Audio + - Best practices + - Guide + - Web Audio API +--- +<div>{{apiref("Web Audio API")}}</div> + +<p class="summary">There's no strict right or wrong way when writing creative code. As long as you consider security, performance, and accessibility, you can adapt to your own style. In this article, we'll share a number of <em>best practices</em> — guidelines, tips, and tricks for working with the Web Audio API.</p> + +<h2 id="Loading_soundsfiles">Loading sounds/files</h2> + +<p>There are four main ways to load sound with the Web Audio API and it can be a little confusing as to which one you should use.</p> + +<p>When working with files, you are looking at either the grabbing the file from an {{domxref("HTMLMediaElement")}} (i.e. an {{htmlelement("audio")}} or {{htmlelement("video")}} element), or you're looking to fetch the file and decode it into a buffer. Both are legitimate ways of working, however, it's more common to use the former when you are working with full-length tracks, and the latter when working with shorter, more sample-like tracks.</p> + +<p>Media elements have streaming support out of the box. The audio will start playing when the browser determines it can load the rest of the file before playing finishes. You can see an example of how to use this with the Web Audio API in the <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API tutorial</a>.</p> + +<p>You will, however, have more control if you use a buffer node. You have to request the file and wait for it to load (<a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques#Dial_up_%E2%80%94_loading_a_sound_sample">this section of our advanced article</a> shows a good way to do it), but then you have access to the data directly, which means more precision, and more precise manipulation.</p> + +<p>If you're looking to work with audio from the user's camera or microphone you can access it via the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Stream API</a> and the {{domxref("MediaStreamAudioSourceNode")}} interface. This is good for WebRTC and situations where you might want to record or possibly analyze audio.</p> + +<p>The last way is to generate your own sound, which can be done with either an {{domxref("OscillatorNode")}} or by creating a buffer and populating it with your own data. Check out the <a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">tutorial here for creating your own instrument</a> for information on creating sounds with oscillators and buffers.</p> + +<h2 id="Cross_browser_legacy_support">Cross browser & legacy support</h2> + +<p>The Web Audio API specification is constantly evolving and like most things on the web, there are some issues with it working consistently across browsers. Here we'll look at options for getting around cross-browser problems.</p> + +<p>There's the <a href="https://github.com/chrisguttandin/standardized-audio-context"><code>standardised-audio-context</code></a> npm package, which creates API functionality consistently across browsers, filling holes as they are found. It's constantly in development and endeavours to keep up with the current specification.</p> + +<p>There is also the option of libraries, of which there are a few depending on your use case. For a good all-rounder, <a href="https://howlerjs.com/">howler.js</a> is a good choice. It has cross-browser support and, provides a useful subset of functionality. Although it doesn't harness the full gamut of filters and other effects the Web Audio API comes with, you can do most of what you'd want to do.</p> + +<p>If you are looking for sound creation or a more instrument-based option, <a href="https://tonejs.github.io/">tone.js</a> is a great library. It provides advanced scheduling capabilities, synths, and effects, and intuitive musical abstractions built on top of the Web Audio API.</p> + +<p><a href="https://github.com/bbc/r-audio">R-audio</a>, from the <a href="https://medium.com/bbc-design-engineering/r-audio-declarative-reactive-and-flexible-web-audio-graphs-in-react-102c44a1c69c">BBC's Research & Development department</a>, is a library of React components aiming to provide a "more intuitive, declarative interface to Web Audio". If you're used to writing JSX it might be worth looking at.</p> + +<h2 id="Autoplay_policy">Autoplay policy</h2> + +<p>Browsers have started to implement an autoplay policy, which in general can be summed up as:</p> + +<blockquote> +<p>"Create or resume context from inside a user gesture".</p> +</blockquote> + +<p>But what does that mean in practice? A user gesture has been interpreted to mean a user-initiated event, normally a <code>click</code> event. Browser vendors decided that Web Audio contexts should not be allowed to automatically play audio; they should instead be started by a user. This is because autoplaying audio can be really annoying and obtrusive. But how do we handle this?</p> + +<p>When you create an audio context (either offline or online) it is created with a <code>state</code>, which can be <code>suspended</code>, <code>running</code>, or <code>closed</code>.</p> + +<p>When working with an {{domxref("AudioContext")}}, if you create the audio context from inside a <code>click</code> event the state should automatically be set to <code>running</code>. Here is a simple example of creating the context from inside a <code>click</code> event:</p> + +<pre class="brush: js">const button = document.querySelector('button'); +button.addEventListener('click', function() { + const audioCtx = new AudioContext(); +}, false); +</pre> + +<p>If however, you create the context outside of a user gesture, its state will be set to <code>suspended</code> and it will need to be started after user interaction. We can use the same click event example here, test for the state of the context and start it, if it is suspended, using the <a href="/en-US/docs/Web/API/BaseAudioContext/resume"><code>resume()</code></a> method.</p> + +<pre class="brush: js">const audioCtx = new AudioContext(); +const button = document.querySelector('button'); + +button.addEventListener('click', function() { + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } +}, false); +</pre> + +<p>You might instead be working with an {{domxref("OfflineAudioContext")}}, in which case you can resume the suspended audio context with the <a href="/en-US/docs/Web/API/OfflineAudioContext/startRendering"><code>startRendering()</code></a> method.</p> + +<h2 id="User_control">User control</h2> + +<p>If your website or application contains sound, you should allow the user control over it, otherwise again, it will become annoying. This can be achieved by play/stop and volume/mute controls. The <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> tutorial goes over how to do this.</p> + +<p>If you have buttons that switch audio on and off, using the ARIA <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role"><code>role="switch"</code></a> attribute on them is a good option for signalling to assistive technology what the button's exact purpose is, and therefore making the app more accessible. There's a <a href="https://codepen.io/Wilto/pen/ZoGoQm?editors=1100">demo of how to use it here</a>.</p> + +<p>As you work with a lot of changing values within the Web Audio API and will want to provide users with control over these, the <a href="/en-US/docs/Web/HTML/Element/input/range"><code>range input</code></a> is often a good choice of control to use. It's a good option as you can set minimum and maximum values, as well as increments with the <a href="/en-US/docs/Web/HTML/Element/input#attr-step"><code>step</code></a> attribute.</p> + +<h2 id="Setting_AudioParam_values">Setting AudioParam values</h2> + +<p>There are two ways to manipulate {{domxref("AudioNode")}} values, which are themselves objects of type {{domxref("AudioParam")}} interface. The first is to set the value directly via the property. So for instance if we want to change the <code>gain</code> value of a {{domxref("GainNode")}} we would do so thus:</p> + +<pre class="brush: js">gainNode.gain.value = 0.5; +</pre> + +<p>This will set our volume to half. However, if you're using any of the <code>AudioParam</code>'s defined methods to set these values, they will take precedence over the above property setting. If for example, you want the <code>gain</code> value to be raised to 1 in 2 seconds time, you can do this:</p> + +<pre class="brush: js">gainNode.gain.setValueAtTime(1, audioCtx.currentTime + 2); +</pre> + +<p>It will override the previous example (as it should), even if it were to come later in your code.</p> + +<p>Bearing this in mind, if your website or application requires timing and scheduling, it's best to stick with the {{domxref("AudioParam")}} methods for setting values. If you're sure it doesn't, setting it with the <code>value</code> property is fine.</p> diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg new file mode 100644 index 0000000000..0490cddbe5 --- /dev/null +++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 7 580 346" width="580pt" height="346pt"><defs><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="a" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#000"><path d="M4.8 0 0-1.8v3.6z" fill="currentColor" stroke="currentColor"/></marker></defs><g fill="none"><path fill="#867fff" d="M207 99h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 99h180v45H207z"/><text transform="translate(212 113)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="9.388" y="14" textLength="151.225">ConstantSourceNode</tspan></text><path fill="#867fff" d="M9 216h180v45H9z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9 216h180v45H9z"/><text transform="translate(14 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M405 216h180v45H405z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M405 216h180v45H405z"/><text transform="translate(410 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M207 216h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 216h180v45H207z"/><text transform="translate(212 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="17.789" y="14" textLength="134.422">StereoPannerNode</tspan></text><path d="M252 144v27H99v32.1M297 144v59.1m45-59.1v27h153v32.1" marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><text transform="translate(55.876 192.447)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><text transform="translate(258.64 192.854)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".398" y="14" textLength="25.204">pan</tspan></text><text transform="translate(504.37 193.347)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M297 54v32.1"/><path d="M243 9h144l-36 45H207z" fill="#fff"/><path d="M243 9h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 22)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="17.734" y="15" textLength="52.93">input = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="70.664" y="15" textLength="9.602">N</tspan></text><path d="M243 306h144l-36 45H207z" fill="#fff"/><path d="M243 306h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m296.5 261 .357 32.101"/><path d="M441 306h144l-36 45H405z" fill="#fff"/><path d="M441 306h144l-36 45H405z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(446 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M495 261v32.1"/><path d="M45 306h144l-36 45H9z" fill="#fff"/><path d="M45 306h144l-36 45H9z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(50 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M99 261v32.1"/></g></svg>
\ No newline at end of file diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html new file mode 100644 index 0000000000..5fdd188213 --- /dev/null +++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html @@ -0,0 +1,284 @@ +--- +title: Controlling multiple parameters with ConstantSourceNode +slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode +tags: + - Audio + - Example + - Guide + - Intermediate + - Media + - Tutorial + - Web Audio + - Web Audio API +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p><span class="seoSummary">This article demonstrates how to use a {{domxref("ConstantSourceNode")}} to link multiple parameters together so they share the same value, which can be changed by setting the value of the {{domxref("ConstantSourceNode.offset")}} parameter.</span></p> + +<p>You may have times when you want to have multiple audio parameters be linked so they share the same value even while being changed in some way. For example, perhaps you have a set of oscillators, and two of them need to share the same, configurable volume, or you have a filter that's been applied to certain inputs but not to all of them. You could use a loop and change the value of each affected {{domxref("AudioParam")}} one at a time, but there are two drawbacks to doing it that way: first, that's extra code that, as you're about to see, you don't have to write; and second, that loop uses valuable CPU time on your thread (likely the main thread), and there's a way to offload all that work to the audio rendering thread, which is optimized for this kind of work and may run at a more appropriate priority level than your code.</p> + +<p>The solution is simple, and it involves using an audio node type which, at first glance, doesn't look all that useful: {{domxref("ConstantSourceNode")}}.</p> + +<h2 id="The_technique">The technique</h2> + +<p>This is actually a really easy way to do something that sounds like it might be hard to do. You need to create a {{domxref("ConstantSourceNode")}} and connect it to all of the {{domxref("AudioParam")}}s whose values should be linked to always match each other. Since <code>ConstantSourceNode</code>'s {{domxref("ConstantSourceNode.offset", "offset")}} value is sent straight through to all of its outputs, it acts as a splitter for that value, sending it to each connected parameter.</p> + +<p>The diagram below shows how this works; an input value, <code>N</code>, is set as the value of the {{domxref("ConstantSourceNode.offset")}} property. The <code>ConstantSourceNode</code> can have as many outputs as necessary; in this case, we've connected it to three nodes: two {{domxref("GainNode")}}s and a {{domxref("StereoPannerNode")}}. So <code>N</code> becomes the value of the specified parameter ({{domxref("GainNode.gain", "gain")}} for the {{domxref("GainNode")}}s and pan for the {{domxref("StereoPannerNode")}}.</p> + +<p><img alt="Dagram in SVG showing how ConstantSourceNode can be used to split an input parameter to share it with multiple nodes." src="customsourcenode-as-splitter.svg"></p> + +<p>As a result, every time you change <code>N</code> (the value of the input {{domxref("AudioParam")}}, the values of the two <code>GainNode</code>s' <code>gain</code> properties and the value of the <code>StereoPannerNode</code>'s <code>pan</code> propertry are all set to <code>N</code> as well.</p> + +<h2 id="Example">Example</h2> + +<p>Let's take a look at this technique in action. In this simple example, we create three {{domxref("OscillatorNode")}}s. Two of them have adjustable gain, controlled using a shared input control. The other oscillator has a fixed volume.</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML content for this example is primarily a button to toggle the oscillator tones on and off and an {{HTMLElement("input")}} element of type <code>range</code> to control the volume of two of the three oscillators.</p> + +<pre class="brush: html"><div class="controls"> + <div class="left"> + <div id="playButton" class="button"> + ▶️ + </div> + </div> + <div class="right"> + <span>Volume: </span> + <input type="range" min="0.0" max="1.0" step="0.01" + value="0.8" name="volume" id="volumeControl"> + </div> +</div> + +<p>Use the button above to start and stop the tones, and the volume control to +change the volume of the notes E and G in the chord.</p></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.controls { + width: 400px; + position: relative; + vertical-align: middle; + height: 44px; +} + +.button { + font-size: 32px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -o-user-select: none; +} + +.right { + width: 50%; + font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif; + position: absolute; + right: 0; + display: table-cell; + vertical-align: middle; +} + +.right span { + vertical-align: middle; +} + +.right input { + vertical-align: baseline; +} + +.left { + width: 50%; + position: absolute; + left: 0; + display: table-cell; + vertical-align: middle; +} + +.left span, .left input { + vertical-align: middle; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Now let's take a look at the JavaScript code, a piece at a time.</p> + +<h4 id="Setting_up">Setting up</h4> + +<p>Let's start by looking at the global variable initialization.</p> + +<pre class="brush: js">let context = null; + +let playButton = null; +let volumeControl = null; + +let oscNode1 = null; +let oscNode2 = null; +let oscNode3 = null; +let constantNode = null; +let gainNode1 = null; +let gainNode2 = null; +let gainNode3 = null; + +let playing = false;</pre> + +<p>These variables are:</p> + +<dl> + <dt><code>context</code></dt> + <dd>The {{domxref("AudioContext")}} in which all the audio nodes live.</dd> + <dt><code>playButton</code> and <code>volumeControl</code></dt> + <dd>References to the play button and volume control elements.</dd> + <dt><code>oscNode1</code>, <code>oscNode2</code>, and <code>oscNode3</code></dt> + <dd>The three {{domxref("OscillatorNode")}}s used to generate the chord.</dd> + <dt><code>gainNode1</code>, <code>gainNode2</code>, and <code>gainNode3</code></dt> + <dd>The three {{domxref("GainNode")}} instances which provide the volume levels for each of the three oscillators. <code>gainNode2</code> and <code>gainNode3</code> will be linked together to have the same, adjustable, value using the {{domxref("ConstantSourceNode")}}.</dd> + <dt><code>constantNode</code></dt> + <dd>The {{domxref("ConstantSourceNode")}} used to control the values of <code>gainNode2</code> and <code>gainNode3</code> together.</dd> + <dt><code>playing</code></dt> + <dd>A {{jsxref("Boolean")}} that we'll use to keep track of whether or not we're currently playing the tones.</dd> +</dl> + +<p>Now let's look at the <code>setup()</code> function, which is our handler for the window's {{event("load")}} event; it handles all the initialization tasks that require the DOM to be in place.</p> + +<pre class="brush: js">function setup() { + context = new (window.AudioContext || window.webkitAudioContext)(); + + playButton = document.querySelector("#playButton"); + volumeControl = document.querySelector("#volumeControl"); + + playButton.addEventListener("click", togglePlay, false); + volumeControl.addEventListener("input", changeVolume, false); + + gainNode1 = context.createGain(); + gainNode1.gain.value = 0.5; + + gainNode2 = context.createGain(); + gainNode3 = context.createGain(); + gainNode2.gain.value = gainNode1.gain.value; + gainNode3.gain.value = gainNode1.gain.value; + volumeControl.value = gainNode1.gain.value; + + constantNode = context.createConstantSource(); + constantNode.connect(gainNode2.gain); + constantNode.connect(gainNode3.gain); + constantNode.start(); + + gainNode1.connect(context.destination); + gainNode2.connect(context.destination); + gainNode3.connect(context.destination); +} + +window.addEventListener("load", setup, false); +</pre> + +<p>First, we get access to the window's {{domxref("AudioContext")}}, stashing the reference in <code>context</code>. Then we get references to the control widgets, setting <code>playButton</code> to reference the play button and <code>volumeControl</code> to reference the slider control that the user will use to adjust the gain on the linked pair of oscillators.</p> + +<p>Then we assign a handler for the play button's {{event("click")}} event (see {{anch("Toggling the oscillators on and off")}} for more on the <code>togglePlay()</code> method), and for the volume slider's {{event("input")}} event (see {{anch("Controlling the linked oscillators")}} to see the very short <code>changeVolume()</code> method).</p> + +<p>Next, the {{domxref("GainNode")}} <code>gainNode1</code> is created to handle the volume for the non-linked oscillator (<code>oscNode1</code>). We set that gain to 0.5. We also create <code>gainNode2</code> and <code>gainNode3</code>, setting their values to match <code>gainNode1</code>, then set the value of the volume slider to the same value, so it is synchronized with the gain level it controls.</p> + +<p>Once all the gain nodes are created, we create the {{domxref("ConstantSourceNode")}}, <code>constantNode</code>. We connect its output to the <code>gain</code> {{domxref("AudioParam")}} on both <code>gainNode2</code> and <code>gainNode3</code>, and we start the constant node running by calling its {{domxref("AudioScheduledSourceNode/start", "start()")}} method; now it's sending the value 0.5 to the two gain nodes' values, and any change to {{domxref("ConstantSourceNode.offset", "constantNode.offset")}} will automatically set the gain of both <code>gainNode2</code> and <code>gainNode3</code> (affecting their audio inputs as expected).</p> + +<p>Finally, we connect all the gain nodes to the {{domxref("AudioContext")}}'s {{domxref("BaseAudioContext/destination", "destination")}}, so that any sound delivered to the gain nodes will reach the output, whether that output be speakers, headphones, a recording stream, or any other destination type.</p> + +<p>After setting the window's {{event("load")}} event handler to be the <code>setup()</code> function, the stage is set. Let's see how the action plays out.</p> + +<h4 id="Toggling_the_oscillators_on_and_off">Toggling the oscillators on and off</h4> + +<p>Because {{domxref("OscillatorNode")}} doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is clicked again to toggle them back on. Let's look at the code.</p> + +<pre class="brush: js">function togglePlay(event) { + if (playing) { + playButton.textContent = "▶️"; + stopOscillators(); + } else { + playButton.textContent = "⏸"; + startOscillators(); + } +}</pre> + +<p>If the <code>playing</code> variable indicates we're already playing the oscillators, we change the <code>playButton</code>'s content to be the Unicode character "right-pointing triangle" (▶️) and call <code>stopOscillators()</code> to shut down the oscillators. See {{anch("Stopping the oscillators")}} below for that code.</p> + +<p>If <code>playing</code> is false, indicating that we're currently paused, we change the play button's content to be the Unicode character "pause symbol" (⏸) and call <code>startOscillators()</code> to start the oscillators playing their tones. That code is covered under {{anch("Starting the oscillators")}} below.</p> + +<h4 id="Controlling_the_linked_oscillators">Controlling the linked oscillators</h4> + +<p>The <code>changeVolume()</code> function—the event handler for the slider control for the gain on the linked oscillator pair—looks like this:</p> + +<pre class="brush: js">function changeVolume(event) { + constantNode.offset.value = volumeControl.value; +}</pre> + +<p>That simple function controls the gain on both nodes. All we have to do is set the value of the {{domxref("ConstantSourceNode")}}'s {{domxref("ConstantSourceNode.offset", "offset")}} parameter. That value becomes the node's constant output value, which is fed into all of its outputs, which are, as set above, <code>gainNode2</code> and <code>gainNode3</code>.</p> + +<p>While this is an extremely simple example, imagine having a 32 oscillator synthesizer with multiple linked parameters in play across a number of patched nodes. Being able to shorten the number of operations to adjust them all will prove invaluable for code size and performance both.</p> + +<h4 id="Starting_the_oscillators">Starting the oscillators</h4> + +<p>When the user clicks the play/pause toggle button while the oscillators aren't playing, the <code>startOscillators()</code> function gets called.</p> + +<pre class="brush: js">function startOscillators() { + oscNode1 = context.createOscillator(); + oscNode1.type = "sine"; + oscNode1.frequency.value = 261.625565300598634; // middle C + oscNode1.connect(gainNode1); + + oscNode2 = context.createOscillator(); + oscNode2.type = "sine"; + oscNode2.frequency.value = 329.627556912869929; // E + oscNode2.connect(gainNode2); + + oscNode3 = context.createOscillator(); + oscNode3.type = "sine"; + oscNode3.frequency.value = 391.995435981749294 // G + oscNode3.connect(gainNode3); + + oscNode1.start(); + oscNode2.start(); + oscNode3.start(); + + playing = true; +}</pre> + +<p>Each of the three oscillators is set up the same way:</p> + +<ol> + <li>Create the {{domxref("OscillatorNode")}} by calling {{domxref("BaseAudioContext.createOscillator")}}.</li> + <li>Set the oscillator's type to <code>"sine"</code> to use a sine wave as the audio waveform.</li> + <li>Set the oscillator's frequency to the desired value; in this case, <code>oscNode1</code> is set to a middle C, while <code>oscNode2</code> and <code>oscNode3</code> round out the chord by playing the E and G notes.</li> + <li>Connect the new oscillator to the corresponding gain node.</li> +</ol> + +<p>Once all three oscillators have been created, they're started by calling each one's {{domxref("AudioScheduledSourceNode.start", "ConstantSourceNode.start()")}} method in turn, and <code>playing</code> is set to <code>true</code> to track that the tones are playing.</p> + +<h4 id="Stopping_the_oscillators">Stopping the oscillators</h4> + +<p>Stopping the oscillators when the user toggles the play state to pause the tones is as simple as stopping each node.</p> + +<pre class="brush: js">function stopOscillators() { + oscNode1.stop(); + oscNode2.stop(); + oscNode3.stop(); + playing = false; +}</pre> + +<p>Each node is stopped by calling its {{domxref("AudioScheduledSourceNode.stop", "ConstantSourceNode.stop()")}} method, then <code>playing</code> is set to <code>false</code>.</p> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', 600, 200) }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a> (example)</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("ConstantSourceNode")}}</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/index.html b/files/ko/web/api/web_audio_api/index.html index a6f2a443d1..1ccd2526b3 100644 --- a/files/ko/web/api/web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/index.html @@ -3,11 +3,11 @@ title: Web Audio API slug: Web/API/Web_Audio_API translation_of: Web/API/Web_Audio_API --- -<div> +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + <p>Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.</p> -</div> -<h2 id="Web_audio의_개념과_사용법">Web audio의 개념과 사용법</h2> +<h2 id="Web_audio_concepts_and_usage">Web audio의 개념과 사용법</h2> <p>Web Audio API는 <strong>오디오 컨텍스트</strong> 내부의 오디오 조작을 핸들링하는 것을 포함하며, <strong>모듈러 라우팅</strong>을 허용하도록 설계되어 있습니다. 기본적인 오디오 연산은 <strong>오디오 노드</strong>를 통해 수행되며, <strong>오디오 노드</strong>는 서로 연결되어 <strong>오디오 라우팅 그래프</strong>를 형성합니다. 서로 다른 타입의 채널 레이아웃을 포함한 다수의 오디오 소스는 단일 컨텍스트 내에서도 지원됩니다. 이 모듈식 설계는 역동적이고 복합적인 오디오 기능 생성을 위한 유연성을 제공합니다.</p> @@ -18,24 +18,24 @@ translation_of: Web/API/Web_Audio_API <p>웹 오디오의 간단하고 일반적인 작업 흐름은 다음과 같습니다 :</p> <ol> - <li>오디오 컨텍스트를 생성합니다.</li> - <li>컨텍스트 내에 소스를 생성합니다.(ex - <audio>, 발진기, 스트림)</li> - <li>이펙트 노드를 생성합니다. (ex - 잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)</li> - <li>오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)</li> - <li>사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.</li> + <li>오디오 컨텍스트를 생성합니다.</li> + <li>컨텍스트 내에 소스를 생성합니다.(ex - <audio>, 발진기, 스트림)</li> + <li>이펙트 노드를 생성합니다. (ex - 잔향 효과, 바이쿼드 필터, 패너, 컴프레서 등)</li> + <li>오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)</li> + <li>사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.</li> </ol> -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<p><img alt="오디오 컨텍스트라고 쓰여진 외부 박스와, 소스, 이펙트, 목적지라고 쓰여진 세 개의 내부 박스를 가진 간단한 박스 다이어그램. 세 개의 내부 박스는 사이에 좌에서 우를 가리키는 화살표를 가지고 있는데, 이는 오디오 정보의 흐름을 나타냅니다." src="audio-context_.png"></p> <p>높은 정확도와 적은 지연시간을 가진 타이밍 계산 덕분에, 개발자는 높은 샘플 레이트에서도 특정 샘플을 대상으로 이벤트에 정확하게 응답하는 코드를 작성할 수 있습니다. 따라서 드럼 머신이나 시퀀서 등의 어플리케이션은 충분히 구현 가능합니다.</p> <p>Web Audio API는 오디오가 어떻게 <em>공간화</em>될지 컨트롤할 수 있도록 합니다. <em>소스-리스너 모델</em>을 기반으로 하는 시스템을 사용하면 <em>패닝 모델</em>과 <em>거리-유도 감쇄</em> 혹은 움직이는 소스(혹은 움직이는 청자)를 통해 유발된 <em>도플러 시프트</em> 컨트롤이 가능합니다.</p> <div class="note"> -<p><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> 아티클에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.</p> +<p><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API의 기본 개념</a> 문서에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.</p> </div> -<h2 id="Web_Audio_API_타겟_사용자층">Web Audio API 타겟 사용자층</h2> +<h2 id="Web_Audio_API_target_audience">Web Audio API 타겟 사용자층</h2> <p>오디오나 음악 용어에 익숙하지 않은 사람은 Web Audio API가 막막하게 느껴질 수 있습니다. 또한 Web Audio API가 굉장히 다양한 기능을 제공하는 만큼 개발자로서는 시작하기 어렵게 느껴질 수 있습니다.</p> @@ -47,74 +47,80 @@ translation_of: Web/API/Web_Audio_API <p>코드를 작성하는 것은 카드 게임과 비슷합니다. 규칙을 배우고, 플레이합니다. 모르겠는 규칙은 다시 공부하고, 다시 새로운 판을 합니다. 마찬가지로, 이 문서와 첫 튜토리얼에서 설명하는 것만으로 부족하다고 느끼신다면 첫 튜토리얼의 내용을 보충하는 동시에 여러 테크닉을 이용하여 스텝 시퀀서를 만드는 법을 설명하는 <a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">상급자용 튜토리얼</a>을 읽어보시는 것을 추천합니다.</p> -<p>그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 튜토리얼을 찾아 보실 수 있습니다.</p> +<p>그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 자습서를 찾아 보실 수 있습니다.</p> <p>만약에 프로그래밍보다는 음악이 친숙하고, 음악 이론에 익숙하며, 악기를 만들고 싶으시다면 바로 상급자용 튜토리얼부터 시작하여 여러가지를 만들기 시작하시면 됩니다. 위의 튜토리얼은 음표를 배치하는 법, 저주파 발진기 등 맞춤형 Oscillator(발진기)와 Envelope를 설계하는 법 등을 설명하고 있으니, 이를 읽으며 사이드바의 자료를 참고하시면 될 것입니다.</p> <p>프로그래밍에 전혀 익숙하지 않으시다면 자바스크립트 기초 튜토리얼을 먼저 읽고 이 문서를 다시 읽으시는 게 나을 수도 있습니다. 모질라의 <a href="/en-US/docs/Learn/JavaScript">자바스크립트 기초</a>만큼 좋은 자료도 몇 없죠.</p> -<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2> +<h2 id="Web_Audio_API_Interfaces">Web Audio API 인터페이스</h2> <p>Web Audio API는 다양한 인터페이스와 연관 이벤트를 가지고 있으며, 이는 9가지의 기능적 범주로 나뉩니다.</p> -<h3 id="일반_오디오_그래프_정의">일반 오디오 그래프 정의</h3> +<h3 id="General_audio_graph_definition">일반 오디오 그래프 정의</h3> <p>Web Audio API 사용범위 내에서 오디오 그래프를 형성하는 일반적인 컨테이너와 정의입니다.</p> <dl> - <dt>{{domxref("AudioContext")}}</dt> - <dd><strong><code>AudioContext</code></strong> 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 {{domxref("AudioNode")}}로 표현됩니다. <code>AudioContext</code>는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 <code>AudioContext</code>를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.</dd> - <dt>{{domxref("AudioNode")}}</dt> - <dd><strong><code>AudioNode</code></strong><strong> </strong>인터페이스는 오디오 소스({{HTMLElement("audio")}}나 {{HTMLElement("video")}}엘리먼트), 오디오 목적지, 중간 처리 모듈({{domxref("BiquadFilterNode")}}이나 {{domxref("GainNode")}})과 같은 오디오 처리 모듈을 나타냅니다.</dd> - <dt>{{domxref("AudioParam")}}</dt> - <dd><strong><code>AudioParam</code></strong> 인터페이스는 {{domxref("AudioNode")}}중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.</dd> - <dt>The {{event("ended")}} event</dt> - <dd> - <p><strong><code>ended</code></strong> 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.</p> - </dd> + <dt>{{domxref("AudioContext")}}</dt> + <dd><strong><code>AudioContext</code></strong> 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 {{domxref("AudioNode")}}로 표현됩니다. <code>AudioContext</code>는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 <code>AudioContext</code>를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd><strong><code>AudioNode</code></strong><strong> </strong>인터페이스는 오디오 소스({{HTMLElement("audio")}}나 {{HTMLElement("video")}} 요소), 오디오 목적지, 중간 처리 모듈({{domxref("BiquadFilterNode")}}이나 {{domxref("GainNode")}})과 같은 오디오 처리 모듈을 나타냅니다.</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd><strong><code>AudioParam</code></strong> 인터페이스는 {{domxref("AudioNode")}}중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.</dd> + <dt>{{domxref("AudioParamMap")}}</dt> + <dd>{{domxref("AudioParam")}} 인터페이스 그룹에 maplike 인터페이스를 제공하는데, 이는 <code>forEach()</code>, <code>get()</code>, <code>has()</code>, <code>keys()</code>, <code>values()</code> 메서드와 <code>size</code> 속성이 제공된다는 것을 의미합니다.</dd> + <dt>{{domxref("BaseAudioContext")}}</dt> + <dd><strong><code>BaseAudioContext</code></strong> 인터페이스는 온라인과 오프라인 오디오 프로세싱 그래프에 대한 기본 정의로서 동작하는데, 이는 각각 {{domxref("AudioContext")}} 와 {{domxref("OfflineAudioContext")}}로 대표됩니다. <code>BaseAudioContext</code>는 직접 쓰여질 수 없습니다 — 이 두 가지 상속되는 인터페이스 중 하나를 통해 이것의 기능을 사용할 수 있습니다.</dd> + <dt>The {{event("ended")}} event</dt> + <dd><p><strong><code>ended</code></strong> 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.</p></dd> </dl> -<h3 id="오디오_소스_정의하기">오디오 소스 정의하기</h3> +<h3 id="Defining_audio_sources">오디오 소스 정의하기</h3> <p>Web Audio API에서 사용하기 위한 오디오 소스를 정의하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("OscillatorNode")}}</dt> - <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> - <dt>{{domxref("AudioBuffer")}}</dt> - <dd><strong><code>AudioBuffer</code></strong> 인터페이스는 {{ domxref("AudioContext.decodeAudioData()") }}메소드를 사용해 오디오 파일에서 생성되거나 {{ domxref("AudioContext.createBuffer()") }}를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 {{ domxref("AudioBufferSourceNode") }}에 삽입될 수 있습니다.</dd> - <dt>{{domxref("AudioBufferSourceNode")}}</dt> - <dd><strong><code>AudioBufferSourceNode</code></strong> 인터페이스는 {{domxref("AudioBuffer")}}에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> - <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> - <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 {{ htmlelement("audio") }} 나 {{ htmlelement("video") }} HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> - <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> - <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}(웹캡, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("AudioScheduledSourceNode")}}</dt> + <dd><strong><code>AudioScheduledSourceNode</code></strong>는 오디오 소스 노드 인터페이스의 몇 가지 유형에 대한 부모 인터페이스입니다. 이것은 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd><strong><code>AudioBuffer</code></strong> 인터페이스는 {{ domxref("AudioContext.decodeAudioData()") }}메소드를 사용해 오디오 파일에서 생성되거나 {{ domxref("AudioContext.createBuffer()") }}를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 {{ domxref("AudioBufferSourceNode") }}에 삽입될 수 있습니다.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd><strong><code>AudioBufferSourceNode</code></strong> 인터페이스는 {{domxref("AudioBuffer")}}에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 {{ htmlelement("audio") }} 나 {{ htmlelement("video") }} HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 <a href="/en-US/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}(웹캠, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dt>{{domxref("MediaStreamTrackAudioSourceNode")}}</dt> + <dd>{{domxref("MediaStreamTrackAudioSourceNode")}} 유형의 노드는 데이터가 {{domxref("MediaStreamTrack")}}로부터 오는 오디오 소스를 표현합니다. 이 노드를 생성하기 위해 {{domxref("AudioContext.createMediaStreamTrackSource", "createMediaStreamTrackSource()")}} 메서드를 사용하여 이 노드를 생성할 때, 여러분은 어떤 트랙을 사용할 지 명시합니다. 이것은 <code>MediaStreamAudioSourceNode</code>보다 더 많은 제어를 제공합니다.</dd> </dl> -<h3 id="오디오_이펙트_필터_정의하기">오디오 이펙트 필터 정의하기</h3> +<h3 id="Defining_audio_effects_filters">오디오 이펙트 필터 정의하기</h3> <p>오디오 소스에 적용할 이펙트를 정의하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("BiquadFilterNode")}}</dt> - <dd><strong><code>BiquadFilterNode</code></strong> 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 {{domxref("AudioNode")}}입니다. <code>BiquadFilterNode</code>는 항상 단 하나의 입력과 출력만을 가집니다. </dd> - <dt>{{domxref("ConvolverNode")}}</dt> - <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><span style="line-height: 1.5;"> 인터페이스는 주어진 {{domxref("AudioBuffer")}}에 선형 콘볼루션을 수행하는 {{domxref("AudioNode")}}이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다. </span></dd> - <dt>{{domxref("DelayNode")}}</dt> - <dd><strong><code>DelayNode</code></strong> 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 {{domxref("AudioNode")}} 오디오 처리 모듈입니다.</dd> - <dt>{{domxref("DynamicsCompressorNode")}}</dt> - <dd><strong><code>DynamicsCompressorNode</code></strong> 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.</dd> - <dt>{{domxref("GainNode")}}</dt> - <dd><strong><code>GainNode</code></strong> 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 {{domxref("AudioNode")}} 오디오 모듈입니다.</dd> - <dt>{{domxref("StereoPannerNode")}}</dt> - <dd><code><strong>StereoPannerNode</strong></code> 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.</dd> - <dt>{{domxref("WaveShaperNode")}}</dt> - <dd><strong><code>WaveShaperNode</code></strong> 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 {{domxref("AudioNode")}}입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.</dd> - <dt>{{domxref("PeriodicWave")}}</dt> - <dd>{{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.</dd> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd><strong><code>BiquadFilterNode</code></strong> 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 {{domxref("AudioNode")}}입니다. <code>BiquadFilterNode</code>는 항상 단 하나의 입력과 출력만을 가집니다. </dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><span style="line-height: 1.5;"> 인터페이스는 주어진 {{domxref("AudioBuffer")}}에 선형 콘볼루션을 수행하는 {{domxref("AudioNode")}}이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다. </span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd><strong><code>DelayNode</code></strong> 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 {{domxref("AudioNode")}} 오디오 처리 모듈입니다.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd><strong><code>DynamicsCompressorNode</code></strong> 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd><strong><code>GainNode</code></strong> 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 {{domxref("AudioNode")}} 오디오 모듈입니다.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd><strong><code>WaveShaperNode</code></strong> 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 {{domxref("AudioNode")}}입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>{{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.</dd> + <dt>{{domxref("IIRFilterNode")}}</dt> + <dd>일반적인 <strong><a class="external external-icon" href="https://en.wikipedia.org/wiki/infinite%20impulse%20response" title="infinite impulse response">infinite impulse response</a></strong> (IIR) 필터를 구현합니다; 이 유형의 필터는 음색 제어 장치와 그래픽 이퀄라이저를 구현하는 데 사용될 수 있습니다.</dd> </dl> -<h3 id="오디오_목적지_정의하기">오디오 목적지 정의하기</h3> +<h3 id="Defining_audio_destinations">오디오 목적지 정의하기</h3> <p>처리된 오디오를 어디에 출력할지 정의하는 인터페이스입니다.</p> @@ -122,347 +128,152 @@ translation_of: Web/API/Web_Audio_API <dt>{{domxref("AudioDestinationNode")}}</dt> <dd><strong><code>AudioDestinationNode</code></strong> 인터페이스는 주어진 컨텍스트 내의 오디오 소스의 최종 목적지를 나타냅니다. 주로 기기의 스피커로 출력할 때 사용됩니다.</dd> <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> - <dd><code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> 인터페이스는 단일 <code>AudioMediaStreamTrack</code> 을 가진 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}로 구성된 오디오 목적지를 나타내며, 이는 {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}에서 얻은 {{domxref("MediaStream")}}과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> + <dd><code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> 인터페이스는 단일 <code>AudioMediaStreamTrack</code> 을 가진 <a href="/en-US/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}로 구성된 오디오 목적지를 나타내며, 이는 {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}에서 얻은 {{domxref("MediaStream")}}과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 {{domxref("AudioNode")}}입니다.</dd> </dl> -<h3 id="데이터_분석_및_시각화">데이터 분석 및 시각화</h3> +<h3 id="Data_analysis_and_visualization">데이터 분석 및 시각화</h3> <p>오디오에서 재생시간이나 주파수 등의 데이터를 추출하기 위한 인터페이스입니다.</p> <dl> - <dt>{{domxref("AnalyserNode")}}</dt> - <dd><strong><code>AnalyserNode</code></strong> 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.</dd> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd><strong><code>AnalyserNode</code></strong> 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.</dd> </dl> -<h3 id="오디오_채널을_분리하고_병합하기">오디오 채널을 분리하고 병합하기</h3> +<h3 id="Splitting_and_merging_audio_channels">오디오 채널을 분리하고 병합하기</h3> <p>오디오 채널들을 분리하거나 병합하기 위한 인터페이스입니다.</p> <dl> - <dt>{{domxref("ChannelSplitterNode")}}</dt> - <dd><code><strong>ChannelSplitterNode</strong></code> 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.</dd> - <dt>{{domxref("ChannelMergerNode")}}</dt> - <dd><code><strong>ChannelMergerNode</strong></code> 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.</dd> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd><code><strong>ChannelSplitterNode</strong></code> 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd><code><strong>ChannelMergerNode</strong></code> 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.</dd> </dl> -<h3 id="오디오_공간화">오디오 공간화</h3> +<h3 id="Audio_spatialization">오디오 공간화</h3> <p>오디오 소스에 오디오 공간화 패닝 이펙트를 추가하는 인터페이스입니다.</p> <dl> - <dt>{{domxref("AudioListener")}}</dt> - <dd><strong><code>AudioListener</code></strong> 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.</dd> - <dt>{{domxref("PannerNode")}}</dt> - <dd><strong><code>PannerNode</code></strong> 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> -</dl> - -<h3 id="자바스크립트에서_오디오_처리하기">자바스크립트에서 오디오 처리하기</h3> - -<p>자바스크립트에서 오디오 데이터를 처리하기 위한 코드를 작성할 수 있습니다. 이렇게 하려면 아래에 나열된 인터페이스와 이벤트를 사용하세요.</p> - -<div class="note"> -<p>이것은 Web Audio API 2014년 8월 29일의 스펙입니다. 이 기능은 지원이 중단되고 {{ anch("Audio_Workers") }}로 대체될 예정입니다.</p> -</div> - -<dl> - <dt>{{domxref("ScriptProcessorNode")}}</dt> - <dd><strong><code>ScriptProcessorNode</code></strong> 인터페이스는 자바스크립트를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다. {{domxref("AudioProcessingEvent")}}인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.</dd> - <dt>{{event("audioprocess")}} (event)</dt> - <dd><strong><code>audioprocess</code></strong> 이벤트는 Web Audio API {{domxref("ScriptProcessorNode")}}의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.</dd> - <dt>{{domxref("AudioProcessingEvent")}}</dt> - <dd><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <strong><code>AudioProcessingEvent</code></strong> 는 {{domxref("ScriptProcessorNode")}} 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.</dd> + <dt>{{domxref("AudioListener")}}</dt> + <dd><strong><code>AudioListener</code></strong> 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd><strong><code>PannerNode</code></strong> 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd><code><strong>StereoPannerNode</strong></code> 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.</dd> </dl> -<h3 id="오프라인백그라운드_오디오_처리하기">오프라인/백그라운드 오디오 처리하기</h3> +<h3 id="Audio_processing_in_JavaScript">JavaScript에서의 오디오 프로세싱</h3> -<p>다음을 이용해 백그라운드(장치의 스피커가 아닌 {{domxref("AudioBuffer")}}으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.</p> +<p>오디오 worklet을 사용하여, 여러분은 JavaScript 또는 <a href="/en-US/docs/WebAssembly">WebAssembly</a>로 작성된 사용자 정의 오디오 노드를 정의할 수 있습니다. 오디오 worklet은 {{domxref("Worklet")}} 인터페이스를 구현하는데, 이는 {{domxref("Worker")}} 인터페이스의 가벼운 버전입니다.</p> <dl> - <dt>{{domxref("OfflineAudioContext")}}</dt> - <dd><strong><code>OfflineAudioContext</code></strong> 인터페이스는 {{domxref("AudioNode")}}로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 <strong><code>AudioContext</code></strong> 와 대조적으로, <strong><code>OfflineAudioContext</code></strong> 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다. </dd> - <dt>{{event("complete")}} (event)</dt> - <dd><strong><code>complete</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}}의 렌더링이 종료될때 발생합니다.</dd> - <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> - <dd><strong><code>OfflineAudioCompletionEvent</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}} 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. {{event("complete")}} 이벤트는 이 이벤트를 구현합니다.</dd> + <dt>{{domxref("AudioWorklet")}}</dt> + <dd><code>AudioWorklet</code> 인터페이스는 {{domxref("AudioContext")}} 객체의 {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}}을 통하여 사용 가능하고, 메인 스레드를 실행할 오디오 worklet에 모듈을 추가할 수 있게 합니다.</dd> + <dt>{{domxref("AudioWorkletNode")}}</dt> + <dd><code>AudioWorkletNode</code> 인터페이스는 오디오 그래프에 임베드된 {{domxref("AudioNode")}}을 나타내고 해당하는 <code>AudioWorkletProcessor</code>에 메시지를 전달할 수 있습니다.</dd> + <dt>{{domxref("AudioWorkletProcessor")}}</dt> + <dd><code>AudioWorkletProcessor</code> 인터페이스는 오디오를 직접 생성하거나, 처리하거나, 또는 분석하는 <code>AudioWorkletGlobalScope</code>에서 실행되는 오디오 프로세싱 코드를 나타내고, 해당하는 <code>AudioWorkletNode</code>에 메시지를 전달할 수 있습니다.</dd> + <dt>{{domxref("AudioWorkletGlobalScope")}}</dt> + <dd><code>AudioWorkletGlobalScope</code> 인터페이스는 오디오 프로세싱 스크립트가 실행되는 워커 컨텍스트를 나타내는 파생된 객체인 <code>WorkletGlobalScope</code>입니다; 이것은 메인 스레드가 아닌 worklet 스레드에서 JavaScript를 사용하여 직접적으로 오디오 데이터의 생성, 처리, 분석을 가능하게 하도록 설계되었습니다.</dd> </dl> -<h3 id="Audio_Workers" name="Audio_Workers">오디오 워커</h3> +<h4 id="Obsolete_script_processor_nodes">안 쓰임: 스크립트 프로세서 노드</h4> -<p>오디오 워커는 <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> 컨텍스트 내에서 스크립팅된 오디오 처리를 관리하기 위한 기능을 제공하며, 두어가지 인터페이스로 정의되어 있습니다(2014년 8월 29일 새로운 기능이 추가되었습니다). 이는 아직 모든 브라우저에서 구현되지 않았습니다. 구현된 브라우저에서는 <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a>에서 설명된 {{domxref("ScriptProcessorNode")}}를 포함한 다른 기능을 대체합니다.</p> +<p>오디오 worklet이 정의되기 전에, Web Audio API는 JavaScript 기반의 오디오 프로세싱을 위해 <code>ScriptProcessorNode</code>를 사용했습니다. 코드가 메인 스레드에서 실행되기 때문에, 나쁜 성능을 가지고 있었습니다. <code>ScriptProcessorNode</code>는 역사적인 이유로 보존되나 deprecated되었습니다.</p> <dl> - <dt>{{domxref("AudioWorkerNode")}}</dt> - <dd><strong><code>AudioWorkerNode</code></strong> 인터페이스는 워커 쓰레드와 상호작용하여 오디오를 직접 생성, 처리, 분석하는 {{domxref("AudioNode")}}를 나타냅니다. </dd> - <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> - <dd><strong><code>AudioWorkerGlobalScope</code></strong> 인터페이스는 <strong><code>DedicatedWorkerGlobalScope</code></strong> 에서 파생된 오디오 처리 스크립트가 실행되는 워커 컨텍스트를 나타내는 객체입니다. 이것은 워커 쓰레드 내에서 자바스크립트를 이용하여 직접 오디오 데이터를 생성, 처리, 분석할 수 있도록 설계되었습니다.</dd> - <dt>{{domxref("AudioProcessEvent")}}</dt> - <dd>이것은 처리를 수행하기 위해 {{domxref("AudioWorkerGlobalScope")}} 오브젝트로 전달되는 <code>Event</code> 오브젝트입니다.</dd> + <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt> + <dd><strong><code>ScriptProcessorNode</code></strong> 인터페이스는 자바스크립트를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다. {{domxref("AudioProcessingEvent")}} 인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.</dd> + <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt> + <dd><code>audioprocess</code> 이벤트는 Web Audio API {{domxref("ScriptProcessorNode")}}의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.</dd> + <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt> + <dd><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code>는 {{domxref("ScriptProcessorNode")}} 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.</dd> </dl> -<h2 id="Example" name="Example">Obsolete interfaces</h2> +<h3 id="Offlinebackground_audio_processing">오프라인/백그라운드 오디오 처리하기</h3> -<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> +<p>다음을 이용해 백그라운드(장치의 스피커가 아닌 {{domxref("AudioBuffer")}}으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.</p> <dl> - <dt>{{domxref("JavaScriptNode")}}</dt> - <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> - <dt>{{domxref("WaveTableNode")}}</dt> - <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd><strong><code>OfflineAudioContext</code></strong> 인터페이스는 {{domxref("AudioNode")}}로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 <strong><code>AudioContext</code></strong> 와 대조적으로, <strong><code>OfflineAudioContext</code></strong> 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다. </dd> + <dt>{{event("complete")}} (event)</dt> + <dd><strong><code>complete</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}}의 렌더링이 종료될때 발생합니다.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd><strong><code>OfflineAudioCompletionEvent</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}} 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. {{event("complete")}} 이벤트는 이 이벤트를 구현합니다.</dd> </dl> -<h2 id="Example" name="Example">Example</h2> - -<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> - -<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> - -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context -// Webkit/blink browsers need prefix, Safari won't work without window. - -var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options -var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options -var mute = document.querySelector('.mute'); // mute button -var drawVisual; // requestAnimationFrame - -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); - -function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use - var k = typeof amount === 'number' ? amount : 50, - n_samples = 44100, - curve = new Float32Array(n_samples), - deg = Math.PI / 180, - i = 0, - x; - for ( ; i < n_samples; ++i ) { - x = i * 2 / n_samples - 1; - curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); - } - return curve; -}; - -navigator.getUserMedia ( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function(stream) { - source = audioCtx.createMediaStreamSource(stream); - source.connect(analyser); - analyser.connect(distortion); - distortion.connect(biquadFilter); - biquadFilter.connect(gainNode); - gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together - - visualize(stream); - voiceChange(); - - }, - - // Error callback - function(err) { - console.log('The following gUM error occured: ' + err); - } -); - -function visualize(stream) { - WIDTH = canvas.width; - HEIGHT = canvas.height; - - var visualSetting = visualSelect.value; - console.log(visualSetting); - - if(visualSetting == "sinewave") { - analyser.fftSize = 2048; - var bufferLength = analyser.frequencyBinCount; // half the FFT value - var dataArray = new Uint8Array(bufferLength); // create an array to store the data +<h2 id="Guides_and_tutorials">가이드와 자습서</h2> - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); +<p>{{LandingPageListSubpages}}</p> - function draw() { +<h2 id="Examples">예제</h2> - drawVisual = requestAnimationFrame(draw); +<p>여러분은 GitHub의 <a href="https://github.com/mdn/webaudio-examples/">webaudio-example 레포지토리</a>에서 몇 개의 예제를 찾을 수 있습니다.</p> - analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above +<h2 id="Specifications">명세</h2> - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; - - for(var i = 0; i < bufferLength; i++) { - - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(visualSetting == "off") { - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - } - -} - -function voiceChange() { - distortion.curve = new Float32Array; - biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run - - var voiceSetting = voiceSelect.value; - console.log(voiceSetting); - - if(voiceSetting == "distortion") { - distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node - } else if(voiceSetting == "biquad") { - biquadFilter.type = "lowshelf"; - biquadFilter.frequency.value = 1000; - biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad - } else if(voiceSetting == "off") { - console.log("Voice settings turned off"); // do nothing, as off option was chosen - } - -} - -// event listeners to change visualize and voice settings +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> -visualSelect.onchange = function() { - window.cancelAnimationFrame(drawVisual); - visualize(stream); -} +<h2 id="Browser_compatibility">브라우저 호환성</h2> -voiceSelect.onchange = function() { - voiceChange(); -} +<div> +<h3 id="AudioContext">AudioContext</h3> -mute.onclick = voiceMute; +<div> -function voiceMute() { // toggle to mute and unmute sound - if(mute.id == "") { - gainNode.gain.value = 0; // gain set to 0 to mute sound - mute.id = "activated"; - mute.innerHTML = "Unmute"; - } else { - gainNode.gain.value = 1; // gain set to 1 to unmute sound - mute.id = ""; - mute.innerHTML = "Mute"; - } -} -</pre> +<p>{{Compat("api.AudioContext", 0)}}</p> +</div> +</div> -<h2 id="Specifications">Specifications</h2> +<h2 id="See_also">같이 보기</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h3 id="Tutorialsguides">자습서/가이드</h3> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API의 기본 개념</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">고급 기술: 소리 생성, 시퀸싱, 타이밍, 스케쥴링</a></li> + <li><a href="/en-US/docs/Web/Media/Autoplay_guide">미디어와 Web Audio API에 대한 자동 재생 가이드</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters">IIR 필터 사용하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio 공간화 기초</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">ConstantSourceNode로 다수의 매개변수 제어하기</a></li> + <li><a href="https://www.html5rocks.com/tutorials/webaudio/positional_audio/">positional audio와 WebGL 같이 사용하기</a></li> + <li><a href="https://www.html5rocks.com/tutorials/webaudio/games/">Web Audio API로 게임 오디오 개발하기</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext">webkitAudioContext 코드를 AudioContext 기반 표준에 포팅하기</a></li> +</ul> -<p>{{Compat("api.AudioContext", 0)}}</p> - -<h2 id="See_also">See also</h2> +<h3 id="Libraries">라이브러리</h3> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> - <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> - <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> + <li><a href="https://github.com/bit101/tones">Tones</a>: Web Audio API를 사용하여 특정한 음색/음을 재생하는 간단한 라이브러리</li> + <li><a href="https://tonejs.github.io/">Tone.js</a>: 브라우저에서 상호작용을 하는 음악을 생성하기 위한 프레임워크</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: 다른 유용한 기능들을 제공할 뿐만 아니라, <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a>을 기본으로 하고 <a href="https://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>에 대안을 제공하는 JS 오디오 라이브러리</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery 스타일의 AudioNode 체이닝, mixer 스타일의 전송/반환, 등등</li> + <li><a href="https://korilakkuma.github.io/XSound/">XSound</a>: 신시사이저, 이펙트, 시각화, 레코딩 등을 위한 Web Audio API 라이브러리</li> + <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: 다른 소스로부터 하나의 파일에 비디오와 오디오를 레코드하고 결합시키기 위한 Web Audio API를 사용하는 HTML5 비디오 language lab 웹 애플리케이션 (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">GitHub에 있는 소스</a>)</li> + <li><a href="https://ptsjs.org/">Pts.js</a>: 웹 오디오 시각화를 단순화합니다 (<a href="https://ptsjs.org/guide/sound-0800">가이드</a>)</li> </ul> -<section id="Quick_Links"> -<h3 id="Quicklinks">Quicklinks</h3> +<h3 id="Related_topics">관련 주제</h3> -<ol> - <li data-default-state="open"><strong><a href="#">Guides</a></strong> - - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Examples</a></strong> - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> - <ol> - <li>{{domxref("AnalyserNode")}}</li> - <li>{{domxref("AudioBuffer")}}</li> - <li>{{domxref("AudioBufferSourceNode")}}</li> - <li>{{domxref("AudioContext")}}</li> - <li>{{domxref("AudioDestinationNode")}}</li> - <li>{{domxref("AudioListener")}}</li> - <li>{{domxref("AudioNode")}}</li> - <li>{{domxref("AudioParam")}}</li> - <li>{{event("audioprocess")}} (event)</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BiquadFilterNode")}}</li> - <li>{{domxref("ChannelMergerNode")}}</li> - <li>{{domxref("ChannelSplitterNode")}}</li> - <li>{{event("complete")}} (event)</li> - <li>{{domxref("ConvolverNode")}}</li> - <li>{{domxref("DelayNode")}}</li> - <li>{{domxref("DynamicsCompressorNode")}}</li> - <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> - <li>{{domxref("GainNode")}}</li> - <li>{{domxref("MediaElementAudioSourceNode")}}</li> - <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> - <li>{{domxref("MediaStreamAudioSourceNode")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("OfflineAudioContext")}}</li> - <li>{{domxref("OscillatorNode")}}</li> - <li>{{domxref("PannerNode")}}</li> - <li>{{domxref("PeriodicWave")}}</li> - <li>{{domxref("ScriptProcessorNode")}}</li> - <li>{{domxref("WaveShaperNode")}}</li> - </ol> - </li> -</ol> -</section> +<ul> + <li><a href="/en-US/docs/Web/Media">웹 미디어 기술</a></li> + <li><a href="/en-US/docs/Web/Media/Formats">웹에서의 미디어 타입과 포맷에 대한 가이드</a></li> +</ul> diff --git a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html new file mode 100644 index 0000000000..260a26a090 --- /dev/null +++ b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html @@ -0,0 +1,381 @@ +--- +title: Migrating from webkitAudioContext +slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext +tags: + - API + - Audio + - Guide + - Migrating + - Migration + - Updating + - Web Audio API + - porting + - webkitAudioContext +--- +<p>The Web Audio API went through many iterations before reaching its current state. It was first implemented in WebKit, and some of its older parts were not immediately removed as they were replaced in the specification, leading to many sites using non-compatible code. <span class="seoSummary">In this article, we cover the differences in Web Audio API since it was first implemented in WebKit and how to update your code to use the modern Web Audio API.</span></p> + +<p>The Web Audio standard was first implemented in <a href="http://webkit.org/">WebKit</a>, and the implementation was built in parallel with the work on the <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">specification</a> of the API. As the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the WebKit (and Blink) implementations due to backwards compatibility reasons.</p> + +<p>New engines implementing the Web Audio spec (such as Gecko) will only implement the official, final version of the specification, which means that code using <code>webkitAudioContext</code> or old naming conventions in the Web Audio specification may not immediately work out of the box in a compliant Web Audio implementation. This article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based {{domxref("AudioContext")}}, which will work across different browser engines.</p> + +<div class="note"> +<p><strong>Note</strong>: There is a library called <a href="https://github.com/cwilso/webkitAudioContext-MonkeyPatch">webkitAudioContext monkeypatch</a>, which automatically fixes some of these changes to make most code targeting <code>webkitAudioContext</code> to work on the standards based <code>AudioContext</code> out of the box, but it currently doesn't handle all of the cases below. Please consult the <a href="https://github.com/cwilso/webkitAudioContext-MonkeyPatch/blob/gh-pages/README.md">README file</a> for that library to see a list of APIs that are automatically handled by it.</p> +</div> + +<h2 id="Changes_to_the_creator_methods">Changes to the creator methods</h2> + +<p>Three of the creator methods on <code>webkitAudioContext</code> have been renamed in {{domxref("AudioContext")}}.</p> + +<ul> + <li><code>createGainNode()</code> has been renamed to {{domxref("createGain")}}.</li> + <li><code>createDelayNode()</code> has been renamed to {{domxref("createDelay")}}.</li> + <li><code>createJavaScriptNode()</code> has been renamed to {{domxref("createScriptProcessor")}}.</li> +</ul> + +<p>These are simple renames that were made in order to improve the consistency of these method names on {{domxref("AudioContext")}}. If your code uses either of these names, like in the example below :</p> + +<pre class="brush: js">// Old method names +var gain = context.createGainNode(); +var delay = context.createDelayNode(); +var js = context.createJavascriptNode(1024); +</pre> + +<p>you can rename the methods to look like this:</p> + +<pre class="brush: js">// New method names +var gain = context.createGain(); +var delay = context.createDelay(); +var js = context.createScriptProcessor(1024); +</pre> + +<p>The semantics of these methods remain the same in the renamed versions.</p> + +<h2 id="Changes_to_starting_and_stopping_nodes">Changes to starting and stopping nodes</h2> + +<p>In <code>webkitAudioContext</code>, there are two ways to start and stop {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}: the <code>noteOn()</code> and <code>noteOff()</code> methods, and the <code>start()</code> and <code>stop()</code> methods. ({{domxref("AudioBufferSourceNode ")}}has yet another way of starting output: the <code>noteGrainOn()</code> method.) The <code>noteOn()</code>/<code>noteGrainOn()</code>/<code>noteOff()</code> methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the <code>noteOn()</code> and <code>noteGrainOn()</code> methods were consolidated into a single <code>start()</code> method, and the <code>noteOff()</code> method was renamed to the <code>stop()</code> method.</p> + +<p>In order to port your code, you can just rename the method that you're using. For example, if you have code like the below:</p> + +<pre class="brush: js">var osc = context.createOscillator(); +osc.noteOn(1); +osc.noteOff(1.5); + +var src = context.createBufferSource(); +src.noteGrainOn(1, 0.25); +src.noteOff(2); +</pre> + +<p>you can change it like this in order to port it to the standard AudioContext API:</p> + +<pre class="brush: js">var osc = context.createOscillator(); +osc.start(1); +osc.stop(1.5); + +var src = context.createBufferSource(); +src.start(1, 0.25); +src.stop(2);</pre> + +<h2 id="Remove_synchronous_buffer_creation">Remove synchronous buffer creation</h2> + +<p>In the old WebKit implementation of Web Audio, there were two versions of <code>createBuffer()</code>, one which created an initially empty buffer, and one which took an existing {{domxref("ArrayBuffer")}} containing encoded audio, decoded it and returned the result in the form of an {{domxref("AudioBuffer")}}. The latter version of <code>createBuffer()</code> was potentially expensive, because it had to decode the audio buffer synchronously, and with the buffer being arbitrarily large, it could take a lot of time for this method to complete its work, and no other part of your web page's code could execute in the mean time.</p> + +<p>Because of these problems, this version of the <code>createBuffer()</code> method has been removed, and you should use the asynchronous <code>decodeAudioData()</code> method instead.</p> + +<p>The example below shows old code which downloads an audio file over the network, and then decoded it using <code>createBuffer()</code>:</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.open("GET", "/path/to/audio.ogg", true); +xhr.responseType = "arraybuffer"; +xhr.send(); +xhr.onload = function() { + var decodedBuffer = context.createBuffer(xhr.response, false); + if (decodedBuffer) { + // Decoding was successful, do something useful with the audio buffer + } else { + alert("Decoding the audio buffer failed"); + } +}; +</pre> + +<p>Converting this code to use <code>decodeAudioData()</code> is relatively simple, as can be seen below:</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.open("GET", "/path/to/audio.ogg", true); +xhr.responseType = "arraybuffer"; +xhr.send(); +xhr.onload = function() { + context.decodeAudioData(xhr.response, function onSuccess(decodedBuffer) { + // Decoding was successful, do something useful with the audio buffer + }, function onFailure() { + alert("Decoding the audio buffer failed"); + }); +};</pre> + +<p>Note that the <code>decodeAudioData()</code> method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful. This means that you may need to restructure your code to run the part which happened after the <code>createBuffer()</code> call in the success callback, as you can see in the example above.</p> + +<h2 id="Renaming_of_AudioParam.setTargetValueAtTime">Renaming of AudioParam.setTargetValueAtTime</h2> + +<p>The <code>setTargetValueAtTime()</code> method on the {{domxref("AudioParam")}} interface has been renamed to <code>setTargetAtTime()</code>. This is also a simple rename to improve the understandability of the API, and the semantics of the method are the same. If your code is using <code>setTargetValueAtTime()</code>, you can rename it to use <code>setTargetAtTime()</code>. For example, if we have code that looks like this:</p> + +<pre class="brush: js"> var gainNode = context.createGain(); + gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0); +</pre> + +<p>you can rename the method, and be compliant with the standard, like so:</p> + +<pre class="brush: js"> var gainNode = context.createGain(); + gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0); +</pre> + +<h2 id="Enumerated_values_that_changed">Enumerated values that changed</h2> + +<p>The original <code>webkitAudioContext</code> API used C-style number based enumerated values in the API. Those values have since been changed to use the Web IDL based enumerated values, which should be familiar because they are similar to things like the {{domxref("HTMLInputElement")}} property {{domxref("HTMLInputElement.type", "type")}}.</p> + +<h3 id="OscillatorNode.type">OscillatorNode.type</h3> + +<p>{{domxref("OscillatorNode")}}'s type property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var osc = context.createOscillator(); +osc.type = osc.SINE; // sine waveform +osc.type = osc.SQUARE; // square waveform +osc.type = osc.SAWTOOTH; // sawtooth waveform +osc.type = osc.TRIANGLE; // triangle waveform +osc.setWaveTable(table); +var isCustom = (osc.type == osc.CUSTOM); // isCustom will be true + +// New standard AudioContext code: +var osc = context.createOscillator(); +osc.type = "sine"; // sine waveform +osc.type = "square"; // square waveform +osc.type = "sawtooth"; // sawtooth waveform +osc.type = "triangle"; // triangle waveform +osc.setPeriodicWave(table); // Note: setWaveTable has been renamed to setPeriodicWave! +var isCustom = (osc.type == "custom"); // isCustom will be true +</pre> + +<h3 id="BiquadFilterNode.type">BiquadFilterNode.type</h3> + +<p>{{domxref("BiquadFilterNode")}}'s type property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var filter = context.createBiquadFilter(); +filter.type = filter.LOWPASS; // lowpass filter +filter.type = filter.HIGHPASS; // highpass filter +filter.type = filter.BANDPASS; // bandpass filter +filter.type = filter.LOWSHELF; // lowshelf filter +filter.type = filter.HIGHSHELF; // highshelf filter +filter.type = filter.PEAKING; // peaking filter +filter.type = filter.NOTCH; // notch filter +filter.type = filter.ALLPASS; // allpass filter + +// New standard AudioContext code: +var filter = context.createBiquadFilter(); +filter.type = "lowpass"; // lowpass filter +filter.type = "highpass"; // highpass filter +filter.type = "bandpass"; // bandpass filter +filter.type = "lowshelf"; // lowshelf filter +filter.type = "highshelf"; // highshelf filter +filter.type = "peaking"; // peaking filter +filter.type = "notch"; // notch filter +filter.type = "allpass"; // allpass filter +</pre> + +<h3 id="PannerNode.panningModel">PannerNode.panningModel</h3> + +<p>{{domxref("PannerNode")}}'s panningModel property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var panner = context.createPanner(); +panner.panningModel = panner.EQUALPOWER; // equalpower panning +panner.panningModel = panner.HRTF; // HRTF panning + +// New standard AudioContext code: +var panner = context.createPanner(); +panner.panningModel = "equalpower"; // equalpower panning +panner.panningModel = "HRTF"; // HRTF panning +</pre> + +<h3 id="PannerNode.distanceModel">PannerNode.distanceModel</h3> + +<p>{{domxref("PannerNode")}}'s <code>distanceModel</code> property has been changed to use Web IDL enums. Old code using <code>webkitAudioContext</code> can be ported to standards based {{domxref("AudioContext")}} like below:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var panner = context.createPanner(); +panner.distanceModel = panner.LINEAR_DISTANCE; // linear distance model +panner.distanceModel = panner.INVERSE_DISTANCE; // inverse distance model +panner.distanceModel = panner.EXPONENTIAL_DISTANCE; // exponential distance model + +// Mew standard AudioContext code: +var panner = context.createPanner(); +panner.distanceModel = "linear"; // linear distance model +panner.distanceModel = "inverse"; // inverse distance model +panner.distanceModel = "exponential"; // exponential distance model +</pre> + +<h2 id="Gain_control_moved_to_its_own_node_type">Gain control moved to its own node type</h2> + +<p>The Web Audio standard now controls all gain using the {{domxref("GainNode")}}. Instead of setting a <code>gain</code> property directly on an audio source, you connect the source to a gain node and then control the gain using that node's <code>gain</code> parameter.</p> + +<h3 id="AudioBufferSourceNode">AudioBufferSourceNode</h3> + +<p>The <code>gain</code> attribute of {{domxref("AudioBufferSourceNode")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} to a gain node. See the following example:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +src.gain.value = 0.5; +src.connect(context.destination); +src.noteOn(0); + +// New standard AudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +var gain = context.createGain(); +src.connect(gain); +gain.gain.value = 0.5; +gain.connect(context.destination); +src.start(0); +</pre> + +<h3 id="AudioBuffer">AudioBuffer</h3> + +<p>The <code>gain</code> attribute of {{domxref("AudioBuffer")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} that owns the buffer to a gain node. See the following example:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +src.buffer.gain = 0.5; +src.connect(context.destination); +src.noteOn(0); + +// New standard AudioContext code: +var src = context.createBufferSource(); +src.buffer = someBuffer; +var gain = context.createGain(); +src.connect(gain); +gain.gain.value = 0.5; +gain.connect(context.destination); +src.start(0); +</pre> + +<h2 id="Removal_of_AudioBufferSourceNode.looping">Removal of AudioBufferSourceNode.looping</h2> + +<p>The <code>looping</code> attribute of {{domxref("AudioBufferSourceNode")}} has been removed. This attribute was an alias of the <code>loop</code> attribute, so you can just use the <code>loop</code> attribute instead. Instead of having code like this:</p> + +<pre class="brush: js">var source = context.createBufferSource(); +source.looping = true; +</pre> + +<p>you can change it to respect the last version of the specification:</p> + +<pre class="brush: js">var source = context.createBufferSource(); +source.loop = true; +</pre> + +<p>Note, the <code>loopStart</code> and <code>loopEnd</code> attributes are not supported in <code>webkitAudioContext</code>.</p> + +<h2 id="Changes_to_determining_playback_state">Changes to determining playback state</h2> + +<p>The <code>playbackState</code> attribute of {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}} has been removed. Depending on why you used this attribute, you can use the following techniques to get the same information:</p> + +<ul> + <li>If you need to compare this attribute to <code>UNSCHEDULED_STATE</code>, you can basically remember whether you've called <code>start()</code> on the node or not.</li> + <li>If you need to compare this attribute to <code>SCHEDULED_STATE</code>, you can basically remember whether you've called <code>start()</code> on the node or not. You can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to <code>start()</code> to know whether playback has started or not.</li> + <li>If you need to compare this attribute to <code>PLAYING_STATE</code>, you can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to <code>start()</code> to know whether playback has started or not.</li> + <li>If you need to know when playback of the node is finished (which is the most significant use case of <code>playbackState</code>), there is a new ended event which you can use to know when playback is finished. Please see this code example:</li> +</ul> + +<pre class="brush: js">// Old webkitAudioContext code: +var src = context.createBufferSource(); +// Some time later... +var isFinished = (src.playbackState == src.FINISHED_STATE); + +// New AudioContext code: +var src = context.createBufferSource(); +function endedHandler(event) { + isFinished = true; +} +var isFinished = false; +src.onended = endedHandler; +</pre> + +<p>The exact same changes have been applied to both {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}, so you can apply the same techniques to both kinds of nodes.</p> + +<h2 id="Removal_of_AudioContext.activeSourceCount">Removal of AudioContext.activeSourceCount</h2> + +<p>The <code>activeSourceCount</code> attribute has been removed from {{domxref("AudioContext")}}. If you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above.</p> + +<p>Code using the <code>activeSourceCount</code> attribute of the {{domxref("AudioContext")}}, like this snippet:</p> + +<pre class="brush: js"> var src0 = context.createBufferSource(); + var src1 = context.createBufferSource(); + // Set buffers and other parameters... + src0.start(0); + src1.start(0); + // Some time later... + console.log(context.activeSourceCount); +</pre> + +<p>could be rewritten like that:</p> + +<pre class="brush: js"> // Array to track the playing source nodes: + var sources = []; + // When starting the source, put it at the end of the array, + // and set a handler to make sure it gets removed when the + // AudioBufferSourceNode reaches its end. + // First argument is the AudioBufferSourceNode to start, other arguments are + // the argument to the |start()| method of the AudioBufferSourceNode. + function startSource() { + var src = arguments[0]; + var startArgs = Array.prototype.slice.call(arguments, 1); + src.onended = function() { + sources.splice(sources.indexOf(src), 1); + } + sources.push(src); + src.start.apply(src, startArgs); + } + function activeSources() { + return sources.length; + } + var src0 = context.createBufferSource(); + var src0 = context.createBufferSource(); + // Set buffers and other parameters... + startSource(src0, 0); + startSource(src1, 0); + // Some time later, query the number of sources... + console.log(activeSources()); +</pre> + +<h2 id="Renaming_of_WaveTable">Renaming of WaveTable</h2> + +<p>The {{domxref("WaveTable")}} interface has been renamed to {{domxref("PeriodicWave")}}. Here is how you can port old code using <code>WaveTable</code> to the standard AudioContext API:</p> + +<pre class="brush: js">// Old webkitAudioContext code: +var osc = context.createOscillator(); +var table = context.createWaveTable(realArray, imaginaryArray); +osc.setWaveTable(table); + +// New standard AudioContext code: +var osc = context.createOscillator(); +var table = context.createPeriodicWave(realArray, imaginaryArray); +osc.setPeriodicWave(table); +</pre> + +<h2 id="Removal_of_some_of_the_AudioParam_read-only_attributes">Removal of some of the AudioParam read-only attributes</h2> + +<p>The following read-only attributes have been removed from AudioParam: <code>name</code>, <code>units</code>, <code>minValue</code>, and <code>maxValue</code>. These used to be informational attributes. Here is some information on how you can get these values if you need them:</p> + +<ul> + <li>The <code>name</code> attribute is a string representing the name of the {{domxref("AudioParam")}} object. For example, the name of {{domxref("GainNode.gain")}} is <code>"gain"</code>. You can track where the {{domxref("AudioParam")}} object is coming from in your code if you need this information.</li> + <li>The <code>minValue</code> and <code>maxValue</code> attributes are read-only values representing the nominal range for the {{domxref("AudioParam")}}. For example, for {{domxref("GainNode") }}, these values are 0 and 1, respectively. Note that these bounds are not enforced by the engine, and are merely used for informational purposes. As an example, it's perfectly valid to set a gain value to 2, or even -1. In order to find out these nominal values, you can consult the <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">specification</a>.</li> + <li>The <code>units</code> attribute as implemented in <code>webkitAudioContext</code> implementations is unused, and always returns 0. There is no reason why you should need this attribute.</li> +</ul> + +<h2 id="Removal_of_MediaElementAudioSourceNode.mediaElement">Removal of MediaElementAudioSourceNode.mediaElement</h2> + +<p>The <code>mediaElement</code> attribute of {{domxref("MediaElementAudioSourceNode")}} has been removed. You can keep a reference to the media element used to create this node if you need to access it later.</p> + +<h2 id="Removal_of_MediaStreamAudioSourceNode.mediaStream">Removal of MediaStreamAudioSourceNode.mediaStream</h2> + +<p>The <code>mediaStream</code> attribute of {{domxref("MediaStreamAudioSourceNode")}} has been removed. You can keep a reference to the media stream used to create this node if you need to access it later.</p> diff --git a/files/ko/web/api/web_audio_api/simple_synth/index.html b/files/ko/web/api/web_audio_api/simple_synth/index.html new file mode 100644 index 0000000000..2ac3a7cf14 --- /dev/null +++ b/files/ko/web/api/web_audio_api/simple_synth/index.html @@ -0,0 +1,578 @@ +--- +title: '예제와 튜토리얼: 간단한 신시사이저 키보드' +slug: Web/API/Web_Audio_API/Simple_synth +tags: + - Audio + - Example + - Guide + - Media + - Oscillator + - Piano + - Synthesizer + - Tutorial + - Web Audio API +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p>이 문서는 마우스를 사용해 플레이할 수 있는 비디오 키보드의 데모와 코드를 보여줍니다. 이 키보드는 표준 파형들과 사용자 정의 파형 중에서 선택할 수 있는 기능을 제공하고, 키보드 아래에 있는 볼륨 슬라이더를 사용하여 메인 gain을 제어할 수 있습니다. 이 예제는 다음의 Web API 인터페이스를 사용합니다: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, 그리고 {{domxref("GainNode")}}.</p> + +<p>{{domxref("OscillatorNode")}}가 {{domxref("AudioScheduledSourceNode")}}에 기반하기 때문에, 이것은 또한 얼마간 그것에 대한 예제이기도 합니다.</p> + +<h2 id="The_video_keyboard">비디오 키보드</h2> + +<h3 id="HTML">HTML</h3> + +<p>이 가상 키보드의 디스플레이에는 세 가지 주요한 컴포넌트가 있습니다. 첫번째는 뮤지컬 키보드 그 자체입니다. 우리는 이것을 중첩된 {{HTMLElement("div")}} 요소의 쌍으로 그려 만약 모든 건반이 화면에 맞지 않으면 그것들이 줄바꿈되는 일 없이 키보드를 가로로 스크롤할 수 있게 되도록 만들 것입니다.</p> + +<h4 id="The_keyboard">키보드</h4> + +<p>첫째로, 키보드를 넣을 공간을 만듭니다. 우리는 프로그래밍적으로 키보드를 구성할 것인데, 왜냐하면 그렇게 하는 것은 우리에게 해당하는 음에 대한 적절한 데이터를 결정하면서 각각의 건반을 설정하는 유연성을 주기 때문입니다. 우리의 경우, 우리는 표로부터 각 음의 주파수를 얻지만, 이것은 또한 알고리즘적으로도 계산될 수 있습니다.</p> + +<pre class="brush: html"><div class="container"> + <div class="keyboard"></div> +</div> +</pre> + +<p><code>"container"</code>라는 이름의 {{HTMLElement("div")}}는 만약 이것이 이용 가능한 공간에 대해 너무 넓으면 가로로 스크롤될 수 있는 박스입니다. 건반들 자체는 <code>"keyboard"</code> 클래스의 블록 안으로 삽입될 것입니다.</p> + +<h4 id="The_settings_bar">설정 바</h4> + +<p>키보드 아래에, 우리는 레이어를 설정하기 위한 조종 장치를 놓을 것입니다. 우선은, 우리는 두 조종 장치를 가지고 있습니다: 하나는 메인 볼륨을 설정하기 위한 것이고 나머지 하나는 노트를 생성할 때 어떤 주기적인 파형을 사용할 지 고르기 위한 것입니다.</p> + +<h5 id="The_volume_control">볼륨 컨트롤</h5> + +<p>첫째로 우리는 필요한 대로 스타일될 수 있도록, 설정 바를 포함하는 <code><div></code>를 생성합니다. 그리고 나서 바의 좌측에 나타날 박스를 생성하고 라벨과 <code>"range"</code> 유형의 {{HTMLElement("input")}} 요소를 배치합니다. range 요소는 보통 슬라이더로 표현됩니다; 각 위치마다 0.01만큼 움직이며 0.0과 1.0 사이의 모든 값을 허용하게 설정합니다.</p> + +<pre class="brush: html"><div class="settingsBar"> + <div class="left"> + <span>Volume: </span> + <input type="range" min="0.0" max="1.0" step="0.01" + value="0.5" list="volumes" name="volume"> + <datalist id="volumes"> + <option value="0.0" label="Mute"> + <option value="1.0" label="100%"> + </datalist> + </div> +</pre> + +<p>우리는 기본값을 0.5로 명시하고, ID가 맞는 옵션 목록을 찾기 위해 {{htmlattrxref("name")}} 특성을 사용하여 range에 연결된 {{HTMLElement("datalist")}} 요소를 제공합니다; 이 경우, 데이터셋은 <code>"volume"</code>이라는 이름입니다. 이는 우리로 하여금 브라우저가 옵션적으로 어떤 방식으로 디스플레이하기를 선택할지도 모르는 특별한 문자열과 일반적인 값의 집합을 제공하게 합니다; 우리는 값 0.0 ("무음")과 1.0 ("100%")에 대해 이름을 제공합니다.</p> + +<h5 id="The_waveform_picker">파형 선택기</h5> + +<p>세팅 바의 우측에, 우리는 라벨과 이용 가능한 파형에 부합하는 옵션을 가지고 있는 <code>"waveform"</code>라는 이름의 {{HTMLElement("select")}} 요소를 배치합니다.</p> + +<pre class="brush: html"> <div class="right"> + <span>Current waveform: </span> + <select name="waveform"> + <option value="sine">Sine</option> + <option value="square" selected>Square</option> + <option value="sawtooth">Sawtooth</option> + <option value="triangle">Triangle</option> + <option value="custom">Custom</option> + </select> + </div> +</div></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + overflow-x: scroll; + overflow-y: hidden; + width: 660px; + height: 110px; + white-space: nowrap; + margin: 10px; +} + +.keyboard { + width: auto; + padding: 0; + margin: 0; +} + +.key { + cursor: pointer; + font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif; + border: 1px solid black; + border-radius: 5px; + width: 20px; + height: 80px; + text-align: center; + box-shadow: 2px 2px darkgray; + display: inline-block; + position: relative; + margin-right: 3px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.key div { + position: absolute; + bottom: 0; + text-align: center; + width: 100%; + pointer-events: none; +} + +.key div sub { + font-size: 10px; + pointer-events: none; +} + +.key:hover { + background-color: #eef; +} + +.key:active { + background-color: #000; + color: #fff; +} + +.octave { + display: inline-block; + padding: 0 6px 0 0; +} + +.settingsBar { + padding-top: 8px; + font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif; + position: relative; + vertical-align: middle; + width: 100%; + height: 30px; +} + +.left { + width: 50%; + position: absolute; + left: 0; + display: table-cell; + vertical-align: middle; +} + +.left span, .left input { + vertical-align: middle; +} + +.right { + width: 50%; + position: absolute; + right: 0; + display: table-cell; + vertical-align: middle; +} + +.right span { + vertical-align: middle; +} + +.right input { + vertical-align: baseline; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>JavaScript 코드는 몇 개의 변수를 초기화함으로써 시작합니다.</p> + +<pre class="brush: js">let audioContext = new (window.AudioContext || window.webkitAudioContext)(); +let oscList = []; +let mainGainNode = null; +</pre> + +<ol> + <li><code>audioContext</code>는 전역 {{domxref("AudioContext")}} 객체를 (또는 필요하다면 <code>webkitAudioContext</code>를) 참조하기 위해 설정되었습니다.</li> + <li><code>oscList</code>는 현재 재생되고 있는 모든 oscillator를 포함할 준비가 되기 위해 설정되었습니다. 이것은 빈 상태로 시작하는데, 왜냐하면 아직 어떤 것도 재생되고 있지 않기 때문입니다.</li> + <li><code>mainGainNode</code>은 null로 설정되었습니다; 설정 과정 중에, 이것은 재생되는 모든 oscillator가 연결되고 슬라이더를 사용해 전체 볼륨이 제어되도록 하는 {{domxref("GainNode")}}를 포함하도록 설정될 것입니다.</li> +</ol> + +<pre class="brush: js">let keyboard = document.querySelector(".keyboard"); +let wavePicker = document.querySelector("select[name='waveform']"); +let volumeControl = document.querySelector("input[name='volume']"); +</pre> + +<p>접근이 필요한 요소들에의 참조는 위와 같이 얻어집니다:</p> + +<ul> + <li><code>keyboard</code>는 건반이 배치될 컨테이너입니다.</li> + <li><code>wavePicker</code>는 음에 대해 사용할 파형을 선택하는 데 사용되는 {{HTMLElement("select")}} 요소입니다.</li> + <li><code>volumeControl</code>는 메인 오디오 볼륨을 제어하기 위해 사용되는 (<code>"range"</code> 유형의) {{HTMLElement("input")}} 요소입니다.</li> +</ul> + +<pre class="brush: js">let noteFreq = null; +let customWaveform = null; +let sineTerms = null; +let cosineTerms = null; +</pre> + +<p>마지막으로, 파형을 생성할 때 사용될 전역 변수들이 생성됩니다:</p> + +<ul> + <li><code>noteFreq</code>는 배열들의 배열입니다; 각 배열은 하나의 옥타브를 나타내는데, 그 옥타브에 있는 각 음에 대한 항목을 포함합니다. 각각에 대한 값은 음의 음색을 나타내는 헤르츠로 표현되는 주파수입니다.</li> + <li><code>customWaveform</code>는 사용자가 "Custom"을 파형 선택기에서 선택했을 때 사용할 파형을 기술하는 {{domxref("PeriodicWave")}}로 설정될 것입니다.</li> + <li><code>sineTerms</code> 와 <code>cosineTerms</code>는 파형을 생성하기 위한 데이터를 저장하기 위해 사용될 것입니다; 각각은 사용자가 "Custom"을 선택했을 때 생성되는 배열을 포함할 것입니다.</li> +</ul> + +<h3 id="Creating_the_note_table">음 테이블 생성하기</h3> + +<p><code>createNoteTable()</code> 함수는 각 옥타브를 나타내는 객체의 배열을 포함하는 <code>noteFreq</code> 배열을 만듭니다. 차례로 각 옥타브는 그 옥타브에 있는 각 음에 대한 하나의 지정된 속성을 가집니다; 그 속성의 이름은 음의 이름입니다 (예를 들자면 C-sharp는 "C#"로 표현됩니다), 그리고 값은 헤르츠로 표현되는 그 음의 주파수입니다.</p> + +<pre class="brush: js">function createNoteTable() { + let noteFreq = []; + for (let i=0; i< 9; i++) { + noteFreq[i] = []; + } + + noteFreq[0]["A"] = 27.500000000000000; + noteFreq[0]["A#"] = 29.135235094880619; + noteFreq[0]["B"] = 30.867706328507756; + + noteFreq[1]["C"] = 32.703195662574829; + noteFreq[1]["C#"] = 34.647828872109012; + noteFreq[1]["D"] = 36.708095989675945; + noteFreq[1]["D#"] = 38.890872965260113; + noteFreq[1]["E"] = 41.203444614108741; + noteFreq[1]["F"] = 43.653528929125485; + noteFreq[1]["F#"] = 46.249302838954299; + noteFreq[1]["G"] = 48.999429497718661; + noteFreq[1]["G#"] = 51.913087197493142; + noteFreq[1]["A"] = 55.000000000000000; + noteFreq[1]["A#"] = 58.270470189761239; + noteFreq[1]["B"] = 61.735412657015513; +</pre> + +<p>... 간결성을 위해 몇몇 옥타브는 생략되었습니다 ...</p> + +<div class="hidden"> +<pre class="brush: js"> noteFreq[2]["C"] = 65.406391325149658; + noteFreq[2]["C#"] = 69.295657744218024; + noteFreq[2]["D"] = 73.416191979351890; + noteFreq[2]["D#"] = 77.781745930520227; + noteFreq[2]["E"] = 82.406889228217482; + noteFreq[2]["F"] = 87.307057858250971; + noteFreq[2]["F#"] = 92.498605677908599; + noteFreq[2]["G"] = 97.998858995437323; + noteFreq[2]["G#"] = 103.826174394986284; + noteFreq[2]["A"] = 110.000000000000000; + noteFreq[2]["A#"] = 116.540940379522479; + noteFreq[2]["B"] = 123.470825314031027; + + noteFreq[3]["C"] = 130.812782650299317; + noteFreq[3]["C#"] = 138.591315488436048; + noteFreq[3]["D"] = 146.832383958703780; + noteFreq[3]["D#"] = 155.563491861040455; + noteFreq[3]["E"] = 164.813778456434964; + noteFreq[3]["F"] = 174.614115716501942; + noteFreq[3]["F#"] = 184.997211355817199; + noteFreq[3]["G"] = 195.997717990874647; + noteFreq[3]["G#"] = 207.652348789972569; + noteFreq[3]["A"] = 220.000000000000000; + noteFreq[3]["A#"] = 233.081880759044958; + noteFreq[3]["B"] = 246.941650628062055; + + noteFreq[4]["C"] = 261.625565300598634; + noteFreq[4]["C#"] = 277.182630976872096; + noteFreq[4]["D"] = 293.664767917407560; + noteFreq[4]["D#"] = 311.126983722080910; + noteFreq[4]["E"] = 329.627556912869929; + noteFreq[4]["F"] = 349.228231433003884; + noteFreq[4]["F#"] = 369.994422711634398; + noteFreq[4]["G"] = 391.995435981749294; + noteFreq[4]["G#"] = 415.304697579945138; + noteFreq[4]["A"] = 440.000000000000000; + noteFreq[4]["A#"] = 466.163761518089916; + noteFreq[4]["B"] = 493.883301256124111; + + noteFreq[5]["C"] = 523.251130601197269; + noteFreq[5]["C#"] = 554.365261953744192; + noteFreq[5]["D"] = 587.329535834815120; + noteFreq[5]["D#"] = 622.253967444161821; + noteFreq[5]["E"] = 659.255113825739859; + noteFreq[5]["F"] = 698.456462866007768; + noteFreq[5]["F#"] = 739.988845423268797; + noteFreq[5]["G"] = 783.990871963498588; + noteFreq[5]["G#"] = 830.609395159890277; + noteFreq[5]["A"] = 880.000000000000000; + noteFreq[5]["A#"] = 932.327523036179832; + noteFreq[5]["B"] = 987.766602512248223; + + noteFreq[6]["C"] = 1046.502261202394538; + noteFreq[6]["C#"] = 1108.730523907488384; + noteFreq[6]["D"] = 1174.659071669630241; + noteFreq[6]["D#"] = 1244.507934888323642; + noteFreq[6]["E"] = 1318.510227651479718; + noteFreq[6]["F"] = 1396.912925732015537; + noteFreq[6]["F#"] = 1479.977690846537595; + noteFreq[6]["G"] = 1567.981743926997176; + noteFreq[6]["G#"] = 1661.218790319780554; + noteFreq[6]["A"] = 1760.000000000000000; + noteFreq[6]["A#"] = 1864.655046072359665; + noteFreq[6]["B"] = 1975.533205024496447; +</pre> +</div> + +<pre class="brush: js"> noteFreq[7]["C"] = 2093.004522404789077; + noteFreq[7]["C#"] = 2217.461047814976769; + noteFreq[7]["D"] = 2349.318143339260482; + noteFreq[7]["D#"] = 2489.015869776647285; + noteFreq[7]["E"] = 2637.020455302959437; + noteFreq[7]["F"] = 2793.825851464031075; + noteFreq[7]["F#"] = 2959.955381693075191; + noteFreq[7]["G"] = 3135.963487853994352; + noteFreq[7]["G#"] = 3322.437580639561108; + noteFreq[7]["A"] = 3520.000000000000000; + noteFreq[7]["A#"] = 3729.310092144719331; + noteFreq[7]["B"] = 3951.066410048992894; + + noteFreq[8]["C"] = 4186.009044809578154; + return noteFreq; +} +</pre> + +<p>결과는 <code>noteFreq</code> 배열인데, 이는 각 옥타브에 대한 객체를 가지고 있습니다. 각 옥타브 객체는 속성 이름이 음의 이름이고 (예를 들자면 C-sharp는 "C#"로 표현됩니다) 속성의 값은 헤르츠로 표현되는 음의 주파수인 지정된 속성들을 가지고 있습니다. 부분적으로는, 결과 객체는 다음과 같이 보입니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">옥타브</th> + <td colspan="8">음</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row">0</th> + <td>"A" ⇒ 27.5</td> + <td>"A#" ⇒ 29.14</td> + <td>"B" ⇒ 30.87</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row">1</th> + <td>"C" ⇒ 32.70</td> + <td>"C#" ⇒ 34.65</td> + <td>"D" ⇒ 36.71</td> + <td>"D#" ⇒ 38.89</td> + <td>"E" ⇒ 41.20</td> + <td>"F" ⇒ 43.65</td> + <td>"F#" ⇒ 46.25</td> + <td>"G" ⇒ 49</td> + <td>"G#" ⇒ 51.9</td> + <td>"A" ⇒ 55</td> + <td>"A#" ⇒ 58.27</td> + <td>"B" ⇒ 61.74</td> + </tr> + <tr> + <th scope="row">2</th> + <td colspan="12">. . .</td> + </tr> + </tbody> +</table> + +<p>준비된 이 표를 가지고, 우리는 특정한 옥타브에 있는 주어진 음에 대한 주파수를 꽤 쉽게 찾을 수 있습니다. 만약 우리가 옥타브 1의 G# 음의 주파수를 원한다면, 우리는 <code>noteFreq[1]["G#"]</code>을 사용하여 결과로 51.9의 값을 얻습니다.</p> + +<div class="note"> +<p>위의 예시 표의 값들은 소숫점 둘째 자리까지 반올림되었습니다.</p> +</div> + +<div class="hidden"> +<p>This polyfill stands in when <code>Object.entries()</code> doesn't exist.</p> + +<pre class="brush: js">if (!Object.entries) { + Object.entries = function entries(O) { + return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []); + }; +} +</pre> +</div> + +<h3 id="Building_the_keyboard">키보드 만들기</h3> + +<p><code>setup()</code> 함수의 역할은 키보드를 만들고 앱이 음악을 재생하도록 준비하는 것입니다.</p> + +<pre class="brush: js">function setup() { + noteFreq = createNoteTable(); + + volumeControl.addEventListener("change", changeVolume, false); + + mainGainNode = audioContext.createGain(); + mainGainNode.connect(audioContext.destination); + mainGainNode.gain.value = volumeControl.value; + + // Create the keys; skip any that are sharp or flat; for + // our purposes we don't need them. Each octave is inserted + // into a <div> of class "octave". + + noteFreq.forEach(function(keys, idx) { + let keyList = Object.entries(keys); + let octaveElem = document.createElement("div"); + octaveElem.className = "octave"; + + keyList.forEach(function(key) { + if (key[0].length == 1) { + octaveElem.appendChild(createKey(key[0], idx, key[1])); + } + }); + + keyboard.appendChild(octaveElem); + }); + + document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false); + + sineTerms = new Float32Array([0, 0, 1, 0, 1]); + cosineTerms = new Float32Array(sineTerms.length); + customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms); + + for (i=0; i<9; i++) { + oscList[i] = {}; + } +} + +setup();</pre> + +<ol> + <li>음의 이름과 옥타브를 주파수에 대응(map)시키는 표는 <code>createNoteTable()</code>를 호출함으로써 생성됩니다.</li> + <li>메인 gain 제어에서 {{event("change")}} 이벤트를 다루기 위해 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 호출함으로써 이벤트 핸들러가 생성되었습니다. 이것은 메인 gain 노드의 음량을 제어의 새 값으로 업데이트 합니다.</li> + <li>다음으로, 음 주파수 표에 있는 각 옥타브에 대해 순회합니다. 각 옥타브에 대해, 우리는 그 옥타브에 있는 음들의 목록을 얻기 위해 {{jsxref("Object.entries()")}}를 사용합니다.</li> + <li>그 옥타브의 음들을 포함하는 {{HTMLElement("div")}}를 생성하고 (이렇게 함으로써 우리는 옥타브들 사이에 약간의 공간을 가질 수 있습니다), 이것의 클래스명을 "octave"로 설정합니다.</li> + <li>옥타브에 있는 각 건반에 대해, 우리는 음의 이름이 한 문자보다 많은지 검사합니다. 우리는 이것을 생략하는데, 왜냐하면 우리는 이 예제에서 샤프(#) 음들을 무시하기 때문입니다. 만약 음의 이름이 단지 한 문자라면, 우리는 <code>createKey()</code>를 호출하는데, 이는 음의 문자열, 옥타브, 그리고 주파수를 명시합니다. 이 반환된 요소는 단계 4에서 생성된 옥타브 요소에 추가됩니다.</li> + <li>각 옥타브 요소가 생성되었을 때, 키보드에 추가됩니다.</li> + <li>키보드가 생성되고 나면, 옥타브 5의 "B" 음이 보이도록 스크롤합니다; 이것은 주변 건반들을 따라 중앙 '다' 음이 보이도록 하는 효과를 가지고 있습니다.</li> + <li>그리고 나서 새로운 사용자 정의 파형이 {{domxref("AudioContext.createPeriodicWave()")}}를 사용하여 생성됩니다. 이 파형은 언제든지 사용자가 파형 선택기에서 "Custom"을 선택했을 때 사용될 것입니다.</li> + <li>마지막으로, oscillator 목록이 어떤 oscillator가 어떤 건반과 연관되어 있는지를 식별하는 정보를 받기 위한 준비가 되었다는 것을 보장하도록 초기화됩니다.</li> +</ol> + +<h4 id="Creating_a_key">건반 생성하기</h4> + +<p><code>createKey()</code> 함수는 가상 키보드에 표시하기를 원하는 각각의 건반에 대해 한 번 호출됩니다. 이것은 건반과 건반의 라벨으로 구성되는 요소를 생성하고, 추후의 사용을 위해 그 요소에 데이터 특성을 추가하고, 그리고 우리가 관심을 가지고 있는 이벤트에 대한 이벤트 핸들러를 부여합니다.</p> + +<pre class="brush: js">function createKey(note, octave, freq) { + let keyElement = document.createElement("div"); + let labelElement = document.createElement("div"); + + keyElement.className = "key"; + keyElement.dataset["octave"] = octave; + keyElement.dataset["note"] = note; + keyElement.dataset["frequency"] = freq; + + labelElement.innerHTML = note + "<sub>" + octave + "</sub>"; + keyElement.appendChild(labelElement); + + keyElement.addEventListener("mousedown", notePressed, false); + keyElement.addEventListener("mouseup", noteReleased, false); + keyElement.addEventListener("mouseover", notePressed, false); + keyElement.addEventListener("mouseleave", noteReleased, false); + + return keyElement; +} +</pre> + +<p>건반과 건반의 라벨을 표현할 요소를 생성한 이후, 건반의 클래스를 (외양을 설정하는) "key"로 설정함으로써 건반의 요소를 설정합니다. 그리고 나서 건반의 옥타브(<code>data-octave</code> 특성), 재생할 음을 표현하는 문자열(<code>data-note</code> 특성), 헤르츠로 표현되는 주파수(<code>data-frequency</code> 특성)를 포함하는 {{htmlattrxref("data-*")}} 특성을 추가합니다. 이것은 우리로 하여금 이벤트를 다룰 때 필요한 경우 쉽게 이 정보를 가져올 수 있도록 할 것입니다.</p> + +<h3 id="Making_music">음악 만들기</h3> + +<h4 id="Playing_a_tone">음 재생하기</h4> + +<p><code>playTone()</code> 함수의 역할은 주어진 주파수의 음을 재생하는 것입니다. 이것은 적절한 음을 재생하는 키보드 건반의 이벤트 핸들러에 의해 사용될 것입니다.</p> + +<pre class="brush: js">function playTone(freq) { + let osc = audioContext.createOscillator(); + osc.connect(mainGainNode); + + let type = wavePicker.options[wavePicker.selectedIndex].value; + + if (type == "custom") { + osc.setPeriodicWave(customWaveform); + } else { + osc.type = type; + } + + osc.frequency.value = freq; + osc.start(); + + return osc; +} +</pre> + +<p><code>playTone()</code>은 {{domxref("AudioContext.createOscillator()")}} 메서드를 호출하여 새로운 {{domxref("OscillatorNode")}}를 생성함으로써 시작합니다. 그리고 나서 우리는 이것을 메인 gain 노드에 새로운 oscillator의 {{domxref("OscillatorNode.connect()")}} 메서드를 호출함으로써 연결하는데, 이는 oscillator에게 이것의 결과를 어디로 보낼지 알려줍니다. 이렇게 함으로써, 메인 gain 노드의 gain을 변경하는 것은 생성되는 모든 음의 볼륨에 영향을 미칠 것입니다.</p> + +<p>그리고 나서 우리는 사용할 파형의 유형을 세팅 바의 파형 선택기의 값을 검사함으로써 얻습니다. 만약 사용자가 이것을 <code>"custom"</code>으로 설정했다면, 우리는 사용자 정의 파형을 사용할 oscillator를 설정하기 위하여 {{domxref("OscillatorNode.setPeriodicWave()")}}를 호출합니다. 이를 하는 것은 자동적으로 oscillator의 {{domxref("OscillatorNode.type", "type")}}을 <code>custom</code>으로 설정합니다. 만약 파형 선택기에서 다른 파형이 선택되었다면, 우리는 oscillator의 유형을 선택기의 값으로 설정합니다; 그 값은 <code>sine</code>, <code>square</code>, <code>triangle</code>, 그리고 <code>sawtooth</code> 중 하나일 것입니다.</p> + +<p>oscillator의 주파수는 {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} 객체의 값을 설정함으로써 <code>freq</code> 파라미터에 명시된 값으로 설정됩니다. 그리고서, 마침내, oscillator는 상속된 {{domxref("AudioScheduledSourceNode.start()")}} 메서드를 호출하여 소리를 생성하도록 시작됩니다.</p> + +<h4 id="Playing_a_tone_2">음 재생하기</h4> + +<p>{{event("mousedown")}} 이나 {{domxref("mouseover")}} 이벤트가 건반에서 발생했을 때, 우리는 대응하는 음을 재생하기를 원합니다. <code>notePressed()</code> 함수는 이 이벤트들에 대한 이벤트 핸들러로 사용됩니다.</p> + +<pre class="brush: js">function notePressed(event) { + if (event.buttons & 1) { + let dataset = event.target.dataset; + + if (!dataset["pressed"]) { + let octave = +dataset["octave"]; + oscList[octave][dataset["note"]] = playTone(dataset["frequency"]); + dataset["pressed"] = "yes"; + } + } +} +</pre> + +<p>두 가지 이유로, 우리는 주요 마우스 버튼이 눌러졌는지를 확인함으로써 시작합니다. 첫째로, 우리는 오직 주요 마우스 버튼이 노트 재생을 할 수 있게 허용하기를 원합니다. 둘째로, 그리고 더욱 중요하게, 우리는 유저가 음에서 음으로 드래그하는 경우에 대해 {{event("mouseover")}}를 다루기 위해 이것을 사용하고, 우리는 오직 마우스가 요소에 들어왔을 때 눌러졌다면 노트를 재생하기를 원합니다.</p> + +<p>만약 마우스 버튼이 실제로 눌러졌다면, 우리는 눌러진 건반의 {{htmlattrxref("dataset")}} 특성을 얻습니다; 이는 요소의 사용자 정의 데이터 특성에 접근하는 것을 쉽게 해 줍니다. 우리는 <code>data-pressed</code> 특성을 찾습니다; 만약 (음이 이미 재생되고 있지 않다는 것을 나타내는) 그것이 없다면, 요소의 <code>data-frequency</code> 특성 값을 전달하며, 우리는 음을 재생하기 위해 <code>playTone()</code>을 호출합니다. 반환된 oscillator는 <code>oscList</code>에 미래의 참조를 위해 저장되고, <code>data-pressed</code>는 음이 재생되고 있다는 것을 나타내기 위해 <code>yes</code>로 설정되어 다음 번에 이것이 호출되었을 때 이것을 다시 시작하지 않습니다.</p> + +<h4 id="Stopping_a_tone">음 멈추기</h4> + +<p><code>noteReleased()</code> 함수는 사용자가 마우스 버튼을 떼거나 마우스를 현재 재생되고 있는 건반 밖으로 이동시켰을 때 호출되는 이벤트 핸들러입니다.</p> + +<pre class="brush: js">function noteReleased(event) { + let dataset = event.target.dataset; + + if (dataset && dataset["pressed"]) { + let octave = +dataset["octave"]; + oscList[octave][dataset["note"]].stop(); + delete oscList[octave][dataset["note"]]; + delete dataset["pressed"]; + } +} +</pre> + +<p><code>noteReleased()</code>는 사용자 정의 <code>data-octave</code>와 <code>data-note</code> 특성을 건반의 oscillator를 찾아보기 위해 사용하고, 그리고 나서 음 재생을 멈추기 위해 oscillator의 상속된 {{domxref("AudioScheduledSourceNode.stop", "stop()")}} 메서드를 호출합니다. 마지막으로, 음이 현재 재생되고 있지 않다는 것을 나타내기 위해, 음에 대한 <code>oscList</code> 항목은 지워지고 <code>data-pressed</code> 특성은 ({{domxref("event.target")}}에 의해 식별된) 건반 요소로부터 제거됩니다.</p> + +<h4 id="main">메인 볼륨 변경하기</h4> + +<p>세팅 바의 볼륨 슬라이더는 메인 gain 노드의 gain 값을 변경하기 위한 간단한 인터페이스를 제공하는데, 이로써 재생되는 모든 음의 세기를 변경합니다. <code>changeVolume()</code> 메서드는 슬라이더의 {{event("change")}} 이벤트에 대한 핸들러입니다.</p> + +<pre class="brush: js">function changeVolume(event) { + mainGainNode.gain.value = volumeControl.value +} +</pre> + +<p>이것은 메인 gain 노드의 <code>gain</code> {{domxref("AudioParam")}}의 값을 슬라이더의 새로운 값으로 설정합니다.</p> + +<h3 id="Result">결과</h3> + +<p>이를 모두 합하면, 결과는 간단하지만 작동하는 마우스로 이용 가능한 뮤지컬 키보드입니다.</p> + +<p>{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}</p> + +<h2 id="See_also">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("AudioContext")}}</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/tools/index.html b/files/ko/web/api/web_audio_api/tools/index.html new file mode 100644 index 0000000000..beee9d6fb4 --- /dev/null +++ b/files/ko/web/api/web_audio_api/tools/index.html @@ -0,0 +1,41 @@ +--- +title: Tools for analyzing Web Audio usage +slug: Web/API/Web_Audio_API/Tools +tags: + - API + - Audio + - Debugging + - Media + - Tools + - Web + - Web Audio + - Web Audio API + - sound +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p>While working on your Web Audio API code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work. This article discusses tools available to help you do that.</p> + +<h2 id="Chrome">Chrome</h2> + +<p>A handy web audio inspector can be found in the <a href="https://chrome.google.com/webstore/detail/web-audio-inspector/cmhomipkklckpomafalojobppmmidlgl">Chrome Web Store</a>.</p> + +<h2 id="Edge">Edge</h2> + +<p><em>Add information for developers using Microsoft Edge.</em></p> + +<h2 id="Firefox">Firefox</h2> + +<p>Firefox offers a native <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a>.</p> + +<h2 id="Safari">Safari</h2> + +<p><em>Add information for developers working in Safari.</em></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></li> +</ul> diff --git a/files/ko/web/api/web_audio_api/using_audioworklet/index.html b/files/ko/web/api/web_audio_api/using_audioworklet/index.html new file mode 100644 index 0000000000..b103225f09 --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_audioworklet/index.html @@ -0,0 +1,325 @@ +--- +title: Background audio processing using AudioWorklet +slug: Web/API/Web_Audio_API/Using_AudioWorklet +tags: + - API + - Audio + - AudioWorklet + - Background + - Examples + - Guide + - Processing + - Web Audio + - Web Audio API + - WebAudio API + - sound +--- +<p>{{APIRef("Web Audio API")}}</p> + +<p>When the Web Audio API was first introduced to browsers, it included the ability to use JavaScript code to create custom audio processors that would be invoked to perform real-time audio manipulations. The drawback to <code>ScriptProcessorNode</code> was simple: it ran on the main thread, thus blocking everything else going on until it completed execution. This was far less than ideal, especially for something that can be as computationally expensive as audio processing.</p> + +<p>Enter {{domxref("AudioWorklet")}}. An audio context's audio worklet is a {{domxref("Worklet")}} which runs off the main thread, executing audio processing code added to it by calling the context's {{domxref("Worklet.addModule", "audioWorklet.addModule()")}} method. Calling <code>addModule()</code> loads the specified JavaScript file, which should contain the implementation of the audio processor. With the processor registered, you can create a new {{domxref("AudioWorkletNode")}} which passes the audio through the processor's code when the node is linked into the chain of audio nodes along with any other audio nodes.</p> + +<p><span class="seoSummary">The process of creating an audio processor using JavaScript, establishing it as an audio worklet processor, and then using that processor within a Web Audio application is the topic of this article.</span></p> + +<p>It's worth noting that because audio processing can often involve substantial computation, your processor may benefit greatly from being built using <a href="/en-US/docs/WebAssembly">WebAssembly</a>, which brings near-native or fully native performance to web apps. Implementing your audio processing algorithm using WebAssembly can make it perform markedly better.</p> + +<h2 id="High_level_overview">High level overview</h2> + +<p>Before we start looking at the use of AudioWorklet on a step-by-step basis, let's start with a brief high-level overview of what's involved.</p> + +<ol> + <li>Create module that defines a audio worklet processor class, based on {{domxref("AudioWorkletProcessor")}} which takes audio from one or more incoming sources, performs its operation on the data, and outputs the resulting audio data.</li> + <li>Access the audio context's {{domxref("AudioWorklet")}} through its {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} property, and call the audio worklet's {{domxref("Worklet.addModule", "addModule()")}} method to install the audio worklet processor module.</li> + <li>As needed, create audio processing nodes by passing the processor's name (which is defined by the module) to the {{domxref("AudioWorkletNode.AudioWorkletNode", "AudioWorkletNode()")}} constructor.</li> + <li>Set up any audio parameters the {{domxref("AudioWorkletNode")}} needs, or that you wish to configure. These are defined in the audio worklet processor module.</li> + <li>Connect the created <code>AudioWorkletNode</code>s into your audio processing pipeline as you would any other node, then use your audio pipeline as usual.</li> +</ol> + +<p>Throughout the remainder of this article, we'll look at these steps in more detail, with examples (including working examples you can try out on your own).</p> + +<p>The example code found on this page is derived from <a href="https://mdn.github.io/webaudio-examples/audioworklet/">this working example</a> which is part of MDN's <a href="https://github.com/mdn/webaudio-examples/">GitHub repository of Web Audio examples</a>. The example creates an oscillator node and adds white noise to it using an {{domxref("AudioWorkletNode")}} before playing the resulting sound out. Slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output.</p> + +<p><a href="https://github.com/mdn/webaudio-examples/tree/master/audioworklet"><strong>See the code</strong></a></p> + +<p><a href="https://mdn.github.io/webaudio-examples/audioworklet/"><strong>Try it live</strong></a></p> + +<h2 id="Creating_an_audio_worklet_processor">Creating an audio worklet processor</h2> + +<p>Fundamentally, an audio worklet processor (which we'll refer to usually as either an "audio processor" or as a "processor" because otherwise this article will be about twice as long) is implemented using a JavaScript module that defines and installs the custom audio processor class.</p> + +<h3 id="Structure_of_an_audio_worklet_processor">Structure of an audio worklet processor</h3> + +<p>An audio worklet processor is a JavaScript module which consists of the following:</p> + +<ul> + <li>A JavaScript class which defines the audio processor. This class extends the {{domxref("AudioWorkletProcessor")}} class.</li> + <li>The audio processor class must implement a {{domxref("AudioWorkletProcessor.process", "process()")}} method, which receives incoming audio data and writes back out the data as manipulated by the processor.</li> + <li>The module installs the new audio worklet processor class by calling {{domxref("AudioWorkletGlobalScope.registerProcessor", "registerProcessor()")}}, specifying a name for the audio processor and the class that defines the processor.</li> +</ul> + +<p>A single audio worklet processor module may define multiple processor classes, registering each of them with individual calls to <code>registerProcessor()</code>. As long as each has its own unique name, this will work just fine. It's also more efficient than loading multiple modules from over the network or even the user's local disk.</p> + +<h3 id="Basic_code_framework">Basic code framework</h3> + +<p>The barest framework of an audio processor class looks like this:</p> + +<pre class="brush: js">class MyAudioProcessor extends AudioWorkletProcessor { + constructor() { + super(); + } + + process(inputList, outputList, parameters) { + /* using the inputs (or not, as needed), write the output + into each of the outputs */ + + return true; + } +}; + +registerProcessor("my-audio-processor", MyAudioProcessor); +</pre> + +<p>After the implementation of the processor comes a call to the global function {{domxref("AudioWorkletGlobalScope.registerProcessor", "registerProcessor()")}}, which is only available within the scope of the audio context's {{domxref("AudioWorklet")}}, which is the invoker of the processor script as a result of your call to {{domxref("Worklet.addModule", "audioWorklet.addModule()")}}. This call to <code>registerProcessor()</code> registers your class as the basis for any {{domxref("AudioWorkletProcessor")}}s created when {{domxref("AudioWorkletNode")}}s are set up.</p> + +<p>This is the barest framework and actually has no effect until code is added into <code>process()</code> to do something with those inputs and outputs. Which brings us to talking about those inputs and outputs.</p> + +<h3 id="The_input_and_output_lists">The input and output lists</h3> + +<p>The lists of inputs and outputs can be a little confusing at first, even though they're actually very simple once you realize what's going on.</p> + +<p>Let's start at the inside and work our way out. Fundamentally, the audio for a single audio channel (such as the left speaker or the subwoofer, for example) is represented as a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></code> whose values are the individual audio samples. By specification, each block of audio your <code>process()</code> function receives contains 128 frames (that is, 128 samples for each channel), but it is planned that <em>this value will change in the future</em>, and may in fact vary depending on circumstances, so you should <em>always</em> check the array's <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length">length</a></code> rather than assuming a particular size. It is, however, guaranteed that the inputs and outputs will have the same block length.</p> + +<p>Each input can have a number of channels. A mono input has a single channel; stereo input has two channels. Surround sound might have six or more channels. So each input is, in turn, an array of channels. That is, an array of <code>Float32Array</code> objects.</p> + +<p>Then, there can be multiple inputs, so the <code>inputList</code> is an array of arrays of <code>Float32Array</code> objects. Each input may have a different number of channels, and each channel has its own array of samples.</p> + +<p>Thus, given the input list <code>inputList</code>:</p> + +<pre class="brush: js">const numberOfInputs = inputList.length; +const firstInput = inputList[0]; + +const firstInputChannelCount = firstInput.length; +const firstInputFirstChannel = firstInput[0]; // (or inputList[0][0]) + +const firstChannelByteCount = firstInputFirstChannel.length; +const firstByteOfFirstChannel = firstInputFirstChannel[0]; // (or inputList[0][0][0]) +</pre> + +<p>The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is an array of <code>Float32Array</code> objects, which contain the samples for that channel.</p> + +<p>How you use the inputs and how you generate the outputs depends very much on your processor. If your processor is just a generator, it can ignore the inputs and just replace the contents of the outputs with the generated data. Or you can process each input independently, applying an algorithm to the incoming data on each channel of each input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). Or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data).</p> + +<p>It's entirely up to you. This is a very powerful tool in your audio programming toolkit.</p> + +<h3 id="Processing_multiple_inputs">Processing multiple inputs</h3> + +<p>Let's take a look at an implementation of <code>process()</code> that can process multiple inputs, with each input being used to generate the corresponding output. Any excess inputs are ignored.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const sourceLimit = Math.min(inputList.length, outputList.length); + + for (let inputNum = 0; inputNum < sourceLimit; inputNum++) { + let input = inputList[inputNum]; + let output = outputList[inputNum]; + let channelCount = Math.min(input.length, output.length); + + for (let channelNum = 0; channelNum < channelCount; channelNum++) { + let sampleCount = input[channelNum].length; + + for (let i = 0; i < sampleCount; i++) { + let sample = input[channelNum][i]; + + /* Manipulate the sample */ + + output[channelNum][i] = sample; + } + } + }; + + return true; +} +</pre> + +<p>Note that when determining the number of sources to process and send through to the corresponding outputs, we use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min">Math.min()</a></code> to ensure that we only process as many channels as we have room for in the output list. The same check is performed when determining how many channels to process in the current input; we only process as many as there are room for in the destination output. This avoids errors due to overrunning these arrays.</p> + +<h3 id="Mixing_inputs">Mixing inputs</h3> + +<p>Many nodes perform <strong>mixing</strong> operations, where the inputs are combined in some way into a single output. This is demonstrated in the following example.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const sourceLimit = Math.min(inputList.length, outputList.length); + for (let inputNum = 0; inputNum < sourceLimit; inputNum++) { + let input = inputList[inputNum]; + let output = outputList[0]; + let channelCount = Math.min(input.length, output.length); + + for (let channelNum = 0; channelNum < channelCount; channelNum++) { + let sampleCount = input[channelNum].length; + + for (let i = 0; i < sampleCount; i++) { + let sample = output[channelNum][i] + input[channelNum][i]; + + if (sample > 1.0) { + sample = 1.0; + } else if (sample < -1.0) { + sample = -1.0; + } + + output[channelNum][i] = sample; + } + } + }; + + return true; +} +</pre> + +<p>This is similar code to the previous sample in many ways, but only the first output—<code>outputList[0]</code>—is altered. Each sample is added to the corresponding sample in the output buffer, with a simple code fragment in place to prevent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing.</p> + +<h2 id="Lifetime_of_an_audio_worklet_processor">Lifetime of an audio worklet processor</h2> + +<p>The only means by which you can influence the lifespan of your audio worklet processor is through the value returned by <code>process()</code>, which should be a Boolean value indicating whether or not to override the {{Glossary("user agent")}}'s decision-making as to whether or not your node is still in use.</p> + +<p>In general, the lifetime policy of any audio node is simple: if the node is still considered to be actively processing audio, it will continue to be used. In the case of an {{domxref("AudioWorkletNode")}}, the node is considered to be active if its <code>process()</code> function returns <code>true</code> <em>and</em> the node is either generating content as a source for audio data, or is receiving data from one or more inputs.</p> + +<p>Specifying a value of <code>true</code> as the result from your <code>process()</code> function in essence tells the Web Audio API that your processor needs to keep being called even if the API doesn't think there's anything left for you to do. In other words, <code>true</code> overrides the API's logic and gives you control over your processor's lifetime policy, keeping the processor's owning {{domxref("AudioWorkletNode")}} running even when it would otherwise decide to shut down the node.</p> + +<p>Returning <code>false</code> from the <code>process()</code> method tells the API that it should follow its normal logic and shut down your processor node if it deems it appropriate to do so. If the API determines that your node is no longer needed, <code>process()</code> will not be called again.</p> + +<div class="notecard note"> +<p><strong>Note:</strong> At this time, unfortunately, Chrome does not implement this algorithm in a manner that matches the current standard. Instead, it keeps the node alive if you return <code>true</code> and shuts it down if you return <code>false</code>. Thus for compatibility reasons you must always return <code>true</code> from <code>process()</code>, at least on Chrome. However, once <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=921354">this Chrome issue</a> is fixed, you will want to change this behavior if possible as it may have a slight negative impact on performance.</p> +</div> + +<h2 id="Creating_an_audio_processor_worklet_node">Creating an audio processor worklet node</h2> + +<p>To create an audio node that pumps blocks of audio data through an {{domxref("AudioWorkletProcessor")}}, you need to follow these simple steps:</p> + +<ol> + <li>Load and install the audio processor module</li> + <li>Create an {{domxref("AudioWorkletNode")}}, specifying the audio processor module to use by its name</li> + <li>Connect inputs to the <code>AudioWorkletNode</code> and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("AudioContext.destination", "destination")}} property.</li> +</ol> + +<p>To use an audio worklet processor, you can use code similar to the following:</p> + +<pre class="brush: js">let audioContext = null; + +async function createMyAudioProcessor() { + if (!audioContext) { + try { + audioContext = new AudioContext(); + await audioContext.resume(); + await audioContext.audioWorklet.addModule("module-url/module.js"); + } catch(e) { + return null; + } + } + + return new AudioWorkletNode(audioContext, "processor-name"); +} +</pre> + +<p>This <code>createMyAudioProcessor()</code> function creates and returns a new instance of {{domxref("AudioWorkletNode")}} configured to use your audio processor. It also handles creating the audio context if it hasn't already been done.</p> + +<p>In order to ensure the context is usable, this starts by creating the context if it's not already available, then adds the module containing the processor to the worklet. Once that's done, it instantiates and returns a new <code>AudioWorkletNode</code>. Once you have that in hand, you connect it to other nodes and otherwise use it just like any other node.</p> + +<p>You can then create a new audio processor node by doing this:</p> + +<pre class="brush: js">let newProcessorNode = createMyAudioProcessor();</pre> + +<p>If the returned value, <code>newProcessorNode</code>, is non-<code>null</code>, we have a valid audio context with its hiss processor node in place and ready to use.</p> + +<h2 id="Supporting_audio_parameters">Supporting audio parameters</h2> + +<p>Just like any other Web Audio node, {{domxref("AudioWorkletNode")}} supports parameters, which are shared with the {{domxref("AudioWorkletProcessor")}} that does the actual work.</p> + +<h3 id="Adding_parameter_support_to_the_processor">Adding parameter support to the processor</h3> + +<p>To add parameters to an {{domxref("AudioWorkletNode")}}, you need to define them within your {{domxref("AudioWorkletProcessor")}}-based processor class in your module. This is done by adding the static getter {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} to your class. This function should return an array of {{domxref("AudioParam")}} objects, one for each parameter supported by the processor.</p> + +<p>In the following implementation of <code>parameterDescriptors()</code>, the returned array has two <code>AudioParam</code> objects. The first defines <code>gain</code> as a value between 0 and 1, with a default value of 0.5. The second parameter is named <code>frequency</code> and defaults to 440.0, with a range from 27.5 to 4186.009, inclusively.</p> + +<pre class="brush: js">static get parameterDescriptors() { + return [ + { + name: "gain", + defaultValue: 0.5, + minValue: 0, + maxValue: 1 + }, + { + name: "frequency", + defaultValue: 440.0; + minValue: 27.5, + maxValue: 4186.009 + } + ]; +}</pre> + +<p>Accessing your processor node's parameters is as simple as looking them up in the <code>parameters</code> object passed into your implementation of {{domxref("AudioWorkletProcessor.process", "process()")}}. Within the <code>parameters</code> object are arrays, one for each of your parameters, and sharing the same names as your parameters.</p> + +<dl> + <dt>A-rate parameters</dt> + <dd>For a-rate parameters—parameters whose values automatically change over time—the parameter's entry in the <code>parameters</code> object is an array of {{domxref("AudioParam")}} objects, one for each frame in the block being processed. These values are to be applied to the corresponding frames.</dd> + <dt>K-rate parameters</dt> + <dd>K-rate parameters, on the other hand, can only change once per block, so the parameter's array has only a single entry. Use that value for every frame in the block.</dd> +</dl> + +<p>In the code below, we see a <code>process()</code> function that handles a <code>gain</code> parameter which can be used as either an a-rate or k-rate parameter. Our node only supports one input, so it just takes the first input in the list, applies the gain to it, and writes the resulting data to the first output's buffer.</p> + +<pre class="brush: js">process(inputList, outputList, parameters) { + const input = inputList[0]; + const output = outputList[0]; + const gain = parameters.gain; + + for (let channelNum = 0; channelNum < input.length; channel++) { + const inputChannel = input[channel]; + const outputChannel = output[channel]; + + // If gain.length is 1, it's a k-rate parameter, so apply + // the first entry to every frame. Otherwise, apply each + // entry to the corresponding frame. + + if (gain.length === 1) { + for (let i = 0; i < inputChannel.length; i++) { + outputChannel[i] = inputChannel[i] * gain[0]; + } + } else { + for (let i = 0; i < inputChannel.length; i++) { + outputChannel[i] = inputChannel[i] * gain[i]; + } + } + } + + return true; +} +</pre> + +<p>Here, if <code>gain.length</code> indicates that there's only a single value in the <code>gain</code> parameter's array of values, the first entry in the array is applied to every frame in the block. Otherwise, for each frame in the block, the corresponding entry in <code>gain[]</code> is applied.</p> + +<h3 id="Accessing_parameters_from_the_main_thread_script">Accessing parameters from the main thread script</h3> + +<p>Your main thread script can access the parameters just like it can any other node. To do so, first you need to get a reference to the parameter by calling the {{domxref("AudioWorkletNode")}}'s {{domxref("AudioWorkletNode.parameters", "parameters")}} property's {{domxref("AudioParamMap.get", "get()")}} method:</p> + +<pre class="brush: js">let gainParam = myAudioWorkletNode.parameters.get("gain"); +</pre> + +<p>The value returned and stored in <code>gainParam</code> is the {{domxref("AudioParam")}} used to store the <code>gain</code> parameter. You can then change its value effective at a given time using the {{domxref("AudioParam")}} method {{domxref("AudioParam.setValueAtTime", "setValueAtTime()")}}.</p> + +<p>Here, for example, we set the value to <code>newValue</code>, effective immediately.</p> + +<pre class="brush: js">gainParam.setValueAtTime(newValue, audioContext.currentTime);</pre> + +<p>You can similarly use any of the other methods in the {{domxref("AudioParam")}} interface to apply changes over time, to cancel scheduled changes, and so forth.</p> + +<p>Reading the value of a parameter is as simple as looking at its {{domxref("AudioParam.value", "value")}} property:</p> + +<pre class="brush: js">let currentGain = gainParam.value;</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="https://developers.google.com/web/updates/2017/12/audio-worklet">Enter Audio Worklet</a> (Google Developers blog)</li> +</ul> diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png b/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png Binary files differnew file mode 100644 index 0000000000..0e701a2b6a --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/index.html b/files/ko/web/api/web_audio_api/using_iir_filters/index.html new file mode 100644 index 0000000000..0c48b1096c --- /dev/null +++ b/files/ko/web/api/web_audio_api/using_iir_filters/index.html @@ -0,0 +1,198 @@ +--- +title: Using IIR filters +slug: Web/API/Web_Audio_API/Using_IIR_filters +tags: + - API + - Audio + - Guide + - IIRFilter + - Using + - Web Audio API +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<p class="summary">The <strong><code>IIRFilterNode</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> is an {{domxref("AudioNode")}} processor that implements a general <a href="https://en.wikipedia.org/wiki/infinite%20impulse%20response">infinite impulse response</a> (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed. This article looks at how to implement one, and use it in a simple example.</p> + +<h2 id="Demo">Demo</h2> + +<p>Our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an IIR filter on and off, altering the tone of the sound. It also provides a canvas on which is drawn the frequency response of the audio, so you can see what effect the IIR filter has.</p> + +<p><img alt="A demo featuring a play button, and toggle to turn a filter on and off, and a line graph showing the filter frequencies returned after the filter has been applied." src="iir-filter-demo.png"></p> + +<p>You can check out the <a href="https://codepen.io/Rumyra/pen/oPxvYB/">full demo here on Codepen</a>. Also see the <a href="https://github.com/mdn/webaudio-examples/tree/master/iirfilter-node">source code on GitHub</a>. It includes some different coefficient values for different lowpass frequencies — you can change the value of the <code>filterNumber</code> constant to a value between 0 and 3 to check out the different available effects.</p> + +<h2 id="Browser_support">Browser support</h2> + +<p><a href="/en-US/docs/Web/API/IIRFilterNode">IIR filters</a> are supported well across modern browsers, although they have been implemented more recently than some of the more longstanding Web Audio API features, like <a href="/en-US/docs/Web/API/BiquadFilterNode">Biquad filters</a>.</p> + +<h2 id="The_IIRFilterNode">The IIRFilterNode</h2> + +<p>The Web Audio API now comes with an {{domxref("IIRFilterNode")}} interface. But what is this and how does it differ from the {{domxref("BiquadFilterNode")}} we have already?</p> + +<p>An IIR filter is a <strong>infinite impulse response filter</strong>. It's one of two primary types of filters used in audio and digital signal processing. The other type is FIR — <strong>finite impulse response filter</strong>. There's a really good overview to <a href="https://dspguru.com/dsp/faqs/iir/basics/">IIF filters and FIR filters here</a>.</p> + +<p>A biquad filter is actually a <em>specific type</em> of infinite impulse response filter. It's a commonly-used type and we already have it as a node in the Web Audio API. If you choose this node the hard work is done for you. For instance, if you want to filter lower frequencies from your sound, you can set the <a href="/en-US/docs/Web/API/BiquadFilterNode/type">type</a> to <code>highpass</code> and then set which frequency to filter from (or cut off). <a href="http://www.earlevel.com/main/2003/02/28/biquads/">There's more information on how biquad filters work here</a>.</p> + +<p>When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("BiquadFilterNode")}} you are creating the filter yourself, rather than just choosing a pre-programmed type. So you can create a highpass filter, or a lowpass filter, or a more bespoke one. And this is where the IIR filter node is useful — you can create your own if none of the alaready available settings is right for what you want. As well as this, if your audio graph needed a highpass and a bandpass filter within it, you could just use one IIR filter node in place of the two biquad filter nodes you would otherwise need for this.</p> + +<p>With the IIRFIlter node it's up to you to set what <code>feedforward</code> and <code>feedback</code> values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.</p> + +<p>If you are looking to learn more there's some <a href="http://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf">information about the maths behind IIR filters here</a>. This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.</p> + +<p>If you want to play with the IIR filter node and need some values to help along the way, there's <a href="http://www.dspguide.com/CH20.PDF">a table of already calculated values here</a>; on pages 4 & 5 of the linked PDF the a<em>n</em> values refer to the <code>feedForward</code> values and the b<em>n</em> values refer to the <code>feedback</code>. <a href="http://musicdsp.org/">musicdsp.org</a> is also a great resource if you want to read more about different filters and how they are implemented digitally.</p> + +<p>With that all in mind, let's take a look at the code to create an IIR filter with the Web Audio API.</p> + +<h2 id="Setting_our_IIRFilter_co-efficients">Setting our IIRFilter co-efficients</h2> + +<p>When creating an IIR filter, we pass in the <code>feedforward</code> and <code>feedback</code> coefficients as options (coefficients is how we describe the values). Both of these parameters are arrays, neither of which can be larger than 20 items.</p> + +<p>When setting our coefficients, the <code>feedforward</code> values can't all be set to zero, otherwise nothing would be sent to the filter. Something like this is acceptable:</p> + +<pre class="brush: js">let feedForward = [0.00020298, 0.0004059599, 0.00020298]; +</pre> + +<p>Our <code>feedback</code> values cannot start with zero, otherwise on the first pass nothing would be sent back:</p> + +<pre class="brush: js">let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442]; +</pre> + +<div class="note"> +<p><strong>Note</strong>: These values are calculated based on the lowpass filter specified in the <a href="https://webaudio.github.io/web-audio-api/#filters-characteristics">filter characteristics of the Web Audio API specification</a>. As this filter node gains more popularity we should be able to collate more coefficient values.</p> +</div> + +<h2 id="Using_an_IIRFilter_in_an_audio_graph">Using an IIRFilter in an audio graph</h2> + +<p>Let's create our context and our filter node:</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); + +const iirFilter = audioCtx.createIIRFilter(feedForward, feedBack); +</pre> + +<p>We need a sound source to play. We set this up using a custom function, <code>playSoundNode()</code>, which <a href="/en-US/docs/Web/API/BaseAudioContext/createBufferSource">creates a buffer source</a> from an existing {{domxref("AudioBuffer")}}, attaches it to the default destination, starts it playing, and returns it:</p> + +<pre class="brush: js">function playSourceNode(audioContext, audioBuffer) { + const soundSource = audioContext.createBufferSource(); + soundSource.buffer = audioBuffer; + soundSource.connect(audioContext.destination); + soundSource.start(); + return soundSource; +}</pre> + +<p>This function is called when the play button is pressed. The play button HTML looks like this:</p> + +<pre class="brush: html"><button class="button-play" role="switch" data-playing="false" aria-pressed="false">Play</button></pre> + +<p>And the <code>click</code> event listener starts like so:</p> + +<pre class="brush: js">playButton.addEventListener('click', function() { + if (this.dataset.playing === 'false') { + srcNode = playSourceNode(audioCtx, sample); + ... +}, false);</pre> + +<p>The toggle that turns the IIR filter on and off is set up in the similar way. First, the HTML:</p> + +<pre><button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button></pre> + +<p>The filter button's <code>click</code> handler then connects the <code>IIRFilter</code> up to the graph, between the source and the detination:</p> + +<pre class="brush: js">filterButton.addEventListener('click', function() { + if (this.dataset.filteron === 'false') { + srcNode.disconnect(audioCtx.destination); + srcNode.connect(iirfilter).connect(audioCtx.destination); + ... +}, false);</pre> + +<h3 id="Frequency_response">Frequency response</h3> + +<p>We only have one method available on {{domxref("IIRFilterNode")}} instances, <code>getFrequencyResponse()</code>, this allows us to see what is happening to the frequencies of the audio being passed into the filter.</p> + +<p>Let's draw a frequency plot of the filter we've created with the data we get back from this method.</p> + +<p>We need to create three arrays. One of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. All three of these have to be of type <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array"><code>float32array</code></a> and all be of the same size.</p> + +<pre class="brush: js">// arrays for our frequency response +const totalArrayItems = 30; +let myFrequencyArray = new Float32Array(totalArrayItems); +let magResponseOutput = new Float32Array(totalArrayItems); +let phaseResponseOutput = new Float32Array(totalArrayItems); +</pre> + +<p>Let's fill our first array with frequency values we want data to be returned on:</p> + +<pre class="brush: js">myFrequencyArray = myFrequencyArray.map(function(item, index) { + return Math.pow(1.4, index); +}); +</pre> + +<p>We could go for a linear approach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that get larger further on in the array items.</p> + +<p>Now let's get our response data:</p> + +<pre class="brush: js">iirFilter.getFrequencyResponse(myFrequencyArray, magResponseOutput, phaseResponseOutput); +</pre> + +<p>We can use this data to draw a filter frequency plot. We'll do so on a 2d canvas context.</p> + +<pre class="brush: js">// create a canvas element and append it to our dom +const canvasContainer = document.querySelector('.filter-graph'); +const canvasEl = document.createElement('canvas'); +canvasContainer.appendChild(canvasEl); + +// set 2d context and set dimesions +const canvasCtx = canvasEl.getContext('2d'); +const width = canvasContainer.offsetWidth; +const height = canvasContainer.offsetHeight; +canvasEl.width = width; +canvasEl.height = height; + +// set background fill +canvasCtx.fillStyle = 'white'; +canvasCtx.fillRect(0, 0, width, height); + +// set up some spacing based on size +const spacing = width/16; +const fontSize = Math.floor(spacing/1.5); + +// draw our axis +canvasCtx.lineWidth = 2; +canvasCtx.strokeStyle = 'grey'; + +canvasCtx.beginPath(); +canvasCtx.moveTo(spacing, spacing); +canvasCtx.lineTo(spacing, height-spacing); +canvasCtx.lineTo(width-spacing, height-spacing); +canvasCtx.stroke(); + +// axis is gain by frequency -> make labels +canvasCtx.font = fontSize+'px sans-serif'; +canvasCtx.fillStyle = 'grey'; +canvasCtx.fillText('1', spacing-fontSize, spacing+fontSize); +canvasCtx.fillText('g', spacing-fontSize, (height-spacing+fontSize)/2); +canvasCtx.fillText('0', spacing-fontSize, height-spacing+fontSize); +canvasCtx.fillText('Hz', width/2, height-spacing+fontSize); +canvasCtx.fillText('20k', width-spacing, height-spacing+fontSize); + +// loop over our magnitude response data and plot our filter + +canvasCtx.beginPath(); + +for(let i = 0; i < magResponseOutput.length; i++) { + + if (i === 0) { + canvasCtx.moveTo(spacing, height-(magResponseOutput[i]*100)-spacing ); + } else { + canvasCtx.lineTo((width/totalArrayItems)*i, height-(magResponseOutput[i]*100)-spacing ); + } + +} + +canvasCtx.stroke(); +</pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for our IIRFilter demo. This should have shown you how to use the basics, and helped you to understand what it's useful for and how it works.</p> diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png Binary files differnew file mode 100644 index 0000000000..a31829c5d1 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html new file mode 100644 index 0000000000..c0dd84ee68 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -0,0 +1,189 @@ +--- +title: Visualizations with Web Audio API +slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +tags: + - API + - Web Audio API + - analyser + - fft + - visualisation + - visualization + - waveform +--- +<div class="summary"> +<p>One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can find working examples of all the code snippets in our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo.</p> +</div> + +<h2 id="Basic_concepts">Basic concepts</h2> + +<p>To extract data from your audio source, you need an {{ domxref("AnalyserNode") }}, which is created using the {{ domxref("BaseAudioContext.createAnalyser") }} method, for example:</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); +</pre> + +<p>This node is then connected to your audio source at some point between your source and your destination, for example:</p> + +<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream); +source.connect(analyser); +analyser.connect(distortion); +distortion.connect(audioCtx.destination);</pre> + +<div class="note"> +<p><strong>Note</strong>: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node.</p> +</div> + +<p>The analyser node will then capture audio data using a Fast Fourier Transform (fft) in a certain frequency domain, depending on what you specify as the {{ domxref("AnalyserNode.fftSize") }} property value (if no value is specified, the default is 2048.)</p> + +<div class="note"> +<p><strong>Note</strong>: You can also specify a minimum and maximum power value for the fft data scaling range, using {{ domxref("AnalyserNode.minDecibels") }} and {{ domxref("AnalyserNode.maxDecibels") }}, and different data averaging constants using {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Read those pages to get more information on how to use them.</p> +</div> + +<p>To capture data, you need to use the methods {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getByteFrequencyData()") }} to capture frequency data, and {{ domxref("AnalyserNode.getByteTimeDomainData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} to capture waveform data.</p> + +<p>These methods copy data into a specified array, so you need to create a new array to receive the data before invoking one. The first one produces 32-bit floating point numbers, and the second and third ones produce 8-bit unsigned integers, therefore a standard JavaScript array won't do — you need to use a {{ domxref("Float32Array") }} or {{ domxref("Uint8Array") }} array, depending on what data you are handling.</p> + +<p>So for example, say we are dealing with an fft size of 2048. We return the {{ domxref("AnalyserNode.frequencyBinCount") }} value, which is half the fft, then call Uint8Array() with the frequencyBinCount as its length argument — this is how many data points we will be collecting, for that fft size.</p> + +<pre class="brush: js">analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength);</pre> + +<p>To actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument. For example:</p> + +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> + +<p>We now have the audio data for that moment in time captured in our array, and can proceed to visualize it however we like, for example by plotting it onto an HTML5 {{ htmlelement("canvas") }}.</p> + +<p>Let's go on to look at some specific examples.</p> + +<h2 id="Creating_a_waveformoscilloscope">Creating a waveform/oscilloscope</h2> + +<p>To create the oscilloscope visualisation (hat tip to <a href="http://soledadpenades.com/">Soledad Penadés</a> for the original code in <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), we first follow the standard pattern described in the previous section to set up the buffer:</p> + +<pre class="brush: js">analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength);</pre> + +<p>Next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display:</p> + +<pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>We now define the <code>draw()</code> function:</p> + +<pre class="brush: js">function draw() {</pre> + +<p>In here, we use <code>requestAnimationFrame()</code> to keep looping the drawing function once it has been started:</p> + +<pre class="brush: js">var drawVisual = requestAnimationFrame(draw);</pre> + +<p>Next, we grab the time domain data and copy it into our array</p> + +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> + +<p>Next, fill the canvas with a solid color to start</p> + +<pre class="brush: js">canvasCtx.fillStyle = 'rgb(200, 200, 200)'; +canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Set a line width and stroke color for the wave we will draw, then begin drawing a path</p> + +<pre class="brush: js">canvasCtx.lineWidth = 2; +canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; +canvasCtx.beginPath();</pre> + +<p>Determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the FrequencyBinCount, as defined earlier on), then define an x variable to define the position to move to for drawing each segment of the line.</p> + +<pre class="brush: js">var sliceWidth = WIDTH * 1.0 / bufferLength; +var x = 0;</pre> + +<p>Now we run through a loop, defining the position of a small segment of the wave for each point in the buffer at a certain height based on the data point value form the array, then moving the line across to the place where the next wave segment should be drawn:</p> + +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + }</pre> + +<p>Finally, we finish the line in the middle of the right hand side of the canvas, then draw the stroke we've defined:</p> + +<pre class="brush: js"> canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + };</pre> + +<p>At the end of this section of code, we invoke the <code>draw()</code> function to start off the whole process:</p> + +<pre class="brush: js"> draw();</pre> + +<p>This gives us a nice waveform display that updates several times a second:</p> + +<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="wave.png"></p> + +<h2 id="Creating_a_frequency_bar_graph">Creating a frequency bar graph</h2> + +<p>Another nice little sound visualization to create is one of those Winamp-style frequency bar graphs. We have one available in Voice-change-O-matic; let's look at how it's done.</p> + +<p>First, we again set up our analyser and data array, then clear the current canvas display with <code>clearRect()</code>. The only difference from before is that we have set the fft size to be much smaller; this is so that each bar in the graph is big enough to actually look like a bar rather than a thin strand.</p> + +<pre class="brush: js">analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Next, we start our <code>draw()</code> function off, again setting up a loop with <code>requestAnimationFrame()</code> so that the displayed data keeps updating, and clearing the display with each animation frame.</p> + +<pre class="brush: js"> function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> + +<p>Now we set our <code>barWidth</code> to be equal to the canvas width divided by the number of bars (the buffer length). However, we are also multiplying that width by 2.5, because most of the frequencies will come back as having no audio in them, as most of the sounds we hear every day are in a certain lower frequency range. We don't want to display loads of empty bars, therefore we shift the ones that will display regularly at a noticeable height across so they fill the canvas display.</p> + +<p>We also set a <code>barHeight</code> variable, and an <code>x</code> variable to record how far across the screen to draw the current bar.</p> + +<pre class="brush: js">var barWidth = (WIDTH / bufferLength) * 2.5; +var barHeight; +var x = 0;</pre> + +<p>As before, we now start a for loop and cycle through each value in the <code>dataArray</code>. For each one, we make the <code>barHeight</code> equal to the array value, set a fill color based on the <code>barHeight</code> (taller bars are brighter), and draw a bar at <code>x</code> pixels across the canvas, which is <code>barWidth</code> wide and <code>barHeight/2</code> tall (we eventually decided to cut each bar in half so they would all fit on the canvas better.)</p> + +<p>The one value that needs explaining is the vertical offset position we are drawing each bar at: <code>HEIGHT-barHeight/2</code>. I am doing this because I want each bar to stick up from the bottom of the canvas, not down from the top, as it would if we set the vertical position to 0. Therefore, we instead set the vertical position each time to the height of the canvas minus <code>barHeight/2</code>, so therefore each bar will be drawn from partway down the canvas, down to the bottom.</p> + +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]/2; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight); + + x += barWidth + 1; + } + };</pre> + +<p>Again, at the end of the code we invoke the draw() function to set the whole process in motion.</p> + +<pre class="brush: js">draw();</pre> + +<p>This code gives us a result like the following:</p> + +<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="bar-graph.png"></p> + +<div class="note"> +<p><strong>Note</strong>: The examples listed in this article have shown usage of {{ domxref("AnalyserNode.getByteFrequencyData()") }} and {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. For working examples showing {{ domxref("AnalyserNode.getFloatFrequencyData()") }} and {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, refer to our <a href="https://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> demo (see the <a href="https://github.com/mdn/voice-change-o-matic-float-data">source code</a> too) — this is exactly the same as the original <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>, except that it uses Float data, not unsigned byte data.</p> +</div> diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png Binary files differnew file mode 100644 index 0000000000..9254829d23 --- /dev/null +++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html new file mode 100644 index 0000000000..2846d45d6c --- /dev/null +++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html @@ -0,0 +1,467 @@ +--- +title: Web audio spatialization basics +slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics +tags: + - PannerNode + - Web Audio API + - panning +--- +<div>{{DefaultAPISidebar("Web Audio API")}}</div> + +<div class="summary"> +<p><span class="seoSummary">As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game. The official term for this is <strong>spatialization</strong>, and this article will cover the basics of how to implement such a system.</span></p> +</div> + +<h2 id="Basics_of_spatialization">Basics of spatialization</h2> + +<p>In Web Audio, complex 3D spatializations are created using the {{domxref("PannerNode")}}, which in layman's terms is basically a whole lotta cool maths to make audio appear in 3D space. Think sounds flying over you, creeping up behind you, moving across in front of you. That sort of thing.</p> + +<p>It's really useful for WebXR and gaming. In 3D spaces, it's the only way to achieve realistic audio. Libraries like <a href="https://threejs.org/">three.js</a> and <a href="https://aframe.io/">A-frame</a> harness its potential when dealing with sound. It's worth noting that you don't <em>have</em> to move sound within a full 3D space either — you could stick with just a 2D plane, so if you were planning a 2D game, this would still be the node you were looking for.</p> + +<div class="note"> +<p><strong>Note</strong>: There's also a {{domxref("StereoPannerNode")}} designed to deal with the common use case of creating simple left and right stereo panning effects. This is much simpler to use, but obviously nowhere near as versatile. If you just want a simple stereo panning effect, our <a href="https://mdn.github.io/webaudio-examples/stereo-panner-node/">StereoPannerNode example</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node">see source code</a>) should give you everything you need.</p> +</div> + +<h2 id="3D_boombox_demo">3D boombox demo</h2> + +<p>To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> guide. see the <a href="https://mdn.github.io/webaudio-examples/spacialization/">3D spatialization demo live</a> (and see the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">source code</a> also).</p> + +<p><img alt="A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it." src="web-audio-spatialization.png"></p> + +<p>The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls. When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. This is done by setting the different properties of the <code>PannerNode</code> object instance in relation to that movement, to emulate spacialization.</p> + +<div class="note"> +<p><strong>Note</strong>: The experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into.</p> +</div> + +<h2 id="Creating_an_audio_listener">Creating an audio listener</h2> + +<p>So let's begin! The {{domxref("BaseAudioContext")}} (the interface the {{domxref("AudioContext")}} is extended from) has a <code><a href="/en-US/docs/Web/API/BaseAudioContext/listener">listener</a></code> property that returns an {{domxref("AudioListener")}} object. This represents the listener of the scene, usually your user. You can define where they are in space and in which direction they are facing. They remain static. The <code>pannerNode</code> can then calculate its sound position relative to the position of the listener.</p> + +<p>Let's create our context and listener and set the listener's position to emulate a person looking into our room:</p> + +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); +const listener = audioCtx.listener; + +const posX = window.innerWidth/2; +const posY = window.innerHeight/2; +const posZ = 300; + +listener.positionX.value = posX; +listener.positionY.value = posY; +listener.positionZ.value = posZ-5; +</pre> + +<p>We could move the listener left or right using <code>positionX</code>, up or down using <code>positionY</code>, or in or out of the room using <code>positionZ</code>. Here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox. We can also set the direction the listener is facing. The default values for these work well:</p> + +<pre class="brush: js">listener.forwardX.value = 0; +listener.forwardY.value = 0; +listener.forwardZ.value = -1; +listener.upX.value = 0; +listener.upY.value = 1; +listener.upZ.value = 0; +</pre> + +<p>The forward properties represent the 3D coordinate position of the listener's forward direction (e.g. the direction they are facing in), while the up properties represent the 3D coordinate position of the top of the listener's head. These two together can nicely set the direction.</p> + +<h2 id="Creating_a_panner_node">Creating a panner node</h2> + +<p>Let's create our {{domxref("PannerNode")}}. This has a whole bunch of properties associated with it. Let's take a look at each of them:</p> + +<p>To start we can set the <a href="/en-US/docs/Web/API/PannerNode/panningModel"><code>panningModel</code></a>. This is the spacialization algorithm that's used to position the audio in 3D space. We can set this to:</p> + +<p><code>equalpower</code> — The default and the general way panning is figured out</p> + +<p><code>HRTF</code> — This stands for 'Head-related transfer function' and looks to take into account the human head when figuring out where the sound is.</p> + +<p>Pretty clever stuff. Let's use the <code>HRTF</code> model!</p> + +<pre class="brush: js">const pannerModel = 'HRTF'; +</pre> + +<p>The <a href="/en-US/docs/Web/API/PannerNode/coneInnerAngle"><code>coneInnerAngle</code></a> and <a href="/en-US/docs/Web/API/PannerNode/coneOuterAngle"><code>coneOuterAngle</code></a> properties specify where the volume emanates from. By default, both are 360 degrees. Our boombox speakers will have smaller cones, which we can define. The inner cone is where gain (volume) is always emulated at a maximum and the outer cone is where the gain starts to drop away. The gain is reduced by the value of the <a href="/en-US/docs/Web/API/PannerNode/coneOuterGain"><code>coneOuterGain</code></a> value. Let's create constants that store the values we'll use for these parameters later on:</p> + +<pre class="brush: js">const innerCone = 60; +const outerCone = 90; +const outerGain = 0.3; +</pre> + +<p>The next parameter is <a href="/en-US/docs/Web/API/PannerNode/distanceModel"><code>distanceModel</code></a> — this can only be set to <code>linear</code>, <code>inverse</code>, or <code>exponential</code>. These are different algorithms, which are used to reduce the volume of the audio source as it moves away from the listener. We'll use <code>linear</code>, as it is simple:</p> + +<pre class="brush: js">const distanceModel = 'linear'; +</pre> + +<p>We can set a maximum distance (<a href="/en-US/docs/Web/API/PannerNode/maxDistance"><code>maxDistance</code></a>) between the source and the listener — the volume will not be reduced anymore if the source moves further away from this point. This can be useful, as you may find you want to emulate distance, but volume can drop out and that's actually not what you want. By default, it's 10,000 (a unitless relative value). We can keep it as this:</p> + +<pre class="brush: js">const maxDistance = 10000; +</pre> + +<p>There's also a reference distance (<code><a href="/en-US/docs/Web/API/PannerNode/refDistance">refDistance</a></code>), which is used by the distance models. We can keep that at the default value of <code>1</code> as well:</p> + +<pre class="brush: js">const refDistance = 1; +</pre> + +<p>Then there's the roll-off factor (<a href="/en-US/docs/Web/API/PannerNode/rolloffFactor"><code>rolloffFactor</code></a>) — how quickly does the volume reduce as the panner moves away from the listener. The default value is 1; let's make that a bit bigger to exaggerate our movements.</p> + +<pre class="brush: js">const rollOff = 10; +</pre> + +<p>Now we can start setting our position and orientation of our boombox. This is a lot like how we did it with our listener. These are also the parameters we're going to change when the controls on our interface are used.</p> + +<pre class="brush: js">const positionX = posX; +const positionY = posY; +const positionZ = posZ; + +const orientationX = 0.0; +const orientationY = 0.0; +const orientationZ = -1.0; +</pre> + +<p>Note the minus value on our z orientation — this sets the boombox to face us. A positive value would set the sound source facing away from us.</p> + +<p>Let's use the relevant constructor for creating our panner node and pass in all those parameters we set above:</p> + +<pre class="brush: js">const panner = new PannerNode(audioCtx, { + panningModel: pannerModel, + distanceModel: distanceModel, + positionX: positionX, + positionY: positionY, + positionZ: positionZ, + orientationX: orientationX, + orientationY: orientationY, + orientationZ: orientationZ, + refDistance: refDistance, + maxDistance: maxDistance, + rolloffFactor: rollOff, + coneInnerAngle: innerCone, + coneOuterAngle: outerCone, + coneOuterGain: outerGain +}) +</pre> + +<h2 id="Moving_the_boombox">Moving the boombox</h2> + +<p>Now we're going to move our boombox around our 'room'. We've got some controls set up to do this. We can move it left and right, up and down, and back and forth; we can also rotate it. The sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us.</p> + +<p>We need to set up a few things for the interface. First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up <a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS transforms</a> to actually do the movement. Finally, we'll set some bounds so our boombox doesn't move too far in any direction:</p> + +<pre class="brush: js">const moveControls = document.querySelector('#move-controls').querySelectorAll('button'); +const boombox = document.querySelector('.boombox-body'); + +// the values for our css transforms +let transform = { + xAxis: 0, + yAxis: 0, + zAxis: 0.8, + rotateX: 0, + rotateY: 0 +} + +// set our bounds +const topBound = -posY; +const bottomBound = posY; +const rightBound = posX; +const leftBound = -posX; +const innerBound = 0.1; +const outerBound = 1.5; +</pre> + +<p>Let's create a function that takes the direction we want to move as a parameter, and both modifies the CSS transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.</p> + +<p>To start with let's take a look at our left, right, up and down values as these are pretty straightforward. We'll move the boombox along these axis and update the appropriate position.</p> + +<pre class="brush: js">function moveBoombox(direction) { + switch (direction) { + case 'left': + if (transform.xAxis > leftBound) { + transform.xAxis -= 5; + panner.positionX.value -= 0.1; + } + break; + case 'up': + if (transform.yAxis > topBound) { + transform.yAxis -= 5; + panner.positionY.value -= 0.3; + } + break; + case 'right': + if (transform.xAxis < rightBound) { + transform.xAxis += 5; + panner.positionX.value += 0.1; + } + break; + case 'down': + if (transform.yAxis < bottomBound) { + transform.yAxis += 5; + panner.positionY.value += 0.3; + } + break; + } +} +</pre> + +<p>It's a similar story for our move in and out values too:</p> + +<pre class="brush: js">case 'back': + if (transform.zAxis > innerBound) { + transform.zAxis -= 0.01; + panner.positionZ.value += 40; + } +break; +case 'forward': + if (transform.zAxis < outerBound) { + transform.zAxis += 0.01; + panner.positionZ.value -= 40; + } +break; +</pre> + +<p>Our rotation values are a little more involved, however, as we need to move the sound <em>around</em>. Not only do we have to update two axis values (e.g. if you rotate an object around the x-axis, you update the y and z coordinates for that object), but we also need to do some more maths for this. The rotation is a circle and we need <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin">Math.sin</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">Math.cos</a></code> to help us draw that circle.</p> + +<p>Let's set up a rotation rate, which we'll convert into a radian range value for use in <code>Math.sin</code> and <code>Math.cos</code> later, when we want to figure out the new coordinates when we're rotating our boombox:</p> + +<pre class="brush: js">// set up rotation constants +const rotationRate = 60; // bigger number equals slower sound rotation + +const q = Math.PI/rotationRate; //rotation increment in radians +</pre> + +<p>We can also use this to work out degrees rotated, which will help with the CSS transforms we will have to create (note we need both an x and y-axis for the CSS transforms):</p> + +<pre class="brush: js">// get degrees for css +const degreesX = (q * 180)/Math.PI; +const degreesY = (q * 180)/Math.PI; +</pre> + +<p>Let's take a look at our left rotation as an example. We need to change the x orientation and the z orientation of the panner coordinates, to move around the y-axis for our left rotation:</p> + +<pre class="brush: js">case 'rotate-left': + transform.rotateY -= degreesY; + + // 'left' is rotation about y-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q); + x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q); + y = panner.orientationY.value; + + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +</pre> + +<p>This <em>is</em> a little confusing, but what we're doing is using sin and cos to help us work out the circular motion the coordinates need for the rotation of the boombox.</p> + +<p>We can do this for all the axes. We just need to choose the right orientations to update and whether we want a positive or negative increment.</p> + +<pre class="brush: js">case 'rotate-right': + transform.rotateY += degreesY; + // 'right' is rotation about y-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q); + x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q); + y = panner.orientationY.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +case 'rotate-up': + transform.rotateX += degreesX; + // 'up' is rotation about x-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q); + y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +case 'rotate-down': + transform.rotateX -= degreesX; + // 'down' is rotation about x-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q); + y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; +break; +</pre> + +<p>One last thing — we need to update the CSS and keep a reference of the last move for the mouse event. Here's the final <code>moveBoombox</code> function.</p> + +<pre class="brush: js">function moveBoombox(direction, prevMove) { + switch (direction) { + case 'left': + if (transform.xAxis > leftBound) { + transform.xAxis -= 5; + panner.positionX.value -= 0.1; + } + break; + case 'up': + if (transform.yAxis > topBound) { + transform.yAxis -= 5; + panner.positionY.value -= 0.3; + } + break; + case 'right': + if (transform.xAxis < rightBound) { + transform.xAxis += 5; + panner.positionX.value += 0.1; + } + break; + case 'down': + if (transform.yAxis < bottomBound) { + transform.yAxis += 5; + panner.positionY.value += 0.3; + } + break; + case 'back': + if (transform.zAxis > innerBound) { + transform.zAxis -= 0.01; + panner.positionZ.value += 40; + } + break; + case 'forward': + if (transform.zAxis < outerBound) { + transform.zAxis += 0.01; + panner.positionZ.value -= 40; + } + break; + case 'rotate-left': + transform.rotateY -= degreesY; + + // 'left' is rotation about y-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q); + x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q); + y = panner.orientationY.value; + + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-right': + transform.rotateY += degreesY; + // 'right' is rotation about y-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q); + x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q); + y = panner.orientationY.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-up': + transform.rotateX += degreesX; + // 'up' is rotation about x-axis with negative angle increment + z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q); + y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + case 'rotate-down': + transform.rotateX -= degreesX; + // 'down' is rotation about x-axis with positive angle increment + z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q); + y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q); + x = panner.orientationX.value; + panner.orientationX.value = x; + panner.orientationY.value = y; + panner.orientationZ.value = z; + break; + } + + boombox.style.transform = 'translateX('+transform.xAxis+'px) translateY('+transform.yAxis+'px) scale('+transform.zAxis+') rotateY('+transform.rotateY+'deg) rotateX('+transform.rotateX+'deg)'; + + const move = prevMove || {}; + move.frameId = requestAnimationFrame(() => moveBoombox(direction, move)); + return move; +} +</pre> + +<h2 id="Wiring_up_our_controls">Wiring up our controls</h2> + +<p>Wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released:</p> + +<pre class="brush: js">// for each of our controls, move the boombox and change the position values +moveControls.forEach(function(el) { + + let moving; + el.addEventListener('mousedown', function() { + + let direction = this.dataset.control; + if (moving && moving.frameId) { + window.cancelAnimationFrame(moving.frameId); + } + moving = moveBoombox(direction); + + }, false); + + window.addEventListener('mouseup', function() { + if (moving && moving.frameId) { + window.cancelAnimationFrame(moving.frameId); + } + }, false) + +}) +</pre> + +<h2 id="Connecting_Our_Graph">Connecting Our Graph</h2> + +<p>Our HTML contains the audio element we want to be affected by the panner node.</p> + +<pre class="brush: html"><audio src="myCoolTrack.mp3"></audio></pre> + +<p>We need to grab the source from that element and pipe it into the Web Audio API using the {{domxref('AudioContext.createMediaElementSource')}}.</p> + +<pre class="brush: js">// get the audio element +const audioElement = document.querySelector('audio'); + +// pass it into the audio context +const track = audioContext.createMediaElementSource(audioElement); +</pre> + +<p>Next we have to connect our audio graph. We connect our input (the track) to our modification node (the panner) to our destination (in this case the speakers).</p> + +<pre class="brush: js">track.connect(panner).connect(audioCtx.destination); +</pre> + +<p>Let's create a play button, that when clicked will play or pause the audio depending on the current state.</p> + +<pre class="brush: html"><button data-playing="false" role="switch">Play/Pause</button> +</pre> + +<pre class="brush: js">// select our play button +const playButton = document.querySelector('button'); + +playButton.addEventListener('click', function() { + +// check if context is in suspended state (autoplay policy) +if (audioContext.state === 'suspended') { +audioContext.resume(); +} + +// play or pause track depending on state +if (this.dataset.playing === 'false') { +audioElement.play(); +this.dataset.playing = 'true'; +} else if (this.dataset.playing === 'true') { +audioElement.pause(); +this.dataset.playing = 'false'; +} + +}, false); +</pre> + +<p>For a more in depth look at playing/controlling audio and audio graphs check out <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using The Web Audio API.</a></p> + +<h2 id="Summary">Summary</h2> + +<p>Hopefully, this article has given you an insight into how Web Audio spatialization works, and what each of the {{domxref("PannerNode")}} properties do (there are quite a few of them). The values can be hard to manipulate sometimes and depending on your use case it can take some time to get them right.</p> + +<div class="note"> +<p><strong>Note</strong>: There are slight differences in the way the audio spatialization sounds across different browsers. The panner node does some very involved maths under the hood; there are a <a href="https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&aligned=true">number of tests here</a> so you can keep track of the status of the inner workings of this node across different platforms.</p> +</div> + +<p>Again, you can <a href="https://mdn.github.io/webaudio-examples/spacialization/">check out the final demo here</a>, and the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">final source code is here</a>. There is also a <a href="https://codepen.io/Rumyra/pen/MqayoK?editors=0100">Codepen demo too</a>.</p> + +<p>If you are working with 3D games and/or WebXR it's a good idea to harness a 3D library to create such functionality, rather than trying to do this all yourself from first principles. We rolled our own in this article to give you an idea of how it works, but you'll save a lot of time by taking advantage of work others have done before you.</p> diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png Binary files differnew file mode 100644 index 0000000000..18a359e5c1 --- /dev/null +++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png diff --git a/files/ko/web/http/cors/index.html b/files/ko/web/http/cors/index.html index fe96ed2ea2..95199b794f 100644 --- a/files/ko/web/http/cors/index.html +++ b/files/ko/web/http/cors/index.html @@ -6,7 +6,7 @@ tags: - HTTP - Same-origin policy - Security - - 'l10n:priority' + - l10n:priority - 교차 출처 - 동일 출처 translation_of: Web/HTTP/CORS @@ -17,7 +17,7 @@ translation_of: Web/HTTP/CORS <p>교차 출처 요청의 예시: <code>https://domain-a.com</code>의 프론트 엔드 JavaScript 코드가 {{domxref("XMLHttpRequest")}}를 사용하여 <code>https://domain-b.com/data.json</code>을 요청하는 경우.</p> -<p>보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, <code>XMLHttpRequest</code>와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.<img src="https://mdn.mozillademos.org/files/14295/CORS_principle.png"></p> +<p>보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, <code>XMLHttpRequest</code>와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.<img src="cors_principle.png"></p> <p>CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 <code>XMLHttpRequest</code> 또는 <a href="/ko/docs/Web/API/Fetch_API">Fetch</a>와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화합니다.</p> @@ -25,7 +25,7 @@ translation_of: Web/HTTP/CORS <p>모든 사람이요, 진짜로.</p> -<p>명확히 말하자면, 이 글은 <strong>웹 관리자</strong>, <strong>서버 개발자 </strong>그리고 <strong>프론트엔드 개발자</strong>를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다. 서버 개발자에게는 <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">(PHP 코드 조각과 함께 하는) 서버 관점의 교차 출처 공유</a>를 다루고 있는 다른 글로 보충하면 도움이 될 것입니다.</p> +<p>명확히 말하자면, 이 글은 <strong>웹 관리자</strong>, <strong>서버 개발자 </strong>그리고 <strong>프론트엔드 개발자</strong>를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다. 서버 개발자에게는 <a href="/en-US/docs/Web/HTTP/CORS">(PHP 코드 조각과 함께 하는) 서버 관점의 교차 출처 공유</a>를 다루고 있는 다른 글로 보충하면 도움이 될 것입니다.</p> <h2 id="어떤_요청이_CORS를_사용하나요">어떤 요청이 CORS를 사용하나요?</h2> @@ -53,7 +53,7 @@ translation_of: Web/HTTP/CORS <p>교차 출처 리소스 공유가 동작하는 방식을 보여주는 세 가지 시나리오를 제시하겠습니다. 모든 예제는 지원하는 브라우저에서 교차 출처 요청을 생성할 수 있는 {{domxref("XMLHttpRequest")}}를 사용합니다.</p> -<p>서버 관점의 교차 출처 리소스 공유에 대한 논의는 (PHP 코드와 함께 하는) <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">서버 사이드 접근 제어 (CORS)</a> 문서에서 확인할 수 있습니다.</p> +<p>서버 관점의 교차 출처 리소스 공유에 대한 논의는 (PHP 코드와 함께 하는) <a href="/en-US/docs/Web/HTTP/CORS">서버 사이드 접근 제어 (CORS)</a> 문서에서 확인할 수 있습니다.</p> <h3 id="단순_요청Simple_requests">단순 요청(Simple requests)</h3> @@ -111,7 +111,7 @@ xhr.send();</code></pre> <p>클라이언트와 서버간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리합니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17214/simple-req-updated.png" style="height: 490px; width: 1023px;"></p> +<p><img alt="" src="simple-req-updated.png"></p> <p>이 경우 브라우저가 서버로 전송하는 내용을 살펴보고, 서버의 응답을 확인합니다.</p> @@ -158,7 +158,7 @@ xhr.send('<person><name>Arun</name></person>');</code></ <p>위의 예제는 <code>POST</code> 요청과 함께 함께 보낼 XML body를 만듭니다. 또한 비표준 HTTP <code>Ping-Other</code> 요청 헤더가 설정됩니다. 이러한 헤더는 HTTP/1.1의 일부가 아니지만 일반적으로 웹 응용 프로그램에 유용합니다. Content-Type 이 <code>application/xml</code>이고, 사용자 정의 헤더가 설정되었기 때문에 이 요청은 preflighted 처리됩니다.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png"></p> +<p><img alt="" src="preflight_correct.png"></p> <p>(참고: 아래 설명 된 것처럼 실제 <code>POST</code> 요청에는 <code>Access-Control-Request-*</code> 헤더가 포함되지 않습니다. <code>OPTIONS</code> 요청에만 필요합니다.)</p> @@ -290,7 +290,7 @@ function callOtherDomain() { <p>7행은 쿠키와 함께 호출하기위한 {{domxref("XMLHttpRequest")}} 의 플래그를 보여줍니다. 이 플래그는 <code>withCredentials</code> 라고 불리며 부울 값을 갖습니다. 기본적으로 호출은 쿠키 없이 이루어집니다. 이것은 simple <code>GET</code> request이기 때문에 preflighted 되지 않습니다. 그러나 브라우저는 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 헤더가 없는 응답을 <strong>거부합니다</strong>.<strong> </strong>따라서 호출된 웹 컨텐츠에 응답을 제공하지 <strong>않습니다</strong>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17213/cred-req-updated.png" style="height: 490px; width: 1023px;"></p> +<p><img alt="" src="cred-req-updated.png"></p> <p>클라이언트와 서버간의 통신 예제는 다음과 같습니다.</p> @@ -326,9 +326,19 @@ Content-Type: text/plain <p>10행에는 <code>http://bar.other</code>의 컨텐츠를 대상으로 하는 쿠키가 포함되어 있습니다. 하지만 17행의 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 로 응답하지 않으면, 응답은 무시되고 웹 컨텐츠는 제공되지 않습니다.</p> -<h4 id="자격증명_요청_및_와일드카드Credentialed_requests_and_wildcards">자격증명 요청 및 와일드카드(Credentialed requests and wildcards)</h4> +<h4 id="Preflight_requests_and_credentials">실행 전 요청 및 자격 증명</h4> -<p>credentialed request 에 응답할 때 서버는 <code>Access-Control-Allow-Origin</code> 헤더 "<code>*</code>" 와일드카드를 사용하는 대신에 <strong>반드시</strong> 에 값을 지정해야 합니다.</p> +<p>CORS 실행 전 요청에는 자격 증명이 포함되지 않아야 합니다. 실행 전 요청에 대한 <em>응답</em>은 <code>Access-Control-Allow-Credentials: true</code>를 지정하여 자격 증명으로 실제 요청을 수행할 수 있음을 나타내야 합니다.</p> + +<div class="notecard note"> + <h4>참고</h4> + <p>일부 엔터프라이즈 인증 서비스는 {{SpecName("Fetch","#cors-protocol-and-credentials")}} 사양을 위반하여 실행 전 요청에서 TLS 클라이언트 인증서를 보내도록 요구합니다.</p> + <p>Firefox 87에서는 기본 설정을 지정하여 이 비준수 동작을 활성화할 수 있습니다: <code>network.cors_preflight.allow_client_cert</code>을 <code>true</code>로 설정 ({{bug(1511151)}}). Chromium 기반 브라우저는 현재 항상 CORS 실행 전 요청에서 TLS 클라이언트 인증서를 보냅니다(<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=775438">Chrome bug 775438</a>).</p> +</div> + +<h4 id="Credentialed_requests_and_wildcards">자격증명 요청 및 와일드카드(Credentialed requests and wildcards)</h4> + +<p>자격 증명 요청에 응답할 때 서버는 <strong>반드시</strong> "<code>*</code>" 와일드카드를 지정하는 대신 <code>Access-Control-Allow-Origin</code> 헤더 값에 출처를 지정해야 합니다.</p> <p>위 예제의 요청 헤더에 <code>Cookie</code> 헤더가 포함되어 있기 때문에 <code>Access-Control-Allow-Origin</code> 헤더의 값이 "*"인 경우 요청이 실패합니다. 위 요청은 <code>Access-Control-Allow-Origin</code> 헤더가 "<code>*</code>" 와일드 카드가 아니라 "<code>http://foo.example</code>" 본래 주소이기 때문에 자격증명 인식 컨텐츠는 웹 호출 컨텐츠로 리턴됩니다.</p> @@ -338,7 +348,7 @@ Content-Type: text/plain <p>CORS 응답에 설정된 쿠키에는 일반적인 third-party cookie 정책이 적용됩니다. 위의 예제는 <code>foo.example</code>에서 페이지를 불러지만 20행의 쿠키는 <code>bar.other</code> 가 전송합니다. 때문에 사용자의 브라우저 설정이 모든 third-party cookies를 거부하도록 되어 있다면, 이 쿠키는 저장되지 않습니다.</p> -<h2 id="HTTP_응답_헤더">HTTP 응답 헤더</h2> +<h2 id="The_HTTP_response_headers">HTTP 응답 헤더</h2> <p>이 섹션에서는 Cross-Origin 리소스 공유 명세에 정의된 대로 서버가 접근 제어 요청을 위해 보내는 HTTP 응답 헤더가 나열되어 있습니다. The previous section gives an overview of these in action.</p> diff --git a/files/ko/web/http/headers/referer/index.html b/files/ko/web/http/headers/referer/index.html index 2d21792ee5..a625c13ad5 100644 --- a/files/ko/web/http/headers/referer/index.html +++ b/files/ko/web/http/headers/referer/index.html @@ -1,40 +1,42 @@ --- title: Referer slug: Web/HTTP/Headers/Referer +tags: + - HTTP + - Reference + - header + - referer + - referrer translation_of: Web/HTTP/Headers/Referer +browser-compat: http.headers.Referer --- <div>{{HTTPSidebar}}</div> -<p><code><strong>Referer</strong></code> 요청 헤더는 현재 요청된 페이지의 링크 이전의 웹 페이지 주소를 포함합니다. <code>Referer</code> 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해주며 해당 데이터는 예를 들어, 분석, 로깅, 혹은 캐싱 최적화에 사용될 수도 있습니다.</p> +<p><code><strong>Referer</strong></code> 요청 헤더는 현재 요청을 보낸 페이지의 절대 혹은 부분 주소를 포함합니다. 만약 링크를 타고 들어왔다면 해당 링크를 포함하고 있는 페이지의 주소가, 다른 도메인에 리소스 요청을 보내는 경우라면 해당 리소스를 사용하는 페이지의 주소가 이 헤더에 포함됩니다.<code>Referer</code> 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해주며 해당 데이터는 예를 들어, 분석, 로깅, 혹은 캐싱 최적화에 사용될 수도 있습니다.</p> -<p>referer는 실제로 단어 "referrer"에서 철자를 빼먹은 것입니다. 자세한 내용은 {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}을 참고하세요.</p> +<p><code>Referer</code> 헤더는 URL 프래그먼트 (예 : "#section") 또는 "username : password" 정보를 포함 할 수 없습니다. <em>origin</em>, <em>경로</em>, 및 <em>쿼리 문자열</em>을 포함 할 수는 있습니다. 전송되는 내용은 요청에 대한 referrer 정책에 따라 다릅니다. 정보 및 예제는 Referrer-Policy를 참조하십시오. <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy#directives">정보</a> 와 <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy#examples">예시</a>는 이곳 {{HTTPHeader("Referrer-Policy")}}을 참고하세요. +<div class="notecard note"> + <h4>Note</h4> + <p><p>referer는 단어 "referrer"의 잘못된 철자입니다. 자세한 내용은 {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}을 참고하세요.</p> + </div> <div class="warning"> -<p><code>Referer</code> 헤더는 사생활과 관련된 브라우징 히스토리에 관한 정보를 노출할 가능성이 있습니다.</p> -</div> - -<p><code>Referer</code> 헤더는 다음과 같은 경우 브라우저에 의해 전송되지 않습니다:</p> + <h4>Warning</h4> +<p><code>Referer</code> 헤더는 사생활과 관련된 브라우징 히스토리에 관한 정보를 노출할 가능성이 있습니다. 더 많은 정보는 <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> 이곳을 참조하세요.</p> -<ul> - <li>참조되는 리소스가 로컬 "파일" 혹은 "데이터"의 URI인 경우,</li> - <li> - <p>안전하지 않은 HTTP 요청이 사용되고 참조 페이지가 보안 프로토콜(HTTPS)로 수신된 경우.</p> - </li> -</ul> +</div> <table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + </tr> + </tbody> + </table> + <h2 id="문법">문법</h2> <pre class="syntaxbox">Referer: <url> @@ -44,12 +46,16 @@ translation_of: Web/HTTP/Headers/Referer <dl> <dt><url></dt> - <dd>현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소. URL 프래그먼트(예를 들어, "#section")는 포함되지 않습니다.</dd> + <dd>현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소. URL 프래그먼트(예를 들어, "#section")나 사용자 정보(예를 들어 "https://username:password@example.com/foo/bar/" 에서 "username:password")는 포함되지 않습니다. 오리진, 패쓰, 쿼리스트링은 <a href="/ko/docs/Web/HTTP/Headers/Referrer-Policy#directives">referrer 정책</a>에 따라 포함될 수 있습니다.</dd> </dl> -<h2 id="예제">예제</h2> +<h2 id="Exapmels">예제</h2> -<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre> +<pre> +Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript +Referer: https://example.com/page?q=123 +Referer: https://example.com/ +</pre> <h2 id="명세서">명세서</h2> @@ -66,12 +72,17 @@ translation_of: Web/HTTP/Headers/Referer </tbody> </table> -<h2 id="브라우저_호환성">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호완성</h2> -<p>{{Compat("http.headers.Referer")}}</p> +<p>{{Compat}}</p> -<h2 id="함께_참고할_내용">함께 참고할 내용</h2> +<h2 id="See_also">같이 보기</h2> <ul> - <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> + <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> + <li><a href="/ko/docs/Web/API/Fetch_API">Fetch</a>: {{domxref("Request.referrerPolicy")}}</li> + <li>outdated 된 {{HTTPHeader("Content-Security-Policy")}} {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{deprecated_inline}} 디렉티브</li> + <li><a href="/ko/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> + <li><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">Tighter Control Over Your Referrers – Mozilla Security Blog</a></li> </ul> + diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html deleted file mode 100644 index 36950fca58..0000000000 --- a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,1037 +0,0 @@ ---- -title: JavaScript 재입문하기 (JS 튜토리얼) -slug: Web/JavaScript/A_re-introduction_to_JavaScript -tags: - - CodingScripting - - Intermediate - - Intro - - JavaScript - - Learn - - Tutorial -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript -original_slug: A_re-introduction_to_JavaScript ---- -<div>{{jsSidebar}}</div> - -<p>어째서 재입문일까요? 왜냐하면, <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>는 <a class="external" href="http://javascript.crockford.com/javascript.html">세계에서 가장 오해받고 있는 프로그래밍 언어</a>로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.</p> - -<p>이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.</p> - -<p>몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 <a href="/ko/docs/Glossary/ECMAScript">ECMAScript</a> 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 <a class="external" href="http://www.ecma-international.org/">Ecma International</a>에 보냅니다. 이 표준은 1999년에 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a>에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. <span style="line-height: 16.7999992370605px;">4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. </span></p> - -<div class="note"> -<p> 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 <span style="line-height: 16.7999992370605px;"> "</span>JavaScript"라고 부르겠습니다.</p> -</div> - -<p>대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, <a href="http://nodejs.org/">node.js</a> 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, <a href="http://couchdb.apache.org/">Apache CouchDB</a>, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 <a href="http://www.gnome.org/">GNOME</a> 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.</p> - -<h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2> - -<p>JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (<a href="/ko//docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">프로토 타입 상속</a> 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.</p> - -<p>어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:</p> - -<ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a> (ES2015에 새롭게 추가)</li> -</ul> - -<p>... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 <a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열(Array) 객체</a>. 그리고 자유롭게 사용할 수 있는 <a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜(Date) 객체</a> 와 <a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식(RegExp) 객체</a>가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:</p> - -<ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a> - <ul> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열 (Array)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜 (Date)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식 (RegExp)</a></li> - </ul> - </li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/null">널 (Null)</a></li> - <li><a href="ko/Web/JavaScript/Reference/Global_Objects/undefined">정의되지 않음 (Undefined)</a></li> -</ul> - -<p>그리고 또 몇 가지 <a href="ko/Web/JavaScript/Reference/Global_Objects/Error">오류</a> 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.</p> - -<h2 id=".EC.88.98_.28Numbers.29" name=".EC.88.98_.28Numbers.29">수 (Numbers)</h2> - -<p>설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 <strong>정수와 같은 것이 존재하지 않으므로 </strong>({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:</p> - -<pre class="syntaxbox notranslate">console.log(3 / 2); // 1이 아닌, 1.5 -console.log(Math.floor(3 / 2)); // 1</pre> - -<p><em>명백한 정수</em>는 사실 <em>암묵적으로 실수</em>입니다.</p> - -<p>또한, 다음과 같은 것들을 주의하세요:</p> - -<pre class="brush: js notranslate">0.1 + 0.2 = 0.30000000000000004 -</pre> - -<p>실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.</p> - -<p>덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">산술 연산자</a>가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Math">수학(Math)</a>으로 불리는 내장 객체가 있습니다:</p> - -<pre class="brush: js notranslate">Math.sin(3.5); -var circumference = 2 * Math.PI * r;</pre> - -<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:</p> - -<pre class="brush: js notranslate">parseInt('123', 10); // 123 -parseInt('010', 10); // 10</pre> - -<p>구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.</p> - -<pre class="brush: js notranslate">parseInt('010'); // 8 -parseInt('0x10'); // 16</pre> - -<p>이 같은 결과는 <code>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</code> 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.</p> - -<p>만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:</p> - -<pre class="brush: js notranslate">parseInt('11', 2); // 3 -</pre> - -<p>이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.</p> - -<p>단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:</p> - -<pre class="brush: js notranslate">+ '42'; // 42 -+ '010'; // 10 -+ '0x10'; // 16</pre> - -<p>문자열이 수가 아닌 경우 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:</p> - -<pre class="brush: js notranslate">parseInt('hello', 10); // NaN -</pre> - -<p><code>NaN</code> 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 <code>NaN</code>가 되기 때문입니다:</p> - -<pre class="brush: js notranslate">NaN + 5; // NaN -</pre> - -<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> 함수를 사용해서 <code>NaN</code> 인지 여부를 검사할 수 있습니다:</p> - -<pre class="brush: js notranslate">isNaN(NaN); // true -</pre> - -<p>JavaScript는 또 특별한 값 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code>와 <code>-Infinity</code>를 가지고 있습니다:</p> - -<pre class="brush: js notranslate"> 1 / 0; // Infinity --1 / 0; // -Infinity</pre> - -<p>내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.</p> - -<pre class="brush: js notranslate">isFinite(1 / 0); // false -isFinite(-Infinity); // false -isFinite(NaN); // false</pre> - -<div class="note"> -<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 <code>NaN</code> 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.</p> -</div> - -<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29">문자열 (Strings)</h2> - -<p>JavaScript에서 문자열은 <a href="ko/Core_JavaScript_1.5_Guide/Unicode">유니코드 문자들</a>이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.</p> - -<p>한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.</p> - -<p>문자열의 길이를 알고싶다면, 해당 문자열의 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:</p> - -<pre class="brush: js notranslate">'hello'.length; // 5 -</pre> - -<p>우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">메소드</a>까지 있는 확실한 녀석입니다:</p> - -<pre class="brush: js notranslate">'hello'.charAt(0); // "h" -'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" -'hello'.toUpperCase(); // "HELLO"</pre> - -<h2 id=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4" name=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4">이외의 타입들</h2> - -<p>JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 <code>null</code>과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 <code>undefined</code>로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 <code>undefined</code>이 되는 것입니다.</p> - -<p>JavaScript는 <code>true</code> 와 <code>false</code> 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:</p> - -<ol> - <li><code>false</code>, <code>0</code>, 빈 문자열 (<code>""</code>), 수가 아님을 뜻하는 <code>NaN</code>, <code>null</code>, 와 <code>undefined</code>은 모두 <code>false</code>가 됩니다.</li> - <li>다른 모든 값은 <code>true</code>가 됩니다.</li> -</ol> - -<p>이 변환은 <code>Boolean()</code> 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:</p> - -<pre class="brush: js notranslate">Boolean(''); // false -Boolean(234); // true</pre> - -<p>하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 <code>if</code> 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, <code>true</code>와 <code>false</code>이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.</p> - -<p>부울 연산자는 <code>&&</code> (논리적<em>와, 그리고</em> ), <code>||</code> (논리적<em>또는</em> ), 그리고 <code>!</code> (논리적<em>부정</em> )이 지원됩니다. 아래에서 다시 언급하겠습니다.</p> - -<h2 id=".EB.B3.80.EC.88.98_.28Variables.29" name=".EB.B3.80.EC.88.98_.28Variables.29">변수 (Variables)</h2> - -<p>JavaScript에서 새로운 변수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="/ko/docs/Web/HTML/Element/var">var</a></code> 키워드로 선언됩니다.</p> - -<p><code>let</code>을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 <em>변수가 포함 된 함수 블록</em>에서 사용할 수 있습니다.</p> - -<pre class="brush: js notranslate">let a; -let name = 'Simon';</pre> - -<p>아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. </p> - -<pre class="brush: js notranslate">// myLetVariable는 여기에서 보이지 *않습니다* - -for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { - // myLetVariable는 여기에서 유효합니다 -} - -// myLetVariable는 여기에서 보이지 *않습니다*</pre> - -<p><code>const</code>는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용할 수 있습니다.</p> - -<pre class="brush: js notranslate">const Pi = 3.14; // 변수 Pi 설정 -Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.</pre> - -<p><code>var</code>은 가장 일반적인 변수 선언 키워드입니다. <code>let</code>, <code>const</code> 키워드가 가지는 제한을 <code>var</code>은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. <code>var</code> 키워드로 선언 된 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용 할 수 있습니다.</p> - -<pre class="brush: js notranslate">var a; -var name = 'Simon';</pre> - -<p>var로 선언한 변수의 유효 범위 예제입니다.</p> - -<pre class="brush: js notranslate">// myVarVariable는 여기에서 사용 할 수 *있습니다* - -for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { - // myVarVariable는 함수 전체에서 사용 할 수 있습니다. -} - -// myVarVariable는 여기에서 사용 할 수 *있습니다*</pre> - -<p>변수에 값을 지정하지 않고 변수를 선언하면, 타입은 <code>undefined</code>로 지정 됩니다.</p> - -<p>자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 <code>if</code> 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 및 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.</p> - -<h2 id=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29" name=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29">연산자 (Operators)</h2> - -<p>JavaScript의 산술 연산자로는 <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>(나머지 연산자)가 있습니다. 값은 <code>=</code> 연산자로 할당할 수 있고, <code>+=</code> 와 <code>-=</code>처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 <code>x = x<em>연산자</em> y</code>와 같은 결과를 나타냅니다.</p> - -<pre class="brush: js notranslate">x += 5; -x = x + 5; -</pre> - -<p><code>++</code> 와 <code>--</code> 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.</p> - -<p><a href="ko/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> 연산자</a>는 문자열 이어붙이기도 합니다:</p> - -<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" -</pre> - -<p>문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:</p> - -<pre class="brush: js notranslate">'3' + 4 + 5; // "345" - 3 + 4 + '5'; // "75"</pre> - -<p>빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.</p> - -<p>JavaScript에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">비교</a>는 <code><</code>, <code>></code>, <code><=</code> 와 <code>>=</code> 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (<code>==</code>) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:</p> - -<pre class="brush: js notranslate">123 == '123'; // true -1 == true; // true -</pre> - -<p>타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (<code>===</code>)를 사용해야합니다:</p> - -<pre class="brush: js notranslate">123 === '123'; // false -1 === true; // false -</pre> - -<p>이와 비슷하게 <code>!=</code> 와 <code>!==</code> 연산자가 있습니다.</p> - -<p>JavaScript는 값을 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">비트로 취급하는 연산자</a>도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.</p> - -<h2 id=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0" name=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0">제어 구조</h2> - -<p>JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 <code>if</code> 와 <code>else</code>를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">var name = 'kittens'; -if (name == 'puppies') { - name += ' woof'; -} else if (name == 'kittens') { - name += ' meow'; -} else { - name += '!'; -} -name == 'kittens meow'; -</pre> - -<p>JavaScript는 <code>while</code> 반복문과 <code>do-while</code> 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">while (true) { - // 무한루프! -} - -var input; -do { - input = get_input(); -} while (inputIsNotValid(input)); -</pre> - -<p>JavaScript의 <code>for</code> 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.</p> - -<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { - // 내부 동작을 5번 반복합니다 -} -</pre> - -<p>JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 입니다.</p> - -<pre class="brush: js notranslate">for (let value of array) { - // value로 작업을 실행합니다 -} -</pre> - -<p>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for ... in</a> 입니다.</p> - -<pre class="brush: js notranslate">for (let property in object) { - // object의 항목(property)으로 작업을 실행합니다 -} -</pre> - -<p><code>&&</code> 와 <code>||</code> 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:</p> - -<pre class="brush: js notranslate">var name = o && o.getName(); -</pre> - -<p>또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:</p> - -<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); -</pre> - -<p>JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:</p> - -<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; -</pre> - -<p><code>switch</code> 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:</p> - -<pre class="brush: js notranslate">switch(action) { - case 'draw': - drawIt(); - break; - case 'eat': - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p><code>break</code> 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:</p> - -<pre class="brush: js notranslate">switch(a) { - case 1: // fallthrough - case 2: - eatIt(); - break; - default: - doNothing(); -} -</pre> - -<p>default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은 <code>===</code> 연산자로 비교됩니다.</p> - -<pre class="brush: js notranslate">switch(1 + 3){ - case 2 + 2: - yay(); - break; - default: - neverhappens(); -} -</pre> - -<h2 id=".EA.B0.9D.EC.B2.B4_.28Objects.29" name=".EA.B0.9D.EC.B2.B4_.28Objects.29">객체 (Objects)</h2> - -<p>JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:</p> - -<ul> - <li>Python의 Dictionaries</li> - <li>Perl 과 Ruby의 Hashes</li> - <li>C 와 C++ 의 Hash tables</li> - <li>Java 의 HashMaps</li> - <li>PHP의 Associative arrays</li> -</ul> - -<p>이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!</p> - -<p>값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.</p> - -<p>빈 객체를 생성하는데 두가지 방법이 있습니다:</p> - -<pre class="brush: js notranslate">var obj = new Object(); -</pre> - -<p>와:</p> - -<pre class="brush: js notranslate">var obj = {}; -</pre> - -<p>이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.</p> - -<p>객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:</p> - -<pre class="brush: js notranslate">var obj = { - name: "Carrot", - "for": "Max", - details: { - color: "orange", - size: 12 - } -} -</pre> - -<p>속성에 연속적으로 접근할 수 있습니다:</p> - -<pre class="brush: js notranslate">obj.details.color; // orange -obj["details"]["size"]; // 12 -</pre> - -<p>아래 예제는 객체 프로토타입(<code>Person</code>)과 프로토타입의 인스턴스(<code>you</code>)를 생성합니다.</p> - -<pre class="brush: js notranslate">function Person(name, age) { - this.name = name; - this.age = age; -} - -// 객체를 정의한다 -var you = new Person('You', 24); -// "You"라는 이름의 24세인 새로운 사람을 생성중이다. -</pre> - -<p><strong>일단 생성되면</strong>, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:</p> - -<pre class="brush: js notranslate">// dot 표기법 -obj.name = "Simon" -var name = obj.name; -</pre> - -<p>그리고...</p> - -<pre class="brush: js notranslate">// bracket 표기법 -obj["name"] = "Simon"; -var name = obj["name"]; -// key를 정의하기 위해 변수도 쓸수 있습니다. -var user = prompt('what is your key?') -obj[user] = prompt('what is its value?') -</pre> - -<p>이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 <a href="ko/Core_JavaScript_1.5_Reference/Reserved_Words">예약된 단어(키워드)</a>로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:</p> - -<pre class="brush: js notranslate">obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에 -obj["for"] = "Simon"; // 정상 동작 -</pre> - -<div class="blockIndicator note"> -<p>ECMAScript 5 이래로, 예약어는 객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다. ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>을 참고해 보십시오.</p> -</div> - -<p>객체나 프로토타입에 대한 좀더 상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 <a href="/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">상속과 프로토타입 체인</a> 을 참조하십시오.</p> - -<div class="blockIndicator note"> -<p>ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 <code>var userPhone = {}; userPhone[phoneType] = 12345</code>. 처럼 표기하는 방법 대신 <code>{[phoneType]: 12345}</code> 와 같은 사용법도 가능합니다.</p> -</div> - -<h2 id=".EB.B0.B0.EC.97.B4_.28Arrays.29" name=".EB.B0.B0.EC.97.B4_.28Arrays.29">배열 (Arrays)</h2> - -<p>JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '<code>length</code>'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.</p> - -<p>배열을 생성하는 예전 방법은 다음과 같습니다:</p> - -<pre class="brush: js notranslate">var a = new Array(); -a[0] = "dog"; -a[1] = "cat"; -a[2] = "hen"; -a.length // 3 -</pre> - -<p>한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:</p> - -<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; -> a.length -3 -</pre> - -<p>배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.</p> - -<p><code>array.length</code> 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:</p> - -<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; -> a[100] = "fox"; -> a.length -101 -</pre> - -<p>기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.</p> - -<p>존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 <code>undefined</code> 을 얻게됩니다:</p> - -<pre class="brush: js notranslate">> typeof(a[90]) -undefined -</pre> - -<p><code>[]</code> 와 <code>length</code>에 관한 위의 사항들을 감안하면 배열을 <code>for</code> 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - // a[i] 로 뭔가를 수행 -} -</pre> - -<p>ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.</p> - -<pre class="brush: js notranslate">for (const currentValue of a) { - // currentValue 로 뭔가를 수행 -}</pre> - -<p>또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 <code>Array.prototype</code>에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.</p> - -<p>배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a> 입니다:</p> - -<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { - // currentValue나 array[index]로 뭔가를 수행 -} -</pre> - -<p>배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:</p> - -<pre class="brush: js notranslate">a.push(item);</pre> - -<p>배열은 몇가지 메서드가 제공됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">배열 메서드에 대한 전체 문서</a>를 참조하십시오.</p> - -<table> - <thead> - <tr> - <th scope="col">메서드 이름</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>a.toString()</code></td> - <td>각 항목에 대한 <code>toString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.toLocaleString()</code></td> - <td>각 항목에 대한 <code>toLocaleString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> - <td>item들이 덧붙여진 한개의 배열을 반환합니다.</td> - </tr> - <tr> - <td><code>a.join(sep)</code></td> - <td>배열의 값들을 <code>sep</code> 인자로 구분하여 합친 한개의 문자열로 변환합니다.</td> - </tr> - <tr> - <td><code>a.pop()</code></td> - <td>배열의 마지막 항목을 반환하면서 제거합니다.</td> - </tr> - <tr> - <td><code>a.push(item1, ..., itemN)</code></td> - <td>배열의 끝에 item들을 덧붙입니다.</td> - </tr> - <tr> - <td><code>a.shift()</code></td> - <td>배열의 첫번째 항목을 반환하면서 제거합니다.</td> - </tr> - <tr> - <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> - <td>배열의 앞쪽에 item들을 덧붙입니다.</td> - </tr> - <tr> - <td><code>a.slice(start[, end])</code></td> - <td>배열의 일부분을 새배열로 반환합니다.</td> - </tr> - <tr> - <td><code>a.sort([cmpfn])</code></td> - <td>옵션으로 비교용도의 함수를 입력받습니다.</td> - </tr> - <tr> - <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> - <td>배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..</td> - </tr> - <tr> - <td><code>a.reverse()</code></td> - <td>배열의 순서를 거꾸로 배열합니다.</td> - </tr> - </tbody> -</table> - -<h2 id=".ED.95.A8.EC.88.98_.28Functions.29" name=".ED.95.A8.EC.88.98_.28Functions.29">함수 (Functions)</h2> - -<p>객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:</p> - -<pre class="brush: js notranslate">function add(x, y) { - var total = x + y; - return total; -} -</pre> - -<p>이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. <code>return</code> 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 <code>undefined</code>을 돌려줍니다.</p> - -<p>이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 <code>undefined</code>로 설정됩니다.</p> - -<pre class="brush: js notranslate">add(); //NaN -// undefined에 대해 덧셈을 수행할 수 없습니다 -</pre> - -<p>함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:</p> - -<pre class="brush: js notranslate">add(2, 3, 4); // 5 -// 처음의 두 수가 더해집니다. 4는 무시됨 -</pre> - -<p>이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 <a href="ko/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a>라고 하며, 해당 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:</p> - -<pre class="brush: js notranslate">function add() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum; -} - -add(2, 3, 4, 5); // 14 -</pre> - -<p>확실히 <code>2 + 3 + 4 + 5</code>를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:</p> - -<pre class="brush: js notranslate">function avg() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<p>이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest 파라미터 문법</a>으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. <strong>Rest 파라미터 연산자</strong>는 다음과 같은 포맷(<strong>...variable</strong>)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 <strong>for</strong> 루프를 <strong>for..of</strong> 루프로 변경합니다.</p> - -<pre class="brush: js notranslate">function avg(...args) { - var sum = 0; - for (let value of args) { - sum += value; - } - return sum / arr.length; -} - -avg(2, 3, 4, 5); // 3.5 -</pre> - -<div class="blockIndicator note"> -<p>위 코드에서,변수 <strong>args</strong> 는 함수로 전달된 모든 값을 가지고 있습니다.<br> - <br> - rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치<em> 이후</em>에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 ,<em> function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>에서 함수로 전달된 첫번째 값은 <strong>firstValue </strong>변수에 저장되며, 남은 변수들은 <strong>args</strong>에 저장됩니다.</p> -</div> - -<p>이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. <code>avg()</code> 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :</p> - -<pre class="notranslate">function avgArray(arr) { - var sum = 0; - for (var i = 0, j = arr.length; i < j; i++) { - sum += arr[i]; - } - return sum / arr.length; -} - -avgArray([2, 3, 4, 5]); // 3.5</pre> - -<p>하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.</p> - -<pre class="brush: js notranslate">> avg.apply(null, [2, 3, 4, 5]) -3.5 -</pre> - -<p><code>apply()의 </code>두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.</p> - -<div class="blockIndicator note"> -<p>함수 호출시 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자(spread operator)</a> 를 이용하여 똑같은 결과를 얻을수 있습니다.</p> - -<p>예를 들면: <code>avg(...numbers)</code></p> -</div> - -<p>JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.</p> - -<pre class="brush: js notranslate">var avg = function() { - var sum = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - sum += arguments[i]; - } - return sum / arguments.length; -} -</pre> - -<p>이것은 의미적으로 <code>function avg()</code> 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:</p> - -<pre class="brush: js notranslate">var a = 1; -var b = 2; - -(function() { - var b = 3; - a += b; -})(); - -a; // 4 -b; // 2 -</pre> - -<p>JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.</p> - -<pre class="brush: js notranslate">function countChars(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += countChars(child); - } - return count; -} -</pre> - -<p>다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:</p> - -<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { - if (elm.nodeType == 3) { // TEXT_NODE - return elm.nodeValue.length; - } - var count = 0; - for (var i = 0, child; child = elm.childNodes[i]; i++) { - count += counter(child); - } - return count; -})(document.body); -</pre> - -<p>위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.</p> - -<p>JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 - 그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오</p> - -<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4">사용자 정의 객체</h2> - -<div class="blockIndicator note"> -<p>JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 <a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a>를 참조하십시오.</p> -</div> - -<p>고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:</p> - -<pre class="brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last - } -} -function personFullName(person) { - return person.first + ' ' + person.last; -} -function personFullNameReversed(person) { - return person.last + ', ' + person.first -} - -var s = makePerson("Simon", "Willison"); -personFullName(s); // "Simon Willison" -personFullNameReversed(s); // "Willison, Simon" -</pre> - -<p>이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.</p> - -<pre class="brush: js notranslate">function makePerson(first, last) { - return { - first: first, - last: last, - fullName: function() { - return this.first + ' ' + this.last; - }, - fullNameReversed: function() { - return this.last + ', ' + this.first; - } - }; -} - -var s = makePerson('Simon', 'Willison'); -s.fullName(); // "Simon Willison" -s.fullNameReversed(); // "Willison, Simon" -</pre> - -<p><code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code> 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, <code>this</code>는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators">dot 표기법이나 bracket 표기법</a>을 사용해서 부른 경우, 해당 객체는 <code>this</code>가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, <code>this</code>는 전역 객체를 참조하게 됩니다.</p> - -<p><code>this</code>가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:</p> - -<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison'); -var fullName = s.fullName; -fullName(); // undefined undefined -</pre> - -<p><code>s.fullName()</code>을 이용하지 않고 <code>fullName()</code>을 단독으로 호출하면, '<code>this</code>'는 전역 객체로 묶이게(bind) 됩니다. <code>first</code> 또는 <code>last</code> 로 명명된 전역 변수가 없기 때문에, 각각에 대해 <code>undefined</code> 결과를 얻게됩니다.</p> - -<p><code>makePerson</code> 함수를 개선하는데 '<code>this</code>' 키워드의 이점을 취할 수 있습니다:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = function() { - return this.first + ' ' + this.last; - }; - this.fullNameReversed = function() { - return this.last + ', ' + this.first; - }; -} -var s = new Person('Simon', 'Willison'); -</pre> - -<p>여기서 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>라는 또다른 키워드를 도입했습니다. <code>new</code>는 <code>this</code>와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 <code>this</code> 에 설정합니다. <code>this</code>로 지정된 함수는 값을 반환하지 않고 단지 <code>this</code> 객체를 수정한다는 것을 명심하세요. <code>this</code> 객체를 호출하는 곳으로 반환하는 것은 <code>new</code> 입니다. '<code>new</code>' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 <code>new</code>로 불릴 컨스트럭터 함수임을 나타냅니다.</p> - -<p>개선된 함수는 여전히 <code>fullName()</code> 을 단독으로 호출할 때의 함정이 존재합니다.</p> - -<p>우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?</p> - -<pre class="brush: js notranslate">function personFullName() { - return this.first + ' ' + this.last; -} -function personFullNameReversed() { - return this.last + ', ' + this.first; -} -function Person(first, last) { - this.first = first; - this.last = last; - this.fullName = personFullName; - this.fullNameReversed = personFullNameReversed; -} -</pre> - -<p>더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:</p> - -<pre class="brush: js notranslate">function Person(first, last) { - this.first = first; - this.last = last; -} -Person.prototype.fullName = function() { - return this.first + ' ' + this.last; -}; -Person.prototype.fullNameReversed = function() { - return this.last + ', ' + this.first; -}; -</pre> - -<p><code>Person.prototype</code>은 모든 <code>Person</code> 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, <code>Person</code> 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 <code>Person.prototype</code>에 그 속성이 존재하는지 살펴봅니다.그 결과, <code>Person.prototype</code>에 할당된 모든 것은 <code>this</code> 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.</p> - -<p>이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:</p> - -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); -s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function - -Person.prototype.firstNameCaps = function() { - return this.first.toUpperCase() -}; -s.firstNameCaps(); // "SIMON" -</pre> - -<p>흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. <code>String</code> 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.</p> - -<pre class="brush: js notranslate">var s = "Simon"; -s.reversed(); // TypeError on line 1: s.reversed is not a function - -String.prototype.reversed = function() { - var r = ""; - for (var i = this.length - 1; i >= 0; i--) { - r += this[i]; - } - return r; -}; - -s.reversed(); // nomiS -</pre> - -<p>우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!</p> - -<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT -</pre> - -<p>기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 <code>Object.prototype</code> 이며 <code>toString()</code> 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 <code>Person</code> 객체의 디버깅에 유용합니다:</p> - -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); -s.toString(); // [object Object] - -Person.prototype.toString = function() { - return '<Person: ' + this.fullName() + '>'; -} - -s.toString(); // "<Person: Simon Willison>" -</pre> - -<p><code>avg.apply()</code>의 첫번째 매개변수가 null 이었던걸 기억해봅시다. <code>apply()</code>에 적용되는 첫번째 인자는 당연히 `<code>this</code>'로 간주되는 객체입니다. 여기에 <code>new</code> 의 간단한 구현을 보시죠:</p> - -<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { - var o = {}; // 빈 객체를 생성 - constructor.apply(o, args); - return o; -} -</pre> - -<p>이것은 prototype 체인을 설정하지 않으므로 <code>new</code>의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 <code>...args</code> (생략 부호를 포함해서)는 "<a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.</p> - -<p>그러므로 이렇게 호출하는 것은</p> - -<pre class="notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> - -<p>아래와 거의 동일합니다.</p> - -<pre class="notranslate">var bill = new Person('William', 'Orange');</pre> - -<p><code>apply()</code> 와 비슷하게 <code>this</code>를 다시 설정할 수 있게 하는, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.</p> - -<pre class="brush: js notranslate">function lastNameCaps() { - return this.last.toUpperCase(); -} -var s = new Person('Simon', 'Willison'); -lastNameCaps.call(s); -// 위의 구문은 다음과 같습니다: -s.lastNameCaps = lastNameCaps; -s.lastNameCaps(); -</pre> - -<h3 id=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98" name=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98">내장 함수 (Inner functions)</h3> - -<p>다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 <code>makePerson()</code> 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:</p> - -<pre class="brush: js notranslate">function parentFunc() { - var a = 1; - - function nestedFunc() { - var b = 4; // parentFunc은 사용할 수 없는 변수 - return a + b; - } - return nestedFunc(); // 5 -} -</pre> - -<p>좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.</p> - -<p>이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.</p> - -<h2 id=".ED.8F.90.ED.8F.AC_.28Closures.29" name=".ED.8F.90.ED.8F.AC_.28Closures.29">클로져 (Closures)</h2> - -<p>클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?</p> - -<pre class="brush: js notranslate">function makeAdder(a) { - return function(b) { - return a + b; - }; -} -var add5 = makeAdder(5); -var add20 = makeAdder(20); -add5(6); // ? -add20(7); // ? -</pre> - -<p><code>makeAdder</code> 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.</p> - -<p>여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히<em>존재합니다</em> - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, <code>makeAdder</code> 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 <code>a</code>는 5이고, 다른 하나의 <code>a</code>는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:</p> - -<pre class="brush: js notranslate">x(6) // 11을 돌려줌 -y(7) // 27을 돌려줌 -</pre> - -<p>이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.</p> - -<p>따라서 <code>makeAdder</code> 가 호출되면, 범위 객체는 <code>makeAdder</code> 함수에 매개변수로 넘겨진 하나의 속성 <code>a</code>를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 <code>makeAdder</code>에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 <code>makeAdder</code>에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.</p> - -<p>범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.</p> - -<p>클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.</p> - -<p>또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.</p> - -<h3 id=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C" name=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C">메모리 누출</h3> - -<p>클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.</p> - -<p>브라우저 호스트는 HTML 페이지에 <a href="ko/DOM">DOM</a> 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.</p> - -<p>Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.</p> - -<p>IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:</p> - -<pre class="brush: js notranslate">function leakMemory() { - var el = document.getElementById('el'); - var o = { 'el': el }; - el.o = o; -} -</pre> - -<p>위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 <code>el</code>와 <code>o</code>에 의해 사용되는 메모리를 반환하지 못합니다.</p> - -<p>위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.</p> - -<p>누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.</p> - -<p>클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var el = document.getElementById('el'); - el.onclick = function() { - this.style.backgroundColor = 'red'; - } -} -</pre> - -<p>위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? <code>el</code>을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (<code>el</code>)간에 순환 참조를 만듭니다.</p> - -<p>이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var el = document.getElementById('el'); - el.onclick = function() { - this.style.backgroundColor = 'red'; - } - el = null; -} -</pre> - -<p>이렇게 하면 순환 참조 고리를 끊을 수 있습니다.</p> - -<p>놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:</p> - -<pre class="brush: js notranslate">function addHandler() { - var clickHandler = function() { - this.style.backgroundColor = 'red'; - } - (function() { - var el = document.getElementById('el'); - el.onclick = clickHandler; - })(); -} -</pre> - -<p>내부 함수는 실행되고 바로 사라지므로서, <code>clickHandler</code>와 함께 생성된 클로져로부터 그 내용을 숨깁니다.</p> - -<p>클로져를 피할 수 있는 또다른 좋은 요령은 <code>window.onunload</code> 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 <a href="ko/Using_Firefox_1.5_caching">Firefox 1.5의 bfcache</a>를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 <code>unload</code> listener를 등록해서는 안 된다는 것입니다.</p> - -<div class="originaldocinfo"> -<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2> - -<ul> - <li>저자: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> - <li>최근 갱신 날짜: March 7, 2006</li> - <li>저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> - <li>추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> -</ul> -</div> - -<p>{{ languages( { "en": "en/A_re-introduction_to_JavaScript", "fr": "fr/Une_reintroduction_a_JavaScript", "it": "it/Una_re-introduzione_a_Javascript", "ja": "ja/A_re-introduction_to_JavaScript", "pl": "pl/JavaScript/Na_pocz?tek", "zh-cn": "cn/A_re-introduction_to_JavaScript" } ) }}</p> diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.md b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md new file mode 100644 index 0000000000..66264ba637 --- /dev/null +++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md @@ -0,0 +1,1106 @@ +--- +title: JavaScript 재입문하기 (JS 튜토리얼) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - CodingScripting + - Guide + - Intermediate + - Intro + - JavaScript + - Learn +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: A_re-introduction_to_JavaScript +--- +{{jsSidebar}} + +어째서 재입문일까요? 왜냐하면, [JavaScript](/ko/docs/Glossary/JavaScript)는 [세계에서 가장 오해받고 있는 프로그래밍 언어](http://javascript.crockford.com/javascript.html)로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다. + +이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다. + +몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 [ECMAScript](/ko/docs/Glossary/ECMAScript) 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 [Ecma International](https://www.ecma-international.org/)에 보냅니다. 이 표준은 1999년에 [ECMAScript edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm)에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다.4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. + +> **참고:** 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 "JavaScript"라고 부르겠습니다. + +대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, [node.js](https://nodejs.org/) 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, [Apache CouchDB](https://couchdb.apache.org/), 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 [GNOME](https://www.gnome.org/) 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다. + +## 개요 + +JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 ([프로토 타입 상속](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 및 ES2015 [classes](/ko/docs/Web/JavaScript/Reference/Classes). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다. + +어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다: + +- [수 (Number)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number) +- [BigInt](/ko/docs/docs/Web/JavaScript/Data_structures#bigint_type) +- [문자열 (String)](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) +- [부울 (Boolean)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [함수 (Function)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) +- [객체 (Object)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object) +- [기호 (Symbol)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) (ES2015에 새롭게 추가) + +... 오, 그리고 약간 특별한 타입인 [undefined](/ko/docs/docs/Web/JavaScript/Data_structures#undefined_type) 과 [null](/ko/docs/docs/Web/JavaScript/Data_structures#null_type) 이 있습니다. 또한 객체의 특별한 종류인 [배열(Array) 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array). 그리고 자유롭게 사용할 수 있는 [날짜(Date) 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date) 와 [정규식(RegExp) 객체](ko/Web/JavaScript/Reference/Global_Objects/RegExp)가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다: + +- [수 (Number)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number) +- [BigInt](/ko/docs/docs/Web/JavaScript/Data_structures#bigint_type) +- [문자열 (String)](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) +- [부울 (Boolean)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [기호 (Symbol)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) +- [객체 (Object)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object) + - [함수 (Function)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) + - [배열 (Array)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) + - [날짜 (Date)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date) + - [정규식 (RegExp)](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp) +- [널 (Null)](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) +- [정의되지 않음 (Undefined)](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined) + +그리고 또 몇 가지 [오류](/ko/docs/Web/JavaScript/Reference/Global_Objects/Error) 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다. + +## 수 (Numbers) + +설계 명세서에 의하면 JavaScript에서 수는 ["이중정밀도 64비트 형식 IEEE 754 값"](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) (numbers between -(2^53 − 1) and 2^53 − 1)으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 **정수와 같은 것이 존재하지 않으므로** ({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요: + +```js +console.log(3 / 2); // 1.5, not 1 +console.log(Math.floor(3 / 2)); // 1 +``` + +*명백한 정수*는 사실 *암묵적으로 실수*입니다. + +또한, 다음과 같은 것들을 주의하세요: + +```js +0.1 + 0.2 == 0.30000000000000004; +``` + +실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다. + +덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 [산술 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators)가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 [수학(Math)](/ko/Core_JavaScript_1.5_Reference/Global_Objects/Math)으로 불리는 내장 객체가 있습니다: + +```js +Math.sin(3.5); +var circumference = 2 * Math.PI * r; +``` + +내장 [`parseInt()`](ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt) 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다: + +```js +parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +``` + +구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다. + +```js +parseInt('010'); // 8 +parseInt('0x10'); // 16 +``` + +이 같은 결과는 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다. + +만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다: + +```js +parseInt('11', 2); // 3 +``` + +이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 `parseFloat()`는 항상 10진수를 사용합니다. + +단항 연산자 `+` 를 사용하여 값을 숫자로 변환 할 수도 있습니다: + +```js ++ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +``` + +문자열이 수가 아닌 경우 [`NaN`](ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN) ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다: + +```js +parseInt('hello', 10); // NaN +``` + +`NaN` 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 `NaN`가 되기 때문입니다: + +```js +NaN + 5; // NaN +``` + +내장 [`isNaN()`](ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN) 함수를 사용해서 `NaN` 인지 여부를 검사할 수 있습니다: + +```js +Number.isNaN(NaN); // true +Number.isNaN('hello'); // false +Number.isNaN('1'); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN([1]) // false +Number.isNaN([1,2]) // false +``` + +But don’t test for `NaN` using the global {{jsxref("Global_Objects/isNaN", "isNaN()")}} function, [which has unintuitive behavior](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior): + +```js +isNaN('hello'); // true +isNaN('1'); // false +isNaN(undefined); // true +isNaN({}); // true +isNaN([1]) // false +isNaN([1,2]) // true +``` + +JavaScript는 또 특별한 값 [`Infinity`](ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity)와 `-Infinity`를 가지고 있습니다: + +```js + 1 / 0; // Infinity +-1 / 0; // -Infinity +``` + +내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다. + +```js +isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +``` + +> **참고:** {{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 `NaN` 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다. + +## 문자열 (Strings) + +JavaScript에서 문자열은 [유니코드 문자들](/ko/Core_JavaScript_1.5_Guide/Unicode)이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다. + +한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다. + +문자열의 길이를 알고싶다면, 해당 문자열의 [`length`](/ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length) 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다: + +```js +'hello'.length; // 5 +``` + +우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 [메소드](/ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods)까지 있는 확실한 녀석입니다: + +```js +'hello'.charAt(0); // "h" +'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" +'hello'.toUpperCase(); // "HELLO" +``` + +## 이외의 타입들 + +JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 `null`과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 `undefined`로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 `undefined`이 되는 것입니다. + +JavaScript는 `true` 와 `false` 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다: + +1. `false`, `0`, 빈 문자열 (`""`), 수가 아님을 뜻하는 `NaN`, `null`, 와 `undefined`은 모두 `false`가 됩니다. +2. 다른 모든 값은 `true`가 됩니다. + +이 변환은 `Boolean()` 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다: + +```js +Boolean(''); // false +Boolean(234); // true +``` + +하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 `if` 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, `true`와 `false`이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다. + +부울 연산자는 `&&` (논리적*와, 그리고* ), `||` (논리적*또는* ), 그리고 `!` (논리적*부정* )이 지원됩니다. 아래에서 다시 언급하겠습니다. + +## 변수 (Variables) + +JavaScript에서 새로운 변수는 [`let`](/ko/docs/Web/JavaScript/Reference/Statements/let), [`const`](/ko/docs/Web/JavaScript/Reference/Statements/const), [`var`](/ko/docs/Web/HTML/Element/var) 키워드로 선언됩니다. + +**`let`**을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 *변수가 포함 된 함수 블록*에서 사용할 수 있습니다. + +```js +let a; +let name = 'Simon'; +``` + +아래는 **let**으로 선언한 변수가 가지는 유효 범위의 예제입니다. + +```js +// myLetVariable는 여기에서 보이지 *않습니다* + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // myLetVariable는 여기에서 유효합니다 +} + +// myLetVariable는 여기에서 보이지 *않습니다* +``` + +**`const`**는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 *변수가 선언 된 함수 블록*에서 사용할 수 있습니다. + +```js +const Pi = 3.14; // 변수 Pi 설정 +Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생. +``` + +**`var`**은 가장 일반적인 변수 선언 키워드입니다. `let`, `const` 키워드가 가지는 제한을 `var`은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. **`var`** 키워드로 선언 된 변수는 *변수가 선언 된 함수 블록*에서 사용 할 수 있습니다. + +```js +var a; +var name = 'Simon'; +``` + +**`var`**로 선언한 변수의 유효 범위 예제입니다. + +```js +// myVarVariable는 여기에서 사용 할 수 *있습니다* + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable는 함수 전체에서 사용 할 수 있습니다. +} + +// myVarVariable는 여기에서 사용 할 수 *있습니다* +``` + +변수에 값을 지정하지 않고 변수를 선언하면, 타입은 `undefined`로 지정 됩니다. + +자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 `if` 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 [`let`](/ko/docs/Web/JavaScript/Reference/Statements/let) 및 [`const`](/ko/docs/Web/JavaScript/Reference/Statements/const) 선언을 사용하면 블록 범위 변수를 만들 수 있습니다. + +## 연산자 (Operators) + +JavaScript의 산술 연산자로는 `+`, `-`, `*`, `/`, `%`(나머지 연산자)가 있습니다. 값은 `=` 연산자로 할당할 수 있고, `+=` 와 `-=`처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 `x = x연산자 y`와 같은 결과를 나타냅니다. + +```js +x += 5; +x = x + 5; +``` + +`++` 와 `--` 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다. + +[`+` 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/String_Operators)는 문자열 이어붙이기도 합니다: + +```js +'hello' + ' world'; // "hello world" +``` + +문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다: + +```js +'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +``` + +빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다. + +JavaScript에서 [비교](/ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators)는 `<`, `>`, `<=` 와 `>=` 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (`==`) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다: + +```js +123 == '123'; // true +1 == true; // true +``` + +타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (`===`)를 사용해야합니다: + +```js +123 === '123'; // false +1 === true; // false +``` + +이와 비슷하게 `!=` 와 `!==` 연산자가 있습니다. + +JavaScript는 값을 [비트로 취급하는 연산자](/ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators)도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠. + +## 제어 구조 + +JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 `if` 와 `else`를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다: + +```js +var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +``` + +JavaScript는 `while` 반복문과 `do-while` 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다: + +```js +while (true) { + // 무한루프! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +``` + +JavaScript의 [`for`](/ko/docs/Web/JavaScript/Reference/Statements/for) 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요. + +```js +for (var i = 0; i < 5; i++) { + // 내부 동작을 5번 반복합니다 +} +``` + +JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 [for...of](/ko/docs/Web/JavaScript/Reference/Statements/for...of) 입니다. + +```js +for (let value of array) { + // value로 작업을 실행합니다 +} +``` + +그리고 [for ... in](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 입니다. + +```js +for (let property in object) { + // object의 항목(property)으로 작업을 실행합니다 +} +``` + +`&&` 와 `||` 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다: + +```js +var name = o && o.getName(); +``` + +또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.: + +```js +var name = cachedName || (cachedName = getName()); +``` + +JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다: + +```js +var allowed = (age > 18) ? "yes" : "no"; +``` + +`switch` 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다: + +```js +switch(action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +``` + +`break` 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다: + +```js +switch(a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +``` + +default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은 `===` 연산자로 비교됩니다. + +```js +switch(1 + 3){ + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +``` + +## 객체 (Objects) + +JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다: + +- Python의 Dictionaries +- Perl 과 Ruby의 Hashes +- C 와 C++ 의 Hash tables +- Java 의 HashMaps +- PHP의 Associative arrays + +이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다! + +값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다. + +빈 객체를 생성하는데 두가지 방법이 있습니다: + +```js +var obj = new Object(); +``` + +와: + +```js +var obj = {}; +``` + +이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다. + +객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다: + +```js +var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +``` + +속성에 연속적으로 접근할 수 있습니다: + +```js +obj.details.color; // orange +obj["details"]["size"]; // 12 +``` + +아래 예제는 객체 프로토타입(`Person`)과 프로토타입의 인스턴스(`you`)를 생성합니다. + +```js +function Person(name, age) { + this.name = name; + this.age = age; +} + +// 객체를 정의한다 +var you = new Person('You', 24); +// "You"라는 이름의 24세인 새로운 사람을 생성중이다. +``` + +**일단 생성되면**, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다: + +```js +// dot 표기법 +obj.name = "Simon" +var name = obj.name; +``` + +그리고... + +```js +// bracket 표기법 +obj["name"] = "Simon"; +var name = obj["name"]; +// key를 정의하기 위해 변수도 쓸수 있습니다. +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +``` + +이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 [예약된 단어(키워드)](/ko/Core_JavaScript_1.5_Reference/Reserved_Words)로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다: + +```js +obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에 +obj["for"] = "Simon"; // 정상 동작 +``` + +> **참고:** ECMAScript 5 이래로, 예약어는 객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다. ES5 [Spec](http://es5.github.io/#x7.6.1)을 참고해 보십시오. + +객체나 프로토타입에 대한 좀더 상세한 내용은 [Object.prototype](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 [상속과 프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 을 참조하십시오. + +> **참고:** ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 `var userPhone = {}; userPhone[phoneType] = 12345`. 처럼 표기하는 방법 대신 `{[phoneType]: 12345}` 와 같은 사용법도 가능합니다. + +## 배열 (Arrays) + +JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 `[]` 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '`length`'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다. + +배열을 생성하는 예전 방법은 다음과 같습니다: + +```js +var a = new Array(); +a[0] = "dog"; +a[1] = "cat"; +a[2] = "hen"; +a.length // 3 +``` + +한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다: + +```js +var a = ['dog', 'cat', 'hen']; +a.length; // 3 +``` + +배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다. + +`array.length` 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다: + +```js +var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +``` + +기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다. + +존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 `undefined` 을 얻게됩니다: + +```js +typeof a[90]; // undefined +``` + +`[]` 와 `length`에 관한 위의 사항들을 감안하면 배열을 `for` 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다: + +```js +for (var i = 0; i < a.length; i++) { + // a[i] 로 뭔가를 수행 +} +``` + +ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 [`for`...`of`](/ko/docs/Web/JavaScript/Reference/Statements/for...of) 루프를 소개했습니다. + +```js +for (const currentValue of a) { + // currentValue 로 뭔가를 수행 +} +``` + +또한 [`for`...`in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 `Array.prototype`에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다. + +배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 [forEach()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 입니다: + +```js +['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // currentValue나 array[index]로 뭔가를 수행 +} +``` + +배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다: + +```js +a.push(item); +``` + +배열은 몇가지 메서드가 제공됩니다. [배열 메서드에 대한 전체 문서](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)를 참조하십시오. + +| 메서드 이름 | 설명 | +| ---------------------------------------------------- | ------------------------------------------------------------------------------------ | +| `a.toString()` | 각 항목에 대한 `toString()`의 출력이 콤마로 구분된 한개의 문자열을 반환합니다. | +| `a.toLocaleString()` | 각 항목에 대한 `toLocaleString()`의 출력이 콤마로 구분된 한개의 문자열을 반환합니다. | +| `a.concat(item1[, item2[, ...[, itemN]]])` | item들이 덧붙여진 한개의 배열을 반환합니다. | +| `a.join(sep)` | 배열의 값들을 `sep` 인자로 구분하여 합친 한개의 문자열로 변환합니다. | +| `a.pop()` | 배열의 마지막 항목을 반환하면서 제거합니다. | +| `a.push(item1, ..., itemN)` | 배열의 끝에 item들을 덧붙입니다. | +| `a.shift()` | 배열의 첫번째 항목을 반환하면서 제거합니다. | +| `a.unshift(item1[, item2[, ...[, itemN]]])` | 배열의 앞쪽에 item들을 덧붙입니다. | +| `a.slice(start[, end])` | 배열의 일부분을 새배열로 반환합니다. | +| `a.sort([cmpfn])` | 옵션으로 비교용도의 함수를 입력받습니다. | +| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | 배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다.. | +| `a.reverse()` | 배열의 순서를 거꾸로 배열합니다. | + +## 함수 (Functions) + +객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다: + +```js +function add(x, y) { + var total = x + y; + return total; +} +``` + +이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. `return` 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 `undefined`을 돌려줍니다. + +이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 `undefined`로 설정됩니다. + +```js +add(); //NaN +// undefined에 대해 덧셈을 수행할 수 없습니다 +``` + +함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다: + +```js +add(2, 3, 4); // 5 +// 처음의 두 수가 더해집니다. 4는 무시됨 +``` + +이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 [`arguments`](/ko/Core_JavaScript_1.5_Reference/Functions/arguments)라고 하며, 해당 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다: + +```js +function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +``` + +확실히 `2 + 3 + 4 + 5`를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다: + +```js +function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +``` + +이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 [Rest 파라미터 문법](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters)으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. **Rest 파라미터 연산자**는 다음과 같은 포맷(**...variable**)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 **for** 루프를 **for..of** 루프로 변경합니다. + +```js +function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / arr.length; +} + +avg(2, 3, 4, 5); // 3.5 +``` + +위 코드에서,변수 **args** 는 함수로 전달된 모든 값을 가지고 있습니다. rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치 이후에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 , function avg(**firstValue,**...args)에서 함수로 전달된 첫번째 값은 **firstValue** 변수에 저장되며, 남은 변수들은 **args**에 저장됩니다. 이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. `avg()` 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다: + +```js + function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; + } + + avgArray([2, 3, 4, 5]); // 3.5 +``` + +하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 [`apply()`](/ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply) 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다. + +```js +avg.apply(null, [2, 3, 4, 5]); // 3.5 +``` + +`apply()의 `두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다. + +함수 호출시 [전개 연산자(spread operator)](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 를 이용하여 똑같은 결과를 얻을수 있습니다. + +예를 들면: `avg(...numbers)` + +## 익명 함수 + +JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다. + +```js +function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +``` + +이것은 의미적으로 `function avg()` 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다: + +```js +var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +``` + +But such an anonymous function isn’t useful in isolation — because without a name, there’s no way to call the function. So in practice, anonymous functions are typically used as arguments to other functions or are made callable by immediately assigning them to a variable that can be used to invoke the function: + +```js +var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +``` + +That makes the anonymous function invocable by calling `avg()` with some arguments — that is, it’s semantically equivalent to declaring the function using the `function avg()` named-function form. + +But there’s a way that anonymous functions can be useful even without ever being assigned to variables or passed as arguments to other functions: JavaScript provides a mechanism for simultaneously declaring and invoking a function using a single expression. It’s called an [Immediately invoked function expression (IIFE)](/en-US/docs/Glossary/IIFE), and the syntax for using it with an anonymous function looks like this: + +```js +(function() { + // … +})(); +``` + +Further details on IIFEs are out of scope for this introductory article — but a good example of what they’re particularly useful for is in the [Emulating private methods with closures](/en-US/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures) section of the [Closures](/en-US/docs/Web/JavaScript/Closures) article. + +### 재귀 함수 + +JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다. + +```js +function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +``` + +다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 [IIFEs (Immediately Invoked Function Expressions)](/en-US/docs/Glossary/IIFE) (즉시 실행 함수 표현)를 다음과 같이 사용할 수 있습니다: + +```js +var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +``` + +위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다. + +JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 - 그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오 + +## 사용자 정의 객체 + +> **참고:** JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 [객체 지향 JavaScript 소개](/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)를 참조하십시오. + +고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다: + +```js +function makePerson(first, last) { + return { + first: first, + last: last + } +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first +} + +var s = makePerson("Simon", "Willison"); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +``` + +이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다. + +```js +function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +``` + +[`this`](ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator) 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, `this`는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 [dot 표기법이나 bracket 표기법](ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators)을 사용해서 부른 경우, 해당 객체는 `this`가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, `this`는 전역 객체를 참조하게 됩니다. + +`this`가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면: + +```js +var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +``` + +`s.fullName()`을 이용하지 않고 `fullName()`을 단독으로 호출하면, '`this`'는 전역 객체로 묶이게(bind) 됩니다. `first` 또는 `last` 로 명명된 전역 변수가 없기 때문에, 각각에 대해 `undefined` 결과를 얻게됩니다. + +`makePerson` 함수를 개선하는데 '`this`' 키워드의 이점을 취할 수 있습니다: + +```js +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +``` + +여기서 [`new`](/ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator)라는 또다른 키워드를 도입했습니다. `new`는 `this`와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 `this` 에 설정합니다. `this`로 지정된 함수는 값을 반환하지 않고 단지 `this` 객체를 수정한다는 것을 명심하세요. `this` 객체를 호출하는 곳으로 반환하는 것은 `new` 입니다. '`new`' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 `new`로 불릴 컨스트럭터 함수임을 나타냅니다. + +개선된 함수는 여전히 `fullName()` 을 단독으로 호출할 때의 함정이 존재합니다. + +우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요? + +```js +function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +``` + +더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다: + +```js +function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +``` + +`Person.prototype`은 모든 `Person` 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, `Person` 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 `Person.prototype`에 그 속성이 존재하는지 살펴봅니다.그 결과, `Person.prototype`에 할당된 모든 것은 `this` 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다. + +이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다: + +```js +var s = new Person("Simon", "Willison"); +s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase() +}; +s.firstNameCaps(); // "SIMON" +``` + +흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. `String` 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다. + +```js +var s = "Simon"; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +``` + +우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다! + +```js +"This can now be reversed".reversed(); // desrever eb won nac sihT +``` + +기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 `Object.prototype` 이며 `toString()` 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 `Person` 객체의 디버깅에 유용합니다: + +```js +var s = new Person("Simon", "Willison"); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +``` + +`avg.apply()`의 첫번째 매개변수가 null 이었던걸 기억해봅시다. `apply()`에 적용되는 첫번째 인자는 당연히 '`this`'로 간주되는 객체입니다. 여기에 `new` 의 간단한 구현을 보시죠: + +```js +function trivialNew(constructor, ...args) { + var o = {}; // 빈 객체를 생성 + constructor.apply(o, args); + return o; +} +``` + +이것은 prototype 체인을 설정하지 않으므로 `new`의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 `...args` (생략 부호를 포함해서)는 "[rest arguments](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters)" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다. + +그러므로 이렇게 호출하는 것은 + +```js +var bill = trivialNew(Person, 'William', 'Orange'); +``` + +아래와 거의 동일합니다. + +```js +var bill = new Person('William', 'Orange'); +``` + +`apply()` 와 비슷하게 `this`를 다시 설정할 수 있게 하는, [`call`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call)이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다. + +```js +function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// 위의 구문은 다음과 같습니다: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +``` + +### 내장 함수 (Inner functions) + +다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 `makePerson()` 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다: + +```js +function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc은 사용할 수 없는 변수 + return a + b; + } + return nestedFunc(); // 5 +} +``` + +좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다. + +이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다. + +## 클로져 (Closures) + +클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요? + +```js +function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var add5 = makeAdder(5); +var add20 = makeAdder(20); +add5(6); // ? +add20(7); // ? +``` + +`makeAdder` 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다. + +여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히*존재합니다* - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, `makeAdder` 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 `a`는 5이고, 다른 하나의 `a`는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다: + +```js +add5(6); // returns 11 +add20(7); // returns 27 +``` + +이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다. + +따라서 `makeAdder` 가 호출되면, 범위 객체는 `makeAdder` 함수에 매개변수로 넘겨진 하나의 속성 `a`를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 `makeAdder`에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 `makeAdder`에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다. + +범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다. + +클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다. + +또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다. + +### 메모리 누출 + +클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다. + +브라우저 호스트는 HTML 페이지에 [DOM](ko/DOM) 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠. + +Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다. + +IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다: + +```js +function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +``` + +위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 `el`와 `o`에 의해 사용되는 메모리를 반환하지 못합니다. + +위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다. + +누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다. + +클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다: + +```js +function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +``` + +위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? `el`을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (`el`)간에 순환 참조를 만듭니다. + +이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다: + +```js +function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } + el = null; +} +``` + +이렇게 하면 순환 참조 고리를 끊을 수 있습니다. + +놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다: + +```js +function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + } + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +``` + +내부 함수는 실행되고 바로 사라지므로서, `clickHandler`와 함께 생성된 클로져로부터 그 내용을 숨깁니다. + +클로져를 피할 수 있는 또다른 좋은 요령은 `window.onunload` 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 [Firefox 1.5의 bfcache](ko/Using_Firefox_1.5_caching)를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 `unload` listener를 등록해서는 안 된다는 것입니다. + +## 원본 문서 정보 + +- 저자: [Simon Willison](http://simon.incutio.com/) +- 최근 갱신 날짜: March 7, 2006 +- 저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license. +- 추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's [Etech weblog post](http://simon.incutio.com/archive/2006/03/07/etech).
\ No newline at end of file diff --git a/files/ko/web/javascript/about_javascript/index.html b/files/ko/web/javascript/about_javascript/index.html deleted file mode 100644 index 434ecff1e1..0000000000 --- a/files/ko/web/javascript/about_javascript/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: JavaScript에 대하여 -slug: Web/JavaScript/About_JavaScript -tags: - - 비기너 - - 소개 - - 자바스크립트 -translation_of: Web/JavaScript/About_JavaScript -original_slug: Web/JavaScript/About ---- -<p>{{JsSidebar}}</p> - -<h2 id="JavaScript란_무엇인가">JavaScript란 무엇인가?</h2> - -<p><strong>JavaScript</strong><sup>®</sup> (줄여서 <strong>JS</strong>)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.</p> - -<p>자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다.</p> - -<p>대중적인 오해와 달리, <strong>Javascript는 인터프리트 형태 자바가 아니다. </strong>간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다. <span style="line-height: 1.5;">기본적인 문법은 언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다. </span></p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Javascript는 <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=procedural&action=Search">절차지향 (procedural)</a> 언어와 <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=object+oriented&action=Search">객체지향 (object oriented)</a> 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 실시간으로 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. <span style="line-height: 1.5;">C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.</span></p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, (eval 에 의한)동적 스크립트 작성, (for ... in 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/About#JavaScript_%EC%9E%90%EC%9B%90">자바스크립트 리소스</a> 링크를 참조하면 된다.</p> - -<h2 id="어떠한_JavaScript_구현이_유용한가">어떠한 JavaScript 구현이 유용한가?</h2> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a> 라는 이름의 엔진은 C/C++로 구현되었다. <a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다.</p> - -<ul> - <li style="padding: 0px; margin: 0px 0px 1.7em;">구글의 <a href="https://code.google.com/p/v8/">V8</a> 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> 는 오페라의 예전 버전안에 있다.</li> - <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.)</li> -</ul> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 <a class="external external-icon" href="http://www.w3.org/DOM/">DOM</a>을 Javascript로 반영하는 <strong>호스트 객체</strong>를 만든다.</p> - -<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. <a href="http://nodejs.org/">Node.js</a>는 이에 대한 대중적인 예이다.</p> - -<h2 id="JavaScript_자원">JavaScript 자원</h2> - -<dl style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;"> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">애플리케이션에 임베드하는 방법을 포함하는, C/C++ 엔진(SpiderMonkey)으로 구현된 Mozilla의 JavaScript 구현체에 관한 정보.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">Java(Rhino)로 작성된 자바스크립트 구현체에 관련 정보.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">자바스크립트 표준을 출판하기 위한 포인터들.</dd> - <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt> - <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">자바스크립트 가이드</a>와 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">자바스크립트 레퍼런스</a>.</dd> -</dl> - -<p>JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다.</p> diff --git a/files/ko/web/javascript/about_javascript/index.md b/files/ko/web/javascript/about_javascript/index.md new file mode 100644 index 0000000000..285fe3e5fa --- /dev/null +++ b/files/ko/web/javascript/about_javascript/index.md @@ -0,0 +1,52 @@ +--- +title: JavaScript에 대하여 +slug: Web/JavaScript/About_JavaScript +tags: + - Beginner + - Guide + - Introduction + - JavaScript +translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/About +--- +{{JsSidebar}} + +## JavaScript란 무엇인가? + +**JavaScript** (줄여서 **JS**)는 [일급 함수](https://en.wikipedia.org/wiki/First-class_function)를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. [프로토타입 기반](https://en.wikipedia.org/wiki/Prototype-based_programming), 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다. + +자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생 시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다. + +대중적인 오해와 달리, **Javascript는 "인터프리트 형태의 자바"가 아니다.** 간단히 말하면, Javascript는 [프로토타입 기반](/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#class-based_vs._prototype-based_languages) 객체 생성을 지원하는 동적 스크립트 언어이다. 기본적인 문법은 언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 `if`문, `for`와 `while`문, `switch`문과 `try...catch` 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다. + +Javascript는 [절차지향 (procedural)](http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=procedural&action=Search) 언어와 [객체지향 (object oriented)](http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=object+oriented&action=Search) 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 **실행 시간에** 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다. + +JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, ([`eval`](/ko/docs/Web/JavaScript/Reference/Global_Objects/eval)) 에 의한)동적 스크립트 작성, (`for ... in` 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다. + +자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 [자바스크립트 자원](#javascript_자원) 링크를 참조하면 된다. + +## 어떠한 JavaScript 구현이 유용한가? + +Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. [SpiderMonkey](https://spidermonkey.dev/)라는 이름의 엔진은 C/C++로 구현되었다. [Rhino](https://en.wikipedia.org/wiki/Rhino_(JavaScript_engine)) 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다. + +TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다. + +위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다. + +- 구글의 [V8](https://code.google.com/p/v8/) 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다. +- [JavaScriptCore](https://www.webkit.org/projects/javascript/index.html) (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다. +- [Carakan](https://my.opera.com/ODIN/blog/carakan-faq)는 오페라의 예전 버전안에 있다. +- [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29) 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.) + +mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 [DOM](https://www.w3.org/DOM/)을 Javascript로 반영하는 **호스트 객체**를 만든다. + +JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. [Node.js](https://nodejs.org/)는 이에 대한 대중적인 예이다. + +## JavaScript 자원 + +- [Language resources](/ko/docs/Web/JavaScript/Language_Resources) + - : 자바스크립트 표준을 출판하기 위한 포인터들. +- [A re-introduction to JavaScript](/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript) + - : [Javascript 가이드](/ko/docs/Web/JavaScript/Guide)와 [JavaScript reference](/ko/docs/Web/JavaScript/Reference). + +JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다. diff --git a/files/ko/web/javascript/closures/index.html b/files/ko/web/javascript/closures/index.html deleted file mode 100644 index dc6fdbc41c..0000000000 --- a/files/ko/web/javascript/closures/index.html +++ /dev/null @@ -1,455 +0,0 @@ ---- -title: 클로저 -slug: Web/JavaScript/Closures -tags: - - Closure - - ES5 - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Closures -original_slug: Web/JavaScript/Guide/Closures ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<p>클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.</p> - -<h2 id="어휘적_범위_지정Lexical_scoping">어휘적 범위 지정(Lexical scoping)</h2> - -<p>다음을 보자:</p> - -<pre>function init() { - var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. - function displayName() { // displayName() 은 내부 함수이며, 클로저다. - alert(name); // 부모 함수에서 선언된 변수를 사용한다. - } - displayName(); -} -init();</pre> - -<p><code>init()</code>은 지역 변수 <code>name</code>과 함수 <code>displayName()</code>을 생성한다. <code>displayName()</code>은 <code>init()</code> 안에 정의된 내부 함수이며 <code>init()</code> 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 <code>displayName()</code> 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 <code>displayName()</code> 역시 부모 함수 <code>init()</code>에서 선언된 변수 <code>name</code>에 접근할 수 있다. 만약 <code>displayName()</code>가 자신만의 <code>name</code>변수를 가지고 있었다면, <code>name</code>대신 <code>this.name</code>을 사용했을 것이다.</p> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p> - -<p>위 코드를 <a href="http://jsfiddle.net/xAFs9/3/">실행</a>하면 <code>displayName()</code> 함수 내의 <code>alert()</code>문이 부모 함수에서 정의한 변수 <code>name</code>의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.</p> - -<h2 id="클로저Closure">클로저(Closure)</h2> - -<p>이제 다음 예제를 보자:</p> - -<pre>function makeFunc() { - var name = "Mozilla"; - function displayName() { - alert(name); - } - return displayName; -} - -var myFunc = makeFunc(); -//myFunc변수에 displayName을 리턴함 -//유효범위의 어휘적 환경을 유지 -myFunc(); -//리턴된 displayName 함수를 실행(name 변수에 접근)</pre> - -<p>이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 <code>displayName()</code>함수가 실행되기 전에 외부함수인 <code>makeFunc()</code>로부터 리턴되어 <code>myFunc</code> 변수에 저장된다는 것이다.</p> - -<p>한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. <code>makeFunc()</code> 실행이 끝나면(<code>displayName</code>함수가 리턴되고 나면) <code>name</code> 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.</p> - -<p>하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, <code>myFunc</code>은 <code>makeFunc</code>이 실행될 때 생성된 <code>displayName</code> 함수의 인스턴스에 대한 참조다. <code>displayName</code>의 인스턴스는 변수 <code>name</code> 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 <code>myFunc</code>가 호출될 때 변수 <code>name</code>은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 <code>alert</code> 에 전달된다.</p> - -<p>다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:</p> - -<pre>function makeAdder(x) { - var y = 1; - return function(z) { - y = 100; - return x + y + z; - }; -} - -var add5 = makeAdder(5); -var add10 = makeAdder(10); -//클로저에 x와 y의 환경이 저장됨 - -console.log(add5(2)); // 107 (x:5 + y:100 + z:2) -console.log(add10(2)); // 112 (x:10 + y:100 + z:2) -//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산 - -</pre> - -<p>이 예제에서 단일 인자 <code>x</code>를 받아서 새 함수를 반환하는 함수 <code>makeAdder(x)를 정의했다.</code> 반환되는 함수는 단일 인자 <font face="consolas, Liberation Mono, courier, monospace">z</font>를 받아서 x와 y와 z의 합을 반환한다.</p> - -<p>본질적으로 <code>makeAdder</code>는 함수를 만들어내는 공장이다. 이는 <code>makeAdder</code>함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 <code>add5, add10</code> 두 개의 새로운 함수들을 만들기 위해 <code>makeAdder</code>함수 공장을 사용했다. 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 5를 더하고 다른 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 10을 더한다.</p> - -<p><code>add5</code>와 <code>add10</code>은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 <code>add5</code>의 맥락적 환경에서 클로저 내부의 x는 5 이지만 <code>add10</code>의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는 것이 아니라는 것을 의미한다.</p> - -<h2 id="실용적인_클로저">실용적인 클로저</h2> - -<p>클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.</p> - -<p>결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.</p> - -<p>이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다.</p> - -<p>예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 body 요소의 font-size를 픽셀 단위로 지정하고 상대적인 em 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다.</p> - -<pre>body { - font-family: Helvetica, Arial, sans-serif; - font-size: 12px; -} - -h1 { - font-size: 1.5em; -} - -h2 { - font-size: 1.2em; -} -</pre> - -<p>우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.</p> - -<p>여기 자바스크립트 코드가 있다.</p> - -<pre>function makeSizer(size) { - return function() { - document.body.style.fontSize = size + 'px'; - }; -} - -var size12 = makeSizer(12); -var size14 = makeSizer(14); -var size16 = makeSizer(16); -</pre> - -<p><code>size12</code>, <code>size14</code>, <code>size16</code>은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다.</p> - -<pre>document.getElementById('size-12').onclick = size12; -document.getElementById('size-14').onclick = size14; -document.getElementById('size-16').onclick = size16; -</pre> - -<pre><a href="#" id="size-12">12</a> -<a href="#" id="size-14">14</a> -<a href="#" id="size-16">16</a> -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p> - -<h2 id="클로저를_이용해서_프라이빗_메소드_private_method_흉내내기">클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기</h2> - -<p>자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다.</p> - -<p>자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.</p> - -<p>아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 <a href="http://www.google.com/search?q=javascript+module+pattern">모듈 패턴</a>이라 한다.</p> - -<pre>var counter = (function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - }; -})(); - -console.log(counter.value()); // logs 0 -counter.increment(); -counter.increment(); -console.log(counter.value()); // logs 2 -counter.decrement(); -console.log(counter.value()); // logs 1 -</pre> - -<p>이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 <code>counter.increment</code>, <code>counter.decrement</code>, <code>counter.value </code>세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다.</p> - -<p>공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 <code>privateCounter</code>라는 변수이고 나머지 하나는 <code>changeBy</code>라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다.</p> - -<p>위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 <code>privateCounter</code> 변수와 <code>changeBy</code> 함수에 접근할 수 있다.</p> - -<p>카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 counter 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 makeCounter 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다.</p> - -<pre>var makeCounter = function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - } -}; - -var counter1 = makeCounter(); -var counter2 = makeCounter(); -alert(counter1.value()); /* 0 */ -counter1.increment(); -counter1.increment(); -alert(counter1.value()); /* 2 */ -counter1.decrement(); -alert(counter1.value()); /* 1 */ -alert(counter2.value()); /* 0 */ -</pre> - -<p>두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 privateCounter 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.</p> - -<p>이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.</p> - -<h2 id="클로저_스코프_체인">클로저 스코프 체인</h2> - -<p>모든 클로저에는 세가지 스코프(범위)가 있다:-</p> - -<ul> - <li>지역 범위 (Local Scope, Own scope)</li> - <li>외부 함수 범위 (Outer Functions Scope)</li> - <li>전역 범위 (Global Scope)</li> -</ul> - -<p>따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자:</p> - -<pre><code>// 전역 범위 (global scope) -var e = 10; -function sum(a){ - return function(b){ - return function(c){ - // 외부 함수 범위 (outer functions scope) - return function(d){ - // 지역 범위 (local scope) - return a + b + c + d + e; - } - } - } -} - -console.log(sum(1)(2)(3)(4)); // log 20 - -// 익명 함수 없이 작성할 수도 있다. - -// 전역 범위 (global scope) -var e = 10; -function sum(a){ - return function sum2(b){ - return function sum3(c){ - // 외부 함수 범위 (outer functions scope) - return function sum4(d){ - // 지역 범위 (local scope) - return a + b + c + d + e; - } - } - } -} - -var s = sum(1); -var s1 = s(2); -var s2 = s1(3); -var s3 = s2(4); -console.log(s3) //log 20</code></pre> - -<p>위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.</p> - -<h2 id="루프에서_클로저_생성하기_일반적인_실수">루프에서 클로저 생성하기: 일반적인 실수</h2> - -<p>ECMAScript 2015의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" title="방해"><code>let</code> 키워드</a> 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.</p> - -<pre><p id="help">Helpful notes will appear here</p> -<p>E-mail: <input type="text" id="email" name="email"></p> -<p>Name: <input type="text" id="name" name="name"></p> -<p>Age: <input type="text" id="age" name="age"></p> -</pre> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p> - -<p>helpText 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 onfocus 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다.</p> - -<p>이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다.</p> - -<p>onfocus 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 setupHelp 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.</p> - -<p>이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function makeHelpCallback(help) { - return function() { - showHelp(help); - }; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = makeHelpCallback(item.help); - } -} - -setupHelp(); -</pre> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p> - -<p>이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, <code>makeHelpCallback</code> 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 help는 helpText 배열의 해당 문자열을 나타낸다.</p> - -<p>익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - (function() { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - })(); // Immediate event listener attachment with the current value of item (preserved until iteration). - } -} - -setupHelp();</pre> - -<p>더 많은 클로저를 사용하는 것이 싫다면 ES2015의 <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 키워드를 사용할 수 있다.</p> - -<pre>function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - let item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp();</pre> - -<p>위의 경우 var 대신 let을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다.</p> - -<h2 id="성능_관련_고려_사항">성능 관련 고려 사항</h2> - -<p>특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다.</p> - -<p>예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다).</p> - -<p>비실용적이지만 시범적인 다음 예를 고려하라:</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); - this.getName = function() { - return this.name; - }; - - this.getMessage = function() { - return this.message; - }; -} -</pre> - -<p>앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다.</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype = { - getName: function() { - return this.name; - }, - getMessage: function() { - return this.message; - } -}; -</pre> - -<p>그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다.</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype.getName = function() { - return this.name; -}; -MyObject.prototype.getMessage = function() { - return this.message; -}; -</pre> - -<p>위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다:</p> - -<pre>function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -(function() { - this.getName = function() { - return this.name; - }; - this.getMessage = function() { - return this.message; - }; -}).call(MyObject.prototype); -</pre> - -<p>앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. <a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="en-US/docs/JavaScript/Guide/Details of the Object Model">객체 모델의 세부 사항</a>을 참고하라.</p> diff --git a/files/ko/web/javascript/closures/index.md b/files/ko/web/javascript/closures/index.md new file mode 100644 index 0000000000..f3e6cfaac8 --- /dev/null +++ b/files/ko/web/javascript/closures/index.md @@ -0,0 +1,505 @@ +--- +title: 클로저 +slug: Web/JavaScript/Closures +tags: + - Closure + - ES5 + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Guide/Closures +--- +{{jsSidebar("Intermediate")}} + +**클로저**는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. + +## 어휘적 범위 지정(Lexical scoping) + +다음을 보자: + +```js + function init() { + var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. + function displayName() { // displayName() 은 내부 함수이며, 클로저다. + alert(name); // 부모 함수에서 선언된 변수를 사용한다. + } + displayName(); + } + init(); +``` + +`init()`은 지역 변수 `name`과 함수 `displayName()`을 생성한다. `displayName()`은 +`init()` 안에 정의된 내부 함수이며 `init()` 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 `displayName()` 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 `displayName()` 역시 부모 함수 `init()`에서 선언된 변수 `name`에 접근할 수 있다. 만약 `displayName()`가 자신만의 `name`변수를 가지고 있었다면, `name`대신 `this.name`을 사용했을 것이다. + +{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}} + +위 코드를 [실행](http://jsfiddle.net/xAFs9/3/)하면 `displayName()` 함수 내의 +`alert()`문이 부모 함수에서 정의한 변수 `name`의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다. + +## 클로저(Closure) + +이제 다음 예제를 보자: + +```js + function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; + } + + var myFunc = makeFunc(); + //myFunc변수에 displayName을 리턴함 + //유효범위의 어휘적 환경을 유지 + myFunc(); + //리턴된 displayName 함수를 실행(name 변수에 접근) +``` + +이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 `displayName()`함수가 실행되기 전에 외부함수인 `makeFunc()`로부터 리턴되어 `myFunc` 변수에 저장된다는 것이다. + +한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. `makeFunc()` 실행이 끝나면(`displayName`함수가 리턴되고 나면) `name` 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다. + +하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, `myFunc`은 `makeFunc`이 실행 +될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `alert` 에 전달된다. + +다음은 조금 더 흥미로운 예제인 makeAdder 함수이다: + +```js + function makeAdder(x) { + var y = 1; + return function(z) { + y = 100; + return x + y + z; + }; + } + + var add5 = makeAdder(5); + var add10 = makeAdder(10); + //클로저에 x와 y의 환경이 저장됨 + + console.log(add5(2)); // 107 (x:5 + y:100 + z:2) + console.log(add10(2)); // 112 (x:10 + y:100 + z:2) + //함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산 +``` + +이 예제에서 단일 인자 `x`를 받아서 새 함수를 반환하는 함수 `makeAdder(x)`를 정의했다. 반환되는 함수는 단일인자 z를 받아서 x와 y와 z의 합을 반환한다. + +본질적으로 `makeAdder`는 함수를 만들어내는 공장이다. 이는 `makeAdder`함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 `add5, add10` 두 개의 새로운 함수들을 만들기 위해 `makeAdder`함수 공장을 사용했다. 하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다. + +`add5`와 `add10`은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 `add5`의 맥락적 환경에서 클로저 내부의 x는 5 이지만 `add10`의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는것이 아니라는 것을 의미한다. + +## 실용적인 클로저 + +클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다. + +결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다. + +이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다. + +예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 `body` 요소의 font-size를 픽셀 단위로 지정하고 상대적인 `em` 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다. + +```css + body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; + } + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.2em; + } +``` + +우리의 대화식 글자 크기 버튼들은 `body` 요소의 `font-size` 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다. + +여기 자바스크립트 코드가 있다. + +```js + function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; + } + + var size12 = makeSizer(12); + var size14 = makeSizer(14); + var size16 = makeSizer(16); +``` + +`size12`, `size14`, `size16`은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다. + +```js + document.getElementById('size-12').onclick = size12; + document.getElementById('size-14').onclick = size14; + document.getElementById('size-16').onclick = size16; +``` + +```html + <a href="#" id="size-12">12</a> + <a href="#" id="size-14">14</a> + <a href="#" id="size-16">16</a> +``` + +{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}} + +다음 링크로 실행해보자. [JSFiddle](https://jsfiddle.net/vnkuZ/7726/) +## 클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기 + +자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다. + +자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다. + +아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 [모듈 패턴](https://www.google.com/search?q=javascript+module+pattern)이라 한다. + +```js + var counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + }; + })(); + + console.log(counter.value()); // logs 0 + counter.increment(); + counter.increment(); + console.log(counter.value()); // logs 2 + counter.decrement(); + console.log(counter.value()); // logs 1 +``` + +이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 `counter.increment`, `counter.decrement`, `counter.value `세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다. + +공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 `privateCounter`라는 변수이고 나머지 하나는 `changeBy`라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다. + +위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 `privateCounter` 변수와 `changeBy` 함수에 접근할 수 있다. + +카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 `counter` 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 `makeCounter` 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다. + +```js + var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } + }; + + var counter1 = makeCounter(); + var counter2 = makeCounter(); + alert(counter1.value()); /* 0 */ + counter1.increment(); + counter1.increment(); + alert(counter1.value()); /* 2 */ + counter1.decrement(); + alert(counter1.value()); /* 1 */ + alert(counter2.value()); /* 0 */ +``` + +두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 `privateCounter` 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다. + +> **참고:** 이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다. + +## 클로저 스코프 체인 + +모든 클로저에는 세가지 스코프(범위)가 있다: + +- 지역 범위 (Local Scope, Own scope) +- 외부 함수 범위 (Outer Functions Scope) +- 전역 범위 (Global Scope) + +따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자: + +```js + // 전역 범위 (global scope) + var e = 10; + function sum(a){ + return function(b){ + return function(c){ + // 외부 함수 범위 (outer functions scope) + return function(d){ + // 지역 범위 (local scope) + return a + b + c + d + e; + } + } + } + } + + console.log(sum(1)(2)(3)(4)); // log 20 + + // 익명 함수 없이 작성할 수도 있다. + + // 전역 범위 (global scope) + var e = 10; + function sum(a){ + return function sum2(b){ + return function sum3(c){ + // 외부 함수 범위 (outer functions scope) + return function sum4(d){ + // 지역 범위 (local scope) + return a + b + c + d + e; + } + } + } + } + + var s = sum(1); + var s1 = s(2); + var s2 = s1(3); + var s3 = s2(4); + console.log(s3) //log 20 +``` + +위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측 한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다. + +## 루프에서 클로저 생성하기: 일반적인 실수 + +ECMAScript 2015의 [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let "방해") 키워드 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자. + +```html + <p id="help">Helpful notes will appear here</p> + <p>E-mail: <input type="text" id="email" name="email"></p> + <p>Name: <input type="text" id="name" name="name"></p> + <p>Age: <input type="text" id="age" name="age"></p> +``` + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } + } + + setupHelp(); +``` + +{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}} + +`helpText` 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 `onfocus` 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다. + +이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다. + +`onfocus` 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 `setupHelp` 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (`item.help`) 있는 같은 단일 환경을 공유한다. `onfocus` 콜백이 실행될 때 콜백의 환경에서 `item` 변수는 (세개의 클로저가 공유한다) `helpText` 리스트의 마지막 요소를 가리키고 있을 것이다. + +이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function makeHelpCallback(help) { + return function() { + showHelp(help); + }; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } + } + + setupHelp(); +``` + +{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}} + +이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, `makeHelpCallback` 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 `help`는 `helpText` 배열의 해당 문자열을 나타낸다. + +익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + (function() { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + })(); // Immediate event listener attachment with the current value of item (preserved until iteration). + } + } + + setupHelp(); +``` + +더 많은 클로저를 사용하는 것이 싫다면 ES2015의 [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) 키워드를 사용할 수 있다. + +```js + function showHelp(help) { + document.getElementById('help').innerHTML = help; + } + + function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + let item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } + } + + setupHelp(); +``` + +위의 경우 `var` 대신 `let`을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다. + +Another alternative could be to use `forEach()` to iterate over the `helpText` array and attach a listener to each [`<input>`](/en-US/docs/Web/HTML/Element/input "The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent."), as shown: + +```js +function showHelp(help) { + document.getElementById('help').textContent = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + helpText.forEach(function(text) { + document.getElementById(text.id).onfocus = function() { + showHelp(text.help); + } + }); +} + +setupHelp(); +``` + +## 성능 관련 고려 사항 + +특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다. + +예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때 마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다). + +비실용적이지만 시범적인 다음 예를 고려하라: + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; + } +``` + +앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다. + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } + }; +``` + +그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다. + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + MyObject.prototype.getName = function() { + return this.name; + }; + MyObject.prototype.getMessage = function() { + return this.message; + }; +``` + +위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다: + +```js + function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + } + (function() { + this.getName = function() { + return this.name; + }; + this.getMessage = function() { + return this.message; + }; + }).call(MyObject.prototype); +``` + +앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. [객체 모델의 세부 사항](/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)을 +참고하라. diff --git a/files/ko/web/javascript/data_structures/index.html b/files/ko/web/javascript/data_structures/index.html deleted file mode 100644 index 14967ae250..0000000000 --- a/files/ko/web/javascript/data_structures/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: 자바스크립트의 자료형 -slug: Web/JavaScript/Data_structures -translation_of: Web/JavaScript/Data_structures ---- -<div>{{jsSidebar("More")}}</div> - -<p>모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자.</p> - -<h2 id="동적_타이핑">동적 타이핑</h2> - -<p>자바스크립트는 <em>느슨한 타입 (loosely typed)</em> 언어, 혹은 <em>동적 (dynamic)</em> 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다.</p> - -<pre class="brush: js notranslate">var foo = 42; // foo 는 이제 Number 임 -var foo = "bar"; // foo 는 이제 String 임 -var foo = true; // foo 는 이제 Boolean 임 -</pre> - -<h2 id="데이터_타입">데이터 타입</h2> - -<p>최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다.</p> - -<ul> - <li>{{Glossary("Primitive", "기본 자료형 (Primitive)")}} 인 여섯가지 데이터 타입 - <ul> - <li>{{Glossary("Boolean")}}</li> - <li>{{Glossary("Null")}}</li> - <li>{{Glossary("Undefined")}}</li> - <li>{{Glossary("Number")}}</li> - <li>{{Glossary("String")}}</li> - <li>{{Glossary("Symbol")}} (ECMAScript 6 에 추가됨)</li> - </ul> - </li> - <li>별도로 {{Glossary("Object")}} 도 있음</li> -</ul> - -<p>다음 장에서 이 여섯개의 자료형을 사용하는 방법과 자료형을 조합하여 더 복잡한 자료형을 만드는 방법에 대해 알아보자.</p> - -<h2 id="기본_타입_Primitive_value">기본 타입 (Primitive value)</h2> - -<p>오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의 {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다.</p> - -<h3 id="Boolean_타입">Boolean 타입</h3> - -<p>Boolean 은 논리적인 요소를 나타내고, <code>true</code> 와 <code>false</code> 의 두 가지 값을 가질 수 있다.</p> - -<h3 id="Null_타입">Null 타입</h3> - -<p>Null 타입은 딱 한 가지 값, <code>null</code> 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 {{Glossary("Null")}} 을 보라.</p> - -<h3 id="Undefined_타입">Undefined 타입</h3> - -<p>값을 할당하지 않은 변수는 <code>undefined</code> 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 {{Glossary("Undefined")}} 을 보라.</p> - -<h3 id="Number_타입">Number 타입</h3> - -<p>ECMAScript 표준에 따르면, 숫자의 자료형은 <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">배정밀도 64비트 형식 IEEE 754 값</a> (-(2<sup>53</sup> -1) 와 2<sup>53</sup> -1 사이의 숫자값) 단 하나만 존재한다. <strong>정수만을 표현하기 위한 특별한 자료형은 없다.</strong> 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 <code>+무한대</code>, <code>-무한대</code>, and <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> (숫자가 아님)이 있다.</p> - -<p><code>+/-Infinity</code> 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. 또한, ECMAScript 6 부터는 숫자가 배정밀도 부동소수점 숫자인지 확인하는 용도로 {{jsxref("Number.isSafeInteger()")}} 과 {{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} 을 사용할 수 있다. 이 범위를 넘어서면, 자바스크립트의 숫자는 더 이상 안전하지 않다.</p> - -<p>Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) 실제로는 이러한 사실은 거의 효력이 없다. 그 예로, <code>+0 === -0</code> 은 <code>true</code> 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다.</p> - -<pre class="brush: js language-js notranslate"><code class="language-js"><span class="operator token">></span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">+</span><span class="number token">0</span> -<span class="number token">Infinity</span> -<span class="operator token">></span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">-</span><span class="number token">0</span> -<span class="operator token">-</span><span class="number token">Infinity</span></code></pre> - -<p>숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">몇 가지 이진 연산자</a>도 제공한다. 이러한 이진 연산자들은 <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">비트 마스킹(bit masking)</a> 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. 하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다.</p> - -<h3 id="String_타입">String 타입</h3> - -<p>자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다.</p> - -<p>C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다.</p> - -<ul> - <li>원래 문자열에서 각각의 글자를 추출하거나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/substr" title="substr">String.substr()</a></code>을 사용해서 만든 부분 문자열</li> - <li>접합 연산자 (<code>+</code>) 나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/concat" title="concat">String.concat()</a></code> 으로 두 문자열을 합친 문자열</li> -</ul> - -<h4 id="문자열의_자료형화를_조심하라!">"문자열의 자료형화"를 조심하라!</h4> - -<p>문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다.</p> - -<ul> - <li>접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다.</li> - <li>문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다)</li> - <li>문자열은 많은 API 에서 사용하는 공통분모이고 (<a href="/en/DOM/HTMLInputElement" title="HTMLInputElement">입력 필드</a>, <a href="/en/Storage" title="Storage">로컬 스토리지</a> 값, {{ domxref("XMLHttpRequest") }} 요청에서 <code>responseText</code>를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다.</li> -</ul> - -<p>규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다.</p> - -<p>문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자.</p> - -<h3 id="Symbol_타입">Symbol 타입</h3> - -<p>Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 <strong>유일</strong>하고 <strong>변경 불가능한</strong> (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의 {{Glossary("Symbol")}} 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라.</p> - -<h2 id="객체_Objects">객체 (Objects)</h2> - -<p>컴퓨터 과학에서, 객체는 {{Glossary("Identifier", "식별자 (Identifier)")}} 로 참조할 수 있는, 메모리에 있는 값이다.</p> - -<h3 id="속성_Properties">속성 (Properties)</h3> - -<p>자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. <a href="/en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals" title="en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">객체 리터럴 문법 (object literal syntax)</a> 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에 복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다.</p> - -<p>두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다.</p> - -<h4 id="데이터_속성_Data_property">데이터 속성 (Data property)</h4> - -<p>키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다.</p> - -<table class="standard-table"> - <caption>데이터 속성의 특성들</caption> - <tbody> - <tr> - <th>특성 (Attribute)</th> - <th>자료형</th> - <th>설명</th> - <th>기본값</th> - </tr> - <tr> - <td>[[Value]]</td> - <td>JavaScript 타입 모두 가능</td> - <td>이 속성에 대한 get 접근으로 반환되는 값.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성의 [[Value]] 을 바꿀 수 없다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성은 제거될 수 없고, [[Value]]와 [[Writable]] 외에는 수정될 수 없다.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<h4 id="접근자_속성_Accessor_property">접근자 속성 (Accessor property)</h4> - -<p>값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (get, set) 연결짓는다. 아래와 같은 특성이 있다.</p> - -<table class="standard-table"> - <caption>접근자 속성</caption> - <tbody> - <tr> - <th>특성 (Attribute)</th> - <th>자료형</th> - <th>설명</th> - <th>기본값</th> - </tr> - <tr> - <td>[[Get]]</td> - <td>Function 객체 혹은 undefined</td> - <td>이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a> 을 볼 것</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function 객체 혹은 undefined</td> - <td> - <p>이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a> 을 볼 것</p> - </td> - <td>undefined</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td><code>false</code> 라면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>을 표현하는데 적합하다. 표준이 아닌 <a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a> 슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 <code>'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다. 속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)</code>주의가 필요하다. <a class="external" href="http://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU">이런 일이 생길 수도 있다</a>. 이 때는 <a class="external" href="http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779">StringMap abstraction</a> 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다.</p> - -<h3 id="Dates">Dates</h3> - -<p>시간을 나타내려면 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global_Objects/Date">Date utility</a>를 사용하자. 최고의 선택이다.</p> - -<h3 id="Arrays">Arrays</h3> - -<p><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">배열(Arrays</a>) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 <a href="/en/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a> (배열에서 값 검색)와 <a href="/en/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a> (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다.</p> - -<h3 id="WeakMaps_Maps_Sets">WeakMaps, Maps, Sets</h3> - -<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p> - -<p>이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 WeakMaps와 Maps는 오브젝트에 값을 연관시킬 수 있다. Map과 WeakMap의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다.</p> - -<p>ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다.</p> - -<p>DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 data-* 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. Map과 WeakMap은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다.</p> - -<h3 id="TypedArrays">TypedArrays</h3> - -<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> -</ul> diff --git a/files/ko/web/javascript/data_structures/index.md b/files/ko/web/javascript/data_structures/index.md new file mode 100644 index 0000000000..e72d37dd85 --- /dev/null +++ b/files/ko/web/javascript/data_structures/index.md @@ -0,0 +1,291 @@ +--- +title: 자바스크립트의 자료형 +slug: Web/JavaScript/Data_structures +translation_of: Web/JavaScript/Data_structures +--- +{{jsSidebar("More")}} + +모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자. + +## 동적 타이핑 + +자바스크립트는 _느슨한 타입 (loosely typed)_ 언어, 혹은 _동적 (dynamic)_ 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. + +```js +var foo = 42; // foo 는 이제 Number 임 +var foo = "bar"; // foo 는 이제 String 임 +var foo = true; // foo 는 이제 Boolean 임 +``` + +## 데이터 및 구조 유형 + +최신 ECMAScript 표준은 9가지 유형을 정의합니다. + +- [typeof](/ko/docs/Web/JavaScript/Reference/Operators/typeof) 연산자로 확인되는 6가지 [기본](/ko/docs/Glossary/Primitive) **데이터 유형**: + + - [undefined](/en-US/docs/Glossary/undefined) : `typeof instance === "undefined"` + - [Boolean](/en-US/docs/Glossary/Boolean) : `typeof instance === "boolean"` + - [Number](/en-US/docs/Glossary/Number) : `typeof instance === "number"` + - [String](/en-US/docs/Glossary/String) : `typeof instance === "string"` + - [BigInt](/en-US/docs/Glossary/BigInt) : `typeof instance === "bigint"` + - [Symbol](/en-US/docs/Glossary/Symbol) : `typeof instance === "symbol"` (ECMAScript 6 에 추가됨) + +## **구조 유형**: + + - [Object](/en-US/docs/Glossary/Object) : `typeof instance === "object"`. **데이터 구조**로 사용되는 모든 [생성된](/ko/docs/Learn/JavaScript/Objects#the_constructor) 개체 인스턴스에 대한 데이터가 아닌 특수한 구조 유형: new {{jsxref("Object")}}, new {{jsxref("Array")}}, new {{jsxref("Map")}}, new {{jsxref("Set")}}, new {{jsxref("WeakMap")}}, new {{jsxref("WeakSet")}}, new {{jsxref("Date")}} 그리고 거의 모든 것이 [new keyword](/en-US/docs/Web/JavaScript/Reference/Operators/new) 로 만들어졌습니다; + - [Function](/en-US/docs/Glossary/Function) : 비데이터 구조이지만 `typeof` 연산자에도 값이 나옵니다: `typeof instance === "function"`. 모든 Function 생성자는 Object 생성자에서 파생되지만 이것은 단순히 Functions의 특수 축약형입니다. + +- **Structural Root** Primitive: + + - **[null](/en-US/docs/Glossary/Null)** : `typeof instance === "object"`. 값에 대한 추가 사용법이 있는 특수 [기본](/ko/docs/Glossary/Primitive) 유형: 객체가 상속되지 않으면 `null`이 표시됩니다. + +`typeof` 연산자 사용의 유일한 가치 있는 목적은 데이터 유형을 확인하는 것임을 명심하십시오. `Object`에서 파생된 Structural Type을 확인하려면 항상 `"object"`를 수신하므로 typeof를 사용하는 것은 무의미합니다. 어떤 종류의 객체를 사용하고 있는지 확인하는 적절한 방법은 instanceof 키워드입니다. 그러나 그런 경우에도 오해가 있을 수 있습니다. + +우리가 볼 수 있듯이 거의 동일한 undefined와 null을 제외하고 모든 기본 유형의 의미는 분명합니다. 이것은 시간의 개념이 알고리즘의 목적과 엄격하게 연결되어 있기 때문에 발생합니다. 우리는 아직 존재하지 않거나 더 이상 존재하지 않는 것을 의미할 수 있습니다: **undefined**. 그러나 비어 있는 것으로 존재하는 것을 표현하려면 다른 키워드를 발명해야 합니다. 이것이 **null**이 의미하는 것입니다. 구조적 의미의 시작입니다. +## 기본 타입 (Primitive value) + +오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의 {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다. + +### Boolean 타입 + +Boolean 은 논리적인 요소를 나타내고, `true` 와 `false` 의 두 가지 값을 가질 수 있다. 세부 사항을 보고싶으면 [Boolean](/ko/docs/Glossary/Boolean)과 {{jsxref("Boolean")}}을 참고하자. + +### Null 타입 + +Null 타입은 딱 한 가지 값, `null` 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 [Null](/ko/docs/Glossary/Null) 을 보라. + +### Undefined 타입 + +값을 할당하지 않은 변수는 `undefined` 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 [Undefined](/ko/docs/Glossary/undefined) 을 보라. + +### Number 타입 + +ECMAScript에는 **Number** 및 **BigInt**의 두 가지 기본 제공 숫자 유형이 있습니다(아래 참조). + +ECMAScript 표준에 따르면, 숫자의 자료형은 [배정밀도 64비트 형식 IEEE 754 값](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) (-(2^53 -1) 와 2^53 -1 사이의 숫자값) 단 하나만 존재한다. **정수만을 표현하기 위한 특별한 자료형은 없다.** 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 `+Infinity`, `-Infinity`, and [`NaN`](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) ("**N**ot a **N**umber")이 있다. + +`+/-Infinity` 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. + +> **참고:** ECMAScript 2015부터 {{jsxref("Number.isSafeInteger()")}}와 {{jsxref("Number.MAX_SAFE_INTEGER")}} 및 {{jsxref("Number.MIN_SAFE_INTEGER")}}를 사용하여 숫자가 배정밀도 부동 소수점 숫자 범위에 있는지 확인할 수도 있습니다. +> +> 이 범위를 넘어서면 JavaScript의 정수는 더 이상 안전하지 않으며 값의 배정도 부동 소수점 근사값이 됩니다. + +Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) + +실제로는 이러한 사실은 거의 효력이 없다. 그 예로, `+0 === -0` 은 `true` 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다. + +```js +> 42 / +0 +Infinity +> 42 / -0 +-Infinity +``` + +숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 [몇 가지 이진 연산자](/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators)도 제공한다. + +> **참고:** 이러한 이진 연산자들은 [비트 마스킹(bit masking)](https://en.wikipedia.org/wiki/Mask_%28computing%29) 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. + +하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다. + +### BigInt type + +The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With `BigInt`s, you can safely store and operate on large integers even beyond the safe integer limit for `Number`s. + +A `BigInt` is created by appending `n` to the end of an integer or by calling the constructor. + +You can obtain the safest value that can be incremented with `Number`s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of `BigInt`s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}. + +This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result: + +```js +> const x = 2n ** 53n; +9007199254740992n +> const y = x + 1n; +9007199254740993n +``` + +You can use the operators `+`, `*`, `-`, `**`, and `%` with `BigInt`s—just like with `Number`s. A `BigInt` is not strictly equal to a `Number`, but it is loosely so. + +A `BigInt` behaves like a `Number` in cases where it is converted to `Boolean`: `if`, `||`, `&&`, `Boolean`, `!`. + +`BigInt`s cannot be operated on interchangeably with `Number`s. Instead a {{jsxref("TypeError")}} will be thrown. + +### String 타입 + +자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 `0`번 인덱스에 있고, 다음 요소는 `1`번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다. + +C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다. + +- 원래 문자열에서 각각의 글자를 추출하거나 [`String.substr()`](/ko/docs/JavaScript/Reference/Global_Objects/String/substr)을 사용해서 만든 부분 문자열 +- 접합 연산자 (`+`) 나 [`String.concat()`](/ko/docs/JavaScript/Reference/Global_Objects/String/concat) 으로 두 문자열을 합친 문자열 + +#### "문자열의 자료형화"를 조심하라! + +문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다. + +- 접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다. +- 문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다) +- 문자열은 많은 API 에서 사용하는 공통분모이고 ([입력 필드](/ko/docs/DOM/HTMLInputElement), [로컬 스토리지](/ko/docs/Web/API/Web_Storage_API) 값, {{ domxref("XMLHttpRequest") }} 요청에서 `responseText`를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다. + +규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다. + +문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자. + +### Symbol 타입 + +Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변경 불가능한** (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의 [Symbol](/ko/docs/Glossary/Symbol) 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라. + +## 객체 (Objects) + +컴퓨터 과학에서, 객체는 [식별자](/ko/docs/Glossary/Identifier) 로 참조할 수 있는, 메모리에 있는 값이다. + +### 속성 (Properties) + +자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. [객체 리터럴 문법 (object literal syntax)](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals) 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에 복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다. + +두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다. + +> **Note:** Each property has corresponding *attributes.* Attributes are used internally by the JavaScript engine, so you cannot directly access them. That's why attributes are listed in double square brackets, rather than single. +> +> See {{jsxref("Object.defineProperty()")}} to learn more. + +#### 데이터 속성 (Data property) + +키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다. + +<table class="standard-table"> + <caption> + Attributes of a data property + </caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Value]]</td> + <td>Any JavaScript type</td> + <td>The value retrieved by a get access of the property.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td> + If <code>false</code>, the property's [[Value]] cannot be changed. + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td> + <p> + If <code>true</code>, the property will be enumerated in + <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" + >for...in</a + > + loops.<br />See also + <a + href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" + >Enumerability and ownership of properties</a + >. + </p> + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td> + If <code>false</code>, the property cannot be deleted, cannot be changed + to an accessor property, and attributes other than [[Value]] and + [[Writable]] cannot be changed. + </td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +| Attribute | Type | Description | +| ---------- | ------- | ----------------------------------------------------- | +| Read-only | Boolean | Reversed state of the ES5 [[Writable]] attribute. | +| DontEnum | Boolean | Reversed state of the ES5 [[Enumerable]] attribute. | +| DontDelete | Boolean | Reversed state of the ES5 [[Configurable]] attribute. | + +#### 접근자 속성 (Accessor property) + +값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (`get`, `set`) 연결짓는다. 아래와 같은 특성이 있다. + +| Attribute | Type | Description | Default value | +| ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| [[Get]] | Function 객체 혹은 `undefined` | 이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. 같이보기 [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get). | `undefined` | +| [[Set]] | Function 객체 혹은 `undefined` | 이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. 같이보기 [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set). | `undefined` | +| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.loops. | `false` | +| [[Configurable]] | Boolean | 만약 `false`이면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다. | `false` | + +### "Normal" objects, and functions + +자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 [hashmaps](https://en.wikipedia.org/wiki/Hash_table)을 표현하는데 적합하다. 표준이 아닌 [\_\_proto\_\_](/ko/docs/JavaScript/Reference/Global_Objects/Object/proto "__proto__") 슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 `'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다. 속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)`주의가 필요하다. [이런 일이 생길 수도 있다](https://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU). 이 때는 [StringMap abstraction](https://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779) 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다. + +### Dates + +시간을 나타내려면 [Date utility](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date "en/JavaScript/Reference/Global_Objects/Date")를 사용하자. 최고의 선택이다. + +### Arrays + +[배열(Arrays](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 [indexOf](/ko/docs/JavaScript/Reference/Global_Objects/Array/indexOf) (배열에서 값 검색)와 [push](/ko/docs/JavaScript/Reference/Global_Objects/Array/push) (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다. + +[Typed Arrays](/ko/docs/Web/JavaScript/Typed_arrays)는 ECMAScript 2015에서 JavaScript의 새로운 기능이며 기본 바이너리 데이터 버퍼의 배열과 유사한 보기를 제공합니다. 다음 표는 동등한 C 데이터 유형을 결정하는 데 도움이 됩니다. + +| Type | Value Range | Size in bytes | Description | Web IDL type | Equivalent C type | +| ---------------------------------------- | ----------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| {{jsxref("Int8Array")}} | `-128` to `127` | 1 | 8-bit two's complement signed integer | `byte` | `int8_t` | +| {{jsxref("Uint8Array")}} | `0` to `255` | 1 | 8-bit unsigned integer | `octet` | `uint8_t` | +| {{jsxref("Uint8ClampedArray")}} | `0` to `255` | 1 | 8-bit unsigned integer (clamped) | `octet` | `uint8_t` | +| {{jsxref("Int16Array")}} | `-32768` to `32767` | 2 | 16-bit two's complement signed integer | `short` | `int16_t` | +| {{jsxref("Uint16Array")}} | `0` to `65535` | 2 | 16-bit unsigned integer | `unsigned short` | `uint16_t` | +| {{jsxref("Int32Array")}} | `-2147483648` to `2147483647` | 4 | 32-bit two's complement signed integer | `long` | `int32_t` | +| {{jsxref("Uint32Array")}} | `0` to `4294967295` | 4 | 32-bit unsigned integer | `unsigned long` | `uint32_t` | +| {{jsxref("Float32Array")}} | `1.2E-38` to `3.4E38` | 4 | 32-bit IEEE floating point number (7 significant digits e.g., `1.1234567`) | `unrestricted float` | `float` | +| {{jsxref("Float64Array")}} | `5E-324` to `1.8E308` | 8 | 64-bit IEEE floating point number (16 significant digits e.g., `1.123...15`) | `unrestricted double` | `double` | +| {{jsxref("BigInt64Array")}} | `-2^63` to `2^63 - 1` | 8 | 64-bit two's complement signed integer | `bigint` | `int64_t (signed long long)` | +| {{jsxref("BigUint64Array")}} | `0` to `2^64 - 1` | 8 | 64-bit unsigned integer | `bigint` | `uint64_t (unsigned long long)` | + +### Keyed collections: Maps, Sets, WeakMaps, WeakSets + +표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다. + +이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 `WeakMaps`와 `Maps`는 오브젝트에 값을 연관시킬 수 있다. `Map`과 `WeakMap`의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다. + +ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다. + +DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 `data-\*` 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. `Map`과 `WeakMap`은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다. + +### Structured data: JSON + +JSON(**J**ava**S**cript **O**bject **N**otation)은 JavaScript에서 파생된 경량 데이터 교환 형식이지만 많은 프로그래밍 언어에서 사용됩니다. JSON은 범용 데이터 구조를 구축합니다. + +세부사항은 [JSON](/ko/docs/Glossary/JSON) 와 {{jsxref("JSON")}} 를 보세요. + +### 표준 라이브러리의 더 많은 객체 + +JavaScript에는 내장 객체의 표준 라이브러리가 있습니다. + +더 많은 객체에 대해 알아보려면 [참조](/ko/docs/Web/JavaScript/Reference/Global_Objects)를 살펴보십시오. + +## `typeof` 연산자를 사용하여 유형 결정 + +`typeof` 연산자는 변수의 유형을 찾는 데 도움이 될 수 있습니다. + +자세한 내용과 edge cases에 대한 정보는 [reference page](/ko/docs/Web/JavaScript/Reference/Operators/typeof)를 참고하세요. + +## 같이보기 + +- [Nicholas Zakas collection of common data structure and common algorithms in JavaScript.](https://github.com/nzakas/computer-science-in-javascript/) +- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/DataStructures_In_Javascript) +- [Data Types and Values in the ECMAScript specification](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values) diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html deleted file mode 100644 index 41252c39d1..0000000000 --- a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Enumerability and ownership of properties -slug: Web/JavaScript/Enumerability_and_ownership_of_properties -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -<div>{{JsSidebar("More")}}</div> - - - -<p>'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다. 등록 정보의 키가 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>이 아니면 열거 가능한 등록 정보가 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에 표시됩니다. 'Ownership of properties' (속성의 소유권)은 속성이 프로토 타입 체인이 아닌 개체에 직접 속하는지 여부에 따라 결정됩니다. 객체의 속성도 전체적으로 검색 할 수 있습니다. 개체 속성을 감지, 반복 / 열거 및 검색하는 여러 가지 기본 제공 방법이 있으며 아래 표와 같이 사용할 수 있습니다. 누락 된 범주를 얻는 방법을 보여주는 샘플 코드는 다음과 같습니다.</p> - -<div style="overflow: auto; width: 100%;"> -<table> - <caption>Property enumerability and ownership - built-in methods of detection, retrieval, and iteration</caption> - <tbody> - <tr> - <th>Functionality</th> - <th>Own object</th> - <th>Own object and its prototype chain</th> - <th>Prototype chain only</th> - </tr> - <tr> - <td>Detection</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p> - </td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - </tr> - <tr> - <td>Retrieval</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a> </code>– filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - </tr> - <tr> - <td>Iterable</td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table> - <thead> - <tr> - <th scope="col">Enumerable</th> - <th scope="col">Nonenumerable</th> - <th scope="col">Enumerable and Nonenumerable</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p> - - <p>(excluding symbols)</p> - </td> - <td>Not available without extra code</td> - <td>Not available without extra code</td> - </tr> - </tbody> - </table> - </td> - <td>Not available without extra code</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Obtaining_properties_by_enumerabilityownership">Obtaining properties by enumerability/ownership</h2> - - - -<p>아래는 모든 경우에 가장 효율적인 알고리즘은 아니지만 빠르게 코드를 작성하여 확인하기 좋습니다.</p> - -<ul> - <li>Detection can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1</code></li> - <li>Iteration can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li> -</ul> - -<pre class="brush: js notranslate">var SimplePropertyRetriever = { - getOwnEnumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerable); - // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj); - }, - getOwnNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._notEnumerable); - }, - getOwnEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); - // Or just use: return Object.getOwnPropertyNames(obj); - }, - getPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerable); - }, - getPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._notEnumerable); - }, - getPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); - }, - getOwnAndPrototypeEnumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerable); - // Or could use unfiltered for..in - }, - getOwnAndPrototypeNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._notEnumerable); - }, - getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { - return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); - }, - // Private static property checker callbacks - _enumerable: function(obj, prop) { - return obj.propertyIsEnumerable(prop); - }, - _notEnumerable: function(obj, prop) { - return !obj.propertyIsEnumerable(prop); - }, - _enumerableAndNotEnumerable: function(obj, prop) { - return true; - }, - // Inspired by http://stackoverflow.com/a/8024294/271577 - _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { - var props = []; - - do { - if (iterateSelfBool) { - Object.getOwnPropertyNames(obj).forEach(function(prop) { - if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { - props.push(prop); - } - }); - } - if (!iteratePrototypeBool) { - break; - } - iterateSelfBool = true; - } while (obj = Object.getPrototypeOf(obj)); - - return props; - } -};</pre> - -<h2 id="Detection_Table">Detection Table</h2> - -<div style="overflow: auto; width: 100%;"> -<table> - <thead> - <tr> - <th scope="row"></th> - <th scope="col"><code>in</code></th> - <th scope="col"><code>for..in</code></th> - <th scope="col"><code>obj.hasOwnProperty</code></th> - <th scope="col"><code>obj.propertyIsEnumerable</code></th> - <th scope="col"><code>Object.keys</code></th> - <th scope="col"><code>Object.getOwnPropertyNames</code></th> - <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th> - <th scope="col"><code>Reflect.ownKeys()</code></th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Enumerable</th> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Nonenumerable</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Symbols keys</th> - <td>true</td> - <td>false</td> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>true</td> - <td>true</td> - </tr> - <tr> - <th scope="row">Inherited Enumerable</th> - <td>true</td> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Inherited Nonenumerable</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - <tr> - <th scope="row">Inherited Symbols keys</th> - <td>true</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - <td>false</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li> - <li>{{jsxref("Object.hasOwnProperty()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li> -</ul> diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md new file mode 100644 index 0000000000..8f4155cf84 --- /dev/null +++ b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -0,0 +1,467 @@ +--- +title: Enumerability and ownership of properties +slug: Web/JavaScript/Enumerability_and_ownership_of_properties +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +{{JsSidebar("More")}} + +'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer ([Object.defineProperty](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다. + +등록 정보의 키가 [Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)이 아니면 열거 가능한 등록 정보가 [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프에 표시됩니다. 'Ownership of properties' (속성의 소유권)은 속성이 프로토 타입 체인이 아닌 개체에 직접 속하는지 여부에 따라 결정됩니다. 객체의 속성도 전체적으로 검색 할 수 있습니다. 개체 속성을 감지, 반복 / 열거 및 검색하는 여러 가지 기본 제공 방법이 있으며 아래 표와 같이 사용할 수 있습니다. 누락 된 범주를 얻는 방법을 보여주는 샘플 코드는 다음과 같습니다. + +## 객체 속성 감지, 검색 및 열거 + +개체 속성을 감지, 반복/열거 및 검색하는 여러 가지 기본 제공 수단이 있습니다. 아래 표에 요약되어 있습니다. + +### Detection + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + – filtered to exclude enumerables using + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" + >hasOwnProperty</a + ></code + > + </p> + </td> + <td> + <code + ><a href="/ko/docs/Web/JavaScript/Reference/Operators/in" + >in</a + ></code + > + </td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +### Retrieval + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" + >Object.keys</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + >, + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + – filtered to exclude enumerables using <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +### Iteration + +<table> + <thead> + <tr> + <th></th> + <th>Own object</th> + <th>Own object and prototype chain</th> + <th>Prototype chain only</th> + </tr> + </thead> + <tbody> + <tr> + <th>Enumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" + >Object.keys</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td> + <p> + <code + ><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in" + >for..in</a + ></code + > + </p> + <p>(excluding symbols)</p> + </td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Nonenumerable</th> + <td> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + >, + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + – filtered to exclude enumerables using <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" + >propertyIsEnumerable</a + ></code + > + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + <tr> + <th>Enumerable and Nonenumerable</th> + <td> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" + >getOwnPropertyNames</a + ></code + > + </p> + <p> + <code + ><a + href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" + >getOwnPropertySymbols</a + ></code + > + </p> + </td> + <td>Not available without extra code</td> + <td>Not available without extra code</td> + </tr> + </tbody> +</table> + +## Obtaining properties by enumerability/ownership + +아래는 모든 경우에 가장 효율적인 알고리즘은 아니지만 빠르게 코드를 작성하여 확인하기 좋습니다. + +- Detection can occur by `SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1` +- Iteration can occur by `SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});` (or use` filter()`, `map()`, etc.) + +```js +var SimplePropertyRetriever = { + getOwnEnumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerable); + // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj); + }, + getOwnNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._notEnumerable); + }, + getOwnEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); + // Or just use: return Object.getOwnPropertyNames(obj); + }, + getPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerable); + }, + getPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._notEnumerable); + }, + getPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); + }, + getOwnAndPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerable); + // Or could use unfiltered for..in + }, + getOwnAndPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._notEnumerable); + }, + getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); + }, + // Private static property checker callbacks + _enumerable: function(obj, prop) { + return obj.propertyIsEnumerable(prop); + }, + _notEnumerable: function(obj, prop) { + return !obj.propertyIsEnumerable(prop); + }, + _enumerableAndNotEnumerable: function(obj, prop) { + return true; + }, + // Inspired by http://stackoverflow.com/a/8024294/271577 + _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { + var props = []; + + do { + if (iterateSelfBool) { + Object.getOwnPropertyNames(obj).forEach(function(prop) { + if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { + props.push(prop); + } + }); + } + if (!iteratePrototypeBool) { + break; + } + iterateSelfBool = true; + } while (obj = Object.getPrototypeOf(obj)); + + return props; + } +}; +``` + +## Detection Table + +<table> + <thead> + <tr> + <th></th> + <th>Enumerable</th> + <th>Nonenumerable</th> + <th>Symbols keys</th> + <th>Inherited Enumerable</th> + <th>Inherited Nonenumerable</th> + <th>Inherited Symbols keys</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>in</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + </tr> + <tr> + <th><code>for..in</code></th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>true</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>obj.hasOwnProperty</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>obj.propertyIsEnumerable</code></th> + <td>true</td> + <td>false</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.keys</code></th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.getOwnPropertyNames</code></th> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Object.getOwnPropertyDescriptors</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th><code>Reflect.ownKeys()</code></th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + </tbody> +</table> + +## 같이보기 + +- [`in`](/ko/docs/Web/JavaScript/Reference/Operators/in) +- [`for..in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) +- {{jsxref("Object.hasOwnProperty()")}} +- {{jsxref("Object.propertyIsEnumerable()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.getOwnPropertyDescriptors()")}} diff --git a/files/ko/web/javascript/equality_comparisons_and_sameness/index.html b/files/ko/web/javascript/equality_comparisons_and_sameness/index.html deleted file mode 100644 index 31d1778d5d..0000000000 --- a/files/ko/web/javascript/equality_comparisons_and_sameness/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: 동치 비교 및 동일성 -slug: Web/JavaScript/Equality_comparisons_and_sameness -tags: - - Comparison - - Equality - - Intermediate - - JavaScript - - SameValue - - SameValueZero - - Sameness -translation_of: Web/JavaScript/Equality_comparisons_and_sameness ---- -<div>{{jsSidebar("Intermediate")}}</div> - -<div class="summary"> -<p>ES2015에는 4가지 같음(equality) 알고리즘이 있습니다:</p> - -<ul> - <li>추상적(abstract) 같음 비교 (<code>==</code>)</li> - <li>엄격한(strict) 같음 비교 (<code>===</code>): <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code> 및 <code>case</code> 절 매칭에 쓰임</li> - <li>등가0(SameValueZero): <code>Map</code> 및 <code>Set</code> 연산뿐만 아니라 <code>%TypedArray%</code> 및 <code>ArrayBuffer</code> 생성자, 그리고 ES2016에 예정된 <code>String.prototype.includes</code>에 쓰임</li> - <li>등가(SameValue): 그 외 모든 곳에 쓰임</li> -</ul> - -<p>JavaScript는 3가지 서로 다른 값 비교 연산을 제공합니다:</p> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a>를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)"),</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>를 사용하는 느슨한(loose) 같음 ("이중 등호"),</li> - <li>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (ECMAScript 2015에 새로 들임).</li> -</ul> - -<p>어느 연산을 쓸 지 그 선택은 당신이 어떤 종류의 비교를 수행하기 위해 찾고 있는 지에 달렸습니다.</p> - -<p> </p> - -<ul> - <li>이중 equals (<code>==</code>)는 두 가지를 비교할 때 유형 변환을 수행하고 IEEE 754를 준수하기 위해 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>을 특별히 처리합니다 (그래서<code>NaN != NaN</code>이고 <code>-0 == +0</code>입니다);</li> - <li>트리플 equals (<code>===</code>)는 이중 equals (<code>NaN</code>, <code>-0</code> 및 <code>+0</code>의 특수 처리 포함)와 동일한 비교를 수행하지만 유형 변환은 수행하지 않습니다. 형식이 다른 경우 <code>false</code>가 반환됩니다.</li> - <li><code>Object.is</code>는 형식 변환을하지 않으며 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>에 대한 특수 처리를 수행하지 않습니다 (특수 숫자 값을 제외하고는 <code>===</code>와 동일한 동작을 제공함).</li> -</ul> - -<p> </p> -</div> - -<p>이들 사이의 구분은 모두 원시형(primitive) 처리와 관련이 있습니다. 매개 변수가 구조적, 개념적으로 유사한 지 비교하는 것이 없습니다. 같은 구조를 가지지만 개체 자체가 각각인 비원시형(non-primitive) 개체 x 및 y의 경우 위의 모든 형태(form)는 false로 평가됩니다.</p> - -<h2 id="를_사용하는_엄격한_같음"><code>===</code>를 사용하는 엄격한 같음</h2> - -<p>엄격한 같음(strict equality)은 두 값이 같은 지 비교합니다. 어느 값도 비교되기 전에 어떤 다른 값으로 남몰래 변환되지 않습니다. 둘이 서로 다른 형이면, 둘은 같지 않다고 여깁니다. 그렇지 않고 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다고 여깁니다. 끝으로, 둘이 숫자인 경우, 둘 다 <code>NaN</code>이 아닌 같은 값이거나 하나는 <code>+0</code> 또 하나는 <code>-0</code>인 경우 같다고 여깁니다.</p> - -<pre class="brush: js">var num = 0; -var obj = new String("0"); -var str = "0"; -var b = false; - -console.log(num === num); // true -console.log(obj === obj); // true -console.log(str === str); // true - -console.log(num === obj); // false -console.log(num === str); // false -console.log(obj === str); // false -console.log(null === undefined); // false -console.log(obj === null); // false -console.log(obj === undefined); // false -</pre> - -<p>엄격한 같음은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용합니다: 값은 그 자체와만 같습니다(/ 단지 그 자체입니다). 숫자는 서로 다른 두 극단 상황(edge case)을 얼버무리기(gloss over) 위해 약간 다른 의미를 사용합니다. 첫째는 부동 소수점 0은 양이든 음이든 하나의 부호를 지닙니다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 <code>+0</code>과 <code>-0</code>의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룹니다. 둘째는 부동 소수점은 not-a-number 값(<code>NaN</code>) 개념을 포함합니다, 특정 잘못 정의된(ill-defined) 수학 문제의 해결책을 보여주기 위해: 예를 들어, 양의 무한대(infinity)에 추가된 음의 무한대. 엄격한 같음은 <code>NaN</code>을 다른 모든 값과 같지 않게 다룹니다 -- 자신 포함. (<code>(x !== x)</code>가 <code>true</code>인 유일한 경우는 <code>x</code>가 <code>NaN</code>일 때입니다.)</p> - -<h2 id="를_사용하는_느슨한_같음">==를 사용하는 느슨한 같음</h2> - -<p>느슨한 같음(loose equality)은 두 값이 같은 지 비교합니다, 두 값을 공통(common) 형으로 변환한 <em>후</em>에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음), 최종 같음 비교는 꼭 <code>===</code>처럼 수행됩니다. 느슨한 같음은 대칭(<em>symmetric</em>)입니다: <code>A == B</code>는 <code>A</code> 및 <code>B</code>가 어떤 값이든 항상 <code>B == A</code>와 같은 의미를 갖습니다 (적용된 변환의 순서 말고는).</p> - -<p>같음 비교는 다양한 형의 피연산자에 대해 다음과 같이 수행됩니다:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"> </th> - <th colspan="7" scope="col" style="text-align: center;">피연산자 B</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> </th> - <td> </td> - <td style="text-align: center;">Undefined</td> - <td style="text-align: center;">Null</td> - <td style="text-align: center;">Number</td> - <td style="text-align: center;">String</td> - <td style="text-align: center;">Boolean</td> - <td style="text-align: center;">Object</td> - </tr> - <tr> - <th colspan="1" rowspan="6" scope="row">피연산자 A</th> - <td>Undefined</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Null</td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>true</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - </tr> - <tr> - <td>Number</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>String</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Boolean</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToNumber(A) === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td> - </tr> - <tr> - <td>Object</td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>false</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> - <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td> - <td style="text-align: center;"><code>A === B</code></td> - </tr> - </tbody> -</table> - -<p>위 표에서, <code>ToNumber(A)</code>는 비교 전에 그 인수를 숫자로 변환하려고 시도합니다. 그 동작(behavior)은 <code>+A</code>(단항 + 연산자)에 해당합니다. <code>ToPrimitive(A)</code>는 그 객체 인수를 원시형 값으로 변환하려고 시도합니다, 다양한 순서로 <code>A</code>의 <code>A.toString</code> 및 <code>A.valueOf</code> 메서드 호출을 시도하여.</p> - -<p>전통 및 ECMAScript에 따르면, 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 <code>undefined</code>값을 모방하는(<em>emulate</em>) 것처럼 행동하기 위해 매우 좁은 부류의 객체(특히, 모든 페이지에 대한 <code>document.all</code> 객체)에 허용합니다. 느슨한 같음이 그러한 문맥 중 하나입니다: <code>null == A</code> 및 <code>undefined == A</code>는 A가 <code>undefined</code>를 <em>모방</em>하는 객체인 경우, 그리고 그 경우에만 true로 평가합니다. 다른 모든 경우에 객체는 결코 <code>undefined</code> 또는 <code>null</code>과 느슨하게 같지 않습니다.</p> - -<p> </p> - -<p>전통적으로 ECMAScript에 따르면 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 정의되지 않은 값(<code>undefined</code>)을 모방하는(<em>emulate</em>) 것처럼 동작하는 매우 좁은 개체 클래스 (특히 모든 페이지의 <code>document.all</code> 개체)를 허용합니다. Loose equality는 다음과 같은 컨텍스트 중 하나입니다. <code>null == A</code> 및 <code>undefined == A</code>는 <code>undefined</code>를 에뮬레이트하는 객체 인 경우에만 true로 평가됩니다. 다른 모든 경우에는 객체가 <code>undefined</code>거나 <code>null</code>이 될 수 없습니다.</p> - -<pre class="brush: js">var num = 0; -var obj = new String("0"); -var str = "0"; -var b = false; - -console.log(num == num); // true -console.log(obj == obj); // true -console.log(str == str); // true - -console.log(num == obj); // true -console.log(num == str); // true -console.log(obj == str); // true -console.log(null == undefined); // true - -// 둘 다 false, 드문 경우를 제외하고는 -console.log(obj == null); -console.log(obj == undefined); -</pre> - -<p>대부분의 경우 느슨한 같음을 사용하는 것은 바람직하지 않습니다. strict equality를 사용한 비교의 결과는 예측하기가 쉽고 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠를 수 있습니다.</p> - -<p> </p> - -<h2 id="Same-value_equality">Same-value equality</h2> - -<p>등가(same-value) 같음은 최종 사용 사례(use case)를 다룹니다: 두 값이 모든 문맥에서 <em>기능상 같은지</em> 여부를 결정하는. (이 사용 사례는 <a href="https://ko.wikipedia.org/wiki/리스코프_치환_원칙" title="Liskov substitution principle">리스코프 치환 원칙</a>의 실례를 보입니다.) 다음은 불변 속성(property)을 변화시키려 시도할 때 일어나는 한 사례입니다:</p> - -<pre class="brush: js">// 불변(immutable) NEGATIVE_ZERO 속성을 Number 생성자에 추가. -Object.defineProperty(Number, "NEGATIVE_ZERO", - { value: -0, writable: false, configurable: false, enumerable: false }); - -function attemptMutation(v) -{ - Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); -} -</pre> - -<p><code>Object.defineProperty</code>는 변경 불가능한 속성을 변경하려고 시도 할 때 예외를 throw하지만 실제 변경이 요청되지 않으면 아무 것도 수행하지 않습니다. <code>v</code>가 <code>-0</code>이면, 변경 사항이 요청되지 않고 오류가 발생하지 않습니다. 내부적으로, 불변의 property가 재정의 (redefined)되었을 때, 새롭게 지정된 값은 같은 값의 동등성을 사용해 현재의 값과 비교됩니다.</p> - -<p>Same-value equality는 {{jsxref("Object.is")}} 메서드로 제공됩니다.</p> - -<h2 id="Same-value-zero_equality">Same-value-zero equality</h2> - -<p>등가 같음과 비슷하지만 +0과 -0이 같다고 여깁니다.</p> - -<h2 id="스펙_내_추상적_같음_엄격한_같음_및_등가">스펙 내 추상적 같음, 엄격한 같음 및 등가</h2> - -<p>In ES5, the comparison performed by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> is described in <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a>. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> comparison is <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. (Go look at these. They're brief and readable. Hint: read the strict equality algorithm first.) ES5 also describes, in <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm</a> for use internally by the JS engine. It's largely the same as the Strict Equality Algorithm, except that 11.9.6.4 and 9.12.4 differ in handling {{jsxref("Number")}}s. ES2015 simply proposes to expose this algorithm through {{jsxref("Object.is")}}.</p> - -<p>We can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the Strict Equality Algorithm is a subset of the Abstract Equality Algorithm, because 11.9.6.2–7 correspond to 11.9.3.1.a–f.</p> - -<h2 id="같음_비교를_이해하기_위한_모델은">같음 비교를 이해하기 위한 모델은?</h2> - -<p>ES2015 이전에, 이중 등호 및 삼중 등호에 대해 하나가 다른 하나의 "확장"판이라고 (말)했을 지 모릅니다. 예를 들어, 누군가는 이중 등호는 삼중 등호의 확장판이라고 합니다, 전자는 후자가 하는 모든 것을 하지만 그 피연산자에 형 변환을 하기에. 가령, <code>6 == "6"</code>. (대신에, 이중 등호는 기준선이고 삼중 등호는 향상판이라고 하는 이도 있습니다, 두 피연산자가 같은 형이길 요구하고 그래서 별도 제약을 추가하기에. 어느 게 더 이해하기 좋은 모델인지는 당신이 상태(things)를 보기 위해 선택한 방법에 달렸습니다.)</p> - -<p>However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's {{jsxref("Object.is")}} on this "spectrum". {{jsxref("Object.is")}} isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that {{jsxref("Object.is")}} handles {{jsxref("NaN")}}. Notice that if <code>Object.is(NaN, NaN)</code>evaluated to <code>false</code>, we <em>could</em> say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between <code>-0</code> and <code>+0</code>. The {{jsxref("NaN")}} handling means this is untrue, however. Unfortunately, {{jsxref("Object.is")}} simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.</p> - -<p> </p> - -<table> - <caption>Sameness Comparisons</caption> - <thead> - <tr> - <th scope="col">x</th> - <th scope="col">y</th> - <th scope="col"><code>==</code></th> - <th scope="col"><code>===</code></th> - <th scope="col"><code>Object.is</code></th> - <th scope="col"><code>SameValueZero</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>undefined</code></td> - <td><code>undefined</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>null</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>'foo'</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>-0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>-0</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'0'</code></td> - <td><code>0</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'17'</code></td> - <td><code>17</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>[1, 2]</code></td> - <td><code>'1,2'</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>'foo'</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>undefined</code></td> - <td><code>true</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>undefined</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>{ foo: 'bar' }</code></td> - <td><code>{ foo: 'bar' }</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>new String('foo')</code></td> - <td><code>new String('foo')</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>null</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>'foo'</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - </tr> - <tr> - <td><code>NaN</code></td> - <td><code>NaN</code></td> - <td><code>false</code></td> - <td><code>false</code></td> - <td><code>true</code></td> - <td><code>true</code></td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="jsxref(Object.is)_대신_삼중_등호를_사용하는_경우">{{jsxref("Object.is")}} 대신 삼중 등호를 사용하는 경우</h2> - -<p>In general, the only time {{jsxref("Object.is")}}'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors, when it is desirable for your work to mirror some of the characteristics of {{jsxref("Object.defineProperty")}}. If your use case does not require this, it is suggested to avoid {{jsxref("Object.is")}} and use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> instead. Even if your requirements involve having comparisons between two {{jsxref("NaN")}} values evaluate to <code>true</code>, generally it is easier to special-case the {{jsxref("NaN")}} checks (using the {{jsxref("isNaN")}} method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.</p> - -<p>여기 당신 코드에서 그 자체를 드러내기 위해 <code>-0</code>과 <code>+0</code> 사이의 구별을 일으킬 수도 있는 철저하지 않은(in-exhaustive) 내장 메서드 및 연산자 목록이 있습니다:</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29"><code>- (unary negation)</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> -</dl> - -<pre class="syntaxbox">let stoppingForce = obj.mass * -obj.velocity</pre> - -<dl> - <dd> - <p><code>obj.velocity</code>가 <code>0</code>인 (또는 <code>0</code>으로 계산하는) 경우, <code>-0</code>이 그 자리에 소개되고 <code>stoppingForce</code>로 전해집니다. </p> - </dd> - <dt>{{jsxref("Math.atan2")}}</dt> - <dt>{{jsxref("Math.ceil")}}</dt> - <dt>{{jsxref("Math.pow")}}</dt> - <dt>{{jsxref("Math.round")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> - <dd>In some cases,it's possible for a <code>-0</code> to be introduced into an expression as a return value of these methods even when no <code>-0</code> exists as one of the parameters. For example, using {{jsxref("Math.pow")}} to raise {{jsxref("Infinity", "-Infinity")}} to the power of any negative, odd exponent evaluates to <code>-0</code>. Refer to the documentation for the individual methods. </dd> -</dl> - -<dl> - <dt>{jsxref("Math.floor")}}</dt> - <dt>{{jsxref("Math.max")}}</dt> - <dt>{{jsxref("Math.min")}}</dt> - <dt>{{jsxref("Math.sin")}}</dt> - <dt>{{jsxref("Math.sqrt")}}</dt> - <dt>{{jsxref("Math.tan")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt> - <dd>It's possible to get a <code>-0</code> return value out of these methods in some cases where a <code>-0</code> exists as one of the parameters. E.g., <code>Math.min(-0, +0)</code> evaluates to <code>-0</code>. Refer to the documentation for the individual methods.</dd> -</dl> - -<dl> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><<</a></code></dt> - <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">>></a></code></dt> - <dd>이러한 연산자 각각은 내부에서 ToInt32 알고리즘을 사용합니다. 내부 32-bit 정수형에는 0에 대해 한 표현만 있기에, <code>-0</code>은 역(inverse) 연산 후 왕복 여행(round trip, 이중 역 연산)에 살아남지 못합니다. 가령, <code>Object.is(~~(-0), -0)</code>와 <code>Object.is(-0 << 2 >> 2, -0)</code>는 <code>false</code>로 평가합니다.</dd> -</dl> - -<p>Relying on {{jsxref("Object.is")}} when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between <code>-0</code> and <code>+0</code>, it does exactly what's desired.</p> - -<h2 id="Caveat_jsxref(Object.is)_and_NaN">Caveat: {{jsxref("Object.is")}} and NaN</h2> - -<p>The {{jsxref("Object.is")}} specification treats all instances of {{jsxref("NaN")}} as the same object. However, since <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> are available, we can have distinct instances, which don't behave identically in all contexts. For example:</p> - -<pre><code>var f2b = x => new Uint8Array(new Float64Array([x]).buffer); -var b2f = x => new Float64Array(x.buffer)[0]; -var n = f2b(NaN); -n[0] = 1; -var nan2 = b2f(n); -nan2; -// > NaN -Object.is(nan2, NaN); -// > true -f2b(NaN); -// > Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127) -f2b(nan2); -// > Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)</code></pre> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS 비교 표</a></li> -</ul> diff --git a/files/ko/web/javascript/equality_comparisons_and_sameness/index.md b/files/ko/web/javascript/equality_comparisons_and_sameness/index.md new file mode 100644 index 0000000000..ac6d83901a --- /dev/null +++ b/files/ko/web/javascript/equality_comparisons_and_sameness/index.md @@ -0,0 +1,241 @@ +--- +title: 동치 비교 및 동일성 +slug: Web/JavaScript/Equality_comparisons_and_sameness +tags: + - Comparison + - Equality + - Intermediate + - JavaScript + - SameValue + - SameValueZero + - Sameness +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +{{jsSidebar("Intermediate")}} + +ES2015에는 4가지 같음(equality) 알고리즘이 있습니다: + +- 추상적(abstract) 같음 비교 (`==`) +- 엄격한(strict) 같음 비교 (`===`): `Array.prototype.indexOf`, `Array.prototype.lastIndexOf` 및 `case` 절 매칭에 쓰임 +- 등가0(SameValueZero): `Map` 및 `Set` 연산뿐만 아니라 `%TypedArray%` 및 `ArrayBuffer` 생성자, 그리고 ES2016에 예정된 `String.prototype.includes`에 쓰임 +- 등가(SameValue): 그 외 모든 곳에 쓰임 + +JavaScript는 3가지 서로 다른 값 비교 연산을 제공합니다: + +- [===](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity)를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)"), +- [==](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality)를 사용하는 느슨한(loose) 같음 ("이중 등호"), +- 그리고 [`Object.is`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is) (ECMAScript 2015에 새로 들임). + +어느 연산을 쓸 지 그 선택은 당신이 어떤 종류의 비교를 수행하기 위해 찾고 있는 지에 달렸습니다. + + + +- 이중 equals (`==`)는 두 가지를 비교할 때 유형 변환을 수행하고 IEEE 754를 준수하기 위해 `NaN`, `-0` 및 `+0`을 특별히 처리합니다 (그래서`NaN != NaN`이고 `-0 == +0`입니다); +- 트리플 equals (`===`)는 이중 equals (`NaN`, `-0` 및 `+0`의 특수 처리 포함)와 동일한 비교를 수행하지만 유형 변환은 수행하지 않습니다. 형식이 다른 경우 `false`가 반환됩니다. +- `Object.is`는 형식 변환을하지 않으며 `NaN`, `-0` 및 `+0`에 대한 특수 처리를 수행하지 않습니다 (특수 숫자 값을 제외하고는 `===`와 동일한 동작을 제공함). + +이들 사이의 구분은 모두 원시형(primitive) 처리와 관련이 있습니다. 매개 변수가 구조적, 개념적으로 유사한 지 비교하는 것이 없습니다. 같은 구조를 가지지만 개체 자체가 각각인 비원시형(non-primitive) 개체 x 및 y의 경우 위의 모든 형태(form)는 false로 평가됩니다. + +## `===`를 사용하는 엄격한 같음 + +엄격한 같음(strict equality)은 두 값이 같은 지 비교합니다. 어느 값도 비교되기 전에 어떤 다른 값으로 남몰래 변환되지 않습니다. 둘이 서로 다른 형이면, 둘은 같지 않다고 여깁니다. 그렇지 않고 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다고 여깁니다. 끝으로, 둘이 숫자인 경우, 둘 다 `NaN`이 아닌 같은 값이거나 하나는 `+0` 또 하나는 `-0`인 경우 같다고 여깁니다. + +```js +var num = 0; +var obj = new String("0"); +var str = "0"; +var b = false; + +console.log(num === num); // true +console.log(obj === obj); // true +console.log(str === str); // true + +console.log(num === obj); // false +console.log(num === str); // false +console.log(obj === str); // false +console.log(null === undefined); // false +console.log(obj === null); // false +console.log(obj === undefined); // false +``` + +엄격한 같음은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용합니다: 값은 그 자체와만 같습니다(/ 단지 그 자체입니다). 숫자는 서로 다른 두 극단 상황(edge case)을 얼버무리기(gloss over) 위해 약간 다른 의미를 사용합니다. 첫째는 부동 소수점 0은 양이든 음이든 하나의 부호를 지닙니다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 `+0`과 `-0`의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룹니다. 둘째는 부동 소수점은 not-a-number 값(`NaN`) 개념을 포함합니다, 특정 잘못 정의된(ill-defined) 수학 문제의 해결책을 보여주기 위해: 예를 들어, 양의 무한대(infinity)에 추가된 음의 무한대. 엄격한 같음은 `NaN`을 다른 모든 값과 같지 않게 다룹니다 -- 자신 포함. (`(x !== x)`가 `true`인 유일한 경우는 `x`가 `NaN`일 때입니다.) + +## ==를 사용하는 느슨한 같음 + +The behavior for performing loose equality using `==` is as follows: + +- 느슨한 같음(loose equality)은 두 값이 같은 지 비교합니다, 두 값을 공통(common) 형으로 변환한 후에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음), 최종 같음 비교는 꼭 `===`처럼 수행됩니다. +- 느슨한 같음은 대칭(_symmetric_)입니다: `A == B`는 `A` 및 `B`가 어떤 값이든 항상 `B == A`와 같은 의미를 갖습니다 (적용된 변환의 순서 말고는). +- `undefined` and `null` are loosely equal; that is, `undefined == null` is true, and `null == undefined` is true + +전통 및 ECMAScript에 따르면, 모든 객체는 `undefined` 및 `null`과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 `undefined`값을 모방하는(_emulate_) 것처럼 행동하기 위해 매우 좁은 부류의 객체(특히, 모든 페이지에 대한 `document.all` 객체)에 허용합니다. 느슨한 같음이 그러한 문맥 중 하나입니다: `null == A` 및 `undefined == A`는 A가 `undefined`를 *모방*하는 객체인 경우, 그리고 그 경우에만 true로 평가합니다. 다른 모든 경우에 객체는 결코 `undefined` 또는 `null`과 느슨하게 같지 않습니다. + +Loose equality comparisons among other combinations of operand types are performed as shown in the tables below. The following notations are used in the tables: + +- `ToNumber(A)` attempts to convert its argument to a number before comparison. Its behavior is equivalent to `+A` (the unary + operator). +- `ToPrimitive(A)` attempts to convert its object argument to a primitive value, by invoking varying sequences of `A.toString()` and `A.valueOf()` methods on `A`. +- `ℝ(A)` attempts to convert its argument to an ECMAScript [mathematical value](https://tc39.es/ecma262/#mathematical-value). +- `StringToBigInt(A)` attempts to convert its argument to a `BigInt` by applying the ECMAScript [`StringToBigInt`](https://tc39.es/ecma262/#sec-stringtobigint) algorithm. + +**number** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| --------- | ------------------ | ------------------- | ------------------- | --------------------- | +| `A === B` | `ℝ(A) equals ℝ(B)` | `A === ToNumber(B)` | `A === ToNumber(B)` | `A == ToPrimitive(B)` | + +**bigint** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------ | --------- | ------------------------- | ------------------ | --------------------- | +| `ℝ(A) equals ℝ(B)` | `A === B` | `A === StringToBigInt(B)` | `A == ToNumber(B)` | `A == ToPrimitive(B)` | + +**string** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------- | ------------------------- | --------- | ----------------------------- | --------------------- | +| `ToNumber(A) === B` | `StringToBigInt(A) === B` | `A === B` | `ToNumber(A) === ToNumber(B)` | `A == ToPrimitive(B)` | + +**boolean** primitive `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| ------------------- | ------------------ | ----------------------------- | --------- | ------------------------------- | +| `ToNumber(A) === B` | `ToNumber(A) == B` | `ToNumber(A) === ToNumber(B)` | `A === B` | `ToNumber(A) == ToPrimitive(B)` | + +**Object** `A` compared to operand `B`: + +| number | bigint | string | boolean | Object | +| --------------------- | --------------------- | --------------------- | ------------------------------- | --------- | +| `ToPrimitive(A) == B` | `ToPrimitive(A) == B` | `ToPrimitive(A) == B` | `ToPrimitive(A) == ToNumber(B)` | `A === B` | + +In most cases, using loose equality is discouraged. The result of a comparison using strict equality is easier to predict, and may evaluate more quickly due to the lack of type coercion. + +### Example + +The following example demonstrates loose equality comparisons involving the number primitive `0`, the bigint primitive `0n`, the string primitive `'0'`, and an object whose `toString()` value is `'0'`. + +```js +const num = 0; +const big = 0n; +const str = '0'; +const obj = new String('0'); + +console.log(num == str); // true +console.log(big == num); // true +console.log(str == big); // true + +console.log(num == obj); // true +console.log(big == obj); // true +console.log(str == obj); // true +``` + +대부분의 경우 느슨한 같음을 사용하는 것은 바람직하지 않습니다. strict equality를 사용한 비교의 결과는 예측하기가 쉽고 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠를 수 있습니다. + +## Same-value equality + +등가(same-value) 같음은 최종 사용 사례(use case)를 다룹니다: 두 값이 모든 문맥에서 _기능상 같은지_ 여부를 결정하는. (이 사용 사례는 [리스코프 치환 원칙](https://ko.wikipedia.org/wiki/리스코프_치환_원칙 "Liskov substitution principle")의 실례를 보입니다.) 다음은 불변 속성(property)을 변화시키려 시도할 때 일어나는 한 사례입니다: + +```js +// 불변(immutable) NEGATIVE_ZERO 속성을 Number 생성자에 추가. +Object.defineProperty(Number, "NEGATIVE_ZERO", + { value: -0, writable: false, configurable: false, enumerable: false }); + +function attemptMutation(v) +{ + Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); +} +``` + +`Object.defineProperty`는 변경 불가능한 속성을 변경하려고 시도 할 때 예외를 throw하지만 실제 변경이 요청되지 않으면 아무 것도 수행하지 않습니다. `v`가 `-0`이면, 변경 사항이 요청되지 않고 오류가 발생하지 않습니다. 내부적으로, 불변의 property가 재정의 (redefined)되었을 때, 새롭게 지정된 값은 같은 값의 동등성을 사용해 현재의 값과 비교됩니다. + +Same-value equality는 {{jsxref("Object.is")}} 메서드로 제공됩니다. + +## Same-value-zero equality + +등가 같음과 비슷하지만 +0과 -0이 같다고 여깁니다. + +## 스펙 내 추상적 같음, 엄격한 같음 및 등가 + +In ES5, the comparison performed by [`==`](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) is described in [Section 11.9.3, The Abstract Equality Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-11.9.3). The [`===`](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) comparison is [11.9.6, The Strict Equality Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-11.9.6). (Go look at these. They're brief and readable. Hint: read the strict equality algorithm first.) ES5 also describes, in [Section 9.12, The SameValue Algorithm](https://ecma-international.org/ecma-262/5.1/#sec-9.12) for use internally by the JS engine. It's largely the same as the Strict Equality Algorithm, except that 11.9.6.4 and 9.12.4 differ in handling {{jsxref("Number")}}s. ES2015 simply proposes to expose this algorithm through {{jsxref("Object.is")}}. + +We can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the Strict Equality Algorithm is a subset of the Abstract Equality Algorithm, because 11.9.6.2–7 correspond to 11.9.3.1.a–f. + +## 같음 비교를 이해하기 위한 모델은? + +ES2015 이전에, 이중 등호 및 삼중 등호에 대해 하나가 다른 하나의 "확장"판이라고 (말)했을 지 모릅니다. 예를 들어, 누군가는 이중 등호는 삼중 등호의 확장판이라고 합니다, 전자는 후자가 하는 모든 것을 하지만 그 피연산자에 형 변환을 하기에. 가령, `6 == "6"`. (대신에, 이중 등호는 기준선이고 삼중 등호는 향상판이라고 하는 이도 있습니다, 두 피연산자가 같은 형이길 요구하고 그래서 별도 제약을 추가하기에. 어느 게 더 이해하기 좋은 모델인지는 당신이 상태(things)를 보기 위해 선택한 방법에 달렸습니다.) + +However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's {{jsxref("Object.is")}} on this "spectrum". {{jsxref("Object.is")}} isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that {{jsxref("Object.is")}} handles {{jsxref("NaN")}}. Notice that if `Object.is(NaN, NaN)`evaluated to `false`, we *could* say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between `-0` and `+0`. The {{jsxref("NaN")}} handling means this is untrue, however. Unfortunately, {{jsxref("Object.is")}} simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators. + + + +| x | y | `==` | `===` | `Object.is` | `SameValueZero` | +| ------------------- | ------------------- | ---------- | ---------- | ----------- | --------------- | +| `undefined` | `undefined` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `null` | `null` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `true` | `true` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `false` | `false` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `'foo'` | `'foo'` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `+0` | `-0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` | +| `+0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `-0` | `0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` | +| `0n` | `-0n` | `✅ true` | `✅ true` | `✅ true` | `✅ true` | +| `0` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `""` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `""` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `'0'` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `'17'` | `17` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `[1, 2]` | `'1,2'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `new String('foo')` | `'foo'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `null` | `undefined` | `✅ true` | `❌ false` | `❌ false` | `❌ false` | +| `null` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `undefined` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `{ foo: 'bar' }` | `{ foo: 'bar' }` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `new String('foo')` | `new String('foo')` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `0` | `null` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `0` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `'foo'` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` | +| `NaN` | `NaN` | `❌ false` | `❌ false` | `✅ true` | `✅ true` | + +## {{jsxref("Object.is")}} 대신 삼중 등호를 사용하는 경우 + +In general, the only time {{jsxref("Object.is")}}'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors, when it is desirable for your work to mirror some of the characteristics of {{jsxref("Object.defineProperty")}}. If your use case does not require this, it is suggested to avoid {{jsxref("Object.is")}} and use [`===`](/ko/docs/Web/JavaScript/Reference/Operators) instead. Even if your requirements involve having comparisons between two {{jsxref("NaN")}} values evaluate to `true`, generally it is easier to special-case the {{jsxref("NaN")}} checks (using the {{jsxref("isNaN")}} method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison. + +여기 당신 코드에서 그 자체를 드러내기 위해 `-0`과 `+0` 사이의 구별을 일으킬 수도 있는 철저하지 않은(in-exhaustive) 내장 메서드 및 연산자 목록이 있습니다: + +- [-(unary negation)](/ko/docs/Web/JavaScript/Reference/Operators#-_.28unary_negation.29) + - ```js + let stoppingForce = obj.mass * -obj.velocity; + ``` + If `obj.velocity` is `0` (or computes to `0`), a `-0` is introduced at that place and propagates out into `stoppingForce`. +- {{jsxref("Math.atan2")}}, {{jsxref("Math.ceil")}}, {{jsxref("Math.pow")}}, {{jsxref("Math.round")}} + - : In some cases,it's possible for a `-0` to be introduced into an expression as a return value of these methods even when no `-0` exists as one of the parameters. For example, using {{jsxref("Math.pow")}} to raise {{jsxref("Infinity", "-Infinity")}} to the power of any negative, odd exponent evaluates to `-0`. Refer to the documentation for the individual methods. +- {{jsxref("Math.floor")}}, {{jsxref("Math.max")}}, {{jsxref("Math.min")}}, {{jsxref("Math.sin")}}, {{jsxref("Math.sqrt")}}, {{jsxref("Math.tan")}} + - : It's possible to get a `-0` return value out of these methods in some cases where a `-0` exists as one of the parameters. E.g., `Math.min(-0, +0)` evaluates to `-0`. Refer to the documentation for the individual methods. +- [`~`](/en-US/docs/Web/JavaScript/Reference/Operators), [`<<`](/en-US/docs/Web/JavaScript/Reference/Operators), [`>>`](/en-US/docs/Web/JavaScript/Reference/Operators) + - : Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, `-0` will not survive a round trip after an inverse operation. E.g., both `Object.is(~~(-0), -0)` and `Object.is(-0 << 2 >> 2, -0)` evaluate to `false`. + +Relying on {{jsxref("Object.is")}} when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between `-0` and `+0`, it does exactly what's desired. + +## Caveat: Object.is and NaN + +The {{jsxref("Object.is")}} specification treats all instances of {{jsxref("NaN")}} as the same object. However, since [typed arrays](/ko/docs/Web/JavaScript/Typed_arrays) are available, we can have distinct instances, which don't behave identically in all contexts. For example: + +```js +var f2b = x => new Uint8Array(new Float64Array([x]).buffer); +var b2f = x => new Float64Array(x.buffer)[0]; +var n = f2b(NaN); +n[0] = 1; +var nan2 = b2f(n); +nan2; +// > NaN +Object.is(nan2, NaN); +// > true +f2b(NaN); +// > Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127) +f2b(nan2); +// > Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127) +``` + +## 참조 + +- [JS 비교 표](http://dorey.github.io/JavaScript-Equality-Table/) diff --git a/files/ko/web/javascript/eventloop/index.html b/files/ko/web/javascript/eventloop/index.html deleted file mode 100644 index c7911fdbfb..0000000000 --- a/files/ko/web/javascript/eventloop/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 동시성 모델과 이벤트 루프 -slug: Web/JavaScript/EventLoop -tags: - - 이벤트 루프 -translation_of: Web/JavaScript/EventLoop ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p>자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 <strong>이벤트 루프</strong>에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다.</p> - -<h2 id="런타임_개념">런타임 개념</h2> - -<p>이어지는 섹션에서는 이론적 모델을 설명합니다. 모던 자바스크립트 엔진들은 아래 묘사된 개념들을 구현하고 최적화 합니다.</p> - -<h3 id="시각적_표현">시각적 표현</h3> - -<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> - -<h3 id="Stack">Stack</h3> - -<p>함수 호출은 <em>프레임</em>들의 스택을 형성합니다.</p> - -<pre class="brush: js"><code>function foo(b) { - var a = 10; - return a + b + 11; -} - -function bar(x) { - var y = 3; - return foo(x * y); -} - -console.log(bar(7)); //returns 42</code></pre> - -<p><code>bar</code>를 호출할 때, <code>bar</code>의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. <code>bar</code>가 <code>foo</code>를 호출하면 두 번째 프레임이 만들어져 <code>foo</code>의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. <code>foo</code>가 반환되면, 최상위 프레임 요소는 <code>bar</code>의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. <code>bar</code>가 반환되면, 스택은 비워집니다.</p> - -<h3 id="Heap">Heap</h3> - -<p>객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다.</p> - -<h3 id="Queue">Queue</h3> - -<p>JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다.</p> - -<p>{{anch("Event loop", "event loop")}} 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다.</p> - -<p>함수의 처리는 스택이 다시 비워 질 때까지 계속됩니다. 이벤트 루프는 큐의 다음 메시지를 처리합니다(존재할 경우).</p> - -<h2 id="Event_loop">Event loop</h2> - -<p><strong>Event loop</strong>는 그 구현 방식 때문에 붙은 이름이며 보통 다음과 유사합니다 :</p> - -<pre class="brush: js">while(queue.waitForMessage()){ - queue.processNextMessage(); -}</pre> - -<p><code>queue.waitForMessage()</code> 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다.</p> - -<h3 id="Run-to-completion">"Run-to-completion"</h3> - -<p>각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다.</p> - -<p>이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 멈출 수 있습니다.</p> - -<p>이 모델의 부정적인 면은 어떤 메시지가 완료되기 까지 지나치게 오래 걸린다면 웹 어플리케이션은 클릭이나 스크롤과 같은 사용자 인터랙션을 처리할 수 없게 됩니다. 브라우저는 이러한 상황을 "a script is taking too long to run"과 같은 대화상자로 완화 합니다. 추천되는 좋은 방법은 메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다.</p> - -<h3 id="메시지_추가하기">메시지 추가하기</h3> - -<p>웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다.</p> - -<p><code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> 함수는 2 개의 인수, 대기열에 추가 할 메시지와 시간값(선택사항, 기본값은 0)으로 호출됩니다. 시간 값은 메시지가 실제로 큐에 푸시 될 때까지의 (최소) 지연을 나타냅니다. 대기열에 다른 메시지가 없으면 지연 직후에 메시지가 처리됩니다. 그러나 메시지가있는 경우 setTimeout 메시지는 다른 메시지가 처리 될 때까지 기다려야합니다. 따라서 두 번째 인수는 최소 시간을 나타내지 만 보장 된 시간은 아닙니다.</p> - -<p>다음은 이 개념에 대한 예제입니다 (<code>setTimeout</code>은 타이머 만료 직후에 실행되지 않습니다).</p> - -<pre class="brush: js"><code>const s = new Date().getSeconds(); - -setTimeout(function() { - // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. - console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); -}, 500); - -while(true) { - if(new Date().getSeconds() - s >= 2) { - console.log("Good, looped for 2 seconds"); - break; - } -}</code></pre> - -<h3 id="Zero_delays">Zero delays</h3> - -<p>Zero delay는 실제로 0ms 후에 콜백이 시작된다는 의미는 아닙니다. 0ms 지연된 {{domxref("WindowTimers.setTimeout", "setTimeout")}}은 주어진 간격 후에 콜백 함수를 실행하지 않습니다.</p> - -<p>실행은 큐에 대기중인 작업 수에 따라 다릅니다. 아래 예에서, 콜백의 메시지가 처리되기 전에 콘솔에 "this is just message"메시지가 기록됩니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다.</p> - -<p>기본적으로 setTimeout은 setTimeout에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다.</p> - -<pre class="brush: js"><code>(function() { - - console.log('this is the start'); - - setTimeout(function cb() { - console.log('this is a msg from call back'); - }); - - console.log('this is just a message'); - - setTimeout(function cb1() { - console.log('this is a msg from call back1'); - }, 0); - - console.log('this is the end'); - -})(); - -// "this is the start" -// "this is just a message" -// "this is the end" -// note that function return, which is undefined, happens here -// "this is a msg from call back" -// "this is a msg from call back1"</code></pre> - -<h3 id="몇가지_런타임_통신">몇가지 런타임 통신</h3> - -<p>웹워커 또는 크로스 오리진 <code>iframe</code>은 자신의 스택, 힙, 메시지 큐를 가지고 있습니다. 두 별개의 런타임들은 <a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a> method를 통해서만 서로 통신할 수 있습니다. 이 메서드는 다른 런타임이 <code>message</code> 이벤트 핸들러를 등록하고 있다면 해당 런타임의 큐에 메시지를 추가합니다.</p> - -<h2 id="Never_blocking">Never blocking</h2> - -<p>이벤트 루프 모델의 무척 재밌는 부분은 다른 언어와 달리 자바스크립트는 결코 Block하지 않는다는 것입니다. I/O 처리는 흔히 이벤트와 콜백으로 처리 됩니다. 그래서 응용프로그램이 <a href="/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> query 반환을 기다리고 있거나 <a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a> 요청 반환을 기다릴 때에도 여전히 사용자 입력과 같은 다른 것을을 처리할 수 있습니다.</p> - -<p><code>alert</code> 또는 synchronous XHR과 같은 구현 예외가 존재 합니다. 그러나 그것들은 사용되지 않는 것이 좋다라고 여겨집니다. <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">예외를 위한 예외</a>를 조심하세요 (그러나 보통 구현 버그일뿐 그이상 아무것도 아닙니다).</p> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">명세</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td> - </tr> - <tr> - <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td> - </tr> - </tbody> -</table> diff --git a/files/ko/web/javascript/eventloop/index.md b/files/ko/web/javascript/eventloop/index.md new file mode 100644 index 0000000000..2d7f39ffeb --- /dev/null +++ b/files/ko/web/javascript/eventloop/index.md @@ -0,0 +1,151 @@ +--- +title: 동시성 모델과 이벤트 루프 +slug: Web/JavaScript/EventLoop +tags: + - 이벤트 루프 + - Advanced + - Event Loop + - Event Management + - Event Queue + - Guide + - Handling Events + - JavaScript + - events +translation_of: Web/JavaScript/EventLoop +--- +{{JsSidebar("Advanced")}} + +자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 **이벤트 루프**에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다. + +## 런타임 개념 + +이어지는 섹션에서는 이론적 모델을 설명합니다. 모던 자바스크립트 엔진들은 아래 묘사된 개념들을 구현하고 최적화 합니다. + +### 시각적 표현 + + + +### Stack + +함수 호출은 *프레임*들의 스택을 형성합니다. + +```js +function foo(b) { + var a = 10; + return a + b + 11; +} + +function bar(x) { + var y = 3; + return foo(x * y); +} + +console.log(bar(7)); //returns 42 +``` + +`bar`를 호출할 때, `bar`의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. `bar`가 `foo`를 호출하면 두 번째 프레임이 만들어져 `foo`의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. `foo`가 반환되면, 최상위 프레임 요소는 `bar`의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. `bar`가 반환되면, 스택은 비워집니다. + +### Heap + +객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다. + +### Queue + +JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다. + +[event loop](#event_loop) 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다. + +함수의 처리는 스택이 다시 비워 질 때까지 계속됩니다. 이벤트 루프는 큐의 다음 메시지를 처리합니다(존재할 경우). + +## Event loop + +**Event loop**는 그 구현 방식 때문에 붙은 이름이며 보통 다음과 유사합니다 : + +```js +while(queue.waitForMessage()){ + queue.processNextMessage(); +} +``` + +`queue.waitForMessage()` 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다. + +### "Run-to-completion" + +각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다. + +이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 멈출 수 있습니다. + +이 모델의 부정적인 면은 어떤 메시지가 완료되기 까지 지나치게 오래 걸린다면 웹 어플리케이션은 클릭이나 스크롤과 같은 사용자 인터랙션을 처리할 수 없게 됩니다. 브라우저는 이러한 상황을 "a script is taking too long to run"과 같은 대화상자로 완화 합니다. 추천되는 좋은 방법은 메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다. + +### 메시지 추가하기 + +웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다. + +[`setTimeout`](/ko/docs/Web/API/WindowTimers.setTimeout) 함수는 2 개의 인수, 대기열에 추가 할 메시지와 시간값(선택사항, 기본값은 0)으로 호출됩니다. 시간 값은 메시지가 실제로 큐에 푸시 될 때까지의 (최소) 지연을 나타냅니다. 대기열에 다른 메시지가 없으면 지연 직후에 메시지가 처리됩니다. 그러나 메시지가있는 경우 setTimeout 메시지는 다른 메시지가 처리 될 때까지 기다려야합니다. 따라서 두 번째 인수는 최소 시간을 나타내지 만 보장 된 시간은 아닙니다. + +다음은 이 개념에 대한 예제입니다 (`setTimeout`은 타이머 만료 직후에 실행되지 않습니다). + +```js +const s = new Date().getSeconds(); + +setTimeout(function() { + // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. + console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); +}, 500); + +while(true) { + if(new Date().getSeconds() - s >= 2) { + console.log("Good, looped for 2 seconds"); + break; + } +} +``` + +### Zero delays + +Zero delay는 실제로 0ms 후에 콜백이 시작된다는 의미는 아닙니다. `0`ms 지연된 [`setTimeout`](/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)은 주어진 간격 후에 콜백 함수를 실행하지 않습니다. + +실행은 큐에 대기중인 작업 수에 따라 다릅니다. 아래 예에서, 콜백의 메시지가 처리되기 전에 콘솔에 `"this is just message"`메시지가 기록됩니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다. + +기본적으로 `setTimeout`은 `setTimeout`에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다. + +```js +(function() { + + console.log('this is the start'); + + setTimeout(function cb() { + console.log('Callback 1: this is a msg from call back'); + }); // has a default time value of 0 + + console.log('this is just a message'); + + setTimeout(function cb1() { + console.log('Callback 2: this is a msg from call back'); + }, 0); + + console.log('this is the end'); + +})(); + +// "this is the start" +// "this is just a message" +// "this is the end" +// "Callback 1: this is a msg from call back" +// "Callback 2: this is a msg from call back" +``` + +### 몇가지 런타임 통신 + +웹워커 또는 크로스 오리진 `iframe`은 자신의 스택, 힙, 메시지 큐를 가지고 있습니다. 두 별개의 런타임들은 [`postMessage`](/ko/docs/DOM/window.postMessage) method를 통해서만 서로 통신할 수 있습니다. 이 메서드는 다른 런타임이 `message` 이벤트 핸들러를 등록하고 있다면 해당 런타임의 큐에 메시지를 추가합니다. + +## Never blocking + +이벤트 루프 모델의 무척 재밌는 부분은 다른 언어와 달리 자바스크립트는 결코 Block하지 않는다는 것입니다. I/O 처리는 흔히 이벤트와 콜백으로 처리 됩니다. 그래서 응용프로그램이 [IndexedDB](/ko/docs/Web/API/IndexedDB_API) query 반환을 기다리고 있거나 [XHR](/ko/docs/Web/API/XMLHttpRequest) 요청 반환을 기다릴 때에도 여전히 사용자 입력과 같은 다른 것을을 처리할 수 있습니다. + +`alert` 또는 synchronous XHR과 같은 구현 예외가 존재 합니다. 그러나 그것들은 사용되지 않는 것이 좋다라고 여겨집니다. [예외를 위한 예외](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311)를 조심하세요 (그러나 보통 구현 버그일뿐 그이상 아무것도 아닙니다). + +## 같이보기 + +- [Event loops in the HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) +- [Node.js Event Loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop) diff --git a/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html index fa007d6997..ac94b0b90c 100644 --- a/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html @@ -274,7 +274,7 @@ catch (e) { } </pre> -<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> 블록</h4> +<h4 id="The_catch_Block"><code>catch</code> 블록</h4> <p><code>try</code> 블록에서 발생할수 있는 모든 예외를 처리하기 위해 <code>catch</code> 블록을 사용할 수 있습니다.</p> @@ -361,7 +361,7 @@ try { // OUTPUT // caught inner "bogus"</pre> -<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">try...catch 문법 중첩하기</h4> +<h4 id="Nesting_try...catch_Statements">try...catch 문법 중첩하기</h4> <p> </p> diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html index 99b92b7394..a5f1afa96b 100644 --- a/files/ko/web/javascript/guide/functions/index.html +++ b/files/ko/web/javascript/guide/functions/index.html @@ -190,9 +190,9 @@ function getScore () { getScore(); // Returns "Chamahk scored 5" </pre> -<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">범위와 함수 스택</h2> +<h2 id="Scope_and_the_function_stack">범위와 함수 스택</h2> -<h3 id="Recursion" name="Recursion">재귀</h3> +<h3 id="Recursion">재귀</h3> <p>함수는 자신을 참조하고 호출할 수 있습니다. 함수가 자신을 참조하는 방법은 세 가지가 있습니다.</p> @@ -318,7 +318,7 @@ result = fn_inside(5); // returns 8 result1 = outside(3)(5); // returns 8 </pre> -<h3 id="Efficiency_considerations" name="Efficiency_considerations">변수의 보존</h3> +<h3 id="Efficiency_considerations">변수의 보존</h3> <p>중첩된 내부 함수가 반환될 때 외부 함수의 인수 <code>x</code>가 보존된다는 점을 알 수 있습니다. 클로저는 그것을 참조하는 모든 범위에서 인수와 변수를 보존해두어야 합니다. 매번 호출될 때마다 잠재적으로 다른 인수를 제공할 수 있기 때문에, 클로저는 외부 함수에 대하여 매번 새로 생성됩니다. 메모리는 그 무엇도 내부 함수에 접근하지 않을 때만 해제됩니다.</p> @@ -352,7 +352,7 @@ A(1); // logs 6 (1 + 2 + 3) <p>그러나 역은 사실이 아닙니다. A는 C에 접근 할 수 없습니다. 왜냐하면 A는 B의 인수와 변수(C는 B변수)에 접근할수 없기 때문입니다. 그래서 C는 B에게만 사적으로 남게됩니다.</p> -<h3 id="Name_conflicts" name="Name_conflicts">이름 충돌</h3> +<h3 id="Name_conflicts">이름 충돌</h3> <p>클로저의 범위에서 두 개의 인수 또는 변수의 이름이 같은 경우, <em>이름 충돌</em>이 있습니다. 더 안쪽 범위가 우선순위를 갖습니다. 그래서 가장 바깥 범위는 우선순위가 가장 낮은 반면에, 가장 안쪽 범위는 가장 높은 우선순위를 갖습니다. 이것이 범위 체인(scope chaini)입니다. <span class="atn">체인에서</span> 첫번째는 <span class="hps">가장 안쪽</span> <span class="atn hps">범위</span><span>이고,</span> <span class="atn hps">마지막</span><span>은</span> <span class="atn hps">가장 바깥 쪽</span><span class="atn">의 범위입니다</span><span>.</span> <span class="hps">다음 사항을 고려하세요:</span></p> diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html index cac6b40ed4..537817b5b5 100644 --- a/files/ko/web/javascript/guide/introduction/index.html +++ b/files/ko/web/javascript/guide/introduction/index.html @@ -48,7 +48,7 @@ original_slug: Web/JavaScript/Guide/소개 <p>이것은 브라우저에서 JavaScript가 웹 페이지 (DOM)의 모양을 바꿀 수 있음을 의미합니다. 또한 서버의 Node.js JavaScript는 브라우저에 작성된 코드의 사용자 정의 요청에 응답 할 수 있습니다.</p> -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 와 Java</h2> +<h2 id="JavaScript_and_Java">JavaScript 와 Java</h2> <p>JavaScript 와 Java는 여러 면에서 비슷하지만 어떤 면에서는 근본적으로 다릅니다. JavaScript 언어는 Java를 닮았지만 Java의 정적 형지정(static typing)과 강한 형 검사(strong type checking)가 없습니다. JavaScript는 대부분의 Java 식 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따릅니다. 그것이 LiveScript에서 JavaScript로 이름이 바뀐 이유였습니다.</p> @@ -86,13 +86,13 @@ original_slug: Web/JavaScript/Guide/소개 <p>JavaScript와 Java의 차이에 대한 더 많은 정보는, <a href="/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항">객체 모델의 세부사항</a> 장을 보세요.</p> -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 와 ECMAScript 명세</h2> +<h2 id="JavaScript_and_the_ECMAScript_Specification">JavaScript 와 ECMAScript 명세</h2> <p>JavaScript는 JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해<a class="external" href="http://www.ecma-international.org/">Ecma International</a> 에서 표준화 됩니다 — European association for standardizing information and communication systems (ECMA는 이전에 European Computer Manufacturers Association의 두문자어였습니다). ECMAScript라 불리는 이 JavaScript의 표준화 버전은 표준을 지원하는 모든 어플리케이션에서 같은 방식으로 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해 공개 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세(specification)에서 문서화되었습니다. JavaScript와 ECMAScript 명세 판의 여러 버전에 대한 더 많은 것을 배우려면 <a href="/ko/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> 을 보세요.</p> <p>ECMA-262 표준은 또한 IOS-16262로서 <a class="external" href="http://www.iso.ch/">ISO</a> (국제 표준화 기구) 에 의해 승인되었습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a> 에서 그 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 나 <a href="https://whatwg.org/">WHATWG (Web Hypertext Application Technology Working Group)</a>에 의해 표준화된 Document Object Model (DOM)을 설명하지 않습니다. DOM은 여러분의 스크립트에 HTML 문서 객체를 드러내는 방법을 정의합니다. JavaScript로 프로그래밍을 할 때 사용되는 여러 기술들에 대한 정보를 얻으 시려면, <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a> 를 참고하세요.</p> -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 문서 vs ECMAScript 명세</h3> +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 문서 vs ECMAScript 명세</h3> <p>ECMAScript 명세는 ECMAScript 구현을 위한 요구사항의 집합입니다; 여러분이 여러분의 ECMAScript 구현이나 엔진(가령 Firefox의 SpiderMonkey, 또는 Chrome의 v8)에서 표준을 따르는 언어의 기능을 구현하길 원할 때 유용합니다.</p> diff --git a/files/ko/web/javascript/guide/numbers_and_dates/index.html b/files/ko/web/javascript/guide/numbers_and_dates/index.html index 6a45e1ef7f..9a8a2c785e 100644 --- a/files/ko/web/javascript/guide/numbers_and_dates/index.html +++ b/files/ko/web/javascript/guide/numbers_and_dates/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates <h2 id="숫자">숫자</h2> -<p>JavaScript에서 모든 숫자는 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (즉, ±2<sup>−1022</sup> 과 ±2<sup>+1023</sup> 또는 대략 ±10<sup>−308</sup> to ±10<sup>+308</sup> 사이의 숫자이며 53bits의 수치정밀도 )로 구현되어 있습니다. ± 2<sup>53</sup> - 1까지의 정수 값을 정확하게 나타낼 수 있습니다.</p> +<p>JavaScript에서 모든 숫자는 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (즉, ±2^−1022 과 ±2^+1023 또는 대략 ±10^−308 to ±10^+308 사이의 숫자이며 53bits의 수치정밀도 )로 구현되어 있습니다. ±2^53 - 1까지의 정수 값을 정확하게 나타낼 수 있습니다.</p> <p>여기 부동 소수점 숫자를 나타낼 수 있으며, 숫자 형식은 세 개의 상징적인 값: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (숫자가 아닌 값)을 갖습니다.</p> @@ -120,11 +120,11 @@ var notANum = Number.NaN; </tr> <tr> <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> - <td>자바스크립트에서 안전한 최소의 정수.(−2<sup>53</sup> + 1, or <code>−9007199254740991</code>)</td> + <td>자바스크립트에서 안전한 최소의 정수.(−2^53 + 1, or <code>−9007199254740991</code>)</td> </tr> <tr> <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> - <td>자바스크립트에서 안전한 최대의 정수.(+2<sup>53</sup> − 1, or <code>+9007199254740991</code>)</td> + <td>자바스크립트에서 안전한 최대의 정수.(+2^53 − 1, or <code>+9007199254740991</code>)</td> </tr> </tbody> </table> diff --git a/files/ko/web/javascript/guide/working_with_objects/index.html b/files/ko/web/javascript/guide/working_with_objects/index.html index 5c4a5eb82d..7dce2677f8 100644 --- a/files/ko/web/javascript/guide/working_with_objects/index.html +++ b/files/ko/web/javascript/guide/working_with_objects/index.html @@ -438,7 +438,7 @@ console.log(o.b) // Runs the getter, which yields a + 1 or 6 <p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p> </div> -<h4 id="Defining_getters_and_setters_See_also" name="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4> +<h4 id="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4> <ul> <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">Object.defineProperty</a></code></li> diff --git a/files/ko/web/javascript/language_resources/index.html b/files/ko/web/javascript/language_resources/index.html index d051af2d2e..ec37f4b7a7 100644 --- a/files/ko/web/javascript/language_resources/index.html +++ b/files/ko/web/javascript/language_resources/index.html @@ -23,20 +23,20 @@ original_slug: Web/JavaScript/언어_리소스 <th colspan="4">현재판</th> </tr> <tr> - <td>ECMA-262 10<sup>th</sup> Edition</td> + <td>ECMA-262 10th Edition</td> <td><a href="https://tc39.github.io/ecma262/">Working draft</a></td> <td>2019</td> <td>ECMAScript 2019 (제 10판), 명세 작업 중</td> </tr> <tr> - <td>ECMA-262 9<sup>th</sup> Edition</td> + <td>ECMA-262 9th Edition</td> <td><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br> <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></td> <td>2018</td> <td>ECMAScript 2018 (제 9판)</td> </tr> <tr> - <td>ECMA-402 5<sup>th</sup> Edition</td> + <td>ECMA-402 5th Edition</td> <td><a href="http://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> <td>2018</td> <td>ECMAScript 2018 국제화 API 표준</td> @@ -127,7 +127,7 @@ original_slug: Web/JavaScript/언어_리소스 <td>ECMAScript 2017 (제8판).</td> </tr> <tr> - <td>ECMA-402 4<sup>th</sup> Edition</td> + <td>ECMA-402 4th Edition</td> <td><a href="http://www.ecma-international.org/ecma-402/4.0">HTML</a></td> <td>June 2017</td> <td>ECMAScript 국제화 API 4.0.</td> diff --git a/files/ko/web/javascript/reference/classes/extends/index.html b/files/ko/web/javascript/reference/classes/extends/index.html index 0ae81a9964..54de5b2f01 100644 --- a/files/ko/web/javascript/reference/classes/extends/index.html +++ b/files/ko/web/javascript/reference/classes/extends/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Classes/extends --- <div>{{jsSidebar("Classes")}}</div> -<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class" title="class declarations">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class" title="class expressions">class 식</a>에 사용됩니다.</p> +<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class">class 식</a>에 사용됩니다.</p> <p>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</p> diff --git a/files/ko/web/javascript/reference/errors/bad_octal/index.html b/files/ko/web/javascript/reference/errors/bad_octal/index.html index 8a4590e668..9336c7efc2 100644 --- a/files/ko/web/javascript/reference/errors/bad_octal/index.html +++ b/files/ko/web/javascript/reference/errors/bad_octal/index.html @@ -17,7 +17,7 @@ Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant. <h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2> -<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08<font face="Open Sans, Arial, sans-serif">과</font> 09<font face="Open Sans, Arial, sans-serif">는 허용되지 않기 때문에</font><font face="Open Sans, Arial, sans-serif"> </font></code>JavaScript는 경고를 띄웁니다. </p> +<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08</code>과 <code>09</code>는 허용되지 않기 때문에 JavaScript는 경고를 띄웁니다. </p> <p>8진 리터럴과 8진 escape sequence는 사라지고 추가적인 경고가 나타날 것임을 알아 두세요. ECMAScript 6와 그 이후 버전의 구문은, 맨 앞자리에 위치하는 <code>0</code>의 뒤에 소문자 또는 대문자의 라틴 문자 "O" 를 위치시키도록 합니다 (<code>0o</code> or <code>0O)</code>. 더 자세한 설명은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">lexical grammar</a> 페이지를 보세요.</p> diff --git a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html index 6ddeb58f06..00bf7059c4 100644 --- a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html +++ b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html @@ -21,11 +21,11 @@ RangeError: Invalid array buffer length (Chrome) <p>다음과 같은 원인 때문이다:</p> <ul> - <li>2<sup>32</sup>와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li> - <li>{{jsxref("Array")}} 속성을 2<sup>32</sup>와 같거나 이보다 긴 값으로 설정했기 때문이다.</li> + <li>2^32와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li> + <li>{{jsxref("Array")}} 속성을 2^32와 같거나 이보다 긴 값으로 설정했기 때문이다.</li> </ul> -<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2<sup>32</sup>-1 사이의 값만을 저장할 수 있다.</p> +<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2^32-1 사이의 값만을 저장할 수 있다.</p> <p>Array의 length로 해석되는 첫번째 argument로서 문자열 표기를 통해 contructor를 사용하여 Array를 생성할 수 있다.</p> diff --git a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html index 20e28cbe2b..119445c14b 100644 --- a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html +++ b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -21,7 +21,7 @@ RangeError: Invalid count value (Chrome) <p> {{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열을 반복하는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 그리고 이 파라메터는 0보다 커야하며, 양의 {{jsxref("Infinity")}} 보다 작아야 했으며, 음수는 허용되지 않았습니다. 이 값의 허용 범위는 이렇게 표현될 수 있습니다. : [0, +∞). </p> -<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>)입니다.</p> +<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2^28 -1 (<code>0xFFFFFFF</code>)입니다.</p> <h2 id="예">예</h2> diff --git a/files/ko/web/javascript/reference/functions/arguments/callee/index.html b/files/ko/web/javascript/reference/functions/arguments/callee/index.html index 182e88e9dc..1ae32b72ef 100644 --- a/files/ko/web/javascript/reference/functions/arguments/callee/index.html +++ b/files/ko/web/javascript/reference/functions/arguments/callee/index.html @@ -18,7 +18,7 @@ browser-compat: javascript.functions.arguments.callee <p><code>callee</code>는 <code>arguments</code> 객체의 속성입니다. 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서.</p> -<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div> +<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div> <h3 id="arguments.callee는_왜_ES5_엄격_모드에서_제거되었나요"><code>arguments.callee</code>는 왜 ES5 엄격 모드에서 제거되었나요?</h3> @@ -85,9 +85,9 @@ sillyFunction();</pre> <h3 id="익명_재귀_함수에서_arguments.callee_사용하기">익명 재귀 함수에서 <code>arguments.callee</code> 사용하기</h3> -<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function" title="Function constructor"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p> +<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p> -<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="named function expressions">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p> +<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p> <pre class="brush: js">function create() { return function(n) { diff --git a/files/ko/web/javascript/reference/functions/arguments/index.html b/files/ko/web/javascript/reference/functions/arguments/index.html index 98b5f1385b..3bebcf801b 100644 --- a/files/ko/web/javascript/reference/functions/arguments/index.html +++ b/files/ko/web/javascript/reference/functions/arguments/index.html @@ -51,7 +51,7 @@ arguments[2] var args = [].slice.call(arguments); </pre> -<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">전개 연산자</a>를 사용할 수도 있습니다.</p> +<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자</a>를 사용할 수도 있습니다.</p> <pre class="brush: js">var args = Array.from(arguments); var args = [...arguments]; @@ -119,7 +119,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <h3 id="나머지_기본_및_비구조화된_매개변수">나머지, 기본 및 비구조화된 매개변수</h3> -<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p> +<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p> <pre class="brush: js">function foo(...args) { return arguments; @@ -127,7 +127,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } </pre> -<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p> +<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p> <pre class="brush: js">function bar(a=1) { arguments[0] = 100; @@ -136,7 +136,7 @@ foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } bar(10); // 10 </pre> -<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p> +<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p> <pre class="brush: js">function zoo(a) { arguments[0] = 100; diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index a8eaa55b06..cb42f89ebc 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 --- <div>{{jsSidebar("Functions")}}</div> -<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expressions">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name" title="anonymous">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> +<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> <p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> @@ -36,11 +36,11 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 <pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음: <em>params</em> => ({<em>foo: bar</em>}) -// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameter">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameter">기본 매개변수</a>를 지원함 +// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>를 지원함 (<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } (<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } -// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring">구조분해할당</a>도 지원됨 +// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조분해할당</a>도 지원됨 var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 </pre> @@ -100,7 +100,7 @@ elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" <ul> <li>이 함수가 생성자인 경우는 새로운 객체</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li> <li>함수가 "객체 메서드"로서 호출된 경우 문맥 객체</li> <li>등등</li> </ul> @@ -133,7 +133,7 @@ var p = new Person();</pre> }, 1000); }</pre> -<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="bound function">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p> +<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p> <p>화살표 함수는 자신의 <code>this</code>가 없습니다. 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 <code>this</code>가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 <code>this</code>를 찾을 때, 화살표 함수는 바로 바깥 범위에서 <code>this</code>를 찾는것으로 검색을 끝내게 됩니다.</p> @@ -151,7 +151,7 @@ var p = new Person();</pre> <h4 id="엄격_모드와의_관계">엄격 모드와의 관계</h4> -<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> +<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> <pre class="notranslate">var f = () => { 'use strict'; return this; }; f() === window; // 혹은 전역객체</pre> @@ -260,7 +260,7 @@ function foo(n) { foo(1); // 2</code></pre> -<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> +<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> <pre class="brush: js notranslate">function foo(n) { var f = (...args) => args[0] + n; diff --git a/files/ko/web/javascript/reference/functions/get/index.html b/files/ko/web/javascript/reference/functions/get/index.html index 7307865f55..55d7765229 100644 --- a/files/ko/web/javascript/reference/functions/get/index.html +++ b/files/ko/web/javascript/reference/functions/get/index.html @@ -36,12 +36,12 @@ translation_of: Web/JavaScript/Reference/Functions/get <div> <ul> <li>숫자나 문자열로 구성된 식별자를 이용할 수 있습니다.</li> - <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li> + <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li> <li>하나의 객체 리터럴에 또다른 getter나 데이터 바인딩은 불가능합니다. (<code>{ get x() { }, get x() { } }</code> 나 <code>{ x: ..., get x() { } }</code> 는 사용할 수 없습니다.)</li> </ul> </div> -<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p> +<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p> <h2 id="예">예</h2> diff --git a/files/ko/web/javascript/reference/functions/index.html b/files/ko/web/javascript/reference/functions/index.html index 2052b67a93..22850ff865 100644 --- a/files/ko/web/javascript/reference/functions/index.html +++ b/files/ko/web/javascript/reference/functions/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Functions <p>JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> 객체입니다.</p> -<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수" title="JavaScript guide about functions">JavaScript 함수 안내서</a>를 참조하세요.</p> +<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수">JavaScript 함수 안내서</a>를 참조하세요.</p> <h2 id="설명">설명</h2> @@ -61,7 +61,7 @@ function myFunc(theObject) { <h3 id="함수_선언_function_문">함수 선언 (<code>function</code> 문)</h3> -<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조):</p> +<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">function 문</a> 참조):</p> <pre class="brush: js">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> @@ -85,7 +85,7 @@ function myFunc(theObject) { <h3 id="함수_표현식_function_식">함수 표현식 (<code>function</code> 식)</h3> -<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">function 식</a> 참조):</p> +<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 식</a> 참조):</p> <p>함수 표현식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> 참조). 함수 표현식은 더 큰 표현식의 일부일 수 있습니다. "이름이 붙은(named)"함수 표현식 (예 : 호출 스택에서 표현식 이름 사용하는경우) 또는 "익명"함수 표현식을 정의 할 수 있습니다. 함수 표현식은 선언이 되지 않은 상태에서 사용할 수 없기 때문에 함수를 사용하기 전에 코드에 함수코드가 존제해야 사용 할 수 있습니다.</p> @@ -106,7 +106,7 @@ function myFunc(theObject) { <dd>함수의 몸통을 구성하는 문.</dd> </dl> -<p>다음은 익명 함수 표현식의 예입니다 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">이름</span></font> 이 사용되지 않음):</p> +<p>다음은 익명 함수 표현식의 예입니다 (<code>이름</code> 이 사용되지 않음):</p> <pre class="brush: js"><code>var myFunction = function() { statements @@ -177,7 +177,7 @@ function myFunc(theObject) { <h3 id="화살표_함수_표현식_>">화살표 함수 표현식 (=>)</h3> -<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="arrow functions">화살표 함수</a> 참조):</p> +<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a> 참조):</p> <pre class="brush: js">([param[, param]]) => { statements @@ -247,11 +247,11 @@ param => expression <h3 id="기본_매개변수">기본 매개변수</h3> -<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 참조.</p> +<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a> 참조.</p> <h3 id="나머지_매개변수">나머지 매개변수</h3> -<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a> 참조.</p> +<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 참조.</p> <h2 id="arguments_객체"><code>arguments</code> 객체</h2> @@ -456,7 +456,7 @@ function a() { <h2 id="블록_레벨_함수">블록 레벨 함수</h2> -<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p> +<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p> <pre class="brush: js">'use strict'; @@ -490,7 +490,7 @@ f() === 1; // true <p>ES2015는 <code>shouldDefineZero</code>가 false인 경우, 그러면 <code>zero</code>는 결코 정의되어서는 안된다고 합니다, 그 블록이 실행된 적이 없기에. 그러나, 이는 표준의 새로운 일부입니다. 역사상, 이는 지정되지 않은 채 방치되었고 일부 브라우저는 블록이 실행됐든 아니든 <code>zero</code>를 정의할 겁니다.</p> -<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p> +<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p> <p>조건부 함수를 정의하는 더 안전한 방법은 function 식을 변수에 할당하는 것입니다:</p> @@ -592,5 +592,5 @@ result = padZeros(5,4); // 반환값 "0005" <li>{{jsxref("Functions/get", "getter")}}</li> <li>{{jsxref("Functions/set", "setter")}}</li> <li>{{jsxref("Functions/Method_definitions", "메서드 정의")}}</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수 및 함수 범위</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 및 함수 범위</a></li> </ul> diff --git a/files/ko/web/javascript/reference/functions/method_definitions/index.html b/files/ko/web/javascript/reference/functions/method_definitions/index.html index a7147e91ae..33768fcaa9 100644 --- a/files/ko/web/javascript/reference/functions/method_definitions/index.html +++ b/files/ko/web/javascript/reference/functions/method_definitions/index.html @@ -129,5 +129,5 @@ console.log(bar.foo2()); // 2</pre> <ul> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> </ul> diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.html b/files/ko/web/javascript/reference/functions/rest_parameters/index.html index 7af5e4ddb4..250b7c2931 100644 --- a/files/ko/web/javascript/reference/functions/rest_parameters/index.html +++ b/files/ko/web/javascript/reference/functions/rest_parameters/index.html @@ -42,11 +42,11 @@ myFun("one", "two", "three", "four", "five", "six"); <h3 id="Rest_파라미터_및_arguments_객체간_차이">Rest 파라미터 및 <code>arguments</code> 객체간 차이</h3> -<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p> +<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p> <ul> <li>Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, <code>arguments</code> 객체는 함수로 전달된 모든 인수를 포함합니다.</li> - <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li> + <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li> <li>즉 <code>arguments</code> 객체는 자체에 특정 추가 기능이 있습니다 (<code>callee</code> 속성처럼).</li> </ul> @@ -203,10 +203,10 @@ console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7 <h2 id="함께_보기">함께 보기</h2> <ul> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Spread 문법</a> (또한 ‘<code>...</code>’)</li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments 객체</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> - <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread 문법</a> (또한 ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments">Arguments 객체</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li> <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a></li> diff --git a/files/ko/web/javascript/reference/functions/set/index.html b/files/ko/web/javascript/reference/functions/set/index.html index 148e056c81..fcf58b0881 100644 --- a/files/ko/web/javascript/reference/functions/set/index.html +++ b/files/ko/web/javascript/reference/functions/set/index.html @@ -36,7 +36,7 @@ browser-compat: javascript.functions.set <div> <ul> <li>숫자혹은 문자로된 식별자를 가질 수 있다;</li> - <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li> + <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li> <li>오브젝트 리터럴에 동일한 property에 대한 다른 set나 데이터 항목이 올 수 없다.<br> ( <code>{ set x(v) { }, set x(v) { } }</code> 그리고 <code>{ x: ..., set x(v) { } }</code> 는 허용되지 않는다.)</li> </ul> @@ -58,7 +58,7 @@ browser-compat: javascript.functions.set } </pre> -<p><code><font face="Open Sans, Arial, sans-serif">다음 사항에 주의한다. </font>current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</code></p> +<p>다음 사항에 주의한다. current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</p> <h3 id="delete_operator로_setter를_제거하기"><code>delete</code> operator로 setter를 제거하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html index 7b1bda0ca6..2afaff4a63 100644 --- a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species <pre class="brush: js">Array[Symbol.species]; // function Array()</pre> -<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종<sup>species</sup>은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p> +<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종(species)은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p> <pre class="brush: js">class MyArray extends Array { // MyArray species를 부모 Array 생성자로 재설정 diff --git a/files/ko/web/javascript/reference/global_objects/array/array/index.html b/files/ko/web/javascript/reference/global_objects/array/array/index.html index 3f3d60a4ec..58fc5c5b6c 100644 --- a/files/ko/web/javascript/reference/global_objects/array/array/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/array/index.html @@ -25,7 +25,7 @@ new Array(<var>arrayLength</var>)</pre> <dt><code>element<em>N</em></code></dt> <dd>JavaScript 배열을 초기화할 때 채워넣을 요소. 단, 항목이 하나 뿐이며 그 항목의 자료형이 숫자일 경우 아래의 <code>arrayLength</code> 매개변수로 간주합니다.</dd> <dt><code>arrayLength</code></dt> - <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2<sup>32</sup>-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd> + <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2^32-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd> </dl> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/every/index.html b/files/ko/web/javascript/reference/global_objects/array/every/index.html index d67b5e4671..24a77ec494 100644 --- a/files/ko/web/javascript/reference/global_objects/array/every/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/every/index.html @@ -115,13 +115,13 @@ every(function callbackFn(element, index, array) { ... }, thisArg) </p> <p> - <code>every</code>는 (이산)수학에서 전칭(∀) 정량자<sup>quantifier</sup>(한정자)처럼 행동합니다. + <code>every</code>는 (이산)수학에서 전칭(∀) 정량자(quantifier, 한정자)처럼 행동합니다. 특히, 빈 배열에 대해서는 <code>true</code>를 반환합니다. (이는 <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">공집합</a>의 모든 요소가 어떠한 주어진 조건도 만족하는 <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics" - title="vacuously true" + >공허한 참</a >입니다.) </p> diff --git a/files/ko/web/javascript/reference/global_objects/array/fill/index.html b/files/ko/web/javascript/reference/global_objects/array/fill/index.html index 5a18af7d24..04b50db326 100644 --- a/files/ko/web/javascript/reference/global_objects/array/fill/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/fill/index.html @@ -16,11 +16,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>value</code></dt> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p>변형한 배열.</p> -<h2 id="Description" name="Description">설명 </h2> +<h2 id="Description">설명 </h2> <p><code>fill</code> 메서드는 <code>value</code>, <code>start</code>, <code>end</code>의 3개 인자를 가집니다. <code>start</code>와 <code>end</code> 인자는 선택 사항으로써 기본값으로 각각 <code>0</code>과, <code>this</code> 객체의 <code>length</code>를 가집니다.</p> @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill <p><code>value</code>에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] @@ -65,7 +65,7 @@ var arr = Array(3).fill({}); // [{}, {}, {}] arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> <pre><code>if (!Array.prototype.fill) { Object.defineProperty(Array.prototype, 'fill', { @@ -112,7 +112,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] }); }</code></pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -134,7 +134,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.Array.fill")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/array/filter/index.html b/files/ko/web/javascript/reference/global_objects/array/filter/index.html index 9d1b623fd0..fe48a1146f 100644 --- a/files/ko/web/javascript/reference/global_objects/array/filter/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/filter/index.html @@ -153,7 +153,7 @@ console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre> <h2 id="폴리필">폴리필</h2> -<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>filter</code>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>filter</code>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">if (!Array.prototype.filter){ Array.prototype.filter = function(func, thisArg) { diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.html b/files/ko/web/javascript/reference/global_objects/array/find/index.html index 92a0208a6b..3b9215f0fd 100644 --- a/files/ko/web/javascript/reference/global_objects/array/find/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/find/index.html @@ -9,6 +9,7 @@ tags: - Prototype - Reference - polyfill +browser-compat: javascript.builtins.Array.find translation_of: Web/JavaScript/Reference/Global_Objects/Array/find --- <div>{{JSRef}}</div> @@ -212,9 +213,7 @@ if (!Array.prototype.find) { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.find")}}</div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html index 809bc4d269..943cbf0064 100644 --- a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach <dt><code>index</code> {{optional_inline}}</dt> <dd>처리할 현재 요소의 인덱스.</dd> <dt><code>array</code> {{optional_inline}}</dt> - <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">forEach()</span></font>를 호출한 배열.</dd> + <dd><code>forEach()</code>를 호출한 배열.</dd> </dl> </dd> <dt><code>thisArg</code> {{optional_inline}}</dt> @@ -61,7 +61,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach <p><code>forEach()</code>로 처리할 요소의 범위는 최초 <code>callback</code> 호출 전에 설정됩니다. <code>forEach()</code> 호출을 시작한 뒤 배열에 추가한 요소는 <code>callback</code>이 방문하지 않습니다. 배열의 기존 요소값이 바뀐 경우, <code>callback</code>에 전달하는 값은 <code>forEach()</code>가 요소를 방문한 시점의 값을 사용합니다. 방문하기 전에 삭제한 요소는 방문하지 않습니다.</p> -<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용<sup>side effect</sup>을 실행하는 겁니다.</p> +<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용(side effect)을 실행하는 겁니다.</p> <p><code>forEach()</code>는 배열을 변형하지 않습니다. 그러나 <code>callback</code>이 변형할 수는 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.html b/files/ko/web/javascript/reference/global_objects/array/from/index.html index 537384cf56..1f0a5776ba 100644 --- a/files/ko/web/javascript/reference/global_objects/array/from/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/from/index.html @@ -18,12 +18,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/from -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]]) </pre> -<h3 id="Parameters" name="Parameters"><span>매개변수</span></h3> +<h3 id="Parameters"><span>매개변수</span></h3> <dl> <dt><code>arrayLike</code></dt> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/from <p>새로운 {{jsxref("Array")}} 인스턴스.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>다음과 같은 경우에 <code>Array.from()</code>으로새<code>Array</code>를 만들 수 있습니다.</p> @@ -126,7 +126,7 @@ range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x <h2 id="폴리필">폴리필</h2> -<p><code><font face="consolas, Liberation Mono, courier, monospace">Array.from</font></code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을 사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object" title="객체(object) 생성자(constructor)는 객체 레퍼(wrapper)를 생성합니다."><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다.<span style="letter-spacing: -0.00278rem;">또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</span></p> +<p><code>Array.from</code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을 사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다. 또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</p> <pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 if (!Array.from) { @@ -235,7 +235,7 @@ if (!Array.from) { <p>{{Compat("javascript.builtins.Array.from")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/includes/index.html b/files/ko/web/javascript/reference/global_objects/array/includes/index.html index a646fd3bb4..6efcd759d6 100644 --- a/files/ko/web/javascript/reference/global_objects/array/includes/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/includes/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes <h3 id="매개변수">매개변수</h3> <dl> - <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font></dt> + <dt><code>valueToFind</code></dt> <dd>탐색할 요소. <div class="blockIndicator note"> <p><strong>참고</strong>: 문자나 문자열을 비교할 때, <code>includes()</code>는 <strong>대소문자를 구분</strong>합니다.</p> @@ -60,7 +60,7 @@ arr.includes('c', 100); // false</pre> <h3 id="0보다_작은_인덱스의_계산">0보다 작은 인덱스의 계산</h3> -<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p> +<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <code>valueToFind</code> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p> <pre class="brush: js">// array length is 3 // fromIndex is -100 diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.html b/files/ko/web/javascript/reference/global_objects/array/length/index.html index b241e88045..2a0a48b3d1 100644 --- a/files/ko/web/javascript/reference/global_objects/array/length/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/length/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/length <h2 id="설명">설명</h2> -<p><code>length</code> 속성의 값은 양의 정수이며 2<sup>32</sup> 미만의 값을 가집니다.</p> +<p><code>length</code> 속성의 값은 양의 정수이며 2^32 미만의 값을 가집니다.</p> <pre class="brush: js line-numbers language-js">var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296 var namelistC = new Array(-100) // 음수 diff --git a/files/ko/web/javascript/reference/global_objects/array/map/index.html b/files/ko/web/javascript/reference/global_objects/array/map/index.html index b3f494a8e3..92b0776460 100644 --- a/files/ko/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/map/index.html @@ -17,11 +17,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><code><var>arr</var>.map(<var>callback(currentValue</var>[, index[, array]])[, <var>thisArg</var>])</code></pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>callback</code></dt> @@ -44,13 +44,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>배열의 각 요소에 대해 실행한 <code>callback</code>의 결과를 모은 새로운 배열.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>map</code>은 <code>callback</code> 함수를 <strong>각각의 요소에 대해 한번씩 </strong>순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. <code>callback</code> 함수는 ({{jsxref("undefined")}}도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.</p> -<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열<span style="font-family: courier,andale mono,monospace;"> </span>3개의 인수를 전달받습니다.</p> +<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열 3개의 인수를 전달받습니다.</p> -<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다.<font face="Consolas, Liberation Mono, Courier, monospace"> </font><code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p> +<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다. <code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p> <p><code>map</code>은 호출한 배열의 값을 변형하지 않습니다. 단, <code>callback</code> 함수에 의해서 변형될 수는 있습니다.</p> @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>명세서에 정의된 알고리즘으로 인해 <code>map</code>을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기</h3> @@ -158,9 +158,9 @@ function returnInt(element) { ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> -<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">map</span></font>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>map</code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 // Reference: http://es5.github.io/#x15.4.4.19 @@ -253,7 +253,7 @@ if (!Array.prototype.map) { } </pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <tbody> @@ -280,11 +280,11 @@ if (!Array.prototype.map) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.Array.map")}}</div> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array.prototype.forEach()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/of/index.html b/files/ko/web/javascript/reference/global_objects/array/of/index.html index 9504e986ab..6aeba4a566 100644 --- a/files/ko/web/javascript/reference/global_objects/array/of/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/of/index.html @@ -22,11 +22,11 @@ Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3] </pre> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>element<em>N</em></code></dt> @@ -37,18 +37,18 @@ Array(1, 2, 3); // [1, 2, 3] <p>새로운 {{jsxref("Array")}} 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code>, <code>Array.from</code> 제안 사항</a>과 <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> 폴리필</a>에서 확인하실 수 있습니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">Array.of(1); // [1] Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] </pre> -<h2 id="Polyfill" name="Polyfill">폴리필</h2> +<h2 id="Polyfill">폴리필</h2> <p>아래 코드를 다른 코드 이전에 포함하면 <code>Array.of</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p> @@ -59,7 +59,7 @@ Array.of(undefined); // [undefined] } </pre> -<h2 id="Specifications" name="Specifications">명세</h2> +<h2 id="Specifications">명세</h2> <table class="standard-table"> <thead> @@ -93,7 +93,7 @@ Array.of(undefined); // [undefined] <p>{{Compat("javascript.builtins.Array.of")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Array")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html index bd3516865e..ead8d56505 100644 --- a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce <p><strong>리듀서</strong> 함수는 네 개의 인자를 가집니다.</p> <ol> - <li>누산기<sup>accumulator</sup> (acc)</li> + <li>누산기 (acc)</li> <li>현재 값 (cur)</li> <li>현재 인덱스 (idx)</li> <li>원본 배열 (src)</li> @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce <dd> <dl> <dt><code>accumulator</code></dt> - <dd>누산기<sup>accmulator</sup>는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd> + <dd>누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd> <dt><code>currentValue</code></dt> <dd>처리할 현재 요소.</dd> <dt><code>currentIndex</code> {{optional_inline}}</dt> @@ -260,7 +260,7 @@ var sum = [{x: 1}, {x:2}, {x:3}].reduce( console.log(sum) // logs 6</pre> -<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기<sup>flatten</sup></h3> +<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기</h3> <pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(accumulator, currentValue) { diff --git a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html index 95b4c1a348..d9b08aaa8c 100644 --- a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html @@ -6,6 +6,7 @@ tags: - JavaScript - Method - Prototype +browser-compat: javascript.builtins.Array.reverse translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse --- <div>{{JSRef}}</div> @@ -72,11 +73,7 @@ console.log(a); // [3, 2, 1]</code></pre> <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.reverse")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/array/some/index.html b/files/ko/web/javascript/reference/global_objects/array/some/index.html index 8fbe19bcda..38283bdd1b 100644 --- a/files/ko/web/javascript/reference/global_objects/array/some/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/some/index.html @@ -130,7 +130,7 @@ getBoolean('true'); // true</pre> <h2 id="폴리필">폴리필</h2> -<p><code><font face="consolas, Liberation Mono, courier, monospace">some</font></code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> +<p><code>some</code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p> <pre class="brush: js">// ECMA-262 5판, 15.4.4.17항의 작성 과정 // 출처: http://es5.github.io/#x15.4.4.17 diff --git a/files/ko/web/javascript/reference/global_objects/array/sort/index.html b/files/ko/web/javascript/reference/global_objects/array/sort/index.html index ddab9a428f..376c9afd96 100644 --- a/files/ko/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ko/web/javascript/reference/global_objects/array/sort/index.html @@ -6,6 +6,7 @@ tags: - JavaScript - Method - Prototype +browser-compat: javascript.builtins.Array.sort translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort --- <div>{{JSRef}}</div> @@ -233,9 +234,7 @@ var result = mapped.map(function(el){ <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Array.sort")}}</div> - -<div id="compat-mobile"></div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html index 8b5b0cd361..0b62cc1857 100644 --- a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html @@ -92,6 +92,6 @@ const view = new Int32Array(buffer);</pre> <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> <li>{{jsxref("SharedArrayBuffer")}}</li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html index c68d5e0ef3..c8ce643216 100644 --- a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html +++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html @@ -72,5 +72,5 @@ ArrayBuffer.isView(dv); // true <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li> + <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html index dae782e412..52e4f2e886 100644 --- a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html @@ -36,9 +36,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction <div class="note"> <p><strong>주의:</strong> <code>AsyncFunction</code> 생성자로 만들어진 {{jsxref("Statements/async_function", "async functions")}} 객체는 클로저를 생성 컨텍스트에 만들지 않는다; 이 객체들은 항상 전역 범위에서 생성됩니다. </p> -<p><font><font>이객체들을 실행할 때, </font></font><code>AsyncFunction</code><font><font>생성자가 호출 </font><font>된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다 </font><font>.</font></font></p> +<p>이 객체들을 실행할 때, <code>AsyncFunction</code>생성자가 호출된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다.</p> -<p><font><font>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects / eval", "eval")}}을 사용하는 것과 다릅니다.</font></font></p> +<p>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects/eval", "eval")}}을 사용하는 것과 다릅니다.</p> </div> <p><code>AsyncFunction</code> 생성자를 (<code>new</code> 연산자를 사용하지 않고) 함수로 호출하는 것과 생성자로 동작시키는 것은 동일하다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/index.html index 22ce105c2e..d562b2cdbc 100644 --- a/files/ko/web/javascript/reference/global_objects/bigint/index.html +++ b/files/ko/web/javascript/reference/global_objects/bigint/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt --- <div>{{JSRef}}</div> -<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2<sup>53</sup> - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p> +<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p> <h2 id="설명">설명</h2> @@ -179,9 +179,9 @@ Boolean(12n) <dl> <dt>{{jsxref("BigInt.asIntN()")}}</dt> - <dd>주어진 <code>BigInt</code>를 <code>-2<sup>width-1</sup></code>과 <code>2<sup>width-1</sup> - 1</code>의 범위로 자릅니다.</dd> + <dd>주어진 <code>BigInt</code>를 <code>-2^(width - 1)</code>과 <code>2^(width - 1) - 1</code>의 범위로 자릅니다.</dd> <dt>{{jsxref("BigInt.asUintN()")}}</dt> - <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2<sup>width</sup> - 1</code>의 범위로 자릅니다.</dd> + <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2^width - 1</code>의 범위로 자릅니다.</dd> </dl> <h2 id="인스턴스_메서드">인스턴스 메서드</h2> @@ -199,7 +199,7 @@ Boolean(12n) <h3 id="변환">변환</h3> -<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2<sup>53</sup>보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p> +<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2^53보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p> <h3 id="암호화">암호화</h3> diff --git a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html index fdacc321cf..e669ebb1ae 100644 --- a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <h3 id="getDate()_사용하기"><code>getDate()</code> 사용하기</h3> -<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">day</span></font>에 2를 할당합니다.</p> +<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <code>day</code>에 2를 할당합니다.</p> <pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); var day = Xmas95.getDate(); diff --git a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html index 48fe002a99..d4bcf4b613 100644 --- a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html @@ -86,7 +86,7 @@ console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); <p>{{Compat("javascript.builtins.Date.getMonth")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html index 1ded363e99..d8eaec04b9 100644 --- a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html +++ b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html @@ -1,6 +1,7 @@ --- title: Date.prototype.toDateString() slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString +browser-compat: javascript.builtins.Date.toDateString translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString --- <div>{{JSRef}}</div> @@ -67,11 +68,7 @@ console.log(d.toDateString()); // logs Wed Jul 28 1993 <h2 id="브라우저_호환성">브라우저 호환성</h2> -<p>{{Compat("javascript.builtins.Date.toDateString")}}</p> - -<div> </div> - -<div id="compat-mobile"> </div> +<p>{{Compat}}</p> <h2 id="See_also">See also</h2> diff --git a/files/ko/web/javascript/reference/global_objects/error/index.html b/files/ko/web/javascript/reference/global_objects/error/index.html index b82f5dbbea..70b5662564 100644 --- a/files/ko/web/javascript/reference/global_objects/error/index.html +++ b/files/ko/web/javascript/reference/global_objects/error/index.html @@ -17,7 +17,7 @@ browser-compat: javascript.builtins.Error 아래 표준 내장 오류 유형을 참고하세요. </p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>런타임 오류는 새로운 <code>Error</code> 객체를 생성하고 던집니다.</p> @@ -129,7 +129,7 @@ browser-compat: javascript.builtins.Error </dd> </dl> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example:_Throwing_a_generic_error" @@ -281,7 +281,7 @@ try { } </pre> -<h2 id="Specification" name="Specification">명세</h2> +<h2 id="Specification">명세</h2> {{Specifications}} @@ -289,7 +289,7 @@ try { <p>{{Compat}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Error.prototype")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/eval/index.html b/files/ko/web/javascript/reference/global_objects/eval/index.html index f7acb577ce..52ec8665e2 100644 --- a/files/ko/web/javascript/reference/global_objects/eval/index.html +++ b/files/ko/web/javascript/reference/global_objects/eval/index.html @@ -122,7 +122,7 @@ console.log(runCodeWithDateFunction( <p>위 코드는 삼중 중첩 함수를 사용하기 때문에 매우 비효율적으로 보일 수 있지만, 이 방법의 이점을 우선 살펴봅시다.</p> -<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화<sup>minify</sup>할 수 있다.</p> +<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화할 수 있다.</p> <p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p> @@ -147,7 +147,7 @@ var propname = getPropName(); // "a" 또는 "b"를 반환 eval( "var result = obj." + propname ); </pre> -<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">속성 접근자</a>를 사용하여야 합니다.</p> +<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용하여야 합니다.</p> <pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; var propname = getPropName(); // "a" 또는 "b"를 반환 @@ -200,21 +200,21 @@ setTimeout(function() { ... }, 1000); // elt.setAttribute("onclick", "...") 대신에 elt.addEventListener("click", function() { ... } , false); </pre> -<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p> +<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p> <h3 id="JSON_파싱_문자열을_JavaScript_객체로_변환">JSON 파싱 (문자열을 JavaScript 객체로 변환)</h3> -<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p> +<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p> -<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시 따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기<sup>JSON serializer</sup>를 사용하여야 합니다.</p> +<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시 따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기를 사용하여야 합니다.</p> <h3 id="코드_대신_데이터_전달하기">코드 대신 데이터 전달하기</h3> -<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath" title="XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p> +<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p> <h3 id="제한된_권한으로_코드_실행하기">제한된 권한으로 코드 실행하기</h3> -<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p> +<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p> <h2 id="예제">예제</h2> @@ -268,9 +268,7 @@ var fct1 = eval(fctStr1) // undefined를 반환 var fct2 = eval(fctStr2) // 함수를 반환 </pre> -<h2 id="sect1"></h2> - -<h2 id="브라우저_호환성"><span style="">브라우저 호환성</span></h2> +<h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("javascript.builtins.eval")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/function/apply/index.html b/files/ko/web/javascript/reference/global_objects/function/apply/index.html index 2c437e1f24..8232d9444e 100644 --- a/files/ko/web/javascript/reference/global_objects/function/apply/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/apply/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply <p>지정한 <strong><code>this</code></strong> 값과 인수들로 호출한 함수의 결과.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>이미 존재하는 함수를 호출할 때 다른 <code>this</code> 객체를 할당할 수 있습니다. <code>this</code> 는 현재 객체, 호출하는 객체를 참조합니다. <code>apply</code> 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.</p> @@ -51,7 +51,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply <div class="blockIndicator note">Chrome 14와 Internet Explorer 9를 포함한 대부분의 브라우저는 아직 유사배열객체를 apply에 사용할 수 없으며 오류가 출력됩니다.</div> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">배열에 배열을 붙이기 위해 <code>apply</code> 사용하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/function/bind/index.html b/files/ko/web/javascript/reference/global_objects/function/bind/index.html index d4d0b79681..c55cda7bc5 100644 --- a/files/ko/web/javascript/reference/global_objects/function/bind/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/bind/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind <dl> <dt><code>thisArg</code></dt> - <dd>바인딩<span style="font-size: 13.3333px;"> </span>함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면 실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd> + <dd>바인딩 함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면 실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd> <dt><code>arg1, arg2, ...</code></dt> <dd>대상 함수의 인수 앞에 사용될 인수.</dd> </dl> @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind <h2 id="설명">설명</h2> -<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체<sup>exotic function object</sup>입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p> +<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체(exotic function object)입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p> <p>바인딩한 함수는 다음과 같은 내부 속성을 가지고 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/function/index.html b/files/ko/web/javascript/reference/global_objects/function/index.html index 5d7dde941a..4eea5145e5 100644 --- a/files/ko/web/javascript/reference/global_objects/function/index.html +++ b/files/ko/web/javascript/reference/global_objects/function/index.html @@ -76,7 +76,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function <dt>{{jsxref("Function.prototype.call()")}}</dt> <dd>함수를 호출(실행)하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 그대로 전달될 수 있습니다.</dd> <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="generator">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd> + <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd> <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toSource")}} 메서드를 재정의(override)합니다.</dd> <dt>{{jsxref("Function.prototype.toString()")}}</dt> diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html index a768a8bb5d..2ea2c72bcb 100644 --- a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale <p>Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.</p> -<p><span style="">The Intl.Locale object has the following properties and methods:</span></p> +<p>The Intl.Locale object has the following properties and methods:</p> <h3 id="Properties">Properties</h3> diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.html b/files/ko/web/javascript/reference/global_objects/isnan/index.html index a6fed21075..0e76c007d7 100644 --- a/files/ko/web/javascript/reference/global_objects/isnan/index.html +++ b/files/ko/web/javascript/reference/global_objects/isnan/index.html @@ -5,6 +5,7 @@ tags: - JavaScript - Method - Reference +browser-compat: javascript.builtins.isNaN translation_of: Web/JavaScript/Reference/Global_Objects/isNaN --- <div>{{jsSidebar("Objects")}}</div> @@ -180,7 +181,7 @@ isNaN() == isNaN(Number()) // 거짓, isNaN() == true 및 Number() == 0 때문 <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.builtins.isNaN")}}</div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/math/exp/index.html b/files/ko/web/javascript/reference/global_objects/math/exp/index.html index 567b8d68ab..3582752142 100644 --- a/files/ko/web/javascript/reference/global_objects/math/exp/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/exp/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp --- <div>{{JSRef}}</div> -<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e<sup>x</sup></code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p> +<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e^x</code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p> <div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div> @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp <h3 id="반환_값">반환 값</h3> -<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e<sup>x</sup></code>값</p> +<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e^x</code>값</p> <h2 id="Description">Description</h2> diff --git a/files/ko/web/javascript/reference/global_objects/math/index.html b/files/ko/web/javascript/reference/global_objects/math/index.html index 1bc5902a01..498d413491 100644 --- a/files/ko/web/javascript/reference/global_objects/math/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/index.html @@ -82,7 +82,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} </dt> <dd>숫자의 쌍곡코사인 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> - <dd>E<sup>x</sup> 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd> + <dd>E^x 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd> <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} </dt> <dd><code>exp(x)</code>에서 <code>1</code>을 뺀 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> @@ -94,9 +94,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} </dt> <dd>두 32비트 정수의 곱을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> - <dd>숫자의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dd>숫자의 자연로그(e를 밑으로 하는 로그, 즉 ln) 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} </dt> - <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd> + <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(e를 밑으로 하는 로그, ln) 값을 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} </dt> <dd>숫자의 밑이 10인 로그를 반환합니다.</dd> <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} </dt> diff --git a/files/ko/web/javascript/reference/global_objects/math/log2/index.html b/files/ko/web/javascript/reference/global_objects/math/log2/index.html index 86d4f9f3db..12534d1c94 100644 --- a/files/ko/web/javascript/reference/global_objects/math/log2/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/log2/index.html @@ -61,7 +61,7 @@ browser-compat: javascript.builtins.Math.log2 <h3 id="Return_value">반환 값</h3> <p> - 주어진 숫자는 log<sub>2</sub>(숫자)로 계산합니다. 만약 숫자가 + 주어진 숫자를 진수로, 2를 밑으로 하는 로그 계산 결과입니다. 만약 숫자가 음수라면 {{jsxref("NaN")}}를 반환합니다. </p> @@ -81,7 +81,7 @@ browser-compat: javascript.builtins.Math.log2 <p>이 함수는 Math.log(x) / Math.log(2)와 같습니다.</p> -<p>따라서 log<sub>2</sub>(e)는 {{jsxref("Math.LOG2E")}}와 같습니다. </p> +<p>따라서 <code>log2(e)</code>는 {{jsxref("Math.LOG2E")}}와 같습니다. </p> <p>그리고 위 함수는 1 / {{jsxref("Math.LN2")}}과 같습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/math/pow/index.html b/files/ko/web/javascript/reference/global_objects/math/pow/index.html index 55ea3aa26a..78d729e70e 100644 --- a/files/ko/web/javascript/reference/global_objects/math/pow/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/pow/index.html @@ -11,7 +11,7 @@ browser-compat: javascript.builtins.Math.pow <div>{{JSRef}}</div> -<strong><code>Math.pow()</code></strong>함수는<code>base<sup>exponent</sup></code>처럼 +<strong><code>Math.pow()</code></strong>함수는<code>base^exponent</code>처럼 <code><var>base</var></code> 에 <code><var>exponent</var></code>를 제곱한 값을 반환합니다. <div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div> @@ -44,7 +44,7 @@ browser-compat: javascript.builtins.Math.pow <p> <strong><code>Math.pow()</code></strong>함수는 <code><var>base</var></code>의 <code><var>exponent</var></code> - 곱, 즉 <code>base<sup>exponent</sup></code>를 반환합니다. + 곱, 즉 <code>base^exponent</code>를 반환합니다. <code><var>base</var></code>와 <code><var>exponent</var></code>는 10진수입니다. </p> diff --git a/files/ko/web/javascript/reference/global_objects/math/random/index.html b/files/ko/web/javascript/reference/global_objects/math/random/index.html index 2aead8d88a..d030685609 100644 --- a/files/ko/web/javascript/reference/global_objects/math/random/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/random/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/random <h3 id="Math.random_사용"><code>Math.random()</code> 사용</h3> -<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2<sup>53</sup> 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p> +<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2^53 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p> <h3 id="0_이상_1_미만의_난수_생성하기">0 이상 1 미만의 난수 생성하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/math/sign/index.html b/files/ko/web/javascript/reference/global_objects/math/sign/index.html index 1a6697e9d8..0d62073b89 100644 --- a/files/ko/web/javascript/reference/global_objects/math/sign/index.html +++ b/files/ko/web/javascript/reference/global_objects/math/sign/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign <h3 id="반환_값">반환 값</h3> -<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p> +<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <code>1</code>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p> <h2 id="설명">설명</h2> diff --git a/files/ko/web/javascript/reference/global_objects/nan/index.html b/files/ko/web/javascript/reference/global_objects/nan/index.html index 4e6e3a8c42..e2e4aa9bac 100644 --- a/files/ko/web/javascript/reference/global_objects/nan/index.html +++ b/files/ko/web/javascript/reference/global_objects/nan/index.html @@ -17,11 +17,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/NaN -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>NaN</code>은 전역 객체의 속성입니다. 즉 전역 스코프의 변수입니다.</p> -<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code style="font-style: normal;">NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p> +<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code>NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p> <p><code>NaN</code>을 반환하는 연산에는 다섯 가지 종류가 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html index 730fd8ae87..9ce1f1f503 100644 --- a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON <h2 id="설명">설명</h2> -<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2<sup>-52</sup></code>의 값을 갖습니다.</p> +<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2^-52</code>의 값을 갖습니다.</p> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/number/index.html b/files/ko/web/javascript/reference/global_objects/number/index.html index 2a2592dcc8..84b12f0926 100644 --- a/files/ko/web/javascript/reference/global_objects/number/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number --- <div>{{JSRef}}</div> -<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼<sup>wrapper</sup> 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p> +<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p> <h2 id="구문">구문</h2> @@ -41,11 +41,11 @@ var <em>b</em> = Number('123'); // b === 123은 true <dt>{{jsxref("Number.EPSILON")}}</dt> <dd>두 개의 표현 가능한 숫자 사이의 최소 간격.</dd> <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt> - <dd>JavaScript에서 안전한 최대 정수. (<code>2<sup>53</sup> - 1</code>)</dd> + <dd>JavaScript에서 안전한 최대 정수. (<code>2^53 - 1</code>)</dd> <dt>{{jsxref("Number.MAX_VALUE")}}</dt> <dd>표현 가능한 가장 큰 양수.</dd> <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt> - <dd>JavaScript에서 안전한 최소 정수. (<code>-(2<sup>53</sup> - 1)</code>)</dd> + <dd>JavaScript에서 안전한 최소 정수. (<code>-(2^53 - 1)</code>)</dd> <dt>{{jsxref("Number.MIN_VALUE")}}</dt> <dd>표현 가능한 가장 작은 양수. 즉, 0보다 크지만 0에 가장 가까운 양수.</dd> <dt>{{jsxref("Number.NaN")}}</dt> @@ -68,7 +68,7 @@ var <em>b</em> = Number('123'); // b === 123은 true <dt>{{jsxref("Number.isInteger()")}}</dt> <dd>주어진 값이 정수인지 확인합니다.</dd> <dt>{{jsxref("Number.isSafeInteger()")}}</dt> - <dd>주어진 값이 안전한 정수(<code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 정수)인지 확인합니다.</dd> + <dd>주어진 값이 안전한 정수(<code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 정수)인지 확인합니다.</dd> <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> <dd><s class="obsoleteElement">전달 된 값을 평가하고 이를 정수(혹은 {{jsxref("Infinity", "Infinity")}})로 변환하는데 사용되지만, 제거되었습니다.</s></dd> <dt>{{jsxref("Number.parseFloat()")}}</dt> diff --git a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html index 8c1af0e54d..b02cdc3a97 100644 --- a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -24,9 +24,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <li>IEEE-754 표현에 맞게 반올림하는 다른 정수의 결과가 아닌 IEEE-754 표현.</li> </ul> -<p>예를 들어, <code>2<sup>53</sup> - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2<sup>53</sup></code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2<sup>53</sup> + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2<sup>53 </sup></code>을 반올림합니다.</p> +<p>예를 들어, <code>2^53 - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2^53</code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2^53 + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2^53</code>을 반올림합니다.</p> -<p>안전한 정숫값은 <code>-(2<sup>53</sup> - 1)</code> 부터 <code>2<sup>53</sup> - 1</code> 사이의 모든 정수값으로 구성됩니다.</p> +<p>안전한 정숫값은 <code>-(2^53 - 1)</code> 부터 <code>2^53 - 1</code> 사이의 모든 정수값으로 구성됩니다.</p> <h2 id="구문">구문</h2> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html index dde69dc41f..428e6b255e 100644 --- a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER --- <div>{{JSRef}}</div> -<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2<sup>53</sup> - 1</code>).</p> +<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2^53 - 1</code>).</p> <div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER <h2 id="설명">설명</h2> -<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> +<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> <p>여기서의 안전함이란 정수를 정확하고 올바르게 비교할 수 있음을 의미합니다. 예를 들어 <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code>는 참으로 평가되며 이는 수학적으로 올바르지 않습니다. 더 자세한 내용은 {{jsxref("Number.isSafeInteger()")}}를 참고하세요.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html index c80ae8f84a..04e389620b 100644 --- a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE <h2 id="설명">설명</h2> -<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2<sup>1024</sup>입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p> +<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2^1024입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p> <p><code>MAX_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_VALUE</code> 형식으로 사용해야 합니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html index 38ef0f9484..32e7172a66 100644 --- a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER --- <div>{{JSRef}}</div> -<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2<sup>53</sup> - 1)</code>)</p> +<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2^53 - 1)</code>)</p> <div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER <h2 id="설명">설명</h2> -<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> +<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2^53 - 1)</code>과 <code>2^53 - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p> <p><code>MIN_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html index b1012fcdbf..a9aacad926 100644 --- a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -29,10 +29,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY <li>{{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 포함한 아무 음의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> <li>아무 양의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 0입니다.</li> <li>아무 음의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li> - <li>0을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY</span></font>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> + <li>0을 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> <li>{{jsxref("NaN")}}에 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li> <li><code>POSITIVE_INFINITY</code>를, {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li> - <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY<code>를</code></span></font>, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> + <li><code>POSITIVE_INFINITY</code>를, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li> <li><code>POSITIVE_INFINITY</code>를 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} 또는 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html index 344fa96ca2..a2fc8d883d 100644 --- a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html +++ b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf --- <div>{{JSRef}}</div> -<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼<sup>wrapped</sup> {{Glossary("primitive", "원시")}} 값을 반환합니다.</p> +<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼(wrapped) {{Glossary("primitive", "원시")}} 값을 반환합니다.</p> <div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/object/assign/index.html b/files/ko/web/javascript/reference/global_objects/object/assign/index.html index 71f17c01b9..31d545dd4f 100644 --- a/files/ko/web/javascript/reference/global_objects/object/assign/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/assign/index.html @@ -11,8 +11,8 @@ tags: - 객체 - 레퍼런스 - 메소드 -translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign browser-compat: javascript.builtins.Object.assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign --- <div>{{JSRef}}</div> @@ -99,7 +99,7 @@ const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } </pre> -<h3 id="Deep_Clone" name="Deep_Clone">깊은 복사에 대한 주의사항</h3> +<h3 id="Deep_Clone">깊은 복사에 대한 주의사항</h3> <p>깊은 복사를 위해서는, 다른 방법을 사용해야 합니다. 왜냐하면 <code>Object.assign()</code> 은 속성 값을 복사하기 때문입니다.</p> @@ -140,7 +140,7 @@ test();</pre> const o2 = { b: 2 }; const o3 = { c: 3 }; -<!-- const obj = Object.assign(o1, o2, o3); --> +const obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.</pre> diff --git a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html index 0162140d9c..b4662df8be 100644 --- a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html @@ -7,6 +7,7 @@ tags: - Property - Prototype - Reference +browser-compat: javascript.builtins.Object.constructor translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor --- <div>{{JSRef}}</div> @@ -150,6 +151,4 @@ function String() { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div>{{Compat("javascript.builtins.Object.constructor")}}</div> - -<div id="compat-mobile"> </div> +<div>{{Compat}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/object/create/index.html b/files/ko/web/javascript/reference/global_objects/object/create/index.html index 1d8873600c..730ecbbdf0 100644 --- a/files/ko/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/create/index.html @@ -88,7 +88,7 @@ MyClass.prototype.myMethod = function() { <p><code>mixin</code> 함수는 상위(super)클래스 프로토타입에서 하위(sub)클래스 프로토타입으로 함수를 복사하고, mixin 함수는 사용자에 의해 공급될 필요가 있습니다. mixin 같은 함수의 예는 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a>입니다.</p> -<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()<font face="Open Sans, Arial, sans-serif">와 함께 </font></code><code>propertiesObject</code> 인수 사용하기</h3> +<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()</code>와 함께 <code>propertiesObject</code> 인수 사용하기</h3> <pre class="brush: js">var o; diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html index 0d4a803316..bf3dabffdd 100644 --- a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -42,9 +42,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty <h2 id="설명">설명</h2> -<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거<sup>enumeration</sup>({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p> +<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p> -<p>속성 서술자<sup>property descriptors</sup>는 객체로 나타내며 데이터 서술자<sup>data descriptors</sup>와 접근자 서술자<sup>accessor descriptors</sup>의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자<sup>getter</sup>-설정자<sup>setter</sup> 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p> +<p>속성 서술자는 객체로 나타내며 데이터 서술자(data descriptors)와 접근자 서술자(accessor descriptors)의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자(getter)-설정자(setter) 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p> <p>데이터 서술자와 접근자 서술자 모두 객체이며 다음과 같은 키를 공유합니다.</p> @@ -286,7 +286,7 @@ delete o.a; // Nothing happens console.log(o.a); // logs 1 </pre> -<p><font face="Courier New">o.a</font>의 <font face="Courier New">configurable</font> 가 <font face="Courier New">true</font>라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p> +<p>o.a의 configurable 가 true라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p> <h3 id="속성에_기본값_추가하기">속성에 기본값 추가하기</h3> diff --git a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html index 6eaca7b708..aa92c7f488 100644 --- a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html @@ -23,11 +23,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>obj</code></dt> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze <p>함수로 전달된 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p>동결 객체의 속성 집합에는 어떠한 것도 추가하거나 제거할 수 없으며, 그리 하려는 모든 시도는 조용히 넘어가거나, {{jsxref("TypeError")}} 예외가 발생하며 실패합니다. 예외 발생은 보통 {{jsxref("Strict_mode", "엄격 모드", "", 1)}}인 경우 발생하지만, 반드시 엄격 모드로만 제한되는 것은 아닙니다.</p> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze <p><code>freeze()</code>는 함수에 전달한 객체를 그대로 반환하며, 동결된 객체 사본을 생성하는 것이 아닙니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="객체_동결하기">객체 동결하기</h3> @@ -181,7 +181,7 @@ obj2.internal.a = 'anotherValue'; // 비엄격 모드에서 조용하게 실패 obj2.internal.a; // null </pre> -<h2 id="Notes" name="Notes">사용 노트</h2> +<h2 id="Notes">사용 노트</h2> <p>ES5에서는, 이 메소드에 대한 인자가 객체(원시형)가 아닐 경우, {{jsxref("TypeError")}}가 발생합니다. ES2015에서는, 비객체 인자가 동결된 평범한 객체인것처럼 다루어져 반환됩니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/object/index.html b/files/ko/web/javascript/reference/global_objects/object/index.html index ce7e6c6603..d76739238f 100644 --- a/files/ko/web/javascript/reference/global_objects/object/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/index.html @@ -93,7 +93,7 @@ new Object([<var>value</var>])</pre> <dd>주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.</dd> </dl> -<h2 id="Object_instances" name="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2> +<h2 id="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2> <p>JavaScript에서 모든 객체들은 <code>Object</code>의 자손입니다. 모든 객체는 {{jsxref("Object.prototype")}}으로부터 메서드와 속성을 상속하는데, 나중에 덮어 쓸 수도 있습니다. 예를 들어, 다른 생성자의 프로토타입은 그 <code>constructor</code> 속성을 덮어쓰고 자신의 <code>toString()</code> 메소드들을 제공합니다. <code>Object</code> 프로토타입 객체에 대한 변경 내용은 그 변경 내용에 영향을 받는 속성들과 메소드들이 프로토타입 체인(chain)을 따라 더이상 무시되지 않는한, 모든 객체들로 전달됩니다.</p> @@ -105,9 +105,9 @@ new Object([<var>value</var>])</pre> <div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '메서드') }}</div> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> -<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3> +<h3 id="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3> <p>다음 예제는 변수 <code>o</code>에 빈 <code>Object</code> 객체를 저장합니다.</p> @@ -170,7 +170,7 @@ var o = new Object(Boolean()); <p>{{Compat("javascript.builtins.Object")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> diff --git a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html index 0e9de96b41..b2cefcdb65 100644 --- a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -17,18 +17,18 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf <p><strong>Note:</strong> <code>isPrototypeOf</code> 는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 다릅니다. "<code>object instanceof AFunction</code>"표현식에서는 <code>object</code>의 프로토타입 체인을 AFunction 자체가 아니라 <code>AFunction.prototype에 대해 </code>확인을 합니다.</p> </div> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>object</code></dt> <dd>프로토타입 체인을 가지고 있는 객체가 검색될 것 입니다.</dd> </dl> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>isPrototypeOf</code> 메소드는 또 다른 객체의 프로토타입 체인에 해당 객체가 존재하는지 여부를 확인할수 있습니다.</p> @@ -99,13 +99,13 @@ if (Fi.prototype.isPrototypeOf(fum)) { <p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> <li>{{jsxref("Object.getPrototypeOf()")}}</li> <li> - <div><span style="font-size: 14px; line-height: 1.5;">{{jsxref("Object.setPrototypeOf()")}}</span></div> + <div>{{jsxref("Object.setPrototypeOf()")}}</div> </li> <li>{{jsxref("Object.prototype.__proto__")}} </li> </ul> diff --git a/files/ko/web/javascript/reference/global_objects/object/seal/index.html b/files/ko/web/javascript/reference/global_objects/object/seal/index.html index c04ca07dde..50bd0d7e08 100644 --- a/files/ko/web/javascript/reference/global_objects/object/seal/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/seal/index.html @@ -18,11 +18,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <pre class="syntaxbox">Object.seal(<var>obj</var>)</pre> -<h3 id="Parameters" name="Parameters">매개변수</h3> +<h3 id="Parameters">매개변수</h3> <dl> <dt><code>obj</code></dt> @@ -33,13 +33,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal <p>봉인한 객체.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> -<p>객체는 기본적으로 확장이 가능(<span style="line-height: 16.7999992370605px;">{{jsxref("Object.isExtensible()", "extensible", "", 1)}}</span>)합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code><strong>Object.seal()</strong></code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 <span style="line-height: 16.7999992370605px;">{{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</span></p> +<p>객체는 기본적으로 확장이 가능({{jsxref("Object.isExtensible()", "extensible", "", 1)}})합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code>Object.seal()</code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 {{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</p> -<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 <span style="line-height: 16.7999992370605px;">{{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</span></p> +<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</p> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <pre class="brush: js">var obj = { prop: function() {}, @@ -80,9 +80,9 @@ Object.defineProperty(obj, 'ohai', { value: 17 }); // TypeErorr 발생 Object.defineProperty(obj, 'foo', { value: 'eit' }); // 속성값의 변경은 가능함 </pre> -<h2 id="Notes" name="Notes">참고</h2> +<h2 id="Notes">참고</h2> -<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 <span style="line-height: 16.7999992370605px;">{{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</span></p> +<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 {{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</p> <pre class="brush: js">> Object.seal(1) TypeError: 1 is not an object // ES5 code @@ -124,7 +124,7 @@ TypeError: 1 is not an object // ES5 code <p>{{Compat("javascript.builtins.Object.seal")}}</p> -<h2 id="See_also" name="See_also">같이 보기</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li>{{jsxref("Object.isSealed()")}}</li> diff --git a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html index 863ba06a1e..cb8e14c16d 100644 --- a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf <p>JavaScript는 객체를 원시 값으로 변환할 때 <code>valueOf</code> 메서드를 호출합니다. 보통 원시 값을 필요로 할 때 알아서 사용하므로 직접 호출해야 하는 경우는 매우 드뭅니다.</p> -<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의<sup>override</sup>해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p> +<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p> <p>여러분의 코드에서 <code>valueOf</code>를 호출해 내장 객체를 원시 값으로 변환할 수 있습니다. 사용자 정의 객체를 만들 땐 <code>valueOf</code>를 재정의해 {{jsxref("Object")}}의 메서드 대신 다른 행동을 부여할 수도 있습니다.</p> @@ -70,7 +70,7 @@ MyNumberType.prototype.valueOf = function() { var myObj = new MyNumberType(4); myObj + 3; // 7</pre> -<h3 id="단항_더하기_사용하기"><a name="Details_of_unary_plus">단항 더하기 사용하기</a></h3> +<h3 id="단항_더하기_사용하기">단항 더하기 사용하기</h3> <pre class="notranslate">+"5" // 5 (string to number) +"" // 0 (string to number) diff --git a/files/ko/web/javascript/reference/global_objects/parseint/index.html b/files/ko/web/javascript/reference/global_objects/parseint/index.html index 0539e1ba53..d52a6fcb41 100644 --- a/files/ko/web/javascript/reference/global_objects/parseint/index.html +++ b/files/ko/web/javascript/reference/global_objects/parseint/index.html @@ -4,6 +4,7 @@ slug: Web/JavaScript/Reference/Global_Objects/parseInt tags: - JavaScript - Reference +browser-compat: javascript.builtins.parseInt translation_of: Web/JavaScript/Reference/Global_Objects/parseInt --- <div>{{jsSidebar("Objects")}}</div> @@ -47,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt <li>첫번째 non-whitespace 문자가 숫자로 변환되지 않는 경우</li> </ul> -<h2 id="설명_2"><a id="설명" name="설명">설명</a></h2> +<h2 id="설명_2">설명</h2> <p><code>parseInt</code> 함수는 첫 번째 인자를 문자열로 변환하고 파싱하고, 그 문자열을 파싱하여 정수나 <code>NaN</code>을 리턴합니다.</p> @@ -57,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt <p>만약 <code>parseInt</code> 함수가 특정 진수를 나타내는 숫자가 아닌 글자를 마주치게 되면, 이 글자와 계속되는 글자들은 전부 무시되며, 파싱된 정수값을 리턴합니다. <code>parseInt</code> 함수는 정수값으로 숫자를 잘라버립니다. 맨 앞의 공백과 그 뒤의 공백들은 허용됩니다.</p> -<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10<sup>23</sup>의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p> +<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10^23의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p> <p><code>parseInt</code>는 양수를 의미하는 <code>+ </code>기호와 음수를 나타내는 <code>-</code> 기호를 정확히 이해합니다(ECMAScript 1 이후). 공백이 제거된 후 구문 분석의 초기 단계로 수행됩니다. 기호를 찾을 수 없으면 알고리즘이 다음 단계로 이동하고, 그렇지 않으면 기호를 제거하고 문자열의 나머지 부분에서 숫자 파싱을 실행합니다.</p> @@ -206,7 +207,7 @@ parseInt(1e+21,10); <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.builtins.parseInt")}}</div> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html index edf6025aef..80be4d88d2 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html @@ -48,7 +48,7 @@ p.finally(function() { </ul> <div class="note"> -<p><strong>Note:</strong> <code>finally</code> 콜백에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw</span></font> (또는 거부된 promise를 반환)하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw()</span></font>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p> +<p><strong>Note:</strong> <code>finally</code> 콜백에서 <code>throw</code> (또는 거부된 promise를 반환)하면 <code>throw()</code>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p> </div> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/index.html index cc9c9bc427..6a78ea5619 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise <li>거부(<em>rejected)</em>: 연산이 실패함.</li> </ul> -<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건<sup>race condition</sup>은 없습니다.</p> +<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.</p> <p>{{jsxref("Promise.prototype.then()")}} 및 {{jsxref("Promise.prototype.catch()")}} 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.</p> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise </div> <div class="note"> -<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md" title="States and fates">States and fates</a>에서 볼 수 있습니다.</p> +<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a>에서 볼 수 있습니다.</p> </div> <h2 id="생성자">생성자</h2> diff --git a/files/ko/web/javascript/reference/global_objects/promise/race/index.html b/files/ko/web/javascript/reference/global_objects/promise/race/index.html index 618ae4ccb5..47b027024b 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/race/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/race/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race <h2 id="예제">예제</h2> -<h3 id="Promise.race의_비동기성"><font face="consolas, Liberation Mono, courier, monospace"><code>Promise.race</code>의 비동기성</font></h3> +<h3 id="Promise.race의_비동기성"><code>Promise.race</code>의 비동기성</h3> <p>다음 예제에서 <code>Promise.race</code>의 비동기성을 확인할 수 있습니다.</p> diff --git a/files/ko/web/javascript/reference/global_objects/promise/then/index.html b/files/ko/web/javascript/reference/global_objects/promise/then/index.html index 989b17b846..c4f1a1295a 100644 --- a/files/ko/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ko/web/javascript/reference/global_objects/promise/then/index.html @@ -41,7 +41,7 @@ p.then(function(value) { <h3 id="반환값">반환값</h3> -<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code style="font-style: normal; font-weight: normal;">onFulfilled</code>나 <code style="font-style: normal; font-weight: normal;">onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p> +<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code>onFulfilled</code>나 <code>onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p> <ul> <li>함수가 값을 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 반환값을 자신의 결과값으로 하여 이행합니다.</li> diff --git a/files/ko/web/javascript/reference/global_objects/set/values/index.html b/files/ko/web/javascript/reference/global_objects/set/values/index.html index 37e019e3da..3d22a90f6d 100644 --- a/files/ko/web/javascript/reference/global_objects/set/values/index.html +++ b/files/ko/web/javascript/reference/global_objects/set/values/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/values --- <div>{{JSRef}}</div> -<p><code><strong>values()</strong></code> method는 <code>Set<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 </span></font></code><code>Iterator</code> 객체를 반환합니다.</p> +<p><code><strong>values()</strong></code> method는 <code>Set</code> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 <code>Iterator</code> 객체를 반환합니다.</p> <p>The <strong><code>keys()</code></strong> method is an alias for this method (for similarity with {{jsxref("Map")}} objects); it behaves exactly the same and returns <strong>values</strong> of <code>Set</code> elements.</p> diff --git a/files/ko/web/javascript/reference/global_objects/string/concat/index.html b/files/ko/web/javascript/reference/global_objects/string/concat/index.html index 1d5b4f2cd6..170f8d2bc1 100644 --- a/files/ko/web/javascript/reference/global_objects/string/concat/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/concat/index.html @@ -7,6 +7,7 @@ tags: - Prototype - Reference - String +browser-compat: javascript.builtins.String.concat translation_of: Web/JavaScript/Reference/Global_Objects/String/concat --- <div>{{JSRef}}</div> @@ -91,11 +92,7 @@ var greetList = ['Hello', ' ', 'Venkat', '!']; <h2 id="브라우저_호환성">브라우저 호환성</h2> -<p>{{Compat("javascript.builtins.String.concat")}}</p> - -<div></div> - -<div id="compat-mobile"></div> +<p>{{Compat}}</p> <h2 id="관련문서">관련문서</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html index 98b1627666..9808f33355 100644 --- a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -51,7 +51,7 @@ String.fromCharCode(0x12014) // 숫자 '1'은 무시해서 "—" <h2 id="더_큰_값과_사용하기">더 큰 값과 사용하기</h2> -<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트<sup>surrogate</sup> 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</p> +<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/index.html b/files/ko/web/javascript/reference/global_objects/string/index.html index 48217dee18..2f677292dc 100644 --- a/files/ko/web/javascript/reference/global_objects/string/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p><strong><code>String</code></strong> 전역 객체는 문자열(문자의 나열)의 생성자입니다.</p> -<h2 id="Syntax" name="Syntax">구문</h2> +<h2 id="Syntax">구문</h2> <p>문자열 리터럴은 다음과 같은 형식을 사용합니다.</p> @@ -127,9 +127,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>두 예시 모두 동일한 문자열을 생성합니다.</p> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> -<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> +<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> <h3 id="문자_접근">문자 접근</h3> @@ -145,9 +145,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 수는 없습니다. 포함되어 있는 프로퍼티들은 작성할 수도, 수정할 수도 없습니다. (더 자세한 정보는 {{jsxref("Object.defineProperty()")}}를 참고 바랍니다 .)</p> -<h3 id="Comparing_strings" name="Comparing_strings">문자열 비교</h3> +<h3 id="Comparing_strings">문자열 비교</h3> -<p>C 개발자는 문자열 비교를 위하여 <code><span style="font-family: courier new,andale mono,monospace;">strcmp()</span></code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" style="line-height: inherit;" title="JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다<span style="line-height: inherit;"> </span><span style="line-height: inherit;">:</span></p> +<p>C 개발자는 문자열 비교를 위하여 <code>strcmp()</code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다:</p> <pre class="brush: js">var a = "a"; var b = "b"; @@ -160,11 +160,11 @@ if (a < b) { // true } </pre> -<p>비슷한 결과를 얻을 수 있는 방법으로 <span style="font-family: courier new,andale mono,monospace;">String</span> 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> +<p>비슷한 결과를 얻을 수 있는 방법으로 String 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> <h3 id="문자열_원형과_String_객체의_차이">문자열 원형과 <code>String</code> 객체의 차이</h3> -<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="JavaScript/Reference/Global_Objects/">숫자</a>의 true도 마찬가지입니다.)</div> +<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">숫자</a>의 true도 마찬가지입니다.)</div> <div> </div> @@ -187,19 +187,19 @@ console.log(eval(s2)); // returns the string "2 + 2" <p>이러한 이유로, 비록 코드 상에서 원형 문자열을 사용하는 대신에 <code>String</code> 오브젝트를 사용하게 되면 코드가 손상될 수 있지만, 일반적인 개발자는 차이를 걱정할 필요는 없습니다.</p> -<p><code>String</code><span style="line-height: inherit;"> 오브젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} <span style="line-height: inherit;"> 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> +<p><code>String</code> 오브젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> <pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 </pre> -<h2 id="Properties" name="Properties">속성</h2> +<h2 id="Properties">속성</h2> <dl> <dt>{{jsxref("String.prototype")}}</dt> <dd>String 오브젝트는 프로퍼티의 추가가 가능합니다.</dd> </dl> -<h2 id="Methods" name="Methods">메서드</h2> +<h2 id="Methods">메서드</h2> <dl> <dt>{{jsxref("String.fromCharCode()")}}</dt> @@ -216,15 +216,15 @@ console.log(eval(s2)); // returns the string "2 + 2" <p><strong><code>String</code> generic들은 비표준으로, 가까운 미래에 사라질 것입니다.</strong> 아래에서 제공하고 있는 방식을 사용하지 않으면, 브라우저들간의 호환성은 기대하기 어렵습니다. </p> </div> -<p><code>String</code><span style="line-height: inherit;"> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</span></p> +<p><code>String</code> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</p> <pre class="brush: js">var num = 15; console.log(String.replace(num, /5/, '2')); </pre> -<p class="brush: js">{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은<span style="line-height: inherit;"> </span>{{jsxref("Global_Objects/Array", "Array")}}<span style="line-height: inherit;"> 메서드에도 사용 가능합니다.</span></p> +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은 {{jsxref("Global_Objects/Array", "Array")}} 메서드에도 사용 가능합니다.</p> -<h2 id="String_instances" name="String_instances"><code>String</code> 인스턴스</h2> +<h2 id="String_instances"><code>String</code> 인스턴스</h2> <h3 id="속성">속성</h3> @@ -252,7 +252,7 @@ for (var i = 0, n = inputValues.length; i < n; ++i) { } </pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</h2> +<h2 id="Browser_Compatibility">명세</h2> <table class="standard-table"> <tbody> @@ -284,7 +284,7 @@ for (var i = 0, n = inputValues.length; i < n; ++i) { </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> +<h2 id="Browser_Compatibility">브라우저 호환성</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html index 1e8398e41e..dfea5e722d 100644 --- a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat <h2 id="폴리필">폴리필</h2> -<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">repeat</span></font>을 사용할 수 있습니다.</p> +<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>repeat</code>을 사용할 수 있습니다.</p> <pre dir="rtl"><code>if (!String.prototype.repeat) { String.prototype.repeat = function(count) { diff --git a/files/ko/web/javascript/reference/global_objects/string/replace/index.html b/files/ko/web/javascript/reference/global_objects/string/replace/index.html index 3b189bfbf5..e2ad4f5cb0 100644 --- a/files/ko/web/javascript/reference/global_objects/string/replace/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/replace/index.html @@ -1,6 +1,7 @@ --- title: String.prototype.replace() slug: Web/JavaScript/Reference/Global_Objects/String/replace +browser-compat: javascript.builtins.String.replace translation_of: Web/JavaScript/Reference/Global_Objects/String/replace --- <div>{{JSRef}}</div> @@ -95,7 +96,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replace <td><code>p1,<br> p2,<br> ...</code></td> - <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code><font face="Open Sans, Arial, sans-serif"> </font></code><code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td> + <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td> </tr> <tr> <td><code>offset</code></td> @@ -277,18 +278,7 @@ console.log(retArr); <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div> </div> - -<div id="compat-mobile">{{Compat("javascript.builtins.String.replace")}}</div> - -<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> - -<ul> - <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>replace()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li> - <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li> - <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li> - <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li> -</ul> +<div>{{Compat}}</div> <h2 id="같이_보기">같이 보기</h2> diff --git a/files/ko/web/javascript/reference/global_objects/string/split/index.html b/files/ko/web/javascript/reference/global_objects/string/split/index.html index 83d8136caa..a5b0df228e 100644 --- a/files/ko/web/javascript/reference/global_objects/string/split/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/split/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre> <div class="warning"> -<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a><sup>surrogate pair</sup>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p> +<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p> </div> <h3 id="매개변수">매개변수</h3> @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <p>문자열에서 <code>separator</code>가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다. <code>separator</code>가 등장하지 않거나 생략되었을 경우 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우, <code>str</code>은 문자열의 모든 문자를 원소로 가지는 배열로 변환됩니다. <code>separator</code>가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 <code>separator</code> 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.</p> -<p><code>separator</code>가 포획 괄호<sup>capturing parentheses</sup>를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p> +<p><code>separator</code>가 포획 괄호를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p> <p>{{Note("<code>separator</code>가 배열일 경우 분할에 사용하기 전에 우선 문자열로 변환됩니다.")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/string/substring/index.html b/files/ko/web/javascript/reference/global_objects/string/substring/index.html index b4dbd8c170..269871d785 100644 --- a/files/ko/web/javascript/reference/global_objects/string/substring/index.html +++ b/files/ko/web/javascript/reference/global_objects/string/substring/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/substring --- <div>{{JSRef}}</div> -<p><strong><code>substring()</code></strong><font><font>메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. </font></font></p> +<p><strong><code>substring()</code></strong> 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.</p> <div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html deleted file mode 100644 index 197b679edd..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: String.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/String/toString -translation_of: Web/JavaScript/Reference/Global_Objects/String/toString ---- -<div><font><font>{{JSRef}}</font></font></div> - -<p><font><font>이 </font></font><strong><code>toString()</code></strong><font><font>메소드는 지정된 객체를 나타내는 문자열을 반환합니다.</font></font></p> - -<div><font><font>{{EmbedInteractiveExample ( "pages / js / string-tostring.html")}}</font></font></div> - -<h2 id="통사론"><font><font>통사론</font></font></h2> - -<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> - -<h3 id="반환_값"><font><font>반환 값</font></font></h3> - -<p><font><font>호출 객체를 나타내는 문자열</font></font></p> - -<h2 id="기술"><font><font>기술</font></font></h2> - -<p><font><font>{{jsxref ( "String")}} 오브젝트 </font></font><code>toString()</code><font><font>는 {{jsxref ( "Object")}} 오브젝트 </font><font>의 </font><font>메소드를 </font><font>대체 </font><font>합니다. </font><font>{{jsxref ( "Object.prototype.toString ()")}}을 상속하지 않습니다. </font><font>{{jsxref ( "String")}} 오브젝트의 경우 </font></font><code>toString()</code><font><font>메소드는 </font><font>오브젝트 </font><font>의 문자열 표시를 리턴하며 {{jsxref ( "String.prototype.valueOf ()")}} 메소드와 동일합니다.</font></font></p> - -<h2 id="예"><font><font>예</font></font></h2> - -<h3 id="사용_toString"><font><font>사용 </font></font><code>toString()</code></h3> - -<p><font><font>다음 예제는 {{jsxref ( "String")}} 오브젝트의 문자열 값을 표시합니다.</font></font></p> - -<pre class="brush: js"><font><font>var x = new String ( 'Hello world');</font></font> -<font><font> -console.log (x.toString ()); </font><font>// 'Hello world'를 기록합니다.</font></font> -</pre> - -<h2 id="명세서"><font><font>명세서</font></font></h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col"><font><font>사양</font></font></th> - </tr> - <tr> - <td><font><font>{{SpecName ( 'ESDraft', '# sec-string.prototype.tostring', 'String.prototype.toString')}}}</font></font></td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2> - - -<p><font><font>{{Compat ( "javascript.builtins.String.toString")}}</font></font></p> - -<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2> - -<ul> - <li><font><font>{{jsxref ( "Object.prototype.toSource ()")}}</font></font></li> - <li><font><font>{{jsxref ( "String.prototype.valueOf ()")}}</font></font></li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.md b/files/ko/web/javascript/reference/global_objects/string/tostring/index.md new file mode 100644 index 0000000000..27d2453fd8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/tostring/index.md @@ -0,0 +1,56 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +browser-compat: javascript.builtins.String.toString +--- + +{{JSRef}} + +**`toString()`** 메서드는 객체의 문자열 표현을 반환합니다. + +{{EmbedInteractiveExample("pages/js/string-tostring.html")}} + +## 구문 + +```js +toString() +``` + +### 반환 값 + +메서드를 호출하는 객체의 문자열 표현. + +## 설명 + +{{jsxref("String")}} 객체는 {{jsxref("Object")}} 객체의 `toString()` 메서드를 상속하지 않고 재정의합니다. {{jsxref("String")}} 의 `toString()` 메서드는 객체의 문자열 표현을 반환하며 {{jsxref("String.prototype.valueOf()")}} 메서드와 동일합니다. + +## 예제 + +### `toString()` 사용하기 + +{{jsxref("String")}} 객체의 문자열 값을 표시하는 예제입니다. + +```js +var x = new String('Hello world') + +console.log(x.toString()) // logs 'Hello world' +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("String.prototype.valueOf()")}} diff --git a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html deleted file mode 100644 index df264d0078..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: String.prototype.trimStart() -slug: Web/JavaScript/Reference/Global_Objects/String/trimStart -tags: -- JavaScript -- Method -- Prototype -- Reference -- String -- Polyfill -browser-compat: javascript.builtins.String.trimStart -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart ---- -<div>{{JSRef}}</div> - -<p><strong><code>trimStart()</code></strong>메서드는 문자열 시작부분의 공백을 제거합니다. 또한 <code>trimLeft()</code>라는 별칭으로 호출이 가능합니다.</p> - -<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div> - - -<h2 id="syntax">구문</h2> - -<pre class="brush: js"> -trimStart() - -trimLeft() -</pre> - -<h3 id="return_value">반환값</h3> - -<p><code><var>str</var></code>시작부분(왼쪽)에서 공백이 제거된 새 문자열을 반환합니다.</p> - -<p><code><var>str</var></code>에 공백이 없을시에도 에러가 발생하지 않고 여전히 새 문자열(본질적으로 <code><var>str</var></code>의 복사본)이 반환됩니다.</p> - -<h3 id="aliasing">별칭</h3> - -<p>{{jsxref("String.prototype.padStart")}}표준 메서드 이름과 같은 함수의 일관성을 위해서<code>trimStart</code>가 되었습니다. 그러나, - 웹 호환성을 위해서 <code>trimLeft</code> 이라는 별칭을 가집니다. 일부 엔진에서 이것은 다음 예시를 의미합니다.</p> - -<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre> - -<h2 id="examples">예제</h2> - -<h3 id="using_trimStart">trimStart() 사용</h3> - -<p>다음 예제는<code>'foo '</code>문자열을 표시합니다.</p> - -<pre class="brush: js highlight: [5]">var str = ' foo '; - -console.log(str.length); // 8 - -str = str.trimStart(); -console.log(str.length); // 5 -console.log(str); // 'foo ' -</pre> - -<h2 id="polyfill">폴리필</h2> - -<pre class="brush: js highlight: [5]">//https://github.com/FabioVergani/js-Polyfill_String-trimStart - -(function(w){ - var String=w.String, Proto=String.prototype; - - (function(o,p){ - if(p in o?o[p]?false:true:true){ - var r=/^\s+/; - o[p]=o.trimLeft||function(){ - return this.replace(r,'') - } - } - })(Proto,'trimStart'); - -})(window); - -/* -ES6: -(w=>{ - const String=w.String, Proto=String.prototype; - - ((o,p)=>{ - if(p in o?o[p]?false:true:true){ - const r=/^\s+/; - o[p]=o.trimLeft||function(){ - return this.replace(r,'') - } - } - })(Proto,'trimStart'); - -})(window); -*/</pre> - -<h2 id="specifications">명세서</h2> - -{{Specifications}} - -<h2 id="browser_compatibility">브라우저 호환성</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">같이 보기</h2> - -<ul> - <li><code>String.prototype.trimStart</code>의 폴리필은 <a href="https://github.com/zloirock/core-js#ecmascript-string-and-regexp"><code>core-js</code></a>를 참고하세요.</li> - <li>{{jsxref("String.prototype.trim()")}}</li> - <li>{{jsxref("String.prototype.trimEnd()")}}</li> -</ul> diff --git a/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md new file mode 100644 index 0000000000..46291bea6b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/trimstart/index.md @@ -0,0 +1,106 @@ +--- +title: String.prototype.trimStart() +slug: Web/JavaScript/Reference/Global_Objects/String/trimStart +tags: +- JavaScript +- Method +- Prototype +- Reference +- String +- Polyfill +browser-compat: javascript.builtins.String.trimStart +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +{{JSRef}} + +**`trimStart()`** 메서드는 문자열 시작부분의 공백을 제거합니다. 또한 `trimLeft()`라는 별칭으로 호출이 가능합니다. +{{EmbedInteractiveExample("pages/js/string-trimstart.html")}} + +## 구문 + +```js +trimStart() + +trimLeft() +``` + +### 반환값 + +`str` 시작부분(왼쪽)에서 공백이 제거된 새 문자열을 반환합니다. +`str` 에 공백이 없을시에도 에러가 발생하지 않고 여전히 새 문자열(본질적으로 `str` 의 복사본)이 반환됩니다. + +### 별칭 + +{{jsxref("String.prototype.padStart")}} 표준 메서드 이름과 같은 함수의 일관성을 위해서 `trimStart` 가 되었습니다. +그러나, 웹 호환성을 위해서 `trimLeft` 이라는 별칭을 가집니다. 일부 엔진에서 이것은 다음 예시를 의미합니다. + +```js +String.prototype.trimLeft.name === "trimStart"; +``` + +## 예제 + +### trimStart() 사용 + +다음 예제는 `'foo '` 문자열을 표시합니다. + +```js +var str = ' foo '; + +console.log(str.length); // 8 + +str = str.trimStart(); +console.log(str.length); // 5 +console.log(str); // 'foo ' +``` + +## 폴리필 + +```js +//https://github.com/FabioVergani/js-Polyfill_String-trimStart + +(function(w){ + var String=w.String, Proto=String.prototype; + + (function(o,p){ + if(p in o?o[p]?false:true:true){ + var r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); + +/* +ES6: +(w=>{ + const String=w.String, Proto=String.prototype; + + ((o,p)=>{ + if(p in o?o[p]?false:true:true){ + const r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); +*/ +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- `String.prototype.trimStart` 의 폴리필은 [`core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)를 참고하세요. +- {{jsxref("String.prototype.trim()")}} +- {{jsxref("String.prototype.trimEnd()")}} diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html index 73badf1974..0002ae6039 100644 --- a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html @@ -95,7 +95,7 @@ try { } </pre> -<h2 id="명세" name="명세">명세</h2> +<h2 id="명세">명세</h2> {{Specifications}} diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html index eb7dd71f5f..ae40207524 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -66,7 +66,7 @@ fetch('simple.wasm').then(response => </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html index 40ba328985..2c7456515a 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html @@ -94,7 +94,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html index a713ca1c0d..31f5a3125a 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStrea <h3 id="Exceptions">Exceptions</h3> <ul> - <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 발생합니다.</li> + <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>가 발생합니다.</li> <li>컴파일에 실패하면 promise는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.CompileError</code></a>와 함께 reject가 반환됩니다.</li> </ul> @@ -62,7 +62,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm')) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html index c85d74b53c..710ad041e8 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html @@ -98,7 +98,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/index.html index 8412c9f0e4..21e6b071af 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/index.html @@ -85,7 +85,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div>{{Compat("javascript.builtins.WebAssembly")}}</div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html index 3141c6809a..7dc39f1720 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html index 69e6b38bf8..3359c25875 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html @@ -151,7 +151,7 @@ onmessage = function(e) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> <p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html index e1b2fde3b7..2b453ce77e 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html @@ -66,7 +66,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html index b9b5c3264c..e94c685edb 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html @@ -96,7 +96,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html index 96b1614fff..edb189e2ae 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -95,7 +95,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html index 814835fd00..f15f7a1098 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> +<h2 id="Browser_compatibility">브라우저 호환성</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html index ebd8da6f46..83a82c3d09 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html @@ -94,7 +94,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html index 9d86fe40c7..de67a5c318 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html @@ -113,7 +113,7 @@ console.log(tbl.get(1)); // "null"</pre> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html index a5ea4850e5..acdba73a2f 100644 --- a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html +++ b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.html b/files/ko/web/javascript/reference/iteration_protocols/index.html index d0c8a55456..eacacb8f0e 100644 --- a/files/ko/web/javascript/reference/iteration_protocols/index.html +++ b/files/ko/web/javascript/reference/iteration_protocols/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <p>2개의 protocol이 있습니다 : <a href="#iterable">iterable protocol</a> 과 <a href="#iterator">iterator protocol</a>.</p> -<h2 id="iterable" name="iterable">The iterable protocol</h2> +<h2 id="iterable">The iterable protocol</h2> <p><strong>iterable</strong> protocol 은 JavaScript 객체들이, 예를 들어 {{jsxref("Statements/for...of", "for..of")}} 구조에서 어떠한 value 들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용합니다. 다른 type 들({{jsxref("Object")}} 와 같은)이 그렇지 않은 반면에, 어떤 built-in type 들은 {{jsxref("Array")}} 또는 {{jsxref("Map")}} 과 같은 default iteration 동작으로 <a href="#Builtin_iterables">built-in iterables</a> 입니다.</p> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <p>어떠한 객체가 반복(Iterate)되어야 한다면 이 객체의 <code>@@iterator</code> 메소드가 인수없이 호출되고, 반환된 <strong>iterator</strong>는 반복을 통해서 획득할 값들을 얻을 때 사용됩니다.</p> -<h2 id="iterator" name="iterator">The iterator protocol</h2> +<h2 id="iterator">The iterator protocol</h2> <p><strong>iterator </strong>protocol 은 value( finite 또는 infinite) 들의 sequence 를 만드는 표준 방법을 정의합니다. </p> diff --git a/files/ko/web/javascript/reference/operators/async_function/index.html b/files/ko/web/javascript/reference/operators/async_function/index.html index d1ec146ca4..fda50e9a4a 100644 --- a/files/ko/web/javascript/reference/operators/async_function/index.html +++ b/files/ko/web/javascript/reference/operators/async_function/index.html @@ -1,13 +1,14 @@ --- title: async function 표현식 slug: Web/JavaScript/Reference/Operators/async_function +browser-compat: javascript.operators.async_function translation_of: Web/JavaScript/Reference/Operators/async_function --- <div>{{jsSidebar("Operators")}}</div> <p><strong><code>async function</code></strong> 키워드는 표현식 내에서 <code>async</code> 함수를 정의하기 위해 사용됩니다.</p> -<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p> +<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p> <h2 id="문법">문법</h2> @@ -83,9 +84,7 @@ add(10).then(v => { <h2 id="Browser_compatibility">Browser compatibility</h2> -<div>{{Compat("javascript.operators.async_function_expression")}} </div> - -<div id="compat-mobile"></div> +<div>{{Compat}}</div> <h2 id="See_also">See also</h2> diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html index d15b532fbc..6ac133bf39 100644 --- a/files/ko/web/javascript/reference/operators/class/index.html +++ b/files/ko/web/javascript/reference/operators/class/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <p>class 식은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 문</a>과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.</p> -<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서 실행됩니다.</p> +<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서 실행됩니다.</p> diff --git a/files/ko/web/javascript/reference/operators/delete/index.html b/files/ko/web/javascript/reference/operators/delete/index.html index 037c3bcd98..d2eafd97f1 100644 --- a/files/ko/web/javascript/reference/operators/delete/index.html +++ b/files/ko/web/javascript/reference/operators/delete/index.html @@ -6,6 +6,7 @@ tags: - Operator - Property - Reference +browser-compat: javascript.operators.delete translation_of: Web/JavaScript/Reference/Operators/delete --- <div>{{jsSidebar("Operators")}}</div> @@ -265,7 +266,7 @@ if (3 in trees) { <h2 id="브라우저_호환성">브라우저 호환성</h2> -<div id="compat-mobile">{{Compat("javascript.operators.delete")}}</div> +<div>{{Compat}}</div> <h2 id="크로스_브라우저_참고사항">크로스 브라우저 참고사항</h2> diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html index aae1bd3e00..e367513864 100644 --- a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html +++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html @@ -341,7 +341,7 @@ whois(user); // "jdoe is John"</pre> <h3 id="계산된_속성_이름과_구조_분해">계산된 속성 이름과 구조 분해</h3> -<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" title="object literals">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p> +<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p> <pre class="brush: js">let key = "z"; let { [key]: foo } = { z: "bar" }; @@ -404,6 +404,6 @@ console.log(fizzBuzz); // "true" <h2 id="같이_보기">같이 보기</h2> <ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Assignment operators">할당 연산자</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li> <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> </ul> diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html index 5f4977bfc7..caa5edbfc0 100644 --- a/files/ko/web/javascript/reference/operators/function/index.html +++ b/files/ko/web/javascript/reference/operators/function/index.html @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Operators/function <h2 id="설명">설명</h2> -<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p> +<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a> 장 참조.</p> <h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3> diff --git a/files/ko/web/javascript/reference/operators/index.html b/files/ko/web/javascript/reference/operators/index.html index 1ddd778228..16133a2db7 100644 --- a/files/ko/web/javascript/reference/operators/index.html +++ b/files/ko/web/javascript/reference/operators/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Operators --- <div>{{jsSidebar("Operators")}}</div> -<p>이 장은 JavaScript의 모든 연산자<sup>operator</sup>, 식<sup>expression</sup> 및 키워드를 나열합니다.</p> +<p>이 장은 JavaScript의 모든 연산자, 식 및 키워드를 나열합니다.</p> <h2 id="항목별_식_및_연산자">항목별 식 및 연산자</h2> @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators <dt>{{JSxRef("Operators/class", "class")}}</dt> <dd><code>class</code> 키워드는 클래스를 정의합니다.</dd> <dt>{{JSxRef("Operators/function*", "function*")}}</dt> - <dd><code>function*</code> 키워드는 생성기<sup>generator</sup> 함수 식을 정의합니다.</dd> + <dd><code>function*</code> 키워드는 생성기 함수 식을 정의합니다.</dd> <dt>{{JSxRef("Operators/yield", "yield")}}</dt> <dd>생성기 함수를 일시정지 및 재개합니다.</dd> <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> @@ -162,14 +162,14 @@ translation_of: Web/JavaScript/Reference/Operators <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt> <dd>부등 연산자.</dd> <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt> - <dd>일치<sup>identity</sup> 연산자.</dd> + <dd>일치 연산자.</dd> <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt> <dd>불일치 연산자.</dd> </dl> <h3 id="비트_시프트_연산자">비트 시프트 연산자</h3> -<p>피연산자의 모든 비트를 이동<sup>shift</sup>하는 연산.</p> +<p>피연산자의 모든 비트를 시프트하는 연산.</p> <dl> <dt>{{JSxRef("Operators/Left_shift", "<<")}}</dt> diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html index 3a4bb219af..b3bebf8541 100644 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.html +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.html @@ -90,7 +90,7 @@ var o = { <h3 id="속성_접근">속성 접근</h3> -<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessors">속성 접근자</a> 참조.)</p> +<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 참조.)</p> <pre class="brush: js notranslate">object.foo; // "bar" object["age"]; // 42 @@ -185,7 +185,7 @@ var o = { <h3 id="계산된_속성명">계산된 속성명</h3> -<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessor">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> +<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> <p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p> @@ -288,5 +288,5 @@ assert(obj3.__proto__ === 17); <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> </ul> diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html index 0d37a262c5..9f9ea86a93 100644 --- a/files/ko/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.html @@ -19,9 +19,9 @@ original_slug: Web/JavaScript/Reference/Operators/연산자_우선순위 <h2 id="우선순위와_결합성">우선순위와 결합성</h2> -<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자<sub>1</sub>과 연산자<sub>2</sub>의 자리에는 아무 연산자를 넣을 수 있습니다.</p> +<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자1과 연산자2의 자리에는 아무 연산자를 넣을 수 있습니다.</p> -<pre class="syntaxbox">a 연산자<sub>1</sub> b 연산자<sub>2</sub> c</pre> +<pre class="syntaxbox">a 연산자1 b 연산자2 c</pre> <p>두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.</p> @@ -30,7 +30,7 @@ console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함 console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜 </pre> -<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자<sub>1</sub> b) 연산자<sub>2</sub> c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자<sub>1</sub> (b 연산자<sub>2</sub> c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p> +<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자1 b) 연산자2 c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자1 (b 연산자2 c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p> <pre class="brush: js">a = b = 5; // a = (b = 5);와 같음 </pre> diff --git a/files/ko/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html index 83ae2e0b80..790ababd4e 100644 --- a/files/ko/web/javascript/reference/operators/property_accessors/index.html +++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html @@ -93,7 +93,7 @@ console.log(object[bar]); <h3 id="메서드_바인딩">메서드 바인딩</h3> -<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p> +<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드">메서드 바인딩</a>을 참고하세요.</p> <h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3> diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html index bc27366762..e74032c1c6 100644 --- a/files/ko/web/javascript/reference/operators/this/index.html +++ b/files/ko/web/javascript/reference/operators/this/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <h2 id="전역_문맥">전역 문맥</h2> -<p>전역 실행 문맥<sup>global execution context</sup>에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> +<p>전역 실행 맥락에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p> <pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === window); // true @@ -142,7 +142,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre> <h3 id="화살표_함수">화살표 함수</h3> -<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위<sup>lexical context</sup>입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> +<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p> <pre class="brush: js notranslate">var globalObject = this; var foo = (() => this); diff --git a/files/ko/web/javascript/reference/statements/async_function/index.html b/files/ko/web/javascript/reference/statements/async_function/index.html index ab34076481..28fbcaf016 100644 --- a/files/ko/web/javascript/reference/statements/async_function/index.html +++ b/files/ko/web/javascript/reference/statements/async_function/index.html @@ -38,9 +38,9 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <dl> <dt><code>statements</code></dt> - <dd><font face="Consolas, Liberation Mono, Courier, monospace">함수본문을 구성하는 내용.</font></dd> + <dd>함수 본문을 구성하는 내용.</dd> <dt> - <h3 id="반환_값"><font face="Consolas, Liberation Mono, Courier, monospace">반환 값</font></h3> + <h3 id="반환_값">반환 값</h3> <p>Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값.</p> </dt> diff --git a/files/ko/web/javascript/reference/statements/const/index.html b/files/ko/web/javascript/reference/statements/const/index.html index 1cbd7ea7aa..00f1eed2e9 100644 --- a/files/ko/web/javascript/reference/statements/const/index.html +++ b/files/ko/web/javascript/reference/statements/const/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Statements/const <p>상수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다. 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.</p> -<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let" title="temporal dead zone">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p> +<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p> <p>상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.</p> diff --git a/files/ko/web/javascript/reference/statements/do...while/index.html b/files/ko/web/javascript/reference/statements/do...while/index.html index 3e54d6367f..9cd6ed0e5c 100644 --- a/files/ko/web/javascript/reference/statements/do...while/index.html +++ b/files/ko/web/javascript/reference/statements/do...while/index.html @@ -30,7 +30,7 @@ while (<em>조건식</em>); <dd>루프가 실행될 때마다 평가되는 식입니다. 만약 조건식이 참으로 평가되었다면, <code>구문</code> 이 다시 실행됩니다. 만약 조건식이 거짓으로 평가되었다면, 자바스크립트는 <code>do...while</code>. 구문 밑에 있는 구문들을 실행시킵니다.</dd> </dl> -<h2 id="Examples" name="Examples">예제</h2> +<h2 id="Examples">예제</h2> <h3 id="do...while"><code>do...while</code></h3> diff --git a/files/ko/web/javascript/reference/statements/export/index.html b/files/ko/web/javascript/reference/statements/export/index.html index 1c15d4e7f9..98cb2ee55a 100644 --- a/files/ko/web/javascript/reference/statements/export/index.html +++ b/files/ko/web/javascript/reference/statements/export/index.html @@ -148,7 +148,7 @@ console.log(foo); // 4.555806215962888</pre> <h3 id="기본_내보내기_사용">기본 내보내기 사용</h3> -<p>단일 값을 내보낼 때나 모듈의 폴백<sup>fallback</sup> 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> +<p>단일 값을 내보낼 때나 모듈의 폴백 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> <pre class="brush: js">// module "my-module.js" export default function cube(x) { @@ -160,7 +160,7 @@ export default function cube(x) { <pre class="brush: js">import cube from './my-module.js'; console.log(cube(3)); // 27</pre> -<p><code><font face="Open Sans, arial, sans-serif">e</font>xport default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> +<p><code>export default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/statements/for...in/index.html b/files/ko/web/javascript/reference/statements/for...in/index.html index d51a3c79dc..f5e54dcac2 100644 --- a/files/ko/web/javascript/reference/statements/for...in/index.html +++ b/files/ko/web/javascript/reference/statements/for...in/index.html @@ -12,11 +12,11 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <p>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</p> -<h2 id="Syntax" name="Syntax">문법</h2> +<h2 id="Syntax">문법</h2> <pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre> -<h3 id="Parameters" name="Parameters">파라미터</h3> +<h3 id="Parameters">파라미터</h3> <dl> <dt><code>variable</code></dt> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <dd>반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.</dd> </dl> -<h2 id="Description" name="Description">설명</h2> +<h2 id="Description">설명</h2> <p><code>for...in</code>문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다.<br> <code>Array</code>나 <code>Object</code> 등 내장 constructor를 통해 만들어진 객체는 {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 <code>Object.prototype</code>, <code>String.prototype</code> 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. <code>for...in</code>문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.)</p> @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <p>이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.</p> -<h2 id="Example" name="Example">예제</h2> +<h2 id="Example">예제</h2> <h3 id="for...in의_사용">for...in의 사용</h3> diff --git a/files/ko/web/javascript/reference/statements/for/index.html b/files/ko/web/javascript/reference/statements/for/index.html index cba49dbba6..57c0df4971 100644 --- a/files/ko/web/javascript/reference/statements/for/index.html +++ b/files/ko/web/javascript/reference/statements/for/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Statements/for <dl> <dt><code>initialization</code></dt> - <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위<sup>scope</sup>에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> + <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> <br> 식의 결과는 버려집니다.</dd> <dt><code>condition</code></dt> diff --git a/files/ko/web/javascript/reference/statements/if...else/index.html b/files/ko/web/javascript/reference/statements/if...else/index.html index a6fb34c1ac..4e4c2abecc 100644 --- a/files/ko/web/javascript/reference/statements/if...else/index.html +++ b/files/ko/web/javascript/reference/statements/if...else/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Statements/if...else <dl> <dt><code>statement1</code></dt> <dd>조건이 참으로 평가될 경우 실행되는 문입니다.<br> - 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd> + 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd> </dl> <dl> diff --git a/files/ko/web/javascript/reference/statements/import/index.html b/files/ko/web/javascript/reference/statements/import/index.html index ce3a1536cb..8a4c9004e5 100644 --- a/files/ko/web/javascript/reference/statements/import/index.html +++ b/files/ko/web/javascript/reference/statements/import/index.html @@ -48,7 +48,7 @@ var promise = import("module-name");</pre> <h2 id="설명">설명</h2> -<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p> +<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 name 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p> <p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p> diff --git a/files/ko/web/javascript/reference/statements/index.html b/files/ko/web/javascript/reference/statements/index.html index cd83b9f1c0..bf423222d2 100644 --- a/files/ko/web/javascript/reference/statements/index.html +++ b/files/ko/web/javascript/reference/statements/index.html @@ -53,7 +53,7 @@ translation_of: Web/JavaScript/Reference/Statements <dt>{{jsxref("Statements/function", "function")}}</dt> <dd>지정된 매개변수를 갖는 함수를 선언합니다.</dd> <dt>{{jsxref("Statements/function*", "function*")}}</dt> - <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol" title="iterators">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd> + <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd> <dt>{{jsxref("Statements/return", "return")}}</dt> <dd>함수에 의해 반환되는 값을 지정합니다.</dd> <dt>{{jsxref("Statements/class", "class")}}</dt> diff --git a/files/ko/web/javascript/reference/statements/switch/index.html b/files/ko/web/javascript/reference/statements/switch/index.html index b4eb68e5a7..46b13e380d 100644 --- a/files/ko/web/javascript/reference/statements/switch/index.html +++ b/files/ko/web/javascript/reference/statements/switch/index.html @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Statements/switch <p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p> -<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> +<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> <h2 id="예제">예제</h2> diff --git a/files/ko/web/javascript/reference/statements/var/index.html b/files/ko/web/javascript/reference/statements/var/index.html index 4366c3ed73..6b71309f7b 100644 --- a/files/ko/web/javascript/reference/statements/var/index.html +++ b/files/ko/web/javascript/reference/statements/var/index.html @@ -109,7 +109,7 @@ var a, b = a = "A"; console.log(x + y); // undefinedA </pre> -<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y<font face="Open Sans, Arial, sans-serif">는 존재하여 </font></code><code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined && y === 'A'</code>, 이와 같은 결과가 됩니다.</p> +<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y</code>는 존재하여 <code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined && y === 'A'</code>, 이와 같은 결과가 됩니다.</p> <h3 id="다수의_변수들의_초기화">다수의 변수들의 초기화</h3> diff --git a/files/ko/web/javascript/reference/strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/index.html index 031985846d..90e1c5709c 100644 --- a/files/ko/web/javascript/reference/strict_mode/index.html +++ b/files/ko/web/javascript/reference/strict_mode/index.html @@ -171,7 +171,7 @@ with (obj) // !!! 구문 에러 <p>이름이 짧은 변수에 객체를 할당한 후, 변수에 해당하는 프로퍼티에 접근하는 간단한 대안은 <code>with</code> 를 대체할 준비가 되었습니다.</p> -<p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">eval("var x;")</span></font> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> +<p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <code>eval("var x;")</code> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p> <pre class="brush: js notranslate">var x = 17; var evalX = eval("'use strict'; var x = 42; x"); @@ -268,7 +268,7 @@ console.assert(fun.bind(true)() === true); <p>즉, 브라우저에서 엄격모드의 함수내 에서는 더 이상 <code>window</code> 객체를 <code>this</code> 를 통해 참조할 수 없습니다.</p> -<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 <code>인</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">수</span></font> 입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> +<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 인수입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p> <pre class="brush: js notranslate">function restricted() { @@ -340,7 +340,7 @@ function baz(){ // kosher <h2 id="브라우저에서의_엄격_모드">브라우저에서의 엄격 모드</h2> -<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </p> +<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </p> <h2 id="명세">명세</h2> diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html index aeaded7640..020febe480 100644 --- a/files/ko/web/javascript/reference/trailing_commas/index.html +++ b/files/ko/web/javascript/reference/trailing_commas/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Trailing_commas arr; // [1, 2, 3] arr.length; // 3</pre> -<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다<sup>sparse</sup>고 합니다(조밀한<sup>dense</sup> 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> +<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다(sparse)고 합니다(조밀한(dense) 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p> <pre class="brush: js notranslate">var arr = [1, 2, 3,,,]; arr.length; // 5 diff --git a/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html index 4db463d2e5..89c2719996 100644 --- a/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html @@ -56,7 +56,7 @@ original_slug: Learn/Common_questions/Como_a_internet_funciona <p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> -<p>Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de <em>roteador</em>. Este <em>roteador </em>tem um único trabalho: como um sinalizador em uma estação de trem, ter certeza de que a mensagem enviada por um determinado computador chege ao computador destinatário corretamente. Para enviar uma mensagem para o computador B, o computador A deve enviar a mensagem para o roteador, que por sua vez encaminha a mensagem para o computador B e tem a certeza de que a mensagem não foi entregue ao computador C.</p> +<p>Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de <em>roteador</em>. Este <em>roteador </em>tem um único trabalho: como um sinalizador em uma estação de trem, ter certeza de que a mensagem enviada por um determinado computador chegue ao computador destinatário corretamente. Para enviar uma mensagem para o computador B, o computador A deve enviar a mensagem para o roteador, que por sua vez encaminha a mensagem para o computador B e tem a certeza de que a mensagem não foi entregue ao computador C.</p> <p>Uma vez que nós adicionamos um roteador no sistema, nossa rede de 10 computadores apenas necessitará de 10 cabos: uma unica conexão para cada computador e um roteador com 10 conexões.</p> diff --git a/files/pt-br/web/html/element/input/checkbox/index.html b/files/pt-br/web/html/element/input/checkbox/index.html index 155d8301b2..d2e7ed1f71 100644 --- a/files/pt-br/web/html/element/input/checkbox/index.html +++ b/files/pt-br/web/html/element/input/checkbox/index.html @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/input/checkbox <pre class="brush: html"><form> <div> - <input type = "checkbox" id = "subscribeNews" nome = "subscribe" value = "<code>newsletter</code>"> + <input type = "checkbox" id = "subscribeNews" name = "subscribe" value = "<code>newsletter</code>"> <label for = "subscribeNews"> Subscreva a newsletter? </ label> </ div> <div> @@ -77,11 +77,11 @@ translation_of: Web/HTML/Element/input/checkbox <pre class="brush: html"><fieldset> <legend> Escolha seus interesses </ legend> <div> - <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <input type = "checkbox" id = "codificação" name = "interesse" value = "codificação"> <label for = "coding"> Codificação </ label> </ div> <div> - <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <input type = "checkbox" id = "música" name = "interesse" value = "música"> <label for = "music"> Música </ label> </ div> </ fieldset></pre> @@ -97,11 +97,11 @@ translation_of: Web/HTML/Element/input/checkbox <pre class="brush: html"><fieldset> <legend> Escolha seus interesses </ legend> <div> - <input type = "checkbox" id = "codificação" nome = "interesse" valor = "codificação" checked> + <input type = "checkbox" id = "codificação" name = "interesse" value = "codificação" checked> <label for = "coding"> Codificação </ label> </ div> <div> - <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <input type = "checkbox" id = "música" name = "interesse" value = "música"> <label for = "music"> Música </ label> </ div> </ fieldset></pre> @@ -142,7 +142,7 @@ translation_of: Web/HTML/Element/input/checkbox }); for(var i = 0; i <ingredientes.length; i ++) { - ingredientes [i] .addEventListener ('clique', updateDisplay); + ingredientes [i] .addEventListener ('click', updateDisplay); } função updateDisplay () { @@ -185,29 +185,29 @@ translation_of: Web/HTML/Element/input/checkbox <fieldset> <legend> Escolha seus interesses </ legend> <div> - <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <input type = "checkbox" id = "codificação" name = "interesse" value = "codificação"> <label for = "coding"> Codificação </ label> </ div> <div> - <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <input type = "checkbox" id = "música" name = "interesse" value = "música"> <label for = "music"> Música </ label> </ div> <div> - <input type = "checkbox" id = "arte" name = "interesse" valor = "arte"> + <input type = "checkbox" id = "arte" name = "interesse" value = "arte"> <label for = "art"> Art </ label> </ div> <div> - <input type = "checkbox" id = "sports" nome = "interesse" valor = "esportes"> + <input type = "checkbox" id = "sports" name = "interesse" value = "esportes"> <label for = "sports"> Esportes </ label> </ div> <div> - <input type = "checkbox" id = "cozinhar" nome = "interesse" valor = "cozinhar"> + <input type = "checkbox" id = "cozinhar" name = "interesse" value = "cozinhar"> <label for = "cooking"> Cozinhando </ label> </ div> <div> - <input type = "checkbox" id = "outro" nome = "interesse" valor = "outro"> + <input type = "checkbox" id = "outro" name = "interesse" value = "outro"> <label for = "other"> Outro </ label> - <input type = "text" id = "otherValue" nome = "outro"> + <input type = "text" id = "otherValue" name = "outro"> </ div> <div> <button type = "submit"> Enviar formulário </ button> @@ -252,10 +252,10 @@ otherText.style.visibility = 'oculto'; otherCheckbox.onchange = function () { if (otherCheckbox.checked) { - otherText.style.visibility = 'visível'; + otherText.style.visibility = 'visible'; otherText.value = ''; } outro { - otherText.style.visibility = 'oculto'; + otherText.style.visibility = 'hidden'; } };</pre> diff --git a/files/pt-br/web/http/status/index.html b/files/pt-br/web/http/status/index.html index e8657e252f..6059442979 100644 --- a/files/pt-br/web/http/status/index.html +++ b/files/pt-br/web/http/status/index.html @@ -166,7 +166,7 @@ translation_of: Web/HTTP/Status <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> <dd>Esta resposta de erro significa que o servidor, ao trabalhar como um gateway a fim de obter uma resposta necessária para manipular a requisição, obteve uma resposta inválida.</dd> <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> - <dd>O servidor não está pronto para manipular a requisição. Causas comuns são um servidor em manutenção ou sobrecarregado. Note que junto a esta resposta, uma página amigável explicando o problema deveria ser enviada. Estas respostas devem ser usadas para condições temporárias e o cabeçalho HTTP <code>Retry-After:</code> deverá, se posível, conter o tempo estimado para recuperação do serviço. O webmaster deve também tomar cuidado com os cabaçalhos relacionados com o cache que são enviados com esta resposta, já que estas respostas de condições temporárias normalmente não deveriam ser postas em cache.</dd> + <dd>O servidor não está pronto para manipular a requisição. Causas comuns são um servidor em manutenção ou sobrecarregado. Note que junto a esta resposta, uma página amigável explicando o problema deveria ser enviada. Estas respostas devem ser usadas para condições temporárias e o cabeçalho HTTP <code>Retry-After:</code> deverá, se possível, conter o tempo estimado para recuperação do serviço. O webmaster deve também tomar cuidado com os cabeçalhos relacionados com o cache que são enviados com esta resposta, já que estas respostas de condições temporárias normalmente não deveriam ser postas em cache.</dd> <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> <dd>Esta resposta de erro é dada quando o servidor está atuando como um gateway e não obtém uma resposta a tempo.</dd> <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> diff --git a/files/pt-br/web/javascript/equality_comparisons_and_sameness/index.html b/files/pt-br/web/javascript/equality_comparisons_and_sameness/index.html index 68ac8ecc6a..60ec376e2b 100644 --- a/files/pt-br/web/javascript/equality_comparisons_and_sameness/index.html +++ b/files/pt-br/web/javascript/equality_comparisons_and_sameness/index.html @@ -423,7 +423,7 @@ function attemptMutation(v) <dd>Cada um destes operadores usa o algoritmo ToInt32 internamente. Uma vez que existe apenas uma representação para 0 no tipo integer de 32 bits interno, -0 não vai sobreviver a uma ida e volta após uma operação inversa. Por exemplo, tanto <code>Object.is(~~(-0), -0)</code> e <code>Object.is(-0 << 2 >> 2, -0)</code> avaliar como <code>false</code>.</dd> </dl> -<p>Baseando-se em <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code> quando a sinalização de zeros não é levado em conta podem ser perigosos. Claro que, quando a intenção é fazer a distinção entre <code>-0</code> e <code>+0</code>, que faz exatamente o que é desejado.</p> +<p>Baseando-se em <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code> quando a sinalização de zeros não é levado em conta podem ser perigosos. Claro que, quando a intenção é fazer a distinção entre <code>-0</code> e <code>+0</code>, isso faz exatamente o que é desejado.</p> <h2 id="Veja_também">Veja também</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/undefined/index.html b/files/pt-br/web/javascript/reference/global_objects/undefined/index.html index 492c148cef..aaad218628 100644 --- a/files/pt-br/web/javascript/reference/global_objects/undefined/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/undefined/index.html @@ -52,7 +52,7 @@ else { </pre> -<div class="note"><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">Observação: O operarador de igualdade estrita (</span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">===</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">) tem que ser utilizado aqui uma vez que </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">x == undefined</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> também checa se </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">x</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> é nulo, enquanto o operador não o faz. </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">null</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> não é equivalente à </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">undefined</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">. Veja </span><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">{{jsxref("Operators/Comparison_Operators", "operadores de comparação")}} (em inglês) para maiores detalhes.</span></div> +<div class="note"><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">Observação: O operador de igualdade estrita (</span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">===</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">) tem que ser utilizado aqui uma vez que </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">x == undefined</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> também checa se </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">x</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> é nulo, enquanto o operador não o faz. </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">null</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);"> não é equivalente à </span><code style="font-style: italic; color: rgba(0, 0, 0, 0.65098);">undefined</code><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">. Veja </span><span style="color: rgba(0, 0, 0, 0.65098); font-style: italic; background-color: rgba(231, 228, 157, 0.247059);">{{jsxref("Operators/Comparison_Operators", "operadores de comparação")}} (em inglês) para maiores detalhes.</span></div> <h3 id="Operador_Typeof_e_undefined"><code>Operador Typeof</code> e <code>undefined</code></h3> diff --git a/files/pt-br/web/javascript/reference/statements/try...catch/index.html b/files/pt-br/web/javascript/reference/statements/try...catch/index.html index 001e7fcc13..9d3aa70bcd 100644 --- a/files/pt-br/web/javascript/reference/statements/try...catch/index.html +++ b/files/pt-br/web/javascript/reference/statements/try...catch/index.html @@ -214,9 +214,9 @@ catch (ex) { <p>Qualquer exceção lançada será capturada apenas uma vez pelo bloco <code>catch</code> envolvente mais próximo, a não ser que seja relançada. Obviamente qualquer nova exceção elevada no bloco "interno" (pois código em um bloco <code>catch</code> pode fazer algo que lance), será capturado pelo bloco "externo".</p> -<h3 id="Retornando_de_um_bloco_finnaly">Retornando de um bloco <code>finnaly</code></h3> +<h3 id="Retornando_de_um_bloco_finnaly">Retornando de um bloco <code>finally</code></h3> -<p>Caso o bloco f<code>inally</code> retorne um valor, esse valor torna-se o valor de retorno do produto de <code>try-catch-finally </code>inteiro, independente de qualquer declaração return nos blocos <code>try</code> e <code>catch</code>. Isso inclui exceções lançadas dentro do bloco <code>catch</code>:</p> +<p>Caso o bloco <code>finally</code> retorne um valor, esse valor torna-se o valor de retorno do produto de <code>try-catch-finally </code>inteiro, independente de qualquer declaração return nos blocos <code>try</code> e <code>catch</code>. Isso inclui exceções lançadas dentro do bloco <code>catch</code>:</p> <pre><code>try { try { @@ -239,7 +239,7 @@ catch (ex) { // "inner" "oops" // "finally"</pre> -<p>O "oops" externo não é lançado devido ao retorno do bloco f<code>inally</code>. O mesmo se aplicaria a qualquer valor retornado do bloco <code>catch</code>.</p> +<p>O "oops" externo não é lançado devido ao retorno do bloco <code>finally</code>. O mesmo se aplicaria a qualquer valor retornado do bloco <code>catch</code>.</p> <h2 id="See_also" name="See_also">Vejam também</h2> diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html index d5862806e5..9034056b6c 100644 --- a/files/ru/web/html/element/code/index.html +++ b/files/ru/web/html/element/code/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/code <p>Этот элемент включает в себя только <a href="/ru/Web/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> -<h2 id="Пример">Пример</h2> +<h2 id="Example">Пример</h2> <p>Текстовый абзац, включающий <code><code></code>:</p> diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html index b8cd23bd9a..ef2663f832 100644 --- a/files/ru/web/http/overview/index.html +++ b/files/ru/web/http/overview/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Overview <p>Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, обычно веб-браузером, называются <em>запросами</em>, а сообщения, отправленные сервером, называются <em>ответами</em>.</p> -<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p> +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p> <h2 id="Составляющие_систем_основанных_на_HTTP">Составляющие систем, основанных на HTTP</h2> @@ -101,11 +101,11 @@ translation_of: Web/HTTP/Overview <h2 id="HTTP_поток">HTTP поток</h2> -<p>Когда клиент хочет взаимодействовать с сервером, являясь конечным сервером или промежуточным прокси, он выполняет следующие шаги:</p> +<p>Когда клиент хочет взаимодействовать с сервером, являющимся конечным сервером или промежуточным прокси, он выполняет следующие шаги:</p> <ol> <li>Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса или запросов, и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее, или открыть несколько TCP-соединений к серверу.</li> - <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) -- человеко-читаемо. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтения напрямую, но принципиально остаются такими же. + <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтения напрямую, но принципиально остаются такими же. <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr</code></pre> @@ -125,10 +125,12 @@ Content-Type: text/html <li>Закрывает или переиспользует соединение для дальнейших запросов.</li> </ol> -<p>Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями. HTTP-конвейер был заменён в HTTP/2 на более надёжные мультиплексные запросы во фрейме.</p> +<p>Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями. HTTP-конвейер был заменён в HTTP/2 на более надёжные мультиплексные запросы во фрейме.</p> <h2 id="HTTP_сообщения">HTTP сообщения</h2> +<p><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Messages">Подробнее в отдельной статье «Сообщения HTTP»</a></p> + <p>HTTP/1.1 и более ранние HTTP сообщения человеко-читаемы. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.</p> <p>Существует два типа HTTP сообщений, запросы и ответы, каждый в своём формате.</p> diff --git a/files/ru/web/javascript/reference/global_objects/promise/index.html b/files/ru/web/javascript/reference/global_objects/promise/index.html index b4075019a6..e08551c0af 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/index.html @@ -93,16 +93,6 @@ new Promise(function(resolve, reject) { ... });</pre> </dd> </dl> -<h2 id="Прототип_Promise">Прототип <code>Promise</code></h2> - -<h3 id="Свойства_2">Свойства</h3> - -<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Свойства')}}</p> - -<h3 id="Методы_2">Методы</h3> - -<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Методы')}}</p> - <h2 id="Создание_промиса">Создание промиса</h2> <p>Объект <code>Promise</code> создаётся при помощи ключевого слова <code>new</code> и своего конструктора. Конструктор <code>Promise</code> принимает в качестве аргумента функцию, называемую "исполнитель" (<em>executor function</em>). Эта функция должна принимать две функции-колбэка в качестве параметров. Первый из них (<code>resolve</code>) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй колбэк (<code>reject</code>) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.</p> diff --git a/files/zh-cn/mdn/contribute/index.html b/files/zh-cn/mdn/contribute/index.html index dfe3a9361d..bc427255e1 100644 --- a/files/zh-cn/mdn/contribute/index.html +++ b/files/zh-cn/mdn/contribute/index.html @@ -15,7 +15,7 @@ translation_of: MDN/Contribute <div class="notecard note"> <h4>注意</h4> - <p>目前 <a href="https://hacks.mozilla.org/2020/10/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN 的内容已经迁移至 GitHub </a>，之前编辑网站内容的已经失效。不论你之前是否参与编辑过 MDN 网站的内容，你都可以在<a href="/zh-CN/docs/MDN/Contribute/Getting_started">初识 MDN</a> 中了解新的参与方式。</p> + <p>目前 <a href="https://hacks.mozilla.org/2020/10/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN 的内容已经迁移至 GitHub </a>，之前编辑网站内容的途径已经失效。不论你之前是否参与编辑过 MDN 网站的内容，你都可以在<a href="/zh-CN/docs/MDN/Contribute/Getting_started">初识 MDN</a> 中了解新的参与方式。</p> </div> <h2 id="What_can_I_do_to_help">我可以做些什么？</h2> @@ -108,7 +108,7 @@ translation_of: MDN/Contribute </ul> <div class="notecard note"> -<p><strong>注意</strong>：如果你在使用 MDN 时发现了一些错误，却不知道怎么改正，你可以<a href="https://github.com/mdn/content/issues/new">提交一个 issue</a>。记得写个合适的标题（你可以在 issue 列表里参考一下别人的格式），并简单描述一下问题的位置和涉及到的内容，这样可以方便别人确定问题到底出在哪。</p> +<p><strong>注意</strong>：如果你在使用 MDN 时发现了一些错误，却不知道怎么改正，你可以<a href="https://github.com/mdn/content/issues/new/choose">提交一个 issue</a>。记得写个合适的标题（你可以在 <a href="https://github.com/mdn/content/issues">issue 列表</a>里参考一下别人的格式），并简单描述一下问题的位置和涉及到的内容，这样可以方便别人确定问题到底出在哪。如果你发现的问题属于翻译上的错误，<a href="https://github.com/mdn/translated-content/issues/new/choose">向 Translated-content Repo提交一个 issue</a> 会更加合适。</p> </div> <h2 id="Other_useful_pages">相关链接</h2> diff --git a/files/zh-cn/mdn/structures/macros/index.html b/files/zh-cn/mdn/structures/macros/index.html index b41123ab3f..4227374bac 100644 --- a/files/zh-cn/mdn/structures/macros/index.html +++ b/files/zh-cn/mdn/structures/macros/index.html @@ -1,5 +1,5 @@ --- -title: Macros +title: 使用宏 slug: MDN/Structures/Macros tags: - Guide @@ -11,36 +11,32 @@ translation_of: MDN/Structures/Macros --- <div>{{MDNSidebar}}</div> -<p><a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> 平台为 MDN 提供了强大的宏系统——<a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>，使得 MDN 能够自动地去做各种东西。本文提供一些信息以便大家知道如何使用 MDN 上的文章内的宏。</p> +<p><span class="seoSummary">为了自动化执行某些工作，<a href="/zh-CN/docs/MDN/Yari">Yari</a> 平台提供了一个强大的宏系统——<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript</a>。本文提供了一些相关信息，方便你在参与编辑 MDN 时，使用这些宏。</span></p> -<p>鉴于本文只是 KumaScript 的简介，<a href="/zh-CN/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript 指南</a>提供了更深入的内容。</p> +<p>本文只是简要介绍了 KumaScript，<a href="/zh-CN/docs/MDN/Kuma/KumaScript_guide" title="/zh-CN/docs/MDN/Kuma/KumaScript_guide">KumaScript 指南</a>提供了更深入的内容，帮助你使用和掌握它。</p> -<h2 id="宏是如何实现的">宏是如何实现的</h2> +<h2 id="How_macros_are_implemented">宏是如何实现的</h2> -<p>MDN使用的Macros(宏)是基于<a href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>执行环境，并在服务端执行运行。这里包括了大量的代码库，另外对此还提供了丰富的wiki说明文档内容。如果你希望能学习到更多的内容，可以查看 <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript 指南</a>， <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">KumaScript reference</a> 则提供了更多关于这些代码库和KumaScript的API的实现机理。</p> +<p>MDN 使用宏是基于运行于服务器上的 JavaScript 代码实现的，并由 <a href="http://nodejs.org/">Node.js</a> 解释执行。在此之上，已经实现了一个丰富的工具库，让宏可以与这个平台及其中的内容进行互动。</p> -<h2 id="在文章中使用宏">在文章中使用宏</h2> +<h2 id="Using_a_macro_in_content">在文章中使用宏</h2> -<p>要实际使用宏，只需将对宏的调用括在一对双括号中，其参数（如果有）括在括号中;如下：</p> +<p>要实际使用宏，只需将对宏的调用和可能需要的参数写在一对双括号中，如下：</p> <pre class="notranslate">\{{macroname(parameter-list)}}</pre> <p>关于宏调用的一些注意事项：</p> <ul> - <li>宏名称区分大小写，但有些尝试是为了纠正常见的大写错误;即使宏名称在其中使用大写，您也可以使用全部小写，并且您可以将名称通常以小写字母开头的宏大写。</li> - <li>参数以逗号分隔</li> - <li>如果没有参数，您可以完全省略括号; <code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 完全相同。</li> - <li>数字参数可以是引号，也可以不是。这取决于您（但是，如果您的版本号中包含多个小数，则需要在引号中）</li> - <li>如果您遇到错误，请仔细检查您的代码。如果仍然无法弄清楚发生了什么，请参阅<a href="/en-US/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Troubleshooting KumaScript errors</a>以获取帮助。</li> + <li>宏的名称区分大小写，但一些常见的大小写错误也可以在执行时被纠正。比如将某个名称中含有大写的宏，全部使用小写字母，或者将某些名字以小写开头的宏大写。</li> + <li>参数以逗号分隔。</li> + <li>如果没有参数，括号可以省略：<code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 的效果是。</li> + <li>数字参数可以是引号，也可以不是。这取决于您（但是，像版本号这类可能被识别成小数的参数，则包含在引号中）</li> + <li>如果遇到错误，请先仔细检查代码。如果仍然无法弄清楚发生了什么，请参阅<a href="/zh-CN/docs/MDN/Tools/KumaScript/Troubleshooting">排查 KumaScript 中的错误</a>以获取帮助。</li> </ul> -<p>宏被高度缓存;对于任何一组输入值（参数和环境值，例如运行宏的URL），结果都会被存储和重用。这意味着宏仅在输入发生变化时才实际运行。</p> +<p>宏的几乎所有执行结果都会被缓存，以便被重用来加快执行速度。这意味着宏仅在输入发生变化时才实际运行，包括调用时的参数以及环境值（例如这个宏被调用时所在的路径）。</p> -<div class="note"> -<p><strong>注意:</strong> 您可以通过在浏览器中强制刷新页面（即转移重新加载）来强制重新评估页面上的所有宏。</p> -</div> +<p>宏既可以用来做一些简单的工作，比如插入更大的文本块或从MDN的另一部分交换内容一样简单，也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p> -<p>宏可以像插入更大的文本块或从MDN的另一部分交换内容一样简单，也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p> - -<p>您可以在<a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Commonly-used macros</a>页面上阅读我们最常用的宏;另外，这里有<a href="https://developer.mozilla.org/en-US/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete list of all macros</a>。大多数宏都有内置的文档，作为顶部的注释。</p> +<p>您可以在<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">常用的宏</a>页面看到一些我们最常用到的宏，还可以在我们 Github 的仓库中，浏览<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">所有可用的宏</a>。大多数宏顶部的注释中，都有内置的文档帮助你了解它的作用。</p> diff --git a/files/zh-cn/mdn/structures/macros/other/index.html b/files/zh-cn/mdn/structures/macros/other/index.html new file mode 100644 index 0000000000..d9dd6f2ea3 --- /dev/null +++ b/files/zh-cn/mdn/structures/macros/other/index.html @@ -0,0 +1,92 @@ +--- +title: 其他需要注意的宏 +slug: MDN/Structures/Macros/Other +tags: + - Macros + - Reference +--- +<div>{{MDNSidebar}}</div> + +<p>In contrast to the macros listed in <a href="/en-US/docs/MDN/Structures/Macros/Commonly-used_macros">Commonly-used macros</a>, the macros documented in this article are used infrequently or only in specific contexts, or are deprecated.</p> + +<h2 id="Special_contexts">Special contexts</h2> + +<p>These macros are used only with particular contexts, such as a specific API reference.</p> + +<ul> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/Interwiki.ejs">Interwiki</a></code> makes it easy to create interwiki links. Currently it supports linking to Wikipedia and Wikimo. The first parameter is the name of the wiki ("wikipedia" or "wikimo"), and the second is the path of the article. For example, <code>\{\{interwiki("wikipedia", "Firefox")\}\}</code> shows up as {{ interwiki("wikipedia", "Firefox") }}. This template auto-detects the page language and directs to the same language on Wikipedia, for example.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/RFC.ejs">RFC</a></code> creates a link to the specified RFC, given its number. The syntax is: <code>\{\{RFC(number)\}\}</code>. For example, <code>\{\{RFC(2616)\}\}</code> becomes {{ RFC(2616) }}.</li> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/anch.ejs">anch</a></code> macro inserts a link to an anchor. <code>\{\{Anch("top")\}\}</code> produces <code><a href="#top">top</a></code> ({{ Anch("top") }}). You can also add a second parameter which contains replacement text to display as the link text.</li> +</ul> + +<h3 id="Landing_page_components">Landing page components</h3> + +<p>We have an assortment of macros that can be used to automatically generate the contents of landing pages. Here they are.</p> + +<h4 id="Lists_of_subpages">Lists of subpages</h4> + +<ul> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/ListSubpages.ejs">ListSubpages</a></code> generates an unordered list of links to all the immediate children of the current page; useful for automatically generating tables of contents for sets of documentation.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/LandingPageListSubpages.ejs">LandingPageListSubpages</a></code> outputs a two-column definition list of all immediate subpages of the current page, with their titles as the {{HTMLElement("dt")}} and their SEO summary as the {{HTMLElement("dd")}}. This makes it easy to automatically generate reasonably attractive landing pages.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/NavListWithPrioritizedPages.ejs">NavListWithPrioritizedPages</a></code> generates an ordered list formatted properly for use in a zone navigation sidebar (or quicklinks). As input, you can specify zero or more page slugs that should be pulled out of the main list and instead inserted at the top of the list, in the given order. All remaining pages are placed in the list alphabetically. One level of subpages is included.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/APIListAlpha.ejs">APIListAlpha</a></code> builds a list of the current page's subpages, formatted as a list of API terms, divided up by first letter. There are three parameters. The first is 0 if you want to include all top-level subpages or 1 to leave out subpages with "." in their names. The second and third let you add text to display as part of the name in each link. This can be used to add "<" and ">" for element links, or to add "()" at the end of lists of method names.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/SubpagesWithSummaries.ejs">SubpagesWithSummaries</a></code> constructs a definition list of all the immediate children of the current page. There is no other formatting done. You can get a two-column list ready for use as a multi-column landing page using <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/LandingPageListSubpages.ejs">LandingPageListSubpages</a></code>.</li> +</ul> + +<h3 id="Quicklinks">Quicklinks</h3> + +<p>We have some macros specifically designed to create <a href="/en-US/docs/MDN/Structures/Quicklinks">quicklinks</a>:</p> + +<ul> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/MakeSimpleQuicklinks.ejs">MakeSimpleQuicklinks</a></code> macro creates a flat list of links in the quicklinks box. Give it a set of paths to destination pages as its input arguments. Each link's text is the page title, and each link has a tooltip derived from the page summary.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/QuickLinksWithSubpages.ejs">QuickLinksWithSubpages</a></code> creates a set of quicklinks comprised of the pages below the current page (or specified page, if one is given). Up to two total levels of depth are generated.</li> +</ul> + +<h3 id="Transclusion">Transclusion</h3> + +<p><strong>Transclusion</strong> is the embedding of part or all of one page into another. Exercise caution when using this macro, to ensure that the transcluded content makes sense in the context of the page it is embedded into.</p> + +<p><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/page.ejs">page</a></code> lets you embed some or all of a specific page into a document. It accepts five parameters:</p> + +<ol> + <li>The URI of the page to transclude. For example, "/en-US/docs/MDN/About".</li> + <li>The name of the section within the page to transclude. This can be specified either as the title string or as the ID of a block to copy over. If not specified, the entire article is transcluded. {{optional_inline}}</li> + <li>The revision number of the page version to transclude. This feature is not currently implemented, but would allow including text from specific versions of an article. {{unimplemented_inline}}</li> + <li>A Boolean value indicating whether or not to show the heading of the top-level section being transcluded. This is useful if you wish to specify your own heading. The default value is false, meaning the heading is not included by default. {{optional_inline}}</li> + <li>The heading level to use as the top heading level. This adjusts the outermost first-discovered level of the transcluded content to the specified number, and all other headings correspondingly. This lets you include content that has its own headings but adjust them to match the heading level at which you're including them. If you don't specify this value, the headings are not adjusted. {{unimplemented_inline}}</li> +</ol> + +<h4 id="Example_without_heading">Example without heading</h4> + +<p>\{{Page("/en-US/docs/MDN/About", "How you can help")}}</p> + +<p>Result:</p> + +<p>{{Page("/en-US/docs/MDN/About", "How you can help")}}</p> + +<h4 id="Example_with_heading">Example with heading</h4> + +<p>\{{Page("/en-US/docs/MDN/About", "How you can help", 0, 1)}}</p> + +<p>Result:</p> + +<p>{{Page("/en-US/docs/MDN/About", "How you can help", 0, 1)}}</p> + +<h2 id="Deprecated">Deprecated</h2> + +<p>These macros have been replace by other ways of doing the same thing, and should no longer be used. If you find them in existing articles, please replace them.</p> + +<h3 id="Linking">Linking</h3> + +<ul> + + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/SectionOnPage.ejs">SectionOnPage</a></code> macro creates a phrase that links to both the name of a section and the article containing that section. For example, <code>\{{SectionOnPage("/en-US/docs/Mozilla/Firefox/Releases/21", "Changes for Web developers")}}</code> outputs the following: <em>{{SectionOnPage("/en-US/docs/Mozilla/Firefox/Releases/21", "Changes for Web developers")}}</em>.</li> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/manch.ejs">manch</a></code> inserts a link to a method within the current interface; this is intended only for use in interface documentation pages. <code>\{\{manch("foo")\}\}</code> produces <code><code><a href="current/path#foo">foo()</a></code></code> ({{ manch("foo") }}).</li> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/Link.ejs">Link</a></code> macro inserts a link to the specified page on MDN, using the page's title as the visible string to click on, and the tooltip picked up from the page's SEO summary.</li> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/LinkItem.ejs">LinkItem</a></code> macro inserts a link to a specified URL, with the indicated text as the visible string to click on. The link automatically picks up as its tooltip the summary of the target page. This differs from <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/Link.ejs">Link</a></code> in that you must specify the title.</li> + <li>The <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/LinkItemDL.ejs">LinkItemDL</a></code> macro inserts a link to a specified URL, with the indicated text as a {{HTMLElement("dt")}} which is also the link. The {{HTMLElement("dd")}} element contains the specified page's summary.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/funcref.ejs">funcref</a></code> creates links to global functions (usually C++) documented on top-level pages. However, such pages are no longer created at the top-level of MDN.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/source.ejs">source</a></code> allows you to link to a Mozilla source code file without having to type a long MXR URL using this syntax: <code>\{\{Source("browser/Makefile.in")\}\}</code>. This gives you: {{ Source("browser/Makefile.in") }}. The text of the link is the path provided; if you want different text, then just provide a second parameter, like so: <code>\{\{Source("browser/Makefile.in", "the browser/ Makefile.in")\}\}</code>, which produces {{ Source("browser/Makefile.in", "the browser/ Makefile.in") }}. Note that the link will be to the very latest version of the file in bleeding-edge code.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/Source_cvs.ejs">Source_cvs</a></code> works just like <code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/source.ejs">source</a></code>, except it links to the <a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS">CVS</a> repository instead of the newer <a href="/en-US/docs/Mozilla/Developer_guide/mozilla-central">mozilla-central</a> one.</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/LXRSearch.ejs">LXRSearch</a></code> can be used to create an LXR search URL.</li> +</ul> diff --git a/files/zh-cn/mdn/yari/index.html b/files/zh-cn/mdn/yari/index.html index c48e06b138..07b623bec6 100644 --- a/files/zh-cn/mdn/yari/index.html +++ b/files/zh-cn/mdn/yari/index.html @@ -5,7 +5,6 @@ tags: - Yari - Landing - MDN Meta -translation_of: MDN/Yari --- <div>{{MDNSidebar}}</div> diff --git a/files/zh-cn/web/api/document/execcommand/index.html b/files/zh-cn/web/api/document/execcommand/index.html index 95624325e6..355a4bd33f 100644 --- a/files/zh-cn/web/api/document/execcommand/index.html +++ b/files/zh-cn/web/api/document/execcommand/index.html @@ -138,6 +138,8 @@ translation_of: Web/API/Document/execCommand 该属性已经废弃，使用 styleWithCSS 代替。</dd> <dt><code>styleWithCSS</code></dt> <dd>用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。</dd> + <dt><code>AutoUrlDetect</code></dt> + <dd>更改浏览器自动链接行为（仅IE浏览器支持）</dd> </dl> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/api/element/after/index.html b/files/zh-cn/web/api/element/after/index.html new file mode 100644 index 0000000000..ea111ec412 --- /dev/null +++ b/files/zh-cn/web/api/element/after/index.html @@ -0,0 +1,91 @@ +--- +title: Element.after() +slug: Web/API/Element/after +translation_of: Web/API/Element/after +original_slug: Web/API/ChildNode/after +tags: + - API + - DOM + - Method + - Node + - Reference +browser-compat: api.Element.after +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.after()</code> </strong>方法会在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。</p> + +<h2 id="Syntax">语法</h2> + +<pre class="brush: js"> +after(... nodes) +</pre> + +<h3 id="Parameters">参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。</dd> +</dl> + +<h3 id="Exceptions">错误</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 在某些不正确的层级结构进行了插入操作。</li> +</ul> + +<h2 id="Examples">示例</h2> + +<h3 id="Inserting_an_element">插入元素</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.after(span); + +console.log(container.outerHTML); +// "<div><p></p><span></span></div>" +</pre> + +<h3 id="Inserting_text">插入文本</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); + +p.after("Text"); + +console.log(container.outerHTML); +// "<div><p></p>Text</div>"</pre> + +<h3 id="Inserting_an_element_and_text">同时插入元素和文本</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.after(span, "Text"); + +console.log(container.outerHTML); +// "<div><p></p><span></span>Text</div>"</pre> + +<h2 id="Specifications">规范</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">相关链接</h2> + +<ul> + <li>{{domxref("Element.before()")}}</li> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/before/index.html b/files/zh-cn/web/api/element/before/index.html new file mode 100644 index 0000000000..11553a0194 --- /dev/null +++ b/files/zh-cn/web/api/element/before/index.html @@ -0,0 +1,193 @@ +--- +title: Element.before() +slug: Web/API/Element/before +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Element/before +original_slug: Web/API/ChildNode/before +browser-compat: api.Element.before +--- +<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> + +<p> <code><strong>ChildNode</strong></code><strong><code>.before</code></strong> 方法可以在<code>ChildNode这个节点的父节点中插入一些列的</code> {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象，位置就是在<code>ChildNode节点的前面，</code>{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}}节点一样的方式来完成插入的。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">[Throws, Unscopable] +void Element.before((Node or DOMString)... nodes); +</pre> + +<h3 id="Parameters参数">Parameters参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} </dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 当节点插入了错误的层级就会出现报错，需要遵循html标签的层级关系，</li> +</ul> + +<h2 id="Examples事例">Examples事例</h2> + +<h3 id="Inserting_an_element插入元素节点">Inserting an element插入元素节点</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.before(span); + +console.log(parent.outerHTML); +// "<div><span></span><p></p></div>" +</pre> + +<h3 id="Inserting_text插入文本节点">Inserting text插入文本节点</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); + +child.before("Text"); + +console.log(parent.outerHTML); +// "<div>Text<p></p></div>"</pre> + +<h3 id="Inserting_an_element_and_text同时插入文本和元素">Inserting an element and text同时插入文本和元素</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.before(span, "Text"); + +console.log(parent.outerHTML); +// "<div><span></span>Text<p></p></div>"</pre> + +<h3 id="Element.before()_is_unscopable不可使用区域"><code>Element.before()</code> is unscopable不可使用区域</h3> + +<p>The <code>before()</code> 不能配合with声明使用，See {{jsxref("Symbol.unscopables")}} for more information.</p> + +<pre class="brush: js">with(node) { + before("foo"); +} +// ReferenceError: before is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>兼容ie9或者更高版本的方法，You can polyfill the <code>before() method</code> in Internet Explorer 9 and higher with the following code:</p> + +<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('before')) { + return; + } + Object.defineProperty(item, 'before', { + configurable: true, + enumerable: true, + writable: true, + value: function before() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.parentNode.insertBefore(docFrag, this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'Element.before()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(39)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(39)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> + <li>{{domxref("ChildNode.after()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/remove/index.html b/files/zh-cn/web/api/element/remove/index.html new file mode 100644 index 0000000000..b244385222 --- /dev/null +++ b/files/zh-cn/web/api/element/remove/index.html @@ -0,0 +1,98 @@ +--- + +title: Element.remove() +slug: Web/API/Element/remove +tags: + - API + - Element + - DOM + - Method +translation_of: Web/API/Element/remove +original_slug: Web/API/ChildNode/remove +browser-compat: api.Element.remove +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>Element.remove()</strong></code> 方法，把对象从它所属的 DOM 树中删除。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>node</var>.remove();</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_remove()">使用 <code>remove()</code></h3> + +<pre class="brush: html"><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> +<div id="div-03">Here is div-03</div> +</pre> + +<pre class="brush: js">var el = document.getElementById('div-02'); +el.remove(); +// id 为 'div-02' 的 div 被删掉了 +</pre> + +<p>{{EmbedLiveSample('使用_remove()')}}</p> + +<h3 id="Element.remove()_是不可见的"><code>Element.remove()</code> 是不可见的</h3> + +<p>在 <code>with</code> 语句中，<code>remove()</code> 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。</p> + +<pre class="brush: js">with(node) { + remove(); +} +// ReferenceError: remove is not defined</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>You can polyfill the <code>remove()</code> method in Internet Explorer 9 and higher with the following code:</p> + +<pre class="brush: js">//https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('remove')) { + return; + } + Object.defineProperty(item, 'remove', { + configurable: true, + enumerable: true, + writable: true, + value: function remove() { + this.parentNode.removeChild(this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'Element.remove')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.remove")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("ChildNode")}} 纯接口。</li> + <li> + <div class="syntaxbox">实现此纯接口的对象类型： {{domxref("CharacterData")}}、{{domxref("Element")}} , 和 {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/replacewith/index.html b/files/zh-cn/web/api/element/replacewith/index.html new file mode 100644 index 0000000000..13fe96c23b --- /dev/null +++ b/files/zh-cn/web/api/element/replacewith/index.html @@ -0,0 +1,116 @@ +--- +title: Element.replaceWith() +slug: Web/API/Element/replaceWith +tags: + - API + - DOM + - Method + - Element + - Reference +browser-compat: api.Element.replaceWith +translation_of: Web/API/Element/replaceWith +original_slug: Web/API/ChildNode/replaceWith +--- +<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> + +<p><code><strong>ChildNode</strong></code><strong><code>.replaceWith()</code></strong> 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象，替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">[Throws, Unscopable] +void ChildNode.replaceWith((Node or DOMString)... nodes); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>节点</code></dt> + <dd>一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。</dd> +</dl> + +<h3 id="例外">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 无法在层次结构中的指定点插入节点。</li> +</ul> + +<h2 id="案例">案例</h2> + +<h3 id="Using_replaceWith">Using <code>replaceWith()</code></h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.replaceWith(span); + +console.log(parent.outerHTML); +// "<div><span></span></div>" +</pre> + +<h3 id="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> is unscopable</h3> + +<p><code>replaceWith()</code>的方法并没有作用于with语句. 参考 {{jsxref("Symbol.unscopables")}} 获取更多信息.</p> + +<pre class="brush: js">with(node) { + replaceWith("foo"); +} +// ReferenceError: replaceWith is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>你可以在IE9及更高级的浏览器中使用下面的代码向上兼容<code>replaceWith()</code>的方法:</p> + +<pre class="brush: js">(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('replaceWith')) { + return; + } + Object.defineProperty(item, 'replaceWith', { + configurable: true, + enumerable: true, + writable: true, + value: function replaceWith() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.parentNode.replaceChild(docFrag, this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.ChildNode.replaceWith")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/fetch_api/using_fetch/index.html b/files/zh-cn/web/api/fetch_api/using_fetch/index.html index d08d605958..2aef1ba300 100644 --- a/files/zh-cn/web/api/fetch_api/using_fetch/index.html +++ b/files/zh-cn/web/api/fetch_api/using_fetch/index.html @@ -157,7 +157,7 @@ fetch('https://example.com/posts', { <h3 id="检测请求是否成功">检测请求是否成功</h3> -<p>如果遇到网络故障，{{domxref("GlobalFetch.fetch","fetch()")}} promise 将会 reject，带上一个 {{jsxref("TypeError")}} 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 <code>fetch()</code> 是否成功，需要包含 promise resolved 的情况，此时再判断 {{domxref("Response.ok")}} 是不是为 true。类似以下代码：</p> +<p>如果遇到网络故障或服务端的 CORS 配置错误时，{{domxref("GlobalFetch.fetch","fetch()")}} promise 将会 reject，带上一个 {{jsxref("TypeError")}} 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 <code>fetch()</code> 是否成功，需要包含 promise resolved 的情况，此时再判断 {{domxref("Response.ok")}} 是不是为 true。类似以下代码：</p> <pre class="brush: js notranslate">fetch('flowers.jpg').then(function(response) { if(response.ok) { diff --git a/files/zh-cn/web/api/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..4cf1dfc0b7 --- /dev/null +++ b/files/zh-cn/web/api/renderingcontext/index.html @@ -0,0 +1,30 @@ +--- +title: RenderingContext +slug: Web/API/RenderingContext +translation_of: Web/API/RenderingContext +original_slug: Web/API/RenderingContext +--- +<p>{{APIRef("Canvas API")}}</p> + +<p><code><strong>RenderingContext</strong></code> 是一个辅助类型，描述下面任何一个渲染上下文： {{domxref("CanvasRenderingContext2D")}}， {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}} （继承自 <code>WebGLRenderingContext</code>）。</p> + +<p>这是简化规范的辅助类型，它不是一个接口，也没有对象实现它。</p> + +<h2 id="规范描述">规范描述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p>
\ No newline at end of file diff --git a/files/zh-cn/web/api/web_workers_api/index.html b/files/zh-cn/web/api/web_workers_api/index.html index d9ee40bbaa..ffc27215d7 100644 --- a/files/zh-cn/web/api/web_workers_api/index.html +++ b/files/zh-cn/web/api/web_workers_api/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Web_Workers_API <p>使用构造函数（例如,{{domxref("Worker.Worker", "Worker()")}}）创建一个<strong> worker</strong> 对象, 构造函数接受一个 JavaScript文件URL — 这个文件包含了将在 worker 线程中运行的代码。worker 将运行在与当前 {{domxref("window")}}不同的另一个全局上下文中，这个上下文由一个对象表示，标准情况下为{{domxref("DedicatedWorkerGlobalScope")}} （标准 workers 由单个脚本使用; 共享workers使用{{domxref("SharedWorkerGlobalScope")}}）。</p> -<p>你可以在worker 线程中运行任意的代码，但注意存在一些例外：直接在 worker 线程中操纵 DOM 元素；或使用{{domxref("window")}} 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的，包括 <a href="/en-US/docs/WebSockets">WebSockets</a>，以及诸如 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 和 FireFox OS 中独有的 <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a> 这一类数据存储机制。更多信息请参见： <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> 。</p> +<p>你可以在worker 线程中运行任意的代码，但注意存在一些例外：你不能直接在 worker 线程中操纵 DOM 元素；或使用{{domxref("window")}} 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的，包括 <a href="/en-US/docs/WebSockets">WebSockets</a>，以及诸如 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 和 FireFox OS 中独有的 <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a> 这一类数据存储机制。更多信息请参见： <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> 。</p> <p>主线程和 worker 线程相互之间使用 <code>postMessage()</code> 方法来发送信息, 并且通过 <code>onmessage</code> 这个 event handler来接收信息（传递的信息包含在 {{event("Message")}} 这个事件的<code>data</code>属性内) 。数据的交互方式为传递副本，而不是直接共享数据。</p> diff --git a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html index 29bd42fc24..2206042e4b 100644 --- a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -14,7 +14,7 @@ original_slug: Web/Guide/API/DOM/The_structured_clone_algorithm <ul> <li><code><a href="/cn/JavaScript/Reference/Global_Objects/Error">Error</a></code> 以及 <code><a href="/cn/JavaScript/Reference/Global_Objects/Function">Function</a></code> 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 <code>DATA_CLONE_ERR</code> 的异常。</li> - <li>企图去克隆 DOM 节点同样会抛出 <code>DATA_CLONE_ERROR</code> 异常。</li> + <li>企图去克隆 DOM 节点同样会抛出 <code>DATA_CLONE_ERR</code> 异常。</li> <li>对象的某些特定参数也不会被保留 <ul> <li><code><a href="/cn/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> </code>对象的 <code>lastIndex</code> 字段不会被保留</li> diff --git a/files/zh-cn/web/api/window/requestidlecallback/index.html b/files/zh-cn/web/api/window/requestidlecallback/index.html index 0632e3a3ce..667133cf18 100644 --- a/files/zh-cn/web/api/window/requestidlecallback/index.html +++ b/files/zh-cn/web/api/window/requestidlecallback/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/Window/requestIdleCallback <dt><code>options</code> {{optional_inline}}</dt> <dd>包括可选的配置参数。具有如下属性： <ul> - <li><code>timeout</code>：如果指定了timeout并具有一个正值，并且尚未通过超时毫秒数调用回调，那么回调会在下一次空闲时期被强制执行，尽管这样很可能会对性能造成负面影响。</li> + <li><code>timeout</code>： 如果指定了timeout，并且有一个正值，而回调在timeout毫秒过后还没有被调用，那么回调任务将放入事件循环中排队，即使这样做有可能对性能产生负面影响。</li> </ul> </dd> </dl> diff --git a/files/zh-cn/web/css/vertical-align/index.html b/files/zh-cn/web/css/vertical-align/index.html index df895fe1cb..eacb94adfc 100644 --- a/files/zh-cn/web/css/vertical-align/index.html +++ b/files/zh-cn/web/css/vertical-align/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/vertical-align <p>vertical-align属性可被用于两种环境：</p> <ul> - <li>使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片{{HTMLElement("img")}}：</li> + <li>使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片{{HTMLElement("img")}}：</li> </ul> <div id="vertical-align-inline"> diff --git a/files/zh-cn/web/html/element/input/checkbox/index.html b/files/zh-cn/web/html/element/input/checkbox/index.html index 14a0d21aef..4f349c2449 100644 --- a/files/zh-cn/web/html/element/input/checkbox/index.html +++ b/files/zh-cn/web/html/element/input/checkbox/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/input/checkbox <dd>指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。</dd> </dl> -<h2 id="示例">示例</h2> +<h2 id="Example">示例</h2> <pre class="brush: html"><p> <input type="checkbox" id="cbox1" value="first_checkbox"> diff --git a/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html index be7f03a446..dc3f9a00a2 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -89,7 +89,7 @@ console.log(header); function encodeRFC5987ValueChars (str) { return encodeURIComponent(str). - // 注意，仅管 RFC3986 保留 "!"，但 RFC5987 并没有 + // 注意，尽管 RFC3986 保留 "!"，但 RFC5987 并没有 // 所以我们并不需要过滤它 replace(/['()]/g, escape). // i.e., %27 %28 %29 replace(/\*/g, '%2A'). diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.html b/files/zh-cn/web/javascript/reference/strict_mode/index.html index 4f48146e49..0d9066e644 100644 --- a/files/zh-cn/web/javascript/reference/strict_mode/index.html +++ b/files/zh-cn/web/javascript/reference/strict_mode/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode <div class="note">有时你会看到非严格模式，被称为“<strong><a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode" id="sloppyModeId333">sloppy mode</a></strong>”。这不是一个官方术语，但以防万一，你应该意识到这一点。</div> -<div><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>的<strong>严格模式</strong>是采用具有限制性JavaScript变体的一种方式，从而使代码显示地 脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。</div> +<div><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>的<strong>严格模式</strong>是采用具有限制性JavaScript变体的一种方式，从而使代码隐式地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。</div> <div>严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。</div> diff --git a/files/zh-cn/web/security/weak_signature_algorithm/index.html b/files/zh-cn/web/security/weak_signature_algorithm/index.html new file mode 100644 index 0000000000..1b3963f2ec --- /dev/null +++ b/files/zh-cn/web/security/weak_signature_algorithm/index.html @@ -0,0 +1,32 @@ +--- +title: 弱签名算法 +slug: Web/Security/Weak_Signature_Algorithm +tags: + - Cryptography + - Guide + - Security + - 密码学 + - 指南 + - 安全 +translation_of: Web/Security/Weak_Signature_Algorithm +--- + +<p><span class="seoSummary">在给{{Glossary("Digital certificate", "数字证书")}}{{Glossary("Signature/Security", "签名")}}时，用到的哈希算法的强度对证书的安全性至关重要。本文将提供一些已知的弱签名算法的信息，以便你在适当的时候避免使用它们。</span></p> + +<p>弱的哈希算法可以使攻击者能够伪造证书。技术进步使网络攻击变得更加可行，随着新型的网络攻击不断被发现，我们不鼓励使用旧的算法，并最终移除了对它们的支持。</p> + +<h2 id="SHA-1">SHA-1</h2> + +<p>从 2017 年开始，主流浏览器不再认为 SHA-1 证书安全。应该使用那些采用更安全的哈希算法（如 SHA-256 或 SHA-512）的证书。</p> + +<h2 id="MD5">MD5</h2> + +<p>对基于 MD5 的签名的支持在 2012 年初被移除。</p> + +<h2 id="See_also">相关资料</h2> + +<ul> + <li><a href="https://blog.mozilla.org/security/2014/09/23/phasing-out-certificates-with-sha-1-based-signature-algorithms/">Mozilla Security Blog 关于弃用 SHA-1 的文章</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/zh-CN/docs/Web/Security")}}</p>
\ No newline at end of file diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png Binary files differnew file mode 100644 index 0000000000..9e532a9a36 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html index 5eec96717b..712c8b84f7 100644 --- a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html @@ -7,35 +7,35 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">當你在練習撰寫上一節的"猜數字"遊戲時，你可能會發現它無法運作。不用擔心，本文將會把你從快被拔光的頭髮中拯救出來，並且給你一些小提示，讓你知道怎麼找出及修正 Javascript 的程式運行錯誤。</p> +<p class="summary">當你在練習撰寫上一節的「猜數字」遊戲時，你可能會發現它無法運作。不用擔心，本文將會把你從快被拔光的頭髮中拯救出來，並且給你一些小提示，讓你知道怎麼找出及修正Javascript的程式運行錯誤。</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">先備:</th> + <th scope="row">先備：</th> <td>基本電腦能力，基本html及css理解以及了解JavaScript是什麼</td> </tr> <tr> - <th scope="row">目標:</th> + <th scope="row">目標：</th> <td>獲得開始解決簡單編碼問題的能力及信心</td> </tr> </tbody> </table> -<h2 id="錯誤類型">錯誤類型</h2> +<h2 id="Types_of_error">錯誤類型</h2> <p>一般來說，當你的編碼有錯誤時，主要有兩種類型</p> <ul> - <li><strong>語法錯誤</strong>: 在編碼中有一些拼字錯誤導致程序完全或部分沒有正常運作。在這個狀況下，通常你會獲得一些錯誤訊息。只要對工具熟悉以及了解錯誤訊息的意思，這種錯誤通常很好修正！</li> - <li><strong>邏輯錯誤</strong>: 這種錯誤代表程式碼的語法正確，但程式完成的部分不是開發者想做的?，意即程式碼執行成功，但返回錯誤的結果。這種錯誤通常比<strong>語法錯誤</strong>還要難修正，因為並沒有錯誤訊息讓我們可以很直接地知道程式碼的問題。</li> + <li><strong>語法錯誤</strong>：在編碼中有一些拼字錯誤導致程式完全或部分沒有正常運作。在這個狀況下，通常你會獲得一些錯誤訊息。只要對工具熟悉以及了解錯誤訊息的意思，這種錯誤通常很好修正！</li> + <li><strong>邏輯錯誤</strong>：這種錯誤代表程式碼的語法正確，但程式完成的部分不是開發者想做的，意即程式碼執行成功，但返回錯誤的結果。這種錯誤通常比<strong>語法錯誤</strong>還要難修正，因為並沒有錯誤訊息讓我們可以很直接地知道程式碼的問題。</li> </ul> <p>好的，但事情並沒有那麼單純——當你越深入，就會發現更多不同的因素。但上述的分類已經足夠應付初期的工程師職涯了。接著，我們將更深入來討論這兩個類型。</p> -<h2 id="一個錯誤範例">一個錯誤範例</h2> +<h2 id="An_erroneous_example">一個錯誤範例</h2> -<p>讓我們從剛剛的猜數字遊戲開始 — 在這個版本中，我們將故意引入一些錯誤以便從中學習。前往 Github 下載一份 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (或運行線上版 <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p> +<p>讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a>（或運行線上版 <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>）。</p> <ol> <li>首先，在編輯器與瀏覽器分別開啟你剛下載檔案。</li> @@ -48,75 +48,75 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>現在，先讓我們來看看開發者主控台有沒有提示我們任何錯誤，然後試著修正他們。你會在接下來的段落中學到如何修正這些錯誤。</p> -<h2 id="修復語法錯誤">修復語法錯誤</h2> +<h2 id="Fixing_syntax_errors">修復語法錯誤</h2> -<p>在前篇文章中我們讓你在 <a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具 JavaScript console</a> 中輸入了一些JavaScript 指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的 JavaScript引擎讀取到有語法錯誤的 JavaScript 時會提示一些錯誤訊息。現在讓我們來看看：</p> +<p>在前篇文章中我們讓你在<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具JavaScript console</a>中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：</p> <ol> - <li>切換到你開啟了 <code>number-game-errors.html</code> 的分頁，然後打開你的 JavaScript 主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> - <li>這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是 Firefox 的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到： + <li>切換到你開啟了<code>number-game-errors.html</code> 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是Firefox的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到： <ul> - <li>一個紅色的 "X" 代表這是一個錯誤訊息。</li> - <li>一條錯誤訊息提示你什麼東西出錯了："TypeError: guessSubmit.addeventListener is not a function（TypeError: guessSubmit.addeventListener 並不是一個函式）"</li> - <li>一個 "Learn More" 連結連向一個解釋這個錯誤並包含大量詳細資訊的 MDN 頁面。</li> - <li>出錯的 JavaScript 檔案名稱，連結連向開發者工具的除錯器。點下這個連結，你就能看到出錯的那行程式被高亮顯示出來。</li> - <li>在該 JavaScript 檔案中錯誤的行號，還有錯誤發生在該行第幾個字元。在這個例子中，是第 86 行的第 3 個字元。</li> + <li>一個紅色的「X」代表這是一個錯誤訊息。</li> + <li>一條錯誤訊息提示你什麼東西出錯了：「TypeError: guessSubmit.addeventListener is not a function（TypeError: guessSubmit.addeventListener 並不是一個函式）」</li> + <li>一個「Learn More」連結連向一個解釋這個錯誤並包含大量詳細資訊的MDN頁面。</li> + <li>出錯的JavaScript檔案名稱，連結連向開發者工具的除錯器。點下這個連結，你就能看到出錯的那行程式被高亮顯示出來。</li> + <li>在該JavaScript檔案中錯誤的行號，還有錯誤發生在該行第幾個字元。在這個例子中，是第 86 行的第 3 個字元。</li> </ul> </li> - <li>如果我們在編輯器中檢視第 86 行，我們會看到： + <li>如果我們在編輯器中檢視第86行，我們會看到： <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> </li> - <li>主控台提示的錯誤訊息寫著 "guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）"，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開 MDN 確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋 "mdn <em>關鍵字</em>"。為了節省時間，這裡提供你一個捷徑：<code><a href="/zh-TW/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li> - <li>回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript 是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把<code>addeventListener</code> 改成<code>addEventListener</code> 問題就解決了。現在將你的程式碼修正吧。</li> + <li>主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn<em>關鍵字</em>」。為了節省時間，這裡提供你一個捷徑：<code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li> + <li>回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把<code>addeventListener</code>改成<code>addEventListener</code>問題就解決了。現在將你的程式碼修正吧。</li> </ol> <div class="note"> -<p><strong>Note</strong>: 看看這個 <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> 連結來了解更多有關這類錯誤的資訊。</p> +<p><strong>Note</strong>: 看看這個<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a>連結來了解更多有關這類錯誤的資訊。</p> </div> -<h3 id="語法錯誤：第二回合">語法錯誤：第二回合</h3> +<h3 id="Syntax_errors_round_two">語法錯誤：第二回合</h3> <ol> <li>將你的頁面存檔並重整，你現在應該會看到剛剛的錯誤消失了。</li> - <li>現在試著輸入一個猜測並按下 Submit guess 按鈕，你會發現... 另一個錯誤！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> - <li>這次的錯誤是 "TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）"，在第 78 行的位置。 - <div class="note"><strong>Note</strong>: <code><a href="/zh-TW/docs/Glossary/Null">Null</a></code> 是一個特別的值，代表著「空」、「什麼都沒有」。<code>lowOrHi</code> 被宣告為一個變數，但並沒有被賦予任何有意義的值 — 他既沒有變數型態，也沒有值。</div> + <li>現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！<img alt="" src="variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>這次的錯誤是「TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）」，在第78行的位置。 + <div class="note"><strong>Note</strong>：<code><a href="/zh-TW/docs/Glossary/Null">Null</a></code>是一個特別的值，代表著「空」、「什麼都沒有」。<code>lowOrHi</code>被宣告為一個變數，但並沒有被賦予任何有意義的值——他既沒有變數型態，也沒有值。</div> - <div class="note"><strong>Note</strong>: 這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在 <code>checkGuess() { ... }</code> 區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在 <code>checkGuess()</code> 在 86 行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。</div> + <div class="note"><strong>Note</strong>:這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在<code>checkGuess() { ... }</code>區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在<code>checkGuess()</code>在86行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。</div> </li> - <li>看看第 78 行，你會看到： + <li>看看第78行，你會看到： <pre class="brush: js notranslate">lowOrHi.textContent = 'Last guess was too high!';</pre> </li> - <li>這行試著將 <code>lowOrHi</code> 的 <code>textContent</code> 屬性設為一個字串。但是這行沒有執行成功，因為 <code>lowOrHi</code> 並沒有存著它應該要存著的值。讓我們來看看為什麼 — 試試在程式碼中搜尋其他 <code>lowOrHi</code> 有出現的地方。在第 48 行你會看到： + <li>這行試著將<code>lowOrHi</code>的<code>textContent</code>屬性設為一個字串。但是這行沒有執行成功，因為<code>lowOrHi</code>並沒有存著它應該要存著的值。讓我們來看看為什麼——試試在程式碼中搜尋其他<code>lowOrHi</code>有出現的地方。在第48行你會看到： <pre class="brush: js notranslate">var lowOrHi = document.querySelector('lowOrHi');</pre> </li> - <li>這行程式碼試著將一個 HTML 元素的參照存起來。讓我們檢查一下在這行程式碼執行後，變數中的值是否為 <code>null</code>。在第 49 行加上： + <li>這行程式碼試著將一個HTML元素的參照存起來。讓我們檢查一下在這行程式碼執行後，變數中的值是否為<code>null</code>。在第49行加上： <pre class="brush: js notranslate">console.log(lowOrHi);</pre> <div class="note"> - <p><strong>Note</strong>: <code><a href="/zh-TW/docs/Web/API/Console/log">console.log()</a></code> 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第 48 行賦值給 <code>lowOrHi</code> 後，將它的值印出至主控台中。</p> + <p><strong>Note</strong>:<code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code>是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給<code>lowOrHi</code>後，將它的值印出至主控台中。</p> </div> </li> - <li>存檔並重整，你應該會在主控台中看到 <code>console.log()</code> 輸出的結果。<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code> 的值是 <code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li> - <li>讓我們思考一下發生了什麼問題。第 48 行呼叫了 <code><a href="/zh-TW/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法來透過 CSS 選擇器取得一個 HTML 元素參照。打開我們的網頁看看我們想要取得的段落元素： + <li>存檔並重整，你應該會在主控台中看到<code>console.log()</code>輸出的結果。<img alt="" src="console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code>的值是<code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li> + <li>讓我們思考一下發生了什麼問題。第48行呼叫了 <code><a href="/zh-TW/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法來透過CSS選擇器取得一個HTML元素參照。打開我們的網頁看看我們想要取得的段落元素： <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> </li> - <li>所以我們需要的是一個開頭是小數點 (.) 的 class 選擇器，但傳進第48 行 <code>querySelector()</code> 方法的選擇器並沒有開頭的小數點。這也許就是問題所在了！試著將第 48 行的 <code>lowOrHi</code> 改成 <code>.lowOrHi</code>。</li> - <li>再次存檔並重整，你的 <code>console.log()</code> 現在應該會輸出我們想要的 <code><p></code> 元素了。呼！又修好了另一個錯誤！你現在可以把你的 <code>console.log()</code> 那行移除了，或是你想要留著之後查看 — 取決於你。</li> + <li>所以我們需要的是一個開頭是小數點(.)的class選擇器，但傳進第48行<code>querySelector()</code>方法的選擇器並沒有開頭的小數點。這也許就是問題所在了！試著將第48行的<code>lowOrHi</code>改成<code>.lowOrHi</code>。</li> + <li>再次存檔並重整，你的<code>console.log()</code>現在應該會輸出我們想要的<code><p></code>元素了。呼！又修好了另一個錯誤！你現在可以把你的<code>console.log()</code>那行移除了，或是你想要留著之後查看——取決於你。</li> </ol> <div class="note"> -<p><strong>Note</strong>: 看看這個 <a href="/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> 連結來了解更多有關這類錯誤的資訊。</p> +<p><strong>Note</strong>: 看看這個<a href="/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> 連結來了解更多有關這類錯誤的資訊。</p> </div> -<h3 id="語法錯誤：第三回合">語法錯誤：第三回合</h3> +<h3 id="Syntax_errors_round_three">語法錯誤：第三回合</h3> <ol> <li>現在如果你試著再次玩這個遊戲應該會相當順利，直到該讓遊戲結束的時機點才會發生錯誤：無論是猜對還是10次用完。</li> - <li>此時console提供錯誤訊息跟一開始一樣： "TypeError: resetButton.addeventListener is not a function"! 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把<code>addeventListener</code> 改成 <code>.addEventListener</code>就沒問題了。</li> + <li>此時console提供錯誤訊息跟一開始一樣：「TypeError: resetButton.addeventListener is not a function!」 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把<code>addeventListener</code>改成<code>.addEventListener</code>就沒問題了。</li> </ol> -<h2 id="邏輯錯誤">邏輯錯誤</h2> +<h2 id="A_logic_error">邏輯錯誤</h2> <p>到這邊為止遊戲應該可以進行得很順利，然而玩幾次下來無疑地你會發現「隨機」數字總是0或1，這可不是我們想要的！</p> @@ -134,17 +134,17 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <li>儲存程式碼並更新頁面，然後再試玩幾次，你會看到<code>randomNumber</code> 在console中總是等於1，這就是問題所在。</li> </ol> -<h3 id="修正小錯誤">修正小錯誤</h3> +<h3 id="Working_through_the_logic">修正小錯誤</h3> -<p>為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>以產生一個介於0到1的隨機小數，例如： 0.5675493843</p> +<p>為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>以產生一個介於0到1的隨機小數，例如：0.5675493843</p> <pre class="brush: js notranslate">Math.random()</pre> -<p>接著，我們將<code>Math.random()</code> 產生的隨機小數傳進<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>，函式會回傳小於等於所給數字的最大整數，然後為這個整數值加1：</p> +<p>接著，我們將<code>Math.random()</code>產生的隨機小數傳進<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>，函式會回傳小於等於所給數字的最大整數，然後為這個整數值加1：</p> <pre class="notranslate">Math.floor(Math.random()) + 1</pre> -<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">由於</span></font><code>Math.floor</code>是無條件捨去取整數(地板值)，所以一個介於0到1的隨機小數永遠只會得到0，幫這個小數加1的話又會永遠只得到1。所以進位前我們先幫隨機小數乘上100 ，如此一來我們就能得到介於0到99的隨機數字了：</p> +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">由於</span></font><code>Math.floor</code>是無條件捨去取整數(地板值)，所以一個介於0到1的隨機小數永遠只會得到0，幫這個小數加1的話又會永遠只得到1。所以進位前我們先幫隨機小數乘上100，如此一來我們就能得到介於0到99的隨機數字了：</p> <pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> @@ -154,12 +154,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>試著自己動手更新這兩行程式碼吧，儲存並更新頁面後你應該能看到遊戲如預期般進行！</p> -<h2 id="其他常見錯誤">其他常見錯誤</h2> +<h2 id="Other_common_errors">其他常見錯誤</h2> <p>還有些初學者非常容易忽略的小問題，這小節讓我們來概覽一下：</p> -<h3 id="語法錯誤：語句缺少「_」_（SyntaxError_missing_before_statement）">語法錯誤：語句缺少「 ; 」<br> - （SyntaxError: missing ; before statement）</h3> +<h3 id="SyntaxError_missing_before_statement">語法錯誤：語句缺少「 ; 」<br> + SyntaxError: missing ; before statement</h3> <p>這個錯誤是指每行程式碼結束時必須加上英文輸入法的分號<code>;</code>(請注意不要打成中文輸入法)，分號被遺忘的錯誤有時不太容易發現，此外另舉一例：如果我們改動下方變數<code>checkGuess()</code> 中的程式碼：</p> @@ -175,7 +175,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少分號的語法錯誤</em>文章頁面： <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> 。</p> </div> -<h3 id="無論輸入什麼，程序總是顯示「你贏了」">無論輸入什麼，程序總是顯示「你贏了」</h3> +<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter">無論輸入什麼，程式總是顯示「你贏了」</h3> <p>還有另一種混用指派運算子(<code>=</code>)與嚴格比較運算子(<code>===</code>)的狀況，舉例如果我們將變數 <code>checkGuess()</code>中的嚴格比較運算子(<code>===</code>)</p> @@ -187,66 +187,69 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>這個檢查就失效了，程式會永遠回傳 <code>true</code>而勝利並結束遊戲。請小心！</p> -<h3 id="語法錯誤：參數列表後面缺少「」_（SyntaxError_missing_after_argument_list）">語法錯誤：參數列表後面缺少「)」 <br> - （SyntaxError: missing ) after argument list）</h3> +<h3 id="SyntaxError_missing_after_argument_list">語法錯誤：參數列表後面缺少「)」<br>SyntaxError: missing ) after argument list</h3> -<p>給完函數或方法參數時別忘了放上<code>)</code>右括號(請注意不要打成中文輸入法)。</p> +<p>給完函式或方法參數時別忘了放上<code>)</code>右括號（請注意不要打成中文輸入法）。</p> <div class="note"> -<p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少右括號的語法錯誤</em>文章頁面：<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> 。</p> +<p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少右括號的語法錯誤</em>文章頁面：<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>。</p> </div> -<h3 id="語法錯誤：屬性ID後缺少「」_SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br> +<h3 id="SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br> SyntaxError: missing : after property id</h3> -<p>This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing</p> +<p>這個錯誤通常與JavaScript物件格式錯誤有關，在這個例子中，通過修改</p> <pre class="brush: js notranslate">function checkGuess() {</pre> -<p>to</p> +<p>改成</p> <pre class="brush: js notranslate">function checkGuess( {</pre> -<p>This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!</p> +<p>小心括號的部分！這會讓瀏覽器誤以為我們要把函式的程式內容當成函式參數傳入。</p> -<h3 id="語法錯誤：「」缺少SyntaxError_missing_after_function_body">語法錯誤：「}」缺少SyntaxError: missing } after function body</h3> +<h3 id="SyntaxError_missing_after_function_body">語法錯誤：函式結尾缺少「}」大括號<br>SyntaxError: missing } after function body</h3> -<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p> +<p>很簡單——這通常意味你的函式或條件結構式缺少一個大括號。若我們將<code>checkGuess()</code>函式末段的一個結尾大括號刪除，就會獲得這個錯誤。</p> -<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3> +<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">語法錯誤：預期得到表達式，但實際得到「字串」<br>SyntaxError: expected expression, got '<em>string</em>'</h3> + + <p>或是</p> + + <h3 id="SyntaxError_unterminated_string_literal">語法錯誤：字串字面值未正常結束<br>SyntaxError: unterminated string literal</h3> -<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p> +<p>這些錯誤通常意味著你漏寫一個字串起始或結尾的引號，上面第一個錯誤表示漏寫了字串開頭的起始引號，這導致這裡的「<em>string</em>」會替換瀏覽器發現的意外字串。第二個錯誤則表示字串結尾缺少了結束引號。</p> -<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p> +<p>對於這些錯誤，先思考我們在範例中是如何逐項解決的。當出現錯誤資訊時，先查看該行程式碼行號，按照行號到該行程式碼察看，你可以觀察哪裡出錯了。請記住，錯誤不一定出現在該行程式碼上，而且錯誤原因也可能和我們文章上描述的問題不同！</p> <div class="note"> -<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p> +<p><strong>Note</strong>：有關這些錯誤的詳細資訊，可參閱<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a>與<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a></p> </div> -<h2 id="小結">小結</h2> +<h2 id="Summary">小結</h2> -<p>So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.</p> +<p>那麼，我們得到它了——能在簡易JavaScript程式中找出錯誤的基礎知識。解決程式碼中的錯誤並不總是那麼簡單，但至少本章節可以為你省下幾小時的時間好用來睡覺，並讓你在早期學習過程更快的解決問題。</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">另可參閱</h2> <div> <ul> - <li>There are many other types of errors that aren't listed here; we are compiling a reference that explains what they mean in detail — see the <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> - <li>If you come across any errors in your code that you aren't sure how to fix after reading this article, you can get help! Ask on the <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tell us what your error is, and we'll try to help you. A listing of your code would be useful as well.</li> + <li>還有許多類型的錯誤未列在此頁，我們正在編輯一份參考資料好詳細解釋了它們的含義——可參閱<a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>。</li> + <li>如果你在閱讀本章節遇到了某些程式錯誤而且不知道如何修正，你可以尋求援助！可以至<a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>發問，或者到<a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a>頻道提問。告訴我們你遇到什麼錯誤，我們會盡力幫助你。若能附上你的程式碼會更有幫助。</li> </ul> </div> <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> -<h2 id="在這個學習模組中">在這個學習模組中</h2> +<h2 id="In_this_module">在這個學習模組中</h2> <ul> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什麼是JavaScript？</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/A_first_splash">初次接觸Javascript</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">什麼出錯了？ JavaScript 的疑難排解（除錯）</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊 — 變數</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算— 數字 與 運算子</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字 — JavaScript 的字串</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">出了什麼問題？JavaScript 疑難排解</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊——變數</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算——數字與運算子</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字——JavaScript的字串</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字串方法</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Arrays">陣列</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Silly_story_generator">附錄：笑話產生器</a></li> diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png Binary files differnew file mode 100644 index 0000000000..7933668aa1 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png Binary files differnew file mode 100644 index 0000000000..bcfd1aed32 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png diff --git a/files/zh-tw/learn/server-side/django/skeleton_website/index.html b/files/zh-tw/learn/server-side/django/skeleton_website/index.html index b57b351eae..5e08042699 100644 --- a/files/zh-tw/learn/server-side/django/skeleton_website/index.html +++ b/files/zh-tw/learn/server-side/django/skeleton_website/index.html @@ -166,7 +166,7 @@ cd locallibrary</pre> <p><font><font>settings.py裡還包括其他的一些設置，現在只需要改變</font></font><a class="external external-icon" href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-TIME_ZONE" rel="noopener" style='font-style: normal; text-decoration: none; color: rgb(63, 135, 166); margin: 0px; padding: 0px; border: 0px; white-space: pre-line; font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(255, 255, 255);'><font><font>時區</font></font></a><font><font><span> </span>—改為和標準</font></font><a class="external external-icon" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" rel="noopener" style='font-style: normal; text-decoration: none; color: rgb(63, 135, 166); margin: 0px; padding: 0px; border: 0px; white-space: pre-line; font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(255, 255, 255);'><font><font>tz時區數據表</font></font></a><font><font><span> </span> 裡的字符串相同就可以了（數據表裡的TZ列有你想要的時區）。</font><font>把</font></font><code style='font-style: normal; margin: 0px; padding: 0px 2px; border: 0px; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; color: rgb(51, 51, 51); font-size: medium; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>TIME_ZONE</code><font><font>的值改為你的時區，比如</font></font></p> -<pre class="brush: python">TIME_ZONE = 'Europe/London'</pre> +<pre class="brush: python">TIME_ZONE = 'Asia/Taipei'</pre> <p style='font-style: normal; margin: 0px 0px 24px; padding: 0px; border: 0px; max-width: 42rem; color: rgb(51, 51, 51); font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>有兩個設置你現在不會用到，不過你應該留意：</font></font></p> @@ -370,19 +370,19 @@ python3 manage.py migrate <h2 id="本教程連結">本教程連結</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">設定 Django 開發環境</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> </ul> diff --git a/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html b/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html index 3e2cae3be5..c34c9369b6 100644 --- a/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html +++ b/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html @@ -75,18 +75,19 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website <h2 id="本系列教學">本系列教學</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">設定Django開發環境</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</a><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架 </a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/development_environment">設定Django開發環境</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架 </a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> </ul> diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html index 3dc1b1cd57..7265ee461a 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html @@ -22,7 +22,7 @@ tags: <div>{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p>這篇文章內容涵蓋，如何建立一個產品版本（production）的應用程式，以及提供後續的學習資源。</p> +<p>這篇文章內容涵蓋，如何建立一個生產版本（production）的應用程式，以及提供後續的學習資源。</p> <table class="learn-box standard-table"> <tbody> @@ -38,7 +38,7 @@ tags: </tbody> </table> -<h2 id="building_your_finished_application">建立你的應用程式完成版</h2> +<h2 id="building_your_finished_application">建置最終版的應用程式</h2> <p>現在你已經完成開發你的應用程式，接著執行 Angular CLI <code>build</code> 的指令。 當你在 <code>todo</code> 的目錄底下執行 <code>build</code> 的指令，應用程式會編譯並且輸出到 <code>dist/</code> 的目錄下。</p> @@ -68,7 +68,7 @@ tags: <p>現在你已經建立了基本的應用程式，但是你的Angular學習旅程才剛開始，你可以探索Angular文件學習更多，像是：</p> <ul> - <li><a href="https://angular.io/tutorial">英雄之旅</a>：一個深入的 Angular 重點課程，像是使用服務（service）、導覽（navigation）以及從伺服器取得資料。</li> + <li><a href="https://angular.io/tutorial">英雄之旅</a>(<a href="https://angular.tw/tutorial">正體中文版</a>)：一個深入的 Angular 重點課程，像是使用服務（service）、導覽（navigation）以及從伺服器取得資料。</li> <li>Angular <a href="https://angular.io/guide/component-overview">元件</a> 指南：一系列的文章，主題包括生命週期、元件互動以及檢視封裝。</li> <li><a href="https://angular.io/guide/forms-overview">表單</a> 指南：文章內容包含建立Angular的響應式表單、輸入驗證以及建立動態表單。</li> </ul> diff --git a/files/zh-tw/learn/tools_and_testing/github/index.html b/files/zh-tw/learn/tools_and_testing/github/index.html index 8899a3fd1b..2a479a6b3f 100644 --- a/files/zh-tw/learn/tools_and_testing/github/index.html +++ b/files/zh-tw/learn/tools_and_testing/github/index.html @@ -10,85 +10,84 @@ tags: --- <div>{{LearnSidebar}}</div> -<p class="summary">所有開發者都將使用到一些<strong>版本控制系統</strong> (<strong> V</strong>ersion <strong>C</strong>ontrol <strong>S</ strong>ystem, 簡稱<strong> VCS</strong> ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的<strong>版本控制系統</strong>（至少在網絡開發者中是這樣的）是<strong> Git</strong>，和與之關聯的程式社區網站<strong> GitHub</strong > 。這篇短文將帶你簡單地了解他們。 </p> +<p class="summary">所有開發者都將使用到一些<strong>版本控制系統</strong> (<strong> V</strong>ersion <strong>C</strong>ontrol <strong>S</ strong>ystem, 簡稱<strong> VCS</strong> ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的<strong>版本控制系統</strong>（至少在網路開發者中是這樣的）是<strong> Git</strong>，和與之關聯的程式社區網站<strong> GitHub</strong >。這篇短文將帶你簡單地了解他們。</p> <h2 id="Overview">概述</h2> <p>版本控制系統在軟體開發過程中是不可或缺的：</p> <ul> - <li>It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurrences, and help avoid loss of work as a result.</li> - <li>When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks.</li> - <li>You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, etc., but this is really error-prone and unreliable.</li> - <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li> + <li>我們很少獨自完成一個專案，而在分工合作的同時我們都會有與他人的工作相衝突的風險：尤其是當兩個人同時嘗試修改同一段程式碼的時候。所以我們需要有相應的機制用以避免這種情況。</li> + <li>不管是自己一人或與他人一起開發專案時，總希望能夠程式碼能夠及時保存，這樣就可以避免像電腦突然損壞而丟失程式碼的局面。</ li> + <li>如果後期發現了問題，我們可能還會想要回到比較早的版本。有些人在做自己的專案時透過創建同一文件的不同版本，例如 <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js< /code>, <code>myCode_really_really_final.js</code> 之類的文件用於保存歷史版本，但這個方法不可靠，且容易出錯。</li> + <li>不同的團隊成員也會需要創建他們自己的獨特的版本（在Git中叫做<strong>branches</strong>（分支）），他們在這裡添加一些新的功能特性，然後通過一些可控的方法（在GitHub 中我們使用<strong>pull request</strong>（提取要求））將其合併到原來的主幹項目中。</li> </ul> -<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p> +<p>版本控制系統提供了能夠滿足以上需求的工具。 <a href="https://git-scm.com/">Git</a> 是版本控制系統的範例，而<a href="https://github.com/">GitHub</a>是一個為個人或團隊操作Git儲存庫( Git Repositories) 提供了Git伺服器和一系列非常實用的工具的網站+基礎設施。它提供了回報程式碼錯誤、檢查工具以及分配任務和任務狀態等項目管理工具等等。</p> <div class="notecard note"> -<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p> -</div> +<p> <strong>注意</ strong>：Git實際上是一個<em>分散式</ em>版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在您的電腦上（以及其他所有人）上創建的。 您可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將您的更改與主副本合併到主幹上。</ p> +</ div> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web - developer?</h4> + <h4 id="Looking_to_become_a_front-end_web_developer">嘗試成為一位前端網頁程式開發者?</h4> - <p>We have put together a course that includes all the essential information you need to - work towards your goal.</p> + <p>我們準備了一系列的課程當中包括核心的資訊，讓你往你的目標(成為一位前端網頁程式開發者)邁進。</p> - <p><a href="/en-US/docs/Learn/Front-end_web_developer"><strong>Get started</strong></a></p> + <p><a href="/en-US/docs/Learn/Front-end_web_developer"><strong>開始學習</strong></a></p> </div> -<h2 id="Prerequisites">Prerequisites</h2> +<h2 id="Prerequisites">事前準備</h2> -<p>To use Git and GitHub, you need:</p> +<p>要使用Git和GitHub，你需要:</p> <ul> - <li>A desktop computer with Git installed on it (see the <a href="https://git-scm.com/downloads">Git downloads page</a>).</li> - <li>A tool to use Git. Depending on how you like to work, you could use a <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI.</li> - <li>A <a href="https://github.com/join">GitHub account</a>. If you haven't already got one, sign up now using the provided link.</li> + <li>一台有安裝Git的電腦 (請參考 <a href="https://git-scm.com/downloads">Git 下載頁面</a>)。</li> + <li>一個工具來使用Git，取決於你喜歡用哪類型工具，你可以使用一個 <a href="https://git-scm.com/downloads/guis/">Git GUI client</a>（我們建議使用GitHub Desktop, SourceTree or Git Kraken）或就使用terminal window。即便你傾向使用GUI，實際上使用terminal window可以幫助你學習一些git的基本指令。</li> + <li>一個 <a href="https://github.com/join">GitHub 帳號</a>。如果你還沒有帳號，建議使用提供的連結去註冊一個帳號並開始用。</li> </ul> -<p>In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!</p> +<p>就事前必備知識而言，您無需了解所有有關Web開發，Git / GitHub的知識即可開始使用此版本控制系統。 但是，建議您了解一些開發程式碼的知識，並嘗試把一些程式碼存儲在你的儲存庫中！</ p> -<p>It is also preferable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system <code>PATH</code>.</p> +<p>最好還具有一些基本的終端機知識，例如在目錄之間移動，創立文件以及修改系統的<code> PATH </ code>。</ p> <div class="notecard note"> -<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p> -</div> +<p> <strong>注意</ strong>：Github不是唯一網站/工具集讓你使用Git。 您可以嘗試其它替代方法，例如<a href="https://about.gitlab.com/"> GitLab </a>，也可以嘗試設置自己的Git伺服器並使用它來取代GitHub。在本章節中，我們僅停留在GitHub使用教學上。</ p> +</ div> -<h2 id="Guides">Guides</h2> +<h2 id="Guides">其它指南</h2> -<p>Note that the links below take you to resources on external sites. Eventually, we are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject at hand.</p> +<p>請注意，下面的連結將您帶到外部站點上的資源。最終，我們的目標是開設自己的專屬Git / GitHub課程，但目前，這些課程將幫助您掌握相關主題。</ p> <dl> - <dt><a href="https://guides.github.com/activities/hello-world/">Hello, World (from GitHub)</a></dt> - <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd> - <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt> - <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd> - <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt> - <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd> - <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt> - <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd> - <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt> - <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd> -</dl> - -<div class="notecard note"> -<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realize that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p> + <dt> <a href="https://guides.github.com/activities/hello-world/">Hello, World（來自GitHub）</a> </ dt> + <dd>這是一個很好的起點-本實用指南可讓您直接使用GitHub，學習Git的基礎知識，例如創建儲存庫和分支，進行提交以及合併提取要求。</ dd> + <dt> <a href="https://guides.github.com/introduction/git-handbook/"> Git使用手冊（來自GitHub）</a> </ dt> + <dd>這本Git手冊更深入地介紹了版本控制系统是什麼，儲存庫是什麼，基本GitHub模如何運行，Git命令和範例等等。</ dd> + <dt> <a href="https://guides.github.com/activities/forking/">Forking Projects分叉專案（來自GitHub）</a> </ dt> + <dd>當您想為別人的程式碼做貢獻時，Forking Projects分叉專案是必不可少的。本指南說明了方法。</ dd> + <dt> <a href="https://help.github.com/en/articles/about-pull-requests">關於提取要求（來自GitHub）</a> </ dt> + <dd>有用的指南，用於管理請求請求，將建議的程式碼更改傳遞給人們的儲存庫以供考慮。</ dd> + <dt> <a href="https://guides.github.com/features/issues/">掌握問題（來自GitHub）</a> </ dt> + <dd>問題就像是GitHub項目的論壇，人們可以在其中提出問題和報告問題，還可以管理更新（例如，分配人員來解決問題，澄清問題，讓人們知道問題已解決）。本文將提供你有關問題的必備知識。</ dd> +</ dl> + + +<div class="blockIndicator note"> +<p><strong>溫馨提示：</strong> 你還可以用Git跟GitHub來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解Git時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或<a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a>和<a href="https://dangitgit.com/"> Dangit, git!</a> 這樣的網站來尋找答案。</p> </div> -<h2 id="See_also">See also</h2> +<h2 id="See_also">也可以參考以下</h2> <ul> - <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li> - <li><a href="https://git-scm.com/docs">Git command list</a></li> - <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li> - <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li> - <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li> - <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li> - <li> - <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p> - </li> -</ul> + <li><a href="https://guides.github.com/introduction/flow/">【理解GitHub流程】</a></li> + <li><a href="https://git-scm.com/docs">【指令列表】</a></li> + <li><a href="https://guides.github.com/features/mastering-markdown/">【掌握Markdown 格式】</a>（在網頁上、評論區常用的格式以及<code >.md</code> 文件所使用的格式，GitHub中的介紹文件(readme.md)即用這種格式書寫）。</li> + <li><a href="https://guides.github.com/features/pages/">【入門 Github 頁面】</a>（如何在GitHub上發布示例和網站）。</li> + <li><a href="https://learngitbranching.js.org/">【學習 Git 的分支結構】</a></li> + <li><a href="https://github.com/k88hudson/git-flight-rules">【Git 中的飛行法則】</a>（ 在Git中實現特定功能的非常有用的方法介紹綱要，包括如何在出錯時糾錯等）。</li> + <li> + <p><a href="https://dangitgit.com/">【該死的Git，Git !】</a>（另一個十分有用的方法介紹綱要，特別是在出錯的時候進行糾正的方法）。</p> + </li> + </ul>
\ No newline at end of file diff --git a/files/zh-tw/mdn/yari/index.html b/files/zh-tw/mdn/yari/index.html index 5d3587a166..07b623bec6 100644 --- a/files/zh-tw/mdn/yari/index.html +++ b/files/zh-tw/mdn/yari/index.html @@ -1,27 +1,25 @@ --- -title: 'Kuma: MDN 的維基平台' +title: "Yari: MDN's rendering platform" slug: MDN/Yari tags: - - Kuma + - Yari - Landing - MDN Meta -translation_of: MDN/Kuma -original_slug: MDN/Kuma --- <div>{{MDNSidebar}}</div> -<div>{{IncludeSubnav("/zh-TW/docs/MDN")}}</div> +<p class="summary">Yari is the code that renders MDN Web Docs. It takes a <a href="https://jamstack.org/">JAMStack</a> approach, which involves taking the MDN content stored as flat source files in a GitHub repo (which include front matter and macro calls), rendering them out to static HTML files, and serving those as quickly and efficiently as possible.</p> -<p>Kuma 是由 MDN Web Docs 維護的 Django 程式碼。</p> +<p>The core MDN platform now actually consists of two GitHub repos:</p> -<p>{{SubpagesWithSummaries}}</p> - -<h2 id="參與_Kuma">參與 Kuma</h2> +<ul> + <li><a href="https://github.com/mdn/content">The MDN content repo</a> — this is where the MDN content is stored, along with information such as contributor history and redirects. Visit this repo if you want to contribute to the MDN content.</li> + <li><a href="https://github.com/mdn/yari">The Yari project</a> — this is the platform code that renders and displays the MDN content, and deals with associated services such as user accounts. Visit this repo if you want to contribute to the MDN platform.</li> +</ul> -<p>要參與 Kuma:</p> +<h2 id="See_also">See also</h2> <ul> - <li>訪問一下 <a href="https://github.com/mozilla/kuma">Github 的 Kuma 專案</a>。</li> - <li>去看一下<a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">貢獻指引</a>。</li> - <li>需要的話，深入探索<a href="http://kuma.readthedocs.org/en/latest/">Kuma 的完整文件</a>。</li> + <li><a href="https://hacks.mozilla.org/2020/10/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN Web Docs evolves! Lowdown on the upcoming new platform</a> — explanation of the need for a platform change, and the new architecture.</li> + <li>As needed, take a deep dive into the <a href="https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/">Welcome Yari: MDN Web Docs has a new platform</a> — formal announcement of the new platform launch.</li> </ul> |
