{"id":864,"date":"2021-02-05T22:22:04","date_gmt":"2021-02-05T22:22:04","guid":{"rendered":"https:\/\/dft.wiki\/?p=864"},"modified":"2022-02-07T02:21:50","modified_gmt":"2022-02-07T02:21:50","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 checking spelling and color-code the lines in order to visually highlight code steps. 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 many web applications that allow you to write and execute javascript that deserves to be listed and used for tests and study purposes: 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 the lines between this tags\r\n*\/<\/pre>\n<p><strong>DATA TYPES<\/strong><\/p>\n<ul>\n<li>Undefined\n<ul>\n<li>variable created and not defined yet.<\/li>\n<\/ul>\n<\/li>\n<li>Null\n<ul>\n<li>has no value applied, means nothing.<\/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>can be a text, a sequence of characters, etc.<\/li>\n<\/ul>\n<\/li>\n<li>Symbol\n<ul>\n<li>an immutable primitive value that is a unique value.<\/li>\n<\/ul>\n<\/li>\n<li>Numbers\n<ul>\n<li>numeric values.<\/li>\n<\/ul>\n<\/li>\n<li>Object\n<ul>\n<li>\u00a0can store many different key values.<\/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>scape<strong>\\\"<\/strong> character\";\r\n\r\nstring = 'now <strong>\"<\/strong> doe snot need scape';\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>[ ,\u00a0 , ...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\ncaptalizeFirstCharacterOfString = 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(\"inameId\").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=\"elementMame\" disabled&gt;\r\n\r\n&lt;input type=\"text\" name=\"elementMame\" 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; document.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('dbclick', 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 selec = 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\nAdd the value to the end of the array.\r\narrayName.unshift(\"text\");\r\nAdd the value to the begining of the array.\r\nvar varName = arrayName.pop();\r\nGet and remove the last value of the array.\r\nvar varName = arrayName.shift();\r\nGet and remove the first value of the array.\r\narrayOne.concat(arrayTwo);\r\nConcatenate two arrays.\r\nvar [ , a, , b] = arrayName;\r\nvar [ , , , arr] = arrayName;\r\nvar strName = arrayName.toString();\r\nvar arrayName.sort();\r\nvar arrayName.reverse()\r\n\r\nvar arrayName2 = arrayName1.map(funcName);\r\nfunction funcName(value){\r\nreturn value * 10;\r\n}\r\n\r\nvar arrayName2 = arrayName1.filter(funcName);\r\nfunction funcName(value){\r\nreturn value &gt; 5;\r\n}\r\n\r\nvar arrayName2 = arrayName1.reduce(funcName);\r\nfunction funcName(total,value){\r\nreturn 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 objectNameToStoreEveruthing 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\nconsole.log(a + b);\r\ndeclaringGlobalVariable = 10;\r\nvar declaringLocalScope = 20;\r\nreturn (a + b);\r\n};\r\n\r\nconst functionName = (function() {\r\nreturn function functionName(...args){\r\nreturn args.reduce((a,b) =&gt; a+b, 0);\r\n};\r\n})();\r\n\r\nfunction* generatorName(){\r\nyield 1;\r\nyield 2;\r\nreturn 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.contcat(arrayTwo) };\r\n\r\nconst arrayThree = (arrayOne, arrayTwo) =&gt; arrayOne.contcat(arrayTwo);\r\n\r\nfunction funcName(firstArgument, secondArgument){\r\nreturn firstArgument + secondArgument;\r\n}\r\n\r\nfunction funcName(...args){\r\nreturn [...args];\r\n}\r\n\r\nvar funcExplessionName = 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>\u00a0||\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 equal (do not try to convert to a common type to compare).<\/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} elseif (!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\nnumName ++;\r\n\/\/ execute\r\nif(numName &lt; 0)\r\nbreak;\r\nif(numName = 0)\r\ncontinue;\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\ncase 1:\r\nstrName = \"numName is strictly equal to 1\";\r\nbreak;\r\ncase \"1\":\r\nstrName = \"numName is a string with number 1\";\r\nbreak;\r\ncase 100:\r\ncase 101:\r\ncase 102:\r\nstrName = \"numName is 100, 101, or 102\";\r\nbreak;\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\nKeywork new 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\nthis.name = name;\r\nthis.age = age\r\n}\r\n\r\nclass className {\r\nconstructor(value){\r\nthis._property = value\r\n}\r\nget property(){\r\nreturn this._property\r\n}\r\nset property(value){\r\nthis._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\nalert(\"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\narrayName: [\"A\",\"B\",\"C\"],\r\ninfo(){\r\nthis.arrayName.forEach(function(tag){\r\nconsole.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\nif(document.myForm.email.value == \"\"){\r\nalert(\"Insert your e-mail.\");\r\ndocument.myForm.email.focus();\r\nreturn false\r\n} else {\r\nreturn 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\nvar email = document.getElementById(\"email\").value;\r\nvar regex = \/^\\S+@\\S+\\.\\S+$\/;\r\n\r\nif (regex.test(email)){\r\nalert(\"Validated!\");\r\nreturn true\r\n} else {\r\nalert(\"Not valid!\");\r\ndocument.myForm.email.focus();\r\nreturn 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\nalert(\"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\nvarName = true;\r\nif (varName)\r\nresolve()\r\nelse\r\nreject()\r\n});\r\n\r\nactionName.then(function(){\r\ndocument.write(\"Resolved\")\r\n}).catch(function(){\r\ndocument.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>Retreving 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>Funuction with multiple attributes:<\/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 attribute:<\/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 attribute:<\/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 in the server (outside a web browser).<\/p>\n<pre>sudo apt install nodejs\r\nnode -v\r\nnode app.js<\/pre>\n<p>Git 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 that helps with checking markup languages such as HTML for errors on DOM structure.<\/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 checking spelling and color-code the [&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":23,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":2780,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions\/2780"}],"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}]}}