How do you use Coffeescript? - javascript

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

Related

How to use HTML file variables in external JS file

I have an html file where I import a JS module from chessboard.js
<html lang="en">
<head>
<link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script id="import" src="./chessboardFiles/js/chessboard-1.0.0.js"></script>
<title></title>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board2 = Chessboard("board1", "start");
</script>
</body>
</html>
The only problem is that I want to write what's in the body's <script> tag in a separate JS file then add it to this html document via <script src='...'> however the <script id="import" ...> file that is imported is not exactly a module so I cant just do import * as C from chessboard-1.0.0.js in a new JS file because I get a
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. error in the console.
So is there any way to get the variables available in the HTML document (i.e Chessboard()) available in an external JS file? How could I do this?
You could write to global window variables, or have everything in the window scope. Ex: window.board = Chessboard(...), and you can access that from different files if the script is run later than the definition.

Using JavaScript in another JavaScript file

I have two javascript files and one html page. i want to include a js file to another js file but i dont know how to include js file to another one.
anyone can please help me?
following is my code
html code:
<html lang="en">
<head>
<script src="main.js" ></script>
</head>
<body onload="show()">
</body> </head>
</html>
following are the javascript files:
1.js
var x=10;
function show()
{
setvalue(x)
}
2.js
var D=;
function setvalue(x)
{
D = x;
alert(D);
}
if it's just a matter of accessing the functions and objects in the first javascript file just do something like this:
<script src="main1.js"></script>
<script src="main2.js"></script>
this way any function in main1.js will be available in main2.js

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

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"

Local jQuery.js file not working

I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.

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