{"id":864,"date":"2021-02-05T22:22:04","date_gmt":"2021-02-05T22:22:04","guid":{"rendered":"https:\/\/dft.wiki\/?p=864"},"modified":"2026-06-09T13:07:14","modified_gmt":"2026-06-09T17:07:14","slug":"java-script-js-cheat-sheet","status":"publish","type":"post","link":"https:\/\/dft.wiki\/?p=864","title":{"rendered":"Java Script (JS) Cheat Sheet"},"content":{"rendered":"<p>Having an adequate environment to write code is essential for syntax highlighting and spell checking. Consider using Visual Studio Code [<a href=\"https:\/\/code.visualstudio.com\/download\">Link<\/a>] or Sublime Text [<a href=\"https:\/\/www.sublimetext.com\/download\">Link<\/a>].<\/p>\n<pre>sudo apt install code -y\r\nsudo apt install sublime-text -y<\/pre>\n<p>There are also web applications that let you write and execute JavaScript, useful for tests and study: Scrimba [<a href=\"https:\/\/scrimba.com\/\">Link<\/a>] and Codepen [<a href=\"https:\/\/codepen.io\/\">Link<\/a>].<\/p>\n<hr \/>\n<p><strong>COMMENTS<\/strong><\/p>\n<pre>\/\/ this is a comment, ignore this line\r\n\r\n\/*\r\nthis is a comment, ignore all the lines between these tags\r\n*\/<\/pre>\n<p><strong>DATA TYPES<\/strong><\/p>\n<ul>\n<li>Undefined\n<ul>\n<li>Variable created but not assigned a value yet.<\/li>\n<\/ul>\n<\/li>\n<li>Null\n<ul>\n<li>Explicitly set to no value.<\/li>\n<\/ul>\n<\/li>\n<li>Boolean\n<ul>\n<li>true\/false or 1\/0.<\/li>\n<\/ul>\n<\/li>\n<li>String\n<ul>\n<li>A sequence of characters.<\/li>\n<\/ul>\n<\/li>\n<li>Symbol\n<ul>\n<li>An immutable, unique primitive value.<\/li>\n<\/ul>\n<\/li>\n<li>Number\n<ul>\n<li>Numeric values.<\/li>\n<\/ul>\n<\/li>\n<li>Object\n<ul>\n<li>Can store many different key-value pairs.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>DECLARING VARIABLES AND CONSTANTS<\/strong><\/p>\n<pre><strong>var<\/strong> globalVariable;\r\n\r\n<strong>let<\/strong> scopedVariable = \"content\";\r\n\r\n<strong>const<\/strong> CONSTANTNAME = \"content\";<\/pre>\n<p><strong>PRINT TO CONSOLE<\/strong><\/p>\n<pre>console.log(varNameB);\r\nconsole.dir(document)<\/pre>\n<p><strong>MATH OPERATORS<\/strong><\/p>\n<pre>var numName = 1 + 10;\r\nvar numName = 1 - 10;\r\nvar numName = 1 \/ 10;\r\nvar numName = 1 * 10;\r\nvar numName ++\r\nvar numName --\r\nvar numName = 1 + 10;\r\nvar numName = 11 % 3;\r\nvar numName += 10;\r\nvar numName -= 10;\r\nvar numName *= 10;\r\nvar numName \/= 10;<\/pre>\n<p><strong>ADVANCED MATH<\/strong><\/p>\n<pre>var numName = Math.round(1.75);\r\nvar numName = Math.sqrt(9);\r\nvar numName = Math.pow(2, 8);\r\nvar numName = Math.random();\r\nvar numName = Math.floor(5.99);<\/pre>\n<p><strong>STRING<\/strong><\/p>\n<pre>var strName = \"Hello\" + \"!\";\r\nvar strName = \"'\\\"\";\r\nvar strName = '\\'\"';\r\nvar strName = `'\"`;\r\nvar strName = '\\\\\\n\\t\\b\\f';\r\nvar strName += \" concatenate this text to the string.\";\r\nvar numName = strName.length;\r\nvar strFirst = strName[0];\r\nvar strLast = strName[strName.length - 1];\r\nvar numName = parseInt(strName);\r\nvar numName = parseInt(\"1010100010\", 2);\r\nvar numName = eval(\"a * x + b\");\r\nvar strName = `can have multiple lines\r\nand get variables such as ${numName}`;<\/pre>\n<p><strong>SHORTCUTS AND TIPS<\/strong><\/p>\n<pre>string = \"this is the <strong>\\\"<\/strong>escape<strong>\\\"<\/strong> character\";\r\n\r\nstring = 'now <strong>\"<\/strong> does not need escaping';\r\n\r\nstring = `now <strong>\"<\/strong> and <strong>'<\/strong> can be used freely`;\r\n\r\nconcatenate = \"string1\" <strong>+<\/strong> \"string2\";\r\n\r\nappend <strong>+=<\/strong> \"appends this string at the end\";\r\n\r\nstring = \"<strong>\\'\\\"\\\\\\n\\r\\t\\b\\f<\/strong>\";\r\n\r\nlength = string<strong>.length<\/strong>;\r\n\r\nsecondCharacter = string<strong>[1]<\/strong>;\r\n\r\nlastCharacter = string<strong>[string.length - 1]<\/strong>;\r\n\r\nconvertObjectsToString = JSON<strong>.stringify<\/strong>(object);\r\n\r\nrandNumber = <strong>Math.random()<\/strong>;\r\n\r\nconvertToInteger = <strong>parseInt<\/strong>(\"100\");\r\nconvertToDecimal = <strong>parseInt<\/strong>(\"100101100\", <strong>2<\/strong>);\r\n\r\nvariable = a &gt; b <strong>?<\/strong> true : false;\r\n\r\nvariable = a &gt; 0 <strong>?<\/strong> \"positive\" : num &lt; 0 ? \"negative\" : \"zero\";\r\n\r\n<strong>\"use strict\"<\/strong>;\r\n\r\n<strong>Object.freeze<\/strong>(objectName);\r\nvar magic = () <strong>=&gt;<\/strong> new Date();\r\n\r\nconst <strong>{attrib1 : a , attrib2 : b} = { attrib1: \"A\", attrib2: \"B\" };<\/strong>\r\n\r\nconst <strong>[z , , , , , y<\/strong>] = [1, 2, 3, 4, 5, 6];\r\n\r\nconst <strong>[a, b] = [b, a]<\/strong>;\r\nconst <strong>[a, b, ...newList]<\/strong> = list;\r\n\r\nconst <strong>[ ,  , ...newList]<\/strong> = list;\r\n\r\nconst returnObject = (var1, var2) <strong>=&gt;<\/strong> ({ var1, var2});\r\n\r\nconst stringName = `text <strong>${variableName}<\/strong>!next line.`;\r\n\r\ncapitalizeFirstCharacterOfString = string<strong>.charAt<\/strong>(0)<strong>.toUpperCase<\/strong>() + string<strong>.slice<\/strong>(1);\r\n\r\nlet x = document.forms[\"formName\"][\"elementName\"].value;\r\n\r\ndocument.getElementById(\"nameId\").src = \"img.jpg\";\r\n\r\n&lt;form name=\"formName\" action=\"\/page.php\" onsubmit=\"return validateForm()\" method=\"post\"&gt;\r\n\r\n&lt;input type=\"text\" name=\"elementName\" disabled&gt;\r\n\r\n&lt;input type=\"text\" name=\"elementName\" required&gt;\r\n\r\n&lt;button type=\"button\" onclick=\"document.getElementById('idName').style.color = 'red'\"&gt;Ack!&lt;\/button&gt;\r\n\r\n&lt;h2&gt;Text&lt;\/h2&gt;&lt;h2 onclick=\"this.innerHTML='Ooops!'\"&gt;Click here!&lt;\/h2&gt;\r\n\r\ndocument.getElementById(id).onclick = functionName(){ \/\/ tasks to be executed ; }<\/pre>\n<p><strong>EVENT LISTENERS<\/strong><\/p>\n<pre>document.getElementById(\"buttonName\").onclick = funcName;\r\ndocument.getElementById(\"buttonName\").addEventListener(\"click\", funcName);\r\nfunction funcName(e){\r\n  e.preventDefault();\r\n  console.log(e);\r\n  console.log(e.target.id);\r\n  console.log(e.altKey);\r\n}\r\n\r\nvar button = document.getElementById('button').addEventListener('click', function(){\r\n  console.log(1);\r\n});\r\n\r\nvar button = document.getElementById('button');\r\nbutton.addEventListener('dblclick', funcName);\r\nbutton.addEventListener('mousedown', funcName);\r\n\r\nvar table = document.getElementById('table');\r\ntable.addEventListener('mouseenter', funcName);\r\ntable.addEventListener('mouseover', funcName);\r\ntable.addEventListener('mousemove', funcName);\r\n\r\nvar textBox = document.querySelector('input[type=\"text\"]');\r\ntextBox.addEventListener('keydown', funcName)\r\ntextBox.addEventListener('input', funcName)\r\ntextBox.addEventListener('focus', funcName)\r\nfunction funcName(e){\r\n  console.log(e.target.value);\r\n}\r\n\r\nvar select = document.querySelector('select');\r\nselect.addEventListener('change', funcName);\r\n\r\nvar form = document.querySelector('form');\r\nform.addEventListener('submit', funcName);<\/pre>\n<p><strong>ARRAYS<\/strong><\/p>\n<pre>var arrayName = [\"text\", 10];\r\nvar arrayName = [[\"text\", 10],[99, true]];\r\nvar varName = arrayName[1][0];\r\narrayName.push(\"text\");\r\n\/\/ Add a value to the end of the array.\r\narrayName.unshift(\"text\");\r\n\/\/ Add a value to the beginning of the array.\r\nvar varName = arrayName.pop();\r\n\/\/ Get and remove the last value of the array.\r\nvar varName = arrayName.shift();\r\n\/\/ Get and remove the first value of the array.\r\narrayOne.concat(arrayTwo);\r\n\/\/ Concatenate two arrays.\r\nvar [ , a, , b] = arrayName;\r\nvar [ , , , arr] = arrayName;\r\nvar strName = arrayName.toString();\r\narrayName.sort();\r\narrayName.reverse();\r\n\r\nvar arrayName2 = arrayName1.map(funcName);\r\nfunction funcName(value){\r\n  return value * 10;\r\n}\r\n\r\nvar arrayName2 = arrayName1.filter(funcName);\r\nfunction funcName(value){\r\n  return value &gt; 5;\r\n}\r\n\r\nvar arrayName2 = arrayName1.reduce(funcName);\r\nfunction funcName(total, value){\r\n  return total + value;\r\n}<\/pre>\n<p><strong>IMPORT, EXPORT, AND REQUIRE<\/strong><\/p>\n<pre>\/\/ in index.js\r\nimport { functionName } from \".\/functions.js\";\r\nimport PI;\r\n\r\n\/\/ in functions.js\r\nexport const functionName = (var1, var2) =&gt; ({ var1, var2});\r\nexport const PI = 3.141592653589793238;\r\n\r\n\/\/ importing everything\r\nimport * as objectNameToStoreEverything from \"functions\";\r\n\r\n\/\/ exporting default\r\nexport default function subtract(x, y) { return x - y; };\r\n\/\/ importing default\r\nimport subtract from \"functions\";<\/pre>\n<p><strong>FUNCTIONS<\/strong><\/p>\n<pre>function functionName(a, b = 2){\r\n  console.log(a + b);\r\n  declaringGlobalVariable = 10;\r\n  var declaringLocalScope = 20;\r\n  return (a + b);\r\n};\r\n\r\nconst functionName = (function() {\r\n  return function functionName(...args){\r\n    return args.reduce((a, b) =&gt; a + b, 0);\r\n  };\r\n})();\r\n\r\nfunction* generatorName(){\r\n  yield 1;\r\n  yield 2;\r\n  return 3;\r\n}\r\nlet funcName = generatorName();\r\nalert(JSON.stringify(funcName.next()));\r\nalert(JSON.stringify(funcName.next().value));\r\nalert(JSON.stringify(funcName.next().done));\r\n\r\nconst arrayThree = (arrayOne, arrayTwo) =&gt; { return arrayOne.concat(arrayTwo) };\r\n\r\nconst arrayThree = (arrayOne, arrayTwo) =&gt; arrayOne.concat(arrayTwo);\r\n\r\nfunction funcName(firstArgument, secondArgument){\r\n  return firstArgument + secondArgument;\r\n}\r\n\r\nfunction funcName(...args){\r\n  return [...args];\r\n}\r\n\r\nvar funcExpressionName = function (a, b) { return a + b };\r\n\r\nvar myFunction = new Function(\"a\", \"b\", \"return a + b\");\r\nvar funcName = myFunction(5, 10);<\/pre>\n<p><strong>LOGICAL OPERATORS<\/strong><\/p>\n<ul>\n<li>==<\/li>\n<li>!=<\/li>\n<li>&lt;<\/li>\n<li>&gt;<\/li>\n<li>&lt;=<\/li>\n<li>&gt;=<\/li>\n<li>||\n<ul>\n<li>or<\/li>\n<\/ul>\n<\/li>\n<li>&amp;&amp;\n<ul>\n<li>and<\/li>\n<\/ul>\n<\/li>\n<li>===\n<ul>\n<li>Strict equality (does not convert types before comparing).<\/li>\n<\/ul>\n<\/li>\n<li>!==<\/li>\n<\/ul>\n<p><strong>CONDITIONS AND LOOPS<\/strong><\/p>\n<pre>if (bolName){\r\n  \/\/ execute\r\n} else if (!bolName){\r\n  \/\/ execute\r\n} else if (numName != 10){\r\n  \/\/ execute\r\n} else {\r\n  \/\/ execute\r\n}\r\n\r\nwhile(numName &lt; 10){\r\n  numName++;\r\n  \/\/ execute\r\n  if(numName &lt; 0)\r\n    break;\r\n  if(numName == 0)\r\n    continue;\r\n};\r\n\r\nfor (let i = 0; i &lt; 10; i++){\r\n  \/\/ execute\r\n}\r\n\r\ndo {\r\n  \/\/ execute\r\n} while (numName &lt; 10)\r\n\r\nswitch(numName){\r\n  case 1:\r\n    strName = \"numName is strictly equal to 1\";\r\n    break;\r\n  case \"1\":\r\n    strName = \"numName is a string with number 1\";\r\n    break;\r\n  case 100:\r\n  case 101:\r\n  case 102:\r\n    strName = \"numName is 100, 101, or 102\";\r\n    break;\r\n}<\/pre>\n<p><strong>OBJECTS<\/strong><\/p>\n<pre>var objName = {\r\n  \"Name\": \"John\",\r\n  \"Age\": 20,\r\n};\r\nvar strName = objName.Name;\r\nvar numName = objName[\"Age\"];\r\ndelete objName.age;\r\nobjName[\"Family Name\"] = \"Smith\";\r\nvar bolName = objName.hasOwnProperty(\"Name\");\r\nvar { x : a, y : b, z : c } = objName;\r\n\r\n\/\/ Using the new keyword to create an Object:\r\n\r\nvar objName2 = new Object();\r\nobjName2.name = \"peter\";\r\nobjName2.age = 30;<\/pre>\n<p><strong>CONSTRUCTOR, GETTER, AND SETTER<\/strong><\/p>\n<pre>function objName3(name, age){\r\n  this.name = name;\r\n  this.age = age;\r\n}\r\n\r\nclass className {\r\n  constructor(value){\r\n    this._property = value;\r\n  }\r\n  get property(){\r\n    return this._property;\r\n  }\r\n  set property(value){\r\n    this._property = value;\r\n  }\r\n}\r\nconst objName = new className(100);\r\nvar numName = objName.property;\r\nobjName.property = 50;\r\nvar numName = objName.property;<\/pre>\n<p><strong>TERNARY OPERATOR<\/strong><\/p>\n<pre>var strName = a === b ? \"equal\" : \"different\";\r\nvar strName = numName &gt; 0 ? \"positive\" : numName &lt; 0 ? \"negative\" : \"zero\";<\/pre>\n<p><strong>JAVASCRIPT WITH HTML INTERACTION<\/strong><\/p>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;script language=\"javascript\" type=\"text\/javascript\"&gt;\r\ndocument.write(\"Hello!\");\r\n&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;p id=\"idName\"&gt;&lt;\/p&gt;\r\n&lt;\/body&gt;&lt;script&gt;\r\nvar arrayName = [\"A\",\"B\",\"C\"];\r\ndocument.getElementById(\"idName\").innerHTML = arrayName;\r\n\r\narrayName.forEach((item, index, array) =&gt; { console.log(item, index); });\r\n&lt;\/script&gt;&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;button id=\"idName\"&gt;Send&lt;\/button&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\nvar\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;button id=\"idName\"&gt;Click&lt;\/button&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\ndocument.getElementById(\"idName\").onclick = function(){ alert(\"Hello!\") }\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;button onclick=\"funcName()\"&gt;Click&lt;\/button&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\nfunction funcName(){\r\n  alert(\"Hello!\")\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;body&gt;\r\n&lt;p id=\"idName\"&gt;&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\nvar objName = {\r\n  arrayName: [\"A\",\"B\",\"C\"],\r\n  info(){\r\n    this.arrayName.forEach(function(tag){\r\n      console.log(tag)\r\n    })\r\n  }\r\n}\r\nobjName.info()\r\ndocument.getElementById(\"idName\").innerHTML = objName.arrayName;\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;head&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nfunction funcName(){\r\n  if(document.myForm.email.value == \"\"){\r\n    alert(\"Insert your e-mail.\");\r\n    document.myForm.email.focus();\r\n    return false;\r\n  } else {\r\n    return true;\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;&lt;body&gt;\r\n&lt;form name=\"myForm\" onsubmit=\"return(funcName());\" action=\"\/admin\"&gt;\r\n&lt;input name=\"email\" placeholder=\"E-Mail\" type=\"text\"&gt;\r\n&lt;button type=\"submit\"&gt;Enter&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;&lt;head&gt;\r\n&lt;script&gt;\r\nfunction funcName(){\r\n  var email = document.getElementById(\"email\").value;\r\n  var regex = \/^\\S+@\\S+\\.\\S+$\/;\r\n\r\n  if (regex.test(email)){\r\n    alert(\"Validated!\");\r\n    return true;\r\n  } else {\r\n    alert(\"Not valid!\");\r\n    document.myForm.email.focus();\r\n    return false;\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;&lt;body&gt;\r\n&lt;form&gt;\r\n&lt;input id=\"email\" placeholder=\"E-Mail\" type=\"text\"&gt;\r\n&lt;button onclick=\"funcName()\" type=\"button\"&gt;Validate&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;&lt;\/html&gt;<\/pre>\n<pre>&lt;script&gt;\r\n(function(){\r\n  alert(\"Hello!\")\r\n})()\r\n&lt;\/script&gt;<\/pre>\n<p><strong>STATES<\/strong><\/p>\n<p>Promises (multi-threading):<\/p>\n<ul>\n<li>Pending<\/li>\n<li>Settled\n<ul>\n<li>Fulfilled<\/li>\n<li>Rejected<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>States:<\/p>\n<ul>\n<li>then\n<ul>\n<li>Callback when resolved\/fulfilled.<\/li>\n<\/ul>\n<\/li>\n<li>catch\n<ul>\n<li>Callback when rejected.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"index.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Title&lt;\/h1&gt;\r\n&lt;script src=\"index.pack.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\nlet actionName = new Promise(function(resolve, reject){\r\n  varName = true;\r\n  if (varName)\r\n    resolve();\r\n  else\r\n    reject();\r\n});\r\n\r\nactionName.then(function(){\r\n  document.write(\"Resolved\");\r\n}).catch(function(){\r\n  document.write(\"Rejected\");\r\n})\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>PROMISE<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link rel=\"stylesheet\" href=\"index.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Title&lt;\/h1&gt;\r\n&lt;script src=\"index.pack.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;script&gt;\r\nlet actionName = new <strong>Promise<\/strong>(function(resolve, reject){\r\n  varName = true;\r\n  if (varName)\r\n    resolve();\r\n  else\r\n    reject();\r\n  }\r\n);\r\n\r\nactionName.<strong>then<\/strong>(function(){ document.write(\"Resolved\"); }).<strong>catch<\/strong>(function(){ document.write(\"Rejected\"); });\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Items&lt;\/title&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;List of items:&lt;\/h1&gt;\r\n&lt;form action=\"\" onsubmit=\"return(sendValidation());\" method=\"post\"&gt;\r\n&lt;input type=\"checkbox\" id=\"checked\" name=\"items[]\" value=\"item1\" checked&gt;Item 1&lt;br&gt;\r\n&lt;input type=\"checkbox\" id=\"checked\" name=\"items[]\" value=\"item2\"&gt;Item 2&lt;br&gt;\r\n&lt;input type=\"submit\" value=\"Send\"&gt;\r\n&lt;\/form&gt;\r\n&lt;script&gt;\r\nfunction sendValidation(){\r\n  checkBoxCounter = $(\"input:checked\").length;\r\n  if(checkBoxCounter &gt;= 1){\r\n    if (confirm(\"Do you want to send \" + checkBoxCounter + \" item(s)?\")) {\r\n      return true;\r\n    } else {\r\n      return false;\r\n    }\r\n  } else {\r\n    alert(\"You must check at least one item.\");\r\n    return false;\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<pre>&lt;h1 id=\"id01\"&gt;Old Heading&lt;\/h1&gt;\r\n&lt;script&gt;\r\nconst element = document.getElementById(\"id01\");\r\nelement.innerHTML = \"New Heading\";\r\n&lt;\/script&gt;<\/pre>\n<pre>&lt;p id=\"demo\"&gt;&lt;\/p&gt;\r\n&lt;script&gt;\r\ndocument.getElementById(\"demo\").innerHTML = \"Hello World!\";\r\n&lt;\/script&gt;<\/pre>\n<p>CAPTCHA<\/p>\n<pre>&lt;form action=\"submit.php\" method=\"post\"<strong> onsubmit=\"return validateCaptcha();\"<\/strong>&gt;\r\n&lt;div <strong>id=\"captcha\"<\/strong>&gt;&lt;\/div&gt;\r\n&lt;input type=\"text\" placeholder=\"Type the Captcha here\" <strong>id=\"cpatchaTextBox\"<\/strong>\/&gt;\r\n&lt;input name=\"submit\" type=\"submit\" value=\"Send\" \/&gt;\r\n&lt;\/form&gt;<\/pre>\n<pre>&lt;script&gt;\r\n  var code;\r\n\r\n  function <strong>createCaptcha()<\/strong> {\r\n    document.getElementById('captcha').innerHTML = \"\";\r\n    var charsArray = \"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&amp;*\";\r\n    var lengthOtp = 6;\r\n    var captcha = [];\r\n    for (var i = 0; i &lt; lengthOtp; i++) {\r\n      var index = Math.floor(Math.random() * charsArray.length + 1);\r\n      if (captcha.indexOf(charsArray[index]) == -1)\r\n        captcha.push(charsArray[index]);\r\n      else i--;\r\n    }\r\n    var canv = document.createElement(\"canvas\");\r\n    canv.id = \"captcha\";\r\n    canv.width = 100;\r\n    canv.height = 50;\r\n    var ctx = canv.getContext(\"2d\");\r\n    ctx.font = \"25px Georgia\";\r\n    ctx.strokeText(captcha.join(\"\"), 0, 30);\r\n    code = captcha.join(\"\");\r\n    document.getElementById(\"captcha\").appendChild(canv);\r\n  }\r\n\r\n  function <strong>validateCaptcha()<\/strong> {\r\n    debugger\r\n    if (document.getElementById(\"cpatchaTextBox\").value == code) {\r\n      return true;\r\n    } else {\r\n      event.preventDefault();\r\n      alert(\"Please type the generated Captcha in the box.\");\r\n      <strong>createCaptcha();<\/strong>\r\n      return false;\r\n    }\r\n  }\r\n\r\n  (function autorun(){\r\n    <strong>createCaptcha()<\/strong>;\r\n  })();\r\n&lt;\/script&gt;<\/pre>\n<hr \/>\n<p><strong>DOM (Document Object Model)<\/strong><\/p>\n<pre>&lt;div id=\"div1\"&gt;\r\n&lt;p id=\"p1\"&gt;This is a paragraph.&lt;\/p&gt;\r\n&lt;p id=\"p2\"&gt;This is another paragraph.&lt;\/p&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre>&lt;script&gt;\r\nconst paragraph = document.createElement(\"p\");\r\nconst node = document.createTextNode(\"Text or Message\");\r\nparagraph.appendChild(node);\r\n\r\nconst element = document.getElementById(\"div1\");\r\nelement.appendChild(paragraph);\r\n&lt;\/script&gt;<\/pre>\n<p>Finding HTML Elements<\/p>\n<p>document.getElementById(idName)<br \/>\ndocument.getElementsByTagName(tagName)<br \/>\ndocument.getElementsByClassName(className)<\/p>\n<p>Changing HTML Elements<\/p>\n<pre>element.innerHTML = newContent;\r\nelement.attribute = newValue;\r\nelement.style.property = newStyle;\r\nelement.setAttribute(attribute, value);<\/pre>\n<p>Adding and Deleting HTML Elements<\/p>\n<pre>document.createElement(elementName);\r\ndocument.removeChild(elementName);\r\ndocument.appendChild(elementName);\r\ndocument.replaceChild(new, old);\r\ndocument.write(text);<\/pre>\n<p>Retrieving Values from Elements<\/p>\n<pre>varName = document.getElementById(\"example\").firstChild.nodeValue;\r\nvarName = document.getElementById(\"example\").childNodes[0].nodeValue;<\/pre>\n<ul>\n<li>parentNode<\/li>\n<li>childNodes[nodeNumber]<\/li>\n<li>firstChild<\/li>\n<li>lastChild<\/li>\n<li>nextSibling<\/li>\n<li>previousSibling<\/li>\n<\/ul>\n<p>Finding HTML Objects<\/p>\n<pre>document.anchors\r\ndocument.baseURI\r\ndocument.body\r\ndocument.cookie\r\ndocument.doctype\r\ndocument.documentElement\r\ndocument.documentMode\r\ndocument.documentURI\r\ndocument.domain\r\ndocument.embeds\r\ndocument.forms\r\ndocument.head\r\ndocument.images\r\ndocument.implementation\r\ndocument.inputEncoding\r\ndocument.lastModified\r\ndocument.links\r\ndocument.readyState\r\ndocument.referrer\r\ndocument.scripts\r\ndocument.strictErrorChecking\r\ndocument.title\r\ndocument.URL<\/pre>\n<p>Normal Functions vs Arrow Functions<\/p>\n<ul>\n<li>Function with multiple parameters:<\/li>\n<\/ul>\n<pre><strong>function<\/strong> funcName(a, b){\r\n  <strong>return<\/strong> a + b;\r\n}<\/pre>\n<pre><strong>let<\/strong> funcName = (a, b) <strong>=&gt;<\/strong> <strong>{<\/strong>\r\n  <strong>return<\/strong> a + b;\r\n<strong>}<\/strong><\/pre>\n<pre><strong>let<\/strong> funcName = (a, b) <strong>=&gt;<\/strong> a + b;<\/pre>\n<ul>\n<li>Function with a single parameter:<\/li>\n<\/ul>\n<pre><strong>function<\/strong> funcName(a){\r\n  <strong>return<\/strong> a;\r\n}<\/pre>\n<pre><strong>let<\/strong> funcName = a <strong>=&gt;<\/strong> a;<\/pre>\n<ul>\n<li>Function with no parameters:<\/li>\n<\/ul>\n<pre><strong>function<\/strong> funcName(){\r\n  <strong>return<\/strong> true;\r\n}<\/pre>\n<pre><strong>let<\/strong> funcName = <strong>() =&gt;<\/strong> true;<\/pre>\n<p>Async and Await with Fetch<\/p>\n<pre><strong>async<\/strong> function funcName(){\r\n  const response = <strong>await<\/strong> fetch('http:\/\/example.com\/api');\r\n  const data = <strong>await<\/strong> response.json();\r\n  console.log(data);\r\n}\r\nfuncName();<\/pre>\n<p>Delaying asynchronous function execution:<\/p>\n<pre>setTimeout(() =&gt; {\r\n  funcName();\r\n}, 1000);<\/pre>\n<hr \/>\n<p><strong>BONUS<\/strong><\/p>\n<p>Node.js is a backend JavaScript runtime environment that runs code on the server, outside a web browser.<\/p>\n<pre>sudo apt install nodejs\r\nnode -v\r\nnode app.js<\/pre>\n<p>Give it a try!<\/p>\n<hr \/>\n<p><strong>SEE ALSO<\/strong><\/p>\n<p>CSS Cheat Sheet [<a href=\"https:\/\/dft.wiki\/?p=880\">Link<\/a>]<\/p>\n<p>Responsive Design [<a href=\"https:\/\/dft.wiki\/?p=887\">Link<\/a>]<\/p>\n<p>HTML Markup Validation Service [<a href=\"https:\/\/validator.w3.org\/#validate_by_input\">Link<\/a>] &#8211; A free web tool for checking HTML markup for structural errors.<\/p>\n<p>CSS Markup Validation Service [<a href=\"http:\/\/jigsaw.w3.org\/css-validator\/#validate_by_input\">Link<\/a>] &#8211; Same for CSS.<\/p>\n<p>Link Checker [<a href=\"https:\/\/validator.w3.org\/checklink\">Link<\/a>] &#8211; Same for broken links.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Having an adequate environment to write code is essential for syntax highlighting and spell checking. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7],"tags":[],"class_list":["post-864","post","type-post","status-publish","format-standard","hentry","category-programming","category-web"],"_links":{"self":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=864"}],"version-history":[{"count":24,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":5793,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions\/5793"}],"wp:attachment":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}