I know that HTML is read line by line. When you link multiple css files like a normalize file and a stylesheet file the stylesheet file should be linked after the normalize file because of CSS importance specificity and source order. It appears that this doesnt affect JavaScript files that are linked. Can I link my JavaScript files in any order?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Musical Playlist</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>My Music Playlist</h1>
<div id="listDiv">
</div>
<script src = "js/helpers.js"></script>
<script src = "js/playlist.js"></script>
</body>
</html>
If you’re planning on using any frameworks for JavaScript, make sure it’s linked prior to your main JavaScript files. Each JavaScript link is read sequentially, so if you try to run your main JavaScript file that contains a framework function before you link the framework, it’s not gonna work.
Other than that, if your JavaScript files are simply filled with functions then it doesn’t matter what order you link them in. Unless one of your JavaScript files runs and executed when the website loads that should be run first.
In some cases you can swap order without issues, however like mentioned if you'd use a framework/tool/... that would need to be available for the rest of your code to run it should be included earlier.
This is also why some scripts want to included in the <head> of your page and not at the end of the <body>, otherwise they would not be availble when they are needed.
The same goes for dependencies in the JS files, let's say that I have a file menu.js which I supply with a config variable from config.js I would have to include config.js before menu.js to prevent issues and undefined variables.
Related
I just started JavaScript. I wrote some code with javascript using the library: Three.js, now I wanted to do the Backend with Python. Therefore i started using Flask.
So I have my index.html in the templates directory, inside my index.html i call my script.js like this:
<script type="module" src="/static/script.js"></script>
In my script.js I import three.js in the beginning like this:
import "/three.js"
The Three.js file is in the same static folder. But somehow the import doesnt work when i use Flask.
First of all, the 'import' statement hasn't yet widely supported by browsers, so if you really want to use it, you have to use a module bundler e.g. webpack, broswerify, to wrap all files into one big js file. However, if you are not familiar with those tools, to be honest, you have to spend many time to learn how to use them.
So I recommend you to keep things simple. For example, you can first make a copy of the library's source code and save it to your project's static folder, so that it can be served publicly. Second, you can create a HTML file, with following template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="/static/three.js"></script>
<script src="/static/script.js">
</body>
</html>
P.S. this example is from Three.js offical document, with a little modification.
Since all scripts in a HTML share a same global environment, after the first <script> tag is loaded, the code in the next <script> tag can access three.js's global variable that is loaded before!
flask is mirco framework, so you need to follow the documentation instruction on using static files.
have a look on this post
where to keep js files in Flask applications?
I have an AngularJS app that is a Single page application. So as far as I know, all the script files are loaded at the beginning of execution and are not shared across pages (as there is only one page).
In development, using gulp tasks, I inject a <script> tag for each file (about 70-80 in total) so that I can debug and easily test.
But for production, I decided to use gulp-minify to concatenate and minify all of my .js files into a script.min.js file and do the same for my .css files. This way, I only have one <script> tag and one <link> tag for my code and stylesheets.
My index.html takes the form:
<html>
<head>
<link rel="stylesheet" href="dist/styles.min.css">
<script src="dist/scripts.min.js"></script>
</head>
<body>
<!-- Body -->
</body>
</html>
My question is:
Provided that this is a single page app, and these large minified files are loaded at the beginning anyway...would it make more sense to use a gulp tool to essentially insert the contents of these files into a single inline <style> and <script> tag? I have seen this on websites such as Gmail when you click view source. Perhaps this is to hide their implementation, but I was just curious, would this positively or negatively impact site performance? What are the advantages/disadvantages?
NOTE: I know these are only two files, so the overhead for 2 HTTP requests probably is not that great, but conceptually, I would like to know, with the new age of single page applications, and tools such as gulp-minify, etc, what is best practice, and let's say I now have 70 minified files, that concatenated 400 .js files, what would be best practice to ship this code (in production)?
NOTE: All of my individual files (about 70) are in the form of IIFEs, so I am not worried about variable name collisions in either the inline script or the concatenated/minified scripts.min.js file
Ultimately, I would transform my index.html to the following format:
<html>
<head>
<style>
/* Contents of style.min.css */
</style>
<script type='text/javascript'>
// Contents of script.min.js
</script>
</head>
<body>
<!-- Body -->
</body>
</html>
I am attempting to use a javascript chessboard here: http://chessboardjs.com/ . Unfortunately, I don't know javascript or CSS, and am rusty in HTML, so I don't understand the documentation, even though this seems to be a standard javascript chessboard.
How exactly does one install and use this package in order to render a chessboard? The "examples" are all snippets of HTML or javascript, useless to me without being embedded in a working web page. And the source to sample web pages do not work when copied to my home directory. For example, the web page http://chessboardjs.com/examples/1000 here purports to render and empty board, and does on their server, but when I copy the source to my local directory, only a blank page renders. The source of that page does not make sense to me anyway, for example, it refers to files "js/chessboard.js" and "js/json3.min.js" , neither of which are in the distribution. (Nor does the render work when "chessboard.js" is replaced with the name of the javascript file in the distribution).
I assume the issue has something to do with where img files are searched for, and where files are stored. And presumably these are so obvious to javascript experts that it's all implicit in this package and aren't ever explained in the documentation.
So, what I would like is a file foo.html that, when copied to my local machine, will render a chessboard using the chessboard.js source.
Create a new text file, and paste this inside:
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board1 = ChessBoard('board1', 'start');
</script>
</body>
</html>
Then save it with the .html or .htm extension.
Next, download their distributable from their download page. And unzip the folder.
Next, put your HTML file in the same folder as the js, img, and css folders from the unzipped distributable.
Double click/Run the HTML file. The URL should say file:///C:/path/to/the/file.html.
You should see
I'm building out error pages (404/503) which need to be standalone html files, my server-side is nodejs, but these files will be hosted directly in nginx. I'm trying to automatically embed a stylesheet at the top of a html document and was wondering whether there are any tools for this purpose. Searching on stack overflow and google keeps returning tools to inline css for use in emails, but that is not what I want.
I would like to start out with
before.css
.body { color: black }
before.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<link rel="stylesheet" href="before.css">
</head>
<body>
<p>Here be the answer</p>
</body>
</html>
Which once the process is complete I would end up with
after.html
<!DOCTYPE html>
<html>
<head>
<title>A Question</title>
<style>.body { color: black }</style>
</head>
<body>
<p>Here be the answer</p>
</body>
</html>
The ideal solution would be a gulp plugin or an idea of how to write one.
I can write this in JS if needed. Also I'm already using EJS and Stylus to derive the original before files.
Many thanks
As many commented, you're trying to find a solution to a very complex problem and there are probably many easy to use workarounds for this. But if you really want to do this then here are a few approaches I think best:
Server-side Templates:
The best, clean and straightforward method of embedding a stylesheet into HTML is to use a server-side scripting language (as #Mr_Green pointed out). There are many to chose from, and as you're using Node.js, the best library would be EJS or Jade. You can also use PHP, Ruby, Python or whatever you think best, but the idea is same:
First, you need to read the contents from the stylesheet and store it in a variable. In Node.js you can use the fs.readFile() to easily read the contents of the .css file.
Then, you have to output the contents of the .css file (stored in a variable) into your HTML. With EJS for example, if the contents of your CSS file is in a variable styleFile, then you can do <style><%= styleFile %></style> to directly put the contents of your stylesheet into your HTML <style> tag.
Using Ajax with JavaScript:
Another solution would be to use Ajax and get the contents of your stylesheet and then use JavaScript to simply put it inside your <style> tag. For example with some jQuery you could do: $("style").html(// stylesheet contents var);.
Of course you can also use Haml, if that helps.
Hope that answers your question.
I have a javascript file main.js and five html files 1.html,2.html,3.html,4.html,5.html
I want to access the javascript file main.as in all files .
I have used in all of the five but I'm not able to access it . Is it possible to share the .js file among the html files.
Plz reply,
Thanks in advance
Prashant Dubey
Yes, it is entirely possible. That's the point of being able to have a JS file instead of having to embed all the code in the HTML.
yes this is well possible. You merely have to include
<script type="text/javascript" src="main.js"></script>
in your HTML files, preferably near the bottom (for faster rendering). What have you done so far?
Yes. Totally possible.
Just reference it in all of the files e.g. by
<script type="text/javascript" src="Scripts/main.js"></script>
Yes, it is possible.
Probably there is something wrong with the way you access the javascript from your html. Show us the <script ...>...</script> part of your html.
Yes. Are you using the correct path to the main.js file in your html files?
Create separate javascript file with .js extension with all your function in it and
just include this javascript file in the head tag of all the html scripts u wanna use that in.
Like::
<html>
<head>
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
</head>
<body>
<!-- use javascript -->
It can happen both ways..
a single html file can use multiple javascript file
2.a javascript file can be used in several html files.
In first case javascript file load can be conditional based on location, user preferences, time, age group, content restriction.
You can see good example when facebook loads its page. I loads number of javascritps.