JavaScript'te RSS Okuyucu Uygulaması Nasıl Oluşturulur

RSS (Gerçekten Basit Dağıtım) çevrimiçi yayıncılar tarafından kullanılan standart bir biçimdir. içeriklerini sendikala diğer web sitelerine ve servislere bir RSS belgesi, olarak da bilinir besleme, bir XML belgesi yayıncının yayınlamak istediği içeriği taşıma.

RSS beslemeleri, neredeyse tüm çevrimiçi haber web sitelerinde ve okurlarının bloglarında bulunabilir. içerikleriyle ilgili güncel kalmak. Onlar da bulunabilir metin tabanlı olmayan web siteleri gibi bir YouTube kanalının yayınını kullanabileceğiniz YouTube gibi En son videolardan haberdar olun.

Bu yayınlara erişen ve içeriğini okuyan ve görüntüleyen programlara çağrılır. RSS okuyucuları. JavaScript'te basit bir RSS okuyucu programı oluşturabilirsiniz. Bu derste nasıl yapacağımızı göreceğiz..

RSS beslemesinin yapısı

Bir RSS yayını kök elemanı var denilen , benzer HTML belgelerinde etiket bulundu. İçinde etiketi var eleman, tür HTML’de birçok alt öğe içerir web sitesinin dağıtılmış içeriğini içeren.

