Good afternoon/evening everyone
Why in mobile browsers (Chrome Mobile, Kiwi) the external js file is not visible in the html file ?
script.js :
alert('hello from script');
Next I try to include this file in html code with
<script src="script.js">
</script>
(both files are in the same folder)
This code only works on desktop, but doesn't work on mobile browser
I tried to determine the full path with :
output.innerText = location.href;
And then copied it to the src attribute :
<p id="output">
</p>
<script src="content://com.estrongs.files/storage/emulated/0/my_files/other/js/test%20script%20src/script.js">
//output.innerText = location.href;
</script>
Still doesn't work!
I've tried all kinds of ways: './sript.js' and type="text/javascript" also doesn't help
What else can be done ?
<script src="script.js"></script>
<p id="output"></p>
<script>
alert('hello from script');
</script>
Works fine...: https://jsfiddle.net/vm4y0h5L/
The "script" inclusion is just as simple as adding a "src line".
( https://www.w3schools.com/tags/att_script_src.asp )
For more info on alerts, see:
https://www.w3schools.com/jsref/met_win_alert.asp
PS:
Triple check your spelling ...
It's "script".
Thanks for the answer
I figured out what's up
I have installed Termux and local server NodeJS, wrote a simple script
var express = require('express');
var path = require('path');
var app = express();
var folder = '';
app.use('/', express.static(path.join(__dirname, folder)));
app.listen(8080, function ()
{
console.log("Server is running on port 8080.");
});
Now all tags with the attribute work correctly "src=..." (<script src="...">, <img src="...">, <link rel="stylesheet" href="...">)
All you have to do is type in the address bar of your browser:
localhost:8080/path to my .html
Related
I'm new to Javascript,
When I have these two files in one directory in Desktop, It works fine,
But when i put them in the Web Server Directory /var/www/html it doesn't work
I know JS is a client side thing, but if we are building a website these .js files will be in some web server directory and should work while they are placed there
I use apache 2.4 on ubuntu 20.4
Javascript.js code :
/*global document, console */
var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
console.log(myid.value);
mydiv.innerHTML = myid.value;
}
.html code:
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script src="javascript.js">
</script>
</body>
</html>
Let's assume this is your public_html directory /var/www/html and for better code organization create a directory for javascript files as js You can do this for CSS, images and so on. So Your public directory become like this
public_html
js
myjscodehere.js // copy your javascript code to this file.
css
images
index.html
As for the index.html. Set a directory path to your javascript file.
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script type="text/javascript" src="/js/myjscodehere.js"></script>
</body>
</html>
Your javascript files will work on client-side upon sending a get request to your web-server using Chrome, Mozilla and on
Separation of js code gives you many benefits such as caching to your js files and better organization if you are building a larger project it will be a problem to update your code so it is better of putting your js files into dir but it does not mean that you can not run your javascript script code inline. Yes, you can do it as following.
<html>
<head></head>
<body>
<input type="text" id="myid">
<button id="mybtn">click</button>
<div id="mydiv"></div>
<script type="text/javascript">
var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
console.log(myid.value);
mydiv.innerHTML = myid.value;
}
</script>
</body>
</html>
And since javascript code runs on the client-side. You can run it in your windows machine using a web browser and you do not need web-server. The purpose of pushing your js file or the whole project to the web-server is that your clients or people who visit your web site to use your online app in their local machines.
I have a problem loading external files into my index.html. My stylesheet as well as my JS files do not show up at all (Error 404 - Not Found). My directory structure is as follows.
My index.html is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Orders and Customers</title>
<link rel="stylesheet" type="text/css" href="./assets/css/stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script src="./../app/app.js" type="text/javascript"></script>
<script src="./../app/controllers/customer/CustomerController.js"></script>
<script src="./../app/controllers/order/OrderController.js"></script>
<script src="./../app/services/customer/CustomerService.js"></script>
<script src="./../app/services/order/OrderService.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This is what Chrome shows:
My server.js is:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
require('./server/config/mongoose.js');
require('./server/config/routes.js')(app);
app.use(express.static(path.join(__dirname, './views')));
app.listen(8000, function() {
console.log('Listening on Port 8000');
})
Any help is greatly appreciated!
Try this
in server.js
var router = express.Router();
router.use(express.static(path.resolve(__dirname, "../app")));
in index.html
<script src="/app.js" type="text/javascript"></script>
<script src="/controllers/customer/CustomerController.js"></script>
<script src="/controllers/order/OrderController.js"></script>
<script src="/services/customer/CustomerService.js"></script>
<script src="/services/order/OrderService.js"></script>
Router is middle-ware for capture * path.
For example, /service/* matches all requests under service path.
so I changed your code as to handle all resources under "/app" folder. (eg: /app/app.js, etc)
path.resolve changes path from relative to absolute.
it means that you can add another current working directory.
path.resolve(__dirname, "../app") add "/app" from current working directory (views). it parsed from "views/../app" to "/app"
(Reference) Path.resolve
The relative paths
<script src="./../app/app.js" type="text/javascript"></script>
etc, are pointing to the wrong directory.
Use the Network tab in your browser developer tools, to check what exact requests are going out.
If the whole app directory is public (Which, in my opinion, should not be the case), "./../" will refer to the views directory.
Single . refers to the current directory, which in this case is, the one containing your index.html. Double .. refers to the directory above it, which here is views.
Rather than
<script src="./../app/app.js" type="text/javascript"></script>
Try using the full path:
<script src="/app/app.js" type="text/javascript"></script>
<script src="/app/controllers/order/OrderController.js"></script>
Try this
app.use(express.static(path.join(__dirname, 'views')));
and just use
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
Thanks to SeongHyeon, I was able to figure out the solution to my problem. I really appreciate your guys' help. I'd like to elaborate more on this just for my own reference.
When declaring your static path in express, you don't need to reference anything relative to the file that you're trying to import from. Instead, you simply reference the file from the static path that you've declared.
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
Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>
We have an MVC3 application in IIS7: http://mydomain.com/myapplication/
What would be the relative URL in javascript for:
http://mydomain.com/myapplication/mycontroller/myaction
/mycontroller/myaction - goes to http://mydomain.com/mycontroller/myaction
../mycontroller/myaction - goes up one level (in this case also to http://mydomain.com/mycontroller/myaction)
mycontroller/myaction - goes to http://mydomain.com/myapplication/mycontroller/myaction when running as dev on localhost but on server goes to http://mydomain.com/mycontroller/myaction
./mycontroller/myaction - was what I figured would be right, but that didn't work either!
If you are developing in ASP.NET MVC you can set root var on server side like this:
<script language="javascript" type="text/javascript">
var root = '<%= this.Request.ApplicationPath%>';
</script>
and use it in JS:
<script language="javascript" type="text/javascript">
img = root + '/someotherrootfile.js'
</script>
You would just list the file name.
<script src="filename.js"></script>
If I understand you correctly you would only need to list the filename or path directory with no leading slash.