diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index d9e0c1811..3bce2d5d4 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -74,8 +74,15 @@ Contoh sekatan tersebut termasuk: Ini dipanggil "Dasar Asal Sama". Untuk mengatasinya, *kedua-dua halaman* mesti bersetuju untuk pertukaran data dan mesti mengandungi kod JavaScript khas yang mengendalikannya. Kami akan membincangkannya dalam tutorial. +<<<<<<< HEAD Had ini, sekali lagi, untuk keselamatan pengguna. Halaman daripada `http://anysite.com` yang dibuka oleh pengguna mestilah tidak boleh mengakses tab penyemak imbas lain dengan URL `http://gmail.com`, sebagai contoh, dan mencuri maklumat dari sana. - JavaScript boleh berkomunikasi dengan mudah melalui jaring ke pelayan tempat asal halaman semasa. Tetapi keupayaannya untuk menerima data daripada tapak/domain lain adalah lumpuh. Walaupun boleh, ia memerlukan persetujuan yang jelas (dinyatakan dalam pengepala HTTP) dari bahagian jauh. Sekali lagi, itu adalah had keselamatan. +======= + This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and must contain special JavaScript code that handles it. We'll cover that in the tutorial. + + This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com`, for example, and steal information from there. +- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is severely limited. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. +>>>>>>> 725653fd99b19d42195e837ac3bb23c1784f8f6e ![](limitations.svg) diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md index 3cf6f5397..ecc89f6e6 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -128,13 +128,13 @@ Such snippet in an HTML markup looks like this: ... ``` -For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page. +For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElement(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page. -When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them: +When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElement` on them: ```js // highlight all code snippets on the page -document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem); +document.querySelectorAll('pre[class*="language"]').forEach(elem => Prism.highlightElement(elem)); ``` Everything's simple so far, right? We find code snippets in HTML and highlight them. @@ -146,9 +146,9 @@ let article = /* fetch new content from server */ articleElem.innerHTML = article; ``` -The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted. +The new `article` HTML may contain code snippets. We need to call `Prism.highlightElement` on them, otherwise they won't get highlighted. -**Where and when to call `Prism.highlightElem` for a dynamically loaded article?** +**Where and when to call `Prism.highlightElement` for a dynamically loaded article?** We could append that call to the code that loads an article, like this: @@ -158,7 +158,7 @@ articleElem.innerHTML = article; *!* let snippets = articleElem.querySelectorAll('pre[class*="language-"]'); -snippets.forEach(Prism.highlightElem); +snippets.forEach(elem => Prism.highlightElement(elem)); */!* ```