I am just trying to have fun with JS, I am creating a small project trying to implement a new architecture that I di not use before, I was always using js in React apps, or using native JS but not creating an app with it, I was using it to create some animations and handle some changes in my pages, nothing complex).
I want to learn how to create a JS app, implementing a MVC architecture ! I am not following any tutorial, so here is my folder structure :
Here is my index.html :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
And that's my app.js :
import { loadApp } from './MVC/controllers/loadApp';
loadApp();
And that's is my loadApp.js :
const loadApp = () => {
const showUsersOption = document.createElement('button');
const showProductsOption = document.createElement('button');
showUsersOption.createTextNode('Users');
showProductsOption.createTextNode('Products');
const app = document.getElementById('root');
app.appendChild(showUsersOption);
app.appendChild(showProductsOption);
}
export default loadApp;
So I think what I am trying to do is simple, adding two buttons to the root element, But I got this :
app.js:1 Uncaught SyntaxError: Cannot use import statement outside a
module
Based on this comment to the question, I added type module in my script like that :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="app.js"></script>
</body>
</html>
But I got this :
Access to script at
'file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https.
GET file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js
net::ERR_FAILED
Based on the comments in this question here, I have to restart my editor or run npm install, but I am not using node modules or anything, my app is simpler than that.
Any idea ? Any help would be much appreciated.
I must be missing something simple, but can't seem to get the polyfill working for measuring the first input delay on my firebase project.
I have included the minified file as suggested here, and then in the body of my HTML I have run the code as suggested also.
So it looks like:
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
<script>
perfMetrics.onFirstInputDelay((delay, evt) => {
console.log("First Input Delay", delay)
console.log("Event details", evt)
})
</script>
</body>
When I include the console logs, the script runs as expected and console logs the data, but it never sends it to firebase. If I take out the console logs (perfMetrics.onFirstInputDelay()), the script fails with TypeError: n is not a function.
How should I be adding this to my app? Should I be sending the trace to Firebase somehow? I use performance tracing at the moment, but unsure how to send this specific event as it doesn't have a start and stop time.
Is the solution something like the below?
const performance = firebase.performance()
performance.trace(onFirstInputDelay)
So I was doing something silly. I only needed to include the polyfill and let the Firebase SDK handle the onFirstInputDelay event.
So just having this works.
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
</body>
I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.
I am trying to write a very simple HTML page that displays a message generated by a JS file. I am somewhat new to HTML / JS and I am certain there is something pretty simple I am missing, but I cannot for the life of me get the page to read the script. When I load the page, it is completely BLANK without any errors in the inspector.
This is the project folder structure:
-Project (folder)
--templates (folder)
----home.html
--src (folder)
----home.js
--styles (folder)
----home.css
Also, I'm pretty sure that my HTML page SEES the script, because when I remove or rename the script, I get an error in the browser's inspector telling me that it cannot find the script. So it SEES the script, it just is not running it for some reason.
Here is the code...
home.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/home.css"></link>
<script type="type/javascript" src="../src/home.js"></script>
</head>
<body>
<div id="bodytext"></div>
</body>
</html>
home.js:
(function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
})();
Could some generous soul out there please clue me in to what extremely simple mistake I'm making?
Thank You!
Value for type attribute should be text/javascript as follows:
<script type="text/javascript" src="../src/home.js"></script>
Your script is running before the DOM is completely done loading. If you put your <script> tag right before your closing body tag (</body>), it will run after the DOM is loaded, and you will be able to traverse the DOM like normal.
Value for type attribute should be text/javascript as follows
enter code here
ALong with this you will have to change your java script code as follows, so that script gets executed only when page is completely loaded & document object is availabe.
window.onload = function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
};
What worked for me was adding charset="utf-8" to my css link as well as my javascript script (for me, both did not work). Example:
<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8"></link>
<script src="javascript/script.js" charset="utf-8"></script>
I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js