HTML etiketlerini vanilya JavaScript ile çözmek (decode)

Her videonun metni JSON’da kodlanmış bir dize olarak gönderilir. Bunun anlamı:

<p>In this course, you'll learn:</p>

Yukarıdaki gibi beklerken, tam olarak aşağıdaki gibi geliyor.

& lt;p& gt;In this course, you’ll learn:& lt;/p& gt;

Sistem otomatik çözümlemesin diye bazı terimlerin arasına boşluk eklemek zorunda kaldık!

Bunu görüntüleyebilmek için, dizgeyi tekrar gerçek HTML olarak çözmek gerekiyor.

Getting Full Function Helper

var decodeHTML = function (html) {
	var txt = document.createElement('textarea');
	txt.innerHTML = html;
	return txt.value;
};

// Example
// Returns "<p>In this course, you'll learn:</p>"
var decoded = decodeHTML('<p>In this course, you&rsquo;ll learn:</p>');

İki dizinin eşit olup olmadığını kontrol etmek – Pure JS

Bu durumdan daha önce bahsetmiştik, ama genede bir köşeye ekleyelim:
– Pure JS,
– Vanilla JS,
– Plain JS
üçlemelerinin anlamları aynı kapıya dayanır. Her üçü de saf javaScript kullanarak bir takım kod blokları elde etme yöntemidir. Kısacası seçicileri içeren ek kütüphaneler bulunmaz. Buna bağlı olarak sadece kullandığınız yardımcı fonksiyonları kullanabilirsiniz.

Adım 1

Eşitliği kontrol etmek için önce dizilerin aynı uzunlukta olduğundan emin olmamız gerekir. Olmazsa, eşit değiller ve return false yapabiliriz (döndürebiliriz).

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

};

Adım 2 [#1,#2]

İki dizinin tümü aynı ögelere sahipse bile, ancak farklı bir düzende dizilmişler ise kesinlikle eşit değillerdir.

#Adım 2:1

İlk dizideki her öge arasında döngü kuracağız ve dizinin (ideğişkeni sayesinde) ikinci dizideki aynı ögenin diziniyle aynı olup olmadığını kontrol edeceğiz. Değilse (ya da öge hiç mevcut değilse), geri göndereceğimiz değer: return false.

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

	// Tüm ögelerin aynı olup olmadığını kontrol et
	for (var i = 0; arr1.length < i; i++) {
		if (arr1[i] !== arr2[i]) return false;
	}

};

#Adım 2:2

Her şey kontrol edildiğinde, eşitlik devam ediyorsa geri göndereceğimiz değer: return true.

Not: Burada dikkat edilmesi gereken durum EĞER(IF) koşulu gerçekleşirse fonksiyondan dışarı FALSE değeri ile döndüğünden ötürü, bunların hiç biri gerçekleşmezse (Koşulsuz + şartsız) direkt olarak TRUE değeri döndüre bilmemizdir.

Getting Full Function Helper

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

	// Tüm ögelerin aynı olup olmadığını kontrol et
	for (var i = 0; i < arr1.length; i++) {
		if (arr1[i] !== arr2[i]) return false;
	}

	// True döndür
	return true;
};

Ayrıca Bkz.

• Bu yardımcı fonksiyonu sayfasında incele.
• Tüm yardımcı fonksiyonlar sayfasını incele.
• Günlük ipuçları blog yazılarını incele.

Vanilya JavaScript ile bir diziden tekrar eden ögeleri çıkarmak

Bazen bir dizide (array) birden fazla olacak şekilde öge tekrarlanabilir.

var sehirler = ["Ankara", "İstanbul", "İzmir", "Ankara"];

Yukarıda görüldüğü üzere “Ankara” ögesi listemizde iki kere tekrarlanıyor. Biz bu listeyi müşterilerimize sunacağımız bir seçim menüsü haline getireceksek karmaşaya sebep verecektir. Bu nedenle tekrar eden ögeleri temizlememiz gerekir.

var sehirler = ["Ankara", "İstanbul", "İzmir", "Ankara"];
var sehirlerTekrarsiz = sehirler.filter(function(item, index){
	return sehirler.indexOf(item) >= index;
});

console.log(sehirlerTekrarsiz);
// Çıktı ["Ankara", "İstanbul", "İzmir"]

