i ran the code found here http://www.mkyong.com/jquery/jquery-hello-world/ but eclipse doesnt seem to run the jquery code ? i placed the jquery.js file in all the directories found under the project name but still no luck. Where exactly should the .js file go ?
The <script> tag should go inside <head> or <body>, not in between. The behaviour is unspecified and thus browser specific (it however works fine for me on Eclipse 3.6 SR2).
As to the location of the .js file, the <script src> in the code example declares just the filename without a path, so it is supposed to be in the same path/folder as the HTML file.
Related
I'm very new to Javascript, Graphviz, and D3, and I'm having issues setting up D3-graphviz. I downloaded the latest release on Github, but none of the html files in the "example" folder will run when I open them in my browser.
When I looked at the script src lines at the beginning of the files (see below), they referenced "node_modules" and "build" files that I didn't have. I tried creating the node_modules folder and adding d3.js and graphviz.js, but I don't seem to have a d3-graphviz.js file to put in a build folder.
I also tried creating html files with script src lines similar to the ones in the online demos, but this didn't work either.
The original script src lines (when I tried to run the example files unedited):
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/viz.js/viz.js" type="text/javascript"></script>
<script src="../build/d3-graphviz.js"></script>
and the alternate ones I also tried:
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="application/javascript"></script>
<script src="https://unpkg.com/d3-graphviz#2.6.1/build/d3-graphviz.min.js"></script>
Both times, when I go to open the html file in Google Chrome or Safari, it just opens a blank page. However, when I follow the demos in the readme (e.g. here), they work just fine. I can also successfully generate static graphs using just graphviz and Terminal.
I'm wondering if I am missing a step in the setup process, or missing a dependency (other than graphviz and d3) that I should download? I can't find any other questions about struggling with just showing an animation at all, so I would appreciate any advice :)
I'm a beginner(self teaching, day 2) in web development, and so far I've learned how to use the console in Chrome for writing functions in Javascript. To further my understanding of how Javascript is implemented, I want to create a blank test environment that I can build from the ground up. I've tried looking at guides for starting a new Javascript project (I want to use Visual Studio Code's "Debugger for Chrome" extension), but every guide starts by saying "open up your project folder", and I don't have any projects yet! I've looked, but haven't found any documentation detailing "how to create a project folder". So my questions are:
What files(w/ appropriate extensions) do I need in a folder for a blank webpage?
Can I make these files by creating text files and just changing the extensions?
Do any of these files need any specific entries or formatting so that they work appropriately with my editor?
Thanks everyone.
Simple HTML page can be enough, but it is better to extract your JS code to separate file:
index.html
scripts.js
All of these are simple text files, so you can create them as text files first and just change the extension as you suggest.
In your index.html file you need to include that scripts.js file like this:
<!DOCTYPE html>
<html>
<head><title>Your playground</title></head>
<body>
<!--here you can have some HTML markup to play with-->
<div id="test">test div</div>
<script src="scripts.js"></script>
</body>
</html>
You should add the import at the end of the body so you do not need to wait until the DOM is parsed.
Then you can have something like this in your scripts.js:
var el = document.getElementById('test');
alert(el.innerText);
Sure you can also use stuff like https://jsfiddle.net/ or https://jsbin.com/.
Simply put, the easiest thing to do is find a folder in your computer hierarchy where you'll be comfortable doing your work. Maybe underneath your Documents folder you can create a sub folder called, "Websites." Within Websites you can create, "project_1" or something.
Inside of your project folder you can easily create an index.html file. You can create a blank Notepad.txt file, and then just rename it to index.html. This index.html should include the boiler plate HTML code (such as headers, a blank body, and a tag to a JavaScript file.) From there you could create the corresponding JavaScript file, called project_1.js (js for JavaScript.)
At that point you'll have a basic working directory where you can continue to learn and build your website.
I have a webpack project (based on https://github.com/vuejs/vue-webpack-example) which generates an index.html file and a javascript file containing the application.
Everything works fine when I include the JavaScript like this:
<script src="static/js/app.js"></script>
When I try to include the contents of static/js/app.js directly in a script tag (because we need to end up with a single .html file) it doesn't work anymore. It looks like the javascript doesn't get exectuted at all:
<script>!function(e){function t(i){if(n[i])return...</script>
I extracted the application into 3 files (manifest.js, vendor.js and app.js) where vendor.js contains the libraries I need from node_modules. It works as long as I don't include vendor.js directly. So I can inline the manifest.js and app.js but not vendor.js.
Any ideas why the inlined js doesn't work but the included js via an url does work? Until now I thought js would behave exactly the same, no matter how it's included.
I figured out what's wrong.
Some browsers (I tested Safari and Chrome on Mac) seem to not like <script> tags which have an opening script tag somewhere inside them. Even though all the closing script tags are escaped (like document.write("</script"+">"))
Strangely this does work in simple example like this one:
<script>
document.write("<script>alert(1)</script"+">")
</script>
In complex examples (like this one: https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845)
it only works when all <script> tags are "escaped". Maybe someone can find out what's the difference between the simple and the complex example.
In my case I used the inline example of the html-webpack-plugin which I modified as follows:
script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source().replace(/<script>/g,'<script"+">')}
Note the replace() call at the end.
You shouldn't need to include the app.js file. If you run npm run build from project folder it will create all files needed to run the application inside the dist folder.
Remember also that the app must be served from an HTTP server in order to work.
I'm an absolute beginner in JavaScript with an elementary problem I can't solve. I've searched this site but have found no question on point.
All the references say it is best practice to separate the JavaScript (and CSS) from the main HTML by putting it into a subfolder (ditto for the CSS). So I've created a folder (Rainbow-Project) and within it two subfolders (js and css) and put the JavaScript and CSS in them.
In the Rainbow-Project folder I've put the rainbow.html file, and in the js subfolder I've put the scripts.js file. There is no CSS for the exercise.
In rainbow.html there is the following:<script src="js/scripts.js"></script>. This throws a 404 file not found error which I see in the JavaScript console.
If instead I put the scripts.js file in the Rainbow-Project folder and change the <script> tag to read <script src="scripts.js"></script>, the rainbow.html runs correctly and the JavaScript executes correctly.
I'm using a MacBook Air running OS X El Capitan 10.11.4 with Chrome 50.0.2661.86 (64-bit). But it's not browser specific; it's a cross browser problem that happens in Safari and Firefox as well. The folders were created with Finder.
Can anyone help me solve this problem? Your interest in my question and any help are much appreciated.
-Steve
I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.
Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>
First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere