آموزش جاوااسکریپت جلسه ۱

Introduction

This is the first session of a JavaScript tutorial series by Behzad Farhadi, aimed at beginners who want to learn JavaScript in a very simple way. The video starts with an overview of the key concepts that will be covered, including:

• The structure of an SRC folder containing HTML, CSS, and JavaScript files.
• Creating accounts on GitHub and CodeSandbox.
• Writing and executing JavaScript code in an online environment.
• Basic HTML and CSS concepts, including linking JavaScript files to HTML.

Main Topics Discussed

1. Setting Up Development Tools

Behzad introduces essential tools needed for web development:

• GitHub: A platform for version control and collaboration.
• CodeSandbox: An online code editor for JavaScript development.

2. Creating a GitHub Account

The tutorial walks through the process of signing up on GitHub:

1. Searching for “GitHub” on Google and clicking the sign-up button.
2. Entering an email address, creating a strong password, and selecting a username.
3. Completing a CAPTCHA to verify that the user is not a robot.
4. Checking email for a verification code and entering it on GitHub.
5. Selecting preferences (e.g., individual developer) and choosing a free plan.

3. Setting Up a CodeSandbox Account

Next, Behzad demonstrates how to create an account on CodeSandbox:

1. Searching for “CodeSandbox” on Google and selecting the official site.
2. Signing in with a GitHub account.
3. Configuring a username and account preferences.
4. Navigating through the CodeSandbox interface, including:
   • Recent projects.
   • Account settings.
   • Credit usage.
   • Repository connections.

4. Creating a JavaScript Project in CodeSandbox

• Clicking on “Create” to start a new JavaScript project.
• Selecting a popular JavaScript template.
• Exploring the automatically generated folder structure:
  • SRC Folder: Contains essential files like index.html, styles.css, and script.js.
  • index.html: Defines the structure of the webpage.
  • styles.css: Contains styles for the webpage.
  • script.js: Holds the JavaScript code.

5. Connecting JavaScript to HTML

• Opening the index.html file and examining its structure.
• Identifying the <script> tag, which is used to connect the HTML file to JavaScript.
• Demonstrating two ways to include JavaScript:
  1. Writing JavaScript directly inside the <script> tag.
  2. Linking an external JavaScript file using <script src="path-to-js-file"></script>.

6. Writing Basic JavaScript Code

• Opening the script.js file.
• Writing a simple console.log("Hello, JavaScript") statement.
• Explaining how the JavaScript code interacts with the HTML structure.

Conclusion

The first session provides a fundamental understanding of how to set up a JavaScript development environment using GitHub and CodeSandbox. The tutorial covers creating accounts, understanding file structures, and linking JavaScript to HTML. The next sessions will delve deeper into JavaScript programming concepts.