There are many questions similar to this but none of them have been able to help me.
I am new to HTML and JS development. I have a simple HTML file that is trying to access a simple Javascript file.
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
document.write("In HTML")
</script>
<script type="text/javascript" src=./asdf.js></script>
</head>
<body>
<div id="map3d" style="height:400px;width:600px;border:1px solid red"></div>
</body>
The Javascript file is named asdf and exists in the same location as the HTML. I have tried the full file path, just the name "asdf.js" and several other options I can't recall.
My .js file reads thusly:
<script>
document.write("In JS")
</script>
The "In JS" doesn't appear. What am I doing wrong?
External scripts do not require <script> and </script>. Write external scripts as if you were writing in between the tags.
In your JS file remove the <script> and </script> tags. They are for using JavaScript embedded within HTML, not for external file.
Related
How do you properly link a JavaScript file to a HTML document?
Secondly, how do you use jQuery within a JavaScript file?
First you need to download JQuery library from http://jquery.com/ then
load the jquery library the following way within your html head tags
then you can test whether the jquery is working by coding your jquery code after the jquery loading script
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
This is how you link a JS file in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag is used to define a client-side script, such as a JavaScript.
type - specify the type of the script
src - script file name and path
To include an external Javascript file you use the <script> tag. The src attribute points to the location of your Javascript file within your web project.
<script src="some.js" type="text/javascript"></script>
JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>
Then in your javascript file you can refer to jQuery either using $ sign or jQuery.
Example:
jQuery.each(arr, function(i) { console.log(i); });
Below you have some VALID html5 example document. The type attribute in script tag is not mandatory in HTML5.
You use jquery by $ charater. Put libraries (like jquery) in <head> tag - but your script put allways at the bottom of document (<body> tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use src attribute in bottom script tag to include you script file instead of putting direct js code like above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div>Im the content</div>
<script>
alert( $('div').text() ); // show message with div content
</script>
</body>
</html>
this is demo code but it will help
<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://reqres.in/api/users/",
data: '$format=json',
dataType: 'json',
success: function (data) {
$.each(data.data,function(d,results){
console.log(data);
$("#apiData").append(
"<tr>"
+"<td>"+results.first_name+"</td>"
+"<td>"+results.last_name+"</td>"
+"<td>"+results.id+"</td>"
+"<td>"+results.email+"</td>"
+"<td>"+results.bentrust+"</td>"
+"</tr>" )
})
}
});
});
</script>
</head>
<body>
<table id="apiTable">
<thead>
<tr>
<th>Id</th>
<br>
<th>Email</th>
<br>
<th>Firstname</th>
<br>
<th>Lastname</th>
</tr>
</thead>
<tbody id="apiData"></tbody>
</body>
</html>
I'm trying to work with three.js and really just html and js in general for the first time. I'm playing around with the example code and I found that even if I import the three.js file from the script tag in my Main.js file, it doesn't work unless I uncomment the script tag currently commented out. Why is this the case? Is there anyway i can run it in just my Main.js file without the first script tag?
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<!-- <script src="node_modules\three\build\three.js"></script> -->
<script src="js/Main.js"></script>
</body>
</html>
please try this option: in your main html page <script type="module" src="js/Main.js"></script> and in your main.js page import other js pages
Try replacing
<script src="node_module/three/build/three.js"></script>
with
<script type="module" src="node_module/three/build/three.module.js"></script>
If you are importing module functions, it should be declared as a module.
(Not sure why type="module" should be part of the tag
<script src="js/Main.js"></script>
unless Main.js is exporting functions to be used outside of it.)
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.
Here´s my html code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"></script>
</head>
<body>
The problem is that it doesn't take the functions from path. what am i doing wrong?
Make sure your index.html and js file folder same disk.
2.and just remove / in src at the beginning.
<script type="text/javascript" src="Users/EdvinHedblom/Library/MobileDocuments
/com~apple~CloudDocs/javascriptfile.js">
</script>
or just save your javascript.js file in folder name called "js"
and link your js file this,
<script type="text/javascript" src="js/avascript.js"></script>
First check whether that js file exists in the given path , if so
try to use like this
src="Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"
If you load a file from the filesystem, then the prefix file:// should be used.
If an absolute path is used, don't forget the additional slash representing the root of the filesystem (in total three slashes).
In your case the HTML should then look like:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="file:///Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"></script>
</head>
<body>
</body>
</html>
I know by include <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script> in HTML file, I can write in jQuery in this file directly. However, I am not working on a single file, thus, too much js code in the html doesn't look good. Can there be some method to use jQuery in js file? So I can put some common function in a standalone js file.
You can put your code in your own js file :
$(function() {
// your own code using the DOM
});
and then include this file just after the jQuery one :
<script src="scripts/jquery-1.10.2.js"></script>
<script src="myownfile.js"></script>
create a folder with the name js and inside put your js file for example main.js
your js file should start like : main.js
$(document).ready(function(){
//code here
});
note that you can use $(document).load(function() too
In your index.html put this in the footer like this : index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<!--============MAIN-CONTAINER============ -->
<section>
</section>
<!--============SIDEBAR=================== -->
<aside>
</aside>
<!--============FOOTER==================== -->
<footer>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
</body>
</html>
for the best performance.
alfernative
if you want to use it as
<script src="scripts/jquery-2.0.0.min.js"></script>
download this:
http://code.jquery.com/jquery-2.0.0.min.js
and put it into a new folder with the name scripts and replace
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
with
<script src="scripts/jquery-2.0.0.min.js"></script>
in your footer like this:
<footer>
<script src="scripts/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
Of course you can use an external .js file, just add the required scripts files and their references onto your page plus add the external .js reference along with them.
//references in mail file
<script src="../Scripts/jquery-1.7.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../Scripts/text.js" type="text/javascript"></script>
//External test.js file
$(document).ready(function () {
//your functions here
}); // Document Ready Closed
Just keep that tag for jquery and go ahead and make your own JS file with jquery code in it and include that too in the html page, It will work