From 344ecb73d7aef9808b90022e9b1086f648290f9a Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Fri, 13 Dec 2024 13:22:21 +0100 Subject: [PATCH] [zh-tw]: auto-fix links (#25037) --- .../bounce_off_the_walls/index.md | 6 +- .../create_the_canvas_and_draw_on_it/index.md | 4 +- .../2d_breakout_game_pure_javascript/index.md | 16 +-- .../move_the_ball/index.md | 4 +- .../glossary/block-level_content/index.md | 6 +- files/zh-tw/glossary/block/css/index.md | 2 +- files/zh-tw/glossary/class/index.md | 2 +- files/zh-tw/glossary/csp/index.md | 2 +- files/zh-tw/glossary/css_selector/index.md | 6 +- files/zh-tw/glossary/cssom/index.md | 2 +- files/zh-tw/glossary/element/index.md | 4 +- files/zh-tw/glossary/first_cpu_idle/index.md | 2 +- .../zh-tw/glossary/first_input_delay/index.md | 4 +- files/zh-tw/glossary/ftp/index.md | 2 +- files/zh-tw/glossary/head/index.md | 2 +- files/zh-tw/glossary/mime_type/index.md | 4 +- files/zh-tw/glossary/oop/index.md | 2 +- .../glossary/responsive_web_design/index.md | 4 +- files/zh-tw/glossary/server/index.md | 2 +- files/zh-tw/glossary/url/index.md | 4 +- files/zh-tw/glossary/websockets/index.md | 2 +- files/zh-tw/learn/common_questions/index.md | 38 +++---- .../what_is_a_web_server/index.md | 10 +- files/zh-tw/learn/css/css_layout/index.md | 2 +- .../css/first_steps/how_css_works/index.md | 2 +- files/zh-tw/learn/css/first_steps/index.md | 2 +- files/zh-tw/learn/css/index.md | 2 +- files/zh-tw/learn/forms/index.md | 22 ++-- .../css_basics/index.md | 2 +- .../dealing_with_files/index.md | 2 +- .../how_the_web_works/index.md | 2 +- .../installing_basic_software/index.md | 2 +- .../javascript_basics/index.md | 8 +- .../publishing_your_website/index.md | 8 +- files/zh-tw/learn/html/howto/index.md | 4 +- .../creating_hyperlinks/index.md | 2 +- .../document_and_website_structure/index.md | 4 +- .../getting_started/index.md | 2 +- .../the_head_metadata_in_html/index.md | 2 +- .../images_in_html/index.md | 2 +- files/zh-tw/learn/html/tables/basics/index.md | 6 +- .../learn/javascript/asynchronous/index.md | 4 +- .../asynchronous/introducing/index.md | 10 +- .../building_blocks/conditionals/index.md | 26 ++--- .../building_blocks/functions/index.md | 8 +- .../building_blocks/image_gallery/index.md | 2 +- .../building_blocks/looping_code/index.md | 14 +-- .../fetching_data/index.md | 6 +- .../first_steps/a_first_splash/index.md | 16 +-- .../javascript/first_steps/arrays/index.md | 10 +- .../javascript/first_steps/math/index.md | 8 +- .../silly_story_generator/index.md | 2 +- .../javascript/first_steps/strings/index.md | 4 +- .../useful_string_methods/index.md | 2 +- .../javascript/first_steps/variables/index.md | 4 +- .../first_steps/what_is_javascript/index.md | 6 +- .../first_steps/what_went_wrong/index.md | 8 +- files/zh-tw/learn/javascript/howto/index.md | 2 +- .../adding_bouncing_balls_features/index.md | 2 +- .../learn/javascript/objects/basics/index.md | 4 +- .../objects/classes_in_javascript/index.md | 10 +- files/zh-tw/learn/javascript/objects/index.md | 2 +- .../learn/javascript/objects/json/index.md | 12 +- .../objects/object_building_practice/index.md | 2 +- .../objects/object_prototypes/index.md | 6 +- .../django/development_environment/index.md | 4 +- .../django/django_assessment_blog/index.md | 4 +- .../learn/server-side/django/forms/index.md | 10 +- .../server-side/django/generic_views/index.md | 4 +- .../server-side/django/home_page/index.md | 8 +- .../server-side/django/introduction/index.md | 2 +- .../django/skeleton_website/index.md | 2 +- .../express_nodejs/deployment/index.md | 6 +- .../development_environment/index.md | 4 +- .../displaying_data/book_list_page/index.md | 2 +- .../locallibrary_base_template/index.md | 2 +- .../server-side/express_nodejs/forms/index.md | 4 +- .../express_nodejs/routes/index.md | 6 +- .../express_nodejs/skeleton_website/index.md | 2 +- .../learn/server-side/first_steps/index.md | 4 +- .../first_steps/introduction/index.md | 2 +- files/zh-tw/learn/server-side/index.md | 4 +- .../learn/tools_and_testing/github/index.md | 2 +- .../contributing/getting_started/index.md | 24 ++-- .../howto/creating_moving_deleting/index.md | 12 +- files/zh-tw/mdn/writing_guidelines/index.md | 6 +- .../writing_style_guide/index.md | 8 +- .../anatomy_of_a_webextension/index.md | 14 +-- .../webextensions/api/cookies/index.md | 4 +- .../webextensions/api/storage/local/index.md | 2 +- .../webextensions/content_scripts/index.md | 22 ++-- .../mozilla/add-ons/webextensions/index.md | 10 +- .../manifest.json/author/index.md | 4 +- .../manifest.json/background/index.md | 2 +- .../browser_specific_settings/index.md | 4 +- .../manifest.json/homepage_url/index.md | 4 +- .../manifest.json/options_ui/index.md | 8 +- .../context_menu_items/index.md | 2 +- .../user_interface/devtools_panels/index.md | 4 +- .../webextensions/user_interface/index.md | 2 +- .../user_interface/sidebars/index.md | 2 +- .../user_interface/toolbar_button/index.md | 6 +- .../what_are_webextensions/index.md | 4 +- .../your_first_webextension/index.md | 30 ++--- .../your_second_webextension/index.md | 10 +- .../zh-tw/mozilla/firefox/releases/2/index.md | 4 +- .../releases/2/security_changes/index.md | 2 +- .../releases/3/dom_improvements/index.md | 10 +- .../zh-tw/mozilla/firefox/releases/3/index.md | 14 +-- files/zh-tw/web/accessibility/index.md | 2 +- files/zh-tw/web/api/abortcontroller/index.md | 4 +- .../getbytefrequencydata/index.md | 4 +- files/zh-tw/web/api/animationevent/index.md | 4 +- .../zh-tw/web/api/battery_status_api/index.md | 10 +- files/zh-tw/web/api/blob/type/index.md | 2 +- files/zh-tw/web/api/canvas_api/index.md | 26 ++--- .../tutorial/advanced_animations/index.md | 4 +- .../applying_styles_and_colors/index.md | 4 +- .../canvas_api/tutorial/basic_usage/index.md | 4 +- .../canvas_api/tutorial/compositing/index.md | 2 +- .../tutorial/drawing_shapes/index.md | 4 +- .../web/api/canvas_api/tutorial/index.md | 36 +++--- .../pixel_manipulation_with_canvas/index.md | 2 +- .../canvas_api/tutorial/using_images/index.md | 6 +- .../web/api/channel_messaging_api/index.md | 4 +- files/zh-tw/web/api/closeevent/index.md | 2 +- .../web/api/console/assert_static/index.md | 2 +- .../managing_screen_orientation/index.md | 10 +- .../web/api/cssstylesheet/insertrule/index.md | 6 +- .../api/customelementregistry/define/index.md | 4 +- .../web/api/document/execcommand/index.md | 4 +- files/zh-tw/web/api/document/head/index.md | 2 +- .../web/api/document/queryselector/index.md | 2 +- .../web/api/document_object_model/index.md | 4 +- files/zh-tw/web/api/domparser/index.md | 12 +- .../web/api/element/clientheight/index.md | 2 +- .../web/api/element/keyup_event/index.md | 4 +- .../web/api/element/scrollheight/index.md | 4 +- files/zh-tw/web/api/errorevent/index.md | 2 +- .../web/api/event/currenttarget/index.md | 2 +- files/zh-tw/web/api/event/index.md | 8 +- .../web/api/event/preventdefault/index.md | 2 +- .../web/api/event/stoppropagation/index.md | 2 +- files/zh-tw/web/api/event/target/index.md | 2 +- .../api/eventtarget/addeventlistener/index.md | 2 +- .../api/eventtarget/dispatchevent/index.md | 4 +- files/zh-tw/web/api/eventtarget/index.md | 4 +- files/zh-tw/web/api/fetch_api/index.md | 8 +- .../web/api/fetch_api/using_fetch/index.md | 8 +- files/zh-tw/web/api/file/index.md | 10 +- .../file_and_directory_entries_api/index.md | 20 ++-- .../index.md | 16 +-- files/zh-tw/web/api/filelist/index.md | 2 +- files/zh-tw/web/api/filereader/index.md | 8 +- files/zh-tw/web/api/fullscreen_api/index.md | 4 +- files/zh-tw/web/api/gainnode/gain/index.md | 2 +- files/zh-tw/web/api/gainnode/index.md | 2 +- .../web/api/geolocation/clearwatch/index.md | 2 +- .../geolocation/getcurrentposition/index.md | 2 +- files/zh-tw/web/api/geolocation/index.md | 2 +- .../api/geolocation/watchposition/index.md | 2 +- files/zh-tw/web/api/geolocation_api/index.md | 14 +-- .../geolocationcoordinates/accuracy/index.md | 2 +- .../geolocationcoordinates/altitude/index.md | 2 +- .../altitudeaccuracy/index.md | 2 +- .../geolocationcoordinates/heading/index.md | 4 +- .../web/api/geolocationcoordinates/index.md | 4 +- .../geolocationcoordinates/latitude/index.md | 2 +- .../geolocationcoordinates/longitude/index.md | 2 +- .../api/geolocationcoordinates/speed/index.md | 2 +- .../api/geolocationposition/coords/index.md | 2 +- .../web/api/geolocationposition/index.md | 2 +- .../geolocationposition/timestamp/index.md | 2 +- .../geolocationpositionerror/code/index.md | 2 +- .../web/api/geolocationpositionerror/index.md | 2 +- .../geolocationpositionerror/message/index.md | 2 +- files/zh-tw/web/api/history_api/index.md | 6 +- .../drag_operations/index.md | 34 +++--- .../web/api/html_drag_and_drop_api/index.md | 36 +++--- .../api/htmlcanvaselement/todataurl/index.md | 6 +- .../api/htmlmediaelement/abort_event/index.md | 16 +-- .../htmlselectelement/checkvalidity/index.md | 2 +- .../setcustomvalidity/index.md | 2 +- files/zh-tw/web/api/indexeddb_api/index.md | 44 ++++---- .../indexeddb_api/using_indexeddb/index.md | 12 +- files/zh-tw/web/api/keyboardevent/index.md | 2 +- .../media_capture_and_streams_api/index.md | 4 +- .../mediadevices/enumeratedevices/index.md | 4 +- files/zh-tw/web/api/mediadevices/index.md | 2 +- files/zh-tw/web/api/mediaquerylist/index.md | 6 +- files/zh-tw/web/api/messageevent/index.md | 4 +- files/zh-tw/web/api/mutationobserver/index.md | 10 +- .../web/api/navigator/geolocation/index.md | 2 +- .../web/api/network_information_api/index.md | 2 +- files/zh-tw/web/api/node/removechild/index.md | 2 +- files/zh-tw/web/api/nodelist/index.md | 4 +- files/zh-tw/web/api/notification/index.md | 4 +- .../zh-tw/web/api/notifications_api/index.md | 2 +- .../using_the_notifications_api/index.md | 14 +-- files/zh-tw/web/api/pointer_lock_api/index.md | 24 ++-- files/zh-tw/web/api/response/index.md | 4 +- .../zh-tw/web/api/server-sent_events/index.md | 10 +- files/zh-tw/web/api/touchlist/index.md | 4 +- .../api/url/createobjecturl_static/index.md | 4 +- files/zh-tw/web/api/vibration_api/index.md | 4 +- files/zh-tw/web/api/web_audio_api/index.md | 4 +- .../using_web_workers/index.md | 20 ++-- files/zh-tw/web/api/websocket/index.md | 12 +- .../index.md | 8 +- .../web/api/window/localstorage/index.md | 4 +- .../web/api/window/popstate_event/index.md | 4 +- .../api/window/requestanimationframe/index.md | 2 +- .../zh-tw/web/api/window/setinterval/index.md | 12 +- .../web/api/xmlhttprequest/status/index.md | 4 +- .../using_xmlhttprequest/index.md | 6 +- files/zh-tw/web/css/@font-face/index.md | 2 +- files/zh-tw/web/css/_colon_lang/index.md | 2 +- files/zh-tw/web/css/_colon_target/index.md | 2 +- .../css/_doublecolon_first-letter/index.md | 6 +- .../web/css/animation-fill-mode/index.md | 4 +- files/zh-tw/web/css/background-color/index.md | 4 +- files/zh-tw/web/css/box-shadow/index.md | 4 +- files/zh-tw/web/css/box-sizing/index.md | 4 +- .../using_css_animations/index.md | 2 +- .../using_multiple_backgrounds/index.md | 6 +- .../mastering_margin_collapsing/index.md | 4 +- .../basic_concepts_of_flexbox/index.md | 4 +- .../web/css/css_flexible_box_layout/index.md | 6 +- .../basic_concepts_of_grid_layout/index.md | 4 +- files/zh-tw/web/css/css_grid_layout/index.md | 14 +-- .../testing_media_queries/index.md | 2 +- .../stacking_context_example_1/index.md | 14 +-- files/zh-tw/web/css/css_selectors/index.md | 6 +- .../using_css_transitions/index.md | 12 +- .../web/css/descendant_combinator/index.md | 2 +- files/zh-tw/web/css/height/index.md | 4 +- files/zh-tw/web/css/index.md | 18 +-- files/zh-tw/web/css/inheritance/index.md | 8 +- files/zh-tw/web/css/replaced_element/index.md | 2 +- .../web/css/shorthand_properties/index.md | 2 +- files/zh-tw/web/css/syntax/index.md | 4 +- files/zh-tw/web/css/transform-origin/index.md | 2 +- files/zh-tw/web/css/transform/index.md | 4 +- .../web/css/transition-duration/index.md | 2 +- .../css/transition-timing-function/index.md | 2 +- .../zh-tw/web/events/event_handlers/index.md | 2 +- files/zh-tw/web/events/index.md | 100 ++++++++--------- files/zh-tw/web/html/attributes/index.md | 34 +++--- files/zh-tw/web/html/element/form/index.md | 2 +- files/zh-tw/web/html/element/head/index.md | 2 +- files/zh-tw/web/html/element/hr/index.md | 14 +-- .../web/html/element/input/submit/index.md | 2 +- files/zh-tw/web/html/element/nav/index.md | 16 +-- files/zh-tw/web/html/element/picture/index.md | 4 +- files/zh-tw/web/html/element/q/index.md | 14 +-- files/zh-tw/web/html/element/ruby/index.md | 6 +- files/zh-tw/web/html/element/script/index.md | 10 +- files/zh-tw/web/html/element/table/index.md | 4 +- .../zh-tw/web/html/element/template/index.md | 14 +-- files/zh-tw/web/html/element/time/index.md | 14 +-- files/zh-tw/web/html/element/title/index.md | 2 +- .../global_attributes/data-_star_/index.md | 2 +- files/zh-tw/web/html/index.md | 16 +-- .../quirks_mode_and_standards_mode/index.md | 2 +- files/zh-tw/web/http/caching/index.md | 6 +- files/zh-tw/web/http/cookies/index.md | 4 +- files/zh-tw/web/http/cors/index.md | 2 +- .../web/http/headers/accept-post/index.md | 2 +- files/zh-tw/web/http/headers/accept/index.md | 4 +- .../web/http/headers/content-type/index.md | 2 +- files/zh-tw/web/http/index.md | 2 +- .../http/protocol_upgrade_mechanism/index.md | 2 +- files/zh-tw/web/javascript/closures/index.md | 4 +- .../web/javascript/data_structures/index.md | 8 +- .../index.md | 16 +-- .../zh-tw/web/javascript/event_loop/index.md | 4 +- .../control_flow_and_error_handling/index.md | 8 +- .../guide/expressions_and_operators/index.md | 106 +++++++++--------- .../web/javascript/guide/functions/index.md | 30 ++--- .../guide/grammar_and_types/index.md | 12 +- files/zh-tw/web/javascript/guide/index.md | 60 +++++----- .../javascript/guide/introduction/index.md | 4 +- .../guide/loops_and_iteration/index.md | 2 +- .../guide/regular_expressions/index.md | 12 +- .../javascript/guide/typed_arrays/index.md | 4 +- .../javascript/guide/using_promises/index.md | 2 +- .../javascript_technologies_overview/index.md | 4 +- .../web/javascript/language_overview/index.md | 56 ++++----- .../reference/errors/not_defined/index.md | 2 +- .../errors/redeclared_parameter/index.md | 2 +- .../errors/too_much_recursion/index.md | 2 +- .../functions/arrow_functions/index.md | 2 +- .../reference/functions/get/index.md | 2 +- .../functions/method_definitions/index.md | 2 +- .../functions/rest_parameters/index.md | 2 +- .../reference/functions/set/index.md | 2 +- .../global_objects/array/from/index.md | 2 +- .../reference/global_objects/array/index.md | 6 +- .../global_objects/array/indexof/index.md | 2 +- .../global_objects/array/isarray/index.md | 2 +- .../global_objects/array/lastindexof/index.md | 2 +- .../global_objects/array/length/index.md | 2 +- .../global_objects/array/sort/index.md | 4 +- .../global_objects/arraybuffer/index.md | 2 +- .../global_objects/function/apply/index.md | 2 +- .../global_objects/function/call/index.md | 6 +- .../reference/global_objects/index.md | 2 +- .../reference/global_objects/map/index.md | 6 +- .../global_objects/math/random/index.md | 4 +- .../global_objects/object/create/index.md | 2 +- .../object/defineproperty/index.md | 4 +- .../object/hasownproperty/index.md | 4 +- .../global_objects/object/keys/index.md | 2 +- .../global_objects/promise/all/index.md | 2 +- .../reference/global_objects/set/has/index.md | 2 +- .../reference/global_objects/string/index.md | 6 +- files/zh-tw/web/javascript/reference/index.md | 2 +- .../reference/lexical_grammar/index.md | 14 +-- .../operators/conditional_operator/index.md | 2 +- .../destructuring_assignment/index.md | 2 +- .../javascript/reference/operators/index.md | 2 +- .../operators/optional_chaining/index.md | 2 +- .../reference/operators/this/index.md | 10 +- .../reference/operators/typeof/index.md | 2 +- .../reference/statements/break/index.md | 2 +- .../reference/statements/const/index.md | 4 +- .../reference/statements/debugger/index.md | 2 +- .../reference/statements/for...in/index.md | 22 ++-- .../statements/function_star_/index.md | 2 +- .../reference/statements/let/index.md | 4 +- .../reference/statements/return/index.md | 4 +- .../reference/statements/switch/index.md | 2 +- .../reference/statements/var/index.md | 4 +- .../javascript/reference/strict_mode/index.md | 18 +-- .../reference/template_literals/index.md | 2 +- files/zh-tw/web/mathml/index.md | 2 +- .../web/media/formats/containers/index.md | 2 +- files/zh-tw/web/opensearch/index.md | 2 +- files/zh-tw/web/performance/index.md | 18 +-- files/zh-tw/web/progressive_web_apps/index.md | 22 ++-- .../web/security/same-origin_policy/index.md | 14 +-- .../svg/attribute/stroke-dashoffset/index.md | 8 +- .../web/svg/tutorial/basic_shapes/index.md | 16 +-- .../svg/tutorial/fills_and_strokes/index.md | 2 +- .../web/svg/tutorial/getting_started/index.md | 2 +- .../zh-tw/web/svg/tutorial/gradients/index.md | 4 +- files/zh-tw/web/svg/tutorial/index.md | 32 +++--- .../web/svg/tutorial/introduction/index.md | 2 +- files/zh-tw/web/svg/tutorial/paths/index.md | 8 +- .../zh-tw/web/svg/tutorial/patterns/index.md | 2 +- files/zh-tw/web/tutorials/index.md | 12 +- files/zh-tw/web/uri/schemes/data/index.md | 8 +- files/zh-tw/webassembly/index.md | 4 +- 353 files changed, 1228 insertions(+), 1228 deletions(-) diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index c570c4138f2bd8..f8fb12c22f0db6 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -7,9 +7,9 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} -這是 [Gamedev Canvas tutorial](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch)中的第三步 你可以在以下的連結中查看原始碼[Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). +這是 [Gamedev Canvas tutorial](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)中的第三步 你可以在以下的連結中查看原始碼[Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). -很好我們現在可以讓球移動了, 但目前他會在移動到邊緣後消失, 這使我們少了點樂趣! 為了解決這個問題我們稍後會加入一些碰撞處理 ( [later](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection) ) 使球可以再碰到邊緣時反彈. +很好我們現在可以讓球移動了, 但目前他會在移動到邊緣後消失, 這使我們少了點樂趣! 為了解決這個問題我們稍後會加入一些碰撞處理 ( [later](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) ) 使球可以再碰到邊緣時反彈. ## 簡單的碰撞偵測 @@ -104,6 +104,6 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { ## 下一步 -我們現在已經進入了舞台，我們的球是移動和停留在遊戲板上。 在第四章中，我們將討論實現一個可控制的球拍 - 參見 [Paddle and keyboard controls](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). +我們現在已經進入了舞台，我們的球是移動和停留在遊戲板上。 在第四章中，我們將討論實現一個可控制的球拍 - 參見 [Paddle and keyboard controls](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index d8fed4486391cd..e19377846f38b2 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_dra {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} -這是[Gamedev Canvas tutorial](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch)十個步驟的第一步。你可以這份教學的原始碼，當你完成這份教學你的程式碼應該跟[Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html)差不多。 +這是[Gamedev Canvas tutorial](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)十個步驟的第一步。你可以這份教學的原始碼，當你完成這份教學你的程式碼應該跟[Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html)差不多。 在開始撰寫遊戲功能之前，我們先建構在遊戲中負責渲染的基礎結構。渲染可透過 HTML 的{{htmlelement("canvas")}} 元件完成。 @@ -110,6 +110,6 @@ ctx.closePath(); ## 下一步 -現在我們已經設定基本的 HTML 並且學了一些 canvas 知識 ，讓我們接著下去第二章實做[如何在遊戲中移動球](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball)[。](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball) +現在我們已經設定基本的 HTML 並且學了一些 canvas 知識 ，讓我們接著下去第二章實做[如何在遊戲中移動球](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)[。](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md index d20393dc0c16c5..654861e8b1b783 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -22,19 +22,19 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript 1. [建立 Canvas 並繪製](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) 2. [讓球移動](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) 3. [讓球反彈](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) -4. [搖桿和鍵盤控制](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) -5. [判斷遊戲結束](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over) -6. [建立磚塊場地](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) -7. [碰撞偵測](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection) -8. [更新分數並判斷輸贏](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) -9. [滑鼠控制](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls) -10. [結束](/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up) +4. [搖桿和鍵盤控制](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) +5. [判斷遊戲結束](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over) +6. [建立磚塊場地](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) +7. [碰撞偵測](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) +8. [更新分數並判斷輸贏](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) +9. [滑鼠控制](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls) +10. [結束](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up) 若一開始就單純使用 JavaScript，將能學到紮實的網頁遊戲開發知識。往後則可自由選擇你自己愛用的框架 (Framework) 來完成專案。 框架同樣是由 JavaScript 寫成的工具。因此在用框架開發之前，能先了解程式語言本身將有助於了解框架內部所發生的事。框架可加快開發速度並代勞遊戲中某些無聊的部份，但若遊戲運作得不如預期，你都可試著除錯或撰寫純 JavaScript 的解決方案。 > [!NOTE] -> 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/docs/Games/Workflows/2D_breakout_game_Phaser)〉系列相關文章 。 +> 如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈[使用剖析器 (Phaser) 的打磚塊遊戲](/zh-TW/docs/Games/Tutorials/2D_breakout_game_Phaser)〉系列相關文章 。 > [!NOTE] > 此系列文章也能當做行動遊戲開發工作坊的教材。如果你想講解一般的遊戲開發，則可利用此教學為基礎的〈[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)〉。 diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 463e6fc42430e2..a2ca0f5a7f54eb 100644 --- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} -這一篇是[Gamedev Canvas tutorial](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch)十個步驟中的第二步。當完成此步驟你的程式碼應該會與[Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html)差不多 +這一篇是[Gamedev Canvas tutorial](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)十個步驟中的第二步。當完成此步驟你的程式碼應該會與[Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html)差不多 完成上一個步驟，你已經知道如何畫出一顆球，現在讓他動起來吧。藉由繪製球在螢幕上然後再清除，然後在每個影格中繪製球在偏移一點點的位置上（如果在同一個位置上就等於沒動），造成物體移動的感覺，就如同電影中物體移動的方式。 @@ -138,6 +138,6 @@ Exercise: 練習改變球的移動速度或行進方向。 ## 下一步 -我們繪製了球並且讓他可以移動，但他仍會消失在 canvas 的邊緣。在第三章我們將會實作 [讓球碰到牆壁後反彈](/zh-TW/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls). +我們繪製了球並且讓他可以移動，但他仍會消失在 canvas 的邊緣。在第三章我們將會實作 [讓球碰到牆壁後反彈](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} diff --git a/files/zh-tw/glossary/block-level_content/index.md b/files/zh-tw/glossary/block-level_content/index.md index d9f51510f6b7db..35119f29d90cf4 100644 --- a/files/zh-tw/glossary/block-level_content/index.md +++ b/files/zh-tw/glossary/block-level_content/index.md @@ -5,7 +5,7 @@ slug: Glossary/Block-level_content {{GlossarySidebar}} -HTML（超文字標記語言, **Hypertext Markup Language**）元素通常為『區塊級』元素或是[『行內級』元素](/zh-TW/docs/HTML/Inline_elements)。一個區塊級元素會藉由建立『區塊』的動作，完全佔滿其父元素（容器）的空間。本文將為你說明其意涵. +HTML（超文字標記語言, **Hypertext Markup Language**）元素通常為『區塊級』元素或是[『行內級』元素](/zh-TW/docs/Glossary/Inline-level_content)。一個區塊級元素會藉由建立『區塊』的動作，完全佔滿其父元素（容器）的空間。本文將為你說明其意涵. 瀏覽器預設以在元素前後換行的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。 @@ -48,7 +48,7 @@ There are a couple of key differences between block-level elements and inline el - Content model - : Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. -The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of [content categories](/zh-TW/docs/HTML/Content_categories). The "block-level" category roughly corresponds to the category of [flow content](/zh-TW/docs/HTML/Content_categories#Flow_content) in HTML5, while "inline" corresponds to [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), but there are additional categories. +The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of [content categories](/zh-TW/docs/Web/HTML/Content_categories). The "block-level" category roughly corresponds to the category of [flow content](/zh-TW/docs/Web/HTML/Content_categories#flow_content) in HTML5, while "inline" corresponds to [phrasing content](/zh-TW/docs/Web/HTML/Content_categories#phrasing_content), but there are additional categories. ## 相關元素 @@ -112,6 +112,6 @@ The following is a complete list of all HTML block level elements (although "blo ### 參閱 - [行內級元素](/zh-TW/docs/Glossary/Inline-level_content) -- [Block formatting context](/zh-TW/docs/Web/Guide/CSS/Block_formatting_context) +- [Block formatting context](/zh-TW/docs/Web/CSS/CSS_display/Block_formatting_context) - {{cssxref("display")}} - [`writing-mode`](/zh-TW/docs/Web/CSS/writing-mode) diff --git a/files/zh-tw/glossary/block/css/index.md b/files/zh-tw/glossary/block/css/index.md index 5d08e594b8c61a..64f225f9162cab 100644 --- a/files/zh-tw/glossary/block/css/index.md +++ b/files/zh-tw/glossary/block/css/index.md @@ -13,4 +13,4 @@ slug: Glossary/Block/CSS ### 基礎知識 -- [視覺格式模型](/zh-TW/docs/Web/Guide/CSS/Visual_formatting_model) +- [視覺格式模型](/zh-TW/docs/Web/CSS/Visual_formatting_model) diff --git a/files/zh-tw/glossary/class/index.md b/files/zh-tw/glossary/class/index.md index efe8356b1ce9c7..1a73281b696495 100644 --- a/files/zh-tw/glossary/class/index.md +++ b/files/zh-tw/glossary/class/index.md @@ -11,7 +11,7 @@ slug: Glossary/Class ### 基礎知識 -- [基於類 vs. 基於原型的編程語言](/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages) (像 JavaScript) +- [基於類 vs. 基於原型的編程語言](/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#class-based_vs._prototype-based_languages) (像 JavaScript) - [在 JavaScript 中使用 functions 當作類](/zh-TW/docs/Learn/JavaScript/Objects#the_class) - 維基百科上的[基於類的編程](https://en.wikipedia.org/wiki/Class-based_programming) - 維基百科上的[面向對象編程](https://en.wikipedia.org/wiki/Object-oriented_programming) diff --git a/files/zh-tw/glossary/csp/index.md b/files/zh-tw/glossary/csp/index.md index becce42fb545cb..9877f536d17d9d 100644 --- a/files/zh-tw/glossary/csp/index.md +++ b/files/zh-tw/glossary/csp/index.md @@ -17,4 +17,4 @@ slug: Glossary/CSP ### 技術資訊 -- [MDN 上的内容安全策略文檔](/zh-TW/docs/Web/Security/CSP) +- [MDN 上的内容安全策略文檔](/zh-TW/docs/Web/HTTP/CSP) diff --git a/files/zh-tw/glossary/css_selector/index.md b/files/zh-tw/glossary/css_selector/index.md index d49869d9c02088..d1e73b68361016 100644 --- a/files/zh-tw/glossary/css_selector/index.md +++ b/files/zh-tw/glossary/css_selector/index.md @@ -43,9 +43,9 @@ p { - 複合選擇器 - - [鄰接同層選擇器](/zh-TW/docs/Web/CSS/Adjacent_sibling_selectors) `A + B` - - [通用同層選擇器](/zh-TW/docs/Web/CSS/General_sibling_selectors) `A ~ B` - - [直屬選擇器](/zh-TW/docs/Web/CSS/Child_selectors) `A > B` + - [鄰接同層選擇器](/zh-TW/docs/Web/CSS/Next-sibling_combinator) `A + B` + - [通用同層選擇器](/zh-TW/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B` + - [直屬選擇器](/zh-TW/docs/Web/CSS/Child_combinator) `A > B` - [後代選擇器](/zh-TW/docs/Web/CSS/Descendant_combinator) `A B` - [虛擬元素](/zh-TW/docs/Web/CSS/Pseudo-elements) diff --git a/files/zh-tw/glossary/cssom/index.md b/files/zh-tw/glossary/cssom/index.md index b061917bb41180..ad10ff1326f560 100644 --- a/files/zh-tw/glossary/cssom/index.md +++ b/files/zh-tw/glossary/cssom/index.md @@ -15,4 +15,4 @@ CSSOM 與 DOM 一起建構渲染樹，瀏覽器依序使用它來排版與繪製 ## 也可以看看 -- [Populating the page: how browsers work](/zh-TW/docs/Web/Performance/Populating_the_page:_how_browsers_work) +- [Populating the page: how browsers work](/zh-TW/docs/Web/Performance/How_browsers_work) diff --git a/files/zh-tw/glossary/element/index.md b/files/zh-tw/glossary/element/index.md index 19433f972ca7aa..5ddd026629916d 100644 --- a/files/zh-tw/glossary/element/index.md +++ b/files/zh-tw/glossary/element/index.md @@ -13,5 +13,5 @@ slug: Glossary/Element ## 瞭解更多 - The {{domxref("Element")}} interface, representing an element in the DOM. -- [More details about elements.](/zh-TW/docs/Web/Guide/HTML/Element) -- [Web_Components/Custom_Elements](/zh-TW/docs/Web/Web_Components/Custom_Elements) +- [More details about elements.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Web_Components/Custom_Elements](/zh-TW/docs/Web/API/Web_components/Using_custom_elements) diff --git a/files/zh-tw/glossary/first_cpu_idle/index.md b/files/zh-tw/glossary/first_cpu_idle/index.md index bed5c3641ecf65..37f61c3513d44b 100644 --- a/files/zh-tw/glossary/first_cpu_idle/index.md +++ b/files/zh-tw/glossary/first_cpu_idle/index.md @@ -5,4 +5,4 @@ slug: Glossary/First_CPU_idle {{GlossarySidebar}} -**首次 CPU 閒置 (First CPU Idle)** 測量當頁面進行最小幅度的互動或適當視窗平靜到足夠處理使用者的輸入。它是一個非標準的 Google 網站效能指標。一般來說，它發生在大部分但是非必要的所有可見 UI 元素進行互動時，且使用者介面能做出回應，大多數平均的使用者輸入落在 50 毫秒。它也被稱為 [First interactive](/zh-TW/docs/Glossary/First_interactive)。 +**首次 CPU 閒置 (First CPU Idle)** 測量當頁面進行最小幅度的互動或適當視窗平靜到足夠處理使用者的輸入。它是一個非標準的 Google 網站效能指標。一般來說，它發生在大部分但是非必要的所有可見 UI 元素進行互動時，且使用者介面能做出回應，大多數平均的使用者輸入落在 50 毫秒。它也被稱為 [First interactive](/zh-TW/docs/Glossary/First_CPU_idle)。 diff --git a/files/zh-tw/glossary/first_input_delay/index.md b/files/zh-tw/glossary/first_input_delay/index.md index 1d4687f9ca55d8..60efaf057fe719 100644 --- a/files/zh-tw/glossary/first_input_delay/index.md +++ b/files/zh-tw/glossary/first_input_delay/index.md @@ -7,9 +7,9 @@ slug: Glossary/First_input_delay **首次輸入延遲** (First input delay, FID) 測量從使用者第一次與你的網站互動（例如當他們點選連結、按鈕或是使用自訂的 JavaScript 控制），瀏覽器實際上能夠回應此次互動的時間點。它是個在首次使用者於網頁互動以及瀏覽器回應此互動的時間長度 (以毫秒為單位)。捲動與縮放行為都不包含在這個指標。 -這個時間介於內容已經在頁面繪製完成 (FCP) 以及所有功能都能夠回應使用者的互動時間。通常取決於 JavaScript 需要在主執行緒下載、剖析、以及執行，而且在缺乏裝置速度 (考慮低階行動裝置) 的情況。延遲時間越長，使用者體驗越差。縮短網站初始化時間以及預估 [long tasks](/zh-TW/docs/Web/API/Long_Tasks_API) 有助於預估首次輸入延遲。 +這個時間介於內容已經在頁面繪製完成 (FCP) 以及所有功能都能夠回應使用者的互動時間。通常取決於 JavaScript 需要在主執行緒下載、剖析、以及執行，而且在缺乏裝置速度 (考慮低階行動裝置) 的情況。延遲時間越長，使用者體驗越差。縮短網站初始化時間以及預估 [long tasks](/zh-TW/docs/Web/API/PerformanceLongTaskTiming) 有助於預估首次輸入延遲。 ## 也可以看看 - [requestIdleCallback](/zh-TW/docs/Web/API/Window/requestIdleCallback) -- [lazy loading](/zh-TW/docs/Learn/Performance/Lazy_loading) +- [lazy loading](/zh-TW/docs/Web/Performance/Lazy_loading) diff --git a/files/zh-tw/glossary/ftp/index.md b/files/zh-tw/glossary/ftp/index.md index 772326d7c6a38c..7a5b9ad27e87bd 100644 --- a/files/zh-tw/glossary/ftp/index.md +++ b/files/zh-tw/glossary/ftp/index.md @@ -11,5 +11,5 @@ slug: Glossary/FTP ### 基礎知識 -- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn/Upload_files_to_a_web_server) +- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server) - 維基百科上的[FTP](https://zh.wikipedia.org/wiki/File_Transfer_Protocol) diff --git a/files/zh-tw/glossary/head/index.md b/files/zh-tw/glossary/head/index.md index bf2f7987b799d6..994320a1d95df9 100644 --- a/files/zh-tw/glossary/head/index.md +++ b/files/zh-tw/glossary/head/index.md @@ -12,4 +12,4 @@ slug: Glossary/Head ### HTML head - MDN 上的 {{htmlelement("head")}} 元件參考 -- [The HTML \](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head) 在 MDN 上的學習領域 +- [The HTML \](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) 在 MDN 上的學習領域 diff --git a/files/zh-tw/glossary/mime_type/index.md b/files/zh-tw/glossary/mime_type/index.md index 4c8bea08963026..5f19f4933a0dbb 100644 --- a/files/zh-tw/glossary/mime_type/index.md +++ b/files/zh-tw/glossary/mime_type/index.md @@ -14,6 +14,6 @@ slug: Glossary/MIME_type - 維基百科上的[網際網路媒體型式](https://zh.wikipedia.org/wiki/互联网媒体类型) - [MIME 類型列表](https://www.iana.org/assignments/media-types/media-types.xhtml) - [正確的伺服器 MIME 類型配置](/zh-TW/docs/Learn/Server-side/Configuring_server_MIME_types) -- [MIME 類型](/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types)在 Web 上下文中的詳細用法 -- [MIME 類型的不完整列表](/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) +- [MIME 類型](/zh-TW/docs/Web/HTTP/MIME_types)在 Web 上下文中的詳細用法 +- [MIME 類型的不完整列表](/zh-TW/docs/Web/HTTP/MIME_types/Common_types) - [MediaRecorder.mimeType](/zh-TW/docs/Web/API/MediaRecorder/mimeType) diff --git a/files/zh-tw/glossary/oop/index.md b/files/zh-tw/glossary/oop/index.md index f1407efec7b6d0..c5a53132b6e13c 100644 --- a/files/zh-tw/glossary/oop/index.md +++ b/files/zh-tw/glossary/oop/index.md @@ -7,7 +7,7 @@ slug: Glossary/OOP **物件導向程式設計**（Object-Oriented Programming、OOP）是一種程式設計方法。其將資料封裝（encapsulate）於物件（**{{glossary("object","objects")}}**）中，我們需透過物件間接操作這些被封裝的內部資料，而非直接操作資料本身。 -{{glossary("JavaScript")}}為重度物件導向語言，其遵循 **prototype-based model**（[與 class-based 相對](/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages)） +{{glossary("JavaScript")}}為重度物件導向語言，其遵循 **prototype-based model**（[與 class-based 相對](/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#class-based_vs._prototype-based_languages)） ## 相關文章 diff --git a/files/zh-tw/glossary/responsive_web_design/index.md b/files/zh-tw/glossary/responsive_web_design/index.md index 1906a8789998ad..e9283202d86487 100644 --- a/files/zh-tw/glossary/responsive_web_design/index.md +++ b/files/zh-tw/glossary/responsive_web_design/index.md @@ -11,6 +11,6 @@ _響應式網頁設計_（**RWD**）是一種強調製作能在所有上網設 ### 基本知識 -- [Summary and resources](/zh-TW/docs/Web_Development/Responsive_Web_design) -- [Pros and cons of going responsive](/zh-TW/docs/Web_Development/Mobile/Responsive_design) +- [Summary and resources](/zh-TW/docs/Web/Progressive_web_apps) +- [Pros and cons of going responsive](/zh-TW/docs/Web/Progressive_web_apps) - [Responsive Web Design](http://msdn.microsoft.com/zh-tw/magazine/hh653584.aspx) diff --git a/files/zh-tw/glossary/server/index.md b/files/zh-tw/glossary/server/index.md index 994b07626d550e..57706fe91508e8 100644 --- a/files/zh-tw/glossary/server/index.md +++ b/files/zh-tw/glossary/server/index.md @@ -15,5 +15,5 @@ slug: Glossary/Server ### 一般知識 -- [伺服器介紹](/zh-TW/docs/Learn/What_is_a_web_server) +- [伺服器介紹](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) - 維基百科的[伺服器](https://zh.wikipedia.org/wiki/伺服器) diff --git a/files/zh-tw/glossary/url/index.md b/files/zh-tw/glossary/url/index.md index 7122557503d29e..86fb93d7f7be62 100644 --- a/files/zh-tw/glossary/url/index.md +++ b/files/zh-tw/glossary/url/index.md @@ -19,8 +19,8 @@ URLs 同樣可以用於文件傳輸({{Glossary("FTP")}}) , 郵件 ({{Glossary("S ### 學習其他 -- [Understanding URLs and their structure](/zh-TW/docs/Learn/Understanding_URLs) +- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) ### Specification -- [Understanding URLs and their structure](/zh-TW/docs/Learn/Understanding_URLs) +- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) diff --git a/files/zh-tw/glossary/websockets/index.md b/files/zh-tw/glossary/websockets/index.md index cbee5342a3935e..ba90981f99c94d 100644 --- a/files/zh-tw/glossary/websockets/index.md +++ b/files/zh-tw/glossary/websockets/index.md @@ -22,4 +22,4 @@ _WebSocket_ 是允許{{Glossary("Server", "伺服器")}}與用戶端之間發起 ### 學習之 - [製作 WebSocket 客戶端應用程式](/zh-TW/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) -- [製作 WebSocket 伺服器](/zh-TW/docs/WebSockets/Writing_WebSocket_servers) +- [製作 WebSocket 伺服器](/zh-TW/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) diff --git a/files/zh-tw/learn/common_questions/index.md b/files/zh-tw/learn/common_questions/index.md index 07a58df873cc22..f8115471643a72 100644 --- a/files/zh-tw/learn/common_questions/index.md +++ b/files/zh-tw/learn/common_questions/index.md @@ -11,40 +11,40 @@ slug: Learn/Common_questions 這個區塊包含網路運作機制——有關網路環境及其如何運作的一般知識。 -- [網際網路如何運作？](/zh-TW/docs/Learn/Common_questions/How_does_the_Internet_work) +- [網際網路如何運作？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - : **網際網路**是網路的骨幹，讓網路成為現實的技術基礎架構。簡單來說，網際網路是讓所有電腦互相溝通的超大型網絡。這篇文章用最淺顯的文字探討它是如何運作的。 -- [網頁、網站、網路伺服器及搜尋引擎有什麼區別？](/zh-TW/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) +- [網頁、網站、網路伺服器及搜尋引擎有什麼區別？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) - : 這篇文章講述網路相關的各種概念：網頁、網站、網路伺服器及搜尋引擎。這些術語常常被新手混淆或誤用。讓我們來認識它們各自的意思吧！ -- [URL 是什麼？](/zh-TW/docs/Learn/Common_questions/What_is_a_URL) +- [URL 是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) - : 結合 {{Glossary("Hypertext")}} 與 {{Glossary("HTTP")}}，URL 是最重要的網路概念之一。它是被 {{Glossary("Browser","browsers")}} 用來獲取發佈到網路的任何資源的機制。 -- [網域名稱是什麼？](/zh-TW/docs/Learn/Common_questions/What_is_a_domain_name) +- [網域名稱是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) - : 網域名稱是網際網路基礎架構中關鍵的一部份，它提供指向網際網路上可被找到的網路伺服器一個可被人讀懂的地址。 - [網路伺服器是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) - : 「網路伺服器」指能橫跨網路將網站提供給用戶端的硬體或軟體——或是軟硬體結合。這篇文章探討網路伺服器怎麼運作，以及為何它很重要。 -- [超連結是什麼？](/zh-TW/docs/Learn/Common_questions/What_are_hyperlinks) +- [超連結是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks) - : 這篇文章中，我們會學到超連結是什麼，以及為何它很重要。 ## 工具與設定 有關能用來建立網站的工具/軟體的問題。 -- [在網路上做事要花多少錢？](/zh-TW/docs/Learn/Common_questions/How_much_does_it_cost) +- [在網路上做事要花多少錢？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) - : 當你啟動一個網站時，可能不用花錢，可能成本高得嚇人。這篇文章中我們會探討每個細節的成本，以及你花一筆錢（或者不花錢）能獲得什麼。 -- [架一個網站需要什麼軟體？](/zh-TW/docs/Learn/Common_questions/What_software_do_I_need) +- [架一個網站需要什麼軟體？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) - : 這篇文章解釋當你編輯、上傳或檢視網站時需要用到的軟體。 -- [哪個文字編輯器比較適合？](/zh-TW/docs/Learn/Common_questions/Available_text_editors) +- [哪個文字編輯器比較適合？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors) - : 這篇文章中，我們列出為網路開發選擇與安裝文字編輯器時一些值得思考的重點。 -- [瀏覽器開發者工具是什麼？](/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools) +- [瀏覽器開發者工具是什麼？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) - : 每個瀏覽器皆有一系列對 HTML、CSS 及其它網路程式碼除錯的開發工具。這篇文章將解釋如何使用你的瀏覽器開發工具的基本功能。 -- [如何確保我的網站會正常運作？](/zh-TW/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly) +- [如何確保我的網站會正常運作？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly) - : 你將你的網站發佈到網路上了——非常好！但是你確定它能正確運行嗎？這篇文章提供一些基本的問題解決步驟。 -- [如何架設本地端測試伺服器](/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server) +- [如何架設本地端測試伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) - : 這篇文章將解釋如何在你的電腦上設置一個簡單的本地端測試伺服器，以及基本使用方式。 -- [如何上傳檔案到網路伺服器？](/zh-TW/docs/Learn/Common_questions/Upload_files_to_a_web_server) +- [如何上傳檔案到網路伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server) - : 這篇文章示範如何透過 [FTP](/zh-TW/docs/Glossary/FTP) 工具將你的網站發佈到網路上——這是將網站放到線上，讓別人可從他們的電腦存取的常見方式之一。 -- [如何使用 GitHub 頁面？](/zh-TW/docs/Learn/Common_questions/Using_GitHub_Pages) +- [如何使用 GitHub 頁面？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) - : 這篇文章提供如何透過 Github 頁面發佈內容的基礎指南。 -- [如何在 Google App Engine 上架設網站？](/zh-TW/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) +- [如何在 Google App Engine 上架設網站？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) - : 想找個地方架設你的網站嗎？這是一篇手把手教你在 Google App Engine 上架設網站的指南。 - [為網站除錯及改良效能需要什麼工具？](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html) - : 本系列文章教你如何用 Firefox 開發者工具來除錯與改良網站效能，將會運用工具來檢視記憶體使用量、JavaScript Call Tree、被渲染的 DOM 節點數及其它東西。 @@ -53,15 +53,15 @@ slug: Learn/Common_questions 這個區塊列舉有關美感、網頁架構、網頁親和力技巧等等的問題。 -- [如何開始設計我的網站？](/zh-TW/docs/Learn/Common_questions/Thinking_before_coding) +- [如何開始設計我的網站？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding) - : 這篇文章會探討每個專案最重要的第一步：定義你想透過這個網站達成什麼目標？ -- [常見網頁布局包含什麼？](/zh-TW/docs/Learn/Common_questions/Common_web_layouts) +- [常見網頁布局包含什麼？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts) - : 當你為你的網站設計網頁時，最好對一些常見的布局有所了解。這篇文章帶你遍覽幾個典型的網頁布局，仔細檢視組成它的每個部份。 -- [網頁親和力是什麼？](/zh-TW/docs/Learn/Common_questions/What_is_accessibility) +- [網頁親和力是什麼？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility) - : 這篇文章將介紹網頁親和力背後的基本概念。 -- [如何設計能兼容所有使用者的網站？](/zh-TW/docs/Learn/Common_questions/Design_for_all_types_of_users) +- [如何設計能兼容所有使用者的網站？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users) - : 這篇文章提供幫助你設計能兼容所有使用者的網站的基本技巧。 -- [哪些 HTML 功能可以增進網頁親和力？](/zh-TW/docs/Learn/Common_questions/HTML_features_for_accessibility) +- [哪些 HTML 功能可以增進網頁親和力？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility) - : 這篇文章講述讓網頁對不同的身心障礙更顯親和的特定 HTML 功能。 ## HTML、CSS 與 JavaScript 問題 diff --git a/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md index 158dade01ca0e4..3a22c3a4a1f2e4 100644 --- a/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md +++ b/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md @@ -65,9 +65,9 @@ _目前還沒有好用的內容。[請考慮貢獻一下](/zh-TW/docs/MDN/Commun - 永遠都有相同的 IP 地址（不是所有{{Glossary("ISP", "網際網路提供者")}}都給家庭用戶提供固定的 IP 地址） - 由第三方提供者維護 -因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以[在這篇文章](/zh-TW/docs/Learn/How_much_does_it_cost#hosting)找到更多資訊。 +因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以[在這篇文章](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting)找到更多資訊。 -一旦找到適合的網絡託管解決方案，你只要[把文件上傳到網路伺服器](/zh-TW/docs/Learn/Upload_files_to_a_web_server)就行了。 +一旦找到適合的網絡託管解決方案，你只要[把文件上傳到網路伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)就行了。 ### 透過 HTTP 溝通 @@ -106,6 +106,6 @@ HTTP 提供了用戶端與伺服器端，該如何溝通的明確規則。我們 熟悉了伺服器以後可以： -- 讀讀[how much it costs to do something on the web](/zh-TW/docs/Learn/How_much_does_it_cost) -- 了解[various software you need to create a website](/zh-TW/docs/Learn/What_software_do_I_need) -- 移駕到[how to upload files on a web server](/zh-TW/docs/Learn/Upload_files_to_a_web_server)之類的實戰。 +- 讀讀[how much it costs to do something on the web](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) +- 了解[various software you need to create a website](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) +- 移駕到[how to upload files on a web server](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)之類的實戰。 diff --git a/files/zh-tw/learn/css/css_layout/index.md b/files/zh-tw/learn/css/css_layout/index.md index d69711fcd7c32e..d5a400917f9d1a 100644 --- a/files/zh-tw/learn/css/css_layout/index.md +++ b/files/zh-tw/learn/css/css_layout/index.md @@ -27,7 +27,7 @@ slug: Learn/CSS/CSS_layout - [常規流](/zh-TW/docs/Learn/CSS/CSS_layout/Normal_Flow) - : 在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。 - [彈性盒子](/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox) - - : [彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Using_flexbox_to_lay_out_web_applications)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。 + - : [彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。 - [網格](/zh-TW/docs/Learn/CSS/CSS_layout/Grids) - : CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。 - [浮動](/zh-TW/docs/Learn/CSS/CSS_layout/Floats) diff --git a/files/zh-tw/learn/css/first_steps/how_css_works/index.md b/files/zh-tw/learn/css/first_steps/how_css_works/index.md index dbad700b74bfe3..a5b5548877d614 100644 --- a/files/zh-tw/learn/css/first_steps/how_css_works/index.md +++ b/files/zh-tw/learn/css/first_steps/how_css_works/index.md @@ -163,6 +163,6 @@ p { ## 最後 -你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會[利用你學到的新知識](/zh-TW/docs/Learn/CSS/First_steps/Using_your_new_knowledge)來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。 +你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會[利用你學到的新知識](/zh-TW/docs/Learn/CSS/First_steps/Styling_a_biography_page)來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。 {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} diff --git a/files/zh-tw/learn/css/first_steps/index.md b/files/zh-tw/learn/css/first_steps/index.md index 03931c4cc36dd9..7635e34a1356b0 100644 --- a/files/zh-tw/learn/css/first_steps/index.md +++ b/files/zh-tw/learn/css/first_steps/index.md @@ -36,7 +36,7 @@ CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來 - : 現在你對 CSS 是什麼以及基本使用方法有了一些概念，是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念；如果之後你對任何概念感到模糊，可以到這裡來回顧。 - [CSS 的運作方式](/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works) - : 我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。 -- [使用你的新知識](/zh-TW/docs/Learn/CSS/First_steps/Using_your_new_knowledge) +- [使用你的新知識](/zh-TW/docs/Learn/CSS/First_steps/Styling_a_biography_page) - : 透過你在前面堂課所學到的東西，你應該會發現你可以對簡單的文字內套用 CSS 設定，加入你想要的樣式。這個主題給你一個機會來做這件事。 ## 參見 diff --git a/files/zh-tw/learn/css/index.md b/files/zh-tw/learn/css/index.md index 05eac2bef4ad1e..e8043381650c92 100644 --- a/files/zh-tw/learn/css/index.md +++ b/files/zh-tw/learn/css/index.md @@ -11,7 +11,7 @@ slug: Learn/CSS 我們整理了一門課程，包含了你實現目標需要的所有基礎知識。 -[開始](/zh-TW/docs/Learn/Front-end_web_developer) +[開始](/zh-TW/curriculum/) ## 先備知識 diff --git a/files/zh-tw/learn/forms/index.md b/files/zh-tw/learn/forms/index.md index 02729439795510..2bc746591f169d 100644 --- a/files/zh-tw/learn/forms/index.md +++ b/files/zh-tw/learn/forms/index.md @@ -9,23 +9,23 @@ slug: Learn/Forms ## 參考文章列表 -1. [我的第一個 HTML 表單](/zh-TW/docs/HTML/Forms/My_first_HTML_form) -2. [如何構建 HTML 表單](/zh-TW/docs/HTML/Forms/How_to_structure_an_HTML_form) -3. [本機表單控件](/zh-TW/docs/HTML/Forms/The_native_form_widgets) +1. [我的第一個 HTML 表單](/zh-TW/docs/Learn/Forms/Your_first_form) +2. [如何構建 HTML 表單](/zh-TW/docs/Learn/Forms/How_to_structure_a_web_form) +3. [本機表單控件](/zh-TW/docs/Learn/Forms/Basic_native_form_controls) 4. CSS 和 HTML 表單 - 1. [造型 HTML 表單](/zh-TW/docs/HTML/Forms/Styling_HTML_forms) - 2. [HTML 表單高級造型](/zh-TW/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms) - 3. [表單控件屬性兼容表](/zh-TW/docs/Property_compatibility_table_for_form_widgets) + 1. [造型 HTML 表單](/zh-TW/docs/Learn/Forms/Styling_web_forms) + 2. [HTML 表單高級造型](/zh-TW/docs/Learn/Forms/Advanced_form_styling) + 3. [表單控件屬性兼容表](/zh-TW/docs/Learn/Forms/Property_compatibility_table_for_form_controls) -5. [發送和檢索表單數據](/zh-TW/docs/HTML/Forms/Sending_and_retrieving_form_data) -6. [數據表單驗證](/zh-TW/docs/HTML/Forms/Data_form_validation) -7. [如何創建自定義表單控件](/zh-TW/docs/HTML/Forms/How_to_build_custom_form_widgets) -8. [通過 JavaScript 發送形式](/zh-TW/docs/HTML/Forms/Sending_forms_through_JavaScript) +5. [發送和檢索表單數據](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data) +6. [數據表單驗證](/zh-TW/docs/Learn/Forms/Form_validation) +7. [如何創建自定義表單控件](/zh-TW/docs/Learn/Forms/How_to_build_custom_form_controls) +8. [通過 JavaScript 發送形式](/zh-TW/docs/Learn/Forms/Sending_forms_through_JavaScript) 1. [使用 FORMDATA 對象](/zh-TW/docs/DOM/XMLHttpRequest/XMLHttpRequest_API/Using_FormData_Objects) -9. [在傳統的瀏覽器的 HTML 表單](/zh-TW/docs/HTML/Forms/HTML_forms_in_legacy_browsers) +9. [在傳統的瀏覽器的 HTML 表單](/zh-TW/docs/Learn/Forms/HTML_forms_in_legacy_browsers) ## HTML 文件 diff --git a/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md index a2e46701669026..8fbdd843ded7c8 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/css_basics/index.md @@ -141,7 +141,7 @@ h1 { -還有很多值得探索的選擇器，你可以在我們的選擇器導引章節 [Selectors guide](/zh-TW/docs/Web/Guide/CSS/Getting_started/Selectors) 看到更多介紹。 +還有很多值得探索的選擇器，你可以在我們的選擇器導引章節 [Selectors guide](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors) 看到更多介紹。 ## 文字與字體 diff --git a/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md index 72fca2484028ea..2d37eaeba5f10d 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -37,7 +37,7 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files ## 檔案路徑 -要讓一個檔案能夠與另一個檔案"溝通"，你需要提供一個他們之間的相對檔案路徑以讓檔案能夠找到另一個檔案在哪裡。為了要展示，我們將插入一小段的 HTML 到我們的 `index.html` 檔案中，並且讓它顯示你在 ["What will your website look like?"](/zh-TW/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like) 這篇文章中所選的圖片。 +要讓一個檔案能夠與另一個檔案"溝通"，你需要提供一個他們之間的相對檔案路徑以讓檔案能夠找到另一個檔案在哪裡。為了要展示，我們將插入一小段的 HTML 到我們的 `index.html` 檔案中，並且讓它顯示你在 ["What will your website look like?"](/zh-TW/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) 這篇文章中所選的圖片。 1. 複製你選的圖片並放到 `images` 資料夾中。 2. 打開你的 `index.html`，並複製貼上下面這段 code。先別擔心這些 code 代表什麼意思，我們會在後面的時候講解它們代表的意義。 diff --git a/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.md index 3221b62a72c07b..54397a9ffd427e 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -60,7 +60,7 @@ _〈網路如何運作〉將簡單介紹_，當你透過電腦或手機瀏覽器 ## 參見 -- [How the Internet works](/zh-TW/docs/Learn/Common_questions/How_does_the_Internet_work) +- [How the Internet works](/zh-TW/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - [HTTP — an Application-Level Protocol](https://dev.opera.com/articles/http-basic-introduction/) - [HTTP: Let's GET It On!](https://dev.opera.com/articles/http-lets-get-it-on/) - [HTTP: Response Codes](https://dev.opera.com/articles/http-response-codes/) diff --git a/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md index bab80eb6c274ec..d5a63caaff040f 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -44,6 +44,6 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software ### 安裝伺服器軟體 -有些例子需要使用伺服器軟體。你可以在 [How do you set up a local testing server?](/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server) 找到作法。 +有些例子需要使用伺服器軟體。你可以在 [How do you set up a local testing server?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) 找到作法。 {{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}} diff --git a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md index 528baf99213a49..3ba4e1e823f940 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.md @@ -62,7 +62,7 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja 接著我們來解釋一下 JavaScript 基本特性，以讓你更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果你可以充分理解這些基礎知識，你就可以撰寫程式來創造無限可能！ > [!WARNING] -> 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn/Discover_browser_developer_tools)。 +> 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)。 ### 變數（Variables） @@ -322,7 +322,7 @@ multiply(0.5, 3); ### 事件（Events） -如果要在網頁上創造真正的互動功能，你將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許你執行其他程式碼以回應這些事件。最明顯的事件就是 [click event](/zh-TW/docs/Web/Events/click) 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請你把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁： +如果要在網頁上創造真正的互動功能，你將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許你執行其他程式碼以回應這些事件。最明顯的事件就是 [click event](/zh-TW/docs/Web/API/Element/click_event) 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請你把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁： ```js document.querySelector("html").onclick = function () { @@ -330,7 +330,7 @@ document.querySelector("html").onclick = function () { }; ``` -有許多的方法可以把事件跟網頁元素結合在一起。在底下的程式碼中，我們先選擇了 HTML 元素，並把這個元素的 [`onclick`](/zh-TW/docs/Web/API/GlobalEventHandlers.onclick) 處理器設定為一個匿名函式，裡面裝著在滑鼠點選事件發生時，要執行的程式碼： +有許多的方法可以把事件跟網頁元素結合在一起。在底下的程式碼中，我們先選擇了 HTML 元素，並把這個元素的 [`onclick`](/zh-TW/docs/Web/API/Element/click_event) 處理器設定為一個匿名函式，裡面裝著在滑鼠點選事件發生時，要執行的程式碼： 請特別注意到以下這段程式碼： @@ -409,7 +409,7 @@ myHTML.onclick = function () {}; } ``` - 這個函式包含了一個會產生一個對話視窗的 [`prompt()`](/zh-TW/docs/Web/API/Window.prompt) 函式，有點像 `alert()`，只是 `prompt()` 會要求使用者輸入一些資料，並在使用者點選`確認`之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 `localStorage` 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 `setItem()` 函式來建立並且把資料儲存到一個名稱為 `'name'` 的變數裡，再把包含者用者名字的 `myName` 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 `innerHTML` 特性： + 這個函式包含了一個會產生一個對話視窗的 [`prompt()`](/zh-TW/docs/Web/API/Window/prompt) 函式，有點像 `alert()`，只是 `prompt()` 會要求使用者輸入一些資料，並在使用者點選`確認`之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 `localStorage` 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 `setItem()` 函式來建立並且把資料儲存到一個名稱為 `'name'` 的變數裡，再把包含者用者名字的 `myName` 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 `innerHTML` 特性： 4. 接著，加入這個 `if ... else` 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼： diff --git a/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md index 6440049836dbf2..3c7ee9eb64895b 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -16,7 +16,7 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website 如果想要完全掌控你發佈的網站，那你可能需要花錢買： - 主機：跟主機租借商（hosting company）的[網路伺服器](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。 -- [網域名稱](/zh-TW/docs/Learn/Understanding_domain_names)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。 +- [網域名稱](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。 許多專業的網站是用這個方法發佈的。 @@ -36,7 +36,7 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website 使用工具來發佈網站： - [GitHub](https://github.com/) 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 [Git](http://git-scm.com/) 的**版本控制系統，**你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— [GitHub Pages](https://pages.github.com/)，它能讓你發佈網站。 -- [Google App Engine](https://cloud.google.com/appengine/) 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 [How do you host your website on Google App Engine?](/zh-TW/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) 以獲得更多資訊。 +- [Google App Engine](https://cloud.google.com/appengine/) 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 [How do you host your website on Google App Engine?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) 以獲得更多資訊。 這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。 @@ -76,8 +76,8 @@ slug: Learn/Getting_started_with_the_web/Publishing_your_website ## 參閱 - [何謂網路伺服器](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) -- [Understanding domain names](/zh-TW/docs/Learn/Understanding_domain_names) -- [How much does it cost to do something on the web?](/zh-TW/docs/Learn/How_much_does_it_cost) +- [Understanding domain names](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) +- [How much does it cost to do something on the web?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) - [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website): A nice tutorial from Codecademy that goes a bit further and shows some additional techniques. - [Cheap or Free Static Website Hosting](http://alignedleft.com/resources/cheap-web-hosting) by Scott Murray has some useful ideas on available services. diff --git a/files/zh-tw/learn/html/howto/index.md b/files/zh-tw/learn/html/howto/index.md index 777bc5d269b61c..5715774f83b639 100644 --- a/files/zh-tw/learn/html/howto/index.md +++ b/files/zh-tw/learn/html/howto/index.md @@ -12,7 +12,7 @@ slug: Learn/HTML/Howto HTML 文件的最基本結構應用。如果你是 HTML 新手，就先從這裡開始看。 - [如何建立基本 HTML 文件](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document) -- [如何有邏輯地分割網頁](/zh-TW/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections) +- [如何有邏輯地分割網頁](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) - [如何建立良好的標題段落結構](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#the_basics_headings_and_paragraphs) ### 基本文字語法 @@ -61,7 +61,7 @@ HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本 表單是一種用來把網頁資料傳送到網路伺服器的複雜 HTML 結構。我們鼓勵你讀一遍我們對此的[完整指南](/zh-TW/docs/Learn/Forms)。你可以從以下文章開始： -- [如何建立簡單的表單](/zh-TW/docs/Web/Guide/HTML/Forms/My_first_HTML_form) +- [如何建立簡單的表單](/zh-TW/docs/Learn/Forms/Your_first_form) - [如何組織表單的架構](/zh-TW/docs/Learn/Forms/How_to_structure_a_web_form) ### 表格訊息 diff --git a/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md index 256138c0f7c79c..052579e6e4ab45 100644 --- a/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/zh-tw/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -311,7 +311,7 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位 ``` > [!NOTE] -> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method)來得知有那些常用的查詢記號。 +> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data#the_get_method)來得知有那些常用的查詢記號。 以下是 `mailto` URL 的其他例子： diff --git a/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md index a7dbf824480ce4..76ecce118f11f6 100644 --- a/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/zh-tw/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -193,7 +193,7 @@ It's good to understand the overall meaning of all the HTML sectioning elements - {{HTMLElement('main')}} is for content _unique to this page._ Use `
` only _once_ per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements. - {{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post). -- {{HTMLElement('section')}} is similar to `
`, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a [heading](/zh-TW/docs/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy); also note that you can break `
`s up into different `
`s, or `
`s up into different `
`s, depending on the context. +- {{HTMLElement('section')}} is similar to `
`, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a [heading](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals); also note that you can break `
`s up into different `
`s, or `
`s up into different `
`s, depending on the context. - {{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.). - {{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with [titles and headings](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title)). - {{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation. @@ -313,6 +313,6 @@ At this point you should have a better idea about how to structure a web page/si ## See also -- [Using HTML sections and outlines](/zh-TW/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines): Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm. +- [Using HTML sections and outlines](/zh-TW/docs/Web/HTML/Element/Heading_Elements): Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md index b7d0f140afa7a2..bf1c0a3ba699fb 100644 --- a/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md +++ b/files/zh-tw/learn/html/introduction_to_html/getting_started/index.md @@ -616,6 +616,6 @@ HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始 ## 參見 -- [用 CSS 為 HTML 元素修改顏色](/zh-TW/docs/Web/HTML/Applying_color) +- [用 CSS 為 HTML 元素修改顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index 13ce95de40984f..47e9a3e96155a9 100644 --- a/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/zh-tw/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -54,7 +54,7 @@ HTML 的 head 就是 {{htmlelement("head")}} 元素裡面的內容 — 跟 {{htm ``` -假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用[開發者工具](/zh-TW/docs/Learn/Discover_browser_developer_tools)來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！ +假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用[開發者工具](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！ ## 加入標題(title) diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md index c0c261bb977bf6..1f419843ee5483 100644 --- a/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -33,7 +33,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML 為了在網頁上放置一個簡單的圖像，我們使用\元素。 這是一個空元素（意味著它沒有文本內容或結束標記），並需要至少一個屬性（src）（有時稱為其完整標題，source）才有用。 src 屬性包含指向要嵌入頁面的圖像的路徑，該路徑可以是相對路徑或絕對路徑 URL，與\元素中的 href 屬性相同。 > [!NOTE] -> 在繼續之前，你應該閱讀有關 URL 和路徑的快速入門，以複習[相對路徑和絕對路徑 URL](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths)。 +> 在繼續之前，你應該閱讀有關 URL 和路徑的快速入門，以複習[相對路徑和絕對路徑 URL](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#a_quick_primer_on_urls_and_paths)。 舉例來說, 如果你的圖片名為 dinosaur.jpg 且與 HTML 檔案位於同一資料夾中，可以這樣嵌入圖片： diff --git a/files/zh-tw/learn/html/tables/basics/index.md b/files/zh-tw/learn/html/tables/basics/index.md index acd594e5eb91a2..df6f1b6ab9be2f 100644 --- a/files/zh-tw/learn/html/tables/basics/index.md +++ b/files/zh-tw/learn/html/tables/basics/index.md @@ -281,7 +281,7 @@ th { {{EmbedLiveSample("結果")}} > [!NOTE] -> 你也可以在 GitHub 上看到 [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)). +> 你也可以在 GitHub 上看到 [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)). ## 用 \ 加上標頭元素 @@ -426,7 +426,7 @@ th { 4. 儲存並在瀏覽器上檢視你改善後的程式碼。 > [!NOTE] -> 你可以在 GitHub 上的 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) 找到我們寫好的完整的範例 ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)). +> 你可以在 GitHub 上的 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) 找到我們寫好的完整的範例 ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)). ## Providing common styling to columns @@ -529,7 +529,7 @@ Recreate the table by following the steps below. 7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your `style` attribute are `background-color:#DCC48E; border:4px solid #C1437A;` 8. The last two days are free days, so just set them to no background color but a set width; the value for the `style` attribute is `width: 42px;` -See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) ([see it live also](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html)). +See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html)). ## Summary diff --git a/files/zh-tw/learn/javascript/asynchronous/index.md b/files/zh-tw/learn/javascript/asynchronous/index.md index 158330eb925268..86400df89a567a 100644 --- a/files/zh-tw/learn/javascript/asynchronous/index.md +++ b/files/zh-tw/learn/javascript/asynchronous/index.md @@ -13,7 +13,7 @@ slug: Learn/JavaScript/Asynchronous > > 我們已為你準備一門實現你目標所需要具備的所有基礎知識課程 > -> [**立即開始**](/zh-TW/docs/Learn/Front-end_web_developer) +> [**立即開始**](/zh-TW/curriculum/) ## 事前準備 @@ -34,7 +34,7 @@ slug: Learn/JavaScript/Asynchronous - : 在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式（例如：每秒發生的次數）讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。 - [優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) - : Promise 是在 Javascript 語言中相對較新的功能，它能夠讓你延遲活動直到先前的活動回報完成或失敗。這方法對設置一連串的操作並讓其正確的循序執行相當有用。本篇文章向你展示 Promise 是如何運作，你將會看到如何被使用在 WebAPI ，以及如何寫出屬於自己的 Promise 。 -- [利用 async 及 await 讓非同步程式設計變得更容易](/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await) +- [利用 async 及 await 讓非同步程式設計變得更容易](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) - : Promise 在設置上可能會有些複雜並難以理解，因此現代瀏覽器已經實作出 `async` 函式以及 `await` 運算子。前者能夠讓標準的函式隱含的使用 Promise 方式來實現非同步行為，然而後者可以被用在 `async` 函式內部，讓程式碼繼續執行之前去等待一個 Promise 完成。這能讓我們在鏈結一連串的 Promise 的情況之下更加簡潔易懂。 ## 參閱 diff --git a/files/zh-tw/learn/javascript/asynchronous/introducing/index.md b/files/zh-tw/learn/javascript/asynchronous/introducing/index.md index 468528ca663748..8bf8a03d118fa3 100644 --- a/files/zh-tw/learn/javascript/asynchronous/introducing/index.md +++ b/files/zh-tw/learn/javascript/asynchronous/introducing/index.md @@ -50,7 +50,7 @@ btn.addEventListener("click", () => { 3. 給予一段文字內容。 4. 最後，我們將文字段落嵌在文件本體（ document body ）上。 -當正在執行每一個操作時，什麼事情都不會發生——渲染暫時停止。我們在[上一篇文章](/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)有提到，這是因為 [Javascript 是跑在一條單執行緒](/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts#javascript_is_single_threaded)。主執行緒在同一時間只能做一件事情，直到目前操作完成為止其他的操作都會暫停。 +當正在執行每一個操作時，什麼事情都不會發生——渲染暫時停止。我們在[上一篇文章](/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)有提到，這是因為 [Javascript 是跑在一條單執行緒](/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing#javascript_is_single_threaded)。主執行緒在同一時間只能做一件事情，直到目前操作完成為止其他的操作都會暫停。 所以在上面的範例中，直到警告視窗的確認按鈕被按下為止之前，文字段落都不會出現。你可以試試看底下的範例： @@ -125,7 +125,7 @@ function displayImage(blob) { loadAsset("coffee.jpg", "blob", displayImage); ``` -在這裡我們新增一個 `displayImage()` 函式，將 blob 做為一個參數傳進去函式來產生物件網址，然後建立一個可以用網址來顯示的影像，並將這個網址附加在 document 的 `` 標籤內。然而，我們再新增一個 `loadAsset()` 函式，將回呼作為參數並伴隨抓取資源的網址以及內容型式傳進去函式。它使用 `XMLHttpRequest` （通常縮寫成「 XHR 」）根據網址去抓取資源，並將回傳結果傳送到回呼去做一些事情。在這個例子回呼正在等待 XHR 完成下載資源（使用 [`onload`](/zh-TW/docs/Web/API/XMLHttpRequestEventTarget/onload) 事件處理器）後，再將資源傳遞給回呼。 +在這裡我們新增一個 `displayImage()` 函式，將 blob 做為一個參數傳進去函式來產生物件網址，然後建立一個可以用網址來顯示的影像，並將這個網址附加在 document 的 `` 標籤內。然而，我們再新增一個 `loadAsset()` 函式，將回呼作為參數並伴隨抓取資源的網址以及內容型式傳進去函式。它使用 `XMLHttpRequest` （通常縮寫成「 XHR 」）根據網址去抓取資源，並將回傳結果傳送到回呼去做一些事情。在這個例子回呼正在等待 XHR 完成下載資源（使用 [`onload`](/zh-TW/docs/Web/API/XMLHttpRequest/load_event) 事件處理器）後，再將資源傳遞給回呼。 回呼是多樣性的——它不只可以讓你控制執行函式的呼叫順序以及在不同函式間傳遞的參數，還可以讓你根據情況將資料傳遞到不同的函式。所以你可以根據下載的回傳結果採取不同的處理方式，例如 `processJSON()` ， `displayText()` 等等。 @@ -143,7 +143,7 @@ gods.forEach(function (eachName, index) { ## Promise -Promise 是作為非同步程式碼的一種新風格樣式，你將會在現代 Web API 看到這種用法。一個好例子是 [`fetch()`](/zh-TW/docs/Web/API/fetch) API ，它基本上就像更新穎、更有效率版本的 {{domxref("XMLHttpRequest")}} 。我們藉由[從伺服器提取資料](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)這一篇文章快速地來看一個例子吧： +Promise 是作為非同步程式碼的一種新風格樣式，你將會在現代 Web API 看到這種用法。一個好例子是 [`fetch()`](/zh-TW/docs/Web/API/Window/fetch) API ，它基本上就像更新穎、更有效率版本的 {{domxref("XMLHttpRequest")}} 。我們藉由[從伺服器提取資料](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)這一篇文章快速地來看一個例子吧： ```js fetch("products.json") @@ -167,7 +167,7 @@ fetch("products.json") 我們可以透過練習來習慣這個概念；在動作上它感覺有點像是 [薛丁格的貓](https://zh.wikipedia.org/wiki/薛丁格的貓)。任何可能的結果已經發生，所以 fetch 指令正在等待瀏覽器在未來的某個時間點完成操作後並回傳的結果。我們接著在 `fetch()` 的結束會鏈結三個程式區塊： - 兩個 [`then()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 區塊。兩個都含有回呼函式且先前的操作成功時就會執行，每一個回呼函式都會收到上一個成功完成操作的結果，因此你可以繼續執行一些事情。每一個 `.then()` 區塊都會回傳另一個 promise ，代表你可以將多個 `.then()` 區塊彼此作連結，所以多個非同步操作可以一個接著一個被用來依序執行。 -- 如果任何一個 `.then()` 區塊失敗就會跑到 [`catch()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 區塊——類似像在同步區塊內部的 [`try...catch`](/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch) 做法，在 `catch()` 內部會提供一個失敗的物件，可以用來報告是發生甚麼類型的錯誤。要注意到同步的 `try...catch` 不能與 promises 一起做使用，儘管它可以和 [async ／ await](/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await) 待配使用，這稍後將會學習到。 +- 如果任何一個 `.then()` 區塊失敗就會跑到 [`catch()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 區塊——類似像在同步區塊內部的 [`try...catch`](/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch) 做法，在 `catch()` 內部會提供一個失敗的物件，可以用來報告是發生甚麼類型的錯誤。要注意到同步的 `try...catch` 不能與 promises 一起做使用，儘管它可以和 [async ／ await](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) 待配使用，這稍後將會學習到。 > [!NOTE] > 你將會在稍後的單元學習到更多關於 promise 的觀念，即使現在尚未完全理解你也不需要太擔心。 @@ -256,7 +256,7 @@ TypeError: image is undefined; can't access its "src" property 這是因為在這個時間點瀏覽器試著去執行最後的 `console.log()` 時 `fetch()` 還沒有完成執行，所以 `image` 變數尚未賦予值因而導致錯誤。 > [!NOTE] -> 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server)來執行。 +> 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來執行。 ## 主動學習：讓一切非同步化！ diff --git a/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md b/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md index c836bec3f0135a..636803408eaa35 100644 --- a/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md +++ b/files/zh-tw/learn/javascript/building_blocks/conditionals/index.md @@ -52,7 +52,7 @@ if (condition) { 這邊我們可以得知基礎的架構： 1. 關鍵字 `if` 和後頭的括號。 -2. 想測試的條件放在括號中（通常像是「這個值是否大於其他值」或是「這個值是否存在」等等）。這裡的條件會使用先前提過的 [比較運算子](/zh-TW/Learn/JavaScript/First_steps/Math#Comparison_operators)（[comparison operators](/zh-TW/Learn/JavaScript/First_steps/Math#Comparison_operators)），並且最後會回傳 `true` 或是 `false`。 +2. 想測試的條件放在括號中（通常像是「這個值是否大於其他值」或是「這個值是否存在」等等）。這裡的條件會使用先前提過的 [比較運算子](/zh-TW/docs/Learn/JavaScript/First_steps/Math#comparison_operators)（[comparison operators](/zh-TW/docs/Learn/JavaScript/First_steps/Math#comparison_operators)），並且最後會回傳 `true` 或是 `false`。 3. 第一組大括號，在大括號裡面有一些程式碼 — 內容可以是任何我們所需要執行的程式碼，並且只有在條件句回傳 `true` 才會執行。 4. 關鍵字 `else`。 5. 另一組大括號，在大括號中我們一樣是放置所需的程式碼，並只有在條件句回傳 `false` 才會執行。 @@ -97,7 +97,7 @@ if (shoppingDone === true) { This code as shown will always result in the `shoppingDone` variable returning `false`, meaning disappointment for our poor child. It'd be up to us to provide a mechanism for the parent to set the `shoppingDone` variable to `true` if the child did the shopping. > [!NOTE] -> You can see a more [complete version of this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) +> You can see a more [complete version of this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) ### else if @@ -153,11 +153,11 @@ function setWeather() { 4. The very last choice, inside the `else {...}` block, is basically a "last resort" option — the code inside it will be run if none of the conditions are `true`. In this case, it serves to empty the text out of the paragraph if nothing is selected, for example if a user decides to re-select the "--Make a choice--" placeholder option shown at the beginning. > [!NOTE] -> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) ([see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.) +> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.) ### A note on comparison operators -Comparison operators are used to test the conditions inside our conditional statements. We first looked at comparison operators back in our [Basic math in JavaScript — numbers and operators](/zh-TW/Learn/JavaScript/First_steps/Math#Comparison_operators) article. Our choices are: +Comparison operators are used to test the conditions inside our conditional statements. We first looked at comparison operators back in our [Basic math in JavaScript — numbers and operators](/zh-TW/docs/Learn/JavaScript/First_steps/Math#comparison_operators) article. Our choices are: - `===` and `!==` — test if one value is identical to, or not identical to, another. - `<` and `>` — test if one value is less than or greater than another. @@ -215,7 +215,7 @@ Even though the code all works together, each `if...else` statement works comple ### Logical operators: AND, OR and NOT -If you want to test multiple conditions without writing nested `if...else` statements, [logical operators](/zh-TW/docs/Web/JavaScript/Reference/Operators/Logical_Operators) can help you. When used in conditions, the first two do the following: +If you want to test multiple conditions without writing nested `if...else` statements, [logical operators](/zh-TW/docs/Web/JavaScript/Reference/Operators) can help you. When used in conditions, the first two do the following: - `&&` — AND; allows you to chain together two or more expressions so that all of them have to individually evaluate to `true` for the whole expression to return `true`. - `||` — OR; allows you to chain together two or more expressions so that one or more of them have to individually evaluate to `true` for the whole expression to return `true`. @@ -372,11 +372,11 @@ function setWeather() { {{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }} > [!NOTE] -> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.) +> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.) ## 三元運算符 -There is one final bit of syntax we want to introduce you to, before we get you to play with some examples. The [ternary or conditional operator](/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is a small bit of syntax that tests a condition and returns one value/expression if it is `true`, and another if it is `false` — this can be useful in some situations, and can take up a lot less code than an `if...else` block if you simply have two choices that are chosen between via a `true`/`false` condition. The pseudocode looks like this: +There is one final bit of syntax we want to introduce you to, before we get you to play with some examples. The [ternary or conditional operator](/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator) is a small bit of syntax that tests a condition and returns one value/expression if it is `true`, and another if it is `false` — this can be useful in some situations, and can take up a lot less code than an `if...else` block if you simply have two choices that are chosen between via a `true`/`false` condition. The pseudocode looks like this: ```plain ( condition ) ? run this code : run this code instead @@ -427,10 +427,10 @@ select.onchange = function () { Here we've got a {{htmlelement('select')}} element to choose a theme (black or white), plus a simple {{htmlelement('h1')}} to display a website title. We also have a function called `update()`, which takes two colors as parameters (inputs). The website's background color is set to the first provided color, and its text color is set to the second provided color. -Finally, we've also got an [onchange](/zh-TW/docs/Web/API/GlobalEventHandlers/onchange) event listener that serves to run a function containing a ternary operator. It starts with a test condition — `select.value === 'black'`. If this returns `true`, we run the `update()` function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns `false`, we run the `update()` function with parameters of white and black, meaning that the site color are inverted. +Finally, we've also got an [onchange](/zh-TW/docs/Web/API/HTMLElement/change_event) event listener that serves to run a function containing a ternary operator. It starts with a test condition — `select.value === 'black'`. If this returns `true`, we run the `update()` function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns `false`, we run the `update()` function with parameters of white and black, meaning that the site color are inverted. > [!NOTE] -> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (see it [running live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.) +> You can also [find this example on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.) ## Active learning: A simple calendar @@ -800,13 +800,13 @@ textarea.onkeyup = function () { ## Conclusion -And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or [contact us](/zh-TW/Learn#Contact_us) to ask for help. +And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or [contact us](/zh-TW/docs/Learn#contact_us) to ask for help. ## See also -- [Comparison operators](/zh-TW/Learn/JavaScript/First_steps/Math#Comparison_operators) -- [Conditional statements in detail](/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements) +- [Comparison operators](/zh-TW/docs/Learn/JavaScript/First_steps/Math#comparison_operators) +- [Conditional statements in detail](/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements) - [if...else reference](/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else) -- [Conditional (ternary) operator reference](/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) +- [Conditional (ternary) operator reference](/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator) {{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}} diff --git a/files/zh-tw/learn/javascript/building_blocks/functions/index.md b/files/zh-tw/learn/javascript/building_blocks/functions/index.md index fe579a19ced9ff..3f101d93e37d97 100644 --- a/files/zh-tw/learn/javascript/building_blocks/functions/index.md +++ b/files/zh-tw/learn/javascript/building_blocks/functions/index.md @@ -29,7 +29,7 @@ slug: Learn/JavaScript/Building_blocks/Functions 在 JavaScript 裡，你到處都能看到函數的蹤影。事實上，我們在前面的課程中一直都在用函數，只是沒什麼提及而已。如今是時候讓我們詳細探討函數並認真探索它們的語法了。 -幾乎每當你使用了包含一對小括號 — `()` — 的 JavaScritp 結構，並且沒有用到諸如 [for 迴圈](/zh-TW/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop)、[while 與 do...while 迴圈](/zh-TW/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)或 [if...else 敘述](/zh-TW/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements)等常見的內建語言結構時，你就是在使用函數。 +幾乎每當你使用了包含一對小括號 — `()` — 的 JavaScritp 結構，並且沒有用到諸如 [for 迴圈](/zh-TW/docs/Learn/JavaScript/Building_blocks/Looping_code#the_standard_for_loop)、[while 與 do...while 迴圈](/zh-TW/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)或 [if...else 敘述](/zh-TW/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements)等常見的內建語言結構時，你就是在使用函數。 ## 瀏覽器內建函數 @@ -68,7 +68,7 @@ var myNumber = Math.random(); JavaScript 語言有很多內建函數，讓你不用重覆寫所有程式碼就能做很多事。事實上，在你執行瀏覽器的內建函數時，你呼叫到的某些程式碼並不能用 JavaScript 來寫——很多這種函數是在部分呼叫瀏覽器背景語言，大多是由 C++ 這種低階系統語言寫成，而非 JavaScript 這種網際網路語言。 -麻煩謹記在心，有些瀏覽器內建函數不是 JavaScript 語言核心的一部份——有些被定義為瀏覽器 API 的一部份，它們已預設語言為基礎來提供更多功能（[先前的章節](/zh-TW/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do)裡有更多說明）。在未來的模組中我們會更深入探討瀏覽器 API 的用法。 +麻煩謹記在心，有些瀏覽器內建函數不是 JavaScript 語言核心的一部份——有些被定義為瀏覽器 API 的一部份，它們已預設語言為基礎來提供更多功能（[先前的章節](/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript#so_what_can_it_really_do)裡有更多說明）。在未來的模組中我們會更深入探討瀏覽器 API 的用法。 ## 函數（function） vs 方法（method） @@ -80,7 +80,7 @@ JavaScript 語言有很多內建函數，讓你不用重覆寫所有程式碼就 ## 自訂函數 -You've also seen a lot of **custom functions** in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) example (see also the full [source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)) from our [loops article](/zh-TW/docs/Learn/JavaScript/Building_blocks/Looping_code), we included a custom `draw()` function that looked like this: +You've also seen a lot of **custom functions** in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our [random-canvas-circles.html](https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) example (see also the full [source code](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)) from our [loops article](/zh-TW/docs/Learn/JavaScript/Building_blocks/Looping_code), we included a custom `draw()` function that looked like this: ```js function draw() { @@ -272,7 +272,7 @@ function greeting() { Both functions you want to call are called `greeting()`, but you can only ever access the `second.js` file's `greeting()` function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in `first.js`. > [!NOTE] -> You can see this example [running live on GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)). +> You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)). Keeping parts of your code locked away in functions avoids such problems, and is considered best practice. diff --git a/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md index 16fa87193e52cf..2c03866568cd77 100644 --- a/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.md @@ -58,7 +58,7 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery - 在 `thumb-bar
` 裡的每個 `` 添加一個 `onclick` 處理器使這個圖片被點擊時會放大展示在 `displayed-img ` 裡。 - 在 `