Variables are containers that you can store values in. You start by declaring a variable with the var keyword, followed by any name you want to call it:<\/p>\n
var myVariable;<\/p>\n
A semicolon at the end of a line indicates where a statement ends;<\/p>\n
We indicate a string by surrounding the string value with quotes, like this:<\/p>\n
var variableName = \"string content in here\";<\/pre>\nNow you try it!<\/p>\n
\nSee the Pen JS-Intro by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
var myArray = [1,2,3,4,5];<\/pre>\n<\/li>\n
var myArr = [1,2,3,4];\r\nmyArr[0]; \/\/ returns 1 because arrays start from 0<\/pre>\n<\/li>\n
var myArr = [1,2,3,4];\r\n\/\/ Using jQuery! As it's much simpler\/prettier\r\n$.each(myArr, function( index, value ) {\r\n console.log( index + \": \" + value );\r\n});\r\n\/\/ will return\r\n\/\/ 0: 1\r\n\/\/ 1: 2\r\n\/\/ 2: 3\r\n\/\/ 3: 4<\/pre>\n<\/li>\nvar myVar = [1,2,3,4];\r\n\/\/ add to end of array\r\nmyVar.push(5);\r\nconsole.log(myVar);\r\n\/\/ [1,2,3,4,5]\r\n\r\n\/\/ add to beginning of array\r\nmyVar.unshift(0);\r\nconsole.log(myVar);\r\n\/\/ [0,1,2,3,4,5]\r\n\r\n\/\/ remove 1 item at index 0\r\nmyVar.splice(0,1);\r\nconsole.log(myVar);\r\n\/\/ [1,2,3,4,5]<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n
\/\/ empty object\r\nvar myVar = {};\r\nconsole.log(myVar);\r\n\/\/ {}\r\n\r\n\/\/ predefined object\r\nvar myVar2 = {\r\n \/\/ property\r\n \"name\":\"value\"\r\n}\r\nconsole.log(myVar2);\r\n\/\/ {\"name\":\"value\"}\r\n\r\n\/\/ predefined object\r\nvar myVar3 = {\r\n \"firstName\":\"Angel\"\r\n}\r\n\/\/ safer way to get the value of a property\r\nconsole.log(myVar3[\"firstName\"]); \/\/ Angel\r\nconsole.log(myVar3.firstName); \/\/ Angel\r\n\/\/ adding a new property to an existing object\r\nmyVar3.lastName = \"Grablev\";\r\nconsole.log(myVar3.lastName); \/\/ Grablev\r\n\r\nconsole.log(myVar3); \/\/ {\"firstName\":\"Angel\",\"lastName\":\"Grablev\"}\r\n\/\/ removing a property\r\ndelete myVar3.lastName;\r\nconsole.log(myVar3); \/\/ {\"firstName\":\"Angel\"}\r\n\r\n\r\n\/\/ looping is similar to array, but instead of the index we get the name\r\n\/\/ this loops follows NO ORDER!\r\n$.each(myVar3, function( propertyName, propertyValue ) {\r\n console.log( propertyName + \": \" + propertyValue );\r\n});\r\n\/\/ firstName: Angel\r\n\/\/ lastName: Grablev<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nFunctions<\/h2>\n
Are a way to set blocks of executable code that can be called later as many times as needed. You can set a name for the function and set parameters to be passed into it.<\/p>\n
function add(x, y) {\r\n \/\/ can return a value, but it's not required\r\n\u00a0 return x + y;\r\n}\r\nconsole.log(add(1,1)); \/\/ 2\r\n\r\nvar aNumber = 0;\r\nfunction addToNumber(x) {\r\n aNumber = aNumber + x;\r\n}\r\naddToNumber(5);\r\nconsole.log(aNumber); \/\/ 5\r\naddToNumber(5);\r\nconsole.log(aNumber); \/\/ 10\r\n<\/pre>\n\nSee the Pen JS-Intro by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n
To execute a function we simply use its name and pass any needed parameters inside the parenthesis. If no parameters then simply adding parenthesis executes the function.<\/p>\n
function loveIt() {\r\n console.log(\"Love it\");\r\n}\r\n\r\nloveIt(); \/\/ Love it<\/pre>\nAnonymous functions<\/h2>\n
An anonymous function has no name and is always executed right away. Most commonly we pass an anonymous\u00a0function to libraries like jQuery so it knows what code to execute for us.<\/p>\n
\/\/ Passing anonymous function to jQuery to do something\r\n\/\/ on click\r\n$(\"#click\").on(\"click\",function(){\r\n $(\"#click\").addClass(\"clicked\");\r\n});\r\n\r\n\/\/ Can be done just as easily with a named function like this\r\nfunction whenClicked() {\r\n $(\"#click2\").addClass(\"clicked\");\r\n}\r\n\/\/ jQuery will simply execute the function\r\n$(\"#click2\").on(\"click\",whenClicked);<\/pre>\nStoring function in a variable<\/h2>\n
We can store a function in a variable, which does almost the same thing as a normal function declaration.<\/p>\n
function add(x,y) {\r\n return x+y;\r\n}\r\n\/\/ is identical to\r\nvar add = function(x,y) {\r\n return x+y;\r\n}\r\n\/\/ we're simply storing an anonymous function\r\n\/\/ inside our add variable<\/pre>\nComparisons and if statements<\/h2>\n\/\/ 3 = signs means absolute comparison\r\nconsole.log(\"1\" === 1); \/\/ false - string is not number\r\n\r\n\/\/ 2 = signs means relative comparison\r\nconsole.log(\"1\" == 1); \/\/ true - they are relatively the same\r\n\r\n\/\/ < less than | <= less than or equal to | > and >= same but opposite\r\nconsole.log(0 < 1); \/\/ true\r\nconsole.log(1 <= 1); \/\/ true\r\n\r\n\/\/ && says \"and\" meaning both must be true \r\n\/\/ || says \"or\" means either must be true\r\nconsole.log(0 < 1 && 1 < 1); \/\/ false\r\nconsole.log(0 < 1 || 1 < 1); \/\/ true<\/pre>\nIf statements<\/p>\n
var name = \"angel\";\r\nif ( name === \"angel\" ) {\r\n \/\/ yep\r\n} else {\r\n \/\/ nope\r\n}<\/pre>\nVariable scopes!<\/h2>\n
Every variable we define exists in a scope. We can only call variables from parent scopes.<\/p>\n
\/\/ window scope - think of it as browser wide\r\nvar parent = \"Im at top\";\r\n\r\nfunction child() {\r\n var child1 = \"I'm inside child!\";\r\n console.log(parent); \/\/ Im at top\r\n}\r\nconsole.log(child1); \/\/ undefined - IT DOES NOT exist in this scope\r\n\r\n\/\/ Also you can't use variable\/function before it's defined\r\ntest(); \/\/ error\r\nfunction test() {\r\n console.log(\"Will NOT be executed!\");\r\n};<\/pre>\nBrain teasers<\/h2>\nvar a = 1;\r\nvar b = 2;\r\n\r\n(function() {\r\n\u00a0 var b = 3;\r\n\u00a0 a += b;\r\n})();\r\n\r\na; \/\/ What's a?\r\nb; \/\/ What's b?<\/pre>\nfunction parentFunc() {\r\n var a = 1;\r\n function nestedFunc() {\r\n var b = 4; \/\/ parentFunc can't use this\r\n\r\n return a + b;\r\n }\r\n return nestedFunc(); \/\/ what's returned?\r\n}\r\n<\/pre>\nfunction createAdder(x){\r\n return function(b) {\r\n return x+b;\r\n }\r\n}\r\nvar adder1 = createAdder(5);\r\nconsole.log(adder1(1)); \/\/ what's the result?<\/pre>\n <\/p>\n
Useful snippets<\/h2>\n
Adding jQuery to your website<\/p>\n
<!-- add jquery right before the ending body tag -->\r\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"><\/script>\r\n <!-- make sure to add your JS after jQuery otherwise you can't use it -->\r\n <script src=\"js\/main.js\"><\/script>\r\n<\/body><\/pre>\nUsing jQuery<\/p>\n
\/\/ This is jQueries way of waiting for page to load\r\n\/\/ we simply pass an anonymous function to the jQuery function\r\n$(function(){\r\n \r\n});\r\n\r\n\/\/ Basically equiavelnt of this\r\nvar $ = function(runThisCodeWhenPageLoaded) {\r\n \/\/ some magic happens and then it calls your annonymous function\r\n runThisCodeWhenPageLoaded();\r\n};\r\n\/\/ Then you'd call it as usual\r\n$(function(){\r\n console.log(\"TEST!\"); \/\/ TEST!\r\n});<\/pre>\nCommon jQuery usecases<\/p>\n
\/\/ Handle a click on element with class .some-element\r\n$(\".some-element\").on(\"click\",function(){\r\n \/\/ do something\r\n});\r\n\r\n\/\/ Handle a click on an anchor with href=\"#\"\r\n\/\/ without moving to top of page\r\n$(\".button a\").on(\"click\",function(browserEvent){\r\n \/\/ take the browser event and prevent the default reaction\r\n browserEvent.preventDefault();\r\n \/\/ do something\r\n});\r\n\r\n\/\/ Handle a click on element with class .some-element\r\n\/\/ and since you can have 100 elements with that class\r\n\/\/ we can reference the exact one we clicked with $(this)\r\n$(\".some-element\").on(\"click\",function(){\r\n $(this).hide(); \/\/ will ONLY hide the clicked element\r\n});\r\n\r\n\/\/ Common interactions with elements\r\n\r\n\/\/ <div class=\"some-element\"\r\n\/\/ becomes <div class=\"some-element test\"\r\n$(\".some-element\").addClass(\"test\");\r\n\r\n\/\/ hide\/show the element\r\n$(\".some-element\").hide();\r\n$(\".some-element\").show();\r\n\/\/ if an element has display:none; css applied\r\n\/\/ or it was hidden with jQuery you can show it\r\n$(\".some-element\").fadeIn(3000); \/\/ fades it in in 3seconds\r\n$(\".some-element\").fadeOut(5000); \/\/ fades it out in 5seconds\r\n\r\n\/\/ find a child\r\n$(\".some-element\").find(\".test\"); \/\/ finds a child of .some-element with class .test\r\n$(\".some-element\").find(\".test\").hide(); \/\/ hides the child .test\r\n\r\n\/\/ find a parent of the element\r\n\/\/ <div class=\"test\">\r\n\/\/\t\t<div class=\"doesnmatter\">\r\n\/\/\t\t\t<a href=\"#\" class=\".some-element\">ME!<\/a>\r\n$(\".some-element\").parents(\".test\"); \/\/ finds the first parent of .some-element with class .test\r\n$(\".some-element\").parents(\".test\").hide(); \/\/ hides the child .test\r\n\r\n\/\/ Adds an element inside and at the end of the chosen element\r\n$(\".inside-me\").append(\"<div class='test'>Awesome<\/div>\");\r\n\/*\r\n<div class=\"inside-me\">\r\n <div class=\"random\">\r\n Random element\r\n <\/div>\r\n <!-- WE ADD THE DIV CLASS TEST HERE -->\r\n<\/div>\r\n*\/\r\n\r\n\/\/ Adds an element after the chosen element\r\n$(\".inside-me\").after(\"<div class='test'>Awesome<\/div>\");\r\n\/*\r\n<div class=\"inside-me\">\r\n <div class=\"random\">\r\n Random element\r\n <\/div>\r\n<\/div>\r\n<!-- WE ADD THE DIV CLASS TEST HERE -->\r\n*\/<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Variables Variables are containers that you can store values in. You start by declaring a variable with the var keyword, followed by any name you want to call it: var myVariable; A semicolon at the end of a line indicates where a statement ends; String We indicate a string by surrounding the string value with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,9],"tags":[],"class_list":["post-333","post","type-post","status-publish","format-standard","hentry","category-jquery","category-js"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333"}],"version-history":[{"count":5,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":338,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/333\/revisions\/338"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}