Adding custom javascript functions to scala-js-example-app from GitHub - javascript

This is based on the scala-js-example-app from GitHub.
I have a function that I want to define in Javascript and is not already defined by the Scala.js library.
In my copy of the ScalaJSExample.scala file, I have:
object Mine extends js.Object {
def foobarfoo():String = ??? //this is just a simple example and I know this can be done completely in Scala, but just go with it.
}
object ScalaJSExample extends js.JSApp {
def main(): Unit = {
val paragraph = dom.document.createElement("p")
paragraph.innerHTML = "<strong>It works!" + Mine.foobarfoo() + ".</strong>"
dom.document.getElementById("playground").appendChild(paragraph)
}
/** Computes the square of an integer.
* This demonstrates unit testing.
*/
def square(x: Int): Int = x*x
}
Now I want to define foobarfoo in Javascipt.
I've tried writing this in a javascript file:
function foobarfoo() { return "Hello, World!"; }
and that didn't work, so I tried a more Scala.js syntax:
var Mine = {
foobarfoo: function() { return "Hello, World!"; }
}
and many other variations, but none of these worked and I couldn't get "Hello, World!" to appear on the webpage after compilation.
How should I write foobarfoo() so that I get the right result?

Resuming the discussion, the problem was the inclusion order: The OP added the custom JavaScript functions after the Scala.js code:
<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>
<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>
Therefore, the requested function couldn't be found. Putting myscript.js to the top solved the issue:
<script type="text/javascript" src="src/main/scala/example/myscript.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-opt.js"></script>
<script type="text/javascript" src="./target/scala-2.11/example-launcher.js"></script>

Related

Javascript: Use "new Function()" to run code in a string and have it access class definitions

My actual code is dense, so I'm trying to reduce this to a minimal example.
I have MainUI.js which contains:
var MainUI = function(){
'use strict';
var singleton = null;
class MainUI {
makeSomethingHappen(){
console.log("MAGIC!");
}
}
return {
getSingleton: function(){
if (singleton == null) singleton = new MainUI();
return singleton;
}
};
}();
Then I have test.js which contains:
function test(code){
var uis = MainUI.getSingleton();
retValue = new Function("ui", "use strict'" + code)(uis);
}
This is all run from index.html which contains:
<html>
<script type="text/javascript" src="MainUI.js"></script>
<script type="text/javascript" src="test.js"></script>
<body onload="test('ui.makeSomethingHappen();');">
</body>
</html>
But when I call
test("ui.makeSomethingHappen();");
or even
test("console.log('NARF!');");
I get an exception with the message
MainUI is not defined
The singleton accessor and the MainUI works in all my code outside of "new Function()", so I know it's working (even if I made typographical error producing the minimal test).
So I'm hoping someone can tell me how I can give the code inside the Function access to the class definitions outside.
Make sure that the MainUI.js script is referenced correctly and that it is referenced prior to the test.js script that will use it.

Backbone: getting the html code of a view?

In order to write the HTML code of social icons (Twitter, Linkedin, etc) to a textarea so that the user can use that code elsewhere, I would like to get the HTML code of the view element, but I'm having some issues. To help illustrate this better, here is the code that creates the view:
define(function(require, exports, module) {
var _ = require('underscore');
var GridControlView = require('pb/views/grid-control');
var SocialiconsControlDialog = require('pb/views/socialicons-control-dialog');
var template = require('text!pb/templates/socialicons-grid-control.html');
var SocialiconsGridControlView = GridControlView.extend({
template: _.template(template)
,templateVars: {
partials: {
facebook: require('text!pb/templates/socialicons-grid-control-facebook.html')
,twitter: require('text!pb/templates/socialicons-grid-control-twitter.html')
,googleplus: require('text!pb/templates/socialicons-grid-control-googleplus.html')
,pinterest: require('text!pb/templates/socialicons-grid-control-pinterest.html')
,linkedin: require('text!pb/templates/socialicons-grid-control-linkedin.html')
}
}
,control_dialog: SocialiconsControlDialog
});
return SocialiconsGridControlView;
});
And, for example, the Linkedin template looks like this:
<script src="//platform.linkedin.com/in.js?<%- t.cache_buster %>" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-counter="<%- t.linkedin_option_countmode %>"></script>
What I would like to retrieve, is the parsed template code as text, something such as:
<script type="text/javascript" src="//platform.linkedin.com/in.js?0.4670609195438331">
<script data-counter="top" type="IN/Share+init">
But using something such as:
control_view.render().$el.innerHTML;, control_view.render().$el.html().text() or control_view.render().$el.html().replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, ""); doesn't return text; it returns the full HTML, and produces a Linkedin icon (when I just want the text to be written to a textarea).
Any thoughts?
Update **
I noticed that the code control_view.render().$el is working correctly on other places of the application, and returning HTML code, but for some reason in this view where I'm trying it doesn't. The code seems to break at:
$control = control_view.render().el;
and in the console I get an error which is:
TypeError: t is undefined - underscore-min.js (line 3)
Use the .outerHTML property of the $el.
var html = $('<script type="text/javascript" src="//platform.linkedin.com/in.js?0.4670609195438331">' +
'<script data-counter="top" type="IN/Share+init">');
var text = html[0].outerHTML;
$('textarea').val(text);
jsFiddle

