Javascript: Difference between revisions

From 太極
Jump to navigation Jump to search
Line 190: Line 190:
== Guessing game ==
== Guessing game ==
[https://opensource.com/article/21/1/learn-javascript Learn JavaScript by writing a guessing game]
[https://opensource.com/article/21/1/learn-javascript Learn JavaScript by writing a guessing game]
== Mario game ==
[https://youtu.be/4q2vvZn5aoo HTML5 Canvas and JavaScript Mario Game Tutorial]


== [https://github.com/haroldtreen/epub-press EpubPress] ==
== [https://github.com/haroldtreen/epub-press EpubPress] ==

Revision as of 14:08, 6 April 2022

Some resources

Book

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

npm - node.js package manager

  • 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. 
      $ 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 
      $ sudo apt update
$ sudo apt install nodejs npm
$ nodejs --version

npm install

https://docs.npmjs.com/cli/install

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.

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

EpubPress

TypeScript

Retrieved from "https://wiki.taichimd.us/index.php?title=Javascript&oldid=32242"