Kaip sukurti „RSS“ skaitymo programą „JavaScript“

RSS („Really Simple Syndication“) yra standartizuotas formatas, kurį internetiniai leidėjai naudoja sindikuoti jų turinį kitoms svetainėms ir paslaugoms. An RSS dokumentas, taip pat žinomas kaip a maitinti, yra XML dokumentas turinį, kurį leidėjas nori platinti.

RSS kanalai yra prieinami beveik visose interneto naujienų svetainėse ir tinklaraščiuose, kuriuose skaitytojai gali nuolat atnaujinti savo turinį. Juos taip pat galima rasti ne tekstinėmis svetainėmis pvz., „YouTube“, kur galite naudoti „YouTube“ kanalo kanalą apie naujausius vaizdo įrašus.

Skambinamos programos, leidžiančios pasiekti šiuos kanalus ir skaityti bei rodyti jų turinį RSS skaitytojai. „JavaScript“ programoje galite sukurti paprastą RSS skaitymo programą. Šioje instrukcijoje pamatysime, kaip.

RSS informacijos santraukos struktūra

RSS kanalas turi šakninį elementą vadinamas , panašus į žyma, esanti HTML dokumentuose. Viduje žyma, yra a elementas, panašus HTML, tai apima daug elementų turinčius platinamą svetainės turinį.

