I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
Related
I am doing a little project where i have prepared the back end in python and the graphic user interface woth HTML, CSS & JS.
The python script doesn't require any external librariesand the only thing that it does is opening a JSON file with the data processed, since it's a game the results are casually generated, and because of this I don't have to pass any parameters to the script.
The problem is that I don't know how to trigger the script so it generates the json that i can access trough JabaScript.
the scheme of the project is this:
index.html
pages (folder)
newGame.html
loadGame.html
rules.html
python (folder)
python_script1.py
python_script2.py
python_script3.py
main.py
specifically i have to trigger the script once the user has loaded the newGame page or the loadGame one.
(obiuvsly the js isn't node.js is actual client-side JavaScript)
I obiuvsly did some research and i found the pyodyde open source project does what i want, the fact is that i can't figure out how to connect the interface file with the back-end one with this resource.
solution
Ok, with some other research i found out how to solve my problem.
But firstable I want to thank you guys for recommending me the PyScript library.
The problem I was having is that i needed to connect a python file within the pyscript tag.
At first i tought that I had to import it with the import keyword and than executing the file.
But than I discovered that the py-script tag has an src attribute and you can link all the external files that you want.
So, in the end, iall i had to do was to connect my file is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>newGame</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<py-script src= "./python scripts/test_file.py"></py-script>
<script src="script.js"></script>
</body>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</html>
There is a new library called PyScript (it can help you run python in your HTML), all you need to do to install the cli is doing this command:
pip install pyscript-cli (This command will install the cli not the library).
then you should do this command:
pyscript wrap python_file.py (NOTE: this will convert the python file to an html file so the python file name would be the name of the html file)
And it should be done.
The HTML code would be this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
Code here
</py-script>
</body>
</html>
But than, once i typed in the command and created the html file from the python script, how do I connect it to the "newLevel" page?
I'm trying to use some protocol buffer code generated with protoc for javascript. I got some javascript files that i can import (after choosing the commonjs style) into other javascript files.
I've installed an npm dependency called google-protobuf and am able to bundle all javascript with webpack. When i try to run the page in firefox i get no errors related to this, chrome however gives me:
Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
I've tried adding some additional tags to <meta> and <script> and they don't work. I've never seen an error like this and don't know where to start looking.
The end goal is, i'd like all my npm i and all my import { Foo } from 'foo.js' to work on a web page without errors.
What webpack injected using HTMLWebpackPlugin is:
<script type="text/javascript" src="frontseat.bundle.js"></script>
Originally there are no <meta> tags, i just added the one under head so it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
Try to update your regex to this regex below:
[Ö‘\-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]
And your meta tag is like this? <meta charset="utf-8"> with this charset
I got the same issue as you have.I cannot upgrade google-protobuf over than 3.6.1. Only version 3.6.1 works for me before. All versions later 3.6.1 raise the same errors in my project.
However, the <meta charset="utf-8"> helps now on my side. I create a minimum sample and hope it can give you some idea.
google-protobuf version: 3.11.2
index.js
import * as pb from 'google-protobuf';
console.log(pb);
build command
npx webpack index.js -o bundle.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bundle.js"></script>
</head>
</html>
Then, you should be able to see something like this on chrome devtools console without the error.
{Map: ƒ, Message: ƒ, BinaryReader: ƒ, BinaryWriter: ƒ, ExtensionFieldInfo: ƒ, …}
I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
I've been using Webpack for some time, but it was a little bit too extensive for me.
That's why I wanted to start off with Parcel, to get the basics of bundling projects together.
Let us say I have a basic index.html file, which has a link to a JavaScript file.
Within this javascript file, I have a couple of dependencies imports.
It should look a little bit like this.
index.html
<!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>Document</title>
</head>
<body>
<h1>Helloo</h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
and script.js
import "../styles/sass/main.scss";
import is from "is_js";
const myString = "Hello World";
Now, when I bundle the index.html file using
parcel bundle index.html --public-url .
i would like to use chrome developer tools console to console (from the console) some javascript as e.g. myString
But because parcel bundles everything inside one function, this variable is not accessible and the console returns:
Uncaught ReferenceError: sections is not defined
at :1:1
How can i still debug my projects inside the console using parcel as a bundle processor?
I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using