Develop Reference

JS Hello Week "ReferenceError: HelloWeek is not defined"

I want to use this library : https://hello-week.vercel.app/
I'm having a hard time to understand how to use it. I know JS and I never used Typescript or Nodejs. I found the .js and .css of this library but it's seems not to work
"calendar.js:1 Uncaught ReferenceError: HelloWeek is not defined"
Can I included like a normal js file ?

Yes the installation guide is not really clear, here is how to get it done:
First of all this line is simply wrong
new Hello Week({
There should not be a space there, do this instead
new HelloWeek({
Also, you will need the language file. Ether host it in its particular directory hierarchy or use the langFolder option to specify where it is.
dist
-- langs
-- -- en.json
Finally, this dose not work when not in a server due to a CORS issue. Serve the files through a server and you will have it working.

You can find the basic usage in the Installation page of the docs. Just ensure to reference hello.week.min.js, hello.week.min.css and hello.week.theme.min.css. Typescript or Node.JS don't seem to be necessary.
Here is a quick HTML + JS example:
<link href="hello.week.min.css" rel="stylesheet" />
<link href="hello.week.theme.min.css" rel="stylesheet" />
<div class="calendar"></div>
<script type="text/javascript" src="hello.week.min.js"></script>
<script>
new HelloWeek({
selector: '.calendar'
});
</script>

Why is wecomponentsjs/custom-elements-es5-adapter.js not working

I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).
However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).
I tried babel-plugin-transform-custom-element-classes but that didn't work.
So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs
But the shim doesn't work! I don't know what I'm doing wrong :(
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
/* transpiled to ES5 */
class YExample extends HTMLElement {}
customElements.define('y-example', YExample);
</script>
Here is my jsbin:
http://jsbin.com/feqoniz/edit?html,js,output
Notice I'm including the custom-elements-es5-adapter.js,
also notice the JS panel is using ES6/Babel.
If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.
You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I must be doing something silly? Any ideas?

Well, I was doing something silly.. I should have tried upgrading my Babel package.
Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P

I was stucked with the same issue.
The problem was due to my build chain (gulp) transpiling every js files of the project. But the custom-elements-es5-adapter.js file must not be transpiled to work. Transpile everything but this file.

I am having a similar issue and I found a solution that works for me.
Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.
After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):
<div id="autogenerated-ce-es5-shim">
<script type="text/javascript">
if (!window.customElements) {
var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
ceShimContainer.parentElement.removeChild(ceShimContainer);
}
</script>
<script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>
Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.
This is what I did instead:
<script type="text/javascript">
if (window.customElements) {
document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>
YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.
I hope it helps!

js alternative to jquery load method

I'm trying to throw together a single js file that includes the functionality of jquery's .load(), as well as the methods, in an effort to link only to a single js file, rather than both jquery and the load methods.
Instead of
<script src="jquery.min.js" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>
this
<script src="load_including-necessary-js-for-load-methods.js" type="text/javascript"></script>
So basically I'm trying to extract only the necessary code from within jquery that makes .load() work and include it in the file with the load methods.

Suggest, instead, that you use something along the lines of html5boilerplate's jQuery call:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
Accessing it via the CDN ensures high-speed delivery of the jQuery code that is used by thousands of other pages/users on a constant basis,
... which also means that that code is most likely cached in your users' browsers ...
... which equates to highly-tested code that you're really not "paying for" in terms of overall load time. The second line, of course, allows you to offer a copy of it from your own site, in case the CDN has a hiccup, or you need to be testing offline (in which case, AJAX is borked for you any way you look at it, anyhow...).
OTHERWISE, check out the instructions on jQuery's Github: https://github.com/jquery/jquery#how-to-build-your-own-jquery and read up on building your own... they have instructions, there for excluding modules that you don't want from the library.
After that, you'll probably want to use some kind of bundling script to bundle all your JS (your custom jQuery build + your scripts) together, if you want to reduce everything to one call.

i don't know your reason why you cannot use all jquery library, but you still can write own js script and use onload or document.load, window.load its you reduce your code. If you need jQuery load() ... read and try to first comment of your question or use all small(own) jQuery library than waste of your time with this.

setting a source for all jquery in an application

Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!

jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.

Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)

I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.

I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.

download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>

Using Jquery 1.4.2 in an ASP.NET app - Error updating JScript IntelliSense

I am trying to just add a reference to jquery in my ASP.NET project, and get this when I do: "Error updating JScript IntelliSense ... Object doesn't support this property or method."
I read that I may have to reference vsdoc, but can someone help me with this?

You can add reference to vs-doc after you have added jquery.js, this way it works properly with intellisense and also description of jquery elements(using vs-doc).
First reference should be of your core jquery.js file then the rest.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.4.4-vsdoc.js"></script>