I have a script such as this one:
<span>Famous Quote:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
var Quotation=new Array() // do not change this!
Quotation[0] = "Time is of the essence! Comb your hair.";
Quotation[1] = "Sanity is a golden apple with no shoelaces.";
Quotation[2] = "Repent! The end is coming, $9.95 at Amazon.";
Quotation[3] = "Honesty blurts where deception sneezes.";
Quotation[4] = "Pastry satisfies where art is unavailable.";
Quotation[5] = "Delete not, lest you, too, be deleted.";
Quotation[6] = "O! Youth! What a pain in the backside.";
Quotation[7] = "Wishes are like goldfish with propellors.";
Quotation[8] = "Love the river's \"beauty\", but live on a hill.";
Quotation[9] = "Invention is the mother of too many useless toys.";
Quotation[10] = "Things are only impossible until they're not.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
How can I put the quotations in their own file, rather than the source code? Here is an example: http://mydomain.go/quote.js
You can use a module loader to split up your code into different files.
index.html contents:
<script data-main="scripts/main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>
scripts/main.js contents:
require(['quotations'], function (quotations) {
var whichQuotation = Math.floor(Math.random() * quotations.length);
function showQuotation(){
document.write(quotations[whichQuotation]);
}
showQuotation();
});
scripts/quotations.js contents:
define(function () {
return [
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
];
});
JavaScript does not have an import statement. Splitting the code across <script> tags is difficult because variables like your Quotation become global variables. So if anyone else working on your website tries to define a variable called Quotation, you're both screwed. Using a module loader allows you to share the quotation list without consuming that variable.
I also fixed your random index algorithm.
Well that is array , you can go like this
var Quotation=["Time is of the essence! Comb your hair.","Sanity is a golden apple with no shoelaces.",... and so on]
Your second way could be maintaining XML, Which will give you the freedom to expand your Quotations list in fututre.
Create an xml like quot.xml And access it via js
<QuotList>
<quotation>Time is of the essence! Comb your hair.</quotation>
<quotation>Sanity is a golden apple with no shoelaces</quotation>
</QuotList>
This would be better:
var Quotation=
[
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
]
You could put that in a separate script if you really wanted to. Beyond that, there isn't any 'simple' way to improve the script.
Edit:
Put it in a separate file, then add a script tag:
<script src="whatever.js"></script>
Then you will have access to Quotation in your main file.
Include a file quotes.js in HTML file.
HTML Part:
<!DOCTYPE html>
<html>
<head>
<script src="quote.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<span>Famous Quote:
<script language="JavaScript">
console.log(Quotation);
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
</body>
</html>
Note: Create a new file quote.js and put this code in a file, And this file is already included in HTML page.
var Quotation=
[
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
]
create a file, let's call it quotes.js and add this:
var Quotation=[
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
];
no you can include this file in your main script by
<script src="path/to/quotes.js"></script>
and do whatever you want with it from here:
<script>
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
NOTE:
Since html5 you don't need those javascript and text/javascript in your script tags any more, as they are default for the script tag now.
NOTE2:
You shouldn't use document.write in production!
here's how I would do that code...
var quotes = [
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
];
var randQuote = quotes[Math.floor(Math.random()*quotes.length)];
document.write(randQuote);</div>
First, simplify array declaration:
var Q = [
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces."
];
Then, your random is not equable. Use Math.floor(Math.random()*Q) instead;
document.write(Q[Math.floor(Math.random()*Q.length)]);
Then move array declaration into own js file(quotes.js) and just include in by:
<script src="quotes.js"></script>
And that's all:
<script src="quotes.js"></script>
document.write(Q[Math.floor(Math.random()*Q.length)]);
This worked great! Thanks everyone!
var quotes = [
"Time is of the essence! Comb your hair.",
"Sanity is a golden apple with no shoelaces.",
"Repent! The end is coming, $9.95 at Amazon.",
"Honesty blurts where deception sneezes.",
"Pastry satisfies where art is unavailable.",
"Delete not, lest you, too, be deleted.",
"O! Youth! What a pain in the backside.",
"Wishes are like goldfish with propellors.",
"Love the river's \"beauty\", but live on a hill.",
"Invention is the mother of too many useless toys.",
"Things are only impossible until they're not."
];
var randQuote = quotes[Math.floor(Math.random()*quotes.length)];
document.write(randQuote);</div>