Working with DOM and Encapsulating methods, passing arguments with Javascript OOP. How many is too many?
This is an update to my previous question and am posting the entirety of the code as is plus what I'd like to add to it. Thanks to everyone for their support so far.
Essentially I'm trying to build a queue or array that will hold Clip objects, each with three different properties: url, inpoint, and outpoint. This array will be the core of my system which will store different Youtube videos using the Yout开发者_开发技巧ube API so that the user can essentially edit and cue up the videos they enter into the array. This array I've called Timeline and should have the ability to push in new objects rearrange other elements etc.
Right now I'm trying to get it to just push in a new object; however, when I try to run the queue it will only display the alert that I should add something to the queue. I've been looking around and can't seem to find a very good example of how to do this so I'm beginning to wonder if my logic for tackling this problem is any good at all.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>Building an Array OOP - WIP</title>
<script type="text/javascript">
function Clip() {
this.url = userInput.url.value;
this.in = userInput.in.value;
this.out = userInput.out.value;
}
function Timeline() {
this.clips = [];
this.queue = function() {
this.clips.push(new Clip());
alert("Your url is: " + this.clips.length);
}
this.dequeue = function() {
if(this.clips.length != 0) this.clips.pop();
}
this.runQueue = function() {
if(this.clips.length == 0) {
alert("You need to add something to the queue.");
}
else {
var i = this.clips.length;
var slot = 0;
alert("in else.");
while(i!=0) {
document.getElementById('queue').innerHTML+= this.clips[slot].url + "<br>";
i--;
slot++;
}
}
}
}
var myTime = new Timeline();
</script>
</head>
<body>
<div id="wrapper">
<header id="mainHeader">
<h1>Building an Array with Object Oriented Programming</h1>
</header>
<section id = "addVideo">
<h1> Add a Video </h1>
<form name = "userInput">
<p>
Url: <input type="text" name="url" size="30" />
Start Time: <input type="text" name="in" size="2" />
End Time: <input type="text" name="out" size="2" />
<input type="button" onclick="myTime.queue()" value="Add" />
</p>
</form>
<!-- <table border = "1" id = "tblVideo">
<tr>
<th>Youtube URL</th>
</tr>
</table> //-->
</section>
<aside>
<h1>Show Contents of Timeline</h1>
<p>
<input type="button" onclick="myTime.runQueue()" value="Show Timeline" />
</p>
Your Queue:<br>
<div id="queue"></div>
</aside>
</div>
</body>
I'm curious as to how many of these queue methods I can encapsulate into the Timeline object. I would eventually like to add DOM to update a table with what's been added into the queue and am curious as to whether I should put it in this same object as well or break it off into another function, if so, how do I then pass arguments?
This is an example of a function I've already used in my code that used to take the url and update the table from the queue by simply putting the addTableRow(url); in the function but I'm unsure as to how to implemint this with objects. Would you just write it addTableRow(this.clips.url)? Or should I encapsulate it into the Timeline object?
function addTableRow(url) {
function delayed() {
var table=document.getElementById("tblVideo");
var lastRow = table.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = table.insertRow(lastRow);
var cell1=row.insertCell(0);
cell1.innerHTML=url;
}
setTimeout(delayed,500);
}
I've already made a very simple version of this already without any OOP seen here. I thought that OOP would increase the flexibility of my code and allow me to store multiple objects holding more information.
I apologize if any of this sounds overly simple but I'm kind of curious if OOP is really the way to go for this kind of problem.
Originally my input type was submit, which wouldn't update the array
<input type="submit" onclick="myTime.queue()" value="Add" />
So I changed it to button.
<input type="button" onclick="myTime.queue()" value="Add" />
After researching more the DOM question has grown into its own problem, which requires another question.
加载中,请稍侯......
精彩评论