How can I include my JavaScript file into an HTML page? - javascript

I need to inculde my JavaScript file in django. I know how to include CSS files. I'm doing it this way:
<link rel="stylesheet" href="{% static 'demo/style.css' %}"/>
How can I include my JavaScript file?

There are two ways to do this (inline scripts and external scripts):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// your js code here
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
You are probably interested in this one:
<script src="your-code-file.js"></script>

I know how to include files of CSS. […] How can I include my javascript file?
One obvious answer is “Manage it the same way as other static files. Then include it with a script element, the same way you'd do any JavaScript file”.
If you've tried that, or other things, please edit your question to say what you tried and what happened instead.

Related

Bundle HTML, JS, and CSS into one index.html file

Okay so quick overview, I'm using a C# console application to transform four XML files into a HTML document. This document will need to be shared around to a select few people (it isn't being hosted/isn't a web app, just a generated html file). Is there a way to bundle this one file with its javascript file and css file? Currently I just have them stored on the work file system and reference them directly in the html, which is fine for now, but ideally they would be packaged in some capacity.
From looking around, it seems webpack might be what I'm after, but this seems like such a simple problem that it feels like I'm overlooking something, and anything I search for seems to trip the algorithm with buzz words leading to bloated searches.
TLDR: I have a HTML doc, I want to share that doc without physically passing that person the CSS and JS file, nor do I want to host it on a web app. How can I package that file, in such a way, that when someone else opens it, they will see and be able to interact with the file as intended with the CSS and JS.
Instead of referencing your CSS and JS files, do the following:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/*Your CSS code here*/
</style>
<body>
<script>
//Your JS code here
</script>
</body>
</html>
I didn't understand your question, but if you want to merge the CSS and JS into the HTML, yes ofcourse it's possible.
To add CSS into HTML, you need to use , and to add JS you need to use
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXAMPLE</title>
</head>
<body>
<p> test </p>
</body>
<style>
p {
color: violet
}
</style>
<script>
console.log('test complete');
</script>
</html>

How to know if javascript is suppose to be in the <head> or at bottom of the html? [duplicate]

This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 3 years ago.
I have a <head> full of .css, .js and metadata. But there is just one script that will not run properly if it is put in the <head> of the html. It will only work if it is at the end of the file.
What I would like to know is, if there are any documentation regarding this or a special type of rules I should follow as a beginner web designer.
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">
<script src="js/script.js"></script>
<script src="js/scipt2.js"></script>
</head>
<body>
<----------HTML---------->
</body>
<script src="js/secret.js"></script>
</html>
The modern way to solve this issue is to use the defer attribute on the script tag. Put all your tags in the <head>
From MDN:
This Boolean attribute is set to indicate to a browser that the script
is meant to be executed after the document has been parsed, but before
firing DOMContentLoaded.
So this:
<script src="js/secret.js"></script>
becomes this:
<script defer src="js/secret.js"></script>
But the tag now goes into the <head>.

Include header in multiple htm files

I am creating a nodeJs application in which I am serving html files on request. I have started working with Html recently. I want to create multiple html files but want to include the similar header.html in those all multiple html file. I have read different articles such as:
Make header and footer files to be included in multiple html pages. Also I have tried to use Html5 import statement but nothing is working. Is there any other way to do this with Html5 or with javascript or jquery. my code is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
<body>
<div id="frontpage"/>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
whereas my header.html is:
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/mycssfile.css"/>
<title>My application</title>
But it is not working! is there any way to make it working?
The error I am getting is :
GET http://localhost:3000/header.html 404 (Not Found)

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Categories