Difficulty putting a javascript code in a refresh of an html page - javascript

I would like to add this random code in an HTML refresh.
Once the refresh is triggered, it generates a random sequence and adds to the testing123 link.
<html>
<body>
<script type="text/javascript">
function generateRandomString(n) {
let randomString = '';
let characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < n; i++) {
randomString += characters.charAt(
Math.floor(Math.random() * characters.length)
);
}
return randomString;
}
</script>
<meta
http-equiv="refresh"
content="1; URL='https://testing1234.serveirc.com/view.php?id="
/>
<script type="text/javascript">
generateRandomString(25);
</script>
</body>
</html>

If you're going to generate the random part of the URL client-side with JavaScript, it would make more sense to perform the redirect with JavaScript than to construct a <meta> tag for it.
<script>
function generateRandomString(n) {
let randomString = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for ( let i = 0; i < n; i++ ) {
randomString += characters[Math.floor(Math.random()*characters.length)];
}
return randomString;
}
setTimeout(() => {
window.location.href = `https://testing1234.serveirc.com/view.php?id=${generateRandomString(25)}`;
}, 1000); // Redirect after 1 second
</script>
Using a meta tag makes more sense if you can construct the random part from server-side code that constructs the HTML (such as with PHP or Handlebars or some scripting template engine).

Related

Randomly change a letter in every 60 seconds

