Following this answer example [one of the answer in this question], I made this little reusable function:
/**
* Render the array of html files, to the
* selected container.
* @param {*} pages - array of html file names
* @param {*} container - HTML element name
*/
function render[pages, container] {
const template = document.createElement["template"];
var ajax = new XMLHttpRequest[];
pages.forEach[element => {
// this is the route where the files are stored
ajax.open["GET", `./view/shared/${element}.html`, false];
ajax.send[];
template.innerHTML += ajax.responseText;
}];
document.querySelector[container].append[template.content];
}
export { render };
Which you can use in your index.js
file, like so:
import { render } from "./tools/render.js";
var headerContent = ["siteName", "navbar"];
render[headerContent, "header"];
This is rendering the html files siteName.html
and navbar.html
, into the tag in the root
index.html
file of the site.
NOTE. This function works on localhost, but for whatever reason [which I still have to fix; I'll let you know when I do] it does not work correctly when working on GitHub Pages.
import template from './temlplate.html';
does not work in a browser.
Although some frameworks oblige developers to mix everything, generally web development is easier when the layout, styles and application logic are separated. You layout a page and its component in .html files, style them in .css files and add the logic implemented in many tiny modules each dedicated…
Back to Class 9 page »
Including JavaScript in your page is a fairly simple process.
First, What Is JavaScript?
From the W3C Schools Site:
- JavaScript was designed to add interactivity to HTML pages
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language [means that scripts execute without preliminary compilation]
- Everyone can use JavaScript without purchasing a license
Including the JavaScript
You can include JavaScript in your HTML in two ways:
- Writing the code in your HTML
- Including it as a link to an external file
For the most part, you will include the JavaScript as an external file.
The Script
Tag
The tag is what we use to includes our JavaScript. It's a lot like the
tag you've already been using to include your CSS files.
Here's a very basic snippet of JavaScript using the script tag. This JavaScript is written directly into our HTML page. It will call and alert box as soon as the page loads.
alert["This alert box was called with the onload event"];
When using the script tag, we must always use the attribute name and value of
type="text/javascript"
.
Using the script
tag to include an external JavaScript file
To include an external JavaScript file, we can use the script tag with the attribute src
. You've already used the src
attribute when using images. The value for the src attribute should be the path to your JavaScript file.
This script tag should be included between the tags in your HTML document.
JavaScript Files
JavaScript files are not HTML files or CSS files.- Always end with the js extension
- Only include JavaScript
It's customary to put all JavaScript files in a folder called js on websites, like so:
Simple Demo of Including JavaScript
Here's a very simple demonstration of how to include an external JavaScript file into an HTML page.
- Basic JavaScript Example
Other People's JavaScript
For this class you are not expected to write any actual JavaScript code. Lucky for you, many of people have already written lots of JavaScript and even allow you to use it for free.
JavaScript Frameworks
A Framework is basically a library of code for a certain language. Generally, the framework abstracts common tasks and makes it easier and faster for designers and developers to write their specific code. Frameworks don't really do anything by themselves, they just provide an easier platform for people to build on.
Common JavaScript Frameworks:
- JQuery
- Prototype
- MooTools
- script.aculo.us
Of these frameworks, JQuery is currently the most popular one. It's also the one you're most like to encounter being used as a buzz word.
JavaScript File Sizes
Many JavaScript files can tend to be rather large, which can slow down the load time of your page. Popular frameworks usually offer a "minified" version of their code. You should always use this version in your pages because it will have a smaller file size.
Back to Class 9 page »