Bir besleme genellikle bazı temel bilgi web sitesinin ve web sitesinin adı, URL'si ve açıklaması gibi Bireysel güncellenen yazılar, makaleler veya diğer içerikler bu web sitesinin. Bu bilgiler </code>, <code><link></code>, ve <code><description></code> elemanları, sırasıyla. Bu etiketler ne zaman doğrudan içeride mevcut <code><channel></code>, web sitesinin başlığını, URL'sini ve açıklamasını tutarlar. Onlar ne zaman içeride mevcut <code><item></code> o güncellenen yayınlarla ilgili bilgileri tutar, öncekilerle aynı bilgiyi temsil ederler; <code><item></code> temsil etmek. Ayrıca bazı isteğe bağlı öğeler Bu, bir RSS beslemesinde bulunabilecek, dağıtılmış içerikteki görüntüler veya telif hakları gibi ek bilgiler sağlar. Bu konuda onlar hakkında bilgi edinebilirsiniz RSS 2.0 özelliği at cyber.harvard.edu. İşte nasıl bir örnek Bir web sitesinin RSS beslemesi gibi görünebilir: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Tasarım İpuçları, Eğitim ve İlhamlar en-us Herhangi bir CSS Stil Sayfasını CSS İstatistikleri ile Görselleştirin Bir stil sayfasında kaç tane CSS kuralı bulunduğunu hiç merak ettiniz mi? Veya hiç görmek istediniz mi… 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Yankı Gösterisi - En Son Alexa Destekli Akıllı Cihaz Amazon, gömülü dijital asistanlı akıllı ev sistemleri kavramına yabancı değil. Sonuçta,… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Yayını alma`

 Bizim ihtiyacımız yayını al RSS okuyucu uygulamamızla. Bir web sitesinde, bir RSS beslemesinin URL'si olabilir. içinde bulundu  kullanarak etiketi uygulama / rss + xml tip. Örneğin, Hongkiat.com'da aşağıdaki RSS yayını bağlantısını bulacaksınız.
   
 İlk önce nasıl yapılacağını görelim bir web sitesinin yayın URL'sini al JavaScript kullanarak.
  fetch (websiteUrl) .then ((res) => res.text (). sonra ((htmlTxt) => var domParser = yeni DOMParser (), doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [tip = "uygulama / rss + xml"]'). href)). catch (() => console.error ('Web sitesi getirilirken hata oluştu'))) 
  ) (Getirme yöntem küresel bir yöntemdir. zaman uyumsuz olarak bir kaynak getirir. Kaynağın URL’sini argüman olarak alır (kodumuzdaki web sitesinin URL’si). O bir verir Söz vermek bu nedenle, yöntem web sitesini başarılı bir şekilde getirdiğinde (ör. Söz vermek yerine getirilir), içindeki ilk işlev sonra() Beyan alınan cevabı ele alır (res yukarıdaki kodda).
  Alınan cevap tamamen bir metin dizisine okumak kullanmak Metin() yöntem. Bu metin Alınan web sitemizin HTML metni. Sevmek ) (Getirme, Metin() Ayrıca bir verir Söz vermek nesne. Böylece, başarılı bir şekilde yanıt akışından bir yanıt metni oluşturduğunda, sonra() bu yanıt metnini ele alacak (htmlText yukarıdaki kodda).
 Web sitesinin HTML metni kullanıma sunulduktan sonra, DOMParser API için DOM belgesinde ayrıştır. DOMParser XML / HTML metin dizesini DOM belgesine ayrıştırır. Onun yöntemi, parseFromString (), alır iki argüman: ayrıştırılacak metin ve içerik türü.
 Sonra, oluşturulan DOM belgesinden, biz bul href ilgili değeri  etiket kullanmak querySelector () yayın URL’sini almak için yöntem.
 Yayını ayrıştırma ve görüntüleme
 Web sitesinin yayın URL’sini aldığımızda, RSS belgesini alın ve okuyun o URL’de bulundu.
  fetch (feedUrl) .then ((res) => res.text (). sonra ((xmlTxt) => var domParser = yeni DOMParser (), doc = domParser.parseFromString (xmlTxt, 'text / xml') doc yazsın .querySelectorAll ('item'). forEach ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Web sitesini alıp ayrıştırdığımız gibi, şimdi XML beslemesini bir DOM belgesine alın ve ayrıştırın. Bunu başarmak için, 'Text / xml' içindeki içerik türü parseFromString () yöntem.
 Ayrıştırılmış belgede, biz hepsini seç  elementler kullanmak querySelectorAll yöntem ve her birinde döngü.
 Her elementin içinde yapabiliriz erişim etiketleri sevmek </code>, <code><description></code>, ve <code><link></code>, besleme içeriğini taşıyan Ve basit RSS okuyucu uygulamamız yapılır, alınan yayınların içeriğini istediğiniz gibi biçimlendirebilirsiniz..</p> <h4>Github demosu</h4> <p>Kontrol edebilirsiniz <strong>daha ayrıntılı sürüm</strong> Github depomuzda bu yazıda kullanılan kodun. Daha detaylı sürüm <strong>üç yayın alır</strong> (Mozilla Hacks, Hongkiat ve Webkit blogu) <strong>JSON dosyası kullanarak</strong> ve ayrıca RSS okuyucusuna bazı CSS stilleri ekler.</p>


<div class="rek-block">
	<!-- adplace zxnt -->
	<ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="580" data-zxh="400"  data-overlay="false" >
	<script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script>
	</ins>
	<!--end adplace  zxnt -->
</div>

		</div>
	</div>

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

    <div class="rek-block">
            <!-- adplace zxnt -->
        <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="250"  data-overlay="false" >
        <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script>
        </ins>
        <!--end adplace  zxnt -->
        </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">Ekstra Yazılım Olmadan Gizlice Gizlenmiş Bir Klasör Nasıl Oluşturulur</a> </div>
    </div>
    

    
    <div class="rek-block">
        <!-- adplace zxnt -->
        <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="600"  data-overlay="false" >
        <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script>
        </ins>
        <!--end adplace  zxnt -->
</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">Windows XP'de Güvenli ve Kilitli Bir Klasör Oluşturma</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">Duyarlı Bir Gezinme Nasıl Oluşturulur</a> </div>
    </div>
    
        
            
    <div class="rek-block">
        <!-- adplace zxnt -->
        <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="600"  data-overlay="false" >
        <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script>
        </ins>
        <!--end adplace  zxnt -->
</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">Sonraki makale</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">Windows 8.1'de Masaüstünde Arama Kısayolu Nasıl Oluşturulur</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Önceki makale</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">Amazon Alexa ile Rutin Nasıl Oluşturulur?</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.phhsnews.com"><i class="flag flag-FR"></i></a></li>
        <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li>
        <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li>
        <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li>
        <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li>
        <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li>
        <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li>
        <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li>
        <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li>
        <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li>          
        <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li>

        <li class="site-lang"><a href="https://th.phhsnews.com/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://tr.phhsnews.com/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.phhsnews.com/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.phhsnews.com/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="/">PHHSNEWS</a>
		</div>

		<div class="col-md-9">
			Web geliştirme konusunda faydalı bilgiler ve ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden kurun. Sıfırdan web siteleri ve uygulamalar oluşturma.
		</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>