diff --git a/docs/javascript/_category_.json b/docs/javascript/_category_.json new file mode 100644 index 0000000000..53c1dd89f7 --- /dev/null +++ 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." + } + } \ No newline at end of file diff --git a/docs/javascript/basic-js.md b/docs/javascript/basic-js.md new file mode 100644 index 0000000000..cc8173727a --- /dev/null +++ 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" + + +
+ + + + + + + +``` + +Hello World!
+Hello World!
+Open the console to see the output.
+ + + +``` + +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" + + + + + +Open the console to see the output.
+ + + +``` + +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. \ No newline at end of file diff --git a/docs/javascript/intro-js.md b/docs/javascript/intro-js.md index 701091c758..5398c06b53 100644 --- 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'; diff --git a/docs/javascript/statement-js.md b/docs/javascript/statement-js.md index e69de29bb2..d0d5dd6880 100644 --- a/docs/javascript/statement-js.md +++ b/docs/javascript/statement-js.md @@ -0,0 +1,176 @@ +--- +id: satatement-in-js +title: Statement in JavaScript +sidebar_label: Statement in JavaScript +sidebar_position: 4 +tags: [JavaScript, Statement in JavaScript, statement in js, statement in JavaScript, JavaScript statement] +description: Write statements in JavaScript to perform different actions. Learn about different types of statements in JavaScript such as declaration statement, assignment statement, conditional statement, loop statement, function statement, return statement, break statement, continue statement, try...catch statement, and throw statement. +--- + +In this tutorial, you will learn about the statement in JavaScript. A statement is a command that performs an action. JavaScript is a scripting language, and it is executed by the browser. JavaScript statements are executed by the browser in the order they are written. + +## Types of Statements in JavaScript + +There are different types of statements in JavaScript. Some of the most commonly used statements are: + +### 1. Declaration Statement + +A declaration statement is used to declare a variable in JavaScript. For example, + +```js title="declaration-statement.js" +var name; +let age; +const PI = 3.14; +``` + +In the above program, we have declared three variables `name`, `age`, and `PI` using the `var`, `let`, and `const` keyword respectively. + +### 2. Assignment Statement + +An assignment statement is used to assign a value to a variable in JavaScript. For example, + +```js title="assignment-statement.js" +var name = "Ajay"; +let age = 23; +const PI = 3.14; +``` + +In the above program, we have assigned the value `"Ajay"` to the `name` variable, `23` to the `age` variable, and `3.14` to the `PI` variable. + +### 3. Conditional Statement + +A conditional statement is used to perform different actions based on different conditions. For example, + +```js title="conditional-statement.js" +var age = 23; + +if (age >= 18) { + console.log("You are eligible to vote."); +} else { + console.log("You are not eligible to vote."); +} +``` + +In the above program, we have used the `if...else` statement to check if the `age` is greater than or equal to `18`. If the condition is `true`, then it will print `"You are eligible to vote."`, otherwise it will print `"You are not eligible to vote."`. + +### 4. Loop Statement + +A loop statement is used to execute a block of code multiple times. For example, + +```js title="loop-statement.js" +for (var i = 1; i <= 5; i++) { + console.log(i); +} +``` + +In the above program, we have used the `for` loop to print numbers from `1` to `5`. + +### 5. Function Statement + +A function statement is used to define a function in JavaScript. For example, + +```js title="function-statement.js" +function greet() { + console.log("Hello, World!"); +} + +greet(); // Output: Hello, World! +``` + +In the above program, we have defined a function `greet()` that prints `"Hello, World!"` to the console. + +### 6. Return Statement + +A return statement is used to return a value from a function in JavaScript. For example, + +```js title="return-statement.js" +function add(a, b) { + return a + b; +} + +var sum = add(5, 3); + +console.log(sum); // Output: 8 +``` + +In the above program, we have used the `return` statement to return the sum of `a` and `b` from the `add()` function. + +### 7. Break Statement + +A break statement is used to terminate a loop in JavaScript. For example, + +```js title="break-statement.js" +for (var i = 1; i <= 5; i++) { + if (i === 3) { + break; + } + console.log(i); +} +``` + +In the above program, we have used the `break` statement to terminate the loop when `i` is equal to `3`. + +### 8. Continue Statement + +A continue statement is used to skip the current iteration of a loop in JavaScript. For example, + +```js title="continue-statement.js" + +for (var i = 1; i <= 5; i++) { + if (i === 3) { + continue; + } + console.log(i); +} +``` + +In the above program, we have used the `continue` statement to skip the iteration when `i` is equal to `3`. + +### 9. Try...Catch Statement + +A try...catch statement is used to handle errors in JavaScript. For example, + +```js title="try-catch-statement.js" +try { + var result = 10 / 0; + console.log(result); +} catch (error) { + console.log("An error occurred: " + error.message); +} +``` + +In the above program, we have used the `try...catch` statement to handle the division by zero error. + +### 10. Throw Statement + +A throw statement is used to throw an exception in JavaScript. For example, + +```js title="throw-statement.js" +function divide(a, b) { + if (b === 0) { + throw new Error("Division by zero"); + } + return a / b; +} + +try { + var result = divide(10, 0); + console.log(result); +} catch (error) { + console.log("An error occurred: " + error.message); // Output: An error occurred: Division by zero +} +``` + +In the above program, we have used the `throw` statement to throw an exception when `b` is equal to `0`. + +:::info +In JavaScript, a statement is terminated by a semicolon `;`. However, it is optional in most cases. But it is a good practice to use a semicolon to terminate a statement. +::: + +## Conclusion + +In this tutorial, you have learned about the statement in JavaScript. A statement is a command that performs an action. JavaScript statements are executed by the browser in the order they are written. There are different types of statements in JavaScript such as declaration statement, assignment statement, conditional statement, loop statement, function statement, return statement, break statement, continue statement, try...catch statement, and throw statement. You can use these statements to perform different actions in JavaScript. + +I hope this tutorial will help you to understand the statement in JavaScript. + +If you have any questions or feedback, feel free to reach out to me in the comment section below. \ No newline at end of file diff --git a/docs/javascript/syntax-js-.md b/docs/javascript/syntax-js-.md index 075cfbc5ca..f1501e2660 100644 --- a/docs/javascript/syntax-js-.md +++ b/docs/javascript/syntax-js-.md @@ -1,7 +1,243 @@ --- -id: syntax-js +id: syntax-of-js title: Syntax of JavaScript -sidebar_label: Js Syntax -sidebar_position: 4 -tags: [JavaScript, Introduction of js, Introduction of JavaScript] ---- \ No newline at end of file +sidebar_label: Syntax of JavaScript +sidebar_position: 5 +tags: [JavaScript, Syntax of JavaScript, syntax of js, syntax of JavaScript, JavaScript syntax] +description: Write a JavaScript program using the syntax of JavaScript. Learn about the syntax of JavaScript, how to create a JavaScript file, how to create variables, how to use variables, how to create and use functions, JavaScript values, operators, literals, keywords, comments, statements, expressions, identifiers, naming conventions, case sensitivity, and the JavaScript character set. +--- + +In this tutorial, you will learn about the syntax of JavaScript. The syntax of JavaScript is the set of rules that define how a JavaScript program will be written and interpreted. The syntax of JavaScript is similar to the syntax of other programming languages like C, C++, and Java. + +## Hello, World! Program in JavaScript + +Let's start with a simple "Hello, World!" program in JavaScript. + +```js title="HelloWorld.js" +console.log("Hello, World!"); +``` + +In the above program, we have used the `console.log()` method to print "Hello, World!" to the console. + +## How to create a JavaScript file? + +You can create a JavaScript file with a `.js` extension. For example, `HelloWorld.js`. + +## How to create variables in JavaScript? + +You can create variables in JavaScript using the `var`, `let`, or `const` keyword. For example, + +```js title="variables.js" +var name = "Ajay"; +let age = 23; +const PI = 3.14; +``` + +In the above program, we have created three variables `name`, `age`, and `PI` using the `var`, `let`, and `const` keyword respectively. + +## How to use variables in JavaScript? + +You can use variables in JavaScript to store and manipulate data. For example, + +```js title="use-variables.js" +var name = "Ajay"; +console.log(name); // Output: Ajay + +let age = 23; + +age = age + 1; + +console.log(age); // Output: 24 +``` + +In the above program, we have used the `name` and `age` variables to store and manipulate data. + +## How to create and use functions in JavaScript? + +You can create and use functions in JavaScript to perform a specific task. Functions is created using the `function` keyword. For example, + +```js title="functions.js" +function greet() { + console.log("Hello, World!"); +} + +greet(); // Output: Hello, World! +``` + +In the above program, we have created a function `greet()` that prints "Hello, World!" to the console. + +## JavaScript Values + +JavaScript values are the data that is stored in variables. For example, `10`, `"Hello, World!"`, `true`, `false`, etc. + +for example, + +```js title="values.js" +var num = 10; +var name = "Ajay"; +var isStudent = true; +``` + +## JavaScript Operators + +JavaScript operators are used to perform operations on variables and values. For example, `+`, `-`, `*`, `/`, `==`, `!=`, `>`, `<`, etc. + +For example, + +```js title="operators.js" +var num1 = 10; +var num2 = 20; + +var sum = num1 + num2; +console.log(sum); // Output: 30 + +var isGreater = num1 > num2; +console.log(isGreater); // Output: false +``` + +## JavaScript Literals + +JavaScript literals are fixed values that are directly written in the code. For example, `10`, `"Hello, World!"`, `true`, `false`, etc. + +For example, + +```js title="literals.js" +console.log(10); // Output: 10 +console.log("Hello, World!"); // Output: Hello, World! +console.log(true); // Output: true +``` + +## JavaScript Keywords + +JavaScript keywords are the reserved words that have a special meaning in JavaScript. For example, `var`, `let`, `const`, `function`, `if`, `else`, `for`, `while`, etc. + +For example, + +```js title="keywords.js" +var name = "Ajay"; +let age = 23; +const PI = 3.14; + +if (age > 18) { + console.log("You are an adult!"); +} else { + console.log("You are a child!"); +} +``` + +## JavaScript Comments + +JavaScript comments are used to explain the code and make it more readable. There are two types of comments in JavaScript: single-line comments and multi-line comments. + +For example, + +```js title="comments.js" + +// This is a single-line comment + +/* +This is a multi-line comment +It can span multiple lines +*/ +``` + +## JavaScript Statements + +JavaScript statements are the instructions that are executed by the browser. For example, variable declaration, conditional statement, loop statement, function statement, etc. + +For example, + +```js title="statements.js" +var name = "Ajay"; +let age = 23; +const PI = 3.14; + +if (age > 18) { + console.log("You are an adult!"); +} else { + console.log("You are a child!"); +} +``` + +In the above program, we have declared variables `name`, `age`, and `PI` using the `var`, `let`, and `const` keyword respectively. We have also used the `if...else` statement to check if the `age` is greater than `18`. + +## JavaScript Expressions + +JavaScript expressions are the combination of values, variables, and operators that are evaluated to produce a value. For example, `10 + 20`, `name + " is " + age + " years old"`, etc. + +For example, + +```js title="expressions.js" +var num1 = 10; +var num2 = 20; + +var sum = num1 + num2; + +var name = "Ajay"; +let age = 23; + +var message = name + " is " + age + " years old."; +``` + +In the above program, `num1 + num2` and `name + " is " + age + " years old"` are expressions. + +## JavaScript Identifiers, Naming Conventions, and Case Sensitivity + +JavaScript identifiers are the names given to variables, functions, labels, and objects. JavaScript identifiers are case-sensitive and can contain letters, digits, underscores, and dollar signs. + +A JavaScript name must start with: + +- A letter (A-Z or a-z) +- A dollar sign ($) +- Or an underscore (_) +- After the first letter, a JavaScript name can also contain digits (0-9). +- JavaScript names are case-sensitive. + +For example, + +```js title="identifiers.js" +var name = "Ajay"; +let Age = 23; +const $currency = "USD"; +const _PI = 3.14; +const isStudent = true; +const surname123 = "Dhangar"; +``` + +In the above program, `name`, `Age`, `$currency`, `_PI`, `isStudent`, and `surname123` are identifiers. + +## JavaScript Character Set + +JavaScript uses the Unicode character set. JavaScript supports both ASCII and Unicode characters. + +for example, + +```js title="character-set.js" +var name = "Ajay"; +var ₹ = "Rupee"; +var こんにちは = "Hello"; +``` + +In the above program, `name`, `₹`, and `こんにちは` are identifiers. + +:::warning +- JavaScript identifiers should not start with a digit (0-9). + for example, + ```js title="invalid-identifiers.js" + var 123name = "Ajay"; // Invalid + ``` +- JavaScript identifiers should not contain special characters except `$` and `_`. + for example, + ```js title="invalid-identifiers.js" + var first-name = "Ajay"; // Invalid + ``` +- JavaScript identifiers should not be a JavaScript keyword. + for example, + ```js title="invalid-identifiers.js" + var var = "Ajay"; // Invalid + ``` +::: + +## Conclusion + +In this tutorial, you have learned about the syntax of JavaScript. The syntax of JavaScript is the set of rules that define how a JavaScript program will be written and interpreted. The syntax of JavaScript is similar to the syntax of other programming languages like C, C++, and Java. You have also learned about the "Hello, World!" program, how to create a JavaScript file, how to create variables, how to use variables, how to create and use functions, JavaScript values, operators, literals, keywords, comments, statements, expressions, identifiers, naming conventions, case sensitivity, and the JavaScript character set. \ No newline at end of file diff --git a/docs/javascript/variables-js.md b/docs/javascript/variables-js.md new file mode 100644 index 0000000000..5dabdaef36 --- /dev/null +++ b/docs/javascript/variables-js.md @@ -0,0 +1,176 @@ +--- +id: variables-in-javascript +title: Variables in JavaScript +sidebar_label: Variables in JavaScript +sidebar_position: 7 +tags: [JavaScript, Variables, variables in js, JavaScript variables] +description: What are variables in JavaScript? How to declare and initialize variables in JavaScript? Learn about variable naming rules and best practices. +--- + +In this tutorial, you will learn about variables in JavaScript. Variables are used to store data. They are like containers that hold data. You can think of them as a box that holds different items. You can put anything in the box and give it a name. Similarly, you can store different types of data in a variable and give it a name. + +## What are Variables? + +A variable is a named storage location that holds data. It has a name and a value. The value of a variable can change during the execution of a program. + +```mermaid +graph LR; + A[Variables] --> B(Containers for storing data); + B --> C(Data can be of different types, such as numbers, strings, booleans, etc.); + B --> D(Data can be assigned, retrieved, and modified); + B --> E(Variables have a name or identifier); + B --> F(Variables can have different scopes, such as global scope or local scope); +``` + +In JavaScript, you can declare a variable using the `var`, `let`, or `const` keyword. + +## Declaring Variables + +You can declare a variable using the `var`, `let`, or `const` keyword followed by the variable name. + +```mermaid +sequenceDiagram + participant User + participant Interpreter + participant Memory + + User->>Interpreter: Declare Variables + Interpreter->>User: Choose a name for the variable + Interpreter->>User: Determine the data type + Interpreter->>User: Use the appropriate keyword to declare the variable + Interpreter->>User: Optionally assign an initial value to the variable + Interpreter->>Memory: Allocate memory for the variable + Interpreter->>Interpreter: Store variable name and data type in symbol table + Interpreter->>User: Variable declaration completed + +``` + +For example, + +```js title="declaring-variables.js" +var name; +let age; +const PI = 3.14; +``` + +In this example, we have declared three variables: `name`, `age`, and `PI`. The `var` and `let` keywords are used to declare variables. The `const` keyword is used to declare constants. + +:::important +The `var` keyword is used to declare variables in JavaScript. However, it is recommended to use `let` and `const` instead of `var` to declare variables. We will learn more about `let` and `const` in the upcoming sections. +::: + +## Initializing Variables + +You can initialize a variable at the time of declaration. To initialize a variable, you can assign a value to it using the assignment operator (`=`). + +```mermaid +sequenceDiagram + participant User + participant Interpreter + participant Memory + + User->>Interpreter: Initialize Variables + Interpreter->>User: Provide initial values for variables + Interpreter->>Memory: Assign initial values to variables in memory + Interpreter->>User: Initialization completed +``` + +For example, + +```js title="initializing-variables.js" +var name = "John"; +let age = 25; +const PI = 3.14; +``` + +In this example, we have initialized three variables: `name`, `age`, and `PI`. The `name` variable is initialized with the value `"John"`, the `age` variable is initialized with the value `25`, and the `PI` constant is initialized with the value `3.14`. + +## Variable Naming Rules + +```mermaid +flowchart LR; + Start --> A[Variable Naming Rules]; + A --> B{Start with Letter, Underscore or Dollar Sign }; + B --> |Yes| C[Continue with Letters, Digits, Underscores, or Dollar Signs]; + C --> D{Not Start with Digit}; + D --> |Yes| E[Not Reserved Keywords]; + E --> F{Follow Naming Convention}; + F --> |Yes| G[Valid Variable Name]; + B --> |No| H[Invalid Variable Name]; + D --> |No| H; + E --> |No| H; + H --> I{Error or Warning}; + I --> J[Review and Correct]; +``` + +When naming variables in JavaScript, there are a few rules you need to follow: + +1. The variable name must start with a letter, underscore (`_`), or dollar sign (`$`). +2. The variable name can contain letters, digits, underscores (`_`), or dollar signs (`$`). +3. The variable name cannot contain spaces or special characters, except underscores (`_`) or dollar signs (`$`). +4. The variable name is case-sensitive. For example, `name`, `Name`, and `NAME` are three different variables. +5. The variable name should be descriptive and meaningful. +6. The variable name should not be a reserved keyword. +7. The variable name should follow camelCase or snake_case naming convention. +8. The variable name should not start with a capital letter. +9. The variable name should not be too long or too short. +10. The variable name should not be a JavaScript built-in object, method, or property. + +## Best Practices for Naming Variables + +```mermaid +flowchart LR; + Start --> A[Best Practices for Naming Variables]; + A --> B[Use descriptive names]; + A --> C[Use camelCase]; + A --> D[Avoid abbreviations]; + A --> E[Be consistent]; + A --> F[Avoid single-letter names]; + A --> G[Avoid reserved keywords]; + B --> H{Descriptive}; + H --> |Yes| I[Good]; + H --> |No| J[Improve]; + J --> K{Improve}; + K --> |Yes| I; + K --> |No| J; + I --> L{CamelCase}; + L --> |Yes| M[Good]; + L --> |No| N[Improve]; + N --> O{Improve}; + O --> |Yes| M; + O --> |No| N; + E --> P{Consistency}; + P --> |Yes| Q[Good]; + P --> |No| R[Improve]; + R --> S{Improve}; + S --> |Yes| Q; + S --> |No| R; + F --> T{Single-letter}; + T --> |Yes| U[Improve]; + T --> |No| V[Good]; + U --> W{Improve}; + W --> |Yes| V; + W --> |No| U; + G --> X{Reserved Keywords}; + X --> |Yes| Y[Avoided]; + X --> |No| Z[Good]; +``` + +When naming variables in JavaScript, you should follow these best practices: + +1. Use descriptive and meaningful variable names. + for example, `firstName`, `lastName`, `age`, `email`, `address`, etc. +2. Use camelCase or snake_case naming convention. + for example, `firstName`, `last_name`, `userAge`, `user_email`, etc. +3. Do not use reserved keywords as variable names. + for example, `var`, `let`, `const`, `function`, `if`, `else`, `while`, `for`, etc. +4. Do not use JavaScript built-in objects, methods, or properties as variable names. + for example, `Math`, `Date`, `String`, `Number`, `Object`, `Array`, `console`, `log`, `error`, etc. +5. Do not use a single character as a variable name. + for example, `a`, `b`, `c`, `x`, `y`, `z`, etc. +6. Do not use a too long or too short variable name. + for example, `thisIsAVeryLongVariableName`, `a`, `b`, etc. + +## Conclusion + +In this tutorial, you learned about variables in JavaScript. You learned what variables are, how to declare and initialize variables, and the rules and best practices for naming variables. In the next tutorial, you will learn about data types in JavaScript. \ No newline at end of file diff --git a/docs/javascript/where-to-js.md b/docs/javascript/where-to-js.md index 23da4125d1..945b5024e5 100644 --- a/docs/javascript/where-to-js.md +++ b/docs/javascript/where-to-js.md @@ -1,9 +1,10 @@ --- id: where-to-js title: Where to Write JavaScript -sidebar_label: Where to Js -sidebar_position: 3 -tags: [JavaScript, Introduction of js, Introduction of JavaScript] +sidebar_label: Where to JavaScript +sidebar_position: 2 +tags: [JavaScript, Introduction of js, Introduction of JavaScript, Where to javascript ] +description: Where to write JavaScript code? Learn about the different places where JavaScript code can be written such as inline JavaScript, internal JavaScript, and external JavaScript. --- import BrowserWindow from '@site/src/components/BrowserWindow';