<div onmouseover="nextcategory()"></div>
<div onmouseover="previouscategory()"></div>
<div onmouseover="addsampletocurrentcategory()"></div>
<textarea id="textarea"></textarea>
JavaScript Date Functions
var d = new Date ...
see, I'm not sure how it works, so:
<div id="now"></div>
document.getElementById("now").innerHTML = now() // ?
now
*
this code ought to put a date in the now div when you click "now"
<div id="atnbg20170218sa1004" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1004now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1004now() {
var atnbg20170218sa1004now = Date.now()
document.getElementById("atnbg20170218sa1004").innerHTML = atnbg20170218sa1004now}
</script>
*
I screwed up and the date just got put in there without any clicking.
The date is the number of milliseconds between the moment the Date.now() function was called and 01/01/1970. Also, I'm trying to code something that will tell me how many day ago a certain date was ... so ... what's next?
the following ought to display the date
<div id="atnbg20170218sa1033" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1033now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1033now() {
var atnbg20170218sa1033now = Date.now()
var nd = document.getElementById("atnbg20170218sa1033")
nd.innerHTML = atnbg20170218sa1033now.toDateString()}
</script>
this code ought to put a date in the now div when you click "now"
<div id="atnbg20170218sa1004" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1004now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1004now() {
var atnbg20170218sa1004now = Date.now()
document.getElementById("atnbg20170218sa1004").innerHTML = atnbg20170218sa1004now}
</script>
*
I screwed up and the date just got put in there without any clicking.
The date is the number of milliseconds between the moment the Date.now() function was called and 01/01/1970. Also, I'm trying to code something that will tell me how many day ago a certain date was ... so ... what's next?
the following ought to display the date
<div id="atnbg20170218sa1033" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1033now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1033now() {
var atnbg20170218sa1033now = Date.now()
var nd = document.getElementById("atnbg20170218sa1033")
nd.innerHTML = atnbg20170218sa1033now.toDateString()}
</script>
*
The above failed ... but ... huh ...
var d = Date.now() works but apparently
var d = new Date() is what we're looking for:
<div id="atnbg20170218sa1047" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1047now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1047now() {
var atnbg20170218sa1047now = new Date()
var nd = document.getElementById("atnbg20170218sa1047")
nd.innerHTML = atnbg20170218sa1047now.toDateString()}
</script>
*
The above failed ... but ... huh ...
var d = Date.now() works but apparently
var d = new Date() is what we're looking for:
<div id="atnbg20170218sa1047" style="color:greenyellow;font-size:2em"><a href="javascript:atnbg20170218sa1047now()" style="color:greenyellow">now</a></div>
<script>
function atnbg20170218sa1047now() {
var atnbg20170218sa1047now = new Date()
var nd = document.getElementById("atnbg20170218sa1047")
nd.innerHTML = atnbg20170218sa1047now.toDateString()}
</script>
*
now
*
OK, I kind of figured I could pull that off, but now it gets tough.
It says var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); creates a date object.
It says var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); creates a date object.
*
*starting again ... my code got messed up
it also says "Wednesday March 25 2015" is a valid date string so that
var d = new Date("Wednesday March 25 2015") ought to do the trick
now I want the number of days between two dates
or, even better, a date x number of days ago
<div><span style="color:purple">number of days</span><input id="numberofdays" /></div>
<div><a id="thistest" href="javascript:thedatexdaysago()" style="color:purple;font-size:2em">get date the number of days ago</a></div>
<script>
function thedatexdaysago() {
var x = parseInt(document.getElementById("numberofdays").value)
var onesecond = 1000
var oneminute = onesecond * 60
var onehour = oneminute * 60
var oneday = onehour * 24
var xdays = oneday * x
var thedate = new Date()
var xdaysago = new Date(thedate - xdays)
var nd = document.getElementById("thistest")
nd.innerHTML = xdaysago.toDateString()}
</script>
that, folks, looks pretty good. you should be able to try out various numbers for "days ago".
*
it also says "Wednesday March 25 2015" is a valid date string so that
var d = new Date("Wednesday March 25 2015") ought to do the trick
now I want the number of days between two dates
or, even better, a date x number of days ago
<div><span style="color:purple">number of days</span><input id="numberofdays" /></div>
<div><a id="thistest" href="javascript:thedatexdaysago()" style="color:purple;font-size:2em">get date the number of days ago</a></div>
<script>
function thedatexdaysago() {
var x = parseInt(document.getElementById("numberofdays").value)
var onesecond = 1000
var oneminute = onesecond * 60
var onehour = oneminute * 60
var oneday = onehour * 24
var xdays = oneday * x
var thedate = new Date()
var xdaysago = new Date(thedate - xdays)
var nd = document.getElementById("thistest")
nd.innerHTML = xdaysago.toDateString()}
</script>
that, folks, looks pretty good. you should be able to try out various numbers for "days ago".
*
number of days
it's working!
A sample chart list would look like this: date*date*url,url, ...,lasturl*dayslist*date*date*url,url, ...,lasturl .... We'll convert it into an array:
var record = "date*date*url,url*dayslist*date*date*url,url"
var dayslistarray = record.split("*dayslist*")
then we can look for a record by date
given a date, the output of xdaysago(), so var dayslisttofind = xdaysago(x)
function dayslistxdaysago(x,dayslistarray) {
for (var i = 0; i < dayslistarray.length; i = i + 1) {
if (xdaysago(x) === dayslistarray[i].split("*date*")[0]) {return dayslistarray[i]}}
That may or may not be complete, but I want to make sure I know why I'm doing this.
Let's say I create a list of records, where each record is the chart for a certain stock at a certain time ... and I'm going to use this list to start to build a key to charts. I want to display the first chart on the list, and that's going to be type 1. Then I want to display the second chart on the list next to the first one, so I can compare the two charts, and then I might want to add the second chart to the type 1 list, or I might want to make it the type 2 sample.
<img src="" id="categorysample" /><img src="" id="sample" />
<div id="thiscategory"></div>
<input id="input" />
<a href="javascript:createnewkey()">create new key</a>
<a href="javascript:nextcategory()">next category</a>
<a href="javascript:addthissampletothiscategory()">add this sample to this category</a>
<a href="javascript:newcategory()">create new category</a>
I'm going to want to be able to output some sort of database of categories - the key - ... and then load that database when I want to use the key. What's that going to look like? It's going to look something like the days list shown above, but also it's going to be somehow different.
I guess it's going to be a list of categories, so
date*date*url*sample*date*date*url*category*date*date*url*sample*date*date*url
that would be two categories, each containing two samples.
<a href="javascript:sortalist()">sort a list</a>
The sort a list function will load the first sample from the list, as the sample chart, then, when that sample has been sorted, it will load the next sample from the list, and so on until all the new samples are sorted.
That should take care of that. Now we will want to display the charts for a category.
<a href="javascript:inspectthiscategory()">inspect this category</a>
Also, we need a button to load the key:
<a href="javascript:loadakey()">load a key</a>
And I didn't do
<a href="javascript:savethekey()">save the key</a>
That might be all the required controls. But I'm a little worried about adding new categories and new samples to categories.
There are (in my mind) two obvious ways to do this ... or one obvious way and one not so obvious way. The obvious way is obvious, but I hate it. The non obvious way is not obvious, but I kind of like it.
The obvious way is to use array methods. The non obvious way is string methods.
Maybe I should see if I can get somewhere with the obvious way.
I mean, laodakey() ought to convert the key string into an array. It gets the key string from the input ... oh, well, I can do that:
var keystring = document.getElementById("input").value
This, of course, assumes you have pasted the key string into the input. (It assumes the input contains the key string and only the key string, so, clear the input first.)
Then:
var typesarray = keystring.split("*type*")
I've been calling types categories, and now I'm calling categories types. Types seems slightly more precise.
Now, inside each element in keyarray will be a list of samples.
function displayasamplefor(type) {}
function displayasampleforthenexttype() {}
function displayasamplefortheprevioustype() {}
function displaythenextsampleforthistype() {}
function displaytheprevioussampleforthistype() {}
Oh, yeah, and ...
typearray is now an array of strings. Each of them can be converted into an array. Maybe ...
function typearray(typestring) {}
Now, though, I'm faced with what I hate. How to I build an array from a series of arrays? Taking a guess:
var keyarray = []
mmm ... I guess this ought to work:
function createkeyarray(keystring) {
var typesarray = keystring.split("*type*")
var keyarray = []
for (var i = 0; i < typesarray.length; i = i + 1) {
var typearray = typesarray[i].split("*sample*")
keyarray[i] = typearray}
return typearray}
Wow, yowsa, now I can see why I like the non obvious approach. Where am I going to keep keyarray? Is it somehow ... what? A global variable?
Maybe I need to study up. I quit using global variables a long time ago, because they seemed to be causing problems, or not working properly, and I found other ways to store data between function calls - that's the issue, I think. But, I admit, my approach is a bit cumbersome.
I can test this, I guess. If I declare a variable outside of a function, then it's global, right?
<div><a href="javascript:myproprietarynamespace20170218sa1323()" style="font-size:2em;color:greenyellow>test the global variable</a></div>
<script>
var myproprietarynamespace20170218sa1323 = "click again"
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
viewer.innerHTML = myproprietarynamespace20170218sa1323
myproprietarynamespace20170218sa1323 = "test the global variable"}
</script>
*See? It doesn't work.A sample chart list would look like this: date*date*url,url, ...,lasturl*dayslist*date*date*url,url, ...,lasturl .... We'll convert it into an array:
var record = "date*date*url,url*dayslist*date*date*url,url"
var dayslistarray = record.split("*dayslist*")
then we can look for a record by date
given a date, the output of xdaysago(), so var dayslisttofind = xdaysago(x)
function dayslistxdaysago(x,dayslistarray) {
for (var i = 0; i < dayslistarray.length; i = i + 1) {
if (xdaysago(x) === dayslistarray[i].split("*date*")[0]) {return dayslistarray[i]}}
That may or may not be complete, but I want to make sure I know why I'm doing this.
Let's say I create a list of records, where each record is the chart for a certain stock at a certain time ... and I'm going to use this list to start to build a key to charts. I want to display the first chart on the list, and that's going to be type 1. Then I want to display the second chart on the list next to the first one, so I can compare the two charts, and then I might want to add the second chart to the type 1 list, or I might want to make it the type 2 sample.
<img src="" id="categorysample" /><img src="" id="sample" />
<div id="thiscategory"></div>
<input id="input" />
<a href="javascript:createnewkey()">create new key</a>
<a href="javascript:nextcategory()">next category</a>
<a href="javascript:addthissampletothiscategory()">add this sample to this category</a>
<a href="javascript:newcategory()">create new category</a>
I'm going to want to be able to output some sort of database of categories - the key - ... and then load that database when I want to use the key. What's that going to look like? It's going to look something like the days list shown above, but also it's going to be somehow different.
I guess it's going to be a list of categories, so
date*date*url*sample*date*date*url*category*date*date*url*sample*date*date*url
that would be two categories, each containing two samples.
<a href="javascript:sortalist()">sort a list</a>
The sort a list function will load the first sample from the list, as the sample chart, then, when that sample has been sorted, it will load the next sample from the list, and so on until all the new samples are sorted.
That should take care of that. Now we will want to display the charts for a category.
<a href="javascript:inspectthiscategory()">inspect this category</a>
Also, we need a button to load the key:
<a href="javascript:loadakey()">load a key</a>
And I didn't do
<a href="javascript:savethekey()">save the key</a>
That might be all the required controls. But I'm a little worried about adding new categories and new samples to categories.
There are (in my mind) two obvious ways to do this ... or one obvious way and one not so obvious way. The obvious way is obvious, but I hate it. The non obvious way is not obvious, but I kind of like it.
The obvious way is to use array methods. The non obvious way is string methods.
Maybe I should see if I can get somewhere with the obvious way.
I mean, laodakey() ought to convert the key string into an array. It gets the key string from the input ... oh, well, I can do that:
var keystring = document.getElementById("input").value
This, of course, assumes you have pasted the key string into the input. (It assumes the input contains the key string and only the key string, so, clear the input first.)
Then:
var typesarray = keystring.split("*type*")
I've been calling types categories, and now I'm calling categories types. Types seems slightly more precise.
Now, inside each element in keyarray will be a list of samples.
function displayasamplefor(type) {}
function displayasampleforthenexttype() {}
function displayasamplefortheprevioustype() {}
function displaythenextsampleforthistype() {}
function displaytheprevioussampleforthistype() {}
Oh, yeah, and ...
typearray is now an array of strings. Each of them can be converted into an array. Maybe ...
function typearray(typestring) {}
Now, though, I'm faced with what I hate. How to I build an array from a series of arrays? Taking a guess:
var keyarray = []
mmm ... I guess this ought to work:
function createkeyarray(keystring) {
var typesarray = keystring.split("*type*")
var keyarray = []
for (var i = 0; i < typesarray.length; i = i + 1) {
var typearray = typesarray[i].split("*sample*")
keyarray[i] = typearray}
return typearray}
Wow, yowsa, now I can see why I like the non obvious approach. Where am I going to keep keyarray? Is it somehow ... what? A global variable?
Maybe I need to study up. I quit using global variables a long time ago, because they seemed to be causing problems, or not working properly, and I found other ways to store data between function calls - that's the issue, I think. But, I admit, my approach is a bit cumbersome.
I can test this, I guess. If I declare a variable outside of a function, then it's global, right?
<div><a href="javascript:myproprietarynamespace20170218sa1323()" style="font-size:2em;color:greenyellow>test the global variable</a></div>
<script>
var myproprietarynamespace20170218sa1323 = "click again"
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
viewer.innerHTML = myproprietarynamespace20170218sa1323
myproprietarynamespace20170218sa1323 = "test the global variable"}
</script>
update
it didn't work. i made changes and now it, well, does something ... but it only does something after i removed everything to do with the global variable! ha! see below for the changes.
Maybe if I try this:
hang on ... my code got all messed up again
*
*... now that I've sorted out how to get this onto a new line
... this code does not work:
<div>
<a href="javascript:myproprietarynamespace20170218sa1323()" id="myproprietarynamespace20170218sa1323" style="color: greenyellow; font-size: 2em;">test the global variable</a></div>
<script>
var myproprietarynamespace20170218sa1323 = "click again"
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
viewer.innerHTML = myproprietarynamespace20170218sa1323
myproprietarynamespace20170218sa1323 = "test the global variable"}
</script>
the following trick was described by my research source
<div>
<a href="javascript:myproprietarynamespace20170218sa1323()" id="myproprietarynamespace20170218sa1323" style="color: greenyellow; font-size: 2em;">test the global variable</a></div>
<script>
window.myproprietarynamespace20170218sa1323 = "click again"
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
viewer.innerHTML = myproprietarynamespace20170218sa1323
myproprietarynamespace20170218sa1323 = "test the global variable"}
</script>
actually, let's see if that does it
nope
i think i'll try a little debugging
<div>
<a href="javascript:myproprietarynamespace20170218sa1323()" id="myproprietarynamespace20170218sa1323" style="color: greenyellow; font-size: 2em;">test the global variable</a></div>
<script>
window.myproprietarynamespace20170218sa1323 = "click again"
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
if ( viewer.innerHTML === "test the global variable") {viewer.innerHTML = "click again"}else {viewer.innerHTML = "test ... something"}
myproprietarynamespace20170218sa1323 = "test the global variable"}
</script>
that doesn't work either!
I think I'll give up.
Digging into the vaults, I remember that, 1st, we are going to split the key string into an array of types. Then we are going to want to do maybe one of two things, add a new type or add a new sample to a type. (If we add a new type we will also want to add a sample to it.)
The key string is in the input, and we might as well just keep it there.
Earlier on I included a variable, <div id="thistype"></div>. Yes, that's a variable. We can read or change its value from anywhere in JavaScript:
var thistype = document.getElementById("thistype")
The question that briefly was in my mind when I created this variable earlier was "what goes in here?" Now I can say it's the type number. On loading the key,
thistype.innerHTML = 0
function addsample() {
var thistype = document.getElementById("thistype")
var thistypenumber = parseInt(thistype.innerHTML)
var thekeystring = document.getElementById("input")
var thetypesarray = thekeystring.value.split("*type*")
var thistypestring = thetypesarray[thistypenumber]
/*oops, a problem. oh, wait ... */
var ... where do I get the new sample from? It comes from ... the list of new samples, first of all. So, I've got the key in the input, and now I need to input a list of new samples ... using the input. I could create a second input. There's even a reason to do it ... but I'd rather not, actually. Instead:
<div id="thekey"></div>
function loadthekey() {
var theinput = document.getElementById("theinput")
var thekey = document.getElementById("thekey")
thekey.innerHTML = theinput.value}
And, there it is: the key is now stored in thekey ... as a string. It will stay there, snug as a bug, while I run various functions. No global variables. Well, thekey (<div id="thekey"></div>) is a global variable, in a sense. But, it can only store strings. We can't put an array in it. Well, that's not true either, but we have to put it in there as an array literal ... as a string. And then, when we want to work with it as an array, we need to convert it into an array ... using .split(). Gotta love it.
Maybe we'll want to do this, too:
<div id="newlist"></div>
<a href="javascript:loadnewlist()">load new list</a>
function loadnewlist() {
var theinput = document.getElementById("theinput")
var newlist = document.getElementById("newlist")
newlist.innerHTML = theinput.value}
OK, that needs to do something else, too:
var thissample = document.getElementById("thissample")
thissample.innerHTML = 0
var newlistarray = newlist.innerHTML.split("*sample*")
var sample = document.getElementById("sample")
// earlier I created an image element, id="sample"
sample.src = newlistarray[0]
Now the first sample of the first type is in the image with the "type" image, its type number is in the "thistype" variable (div), the first sample from the new list is in the "sample" image, and its number in the new list array is in the "thissample" div.
What were we going to do next?
It was either add this sample to the current type list or create a new type and add it to that list. Well, another possibility is ... display a new type in the type image ... or ... too ... display a new sample from the same type in the type display.
Maybe I'll take a breather. This is starting to feel somewhat doable.
*
that doesn't work either!
<div>
<a href="javascript:myproprietarynamespace20170218sa1323()" id="myproprietarynamespace20170218sa1323" style="color: greenyellow; font-size: 2em;">test ... whatever</a></div>
<script>
function myproprietarynamespace20170218sa1323() {
var viewer = document.getElementById("myproprietarynamespace20170218sa1323")
if ( viewer.innerHTML === "test ... whatever") {viewer.innerHTML = "click again"}
else {viewer.innerHTML = "test ... something"}}
</script>I think I'll give up.
Digging into the vaults, I remember that, 1st, we are going to split the key string into an array of types. Then we are going to want to do maybe one of two things, add a new type or add a new sample to a type. (If we add a new type we will also want to add a sample to it.)
The key string is in the input, and we might as well just keep it there.
Earlier on I included a variable, <div id="thistype"></div>. Yes, that's a variable. We can read or change its value from anywhere in JavaScript:
var thistype = document.getElementById("thistype")
The question that briefly was in my mind when I created this variable earlier was "what goes in here?" Now I can say it's the type number. On loading the key,
thistype.innerHTML = 0
function addsample() {
var thistype = document.getElementById("thistype")
var thistypenumber = parseInt(thistype.innerHTML)
var thekeystring = document.getElementById("input")
var thetypesarray = thekeystring.value.split("*type*")
var thistypestring = thetypesarray[thistypenumber]
/*oops, a problem. oh, wait ... */
var ... where do I get the new sample from? It comes from ... the list of new samples, first of all. So, I've got the key in the input, and now I need to input a list of new samples ... using the input. I could create a second input. There's even a reason to do it ... but I'd rather not, actually. Instead:
<div id="thekey"></div>
function loadthekey() {
var theinput = document.getElementById("theinput")
var thekey = document.getElementById("thekey")
thekey.innerHTML = theinput.value}
And, there it is: the key is now stored in thekey ... as a string. It will stay there, snug as a bug, while I run various functions. No global variables. Well, thekey (<div id="thekey"></div>) is a global variable, in a sense. But, it can only store strings. We can't put an array in it. Well, that's not true either, but we have to put it in there as an array literal ... as a string. And then, when we want to work with it as an array, we need to convert it into an array ... using .split(). Gotta love it.
Maybe we'll want to do this, too:
<div id="newlist"></div>
<a href="javascript:loadnewlist()">load new list</a>
function loadnewlist() {
var theinput = document.getElementById("theinput")
var newlist = document.getElementById("newlist")
newlist.innerHTML = theinput.value}
OK, that needs to do something else, too:
var thissample = document.getElementById("thissample")
thissample.innerHTML = 0
var newlistarray = newlist.innerHTML.split("*sample*")
var sample = document.getElementById("sample")
// earlier I created an image element, id="sample"
sample.src = newlistarray[0]
Now the first sample of the first type is in the image with the "type" image, its type number is in the "thistype" variable (div), the first sample from the new list is in the "sample" image, and its number in the new list array is in the "thissample" div.
What were we going to do next?
It was either add this sample to the current type list or create a new type and add it to that list. Well, another possibility is ... display a new type in the type image ... or ... too ... display a new sample from the same type in the type display.
Maybe I'll take a breather. This is starting to feel somewhat doable.
*
No comments:
Post a Comment