I am trying to find a method to have a single letter change every 5 seconds. I have the random part done but cannot work out how to change it every 5 seconds. Here is what I have put together so far, I am hoping someone can tell me where I am going wrong.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function randomString(Length)
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for( var i=0; i < Length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function ChangingRandomString(Length)
{
setInterval(function(){
return randomString(Length);
},5000);
}
</script>
</head>
<body>
<div id="wrap">
<p>Random Changing Letter : <script type="text/javascript">ChangingRandomString(1);</script></p>
<p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
</div>
</body>
</html>
In the ideal world I am looking to also make the changing letter fade in and out as well for those who like a challenge :-)
Thanks in advance for any help.
My suggestion:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function randomString(Length)
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for( var i=0; i < Length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function ChangingRandomString(Length)
{
setInterval(function(){
document.getElementById("random").innerHTML = randomString(Length);
},5000);
}
</script>
</head>
<body>
<div id="wrap">
<p>Random Changing Letter : <span id="random"></span></p>
<p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
</div>
</body>
<script>ChangingRandomString(1)</script>
</html>
Your code wasn't working because you weren't writing anywhere just calling ChangingRandomString. It simply returned something, but it wasn't being written.
This way, I used a span, that is rewritten every 5 seconds, and called the script in the end of the body tag.
For the fade thing, I really suggest you to use jQuery that facilitates that kind of things. You can also take a look here.

Make an array in Javascript with images from a folder

I want to navigate through images from a folder with JS, and i want to make an array of the files in the folder. I can't figure how to do that...I want to make the array |var images| and get rid of the links that i have manualy put them there.
<html>
<head>
<title>Ranking Page</title>
<script language="Javascript">
var images = [
"http://dummyimage.com/600x400/000/fff&text=two",
"http://dummyimage.com/600x400/000/fff&text=one"
];
var iIndex;
var iLen = images.length;
function fn_keydown(event) {
var img = document.getElementById("wrapper").childNodes[1];
if (event.keyCode === 39) {
iIndex = (iIndex + 1) >= iLen ? 0 : iIndex + 1;
} else if (event.keyCode === 37) {
iIndex = (iIndex - 1) < 0 ? iLen-1 : iIndex - 1;
}
img.setAttribute("src", images[iIndex]);
}
window.onkeydown = fn_keydown;
window.onload = function() {
iIndex = iLen;
var vEvent = {
keyCode : 39
};
fn_keydown(vEvent);
}
</script>
</head>
<body>
<div id="wrapper">
<img />
</div>
</body>
</html>
You can't do this with JavaScript as it does not have access to a computer's file system. That is because JavaScript was designed with security in mind.
You need to use server side languages for this like asp or php.You would be able to access the filesystem then with the correct security permissions and build your javaScript array code on the server. When the page loads up the paths to your images will exist in the web page and then you can do what you want with them in your javaScript.

Using data from .CSV with JavaScript

I have an .csv file that looks like:
oS,browName,browVer,timeCanvas,timeSvg
Windows,Firefox,25.0,0.25,1.23
Windows,Opera,12.16,0.572,1.465
And i would like to do a function that will count arithmetic mean for timeCanvas and timeSvg looking something like:
for (int i = 0; i < maxrow; i++)
{
if(oS=Windows)
{
if(browName=FireFox
{
if(browVer=25.0)
{
a=a+1;
timeC=timeC+timeCanvas
timeS=timeS+timeSvg
}
}
}
...
}
I googled my problem and only solution i could find was jquery-csv 0.7 with toObjects method (http://code.google.com/p/jquery-csv/)> I would like to know is it possible with this libaarry to do what i want?? And if there are some good examples (couldnt find myself)??
..........................................................................
Edit:
so i tryed vadim solution but it deos not working and i dont know hwat i do worng.Here is the code.
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function draw(){
var a = 0,
timeC = 0,
timeS = 0,
meanCFf=0,
meanSFf= 0;
$.get('test1.csv').done(function(data) {
var i,
lines = data.split('\n'),
line = lines[0].split(','),
oS = line.indexOf('oS'),
browName = line.indexOf('browName'),
browVer = line.indexOf('browVer'),
timeCanvas = line.indexOf('timeCanvas'),
timeSvg = line.indexOf('timeSvg');
for(i=1; i<lines.length; i++) {
line = lines[i].split(',');
if(line[oS] === 'Windows') {
a++;
timeC += parseFloat(line[timeCanvas], 10);
timeS += parseFloat(line[timeSvg], 10);
}
}
});
meanCFf = timeC/a;
meanSFf = timeC/a;
var os1 = document.getElementById("osInfo1");
os1.innerHTML = "Twoja średnia to: " + meanCFf;
var os2 = document.getElementById("osInfo2");
os2.innerHTML = "Twój sytem operacyjny to: " + meanSFf;
}
</script>
</head>
<body onload="draw()">
<p id="osInfo1"></p>
<p id="osInfo2"></p>
</body>
It looks like for loop is not working coz a is zero all the time.
Using jQuery you can do something like this:
JavaScript (script.js)
$(function() {
var a = 0,
timeC = 0,
timeS = 0;
$.get('test1.csv').done(function(data) {
var i,
lines = data.split(/\r\n|\n/),
line = lines[0].split(','),
oS = line.indexOf('oS'),
browName = line.indexOf('browName'),
browVer = line.indexOf('browVer'),
timeCanvas = line.indexOf('timeCanvas'),
timeSvg = line.indexOf('timeSvg');
for(i=1; i<lines.length; i++) {
line = lines[i].split(',');
if(line[oS] === 'Windows' && line[browName] === 'Firefox' && line[browVer] === '25.0') {
a++;
timeC += parseFloat(line[timeCanvas], 10);
timeS += parseFloat(line[timeSvg], 10);
}
}
$('#osInfo1').html("Twoja średnia to: " + timeC/a);
$('#osInfo2').html("Twój sytem operacyjny to: " + timeS/a);
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>CSV Test</h1>
<div id="osInfo1"></div>
<div id="osInfo2"></div>
</body>
</html>
You could get the folder manually with javascript and then attempt to manually parse it OR you could use PHP.
PHP has some great libraries for working with CSV which come standard.
Rather than go through all the effort of working with it manually every time I would personally create a simply PHP JSON service which carries out the function you require of the csv simply and delivers the data. You can then retrieve you the data using Javascript AJAX allowing you perform the code you need as usual.
Overall, I think you'll find this will mean less code for you and theres a lot more documentation on the net to support both the PHP CSV and the JSON service.
Of course, this is assuming that you have a server that has PHP.

Send javascript array to php array after loading and redirect user

I would like to redirect a user to a php page containing a form field after the user has viewed the three numbers after each other. I would like to also pass the index array to a php array for processing and storage.
Here's the code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Digit Span Backward</title>
<script src="jquery.min.js" type="text/javascript">
</script>
</head>
<body>
<p>Digit Span Backward - Javascript edition</p>
<script type="text/javascript" language="javascript">
function randomize(number)
{
var index = [];
for (var i = 0; i < number; i++)
{
index.push(Math.floor(Math.random()*10));
}
return index;
}
function showMessage(message)
{
$('p').html(message);
}
var i = 0;
function shuffle(list, i)
{
if (!(i >= 0))
{
i = 0;
}
setTimeout((function(msg)
{
i++;
return function()
{
if(i < list.length)
{
shuffle(list, i);
}
showMessage(msg);
}
})(list[i]), 1000);
}
</script>
<form>
<input type="button" onclick="shuffle(randomize(3))" value="Start Digit Span Backward">
</form>
</body>
</html>
Any ideas?
i am not a HTML 5 geek or a php professional but here is my suggestion
Can i suggest putting a hidden field in the page and then use the join method of the array to convert it to string splitted by what ever choice splitter like , and then set it to the hidden field value and pass it to the next page just give it a name
Example
JavaScript Function
function ArrayToStringSplitted(ary,splitter,hiddenfield)
{
var aryString= ary.join(spliter);
hiddenfield.value = aryString ;
}
HTML
just add the Hidden Field to the page
<input type='hidden' id="hdfld" name="hdfld" />
i think this will not work with the normal javascript redirection window.location = path
i think this will work with setting the form attributes the action to the location of the php page and the method to post
in there in the php page you can catch the hiddenfield value with $hiddenfield name and split it with the same splitter to return it to a array again
regards

updating a parameter within location (src) using JavaScript

How can I parse the value of status = 'logged-out' to the 3 tags below it, updating the value of login_status = 'logged-out'?
<script type="text/javascript">
window.ndm = window.ndm || {};
window.ndm.cam = {'status':'logged-out'};
</script>
<script src="http://foo.com/adserver/ndm/js.php?position=header-ad&section_id=NEWS&login_status=SUBSCRIBER"></script>
<script src="http://foo.com/adserver/ndm/js.php?position=middle-ad&section_id=NEWS&login_status=SUBSCRIBER"></script>
<script src="http://foo.com/adserver/ndm/js.php?position=footer-ad&section_id=NEWS&login_status=SUBSCRIBER"></script>
Keep in mind, there also heaps of other script tags on the page, so to identify the relevant ones. I got this function.
function getScriptSourceName(name){
var scripts = document.getElementsByTagName('script');
for (i=0;i<scripts.length;i++){
if (scripts[i].src.indexOf(name) > -1)
return scripts[i].src;
}}
Therefore to find the relevant script tags I want, i call the function - getScriptSourceName('foo.com');
How can I then update the login_status parameter's value to use the one declare at the very top?
I think this should work (below the HTML file for testing).
Look at changeStatus method (I triggered it by button click for testing).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
window.ndm = window.ndm || {};
window.ndm.cam = {'status':'logged-out'};
</script>
<script src="http://foo.com/some.php?login_status=SUBSCRIBER"></script>
<script src="http://foo.com/some.php?login_status=SUBSCRIBER"></script>
<script src="http://foofoo01.com/some.php?login_status=SUBSCRIBER"></script>
<script>
function changeStatus(name)
{
var scripts = document.getElementsByTagName('script');
var scriptsToChange = [];
for (var i = 0; i < scripts.length; i++)
{
if (scripts[i].src.indexOf(name) > -1)
{
var oldSrc = scripts[i].src;
var newSrc = oldSrc.replace(/(login_status=).*/,'$1' + 'logged-out');
scripts[i].setAttribute("src", newSrc);
scriptsToChange.push(scripts[i]);
}
}
for (var k = 0; k < scriptsToChange.length; k++)
{
document.getElementsByTagName("head")[0].appendChild(scriptsToChange[k]);
}
}
</script>
</head>
<body>
<button type="button" onclick="changeStatus('foo.com')">Change status</button>
</body>
</html>

Categories