Paprastai pašaruose yra pašarų Pagrindinė informacija pvz., svetainės pavadinimas, URL ir aprašymas individualūs atnaujinti įrašai, straipsniai ar kitas turinys svetainėje. Ši informacija yra </code>, <code><link></code>, ir <code><description></code> elementus. Kai šios žymės yra viduje <code><channel></code>, jie turi svetainės pavadinimą, URL ir aprašymą. Kai jie yra viduje <code><item></code> kad turi informaciją apie atnaujintus įrašus, jie atstovauja tą pačią informaciją, kaip ir anksčiau, bet kiekvienos atskiros informacijos <code><item></code> atstovauti. Taip pat yra keletas neprivalomi elementai kuri gali būti teikiama RSS kanale, teikiant papildomą informaciją, pvz., vaizdus ar autorių teises, apie platinamą turinį. Apie juos galite sužinoti šiame RSS 2.0 specifikacija cyber.harvard.edu. Štai pavyzdys, kaip Svetainės RSS kanalas gali atrodyti: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Dizaino patarimai, pamoka ir įkvėpimai lt-mums Vizualizuokite bet kurią CSS stilių lentelę su CSS statistika Ar kada nors susimąstėte, kiek CSS taisyklių yra stiliaus lape? Arba kada nors norėjote pamatyti… 17/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ „Amazon Echo Show“ - naujausias „Alexa“ valdomas „Smart Device“ „Amazon“ nepažįsta protingų namų sistemų koncepcijos su integruotu skaitmeniniu asistentu. Galų gale,… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Gaunamas pašaras`

 Mums reikia pareikalauti pašarų su mūsų RSS skaitytuvo programa. Svetainėje gali būti RSS kanalo URL rasti viduje  žyma naudojant application / rss + xml tipas. Pavyzdžiui, „Hongkiat.com“ rasite šią RSS informacijos santrauką.
   
 Pirma, pažiūrėkime, kaip gauti svetainės URL adresą naudojant „JavaScript“.
  fetch (websiteUrl) .then ((res) => res.text (). tada ((htmlTxt) => var domParser = new DOMParser () tegul doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector (nuoroda [type = "application / rss + xml"] '). href)). catch (() => console.error („Klaida įkeliant svetainę“)) 
 The atsiimti () metodas yra pasaulinis metodas asinchroniškai atsiunčia šaltinį. Jis nurodo šaltinio URL kaip argumentą (mūsų kodo svetainės URL). Tai grąžina a Pažadas todėl, kai metodas sėkmingai atsiunčia svetainę (t. y Pažadas įvykdyta), pirmoji funkcija viduje tada () pareiškimas tvarko atsiųstą atsakymą (res virš kodo).
  Tada gautas atsakymas visiškai perskaityti į teksto eilutę naudojant tekstas () metodas. Šis tekstas reiškia HTML įkeltos svetainės tekstas. Kaip atsiimti (), tekstas () taip pat grąžina a Pažadas objektą. Taigi, kai jis sėkmingai sukuria atsakymo tekstą iš atsakymo srauto, tada () tvarkys šį atsakymo tekstą (htmlText virš kodo).
 Kai bus prieinamas HTML svetainės tekstas, mes naudojame DOMParser API į išanalizuoti jį į DOM dokumentą. DOMParser analizuoja XML / HTML teksto eilutę į DOM dokumentą. Jo metodas, parseFromString (), mano du argumentai: tekstą, kurį reikia išanalizuoti ir turinio tipas.
 Tada iš sukurto DOM dokumento mes Surask href atitinkamos vertės  žyma naudojant querySelector () metodas, kad gautumėte pašarų URL.
 Pašarų analizavimas ir rodymas
 Kai gausime svetainės informacijos URL, turime atsiųskite ir perskaitykite RSS dokumentą rasti tame URL.
  fetch (feedUrl) .then ((res) => res.text (). tada ((xmlTxt) => var domParser = naujas DOMParser () leiskite doc = domParser.parseFromString (xmlTxt, „text / xml“) doc .querySelectorAll ('item') .EE (kiekvienas elementas) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Tokiu pat būdu, kaip mes parsisiuntome ir analizavome svetainę, dabar mes gauti ir analizuoti XML kanalą į DOM dokumentą. Norėdami tai pasiekti, mes naudojame „text / xml“ turinio tipas parseFromString () metodas.
 Išnagrinėtoje dokumente mes pasirinkite visus  elementus naudojant querySelectorAll metodas ir per kiekvieną.
 Kiekviename elemente galime prieigos žymos Kaip </code>, <code><description></code>, ir <code><link></code>, kurie turi pašarų turinį. Be to, mūsų paprasta RSS skaitytuvo programa yra sukurta, galite sugalvoti gautų kanalų turinį taip, kaip norite.</p> <h4>„Github“ demo</h4> <p>Galite patikrinti <strong>išsamesnė versija</strong> kodą, naudojamą šiame pranešime „Github“ repo. Išsamesnė versija <strong>atsiunčia tris kanalus</strong> („Mozilla Hacks“, „Hongkiat“ ir „Webkit“ tinklaraštis) <strong>naudojant JSON failą</strong> ir taip pat įtraukia kai kuriuos CSS stilius į RSS skaitytuvą.</p>


			<div class="rek-block">
				<center>
						<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
				</center>
			</div>

		</div>
	</div>

	<div class="col-md-4">
<div class="bar">

    <div class="rek-block">
        <center>
                <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </center>
    </div>

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">Kaip sukurti slaptą užmaskuotą aplanką be papildomos programinės įrangos</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">Kaip sukurti saugų ir užrakintą aplanką „Windows XP“</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">Kaip sukurti reaguojančią navigaciją</a> </div>
    </div>
    
        

</div>
	</div>

</div>
</div>

<div class="prevnext">
<div class="container">
<div class="row">

		<div class="col-md-6">
			
				<div class="post">
                        <div class="prevnext-title">Kitas straipsnis</div>
					<div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">

						
						<img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt="">
						
					
					</a></div>
					<div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">Kaip sukurti paieškos nuorodą darbalaukyje Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Ankstesnis straipsnis</div>
						<div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">
							
								
								<img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt="">
								
						
						</a></div>
						<div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">Kaip sukurti įprastą su „Amazon Alexa“</a> </div>
					</div>
				
				</div>

</div>
</div>
</div>


<footer>
	<div class="container">
    <div class="langs-block">
      <ul class="langs-list">
        <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li>  
          <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li>
          <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li>
          <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li>
          <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li>
          <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li>          
          <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li>
          <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li>
          <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li>
          <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li>
          <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li>
          <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li>
          <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li>
          <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li>
          <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li>
          <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li>
          <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li>
          <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li>
          <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li>
          <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li>
          <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li>
          <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li>
          <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li>
          <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li>
          <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li>
          <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li>
          <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li>
          <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li>
          <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li>
          <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li>
          <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li>
          <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li>        
          <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li>
          <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li>
          <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li>          

      </ul>
    </div>
	<div class="row align-items-center">
		<div class="col-md-3">
			© <script>
                    var currentTime = new Date();
                    var year = currentTime.getFullYear();

                    document.write(year);
            </script> <a href="/">Savtec</a>
		</div>

		<div class="col-md-9">
			Naudinga informacija ir interneto svetainių kūrimo patarimai. Programavimas, interneto dizainas, CSS, HTML, JAVASCRIPT. Konfigūruokite ir iš naujo įdiekite „Windows“. Svetainių ir programų kūrimas nuo nulio.
		</div>
	</div>
 </div>
</footer>

<link rel="stylesheet" href="css/flags.css">

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#edeff5",
      "text": "#838391"
    },
    "button": {
      "background": "#4b81e8"
    }
  },
  "theme": "classic",
  "position": "bottom-right"
})});
</script>

</body>
</html>