How do I convert this piece of javascript code to coffeescript code - javascript

What would following code look like in coffeescript?
<script type="text/javascript">
$(function () {
$('#datetime-picker').datetimepicker();
});
</script>

$ ->
$("#datetime-picker").datetimepicker()
return
Source

<script type="text/coffeescript">
$ ->
$("#datetime-picker").datetimepicker()
return
</script>
Is indeed the right answer to your question. Unfortunately, browsers don't understand natively coffeescript.
But there is a little known feature that allow such piece of code to work. You have to load coffee-script.js (for example from http://github.com/jashkenas/coffee-script/raw/master/extras/) after all coffeescript on the page. This is the compiler and on loading, it will evaluate and compile all coffeescript previously defined on your page. Of course, compiling coffeescript on each page load is far from being efficient, and it is absolutely not recommended for production code.
Nevertheless, here is a little self contained example:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<script type="text/coffeescript">
$ -> $('#header').css 'color','green'
</script>
<h1 id="header" style="color:red">
If this is green your browser understand coffescript !!
</h1>
<!-- Load coffeescript compiler -->
<script type="text/javascript"
src="http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"> </script>
</html>
That being said, to quote the doc: "it's not recommended for serious use"

Related

The mystery of '$.md5 is not a function'

I have a js code that uses jQuery.MD5 library. It works perfectly on my server:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
</head>
<body>
<script>
// my code goes here (declaring variables and functions)
var code = $.md5('mystring');
// and a little more code
</script>
</body>
But then I upload it to a web application (which I cannot control), that makes it look like this and puts it into an iframe:
<head>
<script>
// some extra variables are declared here
// double-checked that nothing here can break my code
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
<script>
// some code
var code = $.md5('mystring');
// some code
</script>
</body>
And this code starts giving me the $.md5 is not a function error. Strange thing. Tried clearing the cache, putting jquery.md5.js code directly into mine, nothing works.
Note that all the code works on my machine, so there must be no problem with my JS.
Update: the problematic code behavior seems to be unpredictable, meaning that sometimes it works fine with no changes.
What can be wrong?
Hm... That's a little embarrassing, but the problem was in jQuery. The one I included in my iframe conflicted with the one included in the page. Somehow this lead to "hiding" my $.md5 function after its code's end.
And yeah, I know, it was quite obvious that jQuery could cause problems.
If you want to use jQuery md5 function you should have import jquery.md5.js file in your project.
Steps-
Download jquery.md5.js file from https://github.com/placemarker/jQuery-MD5
Copy this file into your source folder. (ex: assert/theme/js)
Import that js file to your project.
(ex: <script src="<?= base_url(); ?>/public/assert/theme/js/jquery.md5.js"></script>
)
That's it! You are done!

How do you use Coffeescript?

I want to use coffeescript in a website, but something doesn't seem to be working. I have my coffeescript in a external file and it is linked to the html file. I have the coffeescript compiler also linked to the html file. What's wrong?
HTML:
<html>
<head>
<script type="text/javascript" src="coffee-script.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type='text/coffeescript' src='Test.coffee'></script>
</head>
<body>
</body>
</html>
Coffeescript:
$->
random = (number) ->
console.log Math.ceil(Math.random() * number)
$("body").append(number)
random(2)
Try to compile your Coffeescript to Javascript before publication:
Once installed, you should have access to the coffee command, which
can execute scripts, compile .coffee files into .js, and provide an
interactive REPL.
Source: http://coffeescript.org/#usage

Getting "$ is not a function" error

I am getting error message in firebug saying "TypeError: $ is not a function" and the code of small javascript underneath.
The full code is here:
<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#file').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
</script>
Can anyone help me with this? I am not into javascript programming. Thanks in advance!
Edit: This is what sits in my head section:
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="scripts/sfm_validatorv7.js"></script>
<script type="text/javascript" src="scripts/sfm_validate_jobform.js"></script>
<script type="text/javascript" src="scripts/rollover_images.js"></script>
<script type="text/javascript" src="slideshow/fadeslideshow.js"></script>
<script type="text/javascript" src="scripts/setslides.js"></script>
Do I need to add one more line with just "jquery.js" and upload this file to a server or I am missing something here, looks like all is ok above, thats why I am asking for help.
You've tagged this jQuery. jQuery is a library that provides a function called $, but you have to include the script that provides the library before you can use it.
<script src="path/to/jquery.js"></script>
For other options, see the jQuery download page, with special attention to the section on using a CDN.
1: include the script that provides the jQuery library and try;
2: find out that is there any other scripts contain this tag "$", you can use jQuery to instand of.

icanhaz not finding template

To make this example as simple as possible, let's say I have the following code in home.html:
<html>
<head>
<!-- ALL DEPENDENCIES FOR ICANHAZ ARE INCLUDED ABOVE -->
<script type="text/html" id="foo" src="js_template.js"></script>
<script>ich.foo({})</script>
</head>
<body></body>
</html>
And in javascript_template.js, I have the following:
Hello world!
As it turns out, icanhaz is not detecting foo, so ich.foo({}) is throwing an error. What exactly is going on here?
ICanHaz.js does not automatically download the contents of src. This behavior can be seen on line 510 of ICH.js's source code, in which it checks for an innerHTML property of the script tag before defining the template.
You must define it inline, or use your own AJAX request. For example, embedded:
<script type="text/html" id="foo">
Hello, world
</script>
Or, if you are using jQuery, you can use AJAX to load the script:
$(function(){
$.get('js_template.js', function(res){
ich.addTemplate('foo', res);
});
});
Keep in mind, ich.foo() will not be available until the AJAX request completes.

javascript-aware html parser for Python ~

<html>
<head>
<script type="text/javascript">
document.write('f*** js');
document.write("f*** js!");
</script>
</head>
<body>
<script type="text/javascript">
document.write('f*** js');
document.write("f*** js!");
</script>
<div>f*** js</div>
</body>
</html>
I want use xpath to catch all lable object in the html page above...
In [1]: import lxml.html as H
In [2]: f = open("test.html","r")
In [3]: c = f.read()
In [4]: doc = H.document_fromstring(c)
In [5]: doc.xpath('//a')
Out[5]: [<Element a at a01d17c>]
In [6]: a = doc.xpath('//a')[0]
In [7]: a.getparent()
Out[7]: <Element div at a01d41c>
I only get one don't generate by js~
but firefox xpath checker can find all lable!?
http://i.stack.imgur.com/0hSug.png
how to do that??? thx~!
<html>
<head>
</head>
<body>
<script language="javascript">
function over(){
a.innerHTML="mouse me"
}
function out(){
a.innerHTML="<a href='http://www.google.com'>google</a>"
}
</script>
<body><li id="a"onmouseover="over()" onmouseout="out()">mouse me</li>
</body>
</html>
Not a clue about javascript-aware parser in python but you can use ANTLR to do the job. The idea is not mine so I'm leaving you the link.
It's actually quite cool because you can optimize your parser to selectively choose what instruction needs to be parsed (and executed).
In Java there is Cobra. I don't know any Javascript-aware HTML parser for Python.
Searching google for "javascript standalone runtime", I found jslibs: a "standalone JavaScript development runtime environment for using JavaScript as a general-purpose scripting language", based on "SpiderMonkey library that is Gecko's JavaScript engine".
Sounds great! I haven't tested yet, but it seems like this will allow you to run the javascript code you find in the page. I don't know how much it will be tricky, though..

Categories

Resources