How to connect JS to HTML from different folder - javascript

I'm starting on a project using netbeans. I created a Web Page Project and its default .html is called "index". In index.html directory, it has a folder called "WEB-INF". I created a new folder inside of it and call it JavaScripts. Then I created a JS file inside that JavaScripts folder.
Below is my html and JS:
html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="WEB-INF/JavaScripts/index.js"/>
</head>
<body>
</body>
</html>
JS:
document.write("testabc");
Its a very simple JS code but nothing appearing on my browser. How can I properly link JS(from different folder) to HTML? Thanks in advance.

Related

How do I link JS and CSS in a different directory to my HTML file?

My files are in entirely separate folders. I'm attempting to call CSS and JS files from a different path. Example below:
mainDirectory\internal\scripts\main.js
mainDirectory\internal\styles\main.css
mainDirectory\internal\pages\homePage.html -- (main page file)
I want to do this without libraries.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="../folderThree\test.css">
<script src="../folderTwo/test.js" type="text/javascript"></script>
</head>
<body>
<p>Test</p>
</body>
</html>
I was able to determine that I made a syntax mistake here, as I'm used to a different system. Turns out that all I needed ../ and to swap my slashes from back to forward.

Compiling HTML, CSS, and JS, into a single JS file

Is there any decent procedure to compile html, css, and js files into one js file? I've been looking on methods how to load css and html files to js, and they all require requireJS. Is there any webpack plugin, or just a module for this?
I know this is not a decent question, but I've been thinking on not always fetching an external source file (html, css).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blah blah blah</title>
<script src="something.js"></script>
<script>
// 'load' will load everthing to #something
something.load(
// options
)
</script>
</head>
<body>
<div id="something"></div>
</body>
</html>
Finally, thanks to this article, all I need is html-loader. Then I can just add import html from 'some.html'.

How to include an Angular 7 application in an existing html file and website?

I have on one side an existing website, on the other I have an Angular 7 application component.
I'd like to edit my existing someusecase.html and reuse my Angular 7 application like so e.g.
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
What would I need to include in the html for this to work? I'm after e.g. something equivalent to:
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
In other words, is it possible to reuse and activate an Angular 7 Application within a <div> scope inside an existing webpage?
1) Run
ng build
2) got into the dist folder
3) Copy & paste all of the files there, to your original app, except for the index.html file.
4) Open the not-copied index.html file
5) Copy all of the <script> tags in this file, into your someusecase.html file, at the same spot.
6) use your app component selector wherever you want your angular application to be displayed.
Note that this is only informational : in real life, this should be automated, because you would have to do this manipulation on every build.

Implementing MVC architecture using AngularJS in Web application

I implemented AngularJS: MVC structure in my web application.
My project is the following structure.
-Package
|_app
|_build
|_home
|_controllers(HomeCtrl.js)
|_modules(HomeResources.js)
|_views(home.html)
|_module.js
|_bower_components(all javascript libraries are here)
|_app.scripts.json
|_bower.json
|_gulpfile.js
|_index.html
I used gulp to build the project and try to load home's home.html into index.html. After building using gulp, I have app.js inside build folder and load into index.html as follow.
index.html
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>BnLMyanmar</title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<script src="build/vendor.js"></script>
<script src="build/app.js"></script>
</body>
</html>
But contents of home.html are not displayed on the webpage when the application is run.
The full source code can be viewed here .
Why I can't display the contents of home.html at the home page?
Thanks

HTML: How to set up web page head and body with external file references

I am new to HTML and programming and hope someone can help me with this.
I have written the code for the first pages of my website and am now about to upload these to the server for a test.
Therefore I would like to know if the basic structure of my documents is correct and would like to get some comments on the following:
Should I add or change anything regarding my document's head ?
Do I include the external style sheets the right way and at the
right position + is it correct to start the href with "/" here ?
(I read CSS should be included before JS for
better performance.)
Do I include the external JS and jQuery references the right way and
at the right position ?
(I read JS should be included at the end of the body for better performance.)
Notes:
All PHP / HTML pages of my website are saved as separate files in the same folder.
This folder also contains a sub folder "includes" where my stylesheet and functions file are saved.
My HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.myURL.com/" target="_self" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<!-- ... -->
<footer class="footer">
<!-- ... -->
</footer>
<!-- JavaScript -->
<script src="includes/functions.js" type="text/javascript"></script>
</body>
</html>
Many thanks in advance,
Mike
Looks good. Just a couple of minor things:
You should add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to ensure you don't get any MSIE compatibility mode issues.
You may add favicon definitions in the head.
Yes, stylesheets belong in the head. The href depends on where you are storing the css files.
If you want to include a stylesheet in the same folder as your HTML file, use href="styles.css"
If you want to include a stylesheet in another folder, e.g. [css] folder, use href="css/styles.css"
If you have HTML files in various folders and you don't want to rewrite your hrefs all the time for each HTML file, you can start the href with a slash to indicate search should start from the "root" of the server, e.g. href="/css/styles.css"
Move ALL your JS (including jQuery) to the bottom of the page, just before the closing body tag. Unless there's a very strong reason why you need JS to run before the page starts displaying, you should not have JS in the head.
There are a lot of things to learn, but it can be very fun and rewarding. Hope you have an enjoyable programming experience ahead. :)

Categories

Resources