External javascript file in html not working - javascript

first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.

remove script tags from helloWorld.js
just
alert("hello");

Related

External link Alternative for JS

hi am trying to create an external link for a java script program i created and i tried using https://www.000webhost.com but they blocked me, so pleases is there any better way i can do this, plus am still a learner in programming,
here is the code i created and i want it to be linked,
document.body.appendChild(document.createElement('script')).src='https://usscript1.000webhostapp.com/example1';
EDIT:
For hosting the JS source file on some external server for testing you can use sites like http://yourjavascript.com
You can search for more alternatives on Google but this one worked well for me :)
Original Answer:
As others pointed out in comments, you can simply put the source url of JavaScript program in src attribute of <script> tag...
<html>
<head>
<script src="https://usscript1.000webhostapp.com/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
Regarding the blocking issue, make sure your src link to the JavaScript file is correct (by opening the link in seperate browser tab or have look at the console in inspect page window for any errors).
You can put the script on the same site and link to it as,
<html>
<head>
<script src="/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
If you are facing issues with putting the file on your site, you can directly put the code of JavaScript program inside <script> tag like this...
<html>
<head>
<script>
...your JS program goes here...
</script>
</head>
<body>...your website's body here...</body>
</html>

Chrome extension options not calling javascript file

I have an options page in my Chrome extension which calls a javascript file. I tried using javascript to save my options but it wasn't working, so I tested it with some very simple code:
options.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="options.js"></script>
</body>
</html>
options.js
$(document).ready(function() {
alert('loaded');
console.log('loaded');
});
Neither the alert nor the console.log seems to be firing when I click options in the Chrome extensions page. This makes me think that the options.html file isn't loading the js file, but it could be that I'm wrong to expect alert and console.log to work like this with extension options.
Any ideas what's going wrong here?
To see the results of any console.log you need to right-click on the options modal window and select "Inspect Element". Any console messages will appear here.
However alert commands appear to be suppressed, or at least I was unable to see any.

Javascript code works in Jsfiddle but not in Local browser

I'm currently working on a portfolio website. And I came into a problem while scripting my java code. I tried to troubleshoot for hours on end but to no avail. Then I just decided to make the simplest code to see if it was just me that was being a total idiot. Here is the code:
$(document).ready(function() {
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hi.</h1>
<p>How are you?</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jtest.js"></script>
</body>
</html>
Any help??? Maybe I'm just linking it to the HTML wrong or something. It might just be a simple solution I'm not figuring out.
Check make sure your browser has JavaScript Engine turned on.
Make sure you include all the files name correctly.
Put scripts inside head tab
Sometimes Internet Explorer disables scripts from running it gives you a warning

How can i get the code of script file?

We are developing a web based application. In this we want to hide a script files from browser's page source. After some research we are planned to push the script files dynamically on browser page load, and also after page loaded we empty the source of the script files.
By using this method we are hide the script files from browser's page source.Is there any other method to get the script files.
Instead of inline javascript you can use external files. Your code will not be in the page you are viewing, but in another file. Of course it's not hidden from the browser.
Example for inline javascript:
<!-- index.html -->
<body>
<script type="text/javascript">
alert("my super secret js!");
</script>
</body>
Example for external file javascript:
<!-- index.html -->
<head>
<script type="text/javascript" src="your_js_file.js"></script>
</head>
/* your_js_file.js */
alert("my super secret js!");
Simple! If you see source like : <script type="text/javascript" src="xyz.js"></script> in the browser's sorce window , then click on it and it will show you your javascript code!

Eliminate render-blocking JavaScript and CSS

I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.
I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com
Can anyone advice me please? I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?!
Your browser freezes page rendering while loading JavaScript
Quick answer: you just have to put your JavaScript src below your content.
Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.
Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.
So do like this:
<html>
<head>
</head>
<body>
My great body content!
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</body>
</html>
Instead of this (which is unfortunately still really common):
<html>
<head>
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</head>
<body>
My great body content!
</body>
</html>
Alternately, just add the async at the end of your script tag.
<script src='' async></script>

Categories