From 8b617751f955cebca2140ff56ff36a9210a89130 Mon Sep 17 00:00:00 2001 From: Koushikon <54022602+Koushikon@users.noreply.github.com> Date: Sun, 12 Mar 2023 13:55:33 +0530 Subject: [PATCH] Edit: Programs and Readme --- 01.Basic/Declared_Types.ipynb | 267 ++++++++++++++++++++++++++++++++ Sample.js => 01.Basic/Sample.js | 0 DOM/Lesson_1.ipynb | 193 +++++++++++++++++++++++ JavaScript.code-workspace | 6 + Readme.md | 3 +- 5 files changed, 467 insertions(+), 2 deletions(-) create mode 100644 01.Basic/Declared_Types.ipynb rename Sample.js => 01.Basic/Sample.js (100%) create mode 100644 DOM/Lesson_1.ipynb diff --git a/01.Basic/Declared_Types.ipynb b/01.Basic/Declared_Types.ipynb new file mode 100644 index 0000000..0393aa7 --- /dev/null +++ b/01.Basic/Declared_Types.ipynb @@ -0,0 +1,267 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "source": [ + "# Delcared Types" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "source": [ + "### `var`, `let` and `const` difference in JavaScript \n", + "\n", + "Learn From `ChatGPT`\n", + "\n", + "In JavaScript, var, let, and const are all used to declare variables, but they have some differences in terms of their behavior and scope." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "source": [ + "`var`: In JavaScript, var was the original way to declare a variable. It is function-scoped, which means that a variable declared with var exists throughout the whole function in which it is defined, including any nested functions. If a variable is declared with var outside a function, it becomes a global variable and is available throughout the whole program. One important thing to note is that var allows for variable hoisting, which means that the variable can be accessed before it is declared.\n", + "\n", + "Example:" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "function exampleFunction() {\n", + " var x = 1;\n", + " if (true) {\n", + " var x = 2; // This is the same variable as above - not a new one\n", + " console.log(x); // outputs 2\n", + " }\n", + " console.log(x); // outputs 2\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + } + }, + "source": [ + "`let`: let was introduced in ECMAScript 6 (ES6) as a new way to declare a variable. It is block-scoped, which means that a variable declared with let only exists within the block in which it is defined. Blocks include functions, loops, and statements that are surrounded by curly braces. Variables declared with let can be updated, but not redeclared.\n", + "\n", + "Example:" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "function exampleFunction() {\n", + " let x = 1;\n", + " if (true) {\n", + " let x = 2; // This is a new variable with the same name as above\n", + " console.log(x); // outputs 2\n", + " }\n", + " console.log(x); // outputs 1\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + } + }, + "source": [ + "`const`: const was also introduced in ES6 as a way to declare variables. It is also block-scoped and cannot be reassigned, but it does not mean that the value cannot be changed. If a variable is declared with const, it must be assigned a value at the time of declaration and cannot be reassigned later in the code.\n", + "\n", + "Example:" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "function exampleFunction() {\n", + " const x = 1;\n", + " if (true) {\n", + " const x = 2; // This is a new variable with the same name as above\n", + " console.log(x); // outputs 2\n", + " }\n", + " console.log(x); // outputs 1\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "polyglot_notebook": { + "kernelName": "javascript" + } + }, + "source": [ + "In `summary`, var is function-scoped, can be hoisted, and can be updated and redeclared. let and const are block-scoped, cannot be hoisted, and let can be updated but not redeclared, while const cannot be reassigned." + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": ".NET (C#)", + "language": "C#", + "name": ".net-csharp" + }, + "polyglot_notebook": { + "kernelInfo": { + "defaultKernelName": "csharp", + "items": [ + { + "aliases": [ + "c#", + "C#" + ], + "languageName": "C#", + "name": "csharp" + }, + { + "aliases": [ + "frontend" + ], + "languageName": null, + "name": "vscode" + }, + { + "aliases": [ + "js" + ], + "languageName": "JavaScript", + "name": "javascript" + }, + { + "aliases": [], + "languageName": "KQL", + "name": "kql" + }, + { + "aliases": [], + "name": ".NET" + }, + { + "aliases": [ + "f#", + "F#" + ], + "languageName": "F#", + "name": "fsharp" + }, + { + "aliases": [], + "languageName": "HTML", + "name": "html" + }, + { + "aliases": [], + "languageName": "Mermaid", + "name": "mermaid" + }, + { + "aliases": [ + "powershell" + ], + "languageName": "PowerShell", + "name": "pwsh" + }, + { + "aliases": [], + "languageName": "SQL", + "name": "sql" + }, + { + "aliases": [], + "name": "value" + }, + { + "aliases": [], + "name": "webview" + } + ] + } + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/Sample.js b/01.Basic/Sample.js similarity index 100% rename from Sample.js rename to 01.Basic/Sample.js diff --git a/DOM/Lesson_1.ipynb b/DOM/Lesson_1.ipynb new file mode 100644 index 0000000..7a47c84 --- /dev/null +++ b/DOM/Lesson_1.ipynb @@ -0,0 +1,193 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "source": [ + "# DOM related question and answers\n", + "\n", + "- Using this code we can turn on or off all the checkboxes on the Webpage" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "document.querySelectorAll(\"input[type=checkbox]\").forEach(element => element.checked = true);" + ] + }, + { + "cell_type": "markdown", + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "source": [ + "## Json Object to Urlencoded string\n", + "\n", + "Source: [Link](https://gist.github.com/lastguest/1fd181a9c9db0550a847)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "// 1st Conversion Method\n", + "function JSON_to_URLEncoded(element,key,list){\n", + " var list = list || [];\n", + " if(typeof(element)=='object'){\n", + " for (var idx in element)\n", + " JSON_to_URLEncoded(element[idx],key?key+'['+idx+']':idx,list);\n", + " } else {\n", + " list.push(key+'='+encodeURIComponent(element));\n", + " }\n", + " return list.join('&');\n", + "}\n", + "\n", + "var data = {\n", + " 'users' : [\n", + " {\n", + " \"id\": 100,\n", + " \"name\": \"Stefano\"\n", + " },\n", + " {\n", + " \"id\": 200,\n", + " \"name\": \"Lucia\"\n", + " },\n", + " {\n", + " \"id\": 300,\n", + " \"name\": \"Franco\"\n", + " },\n", + " ],\n", + " 'time' : +new Date\n", + "};\n", + "\n", + "console.log(\n", + " JSON_to_URLEncoded(data)\n", + ");" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "javascript" + }, + "vscode": { + "languageId": "polyglot-notebook" + } + }, + "outputs": [], + "source": [ + "// 2nd Conversion Method\n", + "const toUrlEncoded = obj => Object.keys(obj).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&');\n", + "\n", + "toUrlEncoded({hello: 'world', message: \"JavaScript is cool\"});" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": ".NET (C#)", + "language": "C#", + "name": ".net-csharp" + }, + "polyglot_notebook": { + "kernelInfo": { + "defaultKernelName": "csharp", + "items": [ + { + "aliases": [ + "c#", + "C#" + ], + "languageName": "C#", + "name": "csharp" + }, + { + "aliases": [], + "name": ".NET" + }, + { + "aliases": [ + "f#", + "F#" + ], + "languageName": "F#", + "name": "fsharp" + }, + { + "aliases": [], + "languageName": "HTML", + "name": "html" + }, + { + "aliases": [], + "languageName": "KQL", + "name": "kql" + }, + { + "aliases": [], + "languageName": "Mermaid", + "name": "mermaid" + }, + { + "aliases": [ + "powershell" + ], + "languageName": "PowerShell", + "name": "pwsh" + }, + { + "aliases": [], + "languageName": "SQL", + "name": "sql" + }, + { + "aliases": [], + "name": "value" + }, + { + "aliases": [ + "js" + ], + "languageName": "JavaScript", + "name": "javascript" + } + ] + } + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/JavaScript.code-workspace b/JavaScript.code-workspace index e934f8c..5ff120d 100644 --- a/JavaScript.code-workspace +++ b/JavaScript.code-workspace @@ -5,6 +5,12 @@ } ], "settings": { + "files.exclude": { + "**/*.ini": true, + "**/.git": true, + "**/*.o": true, + "**/*.exe": true, + }, "files.defaultLanguage": "${activeEditorLanguage}" } } \ No newline at end of file diff --git a/Readme.md b/Readme.md index 7e1fcb4..41a6035 100644 --- a/Readme.md +++ b/Readme.md @@ -3,8 +3,7 @@ Here almost every `JavaScript` 🐱‍🏍 files are my Practice files. I learn all these from different Website, Apps, Online Courses and from my Teacher. - - [![Open in VS Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://github.com/Koushikon/JS.Programs) + ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=flat&logo=visual-studio-code&logoColor=white)  [![Lines Of Code](https://tokei.rs/b1/github.com/Koushikon/JS.Programs?category=code)](https://github.com/Koushikon/JS.Programs) ```Plain