diff options
Diffstat (limited to 'files/zh-tw/learn')
| -rw-r--r-- | files/zh-tw/learn/javascript/building_blocks/events/index.html | 2 | ||||
| -rw-r--r-- | files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html | 18 |
2 files changed, 10 insertions, 10 deletions
diff --git a/files/zh-tw/learn/javascript/building_blocks/events/index.html b/files/zh-tw/learn/javascript/building_blocks/events/index.html index 9bb566a61d..f9ca1fc99f 100644 --- a/files/zh-tw/learn/javascript/building_blocks/events/index.html +++ b/files/zh-tw/learn/javascript/building_blocks/events/index.html @@ -83,4 +83,4 @@ original_slug: Web/Guide/HTML/Event_attributes <p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> -<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> +<section id="Quick_links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html index d4645f7dca..508a6a2590 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html @@ -85,30 +85,30 @@ tags: <li>刪除全部已完成任務。</li> </ul> -<h2 id="Building_our_first_component">Building our first component</h2> +<h2 id="Building_our_first_component">建立我們第一個元件</h2> -<p>Let's create a <code>Todos.svelte</code> component — this will contain our list of todos.</p> +<p>建立<code>Todos.svelte</code>元件——這將包含我們的待辦任務。</p> <ol> <li> - <p>Create a new folder — <code>src/components</code>.</p> + <p>建立新資料夾——<code>src/components</code>。</p> <div class="notecard note"> - <p><strong>Note</strong>: you can put your components anywhere inside the <code>src</code> folder, but the <code>components</code> folder is a recognized convention to follow, allowing you to find your components easily.</p> + <p><strong>注意</strong>：你可以把元件們放在<code>src</code>資料夾當中的任何地方，但放在<code>components</code>資料夾是比較常見的做法，也讓你可以更容易地找到元件們。</p> </div> </li> <li> - <p>Create a file named <code>src/components/Todos.svelte</code> with the following content:</p> + <p>建立<code>src/components/Todos.svelte</code>檔案並包含以下內容：</p> <pre class="brush: html"><h1>Svelte To-Do list</h1></pre> </li> <li> - <p>Change the <code>title</code> element in <code>public/index.html</code> to contain the text <em>Svelte To-do list</em>:</p> + <p>改變<code>public/index.html</code>中的<code>title</code>元素內容為<em>Svelte To-do list</em>：</p> <pre class="brush: html"><title>Svelte To-Do list</title></pre> </li> <li> - <p>Open <code>src/App.svelte</code> and replace its contents with the following:</p> + <p>打開<code>src/App.svelte</code>並替換為以下內容：</p> <pre class="brush: html"><script> import Todos from './components/Todos.svelte' @@ -117,7 +117,7 @@ tags: <Todos /></pre> </li> <li> - <p>In development mode, Svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a <code>name</code> prop being specified when we instantiate the <code>App</code> component inside <code>src/main.js</code>, which isn't used inside <code>App</code>. The console should currently give you a message along the lines of "<App> was created with unknown prop 'name'". To get rid of this, remove the <code>name</code> prop from <code>src/main.js</code>; it should now look like so:</p> + <p>在開發模式中，當定義屬性沒有存在於元件時，Svelte將會在瀏覽器主控台警示問題；以此例來看，當我們於<code>src/main.js</code>實例化<code>App</code>元件時，由於我們已經明確定義出<code>name</code>屬性，但並無實際在<code>App</code>中使用到。所以主控台現在應該會給你一個警示訊息，如「<App> was created with unknown prop 'name'」。而為了排除這個問題，從<code>src/main.js</code>中移除<code>name</code>屬性；看起來應該要像是如下這樣：</p> <pre class="brush: js">import App from './App.svelte' @@ -129,7 +129,7 @@ export default app</pre> </li> </ol> -<p>Now if you check your testing server URL you'll see our <code>Todos.svelte</code> component being rendered:</p> +<p>假如你現在檢查你的測試伺服器URL，應該會看到<code>Todos.svelte</code>元件已經被渲染出如下畫面：</p> <p><img alt="basic component rendering which a title that says 'Svelte to-do list'" src="02-todos-component-rendered.png" style="border-style: solid; border-width: 1px; display: block; margin: 0 auto;"></p> |