Javascript: Difference between revisions
(7 intermediate revisions by the same user not shown) | |||
Line 39: | Line 39: | ||
** https://observablehq.com/@shaswat-du/d3-multi-line-chart. X-axis = continuous. | ** https://observablehq.com/@shaswat-du/d3-multi-line-chart. X-axis = continuous. | ||
= npm - node.js package manager = | = npm - node.js package manager and nvm = | ||
* https://www.npmjs.com/ | * https://www.npmjs.com/ | ||
* https://en.wikipedia.org/wiki/Npm_(software) | * https://en.wikipedia.org/wiki/Npm_(software) | ||
Line 48: | Line 48: | ||
<li>[https://linuxconcept.com/how-to-install-node-js-and-npm-on-ubuntu-20-04/ How to Install Node.js and NPM on Ubuntu 20.04]. It works on Raspberry Pi too. | <li>[https://linuxconcept.com/how-to-install-node-js-and-npm-on-ubuntu-20-04/ How to Install Node.js and NPM on Ubuntu 20.04]. It works on Raspberry Pi too. | ||
<ul> | <ul> | ||
<li>Install Node.js and npm from [https://github.com/nodesource/distributions NodeSource]. See the website for the instruction using the latest version. | <li>Install Node.js and npm from [https://github.com/nodesource/distributions NodeSource]. See the website for the instruction using the latest version. The "curl" command line will add the NodeSource repository key to your system and create an apt source repository file to install all required packages and dependencies. | ||
<syntaxhighlight lang='bash'> | <syntaxhighlight lang='bash'> | ||
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - | $ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - | ||
Line 69: | Line 69: | ||
</pre> | </pre> | ||
</li> | </li> | ||
<li>Install Node.js and npm from the Ubuntu default repository | <li>Install Node.js and npm from the Ubuntu default repository (<span style="color: red">NOT recommended</span>) | ||
<pre> | <pre> | ||
$ sudo apt update | $ sudo apt update | ||
Line 79: | Line 79: | ||
</ul> | </ul> | ||
== npm install == | == npm install == | ||
https://docs.npmjs.com/cli/install | <ul> | ||
<li>https://docs.npmjs.com/cli/install | |||
<li>[https://ubuntushell.com/install-npx/ How to Install and Use NPX on Ubuntu (Ultimate Guide)] | |||
<li>When I use "npm install carbonyl", the binary can be found. '''npm root''' will tell you the installation directory of your npm packages. For locally installed packages, you can navigate to the '''node_modules/.bin''' directory within the root of your Node.js project | |||
<pre> | |||
$ npm --help | |||
$ npm root -g | |||
/home/$USER/.nvm/versions/node/v18.17.0/lib/node_modules | |||
$ npm list -g --depth 0 | |||
/home/$USER/.nvm/versions/node/v18.17.0/lib | |||
$ npm root # NOT global | |||
/home/$USER/node_modules | |||
$ npm list --depth 0 | |||
$USER@ /home/$USER | |||
$ ls ~/node_modules/.bin | |||
carbonyl prettier | |||
</pre> | |||
<li>The executable path of '''npm install --global''' is still in my home directory ''/home/brb/.nvm/versions/node/v18.17.0/bin''. If I use '''export $PATH''', I can see the directory is listed as the first one. So any binaries installed by this way can be called directly. So "npm install --global" is better than "npm install". | |||
<li>To run an executable installed by "npm install" (no --global), we can specify its full path or just call '''npx'''. npx is a command-line tool that is included with npm, the package manager for Node.js. | |||
<pre> | |||
$ ~/node_modules/.bin/carbonyl http://youtube.com | |||
# OR | |||
$ npx carbonyl http://youtube.com | |||
</pre> | |||
<li>To get a verbose output, use the "--verbose" option like '''npm install -g --verbose carbonyl'''. | |||
<li>What does "npm install" do without a package name? When you run this command in the root directory of your Node.js project, it installs all the dependencies that are mentioned in your '''package.json''' file. See the documentation of [https://docs.npmjs.com/cli/v9/commands/npm-install npm install]. | |||
</ul> | |||
== Remove global npm == | |||
Note that we don't have to keep updating nvm. We can just upgrade node. | |||
<pre> | |||
$ whereis npm | |||
npm: /usr/bin/npm /home/brb/.nvm/versions/node/v15.4.0/bin/npm | |||
# sudo apt remove npm | |||
$ nvm install --lts node | |||
$ nvm list | |||
$ nvm uninstall v15.4.0 | |||
$ nvm list | |||
</pre> | |||
= [https://yarnpkg.com/lang/en/ yarn] = | = [https://yarnpkg.com/lang/en/ yarn] = |
Revision as of 10:45, 12 March 2024
Some resources
- http://www.w3schools.com/js/
- http://eloquentjavascript.net/
- http://javascript.info/
- https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics
- http://htmldog.com/guides/javascript/
- http://www.tizag.com/javascriptT/
- 6 Easiest Programming Languages to Learn for Beginners - JavaScript, Ruby on Rails, Python, Java, C/C++, C#.
- CS106J: Programming Methodologies in JavaScrip from Stanford University.
- TutorialsPoint
- Software Tools in JavaScript/Javascript for data science 2018
- How JavaScript became a serious programming language
Book
- JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett
Editors
Top 5 Javascript Editors That Can Make Coding Much Easier: WebStorm (commercial), Visual Studio Code (cross platform, open source), Sublime text (cross platform), Atom Editor (cross platform), Brackets (cross platform)
Reload Javascript in browser/Empty Cache
How can I do a Cache Refresh in Google Chrome?
- For Windows and Linux: Shift+F5 or Ctrl+Shift+R
- For Mac: Cmd+Shft+R:
Firefox: Ctrl + F5. It seems F5 (refresh) is good enough from my testing.
Libraries
jQuery
How to Build a JavaScript SlideShow in 3 Easy Steps
jQuery UI
It is mentioned in Creating multi-tab reports with R and jQuery UI
D3
- https://d3js.org/, Gallery
- SOME SIMPLE TRICKS FOR CREATING RESPONSIVE CHARTS WITH D3. The d3.css link in index.html file needs to be changed to include https: protocol.
- Multi-line chart
- https://observablehq.com/@d3/multi-line-chart. Original one. X-axis = year.
- https://observablehq.com/@shaswat-du/d3-multi-line-chart. X-axis = continuous.
npm - node.js package manager and nvm
- How to Install Nodejs on Rocky Linux 8.4. Especially, Method 2 - Installing Nodejs with NVM (Node Version Manager).
- How to Install Node.js and NPM on Ubuntu 20.04. It works on Raspberry Pi too.
- Install Node.js and npm from NodeSource. See the website for the instruction using the latest version. The "curl" command line will add the NodeSource repository key to your system and create an apt source repository file to install all required packages and dependencies.
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - $ sudo apt-get install -y npm # OR sudo apt install -y nodejs $ node --version $ npm --version
- Install Node.js and npm using NVM.
# Check the website for the latest sh file link $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash # Close and re-open the terminal $ nvm --version $ nvm install node $ node --version $ nvm install --lts $ nvm ls $ nvm use 14.15.3
- Install Node.js and npm from the Ubuntu default repository (NOT recommended)
$ sudo apt update $ sudo apt install nodejs npm $ nodejs --version
- Install Node.js and npm from NodeSource. See the website for the instruction using the latest version. The "curl" command line will add the NodeSource repository key to your system and create an apt source repository file to install all required packages and dependencies.
npm install
- https://docs.npmjs.com/cli/install
- How to Install and Use NPX on Ubuntu (Ultimate Guide)
- When I use "npm install carbonyl", the binary can be found. npm root will tell you the installation directory of your npm packages. For locally installed packages, you can navigate to the node_modules/.bin directory within the root of your Node.js project
$ npm --help $ npm root -g /home/$USER/.nvm/versions/node/v18.17.0/lib/node_modules $ npm list -g --depth 0 /home/$USER/.nvm/versions/node/v18.17.0/lib ├── [email protected] └── [email protected] $ npm root # NOT global /home/$USER/node_modules $ npm list --depth 0 $USER@ /home/$USER ├── [email protected] └── [email protected] $ ls ~/node_modules/.bin carbonyl prettier
- The executable path of npm install --global is still in my home directory /home/brb/.nvm/versions/node/v18.17.0/bin. If I use export $PATH, I can see the directory is listed as the first one. So any binaries installed by this way can be called directly. So "npm install --global" is better than "npm install".
- To run an executable installed by "npm install" (no --global), we can specify its full path or just call npx. npx is a command-line tool that is included with npm, the package manager for Node.js.
$ ~/node_modules/.bin/carbonyl http://youtube.com # OR $ npx carbonyl http://youtube.com
- To get a verbose output, use the "--verbose" option like npm install -g --verbose carbonyl.
- What does "npm install" do without a package name? When you run this command in the root directory of your Node.js project, it installs all the dependencies that are mentioned in your package.json file. See the documentation of npm install.
Remove global npm
Note that we don't have to keep updating nvm. We can just upgrade node.
$ whereis npm npm: /usr/bin/npm /home/brb/.nvm/versions/node/v15.4.0/bin/npm # sudo apt remove npm $ nvm install --lts node $ nvm list $ nvm uninstall v15.4.0 $ nvm list
yarn
Package dependencies manager.
It's number 3 on brew requests.
Yarn has been used by paper-pi. See E-Ink Display for Daily News, Weather and More.
Less
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
Less runs inside Node, in the browser and inside Rhino.
Install/update npm - Node Package Manager
As you can see from the error message, the node in my Odroid ubuntu 14.04 system is kind of old. Since npm is part of node, we want to update node first. Fortunately node provides a binary for ARM system too.
$ npm install -g less npm http GET https://registry.npmjs.org/less npm http 304 https://registry.npmjs.org/less npm WARN engine [email protected]: wanted: {"node":">=0.12"} (current: {"node":"v0.10.25","npm":"1.3.10"}) $ # Install the current version of node/nodejs for my OS (ARM v7). $ wget https://nodejs.org/dist/v4.4.5/node-v4.4.5-linux-armv7l.tar.xz | tar xJ $ PATH=/home/odroid/Downloads/node-v4.4.5-linux-armv7l/bin:$PATH; export PATH
Install Less
$ # Method 1. Install less via npm. No sudo required $ # the '-g' option is to make the module avaiable globally instead of under the current directory $ npm install -g less /home/odroid/Downloads/node-v4.4.5-linux-armv7l/bin/lessc -> /home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules/less/bin/lessc [email protected] /home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules/less ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) └── [email protected] ([email protected]) $ # Method 2. Install less via bow (depending on npm). No sudo required $ npm install -g bower /home/odroid/Downloads/node-v4.4.5-linux-armv7l/bin/bower -> /home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules/bower/bin/bower [email protected] /home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules/bower $ which bower /home/odroid/Downloads/node-v4.4.5-linux-armv7l/bin/bower $ bower install less bower not-cached https://github.com/less/less.git#* bower resolve https://github.com/less/less.git#* bower checkout less#v2.7.1 bower resolved https://github.com/less/less.git#2.7.1 bower install less#2.7.1 $ ls -l /home/odroid/Downloads/node-v4.4.5-linux-armv7l/bin total 21740 lrwxrwxrwx 1 odroid odroid 35 Jun 12 07:23 bower -> ../lib/node_modules/bower/bin/bower lrwxrwxrwx 1 odroid odroid 34 Jun 12 07:32 lessc -> ../lib/node_modules/less/bin/lessc -rwxr-xr-x 1 odroid odroid 22261036 May 24 13:30 node lrwxrwxrwx 1 odroid odroid 38 May 24 13:30 npm -> ../lib/node_modules/npm/bin/npm-cli.js $ lessc -v lessc 2.7.1 (Less Compiler) [JavaScript]
As you can see all node.js packages are installed under the node directory. If node-v4.4.5-linux-armv7l/bin was added to $PATH in .bashrc after we install nodejs, we won't need to include all other binary directories (installed via npm) to $PATH individually.
testing under Node, require(), NODE_PATH variable
$ node > var less = require('less'); Error: Cannot find module 'less' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at repl:1:12 at REPLServer.defaultEval (repl.js:262:27) at bound (domain.js:287:14) at REPLServer.runBound [as eval] (domain.js:300:12) at REPLServer.<anonymous> (repl.js:431:12) at emitOne (events.js:82:20) > var less = require('/home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules/less'); undefined > less.render('.class { width: (1 + 1) }', function (e, output) { ... console.log(output.css); ... }); .class { width: 2; } undefined >
It is weird that less module was installed globally via npm but node cannot find it. We need to specify the full path.
- https://nodejs.org/api/modules.html
- http://www.bennadel.com/blog/2169-where-does-node-js-and-require-look-for-modules.htm
A solution is to set NODE_PATH environment variable.
$ export NODE_PATH=/home/odroid/Downloads/node-v4.4.5-linux-armv7l/lib/node_modules $ node > var less=require('less') undefined
Examples
Guessing game
Learn JavaScript by writing a guessing game
Mario game
HTML5 Canvas and JavaScript Mario Game Tutorial