document.addEventListener(‘DOMContentLoaded’, function() {
// Données du tableau, directement intégrées pour éviter les appels API externes pour cette information spécifique.
// Si des données externes étaient nécessaires, l’URL de l’API et un exemple de réponse JSON seraient ici.
// Exemple (non utilisé pour ce cas car les données sont fournies) :
// URL API: https://exemple.com/api/climat-rd (service fictif)
// Réponse JSON attendue:
// {
// “title”: “Climat en République Dominicaine : Novembre vs. Août”,
// “headers”: [“Caractéristique”, “Novembre”, “Août”],
// “rows”: [
// [“Température moyenne diurne”, “28°C”, “31°C”],
// …
// ]
// }
const initialData = {
“title”: “Climat en République Dominicaine : Novembre vs. Août”,
“headers”: [“Caractéristique”, “Novembre”, “Août”],
“rows”: [
[“Température moyenne diurne”, “28°C”, “31°C”],
[“Température moyenne nocturne”, “22°C”, “24°C”],
[“Jours de pluie moyens”, “7-9 jours”, “10-12 jours”],
[“Humidité relative”, “Modérée”, “Élevée”],
[“Risque d’ouragan”, “Faible”, “Modéré à Élevé”],
[“Affluence touristique”, “Modérée”, “Élevée”],
[“Prix des vols/hôtels”, “Modéré”, “Élevé”]
]
};
// Cloner les données initiales pour pouvoir les trier/filtrer sans altérer l’original
let currentTableData = JSON.parse(JSON.stringify(initialData.rows));
// Références aux éléments du DOM
const comparateurClimatRD = document.getElementById(‘comparateurClimatRD’);
const h2Title = comparateurClimatRD.querySelector(‘h2’);
const tableauComparatif = document.getElementById(‘tableauComparatif’);
const tbody = tableauComparatif.querySelector(‘tbody’);
const thead = tableauComparatif.querySelector(‘thead tr’);
const searchInput = document.getElementById(‘searchCaracteristique’);
const toggleHighlightBtn = document.getElementById(‘toggleHighlight’);
const noResultsMessage = document.getElementById(‘noResults’);
let isHighlightingDifferences = false; // État pour l’activation du surlignage des différences
let sortDirection = ‘asc’; // ‘asc’ ou ‘desc’ pour le tri initial
let currentSortColumnIndex = 0; // L’index de la colonne actuellement triée (par défaut, la première)
// 1. Initialiser le titre du tableau
h2Title.textContent = initialData.title;
// 2. Générer les en-têtes du tableau (y compris la logique de tri pour la première colonne)
function renderTableHeaders() {
thead.innerHTML = ”; // Nettoyer les en-têtes existants
initialData.headers.forEach((headerText, index) => {
const th = document.createElement(‘th’);
th.scope = ‘col’;
th.classList.add(‘px-6’, ‘py-3’, ‘font-semibold’, ‘tracking-wider’);
th.textContent = headerText;
// Ajout de la fonctionnalité de tri pour la première colonne “Caractéristique”
if (index === 0) {
th.classList.add(‘cursor-pointer’, ‘hover:bg-gray-100’);
th.setAttribute(‘aria-sort’, currentSortColumnIndex === index ? (sortDirection === ‘asc’ ? ‘ascending’ : ‘descending’) : ‘none’);
th.addEventListener(‘click’, () => sortTable(index));
}
thead.appendChild(th);
});
}
// 3. Fonction pour rendre les lignes du tableau
function renderTableRows(rowsToRender = currentTableData) {
tbody.innerHTML = ”; // Nettoyer les lignes existantes
if (rowsToRender.length === 0) {
noResultsMessage.classList.remove(‘hidden’);
return;
} else {
noResultsMessage.classList.add(‘hidden’);
}
rowsToRender.forEach(row => {
const tr = document.createElement(‘tr’);
tr.classList.add(‘bg-white’, ‘hover:bg-gray-50’, ‘transition-colors’, ‘duration-100’);
tr.setAttribute(‘role’, ‘row’); // Accessibilité
row.forEach((cellText, colIndex) => {
const td = document.createElement(‘td’);
td.classList.add(‘px-6’, ‘py-4’, ‘whitespace-nowrap’, ‘text-gray-800’);
td.textContent = cellText;
td.setAttribute(‘role’, ‘cell’); // Accessibilité
// Appliquer le surlignage des différences si activé pour les colonnes de données (pas la caractéristique)
if (isHighlightingDifferences && colIndex > 0) {
const val1 = row[1]; // Valeur de Novembre
const val2 = row[2]; // Valeur d’Août
// Comparaison simple des valeurs textuelles
if (val1 !== val2) {
td.classList.add(‘bg-yellow-50’, ‘font-medium’, ‘text-indigo-700’, ‘border-l-2’, ‘border-yellow-300’); // Surligner les différences
}
}
tr.appendChild(td);
});
tbody.appendChild(tr);
});
}
// 4. Fonction de recherche/filtrage
function filterTable() {
const searchTerm = searchInput.value.toLowerCase().trim();
const filteredRows = initialData.rows.filter(row =>
row[0].toLowerCase().includes(searchTerm) // Recherche uniquement dans la colonne “Caractéristique”
);
currentTableData = filteredRows; // Mettre à jour les données courantes avec les résultats filtrés
// Si le tri était actif, réappliquer le tri aux données filtrées
if (currentSortColumnIndex === 0) { // S’il s’agit de la colonne “Caractéristique”
currentTableData.sort((a, b) => {
const valA = a[currentSortColumnIndex].toLowerCase();
const valB = b[currentSortColumnIndex].toLowerCase();
return sortDirection === ‘asc’ ? valA.localeCompare(valB) : valB.localeCompare(valA);
});
}
renderTableRows(); // Rendre le tableau avec les données filtrées et potentiellement triées
}
// 5. Fonction de tri pour la colonne “Caractéristique”
function sortTable(columnIndex) {
if (columnIndex !== 0) return; // Seule la première colonne est triable pour le moment
// Inverser la direction de tri si la même colonne est cliquée
if (currentSortColumnIndex === columnIndex) {
sortDirection = sortDirection === ‘asc’ ? ‘desc’ : ‘asc’;
} else {
sortDirection = ‘asc’; // Réinitialiser à ascendant si nouvelle colonne
currentSortColumnIndex = columnIndex;
}
// Mettre à jour l’attribut aria-sort sur l’en-tête
const currentHeaders = thead.querySelectorAll(‘th’);
currentHeaders.forEach((th, idx) => {
if (idx === columnIndex) {
th.setAttribute(‘aria-sort’, sortDirection === ‘asc’ ? ‘ascending’ : ‘descending’);
} else {
th.setAttribute(‘aria-sort’, ‘none’);
}
});
// Trier les données courantes
currentTableData.sort((a, b) => {
const valA = a[columnIndex].toLowerCase();
const valB = b[columnIndex].toLowerCase();
if (sortDirection === ‘asc’) {
return valA.localeCompare(valB);
} else {
return valB.localeCompare(valA);
}
});
renderTableRows(); // Rendre le tableau avec les données triées
}
// 6. Gestion du bouton “Afficher les Différences”
toggleHighlightBtn.addEventListener(‘click’, () => {
isHighlightingDifferences = !isHighlightingDifferences; // Inverser l’état de surlignage
toggleHighlightBtn.classList.toggle(‘bg-indigo-800’, isHighlightingDifferences); // Changement de couleur du bouton
toggleHighlightBtn.classList.toggle(‘bg-indigo-600’, !isHighlightingDifferences);
toggleHighlightBtn.textContent = isHighlightingDifferences ? ‘Masquer les Différences’ : ‘Afficher les Différences’;
renderTableRows(currentTableData); // Re-rendre le tableau pour appliquer/retirer le surlignage
});
// Écouteur d’événements pour la recherche en temps réel
searchInput.addEventListener(‘keyup’, filterTable);
// Initialisation du tableau au chargement de la page
renderTableHeaders();
renderTableRows();
});
ドミニカ共和国では11月にハリケーンは発生しますか？ 11月はハリケーンシーズンの公式終了月です。9月や10月に比べてリスクが大幅に低くなります。大規模な嵐に遭遇する可能性は最小限に抑えられ、より穏やかな旅行となります。11月の主な文化イベントは何ですか？ もちろんです！11月6日、ドミニカ共和国では憲法記念日（Día de la Constitución）を祝い、パレードや国民的祝祭が開催されます。さらに、国際的に有名なプエルトプラタ・ジャズ・フェスティバルもこの時期に開催されることが多いです。これは、ユニークな文化と音楽に浸る絶好の機会です。 11月の旅行におすすめの宿泊施設は？ 島には幅広い選択肢があります。プンタカナの大型オールインクルーシブリゾートから、サントドミンゴのより親密なブティックホテル、自然豊かなエリアにあるエコロッジまで、誰もが満足できるものが見つかります。11月はまだ空室が多く、価格も魅力的ですが、最良の選択肢を得るためには、必ず事前に予約することをお勧めします。
{“@context”:”https://schema.org”,”@type”:”FAQPage”,”mainEntity”:[{“@type”:”Question”,”name”:”Quelle est la meilleure pu00e9riode pour visiter la Ru00e9publique Dominicaine si je veux u00e9viter les foules ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Novembre est un excellent choix. Situu00e9 juste apru00e8s la madagasikara.fr/conseils-de-voyage-pendant-la-saison-des-pluies-a-madagascar/">saison des pluies et avant la haute saison touristique de du00e9cembre u00e0 avril, ce mois offre un u00e9quilibre parfait entre un climat agru00e9able et moins d’affluence. On profite ainsi des sites et des plages dans une ambiance plus sereine.”}},{“@type”:”Question”,”name”:”Faut-il craindre les ouragans en Ru00e9publique Dominicaine en novembre ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Novembre marque la fin officielle de la saison des ouragans. Le risque est considu00e9rablement plus faible qu’en septembre ou octobre. Les chances de rencontrer une tempu00eate majeure sont minimes, ce qui permet un voyage plus tranquille.”}},{“@type”:”Question”,”name”:”Quels sont les u00e9vu00e9nements culturels majeurs en novembre ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Absolument ! Le 6 novembre, la Ru00e9publique Dominicaine cu00e9lu00e8bre le Dia de la Constituciu00f3n avec des parades et des festivitu00e9s nationales. De plus, le Festival de Jazz de Puerto Plata, un u00e9vu00e9nement de renommu00e9e internationale, a souvent lieu u00e0 cette pu00e9riode. C’est l’occasion d’une immersion culturelle et musicale unique.”}},{“@type”:”Question”,”name”:”Quel type d’hu00e9bergement est recommandu00e9 pour un voyage en novembre ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”L’u00eele offre une vaste gamme d’options. Des grands complexes tout compris u00e0 Punta Cana aux hu00f4tels-boutiques plus intimistes u00e0 Saint-Domingue ou des u00e9co-lodges dans les ru00e9gions plus naturelles, il y en a pour tous les gou00fbts. En novembre, on trouve encore de bonnes disponibilitu00e9s et des prix intu00e9ressants, mais il est toujours conseillu00e9 de ru00e9server u00e0 l’avance pour avoir le meilleur choix.”}}]}
