Closed Bug 1494441 Opened 6 years ago Closed 6 years ago

"Problem executing template LearnSidebar" when I try to translate

Categories

(Developer Documentation Graveyard :: JavaScript, defect)

All
Other
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED INACTIVE

People

(Reporter: mailtocuong, Unassigned)

References

()

Details

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

Visit this page
https://developer.mozilla.org/vi/docs/Learn/Getting_started_with_the_web/JavaScript_basics$edit

Here is the error that I saw: 

Error type: TemplateExecutionError In macro: LearnSidebar (View Macro) Parsing macro: LearnSidebar ([]) Full text of error: 
Problem executing template LearnSidebar:
    1 | <div>{{LearnSidebar}}</div><div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div><div class="summary"><p>JavaScript là một ngôn ngữ gia thêm khả năng tương tác cho website của bạn&nbsp;(ví dụ: trò chơi, các phản hồi khi các nút được nhấn hoặc nhập dữ liệu trên form, kiểu&nbsp;động, hoạt họa). Bài viết này sẽ giúp bạn khởi động với&nbsp;ngôn ngữ thú vị này và cho bạn&nbsp;ý tưởng về những gì có thể xảy ra.</p></div><h2 id="JavaScript_thật_sự_là_gì">JavaScript thật sự&nbsp;là gì?</h2><p>{{Glossary("JavaScript")}} (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính năng&nbsp;của một&nbsp;{{Glossary("Dynamic programming language", "ngôn ngữ lập trình động")}} mà khi nó được áp dụng&nbsp;vào một tài liệu&nbsp;{{Glossary("HTML")}}, nó&nbsp;có thể đem lại khả năng tương tác động trên các trang web. Cha đẻ của ngôn ngữ này là&nbsp;Brendan Eich, đồng sáng lập dự án&nbsp;Mozilla,&nbsp;quỹ&nbsp;Mozilla, và tập đoàn&nbsp;Mozilla.</p><p>JavaScript thật sự rất linh hoạt. Bạn có thể bắt đầu với các bước nhỏ, với&nbsp; viện&nbsp;ảnh, bố cục có tính&nbsp;thay đổi và phản hồi đến các&nbsp;nút nhấn. Khi có nhiều kinh nghiệm hơn, bạn có thể tạo ra các trò chơi, hoạt họa 2 chiều hoặc 3 chiều, ứng dụng&nbsp;cơ sở dữ liệu toàn diện&nbsp;và nhiều thứ khác!</p><p>Bản thân Javascript là một ngôn ngữ linh động. Các nhà phát triển đã viết ra một số lượng lớn các&nbsp;công cụ&nbsp;thuộc&nbsp;top của&nbsp;core Javascript, mở ra một lượng lớn tính năng bổ sung với ít nỗ lực nhất. Nó bao gồm:</p><ul><li>Giao diện lập trình ứng dụng trên trình duyệt&nbsp;({{Glossary("API","API")}}) — Các&nbsp;API được xây dựng bên trong các trình duyệt web, cung cấp tính năng như tạo HTML động, cài đặt CSS, thu tập và điều khiển video trực tiếp từ webcam của người dùng hoặc sinh ra đồ dọa 3D và các mẫu&nbsp;audio.</li><li>Các API bên thứ ba cho phép nhà phát triển&nbsp;kết hợp&nbsp;tính năng trong website của họ từ người cung cấp nội dung khác chẳng hạn như Twitter hay Facebook.</li><li>Từ các framework&nbsp;và thư viện bên thứ ba bạn có thể áp dụng tới tài liệu HTML của bạn, cho phép bạn nhanh chóng xây dựng được các trang web và các ứng dụng.</li></ul><p>Vì bài viết này chỉ&nbsp;giới thiệu về JavaScript, chúng tôi&nbsp;sẽ không&nbsp;làm bạn bối rối&nbsp;khi nói rõ hơn về sự khác nhau giữa mã nguồn JavaScript căn bản và những công cụ được liệt kê ở trên.&nbsp;Bạn có thể tìm hiểu chi tiết&nbsp;trong &nbsp;<a data-cke-saved-href="/en-US/docs/Learn/JavaScript" href="/en-US/docs/Learn/JavaScript">Mục học JavaScript</a>, và&nbsp;MDN.</p><p>Ở phần dưới chúng tôi sẽ giới thiệu cho bạn một số khía cạnh cơ bản về JavaScript và bạn cũng sẽ được làm việc với&nbsp;một vài API. Chúc bạn học tốt!</p><h2 id="Ví_dụ_Hello_World">Ví dụ "Hello World"</h2><p>Phần&nbsp;phía dưới có thể&nbsp;nghe thật&nbsp;thú vị. JavaScript là một trong những công nghệ web sống động nhất và nếu như bạn sử dụng thật tốt, các&nbsp;website của bạn sẽ mang tính sáng tạo và đầy sức mạnh.</p><p>Tuy nhiên, nắm bắt Javascript&nbsp;sẽ có một chút khó hơn so&nbsp; với HTML và CSS. Bạn có thể phải bắt đầu&nbsp;từng bước nhỏ và giữ cho quá trình làm việc luôn nhất quán. Để bắt đầu, chúng tôi&nbsp;sẽ biểu diễn cách làm thế nào để thêm những đoạn JavaScript cơ bản tới trang web, tạo ví dụ <em>"hello world"&nbsp;</em>(<a data-cke-saved-href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program" href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">ví dụ tiêu chuẩn trong lập trình cơ bản</a>).</p><div class="warning"><p><span style="font-size:14px"><strong>Chú ý: </strong></span>nếu bạn không&nbsp;theo dõi toàn bộ bài&nbsp;học<span style="font-size:14px">,&nbsp;</span><a data-cke-saved-href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip" href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">hãy tải đoạn code mẫu</a>&nbsp;và dùng nó như điểm khơi đầu.</p></div><ol><li>Đầu tiên, đi đến trang web thử nghiệm&nbsp;và tạo một thư mục mới tên&nbsp;là 'scripts' (mà không có dấu nháy). Sau đó, trong thư mục scripts mà bạn&nbsp;vừa tạo, hãy thêm một tệp mới với tên là&nbsp;<code>main.js</code>. Lưu nó vào thư mục&nbsp;<code>scripts</code>&nbsp;.</li><li>Tiếp theo, trong tệp index.html&nbsp;thêm phần tử&nbsp;sau trên một dòng mới trước&nbsp;thẻ đóng &lt;/body&gt;:<pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre></li><li>Điều này là cơ bản giống như việc thêm {{htmlelement("đường dẫn")}} phần tử&nbsp;cho CSS — Nó áp dụng JavaScript tới page, vì vậy nó có thể có ảnh hưởng tới&nbsp;tài liệu HTML(cùng với&nbsp;CSS và bất kỳ điều gì khác trên trang).</li><li>Thêm đoạn mã sau vào tệp&nbsp;<code>main.js</code>&nbsp;:<pre class="brush: js">var myHeading = document.querySelector('h1');
-------------^
    2 | myHeading.textContent = 'Hello world!';</pre></li><li>Cuối cùng, để chắc chắn tập tin HTML và JavaScript đã được lưu. Bạn sẽ phải thấy nội dung sau trên trình duyêt:<img data-cke-saved-src="https://mdn.mozillademos.org/files/9543/hello-world.png" src="https://mdn.mozillademos.org/files/9543/hello-world.png" alt="" style="display:block; height:236px; margin:0px auto; width:806px"></li></ol><div class="note"><p><strong>Lưu ý:</strong> Lý do chúng ta đặt thẻ {{htmlelement("script")}} gần cuối tập tin HTML là để nội dung HTML được tải xuống trước và hiển thị trước, còn nếu tập tin JavaScript được tải trước, code trong JavaScript được thực thi trong khi HTML chưa được tải xuống. JavaScript sẽ chạy không đúng. Cho nên cách an toàn nhất là chúng ta đặt JavaScript ở cuối tập tin HTML.</p></div><h3 id="Chuyện_gì_đã_xảy_ra">Chuyện gì đã xảy ra?</h3><p>Chúng ta thấy dòng tiêu đề bây giờ đã được đổi thành "Hello world!" bằng dòng lệnh JavaScript. Bạn đã làm được điều này bằng cách gọi hàm <code>{{domxref("Document.querySelector", "querySelector()")}} </code>để lấy tham chiếu đến tiêu đề và lưu nó vào biến <code>myHeading</code>. Việc này tương tự như cách chúng ta dùng CSS selectors. Khi cần làm thực hiện điều gì trên một phần tử, trước tiên chúng ta cần tham chiếu đến nó trước.</p><p>Sau đó, bạn gán giá trị của thuộc tính&nbsp;<code>{{domxref("Node.textContent", "textContent")}}</code> của biến <code>myHeading</code> thành "Hello world!".</p><div class="note"><p><strong>Lưu ý: </strong>Cả hai tính năng bạn dùng ở trên đều là một phần của <a data-cke-saved-href="/en-US/docs/Web/API/Document_Object_Model" href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, thứ cho phép bạn chọn và xử lý các phần trên tài liệu HTML</p></div><h2 id="Khoá_học_cơ_bản_về_ngôn_ngữ">Khoá học cơ bản về ngôn ngữ</h2><p>Để bạn hiểu rõ hơn về cách JavaScript làm việc, chúng ta sẽ tiếp tục đi qua một vài khái niệm cơ bản của ngôn ngữ. Các khái niệm này, có thể bạn&nbsp;cũng đã làm quen ở các ngôn ngữ khác, và nếu bạn đã là một lập trình viên, tôi tin chắc bạn đã sẵn sàng để lập trình bất cứ thứ gì với JavaScript.</p><div class="warning"><p><strong>Lưu ý:</strong>&nbsp;Để việc học hiệu quả hơn, bạn hãy thử viết các dòng code ví dụ vào JavaScript console để thấy sự hoạt động của code. Để hiểu rõ hơn về JavaScript console, hãy xem ở bài viết này&nbsp;<a data-cke-saved-href="/en-US/Learn/Discover_browser_developer_tools" href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p></div><h3 id="Biến">Biến</h3><p>{{Glossary("Variable", "Variables")}} là các thùng chứa các giá trị bên trong. Bạn có thể bắt đầu khai báo một biến với từ khoá <code>var</code> theo sau bởi tên biến.</p><pre class="brush: js">var myVariable;</pre><div class="note"><p><strong>Chú ý:</strong>&nbsp;Dấu chấm phẩy&nbsp;ở phía cuối của dòng để&nbsp;minh hoạt rằng đó là điểm kết thúc của câu lệnh. Nó thực sự cần thiết khi bạn có nhiều câu lệnh trong cùng một dòng, nhưng một số người cho rằng nên đặt dấu chấm phẩy cho mỗi câu lệnh. Có một vài quy tắc khi nào dùng và khi nào không dùng dấu chấm phẩy — xem&nbsp;<a data-cke-saved-href="https://www.codecademy.com/blog/78" href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a> để biết thêm chi tiết.</p></div><div class="note"><p><strong>Note</strong>: You can name a variable nearly anything, but there are some name restrictions (see <a data-cke-saved-href="http://www.codelifter.com/main/tips/tip_020.shtml" href="http://www.codelifter.com/main/tips/tip_020.shtml">this article on variable naming rules</a>.) If you are unsure, you can <a data-cke-saved-href="https://mothereff.in/js-variables" href="https://mothereff.in/js-variables">check your variable name</a> to see if it is valid.</p></div><div class="note"><p><strong>Note</strong>: JavaScript is case sensitive — <code>myVariable</code> is a different variable to <code>myvariable</code>. If you are getting problems in your code, check the casing!</p></div><p>After declaring a variable, you can give it a value:</p><pre class="brush: js">myVariable = 'Bob';</pre><p>You can do both these operations on the same line if you wish:</p><pre class="brush: js">var myVariable = 'Bob';</pre><p>You can retrieve the value by just calling the variable by name:</p><pre class="brush: js">myVariable;</pre><p>After giving a variable a value, you can later choose to change it:</p><pre>var myVariable = 'Bob';
    3 | myVariable = 'Steve';</pre><p>Note that variables have different <a data-cke-saved-href="/en-US/docs/Web/JavaScript/Data_structures" href="/en-US/docs/Web/JavaScript/Data_structures">data types</a>:</p><table class="standard-table cke_show_border"><thead><tr><th scope="row">Variable</th><th scope="col">Explanation</th><th scope="col">Example</th></tr></thead><tbody><tr><th scope="row">{{Glossary("String")}}</th><td>A sequence of text known as a string. To signify that the variable is a string, you should enclose it in quote marks.</td><td><code>var myVariable = 'Bob';</code></td></tr><tr><th scope="row">{{Glossary("Number")}}</th><td>A number. Numbers don't have quotes around them.</td><td><code>var myVariable = 10;</code></td></tr><tr><th scope="row">{{Glossary("Boolean")}}</th><td>A True/False value. The words <code>true</code> and <code>false</code> are special keywords in JS, and don't need quotes.</td><td><code>var myVariable = true;</code></td></tr><tr><th scope="row">{{Glossary("Array")}}</th><td>A structure that allows you to store multiple values in one single reference.</td><td><code>var myVariable = [1,'Bob','Steve',10];</code><br>Refer to each member of the array like this:<br><code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td></tr><tr><th scope="row">{{Glossary("Object")}}</th><td>Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.</td><td><code>var myVariable = document.querySelector('h1');</code><br>All of the above examples too.</td></tr></tbody></table><p>So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message&nbsp;or change the image displayed in an image gallery.</p><h3 id="Comments">Comments</h3><p>You can put comments into JavaScript code, just as you can in CSS:</p><pre class="brush: js">/*

TypeError: ejs:1359
    1357| 
    1358| <ol>
 >> 1359|   <li data-default-state="<%=currentPageIsUnder('Getting_started_with_the_web')%>"><a href="<%=baseURL%>Getting_started_with_the_web"><strong><%=text['Complete_beginners']%></strong></a></li>
    1360|   <li data-default-state="<%=currentPageIsUnder('Getting_started_with_the_web')%>"><a href="<%=baseURL%>Getting_started_with_the_web"><%=text['Getting_started_with_the_web']%></a>
    1361|     <ol>
    1362|       <li><a href="<%=baseURL%>Getting_started_with_the_web"><%=text['Getting_started_with_the_web_overview']%></a></li>

Cannot read property 'indexOf' of undefined
    at currentPageIsUnder (eval at compile (/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:17:12)
    at eval (eval at compile (/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:1366:25)
    at returnedFn (/node_modules/ejs/lib/ejs.js:580:17)
    at /app/lib/kumascript/templates.js:71:26
Summary: There is a bug when I try to translate → "Problem executing template LearnSidebar" when I try to translate
Hello, 
Thanks for reporting.
I've opened the page in reading mode and didn't receive any error so I would believe the error was transient.
If you used the "preview changes" features, as far as I'm aware, this feature doesn't work well with macros.

*Could you tell if there still is something wrong on your side?*
Thanks
Flags: needinfo?(mailtocuong)
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Flags: needinfo?(mailtocuong)
Resolution: --- → INACTIVE
You need to log in before you can comment on or make changes to this bug.