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
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 write me jquery script in html page like this:
<script> function pofileEditable(){
var pFormEditable = $('#profi-form input');
$('#pBtnSave').removeAttr('disabled', '');
$('#pBtnEdit').attr('disabled', 'disabled');
$('#prof-form-anrede').removeAttr('disabled', '');
} </script>
How can I write it in separate file ex like that test.js
and import it?
<script type="text/javascript" src="js/test.js"></script>
I don't wont to use javascript method
var edit = document.getElementById("pBtnEdit");
Best practice is to include your js file at the end of the HTML body tag, like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- your content here -->
<!-- If you want to use JQuery, load it before your js file here -->
<!-- your own js file -->
<script src = 'path/to-your-js-file/your-js-file.js'></script>
</body>
</html>
You just import jquery first and then import your own script:
<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>
I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>
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.