So I am new to javascript (in fact, new to programming in general).
My question is, can I consider loading the .js file in the
<head><script src="script.js"></script>...</head>
as loading a header file (like in c/c++)?
I guess not. Suppose my script.js looks like this:
function copyToClipboard(text)
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
and my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>
It does not work, namely, it does not wait for my clicking (which means that the function is loaded correctly-it is called successfully, it is just that the pop-up does not wait for the mouse event). But if I put the script in-line, it works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>
The reason why the first code doesn't work is that you're calling the copyToClipboard() function and assigning the return value to the onclick variable. In the second code you're correctly assigning it a function reference instead of calling the function immediately.
In other words:
onclick = copyToClipboard(document.getElementById("a").value);
"Call copyToClipboard(), assign return value (undefined) to the onclick variable"
onclick = function copyToClipboard(text) { ...
"Assign a reference to a function called copyToClipboard() to the onclick variable"
To make it work with the function definition in an external script, wrap the function call in an anonymous function:
onclick = function() {
copyToClipboard(document.getElementById("a").value);
};
All praise the power of javascript to mislead developers into diagnosing their problems incorrectly!
This is not how you define an inline onclick handler. An inline onclick handler is an attribute(or property, as we'll find out in a bit) of an html element:
<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>
What you did with the <script> tag was simply include some javascript code, to be executed as the browser is parsing your html:
<script> onclick=copyToClipboard(document.getElementById("a").value);</script> calls your function, and assigns its return value to onclick.
But wait, why does your second snippet work?
This is because onclick is also a property of dom elements. It also happens that you can assign a click handler to window itself - this is what your second snippet is actually doing(thanks to an uncool feature of javascript that attempts to assign to an undefined variable assigns to properties of the global object). That means that no matter where you click, your new click handler will be called.
As to your opening question, you can't really say that tags are like includes - a script can involve more than just declarations and definitions, unlike an included file. You can look into some of the module standards/frameworks, like RequireJS, for more similar functionality.
Related
I know that when you want to invoke a JavaScript function inside a HTML body section you can do it by putting <script> someFunction(); </script> inside your body tag, here is an example, I have HTML like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
src="/Script.js"></script>
</head>
<body>
<script>
showAlert();
</script>
</body>
</html>
And the javascript file like this:
function showAlert(){
alert("This is an alert!");
}
This works fine but if I put the JavaScript file reference at the end of the body like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script>
showAlert();
</script>
<script type="text/javascript"
src="/Script.js"></script>
</body>
</html>
the function showAlert() is no longer being invoked. Can you please answer these 2 questions:
Why is showAlert() not invoked in the second scenario?
How (if possible) to invoke a function from a JavaScript file when
it is referenced in the end of the body?
The reason why I'm asking is because I know that it is a good practice to refer your JavaScript files in the end of the body instead of the head, so that the page will be rendered first before loading all the JavaScript code.
1) The scripts are loaded linearly. Since the script has not yet been loaded, the function is undefined. (This is in contrast to function hoisting within a script.)
2) Simply wait till the page loads.
window.onload = function(){
showAlert();
}
(Simply doing window.onload = showAlert won't work because of reason #1. Here you delay evaluation until such time that the function will exist.)
Assuming you want to run showAlert() immediately when the page has loaded, try adding an onload() event handler to call showAlert rather than just calling it as the script loads. This can be done a few ways:
<body onload="showAlert();">
or define the window onload event programatically where your current function all is made in the html
window.onload = new function() {showAlert();}
or (and I think this is the preferred way because it won't cancel out other event handlers bound to the onload event)
window.addEventListener("load", showAlert);
By default, scripts run sequentially. Your code doesn't work because showAlert() runs before loading Script.js, so at that point the function showAlert is not defined yet.
To make it work, you must delay the showAlert call.
The load event has already been mentioned in other answers, but it will wait for all resources (like images) to load. So listening to the DOMContentLoad event is usually better, the function will be called sooner.
<script>
document.addEventListener('DOMContentLoaded', function() {
showAlert();
});
</script>
<script src="data:text/javascript,
function showAlert() {
console.log('Hello!')
}
"></script>
The reason for your script isn't working is the way how a webpage is parsed..From top to bottom..Here is some link (would help to know why script added at bottom).
1) in your First case the browser loaded script when it parsed the page and when you called it in body it was available so it got invoked.
2) in Second scenario (My be typo) You have placed the call to function before loading the script that contain your function. so during page parsing browser wont find it and continue to next line where script containing function is loaded which has no effect for now as it already parsed the call.
If you still want to follow the second scenario you have to trigger the function call (after ensuring all resources being loaded ie Your script).
so you can use window.load=<your function call> or in case of jQuery place it inside
$(document).ready(function(){
//call here
});
Javascript processes in the order given. You are trying to call showAlert before showAlert have been defined. Change to:
<body>
<script type="text/javascript"
src="/Script.js">
</script>
<script>
showAlert();
</script>
</body>
and all should work as intended.
What im trying to do, is to call my function from whenever someone clicks on my button. However, i know that it can be done with
<button onclick="myFuntion()>
But i want to skip that step, i dont want a function in my button, i've heard that its bad programming.
However, heres how my file looks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>
<script>
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
</script>
</head>
<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>
</body>
</html>
So how come it doesnt pop-up with the box "Hello" whenever i push the button, what have I done wrong?
You have to call your testFunction after the HTML body is loaded so that it actually creates he binding.
That is, at the end of the file, you'd do something like:
...
<script>
testFunction()
</script>
</body>
...
If you run that binding code in your head script the button element won't exist yet — that is why this have to be at the end.
JavaScript libraries such as jQuery make this more elegant by providing an ready hook, where one puts code to be called once the page is fully loaded, without having to resort to code on the bottom of the page.
Complete example with script at end (confusingly, Stack Snippets don't show it to you in the order they actually are in the snippet; even though it doesn't look like it, the script is at the end here):
// Scoping function to avoid creating unnecessary globals
(function() {
// The click handler
function Hello() {
alert("Hello");
}
// Hooking it up -- you *can* do it like you did:
//document.getElementById("test").onclick = Hello;
// ...but the modern way is to use addEventListener,
// which allows for more than one handler:
document.getElementById("test").addEventListener(
"click", Hello, false
);
})();
<button type="button" id="test">Click me</button>
window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
Just run the line in your testFunction always. As seen here:
https://jsfiddle.net/arugco4b/
I have tried finding an answer to this on my own, but only found instructions on how to use onload events. I seem to be missing the point.
I've been taught that if I want something to happen when the page loads, I should use window.onload like this:
<script>
window.onload = dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
But now that I am thinking on my own I wonder what the point of doing that is. Because this also produces the same result:
<script>
dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
Anything I put at the top inside <script> is going to execute anyway... so what's the point of window.onload?
If you're directly running your code with dosomething();, you're delaying your browser's rendering for the time it takes your JavaScript code to run.
You can try to insert your code to the <head> of your html document:
<!DOCTYPE html>
<html>
<head>
<script>
dosomething();
function dosomething()
{
window.alert('hello');
}
</script>
</head>
<body>
Does not render before the alert is dismissed!
</body>
</html>
You'll see that the page stays blank until you dismiss the alert. So every second the browser takes to run your JavaScript code is a second that your users have to wait for the site to be rendered.
Now if you change the code to be run on body's onload, the page gets rendered before the alert is shown:
<!doctype html>
<html>
<head>
<script>
function dosomething()
{
window.alert('hello');
}
</script>
</head>
<body onload="dosomething()">
This page gets rendered before the alert!
</body>
</html>
Consider these two blocks of code:
<head>
<script>
alert(document.getElementById('foo').value);
</script>
</head>
<body>
<input id="foo" value="hello">
</body>
<head>
<script>
window.onload = function() {
alert(document.getElementById('foo').value);
}
</script>
</head>
<body>
<input id="foo" value="hello">
</body>
In the first example, we'll get an error because the element you are referencing isn't found when the script runs - and so you are trying to get value of null.
In the second example, document.getElementById() will find the element with the id foo, because window.onload will get fired only when the complete DOM has been loaded and so the element is available.
window.onload will fire once the DOM has finished loading. In your example, the DOM is not required. However, the following code will fail if the DOM has not yet loaded:
function doSomething() {
alert(document.getElementById('test').innerText);
}
// Throws: TypeError: Cannot read property 'innerText' of null
Assuming your page contains an element with id test, it will alert its text.
waiting for the onload event assures you that all of your scripts and resources are loaded
Assume you are using jquery in your page and you invoked a function that uses it directly without onload , you can't guarantee that the jquery file has been loaded, which will lead to errors and possibly ruining your whole logic
The onload event is handy to make sure the page is fully loaded before you run a script. For your example above it doesn't make sense, but if your page is still loading an item on the bottom and you try to call it then nothing will run.
I recommend using jQuery and using the ready function. This way you will ensure your page is completely loaded.
$( document ).ready(function() {
// This will only run after the whole page is loaded.
});
If you don't want to load query, just put your javascript at the bottom of the page. It's best practice, and ensures the DOM is loaded in full.
For more info on the jquery ready function go here: https://api.jquery.com/ready/
I have read that if you want to make it look like your site loads faster then you should put your javascript at the end of your html file like the following
<html>
<body>
</body>
<script>
//my awesome javascript functions go here because it lets things load faster
//than if it was at the top
</script>
</html>
The problem is when I create buttons or use onChange events that call these functions.
How am I meant to keep my JS at the bottom of the page and have the JS defined for when it reads that the js function will need to be called?
For example
<html>
<body>
<input type="text" onChange="myfunction()"/>
</body>
<script>
function myfunction(){}
</script>
</html>
I did the code in pseudo code-ishly so you wouldn't focus on any of my syntax errors, but more focus on how I am meant to go about this.
When creating the page, it creates the html properly, but gives me a console error saying "myfunction" is not defined.
If I move the script part above the body this works, but it is recommended to keep it last to increase speed in page load.
Just a note I am not using jquery.
I originally thought this was a duplicate (Javascript at the bottom, function call in the body?) but it doesn't seem to answer my problem.
------------------------update----------------------------
using event listeners
<html>
<body>
<input type="text" id="myawesometext"/>
</body>
<script>
function myfunction(){}
element = document.getElementById('myawesometext');
element.addEventListener("onChange", myfunction, false);
</script>
</html>
Below is my code and it doesn't work. After I rename the "click()" to "click1()" it works, why?
<html>
<head>
<title></title>
<script type="text/javascript">
function click() {
document.getElementById("content").innerHTML = "abc";
}
</script>
</head>
<body>
<button onclick="click()">try it</button><br />
<div id="content"></div>
</body>
</html>
The string values of "onfoo" handler attributes are interpreted as the bodies of handler functions. In other words, it's as if the string value of the attribute is passed to new Function("event", str) with the result being the handler function used.
Additionally, the lexical scope of the function is established as follows, taken from the HTML5 spec (which I consult only in its capacity of a comprehensive description of browser behavior):
Lexical Environment Scope
* Let Scope be the result of NewObjectEnvironment(the element's Document, the global environment).
* If the element has a form owner, let Scope be the result of NewObjectEnvironment(the element's form owner, Scope).
* Let Scope be the result of NewObjectEnvironment(the element's object, Scope).
Thus it's as if there are up to two nested with blocks implicitly wrapped around the code. Thus in this case the effect is that of calling this:
var handler = new Function("event", "with (this) { click(); }");
Because there's a "click" method on the DOM element corresponding to the <button>, that function is what's called by the handler, not the global one established by the script tag. If the "onclick" attribute is set to "window.click();" then the page works properly.
There's already a function called click, responsible for calling the event handler. By declaring another, you override the first, so the event doesn't work anymore.
click() is the inbuilt of javascript's button object.
click() a reserved name for a method used in HTML5 http://www.w3.org/TR/html5/webappapis.html
click is predefined event. You should not use predefined events.
You should perhaps consider using jQuery to refactor your code:
<html>
<head>
<title></title>
</head>
<body>
<button id="button1">try it</button><br />
<div id="content"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function() {
$("#content").html("abc");
});
});
</script>
</body>
</html>