JavaScript Journey: Day 1

• This is day one of a 40-day JavaScript journey, aiming to take you from beginner to advanced.
• JavaScript is the magic behind website interactivity, button clicks, and animations.
• The course provides structured learning through video sessions released every few days with tasks and assignments to complete.
• The suggestion is to not rush, as mastering JavaScript requires time and consistent effort.

Progress Tracker

• A free progress tracker is available to monitor your learning.
• The tracker is accessible via a link on topmate.com or in the video description.
• To access the tracker, fill in your details and confirm the free access.
• The PDF will allow access to a notion template link.
• Duplicate the template to your Notion workspace.
• Add video links, learning dates, and completion status to each day's module.
• Add key takeaways and track assignment progress (notes, design, coding, readme, GitHub push).
• Share finished assignments on the Discord community channel.
• This tracker helps build a consistent and regular learning habit.

Community and Support

• Engage through YouTube comments, Discord discussions, and sharing learning resources.
• Post questions and seek clarifications on Discord.
• Share additional learning resources to help you and others in the community.

What is JavaScript?

• JavaScript is a programming language used to build applications that run on browsers (client-side) or servers.
• It adds user interactivity to applications (button clicks, animations, dynamic updates).
• Every modern website uses JavaScript.
• Knowledge of JavaScript enables building websites, web applications, mobile applications, games, and AI-powered products.

History of JavaScript

• 1995: Brendan Eich creates JavaScript in 10 days at Netscape.
• 1996: Microsoft releases JScript for Internet Explorer.
• 1997: First ECMAScript standard (ES1).
• 1999: ES3 introduces regular expressions and exception handling.
• 2005: Google starts using Ajax, revolutionizing web development.
• 2006: jQuery simplifies JavaScript, increasing its accessibility.
• 2009: ES5 introduces JSON and array methods (map, filter, reduce).
• 2010: AngularJS gains popularity as a front-end framework.
• 2013: ReactJS emerges with a component-driven architecture.
• 2014: ECMAScript standards begin annual updates.
• 2015: ES6 (Modern JavaScript) introduces let, const, classes, modules, and arrow functions.
• 2016: VueJS gains popularity.
• 2017: ES8 introduces async/await for easier asynchronous programming.
• 2019: ES10 introduces flatMap for arrays.
• 2020: Deno is introduced.
• 2021: New logical assignment operators are added.
• 2022: ES13 and ES14 are released.
• 2024: React server components emerge in React and Next.js.
• 2025: JavaScript continues to evolve, incorporating AI and web assembly.
• JavaScript evolved from client-side scripting to server-side with Node.js.
• Frameworks and libraries like React, Angular, Vue.js, Next.js, and Remix are built on JavaScript.

Setting Up Your JavaScript Environment

• VS Code editor is recommended (download from the official website).
• A browser (Chrome, Edge, Safari, Firefox) with developer tools is needed.
• Open DevTools by right-clicking and selecting "Inspect."
• The "Console" tab in DevTools will be used extensively.
• NodeJS is required, particularly later in the course (download and install from nodejs.org).

Writing Your First Line of Code

• One way is to use the browser's DevTools console to write and execute JavaScript code directly.
• Type console.log("Hello JavaScript"); in the console and press Enter to see the output.
• console.log prints the specified text or string to the console.
• Another way is to use VS Code to write the code.
• Create a new file (e.g., first.html) in VS Code.

Ways to Include Javascript

Client-Side and HTML

• HTML provides the structure of a web page.
• JavaScript adds interactivity.
• CSS styles the web page.
• HTML, CSS, and JavaScript together create a rich web application.

Inline Script

• Add a script tag inside an HTML file.
• You can include javascript with a tag called <script>. Example: <script>console.log("Hello JavaScript")</script>.
• However, separation of concerns is best practice: HTML for structure, JavaScript for behavior, and CSS for styling.

External Script

• Create a separate .js file (e.g., test.js) for JavaScript code.
• In the .js file, write JavaScript code (e.g., console.log("I am a test script");).
• Link the .js file in the HTML file using the <script> tag with the src attribute. Example: <script src="test.js"></script>.
• It is best practice to write external javascript files.

Including script tag within the HTML <head> can impact the script execution

• Browsers download HTML, build the DOM, download the script, and then execute the script.
• When including the <script> tag in the <head>, the browser will start parsing the HTML from top to bottom.
• When it encounters the <script> tag, the script will be downloaded and the browser will attempt to execute it.
• But the browser may not have parsed the rest of the HTML document to that point.
• As a result, any dependencies will not yet be present or created.

Including script tag within the HTML <body>

• Developers sometimes solve this issue by including the <script> tag at the end of the <body>.
• This guarantees that the entire HTML has downloaded, the DOM constructed and any dependencies dealt with by the time the <script> is executed.
• This isn't efficient, however.
• The download and execution of the <script> is only triggered when the HTML has finished downloading.
• This means a delay in response while the browser waits for the <script> to download and execute.

Async

• Adding "async" within the <script> tag solves this issue.
• This sets the Javascript to download in parallel as the HTML is being written and parsed.
• However, once the script download is finished, the HTML pauses and then the script executes.
• Async is best used for files that don't have any depedencies
• An example would be third party libraries.

Defer

• Defer is the most efficient and commonly used way to load javascript.
• Used by including the "defer" addition inside the <script> tags within the HTML
• <script defer src="test.js"></script>
• Just like async, it downloads in parallel.
• DEFER DIFFERS BECAUSE THE PARSING AND DOM BUILDING IS ALL DONE FIRST! and the script runs at the end

Summary

• Use defer for internal Javascript and async for external.

Server Side Javascript

• Create a .js file (e.g., script.js).
• Write JavaScript code (e.g., console.log("Hello from Node.js");).
• Open a terminal or command prompt.
• Run the script using the command node script.js.

Next Steps

• The next video will cover variables, let, const, var, value types, pass by value, and pass by reference.

Task Assignments

• Set up the environment (VS Code, Live Server, browser DevTools).
• Write a basic HTML file and link an external script.js file.
• Experiment with async and defer attributes in the <script> tag.
• Track your progress using the provided template.
• Share your work and questions on the Discord channel.