for an assignment I need to write a code to display an array in alphabetical order and count the items in the array. I can do this fine but the last requirement is to put the JavaScript into an external file. how do I do this exactly? below is my code and what i need to put in an external file but I have no idea how to do this.
This is the finished code but i need everything in the script tags to be in an external file
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>Question 2 Array</h2>
<p id="array"></p>
<button onclick="alpha()">Sort alphabetically</button>
<button onclick="count()">Count items in array</button>
<script>
var products = [" Printer", " Tablet", " Router", " Keyboard", " Mouse", " PC"];
document.getElementById("array").innerHTML = products;
function alpha() {
document.getElementById("array").innerHTML = products.sort();
}
function count() {
document.getElementById("array").innerHTML = products.length;
}
</script>
</body>
</html>
just to narrow it down here is the things to go external.
var products = [" Printer", " Tablet", " Router", " Keyboard", " Mouse", " PC"];
document.getElementById("array").innerHTML = products;
function alpha() {
document.getElementById("array").innerHTML = products.sort();
}
function count() {
document.getElementById("array").innerHTML = products.length;
}
Put your code in myFile.js and link this file to your HTML file, like this :
<script src="myFile.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<script src="path_to_external_file"></script> <!-- here comes your javascript file path -->
</head>
<body>
</body>
</html>
It is really simple
<script src="path to your .js file"></script>
As an example create a JS file called site. Then your js file should be site.js. Put your all javascript codes in that file.
Then call it in html <head> after all css. Keep in mind if you are using jQuery put you js file after jquery include.
<script src="../js/yourjavascriptfile.js"></script>
Put inside a .js file and link it within the head tags, the src=" place of file " should be the relative/absolute path to where the file is located.
Related
I need to save the source code of any website in a java script variable. For example, saving Google source code in a variable "GoogleSourceCode".
I tried some ways but I don't have enough knowledge for that.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>
<body>
<div id="container">
<button id="acessaSite">Acessa Site</button>
<button id="pegarHTMLagora">pegar HTML agora</button>
</div>
<script>
$('#acessaSite').on('click', function () {
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://google.com.br') + '&callback=?', function(data){
alert(dados.conteudo);
});
});
$('#pegarHTMLagora').on('click', function () {
var htmlAgora = document.documentElement.innerHTML; // Javascript vanilla (sem jquery)
alert(htmlAgora);
});
let htmlPego = document.documentElement.innerHTML;
</script>
</body>
</html>
I am still a beginner in JavaScript. I have written a code with two nested for-loops. It achieves the result but that is too large to be copied in Android. It copies part but not all data.
How can I export my data as .csv file or .txt file i.e. a button in HTML file, I click on it then the data is exported as .csv?
My HTML code:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button onclick="convert()"> Convert </button>
</body>
</html>
My JavaScript code:
function convert(){
var lon,lat;
for(lat = 52 + (2226/3600) ; lat <= 52 + (2425/3600) ; lat=lat+(1/3600))
{
for(lon = 9 + (3539/3600) ; lon<= 10 + (215/3600) ; lon=lon+(1/3600))
{ document.write("W,"+lat+","+lon+"<br>") }
}
};
My data are browsed fully and without problem in webpage HTML as followed after clicking convert button:
W,52.61833333333333,9.983055555555556
W,52.61833333333333,9.983333333333333
W,52.61833333333333,9.98361111111111
W,52.61833333333333,9.983888888888886
W,52.61833333333333,9.984166666666663 ..........
W,52.61833333333333,9.98444444444444
Hopefully I can export all these data so as .csv or .txt file.
I'm new to JavaScript and already encountered a problem. When I run the code and the browser pops up, it[browser] does not show anything. What I have is the testMethod.js file with one method:
function testMethod(num1, num2){
var value = num1 + num2;
return value;
}
and an HTML file from where I'm trying to run:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> My JavaScript</title>
<script language = "javascript" src = testMethod.js"></script>
</head>
<body>
<script language = "javascript" type = "text/javascript">
// var getValue = testMethod(2,3);
document.write("The result is " + testMethod(5,3));
</script>
<noscript>
<h3> This site requires JavaScript</h3>
</noscript>
</body>
</html>
The code is not implementing the result at all. It shows only a blank page browser.
It seems you have a quote missing in the html, it should say src="testMethod.js" where you are including the script in the first place.
The recommendation of the open source web analysis software Piwik is to put the following code at the end of the pages you want to track, directly before the closing </body> tag:
<html>
<head>
[...]
</head>
<body>
[...]
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.example.com/" : "http://piwik.example.com/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>
Under the following assumptions:
https is never used
we don't care that the page loads slower because the script is loaded before the DOM
is it okay to convert the above to the following:
HTML file:
<html>
<head>
[...]
<script src="http://piwik.example.com/piwik.js" type="text/javascript"></script>
</head>
<body>
[...]
<noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
</body>
</html>
Custom Javascript file with jQuery:
$(document).ready(function() {
try {
var piwikTracker = Piwik.getTracker("http://piwik.example.com/piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
}
catch(err) {
}
}
Are there any differences?
You are deferring the tracking until the page is fully loaded. Inline Javascript is executed when the browser finds it, so you'll have different number of visits depending on where you call piwikTracker.trackPageView();. The latter you call it, the lesser number of visits/actions will be counted.
Now, what do you consider a visit/action? If a user click on a link on your page, before the page fully loads, do you consider it a visit?
I have two javascript files (file1, file2). File1 uses a class defined in file2. Am I able to reference these files from an html file the following manner:
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
Will this allow for file1's dependence upon the class defined in file2?
If not what are some plugins that do allow for this sort of dependency?
It has to do with the way you are going to use them. A simplified approach.
Scenario 1:
script1.js
function primary()
{
secondary();
}
script2.js
function secondary()
{
alert("hi primary");
}
test.html
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works (you already know it)
Scenario 2:
script1.js
secondary();
script2.js and test.html as above
It's not working (js error)
Scenario 3:
script1.js
secondary();
script2.js remains the same
test.html
<html>
<head>
<script src=script1.js defer></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works.
Is this what you're looking for?
Overview:
Use Jquery to load JS dynamically using the following:
$.getScript("file1.js",function(){
alert("File1.js is loaded");
}
Example with Object Oriented JS and dynamic js loading.
File1.js as:
File1 = function(){
}
File1.prototype=
{
constructor:File1,
primary:function()
{
if (File2 == "undefined")
{
$.getScript("file2.js",function()
{
file2 = new File2();
file2.secondary();
});
}
}
}
File2.js As:
File2 = function(){
}
File2.prototype=
{
constructor:File2,
secondary:function()
{
if (File1 == "undefined")
{
$.getScript("file1.js",functiom()
{
file1 = new File1();
file1.primary();
});
}
}
}
This should give you pretty good idea of dynamic loading of JS, and JS Object oriented concept as well.