diff --git a/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md b/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md index aa34a268e35908..243cc9aa6db14e 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/css_and_javascript/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/CSS_and_JavaScript original_slug: Learn/Accessibility/CSS_and_JavaScript --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/HTML","Learn_web_development/Core/Accessibility/WAI-ARIA_basics", "Learn_web_development/Core/Accessibility")}} 当 CSS 和 JavaScript 使用得当，很有可能改善 Web 访问体验，相反如果滥用的话，则会在极大程度上损害无障碍。本文概述了一些应该被考虑的 CSS 和 JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能的容易被访问。 @@ -366,4 +366,4 @@ imgThumb.onblur = hideImg; 下一篇内容是，WAI-ARIA！ -{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/HTML","Learn_web_development/Core/Accessibility/WAI-ARIA_basics", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/accessibility/html/index.md b/files/zh-cn/learn_web_development/core/accessibility/html/index.md index e54639222c20c5..9b5ac17168d81e 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/html/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/html/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/HTML original_slug: Learn/Accessibility/HTML --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/Tooling","Learn_web_development/Core/Accessibility/CSS_and_JavaScript", "Learn_web_development/Core/Accessibility")}} 在网页开发的过程中，用正确的 HTML 标签来表达正确的意图，可以提升网页的无障碍。这篇文章将会详细介绍如何最大化地提升网页的无障碍。 @@ -552,4 +552,4 @@ HTML5 包含两个新元素 - `{{htmlelement("figure")}}` 和`{{htmlelement("fig 你现在应该精通编写大多数场合可访问的 HTML。我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。接下来，我们将探索 CSS 和 JavaScript，以及无障碍如何受其好坏影响。 -{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/Tooling","Learn_web_development/Core/Accessibility/CSS_and_JavaScript", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md b/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md index 3e73a99f40179c..8eec05442fd9d9 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/mobile/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Accessibility/Mobile original_slug: Learn/Accessibility/Mobile --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/Multimedia","Learn_web_development/Core/Accessibility/Accessibility_troubleshooting", "Learn_web_development/Core/Accessibility")}} 随着通过手机设备访问 web 愈加常见，iOS 和 Android 等流行的平台都拥有了完善的无障碍工具，在这些平台上考虑 web 的无障碍是一件很重要事情。本文将着重介绍移动端无障碍的注意事项。 @@ -275,4 +277,4 @@ panel.ontouchend = stopMove; - [移动 Web 开发指南](https://www.smashingmagazine.com/2012/07/guidelines-for-mobile-web-development/)——“Smashing”杂志的文章列表，涵盖移动网页设计的不同技术。 - [使你的网站在触摸设备上工作](https://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644)——有关使用触摸事件来获得在移动设备上进行交互的有用文章。 -{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/Multimedia","Learn_web_development/Core/Accessibility/Accessibility_troubleshooting", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/accessibility/multimedia/index.md b/files/zh-cn/learn_web_development/core/accessibility/multimedia/index.md index c3d552ed76170f..fd41419375f69e 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/multimedia/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/multimedia/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Accessibility/Multimedia original_slug: Learn/Accessibility/Multimedia --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/WAI-ARIA_basics","Learn_web_development/Core/Accessibility/Mobile", "Learn_web_development/Core/Accessibility")}} 可能导致无障碍（accessibility）问题的另一类内容是多媒体——视频、音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。 @@ -348,4 +350,4 @@ This is the second. 本章概述了多媒体内容的无障碍问题，以及一些实用的解决方案。 -{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/WAI-ARIA_basics","Learn_web_development/Core/Accessibility/Mobile", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md b/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md index cb9ad12d472f5f..9d3977418225d2 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/tooling/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: af1e384356e21dbcc573d1c1cc015ec79c644de1 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/What_is_Accessibility","Learn_web_development/Core/Accessibility/HTML", "Learn_web_development/Core/Accessibility")}} 接下来，我们将关注无障碍，提供关于一些常见问题的信息，如何进行简单测试以及如何使用审核/自动化工具来查找无障碍问题。 @@ -597,4 +597,4 @@ NVDA 拥有众多键盘命令，这里不会全部列举。以下表格中列出 下一篇文章，我们将详细介绍特性检测。 -{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/What_is_Accessibility","Learn_web_development/Core/Accessibility/HTML", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md index 088081ef9c76d2..7bbc63a85fa884 100644 --- a/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md +++ b/files/zh-cn/learn_web_development/core/accessibility/wai-aria_basics/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/WAI-ARIA_basics original_slug: Learn/Accessibility/WAI-ARIA_basics --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}} 紧接上文继续，有时候，我们制作涉及非语义 HTML 和动态的 JavaScript 内容更新的复杂 UI 控件可能很困难。**WAI-ARIA** 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验： @@ -446,4 +446,4 @@ function toggleMusician(bool) { - [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features. - [ARIA in HTML](https://www.w3.org/TR/html-aria/) — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required. -{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}} +{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/flexbox/index.md b/files/zh-cn/learn_web_development/core/css_layout/flexbox/index.md index 8b912251bbfe29..73938b7c399c71 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/flexbox/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/flexbox/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Flexbox original_slug: Learn/CSS/CSS_layout/Flexbox --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}} [弹性盒子](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout)是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。本文将解释所有的基本原理。 @@ -348,11 +348,9 @@ button { 到这里，介绍弹性盒子的基础知识就结束了。我们希望你体会到乐趣，并且玩的开心，能随着你的学习与你一起向前。接下来，我们将看到 CSS 布局的另一个重要方面：[CSS 网格系统](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids) -{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} - ## 参见 - [CSS 弹性盒子技巧](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)——一篇以视觉吸引人的方式解释弹性盒子所有内容的文章 - [弹性盒子青蛙游戏](https://flexboxfroggy.com/)——学习和更好地了解弹性盒子基础知识的教育游戏 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/floats/index.md b/files/zh-cn/learn_web_development/core/css_layout/floats/index.md index 4b6cf84c663900..61bab4828e08c7 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/floats/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/floats/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Floats original_slug: Learn/CSS/CSS_layout/Floats --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout")}} {{cssxref("float")}} 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。 @@ -666,4 +666,4 @@ body { 现在你应该了解现代网页开发中浮动布局开发的知识了，请参阅 [传统的布局方法](/zh-CN/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods) 以查看它们的用法，没准可以对你老旧的项目有所帮助。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/grids/index.md b/files/zh-cn/learn_web_development/core/css_layout/grids/index.md index 518bbd608ec9a0..db57b4ae042f96 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/grids/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/grids/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/CSS_layout/Grids original_slug: Learn/CSS/CSS_layout/Grids --- -{{LearnSidebar}}{{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout")}} CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。 @@ -733,4 +735,4 @@ aside { - [CSS 网格指南](/zh-CN/docs/Web/CSS/CSS_grid_layout#guides) - [CSS 网格检查器：检查的你的网格版面](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) -{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md b/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md index c0ac1d9b2da0f2..e88641974be0d2 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/legacy_layout_methods/index.md @@ -6,8 +6,6 @@ original_slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods {{LearnSidebar}} -{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} - 在 CSS 布局中，网格系统是一种非常常见的布局方式，并且在 CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如 4、6 或者 12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。 @@ -665,5 +663,3 @@ Skeleton（或者其他任何网格框架）正在做的所有事情是，设定 ## 小结 你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解 CSS 网格布局的原生网格和那些老系统的不同的时候帮到你。 - -{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/media_queries/index.md b/files/zh-cn/learn_web_development/core/css_layout/media_queries/index.md index 190583136d91fc..e9f102e1748ab0 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/media_queries/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/media_queries/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Media_queries original_slug: Learn/CSS/CSS_layout/Media_queries --- -{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} +{{learnsidebar}}{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout/Fundamental_layout_comprehension", "Learn_web_development/Core/CSS_layout")}} **CSS 媒体查询**为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其他条件，比如用户是在使用触摸屏还是鼠标。在本节课，你将会先学习到媒体查询的语法，然后继续在一个被安排好的示例中使用它，这个示例还会告诉你一个简单的设计是可以怎么被弄成响应式的。 @@ -431,4 +431,4 @@ article { 你还能通过加入不同的组件进行实验，看下加入媒体查询，或者使用类似弹性盒或者网格的布局方式，哪个是让组件可响应的最佳途径。经常是没有什么对错的，你应该实验下，看看哪个对你的设计和内容效果最好。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout/Fundamental_layout_comprehension", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/multiple-column_layout/index.md b/files/zh-cn/learn_web_development/core/css_layout/multiple-column_layout/index.md index 22792b3ad80393..0ce968b90e9a2d 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/multiple-column_layout/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/multiple-column_layout/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Multiple-column_Layout original_slug: Learn/CSS/CSS_layout/Multiple-column_Layout --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}} 多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。这篇文章介绍怎么使用这一特性。 @@ -455,5 +455,3 @@ body { - [CSS Fragmentation](/zh-CN/docs/Web/CSS/CSS_fragmentation) - [Using multi-column layouts](/zh-CN/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) - -{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/positioning/index.md b/files/zh-cn/learn_web_development/core/css_layout/positioning/index.md index 1199d1ce14af51..bed2f09f69f1e0 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/positioning/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/positioning/index.md @@ -6,7 +6,7 @@ original_slug: Learn/CSS/CSS_layout/Positioning {{LearnSidebar}} -{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Floats", "Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout")}} 定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。本文解释的是定位 ({{cssxref("position")}}) 的各种不同值，以及如何使用它们。 @@ -746,4 +746,4 @@ body { 我相信你用基本定位愉快地玩耍；它是创建复杂的 CSS 布局和 UI 功能背后的基本工具之一。考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Floats", "Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/practical_positioning_examples/index.md b/files/zh-cn/learn_web_development/core/css_layout/practical_positioning_examples/index.md index 8fe2d90104c4ba..3f5bb64c9742d6 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/practical_positioning_examples/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/practical_positioning_examples/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Practical_positioning_examples original_slug: Learn/CSS/CSS_layout/Practical_positioning_examples --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}} 掌握了上一篇文章中的定位的基础知识，我们将着眼于实现一些现实中的例子，来演示你能用定位来做什么。 @@ -450,5 +450,3 @@ input[type="checkbox"]:checked + aside { ## 总结 这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向 Flexbox。 - -{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md b/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md index ef0c4cddc5ac15..85d53b69726c9c 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/responsive_design/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/CSS_layout/Responsive_Design original_slug: Learn/CSS/CSS_layout/Responsive_Design --- -{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}} +{{learnsidebar}}{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/CSS_layout")}} 早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（_responsive web design，RWD_），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。 @@ -298,4 +298,4 @@ h1 { 在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/css_layout/supporting_older_browsers/index.md b/files/zh-cn/learn_web_development/core/css_layout/supporting_older_browsers/index.md index 14aae1c30e0447..bf54d7cb4e9687 100644 --- a/files/zh-cn/learn_web_development/core/css_layout/supporting_older_browsers/index.md +++ b/files/zh-cn/learn_web_development/core/css_layout/supporting_older_browsers/index.md @@ -6,8 +6,6 @@ original_slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers {{LearnSidebar}} -{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} - 本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是 Web 上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的 Web 技术，而无需让采用旧技术的用户被拒之门外。
@@ -225,5 +223,3 @@ CSS 网格规范最初成形于 IE10，也就是说尽管 IE10 和 IE11 不支 - [我应该尽力使用 IE10 的网格布局实现吗？](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) - [有特性查询的层叠式 Web 设计](https://24ways.org/2017/cascading-web-design/) - [使用特性查询（视频）](https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/) - -{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md index b4270ea47c81cd..3b22b59832648f 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_getting_started original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}} + +{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} 是时候将目光转向谷歌的 Angular 框架了，这是一种你可能经常遇到的选项。在这篇文章中我们关注 Angular 能提供什么、安装必备的组件、建立一个示例应用，并关注 Angular 的基本架构。 @@ -257,4 +259,4 @@ export class AppComponent { 这就是我们给你的第一次关于 Angular 的介绍。此时，你应该已经设置并准备好构建 Angular 应用程序，并对 Angular 的工作原理有基本的了解。在下一篇文章中，我们将加深这些知识，并开始构建待办事项列表应用程序的结构。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md index 955275bd172e04..279865dff79570 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/main_features/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Frameworks_libraries/Main_features original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_getting_started", "Learn_web_development/Core/Frameworks_libraries")}} 每种主流的 JavaScript 框架都有自己不同的方式更新 DOM、处理浏览器事件并为开发者提供愉快的使用体验，这篇文章将探索“四大”框架的主要特性，从较高的层次探讨框架的工作方式以及它们之间的区别。 @@ -325,4 +327,4 @@ it("Increments the count when clicked", () => { - [Svelte](/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started) - [Angular](/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started) -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_getting_started", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md index f6fc5a3cc36ffb..5a13e4a4534494 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_components/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Frameworks_libraries/React_components original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state", "Learn_web_development/Core/Frameworks_libraries")}} 此时，我们的 App 是一个单体。在我们能使用它之前，我们需要把它分解成可管理的、可描述的组件。React 对于什么是组件和什么不是组件并没有任何硬性规定，这完全取决于你！在这篇文章，我们将向你展示一种合理分解 App 的方法。 @@ -435,4 +437,4 @@ export default App; 本文到此为止——我们已经深入探讨了如何将你的 App 很好地分解成组件，并有效地渲染它们。现在我们将继续研究如何在 React 中处理事件，并添加一些交互性。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index c6e29493ea9f43..de1db048df08fa 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Frameworks_libraries/React_getting_started original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} 本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。 @@ -458,4 +460,4 @@ function App(props) { - 一些 JSX 属性与 HTML 属性不相同，这样就不会与 JavaScript 的保留字相冲突，比如说，在 HTML 中的 `class` 会在 JSX 中转译为 `className`。注意这些属性都是驼峰式命名的。 - Props 就像属性一样写在组件里，并且传入组件。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md index aad6440f449b9b..825614f098e23e 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} 假设我们的任务是在 React 中创建一个概念验证——一个允许用户添加、编辑和删除他们想做的任务的应用程序，并且在不删除任务的情况下将其标记为完成。这篇文章将引导你完成基本的 `App` 组件结构和样式，为以后添加的单个组件定义和交互性做好准备。 @@ -551,4 +551,4 @@ body { 现在，我们的待办清单应用程序终于看起来像一个真正的应用程序了！问题是：它实际上什么都没做。我们将在下一章开始解决这个问题。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_components/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_components/index.md index 92399767db8644..71e716f66d3c06 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_components/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_components/index.md @@ -7,7 +7,7 @@ l10n: --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props","Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility", "Learn_web_development/Core/Frameworks_libraries")}} 在上一篇文章中，我们开始开发我们的待办事项列表应用。本文的主要目标是讲解如何将我们的应用拆分为可管理的组件，并在它们之间共享信息。我们将对应用进行组件化，并添加更多功能，以允许用户更新现有组件。 @@ -565,4 +565,4 @@ npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts 在下一篇文章中，我们将继续将我们的应用程序组件化，并了解一些在处理 DOM 方面的高级技巧。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props","Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md index 25d4f6658dfb7c..30b8f26745537d 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_deployment_next/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: e769461724eef53106e9e44656d95b99c4d520e5 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} 在上一篇文章中，我们了解了 Svelte 对 TypeScript 的支持，以及如何使用它使应用程序更加健壮。在本文中，我们将学习如何部署应用程序并将其发布到在线环境，并分享一些你应该继续使用的资源，以继续你的 Svelte 学习之旅。 @@ -341,4 +341,4 @@ GitLab 使用名为 GitLab CI/CD 的内置工具来构建你的网站并将其 恭喜！完成本系列教程后，你应该具备一个坚实的基础，能够开始使用 Svelte 开发专业的 Web 应用程序。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md index 5b639fc303a4a3..e72c96c36a59fe 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md @@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_ --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} 此篇文章我们将简要介绍 [Svelte 框架](https://svelte.dev/)。我们将会学习 Svelte 如何运作，以及它与其它框架和工具的不同之处。接着我们将学习如何设置我们的开发环境并建立一个示例应用程序，了解其项目结构及如何在本地运行，最后可以将其构建于生产环境。 @@ -511,4 +511,4 @@ npx degit opensas/mdn-svelte-tutorial/01-getting-started - 组件中的顶层变量会构成其状态。 - 当为顶层变量赋新值时，将触发其响应。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md index 7bea418480c882..c21f462879e8f8 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md @@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_ --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_components","Learn_web_development/Core/Frameworks_libraries/Svelte_stores", "Learn_web_development/Core/Frameworks_libraries")}} 在上一篇文章中，我们为待办事项列表添加了更多功能，并开始将应用程序组织成组件。在本文中，我们将添加应用程序的最终功能，并进一步组件化我们的应用程序。我们将学习处理与更新对象和数组相关的响应式问题。为了避免常见的问题，我们需要深入了解 Svelte 的响应式系统。我们还将解决一些无障碍聚焦问题，以及其他一些问题。 @@ -890,4 +890,4 @@ npx degit opensas/mdn-svelte-tutorial/06-stores 在下一篇文章中，我们将学习如何使用 store 在组件之间进行通信，并为我们的组件添加动画效果。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_components","Learn_web_development/Core/Frameworks_libraries/Svelte_stores", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_stores/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_stores/index.md index cd5b70f6283f43..1a3620b5600a29 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_stores/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_stores/index.md @@ -7,7 +7,7 @@ l10n: --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} 在上一篇文章中，我们完成了应用程序的开发，将其组织为组件，并讨论了一些处理响应式、处理 DOM 节点以及暴露组件功能的高级技术。在本文中，我们将展示另一种在 Svelte 中处理状态管理的方式：[store](https://learn.svelte.dev/tutorial/writable-stores)。store 是全局数据存储库，用于保存值。组件可以订阅 store 并在其值发生变化时接收通知。 @@ -701,4 +701,4 @@ npx degit opensas/mdn-svelte-tutorial/07-next-steps 在下一篇文章中，我们将学习如何为我们的 Svelte 应用程序添加 TypeScript 支持。为了充分利用其所有特性，我们还会将整个应用程序迁移到 TypeScript。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md index d19510367b7fc0..85575b1e43d33d 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md @@ -7,7 +7,7 @@ l10n: --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started","Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props", "Learn_web_development/Core/Frameworks_libraries")}} 现在我们对 Svelte 运作机制有初步的了解后，就能开始构建我们的示例应用程序：一个待办事项列表。此篇文章中，会先确认应用程序所需的功能，接着会建立 `Todos.svelte` 组件并编写一些静态标记（markup）语言和样式，待一切准备就绪后，就能开始开发待办事项列表应用程序的相关特性，我们将在后续文章实现它们。 @@ -722,4 +722,4 @@ npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior 随着标记和样式设计的到位，我们的待办事项列表应用程序已初具雏形，一切准备就绪，我们可以开始专注于需要实现的特性了。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started","Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md index fc6aa9a3b1e35f..c35609310dd973 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_typescript/index.md @@ -7,7 +7,7 @@ l10n: --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_stores","Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next", "Learn_web_development/Core/Frameworks_libraries")}} 在上一篇文章中，我们学习了 Svelte store 的知识，并且实现了自己的自定义 store 来将应用程序的信息持久化到 Web 存储中。我们还学习了如何使用 transition 指令在 Svelte 中为 DOM 元素实现动画效果。 @@ -1002,4 +1002,4 @@ npx degit opensas/mdn-svelte-tutorial/08-next-steps 在下一篇文章中，我们将学习如何将应用程序编译和部署到生产环境。我们还将了解在线学习 Svelte 的其他资源。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_stores","Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md index 8a2368901858fa..f3961b0498b222 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md @@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_ --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Svelte_components", "Learn_web_development/Core/Frameworks_libraries")}} 现在我们已经准备好了标记和样式，我们可以开始为 Svelte 待办清单应用程序开发所需的功能。在本篇文章中，我们将使用变量和属性使我们的应用程序动态化，允许我们新增和删除待办事项，标记它们为完成并通过状态过滤它们。 @@ -492,4 +492,4 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app 在下一篇文章中，我们将新增更多功能，允许用户编辑待办事项。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Svelte_components", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md index 2fe18524e1588f..11bc8e2bfd555c 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_computed_properties/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_styling","Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering", "Learn_web_development/Core/Frameworks_libraries")}} 在本文中，我们将使用 Vue 中的计算属性实现一个计数器，来显示已完成待办事项的数量。计算属性的工作原理类似于方法，但只有在它的依赖项发生变化时才重新运行。 @@ -131,4 +131,4 @@ updateDoneStatus(toDoId) { 在本文中，我们使用计算属性为我们的应用程序添加了一个漂亮的小功能。然而，我们还有更重要的事情要做：在下一篇文章中，我们将学习条件渲染，以及当我们想编辑现有的待办事项时，如何使用它来显示编辑表单。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_styling","Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md index 2669cebd6ae806..4a8039ad98e3b1 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties","Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} 是时候添加一个我们仍然缺少，但十分重要的功能了——编辑现有的待办事项。为此，我们将利用 Vue 的条件渲染（即 `v-if` 和 `v-else`）来让我们能在现有待办视图和用于更新待办的编辑视图之间切换。我们还将实现删除待办事项的功能。 @@ -380,4 +380,4 @@ editToDo(toDoId, newLabel) { 这篇文章相当密集，我们在这里讨论了很多内容。现在我们的应用中有了编辑和删除功能，这非常令人兴奋。现在，我们的 Vue 系列已经接近尾声。最后一个要讨论的功能是焦点管理，或者换句话说：我们应如何提高应用程序的键盘无障碍。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties","Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_first_component/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_first_component/index.md index cf148234d486e3..b66ec74114e576 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_first_component/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_first_component/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_first_component original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_getting_started","Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists", "Learn_web_development/Core/Frameworks_libraries")}} 现在是时候深入了解 Vue，并创建我们自己的自定义组件了--我们将从创建一个组件来表示待办事项列表中的每个项目开始。在这一过程中，我们将学习一些重要的概念，例如在其他组件中调用组件，通过道具向它们传递数据，以及保存数据状态。 @@ -351,4 +351,4 @@ export default { 现在，我们已准备好将多个 `ToDoItem` 组件添加到我们的应用中。在下一篇文章中，我们将介绍如何将一组待办事项数据添加到 `App.vue` 组件中，然后使用 `v-for` 指令在 `ToDoItem` 组件中循环显示这些数据。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_getting_started","Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md index 958d58adb5c59f..27bd5d5826ee78 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_getting_started original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Vue_first_component", "Learn_web_development/Core/Frameworks_libraries")}} 现在让我们介绍 Vue，我们的第三个框架。在本文中，我们将了解一点 Vue 的背景知识，了解如何安装它并创建一个新项目，研究整个项目和单个组件的高级结构，了解如何在本地运行项目，并为开始构建示例做好准备。 @@ -240,4 +240,4 @@ components: { 在下一篇文章中，我们将构建第一个自定义组件，并研究一些重要概念，例如将 prop 传递到其中和保存其 data 状态。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Vue_first_component", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md index f46ce7ba4ab4ab..dccaba79a9c101 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_methods_events_models/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists","Learn_web_development/Core/Frameworks_libraries/Vue_styling", "Learn_web_development/Core/Frameworks_libraries")}} 我们现在已经有了样本数据，还有一个循环，它获取每一位数据并将其呈现在我们应用程序的 `ToDoItem` 中。接下来我们真正需要的是允许我们的用户在应用程序中输入他们自己的待办事项的能力，为此我们需要一个“text”类型的 ``，当数据输入时触发的事件提交，一个在提交时触发以添加数据并重新呈现列表的方法，以及一个控制数据的模型。这就是我们将在本文中介绍的内容。 @@ -348,4 +348,4 @@ onSubmit() { 非常好。我们现在可以将待办事项添加到我们的表单中！我们的应用程序现在开始感觉具有交互性，但一个问题是到目前为止我们完全忽略了它的外观和感觉。在下一篇文章中，我们将集中精力解决这个问题，看看 Vue 为组件样式提供的不同方式。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists","Learn_web_development/Core/Frameworks_libraries/Vue_styling", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md index 09ff7a84b08f0a..355d68a12c7ad6 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_refs_focus_management/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering","Learn_web_development/Core/Frameworks_libraries/Vue_resources", "Learn_web_development/Core/Frameworks_libraries")}} 使用 Vue 所做的事情快要结束了。最后一个需要讲述的内容是焦点管理，换句话说，也是如何提升我们应用的键盘无障碍性。我们将看看如何使用 **Vue 模板引用**来处理这个问题——这是一个进阶功能，允许你直接访问虚拟 DOM 之下的底层 DOM 节点，或者从一个组件直接访问一个子组件的内部 DOM 结构。 @@ -228,4 +228,4 @@ deleteToDo(toDoId) { > [!NOTE] > 如果你需要对照我们的版本检查你的代码，你可以在我们的 todo-vue 仓库中找到一个完成版本的 Vue 应用示例代码。关于运行中的实时版本，请看 。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering","Learn_web_development/Core/Frameworks_libraries/Vue_resources", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md index c0c0d13e0fc0ce..726be6dd76b0f1 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_rendering_lists/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_first_component","Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models", "Learn_web_development/Core/Frameworks_libraries")}} 现在我们已经有了一个可以工作的组件。接下来我们将添加更多的 `ToDoItem` 组件到我们的应用中。本文我们会添加一系列待办事项到 `App.vue` 组件并使用 `v-for` 指令遍历它们，将它们的每一项展示在 `ToDoItem` 组件中。 @@ -191,4 +191,4 @@ export default { 接下来我们需要让用户可以输入它们自己的待办事项，想做到这一点，我们需要一个文本输入 ``，当用户输入数据时触发事件，在事件响应函数中需要将数据添加到待办事项列表并且重新渲染列表，我们还需要一个模型操控数据。我们将在下一篇文章中获取这些知识。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_first_component","Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_resources/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_resources/index.md index fabbad14053d8f..2bc3adf501e891 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_resources/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_resources/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_resources original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} 现在，我们将为我们的 Vue 学习画上句号，这里将给你一个资源清单，你可以用它来进一步学习，还有一些其他有用的提示。 @@ -65,4 +65,4 @@ Vue 2 的支持将于 2023 年 12 月 31 日结束，所有 CLI 工具的默认 如果要从 Vue 2 升级，建议看一下 [Vue 3 迁移指南](https://v3-migration.vuejs.org/zh/)。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenu("Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_styling/index.md index 00dd1ba91bdc39..8f7a229f919c71 100644 --- a/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_styling/index.md +++ b/files/zh-cn/learn_web_development/core/frameworks_libraries/vue_styling/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_styling original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models","Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties", "Learn_web_development/Core/Frameworks_libraries")}} 现在终于到了使我们的应用程序看起来更好的时候了。在本文中，我们将探讨使用 CSS 样式化 Vue 组件的不同方法。 @@ -478,4 +478,4 @@ import "./assets/reset.css"; 目前，我们已经做完了示例程序的样式设计。在下一篇文章中，我们将为我们的应用程序添加一些更多的功能，即使用一个计算属性来为我们的应用程序添加一个已完成的 todo 项目的计数。 -{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}} +{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models","Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties", "Learn_web_development/Core/Frameworks_libraries")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/a_first_splash/index.md b/files/zh-cn/learn_web_development/core/scripting/a_first_splash/index.md index 3dde288f6101eb..3f50453a8d0328 100644 --- a/files/zh-cn/learn_web_development/core/scripting/a_first_splash/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/a_first_splash/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/A_first_splash original_slug: Learn/JavaScript/First_steps/A_first_splash --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}} 现在，你已经学到了一些 JavaScript 的理论知识，以及用 JavaScript 能够做些什么。下面我们会提供一个创建简单的 Javascript 程序的实践的教程——循序渐进地构建一个简易版“猜数字”游戏。 @@ -502,4 +502,4 @@ guessField.focus(); 这个示例已经构建完毕，做得好！来尝试运行一下最终的代码，或者[看看我们的最终版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。如果你的版本无法正常工作，请对照[源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)进行检查。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/arrays/index.md b/files/zh-cn/learn_web_development/core/scripting/arrays/index.md index 61c8755890af04..1b4212dabf599a 100644 --- a/files/zh-cn/learn_web_development/core/scripting/arrays/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/arrays/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Arrays original_slug: Learn/JavaScript/First_steps/Arrays --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} 在本模块的最后一篇文章中，我们将看看数组——一种将一组数据存储在单个变量名下的优雅方式。现在我们看看它有什么用，然后探索如何来创建一个数组，检索、添加和删除存储在数组中的元素，以及其他更多的功能。 @@ -510,4 +510,4 @@ window.addEventListener("load", updateCode); - [Indexed collections](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections) — 数组及其表兄弟类型阵列的高级指导。 - {{jsxref("Array")}} — Array 对象引用页面 - 有关此页面中讨论功能的详细参考指南等。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md b/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md index 3cdf29faf129b6..f3ba2ea5a88d7e 100644 --- a/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/build_your_own_function/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Build_your_own_function original_slug: Learn/JavaScript/Building_blocks/Build_your_own_function --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Functions","Learn_web_development/Core/Scripting/Return_values", "Learn_web_development/Core/Scripting")}} 我们在之前的文章里大多学的是理论，这篇文章将提供一个练习的机会——你将练习构建一些你自己风格的函数。在练习过程中，我们也会解释一些针对函数的更深层的实用细节。 @@ -298,4 +298,4 @@ btn.onclick = displayMessage(); 恭喜你，终于到了这里（等你好久了）! 这篇文章介绍了如何写一个自定义函数，要把这个新技能在真实项目中使用上你可能还要花点功夫。下一篇文章中我们将会介绍函数的另一个相关概念 — 返回值。 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Functions","Learn_web_development/Core/Scripting/Return_values", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md b/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md index 8d78cd9ddf7877..01a6cc1c890c43 100644 --- a/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/debugging_javascript/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: e8d495591fefeb3c0c484b989cc155b84b50bb57 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} 现在，我们将探讨常见的跨浏览器 JavaScript 问题以及如何解决它们。这包括使用浏览器开发者工具来跟踪和修复问题，使用 polyfill 和库来解决问题，在较旧的浏览器中使用现代 JavaScript 特性等信息。 @@ -428,4 +428,4 @@ window.AudioContext; 所以，这就是 JavaScript 的基本情况。听起来简单吗？可能并不完全如此，但希望这篇文章至少为你提供了一个开始的地方，以及一些关于如何解决你可能遇到的 JavaScript 相关问题的思路。 -{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md b/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md index 049ee110685193..33c2a2a9ba3044 100644 --- a/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/dom_scripting/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: 7e97f3c5ada65b6638909bde92881a4b8d46a2b8 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} 在编写网页和应用程序时，你最想做的事情之一是以某种方式操纵文档结构。这通常是通过使用文档对象模型（DOM）来实现的。这是一套大量使用了 {{domxref("Document")}} 对象，用于控制 HTML 和样式信息的 API。在这篇文章中，我们将详细了解如何使用 DOM，以及其他一些有趣的 API，它们可以以有趣的方式改变你的环境。 @@ -298,4 +298,4 @@ linkPara.parentNode.removeChild(linkPara); （请参阅我们的 [Web API 索引](/zh-CN/docs/Web/API)，了解 MDN 上记录的 Web API 的完整列表！） -{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/event_bubbling/index.md b/files/zh-cn/learn_web_development/core/scripting/event_bubbling/index.md index b293d2ca6b768c..f15f457b3f2e1f 100644 --- a/files/zh-cn/learn_web_development/core/scripting/event_bubbling/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/event_bubbling/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Event_bubbling original_slug: Learn/JavaScript/Building_blocks/Event_bubbling --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} ## 事件冒泡 @@ -365,4 +365,4 @@ container.addEventListener("click", (event) => { - [事件参考](/zh-CN/docs/Web/Events) - [事件顺序](https://www.quirksmode.org/js/events_order.html)（探讨了捕获和冒泡）——由 Peter-Paul Koch 撰写的非常详尽的文章。 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/events/index.md b/files/zh-cn/learn_web_development/core/scripting/events/index.md index c7704ca1fac00c..d7ea65cd7d2863 100644 --- a/files/zh-cn/learn_web_development/core/scripting/events/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/events/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Events original_slug: Learn/JavaScript/Building_blocks/Events --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Event_bubbling", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} 事件是你正在编程的系统中发生的事情，系统会告诉你有关这些事件的信息，以便你的代码能够对它们做出反应。 @@ -405,4 +405,4 @@ form.addEventListener("submit", (e) => { 另外，理解 JavaScript 在不同环境下使用不同的事件模型很重要——从 Web API 到其他领域，如浏览器 WebExtensions 和 Node.js（服务器端 JavaScript）。我们并不期望现在了解所有这些领域，但是当你在学习 web 开发的过程中，理解这些事件的基础是很有帮助的。 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Event_bubbling", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/functions/index.md b/files/zh-cn/learn_web_development/core/scripting/functions/index.md index 2ce54dd14eefb6..ceaec52508d137 100644 --- a/files/zh-cn/learn_web_development/core/scripting/functions/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/functions/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: d36a0f08f71bc7e17a013da81ed63144a96f7699 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} 在 JavaScript 中另一个基本概念是**函数**, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。在本文中，我们将探索函数的基本概念，如函数的基本语法、如何定义和调用函数、函数的作用域和参数。 @@ -475,4 +475,4 @@ function greeting() { - [函数参考](/zh-CN/docs/Web/JavaScript/Reference/Functions) - [默认参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters)、[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)——高级概念参考 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/json/index.md b/files/zh-cn/learn_web_development/core/scripting/json/index.md index 38eef16e95e32a..3a7deb1e28b689 100644 --- a/files/zh-cn/learn_web_development/core/scripting/json/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/json/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/JSON original_slug: Learn/JavaScript/Objects/JSON --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} JavaScript 对象表示法（JSON）是用于将结构化数据表示为 JavaScript 对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。你会经常遇到它，所以在本文中，我们向你提供使用 JavaScript 处理 JSON 的所有工作，包括访问 JSON 对象中的数据项并编写自己的 JSON。 @@ -343,4 +343,4 @@ myString; - [HTTP 请求方法](/zh-CN/docs/Web/HTTP/Methods) - [JSON 官网（含 ECMA 标准链接）](https://www.json.org/json-zh.html) -{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/loops/index.md b/files/zh-cn/learn_web_development/core/scripting/loops/index.md index 73dedf7a8364d5..52f9cdd1310fb3 100644 --- a/files/zh-cn/learn_web_development/core/scripting/loops/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/loops/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Loops original_slug: Learn/JavaScript/Building_blocks/Looping_code --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} 编程语言可以很迅速方便地帮我们完成一些重复性的任务，从多个基本计算到几乎完成了很多类似工作的其他情况。现在我们来看看处理这种需求的 JavaScript 中可用的循环结构。 @@ -718,4 +718,4 @@ do { - [break](/zh-CN/docs/Web/JavaScript/Reference/Statements/break) and [continue](/zh-CN/docs/Web/JavaScript/Reference/Statements/continue) references - [What's the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — some advanced loop best practices -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/math/index.md b/files/zh-cn/learn_web_development/core/scripting/math/index.md index 22aa329257bf68..2d2fa15288f8e2 100644 --- a/files/zh-cn/learn_web_development/core/scripting/math/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/math/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Math original_slug: Learn/JavaScript/First_steps/Math --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} 在本次课程中，我们讨论 JavaScript 中的数学 — 我们如何使用 {{Glossary("Operator","运算符")}} 和其他功能来成功地操作数字以完成我们的请求。 @@ -353,4 +353,4 @@ function updateBtn() { > [!NOTE] > 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/network_requests/index.md b/files/zh-cn/learn_web_development/core/scripting/network_requests/index.md index 7a0c2284f2e4ad..76278d0c5e22a9 100644 --- a/files/zh-cn/learn_web_development/core/scripting/network_requests/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/network_requests/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: c215109b90da51435eaa2c94a8f6764909f628e0 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/DOM_scripting","Learn_web_development/Core/Scripting/JSON", "Learn_web_development/Core/Scripting")}} 现代网站和应用中另一个常见的任务是从服务端获取个别数据来更新部分网页而不用加载整个页面。这看起来是小细节却对网站性能和行为产生巨大的影响。所以我们将在这篇文章介绍概念和技术使它成为可能，尤其是 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。 @@ -263,4 +263,4 @@ try { - [HTTP 概述](/zh-CN/docs/Web/HTTP/Overview) - [服务器端网页编程](/zh-CN/docs/Learn_web_development/Extensions/Server-side) -{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/DOM_scripting","Learn_web_development/Core/Scripting/JSON", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/return_values/index.md b/files/zh-cn/learn_web_development/core/scripting/return_values/index.md index 1d0504cb775fb7..2da52eec21c559 100644 --- a/files/zh-cn/learn_web_development/core/scripting/return_values/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/return_values/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Return_values original_slug: Learn/JavaScript/Building_blocks/Return_values --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} 函数返回值 - 是本章中最后一个基础概念，让我们一起来瞧瞧.。有些函数在执行完毕后不会返回一个有用的值，但有些会，重要的是理解返回的是什么，怎样使用这些值在你的代码中，我们将在下面讨论这些。 @@ -183,4 +183,4 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI); - [Functions in-depth](/zh-CN/docs/Web/JavaScript/Reference/Functions) — 详细介绍更多高级功能相关信息的指南。 - [Callback functions in JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — 一个常见的 JavaScript 模式是把一个函数传递给另一个函数作为参数，然后在第一个函数中调用它。这有点超出了这门课的范围，但值得学习很久。 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/strings/index.md b/files/zh-cn/learn_web_development/core/scripting/strings/index.md index ebf9a5cd5b73d4..be210ca866572a 100644 --- a/files/zh-cn/learn_web_development/core/scripting/strings/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/strings/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: 3e77d220b829f7477da24af0fa4acf1a54f5dbc9 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} 接下来，我们将把注意力转向字符串——也就是编程中所说的文本片段。在本文中，我们将了解在学习 JavaScript 时，你应该了解的关于字符串的所有常见内容，例如创建字符串、在字符串中转义引号和连接字符串。 @@ -259,4 +259,4 @@ console.log(name + number); // "Front 242" 这就是 JavaScript 中所涉及的字符串的基础知识。在下一篇文章中，我们将在此基础上，研究 JavaScript 中字符串的一些内置方法，以及如何使用它们来操作我们的字符串，使之成为我们想要的形式。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md b/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md index b09a775e266805..bdddf4375705d2 100644 --- a/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/useful_string_methods/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Useful_string_methods original_slug: Learn/JavaScript/First_steps/Useful_string_methods --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} 现在我们学习基本的字符串语法，让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。 @@ -463,4 +463,4 @@ window.addEventListener("load", updateCode); 你不能逃避的事实是在编程中处理单词和句子是非常重要的——特别是在 JavaScript 中，因为网站都是关于与人沟通的。本文已经给出了你现在需要了解的关于操作字符串的基础知识。这将在未来进入更复杂的主题时为你服务。接下来，我们将在短期内研究我们需要关注的最后一个主要的数据类型——数组。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/variables/index.md b/files/zh-cn/learn_web_development/core/scripting/variables/index.md index 1d7923a2486cd7..182a74c2363162 100644 --- a/files/zh-cn/learn_web_development/core/scripting/variables/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/variables/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Variables original_slug: Learn/JavaScript/First_steps/Variables --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} 在读完之前的一些文章之后，你现在应该大概知道了 JavaScript 是什么，你能用它干什么，它是怎么跟其他 web 技术协同工作的，以及从上层来看，它有哪些主要特性。在本文中，我们将深入了解真正的基础知识，学习如何使用 JavaScript 最基础的构建单元——变量。 @@ -444,4 +444,4 @@ typeof myNumber; 到目前为止，你应该了解了一些 JavaScript 变量以及如何创建它们。在下一篇文章中，我们将更详细地关注数字，了解如何在 JavaScript 中使用基础数学。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/scripting/what_went_wrong/index.md b/files/zh-cn/learn_web_development/core/scripting/what_went_wrong/index.md index 040c522f12a984..fa9cdab4adb93a 100644 --- a/files/zh-cn/learn_web_development/core/scripting/what_went_wrong/index.md +++ b/files/zh-cn/learn_web_development/core/scripting/what_went_wrong/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/What_went_wrong original_slug: Learn/JavaScript/First_steps/What_went_wrong --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting")}} 上一节中你创建了“猜数字”游戏，但它可能没有正常工作。别担心，本节将为你提供一些简单的提示，来帮助你查找并修复 JavaScript 程序中的错误，从而让你远离困扰。 @@ -239,4 +239,4 @@ function checkGuess( { - 许多错误不能一一的在这里列出来，我们正在编写一个参考文档来详细说明它们的含义。请参阅 [JavaScript 出错信息参考](/zh-CN/docs/Web/JavaScript/Reference/Errors). - 如果你在阅读了本文之后遇到了一些错误但不知如何解决，你能够得到别人的帮助！可以到 [学习区](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) 或者 [Mozilla IRC](https://wiki.mozilla.org/IRC) 的 [#mdn](irc://irc.mozilla.org/mdn) 聊天室来提问。告诉我们你遇到的错误是什么，我们会尽量帮助你。附加一段你的代码也是很有用的。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting")}} diff --git a/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md b/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md index 7748de3e01adef..eadf79f169f37e 100644 --- a/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md +++ b/files/zh-cn/learn_web_development/core/structuring_content/advanced_text_features/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Advanced_text_features original_slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} HTML 中有许多其他元素可以用于格式化文本，我们没有在 [HTML 文字处理基础](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs)中提到它们。本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。在这里你将了解标记引用、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。 @@ -765,4 +765,4 @@ HTML 还支持将时间和日期标记为可供机器识别的格式的 {{htmlel 到这里你就完成了 HTML 语义文本元素的学习。但要记住，你在本课程中学到的并不是 HTML 文本元素的详细列表——我们想要尽量覆盖主要的、通用的、常见的，或者至少是有趣的部分。如果你想找到更多的 HTML 元素，可以看一看我们的 [HTML 元素参考](/zh-CN/docs/Web/HTML/Element)（从[内联文本语义](/zh-CN/docs/Web/HTML/Element#内联文本语义)部分开始会是一个好的选择）。在下一篇文章中我们将会学习用来[组织 HTML 文档不同部分的 HTML 元素](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents)。 -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md b/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md index 7314b87fac566c..eac4889895a601 100644 --- a/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md +++ b/files/zh-cn/learn_web_development/core/structuring_content/creating_links/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Creating_links original_slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} 超链接非常重要——它们使互联网成为一个*互联的网络*。本文介绍了创建链接所需的语法，并且讨论了链接的最佳实践。 @@ -334,4 +334,4 @@ URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件 这就是链接！在课程的后期，当你开始研究链接的样式时，会回顾链接部分。接下来是 HTML，我们将回顾文本语义，并查看一些你会发现有用的更高级/不寻常的功能，[文本格式进阶](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features)是你的下一站。 -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/zh-cn/learn_web_development/core/structuring_content/debugging_html/index.md b/files/zh-cn/learn_web_development/core/structuring_content/debugging_html/index.md index 0cd7b8a8af1a0f..63b1fbcb219a5d 100644 --- a/files/zh-cn/learn_web_development/core/structuring_content/debugging_html/index.md +++ b/files/zh-cn/learn_web_development/core/structuring_content/debugging_html/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Debugging_HTML original_slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} HTML 优雅明了，但要是出了错，你会不会一头雾水呢，本节将介绍一些查找和修复 HTML 错误的工具。 @@ -164,4 +164,4 @@ HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行 以上就是 HTML 调试的一篇入门介绍，同时对于调试 CSS 和 JavaScript 也有帮助，或者你职业生涯中的任一门语言。这也是 HTML 学习一章的最后一节，接下来是两个小测试，点击“下一页”来小试牛刀吧。 -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/zh-cn/learn_web_development/core/structuring_content/general_embedding_technologies/index.md b/files/zh-cn/learn_web_development/core/structuring_content/general_embedding_technologies/index.md index f648349df01c92..608464c17a6633 100644 --- a/files/zh-cn/learn_web_development/core/structuring_content/general_embedding_technologies/index.md +++ b/files/zh-cn/learn_web_development/core/structuring_content/general_embedding_technologies/index.md @@ -6,7 +6,7 @@ l10n: sourceCommit: be3f184d89979d413204b8f9cbecfc8dd0e5ecf9 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} +{{LearnSidebar}} 现在，你应该已经掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让你在网页中嵌入各种类型内容的元素：{{htmlelement("iframe")}}、{{htmlelement("embed")}} 和 {{htmlelement("object")}} 元素。`