When is a javascript code executed? - javascript

Suppose I have this code :
<head>
<script type="text/javascript">
func1();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
func2();
</script>
<script type="text/javascript" src="tabber.js"></script>
</head>
Would func2() be called only after jquery.js is completely loaded? Basically I am trying to make a progress bar in a page with some heavy javascript code. So I want to know how much of the page has loaded.Now I can show this progress in the form of the number of js files that have been completely downloaded. So if func2() is called only after jquery completely loads, I can use that function to slide up the progress bar by some percentage.

JavaScripts in a page will be executed immediately while the page loads into the browser. The exception is when it's told to fire on an event (ie: click, after page load, etc)
If you want to ensure code is run only after the page is loaded you can use:
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
[code to run once page loaded here]
}
</script>
</head>
Note: put your Javascript in tags as well.

None of those would ever be called because they are not in <script> tags.
What you probably want is to load all your scripts that are needed, and then use the window.onload or jQuery's ready event to trigger the functions you want to call.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
$(document).ready(function() {
func1();
func2();
});
</script>
</head>

Related

alert is executing before html loads

Hello my questions is about how a webpage is loaded! Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
alert("Why?");
</script>
</body>
</html>
I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?
Thanks for the help!
Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.
You need to execute your script after the page loads with
<body onload="script();">
An external script will execute before the page loads.
<body onload="script();">
<h1>Waiting</h1>
<script type="text/javascript">
function script() {alert("Why?");}
</script>
</body>
You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>
You can check if the header (the h1 tag) is there and only alert if it is there.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1 id="header">Waiting</h1>
<script type="text/javascript">
var x;
x = setInterval(function(){
if(document.getElementById("header")){
alert("Why?");
clearInterval(x);
}
}, 100);
</script>
</body>
</html>
The simplest workaround code without using JQuery I could write is this. Please check it.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
window.onload = function(){
setTimeout(()=>{
alert("Why?");
},10)
}
</script>
</body>
</html>
The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.
<script src="myScript.js" defer></script>
Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.
The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the complexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().

body on load function not getting called if the script tag is end of the body

the code is somewhat like
<body onload="testFunc();">
<div></div>
<script type="text/javascript" src="/js/test.js"></script>
</body>
and the testFunc is inside test.js
and sometimes its not getting called
The onload attribute fires when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("body loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>body loaded!</h1>
</body>
</html>

EJS File Not Recognizing JavaScript File's Code

I am creating a website, I am using a NodeJS server. In my public folder I have a script named website.js and it has the jQuery code to give a console.log when the h1 is clicked. (Code Below). But when I click on the h1 in the browser it does not work. The file is loaded properly, gives no 404 error and my CSS stylesheet works fine.
Further Testing: I did a simple test to see if it would give back the text when I called the variable (test code below) it responds with: "" (two quotation marks) so it must not be recognizing it.
//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/javascripts/website.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<h1 id="testh1">TEST</h1>
</body>
</html>
You need to load jQuery before your script.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
You need to wait for the DOM to be ready before accessing any elements in it. You can either do it with the following code:
$(document).ready(function() {
$("#testh1").on("click", function(){
console.log("Clicked");
});
});
or by putting your <script>s at the bottom of the <body> instead of in the <head>.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
</body>
You're getting an empty string in your test code because your #testh1 element hasn't been loaded yet.

external js click functions not working in Chrome/Safari

Here's my head tag:
<head>
<!-- link JS here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript' src="../../template/js/jquery.flexslider.js"></script>
<script type='text/javascript' src='../../template/js/preload.js'></script>
<script type='text/javascript' src='../../template/js/responsive-turnkey.js'></script>
</head>
simple eh? So the "responsive-turnkey.js" file is the one that has all the click functions that need to run once the user clicks the necessary DOM elements.
Here is the "responsive-turnkey.js" file:
$(document).ready(function(){
alert("This alert works on page load");
$(".btn").click(function(){
alert("this alert works on .btn clicked");
});
});
The first alert works on page load, but when I click on the element with the class ".btn", the click function doesn't work and the alert does not sound. THIS ONLY WORKS IN FIREFOX.
Does NOT work in: chrome or safari
What have I done wrong?
$.getScript("../../template/js/responsive-turnkey.js", function(){
alert("Script loaded and executed.");
});
I put this in my load function() to read the script in after elements loaded successfully.

Noty (notifier) is not working inside a function

I have a misterious problem with the noty plugin click. When I create a notifier as explained on the site everything works fine, but when I put the same statement into a function which is called at the "onClick" event from a button, it doesn't work. There is no noty-notification coming, no errors, nothing happens if I press the button. When I remove the noty-thing and add a normal "alert" statement everything works fine. Is there something I have missed or is this a bug?
The original code looks like:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
<script>
var noty = noty({text: 'noty - a jquery notification library!'});
</script>
When I put the same statement into following function, noty don't works anymore.
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
klick
...
<script>
function test_function(){
var noty = noty({text: 'noty - a jquery notification library!'});
}
</script>
Even if I change the var noty to var n (or something else) nothing changes, as stated in one stackoverflow question before.
Thanks in advance.
Regards, john.
it would be better if you use something like this:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<script>
$("#element").click(function(){
var n = noty({text: 'noty - a jquery notification library!'});
});
</script>
<a id="element" href="#" onclick="return false;" class="btn">klick</a>
And of course use an "id" on the element you wish to bind to noty. It will work perfectly.
Check out working example here:
JSFiddle

Categories

Resources