I'm learning JavaScript for a project, but I am stuck at the very beginning. I boiled it down, to the function in my script not being defined, but as near as I can tell it is defined.
I have a script: "script.js" with the function display result.
function displayResult()
{
document.write("hello world");
}
in the header of index.html I have this line
<script type="text/javascript" href="script.js"></script>
I have this line later
<body onload="displayResult()">
I have no idea why my function will not call. I would appreciate the help.
<script type="text/javascript" href="script.js"></script>
Should be:
<script type="text/javascript" src="script.js"></script>
there is no href attribute to a script block, its included from an external source through the src attribute.
BTW, calling document.write after the document has finished loading will first clear the entire content of the document, then replace it with whatever you pass to the call (in this case, 'hello world', which is not a valid HTML or XML document).
Related
In the below code,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Falback procedure</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
if(typeof jQuery === 'undefined')
document.write('<script type="text/javascript" src="../localfolder/jquery.js"></script>');
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.js">
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>
considering a scenario, where google CDN has reach-ability issues that triggers fallback mechanism of loading local jQuery library(sitting in webserver).
In such scenario, Does angularjs library get loaded? after executing document.write
You have two problems with that code that are likely to be making it not behave as you expect:
You have a literal </script> inside a script block. It doesn't matter that it's inside a string, it terminates the block it's in. You have to break it up so the browser doesn't see it as the end of the block:
<script type="text/javascript">
if(typeof jQuery === 'undefined')
document.write('<script type="text/javascript" src="../localfolder/jquery.js"><\/script>');
// Note the \------------------------------------------------------------------^
</script>
The \ there is meaningless in JavaScript, but prevents the browser from seeing </script> and thus from ending the script block prematurely. Other ways you see it done are '....<' + '/script>' or '...</scr' + 'ipt>', etc.
Your src on the Angular script is incorrect, so it won't work whether jQuery loads or not (or from where). You've made the URL relative to the path of the page, but you need to make it at least protocol-relative by adding //:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.js">
</script>
<!-- here --------------------------^ -->
In a comment, you asked
I was wondering, whether document.write was an asynchronous execution
No, it happens immediately when the function is run. In your case, since the function is at the top level of a script tag with no special attributes, the HTML parser has to screech to a halt and run that JavaScript code, processing any tokens the JavaScript code outputs via document.write, and waiting until the JavaScript code finishes before moving on to the Angular part.
The browser may well be able to scan ahead to preload the angular.js file, but it won't execute the contents of that file until the parser has reached that file's script tag, because the order in which scripts execute is well-defined (e.g., in document order) unless you use the async or defer attributes.
i made a html page with this coding
<html>
<head>
<script src="../a.js">
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
</head>
<body>
</body>
</html>
In a.js i have this code
function m_web(u,i) {
alert('l');
alert('u');
}
but my webpage is unable to call this function which is coded in an external file. i am not getting any alert with this. i don't know what is problem. plz tell me simple solution for this.
thanx in advance
A single <script> tag can link to an external resource using the src attribute OR contain inline JavaScript code, but it can't do both at the same time. If you specify a src attribute any content between the <script src="foo.js"> tag and the </script> tag is ignored.
Since you want to load the external JS file, and then execute some JavaScript code, you'll need two separate tags to do so:
<script src="../a.js"></script>
<script>
// your code
</script>
plz write your code like below
<script src="../a.js"></script> </script>
//^^^^^^^^^^^^^^^^^^ first close script tag of linked js file
<script type="text/javascript">// then call your inline jscode
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
Try
you are not closing script tag
<script src="../a.js"></script>
^//added closing script tag
<script>
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
to alert what you pass use
function m_web(u,i) {
alert(i);
alert(u);
}
I am adding some third party code to my page. This is the code sample they supply which works:
<script type="text/javascript">
document.write(unescape("%3Cscript src='//munchkin.marketo.net/munchkin.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
Munchkin.init('123-ABC-456');
</script>
I thought I would remove some tags and turned it into this:
<script type="text/javascript">
document.write(unescape("%3Cscript src='//munchkin.marketo.net/munchkin.js' type='text/javascript'%3E%3C/script%3E"));
Munchkin.init('381-KZC-440');
</script>
This now doesn't work, stating that Munchkin is not defined. I did a look around and read about scope but I'm still confused as to why it breaks, the order has been kept the same. If I had to guess I would say that the JS file being called is allowed to load completely before the page continues onto the next script tag, whereas in my version it continues too quickly. If so, this could presumably be used for many advantages as it's essentially an "onloadcomplete" event?
The new script won't be loaded until the current script block terminates. Think about it like this: The first code will result in a DOM structure like:
<script type="text/javascript">
document.write(...;
</script>
<script src='//munchkin.marketo.net/munchkin.js'></script>
<script>
Munchkin.init('123-ABC-456');
</script>
As you can see, the script is inserted after the script that calls document.write. Therefore the script is loaded when the third script element is evaluated.
But if you have
<script type="text/javascript">
document.write(...);
Munchkin.init('123-ABC-456');
</script>
<script src='//munchkin.marketo.net/munchkin.js'></script>
then you are trying to access the object before the script was loaded.
I am trying to call a function written in one JavaScript file from another JavaScript file. I have the following code, but it doesn't work:
My HTML file
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="js2.js"></script>
<script language="javascript">
js1();
</script>
js1.js
function js1()
{
alert("Hello from js1");
js2();
}
js2.js
function js2()
{
alert("Hello from js2");
}
What can I do?
Try changing the order
<script type="text/javascript" src="js2.js"></script>
<script type="text/javascript" src="js1.js"></script>
<script language="javascript">
js1();
</script>
Because you call js2(); inside js1.js, so the script js2.js should be executed before.
In your case, i think it should still work without changing orders like this because you call js2(); inside a function. When this script is executed:
function js1()
{
alert("Hello from js1");
js2();
}
Even the js2.js is not executed yet, but you do not actually call js2(); at this time.
Just try it to see if it works.
I'm going to assume that's your entire HTML page.
In order to have those scripts run, you need to have those JavaScript files in the same folder as your webpage, and to actually have a proper HTML page!
In your HTML page, you need to include the references to your js1 and js2 files in either the head or body, and include the script you've written in the HTML page itself in the body so that it'll execute when it's loaded:
<!DOCTYPE html>
<!-- ^ Declaring this DOCTYPE means this is a HTML5 page. -->
<html>
<head>
<!-- This will load your scripts into the document. -->
<script src="js1.js"></script>
<script src="js2.js"></script>
<!--
In a HTML5 page, you don't need to include the
'type="text/javascript"' attribute on script tags.
They're treated as having that by default, unless you say otherwise.
-->
</head>
<body>
<!--
You could also include your scripts here, but I'll
just leave these commented out since they're already included.
<script src="js1.js"></script>
<script src="js2.js"></script>
-->
<script>
js1();
</script>
<!--
You don't need 'language="javascript"' on a script tag.
Use the type attribute, or nothing in a HTML5 page.
-->
</body>
</html>
By first line of Javascript I meant the JS code inside tags with no "src" attribute.
By right it will be evaluated top down.
Read more about it from my previous answer: Load and execution sequence of a web page?
Let me explain here:
<script type="text/javascript">
alert(jQuery); // alerts jQuery's namespace
</script>
<script type="text/javascript" src="jquery.js"></script>
The result is alerting undefined.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
alert(jQuery); // alerts jQuery's namespace
</script>
The result is alerting a object/function where defined.
The scripts are executed in the order they are listed in the html. It does not matter if they are inline JavaScript (within <script> tags) or if loaded as external scripts (<script src="xx.js">).