I'm trying to get Jasmine to work on my website. This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.1.3</title>
<link rel="stylesheet" type="text/css" href="/Content/css/jasmine.css" />
<script src="/Scripts/UnitTesting/boot.js"></script>
<script src="/Scripts/UnitTesting/jasmine-html.js"></script>
<script src="/Scripts/UnitTesting/jasmine.js"></script>
<!-- include source files here... -->
<!-- include spec files here... -->
<script src="/Scripts/UnitTesting/HelloWorldSpec.js"></script>
</head>
<body>
</body>
</html>
And HelloWorldSpec.js:
function helloWorld() {
return "Hello world!";
}
describe("Hello world", function () {
it("says hello", function () {
expect(helloWorld()).toEqual("Hello world!");
});
});
When I load this page, I get:
ReferenceError: jasmineRequire is not defined
ReferenceError: describe is not defined
I thought I got the reference to the JS files wrong. But when I look at the page source, and click on one of the js links, for example, "/Scripts/UnitTesting/boot.js", I see the source code, so it appears the files are loaded succesfully. What's going wrong here?
The boot.js file should be loaded after jasmine.js and jasmine-html.js Otherwise what would it boot? The correct order that you should include the files is:
jasmine.js
jasmine-html.js
boot.js
http://jasmine.github.io/2.0/boot.html
Starting with version 2.0, this file “boots” Jasmine, performing all of the necessary initialization before executing the loaded environment and all of a project’s specs. This file should be loaded after jasmine.js and jasmine_html.js, but before any project source files or spec files are loaded. Thus this file can also be used to customize Jasmine for a project.
Related
I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
When I load the library from an url, my code works as intended but when I try to load the same library from my local drive it spits out the error:
Uncaught ReferenceError: quat is not defined
at main (main.js:3)
at onload (index.html?_ijt=h48f9s7rceh7l34tfquh6ab8n5:7)
main # main.js:3
onload # index.html?_ijt=h48f9s7rceh7l34tfquh6ab8n5:7
What am I doing wrong in second case?
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="main()">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>-->
<script src="Libraries/gl-matrix.js"></script>
<script src="main.js"></script>
</body>
</html>
//main.js
function main()
{
let x = quat.create();
console.log(x);
}
Your main.js file is loading before the main plugin script loading change the order like this.
<script src="Libraries/gl-matrix.js"></script>
<script src="main.js"></script>
first, please try changing the order of your <script> tags. Try loading the gl-matrix.js file first. Additionally you should make sure to provide either an absolute path to your local gl-matrix.js file or a path relative to the location of the file your <body>tags are located in.
Best Regards,
Bachkippe
How do you load an external library so that it is available all over the project?Say for example I have the below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../public/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome core CSS -->
<link href="../public/css/font-awesome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../public/css/style.css" rel="stylesheet">
</head>
<body>
<p>This is a test</p>
<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../jsLib/bootstrap.js"></script>
</body>
</html>
So this includes the jQuery, Bootstrap, font-awesome and my personal stylesheet as you can see.
Question: What if someone goes to another page in my site for instance: /profileSettings.html
Will I have to load all the libraries again?
Sorry if this is a simple question but I am completely new to front-end development.
Thanks in advance
As your code grows in size, you'll start using more sophisticated frameworks that may use something along the line of an MVC setup. Some of these frameworks allow you to define multiple "views"(think of them as HTML files for now) that are called from a single HTML file(say the index file).
For those aware of AngularJS, i'm referring to writing Angular UI views and the <ui-view> tag.
This will allow you to have your dependencies in a single file, and the other pages just load from this page.
More importantly.
I'm surprised noone has mentioned the use of require-js or other loaders.
It's particularly useful in cases where you have multiple JS dependencies, and multiple controllers in javascript.
Definitely check out loaders such as require-js
Each page is completely independant of every other page.
If you want a script to run on any given page, it has to be explicitly loaded into that page.
Yes. U have to include the required lib in each file if it is normal file without any framework.
You have to include the scriipt in every page because even thought it is a website, every page works seperately from another. All you need is a <script></script> tag.
Yes, if you look each page as separate page. You need to include it in every page.
But if you have a master page, then we can inherit the same from master page so, no need to add the Codes/Script again.
A cool option.
Load one JavaScript file (JS File) for every page. Then load all the JS File using that JS File as you like.
Example
var Device = {
Device_Type: 'Desktop',
//Scripts to be loaded in master page
Common_Scripts: [
'/SiteAssets/Bar.js',
],
//CSS to be loaded in master page
Common_CSS: [
'/SiteAssets/nav.css',
],
//to get device type
Get_Device_Type: function () {
var Getdevice = detect.parse(navigator.userAgent);
if (Getdevice.device.type != null) {
Device.Device_Type = Getdevice.device.type;
Device.Process_Device_Files(Device.Device_Type);
Device.Process_Common_Files();
Device.Process_Common_Scripts();
} else {
console.log("Detected Device type :" + Device.Device_Type)
}
},
//to load device based css files
Process_Device_Files: function (File_Type) {
File_Type = File_Type.toLowerCase();
$('head').append(
'<link rel="stylesheet" title="' + File_Type + '" href="announcement.css">'
);
},
//To load css files to be loaded in master page
Process_Common_Files: function () {
_.each(Device.Common_CSS, function (eachfile) {
Common.appendfile("css", eachfile);
});
},
//To remove previously loaded device files
Remove_Device_Files: function () {
$('link[title="tab"]').remove();
$('link[title="Mobile"]').remove();
$('link[title="desktop"]').remove();
},
//To load scripts to be loaded in master page
Process_Common_Scripts: function () {
_.each(Device.Common_Scripts, function (eachfile) {
Common.appendfile("script", eachfile);
});
},
}
$(document).ready(function () {
console.log('Render device based files')
Device.Remove_Device_Files();
Device.Get_Device_Type();
});
Usage
(Copy the Above code after Example until usage and paste it into a notepad and save it as device.js. Then include to the page. Then add the necessary JS to this codes. Sample files are already in the codes)
// Dependencies
https://github.com/darcyclarke/Detect.js?files=1
I have a Scala-Spray application/project and I'm trying to serve an HTML page when I select a certain route.
In this HTML page, I need to "include" some files from my path, but I'm missing something since I can't load them properly, as in this example (js file, but it could be an image as well).
Here's the code I wrote to "load" a javascript file in my html page:
path("myPath") {
respondWithMediaType(`text/html` ) {
complete {
var html =
"""
<html>
<head>
<script type="text/javascript" src="file:///home/myUser/Desktop/myFile.js"></script>
<script type="text/javascript">
$(function() {
...
});
</script>
</head>
How can I refer to my "local" files in order to load them in the HTML page?
What Am I missing?
Thanks in advance
FF
I am using ExpressJS. My scripts or CSS will not load.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Customer Info</title>
<link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script>
<script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/javascripts/testing.js"></script>
</head>
<body>
//body contents
</body>
</html>
I know the problem is not with the location. When I render this EJS view in express none of the scripts are loading. I can not understand why it would work for an almost identical view, but not this one. Any ideas?
Step 1
In your node.js file locate the part where you configure the express.
It would be like.
var express = require('express')
, app = express();
app.configure(function() {
//configure the express codes go here
}
in that check out the line of code where you configure the folder which serves the static files. like images,css, and js. I would be like.
app.use(express.static(__dirname + '/public'));
here in the above case public should be exactly the name of the parent folder which holds the stylesheets and javascripts folder that you mentioned in the above html.
like
--app.js
--package.json
--views/
--node_modules/
--public/
--stylesheets/
--testing.css
--javascripts/
--jquery-1.9.1.js
--jquery-ui-1.10.2.custom.js
--testing.js
Step 2
If the above is configured correctly then you can make sure
app.use(express.static(__dirname + '/public'));
in config comes ahead of
app.use(app.router);
so that you can make assure that your line is not ignored by a 404 route handler you written in the router.
Step 3
You can inspect the rendered page with Firebug or Chrome inspector and check in the networks tab what was the response you received for the js and css files you have mentioned.
As per you question it should be 404 file not found and if its something else you should update it in the question.
Step 4
If you still cant fix the issue then you have to update the question with the node.js codes you are using. So that we could look into it.
i believe it is that "/" in start of every src line which is not making it load. for example .. use them this way
<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script>
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/testing.js"></script>
well, these scripts and css files are in their respective folders and to reference to them, you just have to start the source from its name directly, e-g src="folder/script.css"
This was if folders are one level above from html file. for example
your index.html file is in folder1
your style.css file is in folder1 >> css
your script.js file is in folder1 >> scripts
then for this level, above suggestion will 100% work. If other types of levels are there, e-g
index.html is in folder1 >> folder2 >> index.html
style.css is in folder1 >> css
script.js is in folder1 >> js
then your src should look like
<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script>
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./javascripts/testing.js"></script>
please note a "." dot in start. It means the code will reference the file from one folder behind. if the file is 2 folders behind, then use it two times, e-g ././folder1/css
hope that helps
You have to set expressJS to to use static links linking your assets or public folder that contain js and css folders.
express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 }
Then use dots at the beginning of href links or simply add server url instead. e.g. :
<link rel="stylesheet" href="../css/test.css" type="text/css" >