{"id":605,"date":"2021-02-13T19:34:39","date_gmt":"2021-02-14T00:34:39","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/?page_id=605"},"modified":"2022-05-01T23:51:03","modified_gmt":"2022-05-02T03:51:03","slug":"javascript","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/","title":{"rendered":"JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">JavaScript allows us to make our pages interactive, animated, use data and more. We could make the entire course about JavaScript and still have not covered everything. So don&#8217;t worry about not understanding everything. In  this course we will scratch the surface and look at JS in these areas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CONCEPTS: Why use it, how and where is it used on the web, language basics.<\/li><li>USE: how to add it to a page, language syntax, using editor<\/li><li>PRACTICE: using it to do make some interactive page elements<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Latest JavaScript Posts<\/h2>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/running-javascript\/\">Running JavaScript<\/a><div class=\"wp-block-latest-posts__post-excerpt\">There are a number of different ways you can run JavaScript code. This post goes over a number of them. Some are better for simple tests and practice and some are what you would use in production (the final version of your web site). You can also look at Wes Boss&#8217; Setup instructions and Running&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/running-javascript\/\">Continue reading <span class=\"screen-reader-text\">Running JavaScript<\/span><\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/javascript-intro\/\">JavaScript Intro<\/a><div class=\"wp-block-latest-posts__post-excerpt\">These are some resources to help you got started with JavaScript. Why JavaScript? UI (User Interface): Write code to make your web page more interactive like Navigation Image Galleries Scroll-based effects Animations Read and write data Process a form read and display data from an API (weather, maps, sports scores&#8230;) Dynamically change your web page&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/javascript-intro\/\">Continue reading <span class=\"screen-reader-text\">JavaScript Intro<\/span><\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/jquery-basics\/\">jQuery Basics<\/a><div class=\"wp-block-latest-posts__post-excerpt\">jQuery is the most popular JavaScript Library. Using a library allows you to quickly write code that is compatible across a range of browsers. It should be noted that recently browsers and JavaScript have evolved to make it possible to do a lot of the things jQuery is good at without jQuery. You may see&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/jquery-basics\/\">Continue reading <span class=\"screen-reader-text\">jQuery Basics<\/span><\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/jquery-setup\/\">jQuery Setup<\/a><div class=\"wp-block-latest-posts__post-excerpt\">Loading jQuery Into a Page There are two ways to load jQuery: Download jQuery and put it in with your site&#8217;s JavaScript files. Load it from a CDN Loading from the CDN Most people choose to load it from a CDN. The jQuery CDN allows you to choose which version you want to use. Go&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/jquery-setup\/\">Continue reading <span class=\"screen-reader-text\">jQuery Setup<\/span><\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/dynamic-ui\/\">Dynamic UI with jQuery<\/a><div class=\"wp-block-latest-posts__post-excerpt\">This is a step-by-step guide to using jQuery in a project. We will use [0] Setup Create GitHub Repo from Template Go to the Github Template Click the green Use this Template button. Go through the steps to finish creating your version of the repository. Remember the name you gave the repository. Open the Repository&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/dynamic-ui\/\">Continue reading <span class=\"screen-reader-text\">Dynamic UI with jQuery<\/span><\/a><\/div><\/li>\n<\/ul>\n\n\n<div class=\"alignfull wp-block-ugb-container ugb-container ugb-3e28637 ugb-container--v2 ugb-container--design-basic ugb-main-block ugb-main-block--inner-full ugb--has-block-background ugb--has-top-separator\"><style>.ugb-3e28637-wrapper.ugb-container__wrapper{background-color:#000000 !important}.ugb-3e28637-wrapper.ugb-container__wrapper:before{background-color:#000000 !important}.ugb-3e28637 h1,.ugb-3e28637 h2,.ugb-3e28637 h3,.ugb-3e28637 h4,.ugb-3e28637 h5,.ugb-3e28637 h6{color:#FFFFFF}.ugb-3e28637 p,.ugb-3e28637 li,.ugb-3e28637 label,.ugb-3e28637 table{color:#FFFFFF}.ugb-3e28637-content-wrapper > h1,.ugb-3e28637-content-wrapper > h2,.ugb-3e28637-content-wrapper > h3,.ugb-3e28637-content-wrapper > h4,.ugb-3e28637-content-wrapper > h5,.ugb-3e28637-content-wrapper > h6{color:#FFFFFF}.ugb-3e28637-content-wrapper > p,.ugb-3e28637-content-wrapper > ol li,.ugb-3e28637-content-wrapper > ul li{color:#FFFFFF}.ugb-3e28637.ugb-container{background-color:#000000}.ugb-3e28637.ugb-container:before{background-color:#000000}.ugb-3e28637 .ugb-top-separator svg{fill:#D1DFE4}.ugb-3e28637 a,.ugb-3e28637 a:visited,.ugb-3e28637 a:focus{color:#ffffff}<\/style><div class=\"ugb-top-separator\"><div class=\"ugb-separator-wrapper\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1600 200\" filter=\"url(#curve-2-shadow_svg__a)\" enablebackground=\"new 0 0 1600 200\" class=\"ugb-separator__shadow\" preserveaspectratio=\"none\" aria-hidden=\"true\"><filter id=\"curve-2-shadow_svg__a\"><feGaussianBlur in=\"SourceAlpha\" stddeviation=\"4\"><\/feGaussianBlur><feComponentTransfer><feFuncA type=\"linear\" slope=\"0.4\"><\/feFuncA><\/feComponentTransfer><feMerge><feMergeNode><\/feMergeNode><feMergeNode in=\"SourceGraphic\"><\/feMergeNode><\/feMerge><\/filter><path class=\"curve-2-shadow_svg__st2\" d=\"M1138.3 36.2c246.1 0 412 130.1 458.4 171.4h13.3S1430.8 23.8 1138.3 23.8C884 23.8 172 156.9-10 197.9v9.7H2.2C201.7 163.7 889.3 36.2 1138.3 36.2z\"><\/path><\/svg><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1600 200\" class=\"ugb-separator__layer-1\" preserveaspectratio=\"none\" aria-hidden=\"true\"><path class=\"curve-2_svg__st2\" d=\"M-10 207.6h1620S1430.8 23.8 1138.3 23.8C884 23.8 234.9 140.1-10 197.9v9.7z\"><\/path><\/svg><\/div><\/div><div class=\"ugb-inner-block ugb-inner-block--full\"><div class=\"ugb-block-content\"><div class=\"ugb-container__wrapper ugb-3e28637-wrapper\"><div class=\"ugb-container__side\"><div class=\"ugb-container__content-wrapper ugb-3e28637-content-wrapper\">\n<div class=\"wp-block-ugb-heading alignfull ugb-heading ugb-360f736 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Resources<\/h2><p class=\"ugb-heading__subtitle\">These JavaScript resources are grouped into areas. Some are direct links to resources while others are links to posts on this site.<\/p><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-a9d0813 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-a9d0813 .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Free Web Sites and Videos<\/h3><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"wp-block-paragraph\">These are web sites that offer free resources on learning JavaScriptm <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-560f8ff ugb-icon-list--v2 ugb-main-block\"><style>.ugb-560f8ff li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0QxREZFNCAhaW1wb3J0YW50OyBjb2xvcjogI0QxREZFNCAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRDFERkU0IiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNEMURGRTQiIHN0eWxlPSJmaWxsOiByZ2IoMjA5LCAyMjMsIDIyOCk7IHN0cm9rZTogcmdiKDIwOSwgMjIzLCAyMjgpOyIvPjwvc3ZnPg==')}.ugb-560f8ff.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li>1:<a rel=\"noreferrer noopener\" href=\"https:\/\/wesbos.com\/javascript\" target=\"_blank\">JavaScript Notes<\/a> (Wes Bos)<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766131882628407296%3Ftrk%3Dshare_collection_url%26shareId%3D9v6NwI35TTm5D0K10x2tpA%253D%253D&amp;account=2147385\" target=\"_blank\">2: The Coding Train Site<\/a><\/li><li>3: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/channel\/UCvjgXvBlbQiydffZU7m1_aw\" target=\"_blank\">The Coding Train YouTube<\/a><\/li><li>4: freeCodeCamp.org <a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/PkZNo7MFNFg\" target=\"_blank\">Beginners JavaScript <\/a>YouTube<\/li><li>5: freeCodeCamp <a rel=\"noreferrer noopener\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to\/#how-to-learn-programming\" target=\"_blank\">Learn Programming Site<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/JavaScript_basics\" target=\"_blank\" rel=\"noreferrer noopener\">MDN JavaScript Basics<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-a97919e ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-a97919e .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Free Books<\/h3><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"wp-block-paragraph\">Here are some free books and book-like resources. You can also visit this site that has a larger list of books: <a href=\"https:\/\/jsbooks.revolunet.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">JSBooks.revolunet.com<\/a><\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-ef63fdc ugb-icon-list--v2 ugb-main-block\"><style>.ugb-ef63fdc li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0ZGRkZGRiAhaW1wb3J0YW50OyBjb2xvcjogI0ZGRkZGRiAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNGRkZGRkYiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjwvc3ZnPg==')}.ugb-ef63fdc.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/eloquentjavascript.net\/\" target=\"_blank\">Eloquent JavaScript<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.freecodecamp.org\/news\/the-complete-javascript-handbook-f26b2c71719c\/\" target=\"_blank\">The JavaScript Beginners Handbook<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/read.humanjavascript.com\/\" target=\"_blank\">Human JavaScript<\/a><\/li><li><a href=\"https:\/\/frontendmasters.com\/books\/javascript-enlightenment\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript Enlightenment<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-0ddfbc1 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-0ddfbc1 .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">LinkedIn Learning JavaScript Collections<\/h3><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"wp-block-paragraph\">These are collections of videos on JavaScript that I gathered from different LinkedIn Learning Courses. Many require no files, a few do. You can find download links for the exercise files on the site (I will add in links later if needed). If you want to start from the beginning follow the numbered order. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-f29a22e ugb-icon-list--v2 ugb-main-block\"><style>.ugb-f29a22e li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0QxREZFNCAhaW1wb3J0YW50OyBjb2xvcjogI0QxREZFNCAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRDFERkU0IiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNEMURGRTQiIHN0eWxlPSJmaWxsOiByZ2IoMjA5LCAyMjMsIDIyOCk7IHN0cm9rZTogcmdiKDIwOSwgMjIzLCAyMjgpOyIvPjwvc3ZnPg==')}.ugb-f29a22e.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li>1: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766116794957754368%3Ftrk%3Dshare_collection_url%26shareId%3DiLjG4hELTTeuiK0dZt%252FHEQ%253D%253D&amp;account=2147385\" target=\"_blank\">JavaScript Introduction<\/a><\/li><li>2: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766131882628407296%3Ftrk%3Dshare_collection_url%26shareId%3D9v6NwI35TTm5D0K10x2tpA%253D%253D&amp;account=2147385\" target=\"_blank\">Getting Ready<\/a><\/li><li>3: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766133908380749824%3Ftrk%3Dshare_collection_url%26shareId%3DlwiO2rTVRb6lgbpYPk6%252BDQ%253D%253D&amp;account=2147385\" target=\"_blank\">JavaScript in the Browser<\/a><\/li><li>4: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766134865445421056%3Ftrk%3Dshare_collection_url%26shareId%3DwuCbY9vERgCqzq%252BJy93Gqg%253D%253D&amp;account=2147385\" target=\"_blank\">Variables<\/a><\/li><li>5: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766135326328156160%3Ftrk%3Dshare_collection_url%26shareId%3D5nWX9tRlSVCRBL2Go%252BJCxQ%253D%253D&amp;account=2147385\" target=\"_blank\">Objects<\/a><\/li><li>6: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766135533665157120%3Ftrk%3Dshare_collection_url%26shareId%3Dx38wUEJNR02cND3XSY1mZg%253D%253D&amp;account=2147385\" target=\"_blank\">Control Structures and Operators<\/a><\/li><li>7: <a href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766135405579505664%3Ftrk%3Dshare_collection_url%26shareId%3DWLmzUri2SCSd%252BD0au19Rng%253D%253D&amp;account=2147385\" target=\"_blank\" rel=\"noreferrer noopener\">Arrays<\/a><\/li><li>8: <a href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766135643551735808%3Ftrk%3Dshare_collection_url%26shareId%3Dn3L29fiISx2tGTVWbxDITg%253D%253D&amp;account=2147385\" target=\"_blank\" rel=\"noreferrer noopener\">Loops<\/a><\/li><li>9: <a href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=true&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcollections%2F6766135727832092672%3Ftrk%3Dshare_collection_url%26shareId%3DJtiKuQFcSgO9V5KkhQz0eA%253D%253D&amp;account=2147385\" target=\"_blank\" rel=\"noreferrer noopener\">Functions<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-4caf26a ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-4caf26a .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Try it Out<\/h3><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"wp-block-paragraph\">These sites allow you to quickly try out JavaScript right in the browser with no setup on your computer. JavaScript.com\/try is an interactive tutorial that takes you through<\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-4603c3c ugb-icon-list--v2 ugb-main-block\"><style>.ugb-4603c3c li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0ZGRkZGRiAhaW1wb3J0YW50OyBjb2xvcjogI0ZGRkZGRiAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNGRkZGRkYiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjwvc3ZnPg==')}.ugb-4603c3c.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li>Use the Console. The quickest way.<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\" target=\"_blank\">CodePen<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/glitch.com\/edit\" target=\"_blank\">Glitch<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.tutorialrepublic.com\/javascript-examples.php\" target=\"_blank\">Tutorial Republic JS Examples<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-669da82 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-669da82 .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Reference Sites<\/h3><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"wp-block-paragraph\">These sites have reference materials you can use to look up terms and techniques. Nobody can remember all of this. The Modern JavaScript Tutorial at javascript.info is both a tutorial and reference. MDN has many different resources from tutorials to references to overviews.<\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-2cd07ba ugb-icon-list--v2 ugb-main-block\"><style>.ugb-2cd07ba li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0ZGRkZGRiAhaW1wb3J0YW50OyBjb2xvcjogI0ZGRkZGRiAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNGRkZGRkYiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjwvc3ZnPg==')}.ugb-2cd07ba.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/javascript.info\/\" target=\"_blank\">The Modern JavaScript Tutorial<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\">MDN Main JavaScript Page<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\" target=\"_blank\">MDN JavaScript Reference<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/JavaScript_basics\" target=\"_blank\">MDN Getting Started Tutorial<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\">MDN Guide to JavaScript<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/devdocs.io\/javascript\/\" target=\"_blank\">DevDocs JavaScript Reference<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript allows us to make our pages interactive, animated, use data and more. We could make the entire course about JavaScript and still have not covered everything. So don&#8217;t worry about not understanding everything. In this course we will scratch the surface and look at JS in these areas: CONCEPTS: Why use it, how and&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/javascript\/\">Continue reading <span class=\"screen-reader-text\">JavaScript<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":610,"parent":521,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"coauthors":[87],"class_list":["post-605","page","type-page","status-publish","has-post-thumbnail","hentry","entry"],"featured_image_urls_v2":{"full":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",2048,1053,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-150x150.jpeg",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-300x154.jpeg",300,154,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-768x395.jpeg",750,386,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1024x527.jpeg",750,386,true],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1536x790.jpeg",1536,790,true],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",2048,1053,false],"post-thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1568x806.jpeg",1568,806,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",300,154,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",400,206,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",600,308,false]},"post_excerpt_stackable_v2":"<p>JavaScript allows us to make our pages interactive, animated, use data and more. We could make the entire course about JavaScript and still have not covered everything. So don&#8217;t worry about not understanding everything. In this course we will scratch the surface and look at JS in these areas: CONCEPTS: Why use it, how and where is it used on the web, language basics.USE: how to add it to a page, language syntax, using editorPRACTICE: using it to do make some interactive page elements Latest JavaScript Posts Running JavaScriptThere are a number of different ways you can run JavaScript code.&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",2048,1053,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-150x150.jpeg",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-300x154.jpeg",300,154,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-768x395.jpeg",750,386,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1024x527.jpeg",750,386,true],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1536x790.jpeg",1536,790,true],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",2048,1053,false],"post-thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop-1568x806.jpeg",1568,806,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",300,154,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",400,206,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-content\/uploads\/sites\/2125\/2021\/02\/markus-spiske-1LLh8k2_YFk-unsplash_crop.jpeg",600,308,false]},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"JavaScript allows us to make our pages interactive, animated, use data and more. We could make the entire course about JavaScript and still have not covered everything. So don&#8217;t worry about not understanding everything. In this course we will scratch the surface and look at JS in these areas: CONCEPTS: Why use it, how and&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/pages\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":22,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/pages\/605\/revisions"}],"predecessor-version":[{"id":2977,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/pages\/605\/revisions\/2977"}],"up":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/pages\/521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/media\/610"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/coauthors?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}