How do I link my HTML with my jQuery? - javascript

Firstly sorry for the post, I'm pretty new to coding, I'll try and keep it short and sweet.
Simply put, when I include my jQuery code inline, I.E. beneath my HTML, it works fine - the element I am trying to animate 'hides' and then 'shows' as it should.
However, when I make my own separate jquery.js file and put the code in there, it fails to render.
I've got the cdn script from google and included that, alongside a script and src to where my file is located inside my project folder, but still no luck.
Inside my project folder I have a 'script.js' folder, and then within that a 'jquery.js' file.
Here's the code:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="script.js/jquery.js"></script>
</head>
<div class="content">
<h2> Hi there</h2>
<h3> Take a look...</h3>
</div>
Here's the jQuery:
<script>
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
</script>
(Upon 'inspecting' the problem in chrome I get an error which says "jquery.js:1 Uncaught SyntaxError: Unexpected token <) - But I can't see where I am mis-using a '<'.
Thanks in advance, and please feel free to tell me if I have left out anything important.

You need to remove the <script> tags from your jquery.js file, those are HTML tags that are used for implementing inline JS, the error you are getting is because those tags are not valid JavaScript. Your JS file should just look like this:
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
As far as folder naming, there's nothing wrong with having a period in your folder name, but as others have suggested it would probably be a good idea to remove the .js part from your folder name even though it's not technically wrong and not what is causing your issue.

Don't call your folder script.js, just call it "script".

Related

How to add jQuery CDN Link in .html?

Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.

Referencing Three.js in HTML

I am using c9.io, an IDE to code and quickly run a site to test your code. I have tried importing this outside of c9, and it still does not work. (I know it isn't a script error related to three.js itself.) In my HTML, I have this snippet:
<body>
<script src='three.min.js'></script>
<script src='scene1.js'></script>
</body>
I require the THREE namespace in my scene1 JavaScript like this:
import THREE from "three.min.js";
Is this all correct? Someone has tested this code, and said it worked. I have no folders in my hierarchy, just the three.min.js script, the scene1.js script, and my HTML script. Can anyone spot my error out?
Putting the script in the header works just fine, despite every tutorial and the three.js docs saying it should be in the body.
you can add three.js in html by:
search cdnjs threejs.
click the cdnjs website.
select latest threejs version from dropdown list with asset type javascript.
copy any one of the urls and use it in <script src="that url"></script>for e.g:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js" integrity="sha512-6p9lGA4Cm89KiwN1CixiOVQU2H9e13LeYoN6/Hj/qoUhtrMW5vNiqQz9Z96Z7/I8u89ghL6SPBz9na5HFVzF3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Using JQuery 1st Time

I'm referencing it as it says on w3schools and this website
<head>
<script>
src = 'C:\path...\jquery-1.11.3.js';
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
I compile and open on chrome but when I click any of those 3 messages they don't disappear =P
External scripts are loaded with the src attribute, like this
<script src='jquery-1.11.3.js'></script>
The path to the file should be referenced using paths relative to the root of your application, not the map structure of your system.
Put the src tag in the script tag:
<script scr="C:\path...\jquery-1.11.3.js">
P.S. Always use double qoutes!
P.P.S. If you still can't figure it out, go to the console and look for any errors.
Also: prepare to get very familiar with the "Developer" tab in your browser ... particularly the "JavaScript console." When a JS program encounters any sort of error, the browser's usual response is to "simply stop ... silently." And, if there's any sort of syntax-error, to "silently" issue a warning or error message to the JavaScript console (which ordinary users never see).
Any of these things can produce the result that you now see, namely: "nothing happens."
It can be quite frustrating, really . . .
The problem was in the path, not sure if any of the answers above because what I did was copy paste what they had and tried it without my messy code, and it worked. Then I linked the online Jquery library as oppose to linking what I had in the folder and it worked, then I fixed the path I had. Maybe it was the quotes, not sure now. Thanks anyways. (I wasn't getting errors below in the debugger box =P)

How to include an external javascript file when using ExtJs?

I'm using ExtJs 4.2.2 and included all necessary js and css files, and my codes work just fine, ONLY IF I write my code into script tags within my html file. When I try to put these code into another file with .js extension and include it between head tags properly, it returns nothing. I'm sure I've included my js file properly because when I fill it with standard js codes, I get results. But with ExtJS syntax, the same code which return results within script tags, returns nothing. How? Do I miss something?
The following two are equivalent. If one works, the others work, too, regardless of what js code you use:
(Ex 1.)
<html><head>
<script>//your js code here</script>
</head><body>
</body></html>
and
(Ex 2.)
<html><head>
<script src="jscode.js"></script>
</head><body>
</body></html>
where jscode.js contains
// your js code here
Furthermore, the following two are equivalent:
(Ex 3.)
<html><head>
</head><body>
<script>//your js code here</script>
</body></html>
and
(Ex 4.)
<html><head>
</head><body>
<script src="jscode.js"></script>
</body></html>
NOTHING will change in behaviour.
I think (but you didnt post ANY code at all, so it's jsut guessing) that you had Example 3 working, but changed to Example 2. But only 3 and 4 are equivalent! And now you call that ExtJS fault!
You are executing code in an onLoad event or a Load event, perhaps like:
$(window).load(function() {
$('p').css('');
})
Remove this section and use only this in the javascript file and include it in a <Head> section:
$('p').css('');
When you are coding in html, then it execute steps one by one. But when we use a separate file then it executes it slower than HTML code.
I think I can use those technique mentioned on the top.
I am sure it will work.

Cannot add js file using script tag

This seems like a rather dumb question to ask but I would like to resolve this quickly and start working.I have a folder in which my html resides and I have the javascript files in a seperate folder called js.I have tried to add the script like this:
<script type="text/javascript" src="js/gmaps.js">
and I have also tried like this:
<script type="text/javascript" src="./js/gmaps.js">
I have even tried like this:
<script type="text/javascript" src="/js/gmaps.js">
As far as I understand either of the first two should work:
/ root folder
./ current folder
../one folder up
The paths of the files are
/home/anr/Desktop/maps/server/client/js/gmaps.js
/home/anr/Desktop/maps/server/client/google_maps.html
UPDATE:
The js file has window.onload and it also creates another script tag programmatically and adds it to the dom,after moving to the external script file I find that the map does not load
Looks like you just need to close your script tag with a on the first example, which should work.
Be sure that you are closing your tag as well. Once you have the correct relative path, your syntax should be:
<script type="text/javascript" src="relative_path_here"></script>
The following link could be helpful for setting the relative path in HTML:
Basic HTML - how to set relative path to current folder?
Try this,
<script type="text/javascript" src="js/gmaps.js"></script>
The script tag should be closed
<script type="text/javascript" src="js/gmaps.js"></script> Tag should be closed
I also had a similar problem but not with the path. My problem is the encoding of the html file in my demo, change encoding to ASNI to fix problem.

Categories