Cheatography
https://cheatography.com
Cheetsheat covering basics of Javascripts
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Key points
Press F12 to access JS conole on Windows |
Intro
Logging into console |
console.log("Hello, World!",variableName); |
Making an alert |
alert("Hello, World!",variableName); |
Prompt user input |
var age = prompt("How old are you?");console.log(age); |
Confirm decision input |
window.confirm("Are you sure you want to delete this?"); //Returns True/False |
DOM manipulation
Selection of 1 by Id |
document.getElementById("elementId") |
Selection of all by Class name |
document.getElementByClassName("elementId") |
Selection of 1 by tag name |
document.getElementByTagName("elementTag") |
Selection of 1 by name |
document.getElementByName("elementName") |
Selection of 1 by Query |
document.querySelector("query") |
Selection of all by Query |
document.querySelectorAll("query") |
DOM API using canvas elements
var canvas = document.createElement('canvas'); |
canvas.width = 500; |
canvas.height = 250; |
var ctx = canvas.getContext('2d'); |
ctx.font = '30px Cursive'; |
ctx.fillText("Hello world!", 50, 50); |
document.body.appendChild(canvas); |
DOM API using SVG
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
svg.width = 500; |
svg.height = 50; |
var ctx = canvas.getContext('2d'); |
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
text.setAttribute('x', '0'); |
text.setAttribute('y', '50'); |
text.style.fontFamily = 'Times New Roman'; |
text.style.fontSize = '5 |
text.textContent = 'Hello world!'; |
svg.appendChild(text); |
document.body.appendChild(svg); |
DOM API using Image file
var img = new Image(); |
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg'; |
document.body.appendChild(img); |
|
