doMath is a powerful calculator, just type out the equation you want to solve and doMath! Examples to try: 4+2*3 2-4^6+2 2/8*(2+11)-3*5+4 1&1*1|0 0b1001|0b0110 0xFA +1 f=4; f*5 Math.random() lo=2;hi=6;Math.round(Math.random()*(hi-lo)+lo) Math.PI Math.PI.toFixed(2) Math.round(56.78) Math.ceil(54.3) Math.floor(35.6) 255..toString(16) parseInt("ff", 16)
form | form action=. method=post | ||
textarea | textarea | ||
button | button type=button | ||
label | label for=input | ||
select | select option | ||
text | input type=text | ||
submit | input type=submit | ||
button | input type=button | ||
file | input type=file | ||
hidden | input type=hidden | ||
checkbox | input type=checkbox | ||
radio | input type=radio | ||
range | input type=range | ||
input type=email | |||
number | input type=number | ||
password | input type=password | ||
color | input type=color | ||
date | input type=date | ||
datetime-local | input type=datetime-local | ||
image | input type=image | ||
search | input type=search | ||
tel | input type=tel | ||
url | input type=url | ||
month | input type=month | ||
time | input type=time | ||
week | input type=week | ||
reset | input type=reset |
You need to use a file host/web server to use your own files. Getting and paying for your own domain and web hosting is the best way because you can set up HTTPS, but if you're just testing things, you can use HFS, a free webserver you can use locally: HFS download You just point the src to http://127.0.0.1/file.name to get to your files.
Buttons: | ||
---|---|---|
Run | Places HTML, CSS and Javascript in the Iframe. Do this if you make changes to any code you'd like to see. CTRL+` (backtick) | |
Save | Prompts for a name and saves your HTML, CSS and Javascript into one file. You can also test the saved file, as is, in your browser. Remember to save as often as required! CTRL+S also saves without asking for a filename. A downside of working in the same area that you test in, if you freeze the browser with Javascript loop gone wild, you may have to kill the browser task. | |
Open | Loads files saved by Save button. Can load other HTML files but you have to separate CSS and Javascript. CTRL+O | |
Split | Split screen mode toggle, see two tabs. CTRL+Q | |
Fscrn | Open work area full screen. You can use Hotkeys listed below to change tabs. ESC returns to normal. This is different than F11 fullscreen. | |
Hotkeys |
F12 most browsers open or close the debugger. F11 most browsers should go fullscreen. CTRL+1 to CTRL+9 to switch to the corresponding tabs CRTL+0 switches to help. (Basically the order on the keyboard.) Note: while in the iframe tab, CTRL+[0 to 9] may not work!
While in HTML, CSS or Javascript tabs |
Tabs: | ||
---|---|---|
HTML | HTML content goes here. Press F1 to see settings. | |
CSS | Write CSS here. Press F1 to see settings. | |
Javascript | Javascript, make your webapp do things! Press F1 to see settings. | |
Iframe | For testing your website. Press run to load your data from the previous tabs. | |
Calc | Advanced Javascript calculator. Hex and base64 conversions | |
Regex | Test Regular Expressions. Top is the haystack. In the middle you define the needle and the bottom displays results and errors. Regex cheatsheet below. | |
MakeTable | Create an empty, static HTML table by defining the rows/cols and press createNew. If you have a CSV file, Comma Seperated Values, common to spreadsheet users, use the fromCSV button. You can choose the separator after you pick a file. Line 1 in the CSV file is the header. Click toHTML* to copy code to the HTML tab. | |
MakeForm | These inputs are used to get data from the user. If you are making a form to submit to a server you'll need the form action first, you don't need it if using the inputs locally. Now add what you like to your form. Click toHTML* to copy code to the HTML tab. | |
Notes | Currently for writing notes, this tab may change! Notes aren't saved! | |
*the toHTML button sends the code to the right tabs, you have to click inside the edit area to focus the input before the code shows up. Sometimes it will also add code to CSS or Javascript, be sure to check those tabs too. |
Flags: (after the end /) | ||
---|---|---|
g | global match | |
i | case insensitive; x=X | |
m | ^ and $ match on lines |
Character: (used as is, match one character) | ||
---|---|---|
\d | any digit [0-9] | |
\D | any non digit [^0-9] | |
\w | any alphanumetric [a-zA-Z0-9_] | |
\W | any non alphanumetric [^a-zA-Z0-9_] | |
\s | matches whitespace | |
\S | matches non whitespace | |
\t | horizontal tab | |
\r | carriage return | |
\n | linefeed | |
\v | vertical tab | |
\f | form feed | |
\xff | matches character with hex code FF | |
\b | matches word boundry | |
\B | matches non word boundry | |
\ | treat as literal, characters not mentioned above | |
. | any non line ending [^\n\r] | |
^ | matches start | |
$ | matches end |
Groups/Ranges: | ||
---|---|---|
[a-d] | one of the range a-d [abcd] | |
[^a-z] | one not in the range a-z | |
[a|z] | a or z | |
(a) | capture groups |
Quantifiers: (used after a character) | ||
---|---|---|
* | 0 or more | |
+ | 1 or more | |
? | 0 or 1 | |
{4} | exactly four | |
{2,} | two or more | |
{1,4} | between 1 and 4 | |
? | non greedy (use after quantifier) |
Javascript | ||
---|---|---|
#id | document.getElementById("id"); | |
.class | document.getElementsByClassName("class"); | |
htmltag | document.getElementsByTagName("htmltag"); | |
query | document.querySelector(" .class OR #id OR input[name='user'] "); | |
comment1 | //comment line | |
comment2 | /* comment blocks can span multiple lines! */ | |
if | if (x==y && xx>yy || z=="hi") { //do code; } | |
ternary | z = b==true ? 1 : 0; Sets variable z to 1 if b is true, otherwise z becomes 0. | |
var | defines a variable, used to store data that changes. Case Sensitive | |
const | defines a constant, store data that never changes. Case Sensitive | |
objects | var ob = [ first:1 , second:"two" ] | |
arrays | var ar = [ 1 , "two" , 3 ] | |
.concat() | join array or strings; var1.concat(var2) | |
.[last]indexOf() | find in array or string; var.indexOf('x') | |
.join() | convert array into string | |
.pop() | removes last item from array | |
.shift() | removes first item from array | |
.push() | adds to end of array | |
.unshift() | adds to start of array | |
.charAt(x) | character at x | |
# to ascii | String.fromCharCode(65) | |
ascii to # | "A".charCodeAt(0) | |
.replace() | Replace text str.replace("old", "new"); via string. str.replace(/old/i, "new"); via regex. | |
.search() |
Find text position str.search("old"); via string str.search(/old/i); by regex. | |
.match() | Match text via regex str.match(/text/g); | |
more regex | There are matchAll() replaceAll() too. See Regex section as well. | |
.substr(st,ln) | extract text based on locations. | |
.toLowerCase() | Lowercase a string; var.toLowerCase() | |
.toUpperCase() | Uppercase a string; var.toUpperCase() | |
atob() | convert base64 to string | |
btoa() | convert string to base64 | |
String() | convert number to string | |
Number() | convert string to number | |
console.log() | outputs debug info to console | |
alert() | popup message, use sparingly | |
prompt() | asks users input in popup | |
confirm() | popup yes or no | |
eval() | pronounced evil ;) 'executes' a javascript string. Use sparingly! Only if needed! | |
function x(){} | function xx(yy=1,zz=2){ //do code; }; | |
for(;;){} | for (i=1;i<5;i++){ //do code; }; | |
while(){} | while(i>5){ //do code; }; | |
Math | see Calc tab for examples. | |
ajax | Loads data from server into variable.const xhttp = new XMLHttpRequest(); xhttp.onload = function() { console.log(responseText); } xhttp.open("GET". "url". true); xhttp.send(); | |
setTimeout(funct,ms) | call function, single event: var=setTimeout(fun,400); | |
setInterval(funct,ms) | calls function at regular interval var=setInterval(fun,400); | |
try catch | catch and handle javascript errors. |
Mouse events | |
---|---|
onmousemove | called when mouse is moving over an element |
onmouseover | called when mouse moves onto an element or child |
onmouseenter | called when mouse moves onto an element |
onmouseleave | called when mouse leaves an element |
onmousedown | called when mouse button is pressed down |
onmouseup | called when mouse button is released |
onclick | called when a mouse button is clicked |
ondblclick | called when a mouse button is double clicked |
Mouse data | |
clientX|Y | mouse coords from event, relative to window |
offsetX|Y | mouse coords from event, relative to target element |
pageX|Y | mouse coords from event, relative to webpage |
screenX|Y | mouse coords from event, relative to screen |
movementX|Y | returns coords relative to last mousemove event |
button(s) | which button or buttons were pressed in the event |
relatedTarget | Element related to event |
example | <body><canvas onmousemove="draw(event)"></canvas> <br>Hover mouse over the box, look in console. <script> function draw(e){ console.log(e.offsetX+"x"+e.offsetY); } </script><style> canvas{border:1px green solid;} </style></body> |
Keyboard events | |
---|---|
keypress | Event called when key is pressed |
keydown | Event called when key is down |
keyup | Event called when key is released |
Keyboard data | |
charCode | character code from event |
keyCode | Unicode key code from event |
code | key code from event |
key | key value from event |
repeat | is key held down in event |
shiftKey | is SHIFT held down? |
altKey | is ALT held down? |
ctrlKey | is CTRL held down? |
location | location of key on keyboard |
example | <body onkeydown="test(event)"><div id="keyz">Click here and type!<br></div> <script> function test(e){ var tmp=document.getElementById("keyz"); tmp.innerHTML= e.keyCode==13 ? tmp.innerHTML+"<br>" : tmp.innerHTML+e.key; } </script></body> |
Canvas Cheatsheet | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTML | <canvas id="can">Your browser does not support the canvas tag.</canvas> | |||||||||||||||||||||
Javascript | const can = document.getElementById("can"); const ctx = can.getContext("2d"); can.width=400; can.height=400; // OR use what's available in the window: can.width=window.innerWidth; can.height=window.innerHeight; | |||||||||||||||||||||
clear | // Clear the canvas ctx.clearRect(0, 0, can.width, can.height); | |||||||||||||||||||||
*notes* | x and y will refer to a location a and b will refer to another location w and h are width and height. r is radius rs=radians start point (0 to ~6.2831)
| |||||||||||||||||||||
rectangle | ctx.beginPath(); ctx.lineWidth = 3; ctx.rect(x, y, w, h); ctx.strokeStyle = "#ff0000"; ctx.stroke(); ctx.fillStyle = "#00ff00"; ctx.fill(); | |||||||||||||||||||||
line | ctx.lineWidth = 3; ctx.moveTo(x, y); ctx.lineTo(a1, b1); ctx.lineTo(a2, b2);//etc,etc ctx.strokeStyle = "#000000"; ctx.stroke(); | |||||||||||||||||||||
circle | ctx.beginPath(); ctx.arc(x, y, r, rs * Math.PI, re * Math.PI); ctx.lineWidth = 3; ctx.stroke(); ctx.fillStyle = "#005588"; ctx.fill(); | |||||||||||||||||||||
text | ctx.font = "50px Tahoma"; ctx.fillStyle = "#ffff00"; ctx.fillText("Hi Mom", x, y); ctx.strokeText("Hi Mom", 8, 45); | |||||||||||||||||||||
image 1 | //gets image from HTML <img id="px" src=""> tag | |||||||||||||||||||||
image 2 | //load image from webserver img = new Image(); img.onload = function (){ ctx.drawImage(img, x, y, w, h); } img.src="img.jpg"; |
CSS | |
---|---|
class | .class{} |
id | #id{} |
tag | body{} |
all listed | body, $id, .class{} |
img inside div | div img{} |
div via class | div.class{} |
div via ID | div#id{} |
anchor | a:hover a:active a:visited a:link a[target] |
input | input:checked input:(dis|en)abled input:read-only input:focus input:required |
text | {color:red;} |
background | {background-color:#000000; background-image:; background-repeat:; background-size:; } |
border | {border:solid 1px black;} [solid dotted dashed none double] |
outline | {outline:solid 1px black;} [solid dotted dashed none double] |
pointer | {cursor:default;} [auto default none pointer help grab grabbing not-allowed move text crosshair wait zoom-in zoom-out] |
(un)hide | {display:none|block;} |
font | {font-family:; font-size:; } |
{sizes} | { {properties} :auto;} [auto 10px 0 5em] } |
{properties} | { width height top bottom left right max-width min-width max-height min-height padding border margin : {sizes}; } |
Examples: | {width:10px; height:auto; min-width:500px; max-height:100px;} |
overflow | hide display scroll |
layers | z-index |
HTML | |
---|---|
head | <head></head> this is ideally where you define your extra content. See title, style, script, meta and link below. |
title | <title>name</title> is used to name your page. |
style | <style></style> provides inline CSS on a per page basis. See link to include external CSS/stylesheets. |
script | <script></script> for both inline or external javascript. inline code goes between the opening and closing javascript tags, however external javascript is loaded like this: <javascript src="doStuff.js"></javascript> Please note using this tag in the <head> is a good area for storing global variables and functions. Running code from the <head> before the rest of the page loads will usually fail though, you can also use script tags in the body. |
meta | <meta></meta> for describing the page using undisplayed information meant for the browser or search engine. |
link | <link rel="" href=""></link> Links (includes) external resources. rel= defines the resource and href= is the location on the server. Some common values for rel are; stylesheet and icon. |
body | <body></body> this is where all of your visible content goes. |
img | <img src=""></img> include an external image in the body. |
anchor | <a href=""></a> Anchors are links to other pages. Careful clicking links within the iframe, it could take you to another website or page, losing your unsaved work here. |
div | <div id="" class=""></> Divs are used to contain content, useful for styling via CSS or organization. Use an id or class to identify it later in CSS or javascript. |
pre | <pre></pre> preformatted text. HTML doesn't preserve line breaks or spaces, pre lets you type more naturally. |
br | <br> This is used to simulate a line break, otherwise everything you add in HTML will all be on the same line. There is no closing tag. |
p | <p></p> Paragraph is used to add space between sections of text. Similar to pressing enter twice in a word document. The closing tag is optional, so it can be used like <br>. |
canvas | <canvas></canvas> Ordinarily, HTML is pretty static and unchanging. This tag lets you do all kinds of fun dynamic things like; animation, games, interactive interfaces and so on. Use javascript to utilize this fully. |
form | <form action="URL" method="POST"></form> Forms are used to send data to a server. Action is the url to send the data, method is usually GET or POST. |
input | <input type="" name="" value=""> used to store or get input from the user, see MakeForm tab for examples. These can also used by javascript via ID to get information. What you define NAME as, is the variable used to hold the VALUE when the form is submitted. ex: name="user" value="Bob" |
textarea | <textarea></textarea> A multiline text entry that can be resized by the user. You can predefine text by placing it between the tags. |
button | <button></button> Similar to <input type="button">. Great for javascript interactions via ID. |
h1 - h6 | <h1></h1> Different sized headers, this can also be done in CSS on a div with text. |
hr | <hr> horizontal rule is used to separate HTML or text. It looks like this: |
iframe | <iframe src=""></iframe> Lets you define a seperate HTML document within the one you have. |
object | <object data=""></object> embeds external content into HTML |
progress | <progress value="50" max="100" id="load"></progress> great for javascript to show a delay or progress. 75% |
table | <table></table> Used to make tables or grids of data. The MakeTable tab makes this easier. |
*misc | There are many more HTML tags, some are obsoleted by HTML5 or CSS though. Feel free to look these up as you like. I've included what I consider the most popular or relevant. |
To start using three.js - Take a look at the examples on https://threejs.org/ - I recommended to download and extract the zip from https://github.com/mrdoob/three.js/archive/master.zip the examples/js folder list all modules you can use, like OrbitControls see below to see how to add those modules to your script. - Here is the three.js getting started example on their site: You need to put these lines in the right section Once added you will see a spinning cube when you click Run. -- HTML, add to head tag: <script src="./three/three.min.js"></script> <script src="./three/js/controls/OrbitControls.js"></script> -- Javascript, add to bottom: const scene = new THREE.Scene(); //const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); //renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( 400,400 ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; const controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.maxPolarAngle = Math.PI * 0.5; const animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate();