added tutorials

ajay-dhangar · Feb 23, 2024 · 27339a3 · 27339a3
1 parent deb587e
commit 27339a3
Show file tree

Hide file tree

Showing 8 changed files with 829 additions and 10 deletions.
diff --git a/docs/javascript/_category_.json b/docs/javascript/_category_.json
@@ -0,0 +1,8 @@
+{
+    "label": "JavaScript",
+    "position": 4,
+    "link": {
+      "type": "generated-index",
+      "description": "Learn the most popular programming language in the world."
+    }
+  }
diff --git a/docs/javascript/basic-js.md b/docs/javascript/basic-js.md
@@ -0,0 +1,120 @@
+---
+id: basic-javascript
+title: Basic JavaScript Concepts
+sidebar_label: Basic JavaScript
+sidebar_position: 3
+tags: [JavaScript, Introduction of js, Introduction of JavaScript, Basic JavaScript Concepts, basic js concepts, basic js]
+description: Basic concepts of JavaScript. Learn about displaying output in JavaScript, JavaScript display possibilities, and more.
+---
+
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+In this tutorial, you will learn about the basic concepts of JavaScript. We know that JavaScript is easy to manipulate and can be used to create dynamic content on the web pages. That means JavaScript can be used to change the content of the web page without refreshing the page. Content may be text, images, or any other HTML element. 
+
+**So, let's start with the basic concepts of JavaScript.**
+
+## Displaying Output in JavaScript
+
+To display output in JavaScript, we use the `console.log()` method. The `console.log()` method is used to display the output in the console of the web browser. 
+
+```js title="index.js"
+console.log('Hello World!');
+```
+
+## JavaScript Display Possibilities 
+
+JavaScript can display data in different ways. Here are some of the ways to display data in JavaScript:
+
+### 1. Alert Box
+
+The `alert()` method is used to display an alert box with a message and an OK button. 
+
+```js title="index.js"
+alert('Hello World!');
+```
+
+### 2. Writing into an HTML Element
+
+The `document.write()` method is used to write into the HTML document. 
+
+```js title="index.js"
+document.write('Hello World!');
+```
+
+### 3. Writing into the Browser Console
+
+The `console.log()` method is used to write into the browser console. 
+
+```js title="index.js"
+console.log('Hello World!');
+```
+
+### 4. Writing into an HTML Element Using `innerHTML`
+
+The `innerHTML` property is used to write into an HTML element. 
+
+```js title="index.html"
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <p id="demo"></p>
+
+    <script>
+      document.getElementById('demo').innerHTML = 'Hello World!';
+    </script>
+
+  </body>
+</html>
+```
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+    <p id="demo">Hello World!</p>
+</BrowserWindow>
+
+### 5. Writing into an HTML Element Using `window.alert()`
+
+The `window.alert()` method is used to write into an HTML element. 
+
+```js title="index.html"
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <p id="demo"></p>
+
+    <script>
+      window.alert('Hello World!');
+    </script>
+
+  </body>
+</html>
+```
+
+### 6. Writing into an HTML Element Using `document.getElementById().innerText`
+
+The `document.getElementById().innerText` method is used to write into an HTML element. 
+
+```js title="index.html"
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <p id="demo"></p>
+
+    <script>
+      document.getElementById('demo').innerText = 'Hello World!';
+    </script>
+
+  </body>
+</html>
+```
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html">
+    <p id="demo">Hello World!</p>
+</BrowserWindow>
+
+:::info
+**Before moving to the next section, make sure you have a basic understanding of the above concepts.**
+You can use any of the above methods to display the output in JavaScript.
+:::
diff --git a/docs/javascript/comments-js.md b/docs/javascript/comments-js.md
@@ -0,0 +1,101 @@
+---
+id: comments-in-javascript
+title: Comments in JavaScript
+sidebar_label: Comments in JavaScript
+sidebar_position: 6
+tags: [JavaScript, Comments in JavaScript, comments in js, JavaScript comments]
+description: Write comments in JavaScript to explain the code and make it more readable. Learn about single-line comments and multi-line comments in JavaScript.
+---
+
+In this tutorial, you will learn about comments in JavaScript. Comments are used to explain the code and make it more readable. They are ignored by the JavaScript interpreter.
+
+There are two types of comments in JavaScript:
+
+1. Single-line comments
+2. Multi-line comments
+
+## Single-line Comments
+
+Single-line comments start with `//`. They are used to add comments to a single line.
+
+For example,
+
+```js title="single-line-comments.js"
+// This is a single-line comment
+
+console.log("Hello, World!"); // Output: Hello, World!
+```
+
+## Multi-line Comments
+
+Multi-line comments start with `/*` and end with `*/`. They are used to add comments to multiple lines.
+
+For example,
+
+```js title="multi-line-comments.js"
+/*
+This is a multi-line comment
+It can span multiple lines
+*/
+
+console.log("Hello, World!"); // Output: Hello, World!
+```
+
+In this example, the multi-line comment spans multiple lines.
+
+**Now Let's Get Started with html**
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Comments in JavaScript</title>
+</head>
+<body>
+  <h1>Comments in JavaScript</h1>
+  <p>Open the console to see the output.</p>
+  <script>
+    // This is a single-line comment
+    console.log("Hello, World!"); // Output: Hello, World!
+  </script>
+</body>
+</html>
+```
+
+In this example, we have added a single-line comment and a single-line comment at the end of the line.
+
+**Now Let's Get Started with multi-line comments**
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Comments in JavaScript</title>
+</head>
+<body>
+  <h1>Comments in JavaScript</h1>
+  <p>Open the console to see the output.</p>
+  <script>
+    /*
+    This is a multi-line comment
+    It can span multiple lines
+    */
+    console.log("Hello, World!"); // Output: Hello, World!
+  </script>
+</body>
+</html>
+```
+
+In this example, we have added a multi-line comment that spans multiple lines.
+
+:::note
+Comments are used to explain the code and make it more readable. They are ignored by the JavaScript interpreter.
+:::
+
+## Conclusion
+
+In this tutorial, you learned about comments in JavaScript. You learned about single-line comments and multi-line comments. Comments are used to explain the code and make it more readable. They are ignored by the JavaScript interpreter.
diff --git a/docs/javascript/intro-js.md b/docs/javascript/intro-js.md
@@ -1,9 +1,10 @@
 ---
 id: intro-js
 title: Introduction to JavaScript
-sidebar_label: Introduction of Js
-sidebar_position: 2
+sidebar_label: Introduction to JavaScript
+sidebar_position: 1
 tags: [JavaScript, Introduction of js, Introduction of JavaScript]
+description: What is JavaScript? Why JavaScript? How to use JavaScript? Learn about JavaScript in this tutorial.
 ---
 
 import BrowserWindow from '@site/src/components/BrowserWindow';