I included four .js libraries in my html file as below:
<script type="text/javascript" src="js/three.min.js" />
<script type="text/javascript" src="js/stats.min.js" />
<script type="text/javascript" src="js/TrackballControls.js" />
<script type="text/javascript" src="js/TubeGeometry.js" />
But when I executed it on Safari, it messaged that:
'can't find Variable THREE'
which is in three.min.js.
Then I noticed that actually only stats.min.js has been loaded. Can anybody tell me why please? Many thanks in advance!
You can't close <script> tags with single tag <script />. For the <script> tag is mandatory the open and close tag:
<script src="....."></script>
Why? Because your code:
<script src="...."/>
<script src="...."/>
Is saying that the first script is empty and it doesn't, it has the remote content.
You can see more :
https://www.w3.org/TR/xhtml1/#C_3
Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).
Related
I am new to JS. What's the point of two separate script sections here?
<html>
<body>
<input id="x" type="text">
<input id="y" type="text">
<input id="add" type="button" value="Add Numbers">
Result: <span id="result" />
<script type="text/javascript" src="lib/calculator.js"></script>
<script>
calculator.init();
</script>
</body>
A script element can either load an external file or contain code, it can't do both. So to do both, at least two script elements are required.
So:
<script src="lib/calculator.js"></script>
loads a file, and
<script>
calculator.init();
</script>
runs some code. If the code in the second element was included as content of the first, like:
<script src="lib/calculator.js">
calculator.init();
</script>
the external file will be loaded but the element content (i.e. calculator.init()) will be ignored.
In the first script tag <script type="text/javascript" src="lib/calculator.js"></script>, you are including the file which contains all code for the calculator.
In order to actually use the calculator functions, you need to (depending on the code) either instantiate it or, as you do here, initialize it. This you're doing in an inline code block, so hence, the <script> calculator.init(); </script>. Note that you could actually put this (and your other own code) in another external file and import that in the same way.
I am trying to do a basic google map link into HTML. When I place the code directly in HTML it works but when I try to link from external JS document I just get a blank page:
HTML Code:
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="twoColumn.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script language="javascript" type=text/javascript src="myfile.js"
</head>
<body>
<div id="container"> </div>
<div id="header"> Header Goes Here</div>
<div id="sidebar"> Left Navigation Goes Here
<div id="map-canvas"></div>
</div>
<div id="content"> <p>Content Goes Here</p></div>
<div id="footer"> Footer Goes Here </div>
</body>
Am I missing something here?
You:
Forgot the > from the second script's start tag
Omitted the end tag from the second script
The consequence of the first isn't serious, the end tag for the head ends up being treated as an invalid attribute and then ends the tag.
The consequence of the second is that the entire rest of the page is parsed (with errors!) as JavaScript instead of being treated as HTML.
This would have been picked up if you had used a validator.
Note that the language attribute was obsoleted when HTML 4 came out in 1998, and the type attribute was made optional (for JavaScript scripts) in HTML 5. Omit both of them, they bloat your code and just give you the chance to break the script with a typo.
Corrected version:
<script src="myfile.js"></script>
<script type="text/javascript" src="myfile.js"></script>
You should always include a closing script tag
EDIT: I also noticed that you missed the "" around text/javascript
I have placed one javascript (hide.js) in my html Page ... Hide function is not working .My scripts are in right order
My code is as per tutorial
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<p id="paragraph ">
This is Paragraph</p>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>
hide.js
$('#paragraph').click(function () {
$('#paragraph').hide();
});
I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
still it is not working ..
i couldnt find any relevant link ..whats wrong ..Please Suggest
Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
In case you must include hide.js first before jquery.js. Change your code to
$( document ).ready(function() {
$('#paragraph').click(function () {
$('#paragraph').hide();
});
}
In this way, your script will work after whole page is loaded.
Or, similarly you can use.
$(function() {
// Your Code
});
order should be, include jquery main file all above.
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
core jQuery file must be include before any other plugin as they may use core jquery methods internally.
You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.
You need to remove the space from your id attribute.
Order of script - hide.js is using jQuery so it has to be included after jquery.js
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined
your id has space.remove it and try again
<p id="paragraph ">This is Paragraph</p>
it should be like this
<p id="paragraph">This is Paragraph</p>
I have discovered a very strange thing which probably could be the cause. It should certainly help you.
In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.
Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.
Environment: Chrome latest Version 44.0.2403.130 m
I'm using Prettify.JS to display some code on a Web site I'm developing. I seem to be having some problems with script tags, especially 'non-linking' ones:
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
This code displays the following (notice the entire script tag is red):
However, when I do this little hack below (adding some invisible html before closing the opening script tag):
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
It seems to display Ok:
The problem is when I add multiple non-linked script tag blocks, The problem comes up again. So the following code:
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
Shows as:
I looked through the Prettify.JS Source Code and on line 1211 I see the following:
['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
which I believe is part of the lexer.
I'm not a Regex Ninja so I would appreciate any assistance on how I could tweak this so that Prettify.JS can accommodate non-linking script tags with no attributes.
Thanks in advance.
An HTML example shows this working fine, so I suspect your problem relates to prettify not recognizing the content as HTML and so using the wrong language handler. Without seeing how you're invoking prettify, it's hard to say.
I looked through the Prettify.JS Source Code and on line 1211 I see the following:
['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
which I believe is part of the lexer.
You are correct. This is saying that a script elements starts with
<script\b[^>]*>
or the text <script (case-insensitively due to /i at the end) followed by a word break and any number of non > characters followed by a >
Then
([\s\S]*?)
non-greedily matches the minimal number of characters necessary before the close tag. This is in capturing group 1 so this content will be recursively prettified using the type hint lang-js.
Finally
(<\/script\b[^>]*>)
works similarly to the open tag, but is a close tag. It should probably not be in a capturing group, but that shouldn't affect correctness.
I've implemented a simple JQuery.GetJSON method on the click of an <img> tag. The problem is that Internet explorer is throwing exception that methodname is undefined.
Can anybody guide me on this.
HTML:
<div class="itemgenerate">
<img src="/images/generate.png" onclick="sendJSONRequest()" style="cursor: pointer;" />
</div>
<div id="divTarget" class="itemtext">
<p id="pStuff"></p>
</div>
Java Script:
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.1.js" />
<script language="javascript" type="text/javascript">
function sendJSONRequest() {
$.getJSON("/Home/Generate", $('#text1').val(), function (data) {
$('#pStuff').text(data.Stuff);
});
}
</script>
Please if anybody can explain me what is wrong here:
script tags can't be self-closing. You need a closing script tag:
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
Your current syntax means the first script tag won't be closed and its content will be treated as part of the first. Since the first tag has a src attribute, its content will be ignored, so your function won't be defined.
It's not the JQuery way to use onclick= in the tag; one of the main points of using JQuery is to allow you to abstract the script code away from the HTML markup. So you would use something like this instead:
$(document).ready() {
$('#myimage').click(sendJSONRequest);
}