|
| 1 | +## ⚑ Introduction |
| 2 | +This introduction will give explanation about creating and using JavaScript in the HTML. |
| 3 | + |
| 4 | +### ✦ What is Vanilla JavaScript? |
| 5 | +Vanilla JavaScript is the pure, original version of JavaScript, without any additional frameworks or libraries. It's the basic and foundation for many modern web technologies are built. |
| 6 | + |
| 7 | +### ✦ What is the need for it? |
| 8 | +* **Understanding the Basics:** Learning Vanilla JavaScript will provides a strong foundation for understanding about How web pages are work? and How it interact with users?. |
| 9 | +* **Flexibility:** Vanilla JavaScript offers maximum control and flexibility for building the custom solutions tailored to meet specific needs. |
| 10 | +* **Compatibility:** It's compatible with all modern web browsers, ensuring that script works across different devices and platforms. |
| 11 | + |
| 12 | +### ✦ Getting Started: |
| 13 | +1. **Text Editor:** Choose a text editor or professional code editors.. |
| 14 | +2. **HTML File:** Create a new HTML file (e.g., `index.html`) and open it in your text editor. |
| 15 | +3. **Basic Structure:** Add the basic HTML structure: |
| 16 | + |
| 17 | + ```html |
| 18 | + <!DOCTYPE html> |
| 19 | + <html> |
| 20 | + <head> |
| 21 | + <title>My First JavaScript Page</title> |
| 22 | + </head> |
| 23 | + <body> |
| 24 | + <h1 id="heading"></h1> |
| 25 | + <script src="script.js"></script> |
| 26 | + </body> |
| 27 | + </html> |
| 28 | + ``` |
| 29 | + |
| 30 | +4. **Create JavaScript File:** Create a new JavaScript file (e.g., `script.js`) and link it to your HTML file using the [`<script>`](https://github.com/ag-sanjjeev/HTML-Notes/blob/master/tags/script-tag.md) tag. |
| 31 | + |
| 32 | +**Example:** |
| 33 | +```javascript |
| 34 | +// Variables |
| 35 | +let message = "Hello, World!"; |
| 36 | + |
| 37 | +// DOM Manipulation |
| 38 | +let heading = document.getElementById("heading"); |
| 39 | +heading.textContent = message; |
| 40 | +``` |
| 41 | + |
| 42 | +5. **Running JavaScript:** |
| 43 | + - Then **`select the html file`** and run by hitting the **`ENTER`** button |
| 44 | + - Or by **`open`** or by **`open with`** option menu associated with that selected file. |
| 45 | + - After that above actions will be reflected on the web browser. |
| 46 | + |
| 47 | +6. **Best Practices:** |
| 48 | + - Instead of js files, You can directly write JavaScript for the HTML document via [Script Tag](https://github.com/ag-sanjjeev/HTML-Notes/blob/master/tags/script-tag.md). |
| 49 | + - The best practice is, Write separate file for JavaScript file to make HTML document clean and neat in the code. And also it gives the code re-usability. |
| 50 | + |
| 51 | +--- |
| 52 | +[⇪ To Top](#-introduction) |
| 53 | + |
| 54 | +[❮ Previous Topic](./README.md) [Next Topic ❯](./topics.md) |
| 55 | + |
| 56 | +[⌂ Goto Home Page](./README.md) |
0 commit comments