How can I integrate chess.js and chessboard.js? - javascript

I am trying to integrate Chess.js and Chessboard.js but I am having some problems along the process. I have downloaded successfully Chessboard.js, unzipped the folder and within it I created a file called index.html that looks like the following:
<html>
<head>
<title>Chess Match</title>
<link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script type="text/javascript">
var board = ChessBoard('board');
</script>
</body>
</html>
This proves that the library is working properly. Now I would like to integrate the Chess.js library in order to play a random match as described in this integration page.
How can I do that?
First I need to install Chess.js so I download the repo and I put the chess.js and chess.min.js files inside the js folder, but I am not sure of how should I proceed from here. Do you have any idea?

Add
<script src="js/chess.js"></script> into your file.

Related

Can someone help me with this React tutorial syntax error?

Hi guys I've been trying to learn React with their tutorial online. I copy and pasted the code into Visual Studio Code and when ever I run demo.html, the page is blank. I got to the console and find that their is a syntax error " Uncaught SyntaxError: expected expression, got '<' " How can this be if I've just done a copy and paste job? I don't know if it could be something to do with the javascript being in a separate file?
I get the concepts behind this code but I can't see to figure out why it's working.
Any help if much appreciated!
Here is the script called test.js
function Welcome(props) { return <h1> Hello {props.name} </h1>;
}
const element = <Welcome name="Sara" />;ReactDOM.render(
element,
document.getElementById('root')
);
And here is demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="test.js"></script>
</body>
</html>
If you are developing React project. It is always a best practice and recommended by React team to
use CLI and get rid of all these script tags inclusion. Read React docs
You have to set Babel also to compile JSX. For that, you have to include it
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
and add type attribute to the script tag
type="text/babel"
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Load our React component. -->
<script src="test.js" type="text/babel"></script>
</body>
</html>
React uses a special file type called JSX which allows you to include HTML like syntax in Javascript. In order to parse JSX files you need to setup a react project.
The simplest way to do so is to use the Javascript library Create React App.
To use that install NodeJS and then execute npx create-react-app my-app to get some boiler plate code.
You can then navigate into the newly created react project using cd my-app and start it using npm start. This will start a server on port 3000. You can then navigate to http://localhost:3000 to view your react application.
You can configure the react project to start and debug it through VSCode as outlined here Configure the debugger.

External javascript not being run from React (CRA)

I have a plain HTML template which I am trying to convert into a small React app (using create-react-app). I have inserted the following script tags into the index.html file located in the public directory, but it doesnt seem to be running some of the scripts
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script src="%PUBLIC_URL%/js/jquery.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/TweenMax.js"></script>
<script src="%PUBLIC_URL%/js/jquery-ui.js"></script>
<script src="%PUBLIC_URL%/js/jquery.fancybox.js"></script>
<script src="%PUBLIC_URL%/js/owl.js"></script>
<script src="%PUBLIC_URL%/js/mixitup.js"></script>
<script src="%PUBLIC_URL%/js/appear.js"></script>
<script src="%PUBLIC_URL%/js/wow.js"></script>
<script src="%PUBLIC_URL%/js/custom-script.js"></script>
</body>
</html>
if i load the page and go into the console and type $ === jQuery it returns true, which tells me that the jquery.js file is being loaded, but a lot of functionality from the other files does not seem to work.
There are no errors being generated in the console either
Am i doing something wrong in the way i am bringing these files into the project?

AngularJS where to put all script tags location

I'm new to AngularJS.
Where do I place all .js files like module,routes and controllers?
I found examples but they put all of it inside of tags.
like I currently code like this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</html>
Is this normal? Or is there a proper way to include the files?
I have heard of RequireJS. But there a way without using it?
Thank you very much.
Regards,
Yuri
There is no right answer.
There are multiple ways. One of them being using <script> tags as your code does.
Other options are:
Gulp
Gulp + Bower
Webpack
RequireJS
SystemJS
You can also use Yeoman to scaffold your project with build pipeline in place.
You can include files normally before end body tag </body> - it's ok.
But more efficient way is pack your files into one or few groups (Libraries, Core, Modules) and minify. It is better to have fewer HTTP requests, so you should reduce amount of files.
To bundle your files and minify you can use gulp or webpack:
See example with gulp:
https://github.com/jhades/angularjs-gulp-example
See example with webpack:
https://github.com/zombiQWERTY/angular-webpack-starter
Few tips, you should pick and choose which ones are applicable to your app.
After all your application markup, load your scripts.
You may use a bundler, here is a starter project I created some time ago gulp-browserify-starter. #1 still applies.
Go through a bit more pain and use webpack to bundle your vendor and app code as distinct bundles.
Good luck
You need to put all your javascript just before body close tag instead of head
<html>
<head></head>
<body>
.......
.......
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</body>
</html>

SearchKit - Unable to get a sample app working

I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?

How to run ScalaJs tests in real browser?

Is it possible to run generated js test code in browser?
ScalaJS seems to generate following js files under target directory
(project-name)-test-fastopt.js
(project-name)-test-jsdeps.js
before running tests.
Is it possible to run these tests in browser e.g. using this type of html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Scala.js Experimental</title>
</head>
<body>
<!-- Include JavaScript dependencies -->
<script type="text/javascript" src="./sjsexp2/js/target/scala-2.11/sjsexp2js-test-jsdeps.js"></script>
<!-- Include Scala.js compiled code -->
<script type="text/javascript" src="./sjsexp2/js/target/scala-2.11/sjsexp2js-test-fastopt.js"></script>
<script type="text/javascript">
$(function(){
package.ClassName().mainFunction();
})
</script>
</body>
</html>
If yes then what should be in place of "package.ClassName().mainFunction();"?
I'm using uTest framework for testing.
There is a sbt plugin which provides a real browser environment for your tests using Selenium: https://github.com/scala-js/scala-js-env-selenium

Categories

Resources