I'm trying to load bootstrap.min.js file.
I have two options.
The first one is to load it from a remote server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
The second one is to load it from my server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In the first case the script will load asynchronously which means the rendering of my page won't be blocked.
In the second case the script will block the rendering of my page. Am I correct?
How will blootstrap.min.js be loaded (async or sync) if I try to do this :
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
And this:
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
I have a hunch that in both cases the rendering won't be blocked. What do you think? Thanks!
If you put the source-loading code at the end of your <body> tag, the rendering won't be blocked, even though the new script tags are appended to the head. That's because most of the rendering is already done when you get to that part.
In newer browsers, you can add an async attribute to the script tag, which will not block rendering. So I suspect loading the file asynchronously via JS will not block rendering either, even if you do it near the top of the file.
Related
I'm trying to get to work a page that says the date with a "index.html" including a javascript file. However, I don't know if I'm missing something here but when testing it, it won't appear in the index.html.
I just want the date to be shown with the code of the js.
Here's the code of the index.html:
<!DOCTYPE html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/date.js"></script>
</head>
<script>
<p id="test1"></p>
</script>
And here's the code of the javascript file:
var isDate = new Date();
document.getElementById("test1").innerHTML = isDate.getDate;
As you can see, I tried puting script tag around the p tag and dindn't work either.
This is really basic javascript but it's like really hard for me to start off in a new language.
Thanks.
try correcting your HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="scripts/date.js"></script>
</head>
<body>
<p id="test1"></p>
</body>
</html>
This is the code your looking for:
<div>
<p id="test1"></p>
</div>
<script>
var isDate = new Date();
document.getElementById("test1").innerHTML = isDate.getDate();
</script>
use the defer attribute like:
<script type="text/javascript" src="scripts/date.js" defer></script>
then it should work just fine.
The reason for this is that putting the script tag in the head will run the script
before the content of the body is parsed so using defer will make the script
run after all the questions have been parsed.
The format for the HTML document is incorrect. Surrounding <p> with <script> doesn't make sense because <script> is for Javascript code whereas you wanted to create HTML elements. You want <p> to be the child of <body> to display the element.
As for using the Date function in JavaScript, here is a related question to get the format correct.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/date.js"></script>
</head>
<body>
<p id="test1"></p>
</body>
<script>
var isDate = new Date();
document.getElementById("test1").innerHTML = isDate.getDate();
</script>
</html>
so console.log will be your new best friend, Throw that into the file and see if your console shows any of the ouput. my guess is that you
Also you did not put the p tag into a body, also dont wrap html elements in script tags.
<!DOCTYPE html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/date.js"></script>
</head>
<body>
<p id="test1"></p>
</body>
</html>
and scripts/date.js
window.onload = function() {
var currentDate = new Date();
var paragraph = document.getElementById("test1");
if (paragraph) {
paragraph.innerHTML = currentDate.getDate();
}
}
I'm busy pumping out some web projects from the Odin Project. Anyway, I'd like to adhere to the software engineering process of taking small steps and testing them. Now, for instance, I'd like to see the output of document.querySelector("body"). It is my understanding that I should place the tag somewhere, I'm not too sure what the best place is. The StackOverflow posts on this topic are quite ambiguous. Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
</body>
<script type="text/javascript" src="createDOM.js"></script>
</html>
createDOM.js:
const body = document.querySelector("body");
console.log(body);
Console:
<body>
<script type="text/javascript" src="createDOM.js"></script>
</body>
Me:
$ ????????
It is the way webengine play with source. Most ( and almost all ) webengine put everything into body that can be ( i.e following the standard ) because body is taken as subroot for DOM structure
Wrapp your script inside the body tag, at the end.
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript" src="createDOM.js"</script>
</body>
</html>
I'm developing an extension for Microsoft Edge and have learned from the docs here https://learn.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension that I can use Javascript for data manipulation.
For some reason though, when I try to modify a DOM element like this:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script type='text/javascript'>
document.getElementsByTagName('P')[0].innerHTML = 'something';
</script>
</body>
</html>
I get the desired result in any HTML / JAVASCRIPT interpreter but when I try to test it out in the extension the DOM manipulation isn't working. The p element isn't populated with 'something'. The manifest.json file is included in the extension folder I'm just not including it here as it's not relevant to the question.
How should I go about this ?
Update:
window.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='window.css'>
</head>
<body>
<div><p></p></div>
<script src="window.js"></script>
</body>
</html>
window.js:
window.onload() {
document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};
You should import the JavaScript function using <script> tag like below:
In myfunction.js file of js folder:
document.getElementsByTagName('p')[0].innerHTML = 'something';
In html file:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script src="js/myfunction.js"></script>
</body>
</html>
I tested it in Edge extension: If we use the JavaScript function directly in the html page then it doesn't work. If we use a link to the js file then it works.
I'm working on a project, and I didn't understand why a call to external script doesn't work.
Then I just did a extremely simple page html which includes a script alert, as you can see below... Can you tell me what's the problem ? I believe the problem is not the code, but what else can it be?
My browser is a recent Chrome, and my OS is Ubuntu.
My HTML file is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
<script type="text/javascript">
alert('Hey');
</script>
Paths starting with / are absolute paths. If the script and the HTML page are in the same directory, the script's path is simply "script.js":
<script type="text/javascript" src="script.js"></script>
<!-- Here --------------------------^ -->
If the file is in the same folder remove the "/" from script.js
<script type="text/javascript" src="script.js"></script>
Also if the js file has the script tags remove them.
If you want the alert when the doc is ready, consider doing something like:
document.addEventListener("DOMContentLoaded", function(event) {
alert('Hey')
});
I think that the script in the file dosen't need this script tag
<script type="text/javascript">
alert('Hey');
</script>
you can make like this
alert('hey');
just that try out and check if the file path in html to the js file is the right one.
Hi you don't need the script tags in the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
alert('Hey');
I have solve this problem by using Visual Studio. Just open the html file in VS and then run this file from here. It will connect your js file to html.
I write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.