{"id":4135,"date":"2024-12-09T15:12:55","date_gmt":"2024-12-09T06:12:55","guid":{"rendered":"https:\/\/blog.derrylab.com\/?p=4135"},"modified":"2024-12-09T15:12:56","modified_gmt":"2024-12-09T06:12:56","slug":"how-to-understand-javascript-basics-in-10-minutes","status":"publish","type":"post","link":"https:\/\/blog.derrylab.com\/index.php\/2024\/12\/09\/how-to-understand-javascript-basics-in-10-minutes\/","title":{"rendered":"How to Understand JavaScript Basics in 10 Minutes"},"content":{"rendered":"\n

This is the basics of JavaScript<\/strong>, the secret sauce that makes your web pages more interactive. We’re going to cover the key topics so you won’t end up in a coding coma\u2014because who has the time for an exhausting lecture when there’s so much internet to explore?<\/p>\n\n\n\n

\n\n\n\n

1. What is JavaScript? Your Web Development Sidekick<\/strong><\/h3>\n\n\n\n

JavaScript is a versatile programming language<\/strong> that makes web pages dynamic and interactive.<\/p>\n\n\n\n

\ud83d\udccc Think of it as the brain that powers sliders, pop-ups, and form validations.<\/em><\/p>\n\n\n\n

\n\n\n\n

2. Running JavaScript: Where the Magic Happens<\/strong><\/h3>\n\n\n\n

JavaScript can run in:<\/p>\n\n\n\n

    \n
  • Browsers<\/strong>: Open the console (right-click > Inspect > Console).<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    • HTML files<\/strong>:<\/li>\n<\/ul>\n\n\n\n
      <!DOCTYPE html>\n<html>\n<body>\n    <h1>Let's Learn JavaScript<\/h1>\n    <script>\n        console.log(\"JavaScript is running!\");\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
      Try this out to see “JavaScript is running!” in your browser console.<\/p>\n\n\n\n
      \n\n\n\n
      3. Variables: Your Data Storage Toolbox<\/strong><\/h3>\n\n\n\n
      Variables store and manage data. Here\u2019s how they differ:<\/p>\n\n\n\n
        \n
      • let<\/code><\/strong>: Block-scoped, can be reassigned.<\/li>\n<\/ul>\n\n\n\n
        let age = 20; <\/code><\/p>\n\n\n\n
        age = 25; \/\/ \u2705 Allowed<\/code><\/p>\n\n\n\n
          \n
        • const<\/code><\/strong>: Block-scoped, cannot<\/strong> be reassigned. <\/li>\n<\/ul>\n\n\n\n
          const pi = 3.14; <\/code><\/p>\n\n\n\n
          pi = 3.14159; \/\/ \u274c Error<\/code><\/p>\n\n\n\n
            \n
          • var<\/code><\/strong>: Function-scoped (use sparingly in modern code). <\/li>\n<\/ul>\n\n\n\n
            var name = \"Alice\";<\/code><\/p>\n\n\n\n
            name = \"Bob\"; \/\/ \u2705 Allowed, but less safe<\/code><\/p>\n\n\n\n
            \ud83d\udca1 Why It Matters<\/strong>: Use let<\/code> and const<\/code> for better scoping and safer code.<\/p>\n\n\n\n
            \n\n\n\n
            4. Data Types: The Building Blocks of JavaScript<\/strong><\/h3>\n\n\n\n
            Mastering data types helps avoid bugs:<\/p>\n\n\n\n
              \n
            • Primitive Types<\/strong>: <\/li>\n<\/ul>\n\n\n\n
              let text = \"Hello\"; \/\/ String\n\nlet num = 42; \/\/ Number\n\nlet isCool = true; \/\/ Boolean\n\nlet notDefined; \/\/ Undefined\n\nlet empty = null; \/\/ Null<\/code><\/pre>\n\n\n\n
                \n
              • Objects<\/strong>:<\/li>\n<\/ul>\n\n\n\n
                let car = { brand: \"Tesla\", model: \"Model X\" };\n\nlet fruits = [\"apple\", \"banana\"];<\/code><\/pre>\n\n\n\n
                \ud83d\udccc Use Case:<\/strong> Storing user profiles, shopping cart items, etc.<\/p>\n\n\n\n
                \n\n\n\n
                5. Functions: Reusable Code for Real-World Tasks<\/strong><\/h3>\n\n\n\n
                Functions perform tasks when called.<\/p>\n\n\n\n
                function greetUser(name) {\n    return `Hello, ${name}!`;\n}\nconsole.log(greetUser(\"Derry\")); \/\/ Output: \"Hello, Derry!\"<\/code><\/pre>\n\n\n\n
                \ud83d\udca1 Use Case:<\/strong> Use functions to validate user inputs, like checking if an email address is valid.<\/p>\n\n\n\n
                \n\n\n\n
                6. Control Flow: Making Decisions in Your Code<\/strong><\/h3>\n\n\n\n
                a. If-Else for Decision-Making<\/strong><\/h4>\n\n\n\n
                let age = 18;\nif (age >= 18) {\n    console.log(\"You can vote.\");\n} else {\n    console.log(\"You're too young.\");\n}<\/code><\/pre>\n\n\n\n
                b. Loops for Repeating Tasks<\/strong><\/h4>\n\n\n\n
                  \n
                • For Loop<\/strong>:<\/li>\n<\/ul>\n\n\n\n
                  for (let i = 0; i < 3; i++) {\n    console.log(`Count: ${i}`);\n}<\/code><\/pre>\n\n\n\n
                    \n
                  • While Loop<\/strong>:<\/li>\n<\/ul>\n\n\n\n
                    let i = 0;\nwhile (i < 3) {\n    console.log(`While Count: ${i}`);\n    i++;\n}<\/code><\/pre>\n\n\n\n
                    \ud83d\udccc Use Case:<\/strong> Loops are great for processing lists, like generating HTML for multiple products.<\/p>\n\n\n\n
                    \n\n\n\n
                    7. Arrays: Organizing Data in Lists<\/strong><\/h3>\n\n\n\n
                    Arrays group data together:<\/p>\n\n\n\n
                    let tasks = [\"Read\", \"Code\", \"Exercise\"];\nconsole.log(tasks[1]); \/\/ \"Code\"\n\n\/\/ Adding a task\ntasks.push(\"Sleep\");\nconsole.log(tasks); \/\/ [\"Read\", \"Code\", \"Exercise\", \"Sleep\"]<\/code><\/pre>\n\n\n\n
                    \ud83d\udca1 Use Case:<\/strong> Store to-do lists, shopping items, or form inputs.<\/p>\n\n\n\n
                    \n\n\n\n
                    8. Objects: Modeling Real-World Entities<\/strong><\/h3>\n\n\n\n
                    Objects store related data as key-value pairs:<\/p>\n\n\n\n
                    let user = {\n    name: \"Derry\",\n    age: 30,\n    greet() {\n        console.log(`Hi, I'm ${this.name}`);\n    }\n};\nconsole.log(user.name); \/\/ \"Derry\"\nuser.greet();           \/\/ \"Hi, I'm Derry\"<\/code><\/pre>\n\n\n\n
                    \ud83d\udccc Use Case:<\/strong> Represent users, orders, or configuration settings.<\/p>\n\n\n\n
                    \n\n\n\n
                    9. DOM Manipulation: Interact with Web Pages<\/strong><\/h3>\n\n\n\n
                    Change your webpage dynamically:<\/p>\n\n\n\n
                    document.querySelector(\"h1\").textContent = \"JavaScript Rocks!\";<\/code><\/pre>\n\n\n\n
                    \ud83d\udccc Use Case:<\/strong> Add animations, validate forms, or show\/hide elements.<\/p>\n\n\n\n
                    \n\n\n\n
                    That’s it for today’s post on studying the basics of JavaScript. I hope this brief introduction sparked your interest in JavaScript just like me! \ud83d\ude42<\/p>\n\n\n\n
                    <\/p>\n","protected":false},"excerpt":{"rendered":"
                    This is the basics of JavaScript, the secret sauce that makes your web pages more interactive. We’re going to cover the key topics so you won’t end up in a coding coma\u2014because who has the time for an exhausting lecture when there’s so much internet to explore? 1. What is JavaScript? Your Web Development Sidekick […]<\/p>\n","protected":false},"author":1,"featured_media":4139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[240,241,239,64],"class_list":["post-4135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-basic","tag-crash-course","tag-javascript","tag-tutorial"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2024\/12\/create-a-detailed-and-high-resolution-image-focusing-on-the-main.png?fit=1024%2C768&ssl=1","jetpack-related-posts":[{"id":4521,"url":"https:\/\/blog.derrylab.com\/index.php\/2025\/06\/17\/how-to-osv-vulnerabilities-api-scanners-and-a-bit-of-hope\/","url_meta":{"origin":4135,"position":0},"title":"How to OSV: Vulnerabilities API, Scanners, and a Bit of Hope","author":"derry","date":"June 17, 2025","format":false,"excerpt":"Security vulnerabilities in open-source dependencies are like background radiation, mostly ignorable, until they're not. Since we are currently working on vulnerability detection research, today, I decided to see how much trouble I could get into by poking around Google's Open Source Vulnerabilities database and its scanner. Spoiler: not much. But\u2026","rel":"","context":"In \"code security tools\"","block_context":{"text":"code security tools","link":"https:\/\/blog.derrylab.com\/index.php\/tag\/code-security-tools\/"},"img":{"alt_text":"pexels-photo-96612.jpeg","src":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/pexels-photo-96612.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/pexels-photo-96612.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/pexels-photo-96612.jpeg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/pexels-photo-96612.jpeg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/pexels-photo-96612.jpeg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":235,"url":"https:\/\/blog.derrylab.com\/index.php\/2021\/06\/24\/this-makes-my-risc-v-trap-handler-does-not-work\/","url_meta":{"origin":4135,"position":1},"title":"This Makes My RISC-V Trap Handler Does Not Work","author":"derry","date":"June 24, 2021","format":false,"excerpt":"I was working on a RISCV assembly when suddenly I got a weird issue.The exception does not get caught in the trap handler. I thought this was a QEMU bug on the RISCV target because the trap handler works on my other code.Then after a day of digging, I figured\u2026","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/blog.derrylab.com\/index.php\/category\/programming\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":544,"url":"https:\/\/blog.derrylab.com\/index.php\/2022\/03\/19\/how-to-enable-https-on-your-apache-ubuntu-web-server\/","url_meta":{"origin":4135,"position":2},"title":"How to Enable HTTPS on Your Apache Ubuntu Web Server","author":"derry","date":"March 19, 2022","format":false,"excerpt":"I thought this is an easy task, but after searching for various ways on the internet, it is not as simple as I imagined. There are many ways to enable HTPPS on your web server depending on what server software is used, the operating system, and where the server is\u2026","rel":"","context":"In "linux"","block_context":{"text":"linux","link":"https:\/\/blog.derrylab.com\/index.php\/category\/linux\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2022\/03\/franck-DoWZMPZ-M9s-unsplash.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2022\/03\/franck-DoWZMPZ-M9s-unsplash.jpg?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2022\/03\/franck-DoWZMPZ-M9s-unsplash.jpg?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2022\/03\/franck-DoWZMPZ-M9s-unsplash.jpg?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2022\/03\/franck-DoWZMPZ-M9s-unsplash.jpg?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":252,"url":"https:\/\/blog.derrylab.com\/index.php\/2021\/06\/28\/qemu-how-to-enable-plugin-build\/","url_meta":{"origin":4135,"position":3},"title":"QEMU: How to Enable Plugin Build","author":"derry","date":"June 28, 2021","format":false,"excerpt":"By default, QEMU does not enable the plugins. So you need to enable it on configure step by using --enable-plugins. mkdir build cd build ..\/configure --enable-plugins make -j$(nproc) make plugins","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/blog.derrylab.com\/index.php\/category\/programming\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":211,"url":"https:\/\/blog.derrylab.com\/index.php\/2021\/01\/28\/my-quick-ways-to-auto-format-code-in-vscode\/","url_meta":{"origin":4135,"position":4},"title":"My Quick Ways to Auto Format Code in VSCode","author":"derry","date":"January 28, 2021","format":false,"excerpt":"I don't have much time to format my code to looks neat in VSCode (Ctrl + Shift + I), but the default formatting from Visual Code is not efficient for me. It makes the first bracket on function placed alone in one line. This makes my code longer! If you're\u2026","rel":"","context":"In "linux"","block_context":{"text":"linux","link":"https:\/\/blog.derrylab.com\/index.php\/category\/linux\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2021\/01\/image.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2021\/01\/image.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2021\/01\/image.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2021\/01\/image.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4502,"url":"https:\/\/blog.derrylab.com\/index.php\/2025\/06\/09\/how-to-learn-sql-in-only-6-minutes\/","url_meta":{"origin":4135,"position":5},"title":"How to Learn SQL in Only 10 Minutes","author":"derry","date":"June 9, 2025","format":false,"excerpt":"I used to hate SQL.Too many keywords, weird syntax, and you always need some dummy table to even get started. But today, I finally sat down and said: \"Alright. Lets teach myself SQL like I have 10 minutes before a demo.\"So here's what I learned, I wish someone told me\u2026","rel":"","context":"In "linux"","block_context":{"text":"linux","link":"https:\/\/blog.derrylab.com\/index.php\/category\/linux\/"},"img":{"alt_text":"books in black wooden book shelf","src":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/books-bookstore-book-reading-159711.jpeg?fit=1200%2C798&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/books-bookstore-book-reading-159711.jpeg?fit=1200%2C798&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/books-bookstore-book-reading-159711.jpeg?fit=1200%2C798&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/books-bookstore-book-reading-159711.jpeg?fit=1200%2C798&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/blog.derrylab.com\/wp-content\/uploads\/2025\/06\/books-bookstore-book-reading-159711.jpeg?fit=1200%2C798&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/posts\/4135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/comments?post=4135"}],"version-history":[{"count":1,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/posts\/4135\/revisions"}],"predecessor-version":[{"id":4145,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/posts\/4135\/revisions\/4145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/media\/4139"}],"wp:attachment":[{"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/media?parent=4135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/categories?post=4135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.derrylab.com\/index.php\/wp-json\/wp\/v2\/tags?post=4135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}