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.
Related
I have used Wordpress a lot to develop websites but wanted to try and make my own website from scratch for fun and learning. I have so many questions because when I google around and look on YouTube there seems to be thousands of ways of doing things. Anyway, I settled for using Vite in Visual Studio Code to create a project which starts of with an index.html, main.js, style.css and some other helper files. I tried to build with NPM and I get a nice localhost which hosts my content to e.g. http://127.0.0.1:5555.
Now I ran into the "issue" of creating a header template file, e.g. header.html, that I want to import on top of all pages (and same with footer on bottom). In Wordpress I would create a header.php and then include it with get_header() which would include my header.php file on that place. When creating my own website it doesn't seem to be a standard though and there are lots of solutions, the most promising I found so far without any real knowledge was:
https://www.youtube.com/watch?v=j5Sl6vx_l1s, which creates his own html tags and defines them in a JS file. This seems to work fine, however when editing the header I can't use nice helper snippets/auto completes and such since the html code is in a string, which is a big minus for more commplicated headers and footers.
Use .php files instead of .html files and then use <?php include('header.php'); ?> where I want the header to be. This looks more like the Wordpress approach to me, but is there any performance issues with using php instead of html files, or any other issues I need to think about?
Someone here suggests putting in the line <!--#include file="header.html" --> but this (with or without comment signs) doesn't include anything from my header.html.
How can I accomplish the simple task of having some html code that I want to put on top and bottom of each page? :)
I have a JavaScript file that's a generated parser (let's call it MyParser), which I am using in an add-on for Google Forms.
It needs to be used in the client side's Sidebar.html where I'm including it with HtmlService.createHtmlOutputFromFile('MyParser.js').getContent();, which means it must be an .html file as far as I understand. Then it must be used on the server side where I have it in a file MyParser.js.gs.
With my current solution, it's duplicated in my file structure:
Code.gs
MyParser.js.gs
MyParser.js.html
Sidebar.html
Is there a way I can make this work without having two files? Edit: As I understand it, libraries are only for the server side.
If not, any hints to making the updating of the two files more robust (currently it's manual copy/paste)?
Edit: According to the best practices, one must wrap the JavaScript inside a <script> tag inside the .html file:
Notice that the included files contain <style> and <script> tags because they're HTML snippets and not pure .css or .js files.
So it seems it's not easy to have just one file.
As far as I could tell, there's no way to reuse a single file and respect Google's best practices.
My solution, following #tehhowch's advice, was with #google/clasp and doing local development.
To build the parser (in another GitHub project), I use npm-run-script. So, I just appended a && bash makeHTML.sh to the build script.
Inside makeHTML.sh I wrapped the built MyParser.js file in a <script> tag with:
#!/usr/bin/env bash
{ echo "<script>"; cat MyParser.js; echo "</script>"; } > MyParser.js.html
Since I'm using bash it's not a true node.js solution (won't run unless there's bash installed). If someone knows of a better way to pull off the wrapping that's 100% node and doesn't require installing a whole bunch of other modules, feel free to edit the answer.
As your add-on has just few files you might use ScriptApp.getResource(filename).getDataAsString() to get the content of a .gs file and add it to the sidebar HttpOutput object enclosed in <script> tags.
Code.gs
function showSidebar(){
const htmlOutput = HtmlService.createHtmlOutput('<h1>My Sidebar content</h1>');
.append(`<script>${ScriptApp.getResource('JavaScript').getDataAsString()}</script>`);
SpreadsheetApp.showSidebar(htmlOutput,'My Sidebar');
}
JavaScript.gs
To keep things simple, this file should contain only reusable (server-side + cliente-side) JavaScript
function myFunction(){
console.log('My function ran successfully');
}
The above over simplistic code example might be applied to a bit more complex projects and will keep you away from having to use CLASP.
Contrary as happens with .gs and .html files, so far I was unable to make ScriptApp.getResource(filename).getDataAsString() to work to pull reusable JavaScript from .gs files hosted on a Google Apps Script library. Anyway, it's still possible to stay away of CLASP, one option might be to use Advanced Service Google Apps Script API, another might be to host the shared JavaScript and imported from Google Drive or from another host by using Url Fetch service.
Related
Is it possible to read the contents of a Google Apps Script from another Script
HTML and JavaScript from another server?
Server side HTML Form validation?
I have an SPA and adding newrelic analytics to the project. Newrelic provided me with a script tag with a bunch of minified code. I do not want to paste it in the html file because i can't use env variables, and it convolutes our html file. What would be a good way to import it as a script without pasting it in the file? i tried pasting it into a file and referencing it but not entirely sure if that is a good way to go about it.
In essence, instead of using
<script>
window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return
</script>
I want to do something like the following based on an env variable
<script src="/src/analytics/newrelic"></script>
Any advice would do.
Loading the New Relic Browser agent from an external file is not supported:
Link: Browser Instrumentation
It may work, but if you encounter any problems, the first thing the support engineers will ask is how you are deploying the agent.
The sourcecode of the app.html in a meteor app will look like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/846a8d9499cc559cd36226c07803f069a9b314a4.css">
<script type="text/javascript" src="/bd418141a43a911de5fcb0fc9eef1599abd72874.js"></script>
<title>application title</title>
</head>
<body>
</body>
</html>
This is simple and nice. (you can add meta in the head part).
But what if I want to add a loader for the app ?
I use a few libraries and my main js is probably going to weight a little more than one mo. I cannot image display nothing while it's loading.
The easier way would be to write a few line of classic inline html. But when I write something in the html, it's inclueded in my templates.
How would you change the app.html ?
Short answer: You can't. As far as I'm aware, Meteor will always send down an empty <body> tag and fill it in via templates.
If you have so much code that the concatenated JavaScript is quite heavy, you can split parts of it off. See this question for some techniques on how to do so. Personally I try to load from CDN any libraries that I'm using "out of the box," like Bootstrap (not an option for jQuery, unfortunately). To load from CDN, just include a <head> block in one of your HTML files and link to the CDN-hosted library files like normal, and leave them out of your project. Another option is to use jQuery's $.getScript() to load specific scripts on demand only on the pages that need them.
But that just lessons the load of your concatenated JavaScript file, it still doesn't really answer your question of having some HTML sent to the client immediately. To accomplish that, the only method I'm aware of is to have some other Web server in front of Meteor. For example have an Apache or Nginx server listening on port 80 that sends down a simple HTML file that has your initial content, and also loads the two Meteor-generated concatenated .js and .css files. Meteor would either replace the contents of <body> on load, or you would need to write some JavaScript to do so so that it gets "handed off" to Meteor so that Meteor can start rendering its templates there. I doubt the handoff would be very smooth, unfortunately. Alternatively if your initial page is more of a splash page, for example a simple login form, it could exist by itself served by Apache/Nginx and then on submit the user moves into the Meteor-served world. While the user is filling in the form the concatenated .css file (if not both the .css and .js files, or the .css file and any CDN-served or non-concatenated .js files) could be downloading in the background and getting cached. To be honest though I'm not sure it's worth all this effort, it adds a lot of complexity for what's probably only a very slight speed improvement (and even then, only on the initial load of the home page).
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