{"id":28136738,"url":"https://github.com/nadakhader04/javascript-basics","last_synced_at":"2025-10-15T19:15:44.735Z","repository":{"id":293214603,"uuid":"983095039","full_name":"nadakhader04/JavaScript-Basics","owner":"nadakhader04","description":"A simple JavaScript summary with step-by-step explanations and code examples.","archived":false,"fork":false,"pushed_at":"2025-06-01T06:30:38.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T13:45:22.198Z","etag":null,"topics":["console","data-types","document","functions","if-else","javascript","loops","ternary-operator","unary","variables"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nadakhader04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T21:44:59.000Z","updated_at":"2025-06-01T06:30:41.000Z","dependencies_parsed_at":"2025-05-14T08:46:18.055Z","dependency_job_id":"eb94822b-b46f-438c-8809-197641a39ed0","html_url":"https://github.com/nadakhader04/JavaScript-Basics","commit_stats":null,"previous_names":["nadakhader04/javascript-basics"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nadakhader04/JavaScript-Basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadakhader04%2FJavaScript-Basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadakhader04%2FJavaScript-Basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadakhader04%2FJavaScript-Basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadakhader04%2FJavaScript-Basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nadakhader04","download_url":"https://codeload.github.com/nadakhader04/JavaScript-Basics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadakhader04%2FJavaScript-Basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279104936,"owners_count":26104637,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["console","data-types","document","functions","if-else","javascript","loops","ternary-operator","unary","variables"],"created_at":"2025-05-14T16:20:01.712Z","updated_at":"2025-10-15T19:15:44.729Z","avatar_url":"https://github.com/nadakhader04.png","language":null,"readme":"\n## table of contents\n| No                  | Link                            |\n|--------------------------|---------------------------------|\n| 1.             | [Window](#Window) |\n| 2.     | [Document](#document) |\n| 3.         | [Console](#console) |\n| 4.         | [Data Type of JavaScript](#data-type-of-javascript) |\n| 5.         | [JavaScript Variables](#javascript-variables) |\n| 6. | [Unary Plus and Minus Operator](#unary-plus-and-minus-operator) |\n| 7. | [JavaScript if, else, and else if](#javascript-if-else-and-else-if) |\n| 8. | [Ternary Operator](#ternary-operator) |\n| 9. | [JavaScript Arrays](#javaScript-arrays) |\n| 10. | [JavaScript Loops](#javaScript-loops) |\n| 11. | [JavaScript Functions](#javaScript-functions) |\n\n\n\n\n## 📘 JavaScript Basics  \n### **`window`  `document` `console`**\n\n## Window\n\nThe window object represents the browser window or tab. You can also access global functions or variables without explicitly typing window.\n\n```javascript\nwindow.username = 'nada';\nwindow.alert(username);\n```\nWhen you have an HTML element with id=\"header\", the browser automatically creates a global variable with the same name as the ID and assigns it to that element — but only if there isn't already a JavaScript variable with that same name.\n\n\n```HTML\n\u003ch1 id=\"header\"\u003eTitle\u003c/h1\u003e\n\u003cscript\u003e\n  console.log(header); // \u003ch1 id=\"header\"\u003eTitle\u003c/h1\u003e\n\u003c/script\u003e\n```\n## Document\nIt gives you access to the HTML content of the page and allows you to select, modify, create, or remove elements from the DOM (Document Object Model).\n\n\n```html\n\u003cbody\u003e\n    \u003ch1 id=\"header\"\u003e\u003c/h1\u003e\n    \u003ch2\u003e frontend \u003c/h2\u003e\n    \u003ch2\u003e backend \u003c/h2\u003e\n    \u003cscript src=\"src/script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n`getElementById`\n\n```javascript\nconsole.log(document.getElementById(\"header\")); //Output: \u003ch1 id=\"header\"\u003e\u003c/h1\u003e -\u003e \u003ch2\u003e frontend \u003c/h2\u003e\nconsole.log(header) // Output: \u003ch1 id=\"header\"\u003e\u003c/h1\u003e\ndocument.getElementById(\"header\").textContent = \"Updated header\";\n\n```\n`querySelctor`\n```javascript\ndocument.querySelector('h2'); // This selects the first \u003ch2\u003e element on the page.\ndocument.querySelector('#header');  //This selects the element with id=\"header\".\n```\n\n`classlist`\n\n```javascript\ndocument.querySelector('h2').classList.add('newClass'); // Adds the class newClass to the first \u003ch2\u003e element.\ndocument.querySelector('h2').classList.remove('newClass'); // Delete the class\n```\n\n\n\n\n## Console\nThe console object is used mainly for debugging. It allows to print values, test logic, and track issues while the page runs.\n\n####   You can view the console by right-clicking the page → Inspect → Console tab.\n\n### Console Styling with %c \n\n```javascript\nconsole.log(\"%cHi %cGithub\", \"color: red\", \"color: blue\");\n```\n\n#### %c is a special placeholder in console.log() that tells the browser: The next string argument is a CSS style to apply to the text following me.\n\n\n\n\"color: red\" is applied to \"Hi\"\n\n\"color: blue\" is applied to \"Github\n\n\n```javascript\nconsole.error(\"this is error\"); //output: ❌ this is error\n```\n\n```javascript\nconsole.warn(\"this is warn\") //Ouuput: ⚠️ this is warn\n```\n\n## Data Type of JavaScript \n\n- String\n\n\n```javascript\nlet color = \"Yellow\";\nlet country = 'Tulkarm';\n```\n\n- Number\n```javascript\nlet length = 16;\nlet weight = 7.5;\n```\n\n- Boolean\n```javascript\nlet x = true;\nlet y = false;\n```\n\n- Object\nThe object data type can contain both **built-in objects**, and **user-defined objects**:\n\nBuilt-in object types can be:\n\n**objects, arrays, dates, maps, sets, intarrays, floatarrays, promises**, and more.\n```javascript\nconst person = {firstName:\"Nada\", lastName:\"Khader\"};\n```\n\n- Array -\u003e Object\n```javascript\nconst cars = [\"Saab\", \"Volvo\", \"BMW\"];\nlet nums = [1, 45, 7];\n```\n\n- null\n```javascript\nconsole.log(typeof null); //object\n```\n\n- Undefined\n\n```javascript\nconsole.log(typeof undefined); //undefined\n```\n### ⚠️ Important Notes:\nnull is not the same as undefined.\n\n\"undefined\" means: \"the variable was declared but never assigned.\n\n\"null\" means: \"the variable was deliberately set to have no value\n```javascript\nlet x;\nconsole.log(x); // undefined\n\nlet y = null;\nconsole.log(y); // null\n\n```\n\n## JavaScript Variables\n\n**JavaScript is a loosely typed**\nYou don’t need to declare the data type of a variable and  can hold any type of data, and that type can change at runtime.\n\n```\nlet name = 'nada'; // loosely type\nstring name = \"nada\"; // Strongly type like C++\n```\n\nJavaScript Variables can be declared in 4 ways:\n\n- **Automatically**\n```javascript\nx = 5;\ny = 6;\nz = x + y;\n```\n- `var`\n```javascript\nvar x = 5;\nvar y = 6;\nvar z = x + y;\n```\n\n- `let`\n```javascript\nlet x = 5;\nlet y = 6;\nlet z = x + y;\n```\n- `const`\n```javascript\nconst x = 5;\nconst y = 6;\nconst z = x + y;\n```\n\n## Differences\n\n\n| `Example`               | `var`                              | `let`                                | `const`                             |\n|-------------------------|-------------------------------------|--------------------------------------|-------------------------------------|\n| **Redeclare**           | ✅ `var x = 2; var x = 3;`           | ❌ `let y = 2; let y = 6;` → *Error*  | ❌ `const z = 2; const z = 6;` → *Error* |\n| **Access Before Declare** | 🟡 `console.log(a); var a = 9;` → *undefined* | ❌ `console.log(a); let a = 9;` → *Error* | ❌ `console.log(a); const a = 9;` → *Error* |\n| **Added to window object** | ✅ Yes                           | ❌ No                                 | ❌ No                                 |\n| **Block Scope**         | ❌ No (function scoped)              | ✅ Yes                                | ✅ Yes                                |\n\n\n\n\n## Unary Plus and Minus Operator\n- **Plus**\nThe unary plus (+) converts an operand into a number, \n\n```javascript\nconsole.log(+4); //4\nconsole.log(+\"4\"); //4\nconsole.log(+\"-4\"); //-4\nconsole.log(+\"nada\"); //NaN\nconsole.log(+\"0xff\"); //255\nconsole.log(+null); //0\nconsole.log(+false); //0\nconsole.log(+true); //1\n```\n- **Minus**\nThe Unary Negation (-) operator is used to convert its operand to a negative number\n\n\n```javascript\nconsole.log(-4); //-4\nconsole.log(-\"4\"); //-4\nconsole.log(-\"-4\"); //-4\nconsole.log(-\"nada\"); //NaN\nconsole.log(-\"0xff\"); //-255\nconsole.log(-null); //-0\nconsole.log(-false); //-0\nconsole.log(-true); //-1\n```\n\n\n## JavaScript if, else, and else if\n\n#### Syntax\n```syntax\nif (condition1) {\n  //  block of code to be executed if condition1 is true\n} else if (condition2) {\n  //  block of code to be executed if the condition1 is false and condition2 is true\n} else {\n  //  block of code to be executed if the condition1 is false and condition2 is false\n}\n```\n\n**💡Example**\n\nIf time is less than 10:00, create a \"Good morning\" greeting, if not, but time is less than 20:00, create a \"Good day\" greeting, otherwise a \"Good evening\":\n```javascript\nif (time \u003c 10) \n  greeting = \"Good morning\";\n\nelse if (time \u003c 20) \n  greeting = \"Good day\";\n\nelse \n  greeting = \"Good evening\";\n\n```\nThe result of greeting will be:\n```run\nGood morning\n```\n\n## Ternary Operator\n#### Syntax\n\n```syntax\nvariable = Expression1 ? ExpressionTrue : ExpressionFalse;\n```\n**💡Example**\n\nUse ternary operator to find the maximum\n```javascript\n    let a = 5;\n    let b = 9;\n    console.log((a \u003e b) ? a : b); // Output: max: 9\n```\n\n\n\n## JavaScript Arrays\n#### Syntax:\n```syntax:\nconst array_name = [item1, item2, ...]; \n```\n#### 💡Example\n```javascript\nconst nums = [\"ahmad\", \"ali\", \"sami\", [\"hiba\", \"sara\"]];\nconsole.log(nums[3][0]);    // hiba\nconsole.log(nums[3][1][2]); // r\nconsole.log(nums[1]);       // ali\n```\n\n**Array Properties and Methods**\n```javascript\ncars.length   // Returns the number of elements\ncars.sort()   // Sorts the array\n```\n**update the element in the array**\n```javascript\nnums[0] = \"hala\";\nnums[3] = \"nada\";\nconsole.log(nums);  //Output :  ['hala', 'ali', 'sami', 'nada']\n```\n\n\n## push() and unshift() in JavaScript Arrays:\n\n🔸 **`push(element)`**\n\nAdds an element to the end of the array.\n```javascript\nlet arr = [1, 2, 3];\narr.push(4);\nconsole.log(arr); // [1, 2, 3, 4]\n```\n\n🔹 **`unshift(element)`**\n\nAdds an element to the beginning of the array.\n\n```javascript\nlet arr = [1, 2, 3];\narr.unshift(0);\nconsole.log(arr); // [0, 1, 2, 3]\n```\n\n## pop() and shift() in JavaScript Arrays\n\n\n🔸 `pop()`\n\nRemoves the last element from the array and returns the removed value:.\n\n```javascript\nlet arr = [1, 2, 3];\nlet removed = arr.pop();\nconsole.log(removed); // 3\n```\n\n\n🔹 `shift()`\n\nRemoves the first element from the array and returns the removed value:\n\n```javascript\nlet arr = [7, 5, 23];\nlet removed = arr.shift();\nconsole.log(removed); // 7\n```\n\n\n\n## JavaScript Loops\n\n```javascript\nfor (let i = 0; i \u003c 5; i++) {\n  text += \"The number is \" + i + \"\u003cbr\u003e\";\n}\n```\n#### 📚 Resource: \n[JavaScript For Loop - W3Schools](https://www.w3schools.com/js/js_loop_for.asp)\n\n[JavaScript For In - W3Schools](https://www.w3schools.com/js/js_loop_forin.asp)\n\n[JavaScript For Of - W3Schools](https://www.w3schools.com/js/js_loop_forof.asp)\n\n\n\n## JavaScript Functions\n\n#### - Normal Function (Function Declaration)\n\n\nSyntax\n```syntax\n// Define the function with parameters\n\n    function name(parameter1, parameter2) {\n    // code to be executed\n    }\n\n\n// Call the function with arguments\n    name();\n```\n- you can call it before it's defined\n```javascript\nfunction calc(...nums){\n    console.log(Array.isArray(nums)); // true \n\n    int res = 0;\n    for(let i=0; i \u003c nums.length; i++){\n        res += nums[i];\n    }\n\n    return `Final Result Is ${res}`; \n}\n\nconsole.log(calc(10,40,20,50,60));  \n\n```\n\n#### - Anonymous Function\n\nAn anonymous function is simply a function that does not have a name.\n\n#### Syntax\n\n```syntax\nfunction() {\n    // Function Body\n }\n```\n\nYou can also use **arrow version** :\n\n```syntax\n( () =\u003e {\n    // Function Body...\n} )();\n```\n#### Example\n```javascript\nconst greet = () =\u003e {\n\tconsole.log(\"Welcome to JavaScript Basics !\");\n}\n    \ngreet();\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadakhader04%2Fjavascript-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnadakhader04%2Fjavascript-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadakhader04%2Fjavascript-basics/lists"}