External Javascript File: Correct way to pass configuration parameters

I have an external javascript file called test.js as seen below. This file needs user configuration parameters passed to it, in this case user and show values.
<script type="text/javascript">
<!--//
user = '123';
show = 'appts';
//-->
</script>
<script src="{{ STATIC_URL }}js/widgets/test.js" type="text/javascript"></script>
Above is currently how I tell 3rd parties to add the script to their own site. However, I cannot help to feel this is a bad way to pass these values i.e. clashes.
Is the way I have done it acceptable? Is there a better way?
A simple answer would be to append something to your variable names, such as:
<script type="text/javascript">
<!--//
widget_test_12331_user = '123';
widget_test_12331_show = 'appts';
//-->
</script>
You can stick to namespace convention "reverted domain":
<script type="text/javascript">
<!--//
if (!org) var org = {};
if (!org.mylibrary_domain) org.mylibrary_domain = {};
if (!org.mylibrary_domain.settings) org.mylibrary_domain.settings = {};
org.mylibrary_domain.settings.user = '123';
org.mylibrary_domain.settings.show = 'appts';
//-->
</script>
<script src="{{ STATIC_URL }}js/widgets/test.js" type="text/javascript"></script>
You can use the concept of javascript namespace (How do I declare a namespace in JavaScript?).
so you can add another js file named testConfig.js, which include :
var yourAppNamespaceTestConfig = {
user: function(){ return '123' ;} ,
show: function(){ return 'appts';}
};
then inside test.js, you can read the config by:
var user = yourAppNamespaceTestConfig.user();
var show = yourAppNamespaceTestConfig.show();
And if you're more about OO, try Coffeescript (http://coffeescript.org/). They introduce OO to your javascript.

javascript runtime error 0x800a1391

I'm learning a bit HMTL5 to prepare to the 70-480 exam. I'm trying to do some javascript code. It looks something like this:
function inchestometers(inches) {
if (inches < 0)
return -1;
else {
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
and I have such html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Htnl 5 test</title>
<script src="script/test.js"></script>
</head>
<body>
<p id="hello">Hello</p>
</body>
</html>
In my VS 2012 i have used the Asp.net Empty Web application project and added the Js file and also the html file. The problem is that The function runs properly without any exeptions. This function is taken from here: http://msdn.microsoft.com/en-us/library/cte3c772(v=vs.94).aspx
But whem I'm trying to run the code where I'm getting the document element it' crashint with the error like in the subject. What I've investigated is that the hello gets the null value. I've also tried the code thaken from here:
http://msdn.microsoft.com/en-us/library/yfc4b32c(v=vs.94).aspx - the example with the div. I have the same effect.
What is wrong? I know that there were simmilar subjects but I can't seem to find one matching to mine. Thank you kindly for your help.
Regards
Rafal
you are getting a problem because your javascript code is running before the element
<p id="hello">
is defined.
the simplest solution is to include your script at the end of the body section instead of in the head section but this would cause the document.write call to occur after the rest of the content.
another solution would be to place the code inside two functions like this
function do_conversion() {
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
}
function say_hello() {
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
}
then change the body section like this
<body onload='say_hello()'>
<script>
do_conversion();
</script>
<p id="hello">Hello</p>
</body>

multiple interdependent javascript files in one html file

I have two javascript files (file1, file2). File1 uses a class defined in file2. Am I able to reference these files from an html file the following manner:
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
Will this allow for file1's dependence upon the class defined in file2?
If not what are some plugins that do allow for this sort of dependency?
It has to do with the way you are going to use them. A simplified approach.
Scenario 1:
script1.js
function primary()
{
secondary();
}
script2.js
function secondary()
{
alert("hi primary");
}
test.html
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works (you already know it)
Scenario 2:
script1.js
secondary();
script2.js and test.html as above
It's not working (js error)
Scenario 3:
script1.js
secondary();
script2.js remains the same
test.html
<html>
<head>
<script src=script1.js defer></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works.
Is this what you're looking for?
Overview:
Use Jquery to load JS dynamically using the following:
$.getScript("file1.js",function(){
alert("File1.js is loaded");
}
Example with Object Oriented JS and dynamic js loading.
File1.js as:
File1 = function(){
}
File1.prototype=
{
constructor:File1,
primary:function()
{
if (File2 == "undefined")
{
$.getScript("file2.js",function()
{
file2 = new File2();
file2.secondary();
});
}
}
}
File2.js As:
File2 = function(){
}
File2.prototype=
{
constructor:File2,
secondary:function()
{
if (File1 == "undefined")
{
$.getScript("file1.js",functiom()
{
file1 = new File1();
file1.primary();
});
}
}
}
This should give you pretty good idea of dynamic loading of JS, and JS Object oriented concept as well.

Categories

Resources