Use Closure Library inside Chrome DevTools - javascript

I've checked out the Closure library as instructred, but can't find a way to use the library (i.e. goog.require('math') inside the Console just for trying it out and testing purposes.
Thanks in advance.

Once Closure Library's base.js is loaded, you can reference the library in the Chrome Dev Tools console.
closure-test.html (load base.js)
<!doctype html>
<html>
<head>
<title>Closure Library Test</title>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
</head>
<body>
<h1>Closure Library Test</h1>
</body>
</html>
Chrome Dev Tools Console
> goog.require('goog.math');
<* undefined
Observing Resources | Frames | (closure-test.html) | Scripts, math.js will be loaded.
> goog.math.modulo(-1, 8);
<* 7

Related

"Unexpected token import" implementing native ES6 modules

I need to refactor some JavaScript code and am trying to implement ES6 modules using the native import/export commands. I struggled for awhile to get this working, so I am going to document what needed done here for future reference.
The symptom is that I receive the following message in the Chrome console:
Uncaught SyntaxError: Unexpected token import
My basic code for testing is:
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="application/javascript" src="./import.js"></script>
</html>
import.js:
import { apath } from './alert_path';
alert_path.js:
export function apath() {
alert('Bang!!!');
}
There were two actions I had to take to resolve this problem.
First, Chrome must be at 61+ or chrome://flags must enable Experimental Web Platform features.
Second, the script tag must use type module:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="module" src="./import.js"></script>
</html>
I found the second answer here under What are the basics?
Modules must be eventually included in your HTML with type="module",
which can appear as an inline or external script tag.
OBTW, the sample will fail due to CORS violations after this is resolved unless it is run through a server but that is another question.

Using Eclipse to edit javascript, 'Phaser not defined'

I am trying to use the Eclipse IDE to develop games in JavaScript using the Phaser game framework. I have a simple html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game</title>
<script type="text/javascript" src="phaser.min.js"></script>
</head>
<body>
<script type="text/javascript" src="base.js"></script>
</body>
</html>
And a simple Phaser script (base.js) that simply creates a blank canvas:
var game = new Phaser.Game(1280, 720, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
}
function create() {
}
function update() {
}
And of course, I have the Phaser framework in a separate file (phaser.min.js).
This all work, and when I run a local web server and go to the page a blank black Phaser canvas is created. However, in Eclipse, the first line of the javascript file is underlined in red, with the error 'Phaser' is not defined.
When editing Javascript in Eclipse, how do you 'import' (for lack of a better term) another javascript file for use in validation? Code completion for Phaser would be useful to, but isn't necessary.
Thanks for any help!
Dsiclaimer, I'm the author of tern.java
I suggest you that you try Tern Phaser support with tern.java which gives features like completion, validation for Phaser inside Eclipse IDE.
I would hazard a guess that out of the box, Eclipse doesn't have Javascript support given that it's primarily a Java IDE.
Try adding the JSDT plugin: https://eclipse.org/webtools/jsdt/
Or:
Giving another editor a try, one of the IntelliJ IDEs: https://www.jetbrains.com/webstorm/

React JS not working with Internet Explorer 9

I'm trying to use React with Internet Explorer 9 but getting the following errors even trying to run something very barebones:
SCRIPT438: Object doesn't support property or method 'isArray'
react-with-addons.js, line 4 character 317
SCRIPT438: Object doesn't support property or method 'create'
JSXTransformer.js, line 4 character 326
I've read https://facebook.github.io/react/docs/working-with-the-browser.html, which says IE8 might have these issues, but no mention about IE9. Googling didn't really bring up any solutions either.
Still, I tried adding es5-shim/sham as suggested on that page. That results in a different error:
SCRIPT438: Object doesn't support property or method 'hasAttribute'
es5-shim.min.js, line 6 character 4143
Has anyone encountered these errors before in IE9 or otherwise?
Thanks for the help!
The full code I'm trying to run is:
<html>
<head>
<script src="js/es5-shim.min.js"></script>
<script src="js/es5-sham.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/react-with-addons.js"></script>
<script src="js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
React.render(
<h1>HELLO WORLD!</h1>
);
</script>
</body>
</html>
Generally, you need to include the specified polyfills for ES5 features (as you've noticed): https://facebook.github.io/react/docs/react-dom.html#browser-support
You may also need HTML5 Shiv in addition to the the polyfills you've provided.
More specifically, though, the problem is probably not with polyfills but with the document mode IE9 is running in. You want to make sure that you are setting the correct document mode in your HTML file so IE knows which version to target. Otherwise, even though you are using IE9 it may be targeting IE7 which is no good.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
In index.js file you have to add polyfill. These imports should be in the first of your import.
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
//other imports
Now open in ur ie it works.
Before import you have to install react-app-polyfill.
//To install use below command:
npm install react-app-polyfill
link reference:
https://www.npmjs.com/package/react-app-polyfill

Out of the box Light Switch HTML app has a null error in IE9?

I am trying LightSwitch for the first time, and after making a new HTML C# App - I tried to run it just to see what it looks like. IE9 freezes immediately and I get this error from Visual Studio 2013:
Unhandled exception at line 5, column 19701 in http://localhost:49609/HTMLClient/Scripts/msls-2.5.1.min.js
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'cultures': object is null or undefined
Does anyone know whats going on? Thank you!
I found the issue - I am running Lightswitch in an offline environment and these two scripts were 404'ing:
http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js
http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js
Once saved in the solution I loaded fine.
This impacted me on VS 2015 all browsers. I think this is because of a closed environment for the server.
Lin M is basically correct:
Download the two files into the Scripts folder:
http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js
Next:
In default.htm change:
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
to:
<script type="text/javascript" src="Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="Scripts/globalize.min.js"></script>

Node-webkit: ReferenceError: _ is not defined

When I try to run my app with node-webkit I have error: Node-webkit: ReferenceError: _ is not defined. I think it is about Lo-dash, but on browser everything work fine. Here is my index.html code:
<!DOCTYPE html>
<html ng-app="viewer">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="components.min.js"></script>
<script src="app.min.js"></script>
</head>
<body>
<div id="content"></div>
<div ui-view></div>
</body>
</html>
In components.min.js i have all components I need - lodash, angular etc. When I run it by browsers or appJS i haven't any error, only on node-webkit.
Quite usually these reference errors arise when some script tries to reference another script which isn't loaded yet. Basically, the order in which you register your script matters. Script that is referenced should be registered before the script that uses it.
A good explanation of this issue (although with JQuery's $ selectors instead of the lodash _), is in this article here: http://jquery-howto.blogspot.nl/2013/02/referenceerror-jquery-is-not-defined.html.
Thus I would check the order in which your .js files are registered and their dependencies.
This is an issue with Lo-dash. The current edge version seems to have a fix for it, see this thread
A quick solutions seems to be to replace <script src="path_to_lodash.js"></script> with <script>require('lodash')</script>

Categories