How to reference JS in an html file - javascript

I have been trying to reference my JS in my html file for a while now. I have tried many different methods that people have told me and none of them have worked. Here is what I have at the moment. <script src="script.js"></script> Yes, both files are in the same folder along with my style.css file. The reference I have for the style.css file works. I used <link rel="stylesheet" href="style.css" />
Can someone please help me fix my JS reference?

If its doesn't work check console for any problem Or check directory of script src!

someways javascript is disable on your web browser . check it and enable .

You should try:
<script src="/script.js"></script>
Some web servers might want that leading slash, while others don't need it.

Related

How to address error "Did not load script at 'script name' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given

I have a fairly simple Angular 1.x app that was working fine until i upgraded to Safari 11. Now, it doesn't work because almost all of the js files are blocked.
The same was true for CSS files, but removing the "rel" attribute and adding type="text/css" fixed the CSS issues.
For the JS files, I've made sure to add type="text/javascript" to the script tags. I also just tried adding ./ to the beginning of the src's for giggles and they still won't load.
Does anyone know how to fix this?
Thanks,
Wayne
I want to just delete the question but I hope maybe this answer will still be helpful to someone.
So, my problem was actually that I had a bad clone of my project and it was missing files!
However, for anyone having the same issue:
ensuring that type="text/css" for stylesheets and type="text/javascript" did fix the issue. (for the files that actually existed)
Please make sure that a response header with the name X-Content-Type or X-Content-Type-Optionas has the text/javascript value instead of nosniff.
It is simple to make a workaround locally using Charles Proxy Rewrite tool

Serving static JavaScript in Node.js

I'm trying to serve my bootstrap.min.js to the page. But for some reason it isn't working. But the bootstrap.min.css works perfectly fine. What did I do wrong?
In the picture you can see my structure and part of my code. There isn't much going on really. I'm trying to serve the JavaScript like this:
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
I do the same for the CSS and it works.
So there are a few comments and answers that led to the solution of my problem.
Reading #Josh-Beam's reaction I started to inspect the page finding that I had to include jquery.min.js before bootstrap.min.js like #Daniel said.
After that I got an error saying bootstrap needed popper.js to be able to run.
I included this popper.js because the other ones gave me an Unexpected token error. I placed popper.js after jquery.js
It runs perfectly fine now. My final code looked like this:
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
Use /js/bootstrap.min.js instead of ../js/bootstrap.min.js. And declare your middleware this way:
app.use(express.static(path.resolve(__dirname, 'public')));

how to include reference in JSFIDDLE

Bit of a beginner at using JSFiddle...trying to recreate an issue in my code. Unsure how to include the correct reference though. For My code I am using:
<link href="/jquery-ui-1.10.3.custom/css/start/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
<script src="/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
So my Q being how do I include these files in JSFiddle. Cant seem to find them from the drop down?
Thanks again
Use the external resource part. JSFiddle automatically identifies it as JS or CSS based on the extension:
Note: This will only work if the files are publicly available online. If they're only on your local machine, this feature won't work for you.
If you wanna upload your local file, you can use Gists and put your code in it. Then you can use RawGit to get the working URL and add it there, as usual.

Javascript File Not Found

I am getting a random error when I attempt to link a javascript file to my web page. It has been a while since I have done any web development. However, I have checked old code and the methods are identical. I am attempting to use jquery for the first time and am not sure if that is effecting the results.
Here is the HTML header:
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="Styles/layoutStyles.css" type="text/css">
<meta content="text/html; charset=UTF-8">
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
<script src=”CommonMethods.js” type="text/javascript"></script>
<title>Insert title here</title>
</head>
The "CommonMethods.js" file is the file I am attempting to use. It was initially in a lower directory then the HTML file. However, I moved it to the same directory for testing purposes.
This is the error I get:
GET file:///D:/Users/Thomas.Thomas-TOWER/Dropbox/Workspaces/Eclipse_Web_Develop…nder/WebContent/%C3%A2%E2%82%AC%C2%9DCommonMethods.js%C3%A2%E2%82%AC%C2%9D net::ERR_FILE_NOT_FOUND
I am not sure where the %C3%A2%...ect. symbols came from. I am almost wondering if there is something wrong with the way I defined the charset.
Any suggestions?
I should also mention I am using Eclipse for this project.
You're using smart quotes. Open the file in a real IDE (Netbeans, Eclipse, ShiftEdit, Coda, etc.) and replace them.
Also it's generally good practice to "root" script/style urls. (I.E. "/CommonMethods.js")
On any larger project relative urls can be problematic as you're not always at the root.
Another tip would be protocol-less URLs for 3rd party scripts (I.E. //ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js)
All modern browsers support this and it saves you headache from insecure content being run on a secure page
Also as of HTML5 type="text/javascript" is not longer required on script tags.
Also if you are using Visual Studio, Please remember to set Copy to Output Directory to Either Copy Always or Copy if Newer.
Your quote marks are fancy microsoft word quotes. Replace them with regular quotes and it should work. You should be able to visually see it above on the src of both scripts and the type of the first.
As a general rule, keep Microsoft Office away from your sourcecode files.

CDN / and or Hosting js and css files on a server

so id like to link a refernce to a couple js files if possible, but im not sure i could go about doing this so i can use it
<script type=text/javascript src=http://mylinkedjs></script>
and call i from my jquery.
Anyone know how this is possible?
Let me try to rephrase your question.
I want to include some JavaScript files from another server on my page, and call functions from those files in my own jQuery code. Is this possible?
That’s certainly possible. Once you’ve included a JavaScript file on your web page (like you did in the question), the global variables it creates are accessible to any other JavaScript running on that page, regardless of which server the JavaScript file was loaded from.
This is often how jQuery itself is included on pages: by linking to a copy of jQuery on a big CDN, e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
See http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
<script type="text/javascript" src="http://wherever.com/linked.js">

Categories

Resources