Yukarıdaki işlemleri her bir kod bloğunda tekrar tekrar kullanmak hem sizi hemde sitenizi (fazla kod satırı) yoracaktır. Bunun için bir yardımcı fonksiyon yazdık.

Getting Full Function Helper

var arrayUnique = function (arr) {
	return arr.filter(function(item, index){
		return arr.indexOf(item) >= index;
	});
};

var jobsUnique = arrayUnique(jobs);

Beğendiyseniz takip edebilirsiniz:

Vanilla JS ile Animasyon Fonksiyonu Kullanımı

Hızlı bir özet

Buradaki yaklaşım, karmaşık JS kodlarına güvenmek yerine, öge’deki CSS animasyonlarını tetikleyen bir sınıf eklemeyi/çıkarmayı içerir. Ki bundan daha önce bahsetmiştik.

<h1 id="elem">Animate</h1>

<button class="show">Show</button>
<button class="hide">Hide</button>

var elem = document.querySelector('#elem');
document.addEventListener('click', function (event) {

	if (event.target.matches('.show')) {
		elem.removeAttribute('hidden');
		elem.classList.add('fadeInDown');
	}

	if (event.target.matches('.hide')) {
		elem.setAttribute('hidden', 'true');
		elem.classList.remove('fadeInDown');
	}

}, false);

Getting Full Setup

 * Apply a CSS animation to an element
 * @param  {Node}    elem      The element to animate
 * @param  {String}  animation The type of animation to apply
 * @param  {Boolean} hide      If true, apply the [hidden] attribute after the animation is done
 */
var animate = function (elem, animation, hide) {

	// If there's no element or animation, do nothing
	if (!elem || !animation) return;

	// Remove the [hidden] attribute
	elem.removeAttribute('hidden');

	// Apply the animation
	elem.classList.add(animation);

	// Detect when the animation ends
	elem.addEventListener('animationend', function endAnimation (event) {

		// Remove the animation class
		elem.classList.remove(animation);

		// If the element should be hidden, hide it
		if (hide) {
			elem.setAttribute('hidden', 'true');
		}

		// Remove this event listener
		elem.removeEventListener('animationend', endAnimation, false);

	}, false);

};

Vanilla JS ile belirli bir pozisyondaki bir nesneye yeni bir öğe nasıl eklenir?

Pratik açıdan, nesne sırası neredeyse her zaman korunur. Bir nesneye yeni bir öge eklerseniz, genellikle nesnenin sonuna eklenir.

var lunch = {
  sandwich: 'turkey',
  drink: 'soda',
  chips: true
};

// This gets added after "lunch.chips" in the object
lunch.dessert = 'cookie';

Nesnedeki belirli bir dizinin belirli bir sırasına bir öge eklemek için şunları yapmamız gerekir:

1. Yeni bir nesne oluştur.
2. Döngü sayısını saymak için bir değişken ayarlanmalı (nesnelerin bir yerel dizini olmadığından).
3. Orijinal nesne boyunca bir döngü yapılmalı.
4. Dizin değişkeni, yeni anahtar / değer çiftini “eklemek istediğiniz pozisyona eşitse, bunu yeni nesneye ekle” şeklinde koşul oluşturulmalıdır.
5. Eski anahtar / değer çiftlerini yeni nesneye iliştirmek gerekir.
6. Her döngünün sonundaki dizin bir bir arttırılmalı.

Bununla başa çıkmak için küçük bir yardımcı işlev yazıldı.

var addToObject = function (obj, key, value, index) {

	// Create a temp object and index variable
	var temp = {};
	var i = 0;

	// Loop through the original object
	for (var prop in obj) {
		if (obj.hasOwnProperty(prop)) {

			// If the indexes match, add the new item
			if (i === index && key && value) {
				temp[key] = value;
			}

			// Add the current item in the loop to the temp obj
			temp[prop] = obj[prop];

			// Increase the count
			i++;

		}
	}

	// If no index, add to the end
	if (!index && key && value) {
		temp[key] = value;
	}

	return temp;

};

Kullanım Şekli

// Original object
var lunch = {
  sandwich: 'turkey',
  drink: 'soda',
  chips: true
};

// Add to the end of the object
var lunchWithDessert = addToObject(lunch, 'dessert', 'cookie');

// Add between sandwich and drink
var lunchWithTopping = addToObject(lunch, 'topping', 'tomato', 1);

// Immutable copy of lunch
var lunchClone = addToObject(lunch);