HTML ve JavaScript ile Medyanın Görüntülenmesi
Videoları ve resimleri arkadaşlarımla paylaşmak için kullandığım kişisel bir web sitem var. Aşağıda JavaScript ve HTML kullanan bir medya oluşturucu bulunmaktadır. Ana amacı, bir düğmeyi tıklatarak her seferinde bir görüntüyü göstermektir, ancak her tür medya görüntülenebilir. Amacım, tüm medyalarımı saklamak için hızlı yüklenen bir sayfa oluşturmaktı.
//VIDEO ARRAY
var oddvideo = [
'video1',
'video2',
'video3',
'video4',
'video5',
];
//AUDIO ARRAY
var oddaudio = [
'audio1',
'audio2',
'audio3',
'audio4',
'audio5',
];
//PHOTO ARRAY
var oddphoto = [
'photo1',
'photo2',
'photo3',
'photo4',
'photo5',
];
//TEXT ARRAY
var oddtext = [
'text1',
'text2',
'text3',
'text4',
'text5',
];
//RANDOM UNUSED ARRAY ITEMS
var Uvideo = [];
var Uaudio = [];
var Uphoto = [];
var Utext = [];
//OLD-NEW VARIABLES
var videoFor = 0;
var audioFor = 0;
var photoFor = 0;
var textFor = 0;
//NEW-OLD VARIABLES
var videoRev = oddvideo.length - 1;
var audioRev = oddaudio.length - 1;
var photoRev = oddphoto.length - 1;
var textRev = oddtext.length - 1;
//GENERATOR FUNCTION
function newThing() {
//RANDOM MODE
if(mode1.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if (videoCheck.checked) {
if (!Uvideo.length) Uvideo = [...oddvideo];
var randomY = Uvideo;
}
if (audioCheck.checked) {
if (!Uaudio.length) Uaudio = [...oddaudio];
var randomY = Uaudio;
}
if (photoCheck.checked) {
if (!Uphoto.length) Uphoto = [...oddphoto];
var randomY = Uphoto;
}
if (textCheck.checked) {
if (!Utext.length) Utext = [...oddtext];
var randomY = Utext;
}
var randomX = Math.floor(Math.random() * (randomY.length));
var y = randomY;
var x = randomX;
document.getElementById("thingDisplay").innerHTML = y[x];
// remove randomx from the unused array since it's been used now
randomY.splice(randomX, 1);
}
//OLD-NEW MODE
if(mode2.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if(videoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddvideo[videoFor];
videoFor++;
if (videoFor >= oddvideo.length) videoFor = 0;
}
if(audioCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddaudio[audioFor];
audioFor++;
if (audioFor >= oddaudio.length) audioFor = 0;
}
if(photoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddphoto[photoFor];
photoFor++;
if (photoFor >= oddphoto.length) photoFor = 0;
}
if(textCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddtext[textFor];
textFor++;
if (textFor >= oddtext.length) textFor = 0;
}
}
//NEW-OLD MODE
if(mode3.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if(videoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddvideo[videoRev];
videoRev--;
if (videoRev < 0) videoRev = oddvideo.length - 1;
}
if(audioCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddaudio[audioRev];
audioRev--;
if (audioRev < 0) audioRev = oddaudio.length - 1;
}
if(photoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddphoto[photoRev];
photoRev--;
if (photoRev < 0) photoRev = oddphoto.length - 1;
}
if(textCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddtext[textRev];
textRev--;
if (textRev < 0) textRev = oddtext.length - 1;
}
}
}<body>
<div align="center" id='thingDisplay'></div>
<div align="center">
<button onclick="newThing()">New Thing</button>
</div>
<form id="mode">
<label><input type="radio" name="modes" id="mode1"/></label> Random
<br/><label><input type="radio" name="modes" id="mode2"/></label> Old - New
<br/><label><input type="radio" name="modes" id="mode3"/></label> New - Old
</form>
<div align="right">
<form id="categories" align="right">
Video<label> <input type="radio" name="thing" id="videoCheck"/></label><br/>
Audio<label> <input type="radio" name="thing" id="audioCheck"/></label><br/>
Photo<label> <input type="radio" name="thing" id="photoCheck"/></label><br/>
Text<label> <input type="radio" name="thing" id="textCheck"/></label>
</form>
</div>
</body>Dikkat Edilmesi Gereken Birkaç Şey ...
JavaScript dizilerini en genç en üstte ve en eski en altta olacak şekilde düzenlerim (tarihlerde şöyle görünür:
oddDate = ['Oct. 1', 'Oct. 2', 'Oct. 3', 'Oct. 4', 'Oct. 5'];Rastgele mod sözde rastgeledir ve bir tanesini tekrarlamadan önce tüm dizi öğelerini bir kez görüntülemek için tasarlanmıştır.
Eski-yeni ve yeni-eski modlar sırasıyla yukarıdan aşağıya ve aşağıdan yukarıya diziler arasında hareket eder.
Her mod ve kategori, farklı bir moda geçtiğinizde yerini kaydeder. Örneğin, eski-yeni modunuz açık ve metin kategorisinin 3. öğesindesiniz diyelim . Fotoğraf kategorisine geçersiniz, dizide biraz gezersiniz, ardından metin kategorisine geri dönersiniz. Daha önce kaldığınız yerden sonraki öğeyi gösterecektir - örn. Öğe 4 . Üç mod arasında geçiş yapmak için de aynı şey söylenebilir; hepsi birbirinden bağımsızdır. Bu, sürdürmek istediğim bir şey.
Bir endişe , dizilere daha fazla öğe eklemeye devam ettikçe jeneratör ve sayfanın daha yavaş ve yavaş olacağıdır, ancak bunun yasal olup olmadığından emin değilim. Canlı sürümde, her dizide 500'den fazla öğe vardır ve zamanla daha fazlası eklenecektir.
Yanıtlar
Genel geribildirim
Bu kod, "eski - yeni" nin anlambiliminin tersine dönmüş görünmesine rağmen, kabul edilebilir şekilde çalışıyor gibi görünüyor.
Notlardaki ilk madde şu şekildedir:
- JavaScript dizilerini en genç en üstte ve en eski en altta olacak şekilde düzenlerim (tarihlerle şu şekilde görünür: oddDate = ['1 Ekim', '2 Ekim', '3 Ekim', 'Ekim. 4 ',' 5 Ekim '];)
Yine de üçüncü madde şunu belirtir:
- Eski-yeni ve yeni-eski modlar sırasıyla yukarıdan aşağıya ve aşağıdan yukarıya diziler arasında hareket eder.
En eski En olsaydı beri bu çelişkili görünüyor alt ardından eski yeni sıralama dizinin sonunda başlamalıdır.
JavaScript kodu, özellikle işlevde ve newThing()aynı zamanda değişken adlarında çok tekrarlı görünüyor . İncelemeden sonra daha sonra açıklanan bazı değişiklikleri öneririm.
gözden geçirmek
Javascript
Değişken bildirimler
Kod , yayılma sözdizimi gibi ECMAScript-2015'e (AKA ES-6) özgü bazı özellikler kullanır . ES6 değişkenleri ile değişkenlerin kapsamının kullanılması ve sınırlandırılması ve hatalardan kaçınılması önerilir . Bunun değişmezlik anlamına gelmediğini, bunun yerine böyle bir değişkenin yeniden atanamayacağını unutmayın.constletconst
Global değişkenler
Kod, kimlik özelliklerinden örtük olarak oluşturulan değişkenleri kullanarak DOM öğelerine başvurur - ör.
if(mode1.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
JavaScript kodunu birim testi yapmak istiyorsanız, bu durum işinizi zorlaştırabilir.
Giriş etiketleri
Görünüşe göre tüm radyo girişleri, <label>erişilebilirlik için iyidir (örn. Ekran okuyucular, kullanıcının girişi odaklamak / etkinleştirmek için etikete tıklayabilme yeteneği) ancak her girişin yanındaki metin etiketin içinde değildir . İçindeki tek şey girdiyse, bir etikete sahip olmak anlamsız görünüyor.
HTML
Satır içi olay işleyicileri
Kod, HTML kodu içinde olay işleyicileri ayarlar:
<button onclick="newThing()">New Thing</button>
Olay işleyicilerini JavaScript'e kaydetmek daha iyidir (örneğin newButton.addEventListener, birden çok nedenden dolayı kullanmak:
- Mantık, işaretlemeden ayrılabilir - projede birden fazla ekip arkadaşı çalıştıysa, biri JavaScript üzerinde çalışırken diğeri HTML üzerinde bağımsız olarak çalışabilirdi.
- Bu tür işleyiciler, tuhaf davranışlara yol açabilen genel ad alanını kirletebilir .
Alt öğeleri hizalama
<div>Elementler var align="center"ve align="right". Bu , kullanımdan kaldırılmış bir HTML 4 özelliği gibi görünüyor ve artık HTML 5'te desteklenmiyor. Bu, CSS kurallarına dönüştürülebilir . Bunun text-alignblok konteynerler için geçerli olduğuna dikkat edin 1 . Vb resim, video gibi merkez satır içi öğeler için ayarlanmış olması gerekir ve seti için .displayblockmarginauto
Birden çok form öğesi
İki ayrı <form>unsur var. İkisi, tüm unsurları içeren tek bir formda birleştirilebilir.
Kodu basitleştirme
Yukarıdaki inceleme noktalarından gelen önerilerle birlikte aşağıdaki değişiklikler, kodun uzunluğunu önemli ölçüde azaltmak için kullanılabilir:
geçerli dizini içerebilen bir nesneye seçenekleri yerleştirir ve nesneyi, özellik adının (yani anahtar) bir şeyin türü olduğu bir nesnenin özelliği haline getirir - örneğin
const options = { video: { options: [ //VIDEO ARRAY 'video1', 'video2', 'video3', 'video4', 'video5', ], currentIndex: -1 }, audio: { options: [ //AUDIO ARRAY 'audio1', 'audio2', 'audio3', 'audio4', 'audio5', ], currentIndex: -1 }, photo: { options: [ //PHOTO ARRAY 'photo1', 'photo2', 'photo3', 'photo4', 'photo5', ], currentIndex: -1 }, text: { options: [ //TEXT ARRAY 'text1', 'text2', 'text3', 'text4', 'text5', ], currentIndex: -1 }, }idradyo düğmeleri için öznitelikler kullanmak yerine onlaravalueöznitelikler vermeniz yeterlidirform öğelerine şu yolla referansta bulunun:
document.forms.elementshangi radyo düğmelerinin seçildiğini belirleyin RadioNodeList.value
şeyin gösterimi için bir öğe kullanın .
kipe dayalı bir öğe elde etme yöntemleriyle birlikte dizinleri kapsüllemek için bir sınıf kullanın
class ThingList {
constructor(items) {
this.items = items;
this.randomUnused = [...items];
this.forwardIndex = 0;
this.reverseIndex = items.length - 1;
}
forwardItem() {
return this.items[this.forwardIndex++ % (this.items.length)];
}
randomItem() {
if (!this.randomUnused.length) {
this.randomUnused.push(...this.items);
}
const index = Math.floor(Math.random() * this.randomUnused.length)
return this.randomUnused.splice(index, 1);
}
reverseItem() {
if (this.reverseIndex < 0) {
this.reverseIndex = this.items.length - 1;
}
return this.items[this.reverseIndex--];
}
}
const options = {
video: new ThingList([ //VIDEO ARRAY
'video1',
'video2',
'video3',
'video4',
'video5',
]),
audio: new ThingList([ //AUDIO ARRAY
'audio1',
'audio2',
'audio3',
'audio4',
'audio5',
]),
photo: new ThingList([ //PHOTO ARRAY
'photo1',
'photo2',
'photo3',
'photo4',
'photo5',
]),
text: new ThingList([ //TEXT ARRAY
'text1',
'text2',
'text3',
'text4',
'text5',
])
}
const output = document.getElementsByTagName('output')[0];
//GENERATOR FUNCTION
function newThing() {
if (!(document.forms.thingSelection.type.value in options)) {
return false;
}
const list = options[document.forms.thingSelection.type.value];
const method = document.forms.thingSelection.mode.value + 'Item';
const item = list[method]();
output.innerHTML = item;
}
document.getElementsByTagName('button')[0].addEventListener('click', newThing).center {
text-align: center;
}
.right {
text-align: right;
}<div class="center"><output></output></div>
<div class="center">
<button>New Thing</button>
</div>
<form name="thingSelection">
<label><input type="radio" name="mode" value="random" /> Random</label>
<br /><label><input type="radio" name="mode" value="forward" /> Old - New</label>
<br /><label><input type="radio" name="mode" value="reverse" /> New - Old</label>
<div class="right">
<label>Video <input type="radio" name="type" value="video" /></label><br />
<label>Audio <input type="radio" name="type" value="audio" /></label><br />
<label>Photo <input type="radio" name="type" value="photo" /></label><br />
<label>Text <input type="radio" name="type" value="text" /></label>
</div>
</form>