{"id":25470364,"url":"https://github.com/thinkphp/computer-science-in-javascript","last_synced_at":"2025-11-04T18:30:35.041Z","repository":{"id":19753890,"uuid":"23011055","full_name":"thinkphp/computer-science-in-javascript","owner":"thinkphp","description":"Computer Science in JavaScript language.","archived":false,"fork":false,"pushed_at":"2024-04-12T03:05:40.000Z","size":112,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T08:07:30.182Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/thinkphp.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}},"created_at":"2014-08-16T05:03:03.000Z","updated_at":"2024-06-06T11:01:20.721Z","dependencies_parsed_at":"2024-03-27T17:43:37.856Z","dependency_job_id":"a06f8cfc-4548-4f30-aa6c-e200dedcc2f5","html_url":"https://github.com/thinkphp/computer-science-in-javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkphp%2Fcomputer-science-in-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkphp%2Fcomputer-science-in-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkphp%2Fcomputer-science-in-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkphp%2Fcomputer-science-in-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thinkphp","download_url":"https://codeload.github.com/thinkphp/computer-science-in-javascript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239437545,"owners_count":19638515,"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","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":[],"created_at":"2025-02-18T08:33:05.436Z","updated_at":"2025-11-04T18:30:35.002Z","avatar_url":"https://github.com/thinkphp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Computer Science in JavaScript\n\n### Course Overview\nThis course introduces students to the fundamentals of JavaScript programming, covering core concepts and practical applications. By the end of this course, students will have a solid foundation in JavaScript and web development principles.\n\n### Week 1: Introduction to JavaScript and Development Environment\n- What is JavaScript?\n- Setting up the development environment\n- Introduction to web browsers and developer tools\n- Writing and running your first JavaScript program\n\n### Week 2: JavaScript Basics\n- Variables and data types\n- Operators\n- Control flow statements (if, else, switch)\n- Loops (for, while, do-while)\n\n### Week 3: Functions and Scope\n- Function declaration and expression\n- Arrow functions\n- Function parameters and return values\n- Scope and closures\n\n### Week 4: Arrays and Objects\n- Working with arrays\n- Array methods (map, filter, reduce)\n- Object literals\n- Object methods and 'this' keyword\n\n### Week 5: DOM Manipulation\n- Understanding the Document Object Model (DOM)\n- Selecting and modifying DOM elements\n- Creating and removing elements\n- Event handling\n\n### Week 6: Asynchronous JavaScript\n- Callbacks\n- Promises\n- Async/Await\n- Fetch API and AJAX\n\n### Week 7: Error Handling and Debugging\n- Try-catch blocks\n- Throwing and handling exceptions\n- Debugging techniques\n- Browser developer tools for debugging\n\n### Week 8: ES6+ Features\n- Let and const\n- Template literals\n- Destructuring\n- Spread and rest operators\n- Modules\n\n### Week 9: Object-Oriented JavaScript\n- Prototypes and inheritance\n- ES6 Classes\n- Getters and setters\n- Static methods\n\n### Week 10: Modern JavaScript Development\n- npm and package management\n- Bundlers (Webpack, Rollup)\n- Transpilers (Babel)\n- Introduction to frameworks (React, Vue, or Angular)\n\n### Final Project\nStudents will develop a comprehensive web application using JavaScript that demonstrates their understanding of the concepts covered in the course. The project will involve creating a practical, interactive web application that incorporates multiple aspects of JavaScript programming.\n\n### Assessment\n- Weekly programming assignments (40%)\n- Midterm exam (20%)\n- Final project (30%)\n- Class participation and quizzes (10%)\n\n# _____________\n\n## Week 1: JavaScript Basics\n\n### 1.1 Introduction to JavaScript\n- What is JavaScript?\n- History and evolution\n- Role in web development\n\n### 1.2 Setting Up the Development Environment\n- Choosing a text editor (e.g., Visual Studio Code)\n- Using browser developer tools\n\n### 1.3 Variables and Data Types\n- Declaring variables (var, let, const)\n- Basic data types: number, string, boolean, null, undefined\n- Type coercion and conversion\n\nExample:\n```javascript\nlet name = \"Alice\";\nconst age = 25;\nlet isStudent = true;\nconsole.log(`${name} is ${age} years old. Student status: ${isStudent}`);\n```\n\n### 1.4 Basic Operators\n- Arithmetic operators\n- Comparison operators\n- Logical operators\n\nExample:\n```javascript\nlet x = 5;\nlet y = 3;\nconsole.log(x + y);  // Addition: 8\nconsole.log(x \u003e y);  // Comparison: true\nconsole.log(x \u003e 0 \u0026\u0026 y \u003c 10);  // Logical AND: true\n```\n\n## Week 2: Control Flow and Functions\n\n### 2.1 Conditional Statements\n- if...else statements\n- switch statements\n\nExample:\n```javascript\nlet score = 85;\n\nif (score \u003e= 90) {\n    console.log(\"A\");\n} else if (score \u003e= 80) {\n    console.log(\"B\");\n} else {\n    console.log(\"C\");\n}\n```\n\n### 2.2 Loops\n- for loops\n- while loops\n- do...while loops\n\nExample:\n```javascript\nfor (let i = 0; i \u003c 5; i++) {\n    console.log(`Iteration ${i + 1}`);\n}\n```\n\n### 2.3 Functions\n- Function declaration and expression\n- Parameters and return values\n- Arrow functions\n\nExample:\n```javascript\nfunction greet(name) {\n    return `Hello, ${name}!`;\n}\n\nconst square = (x) =\u003e x * x;\n\nconsole.log(greet(\"Bob\"));  // Output: Hello, Bob!\nconsole.log(square(4));     // Output: 16\n```\n\n## Week 3: Data Structures\n\n### 3.1 Arrays\n- Creating and accessing arrays\n- Array methods (push, pop, shift, unshift, splice)\n- Iterating through arrays\n\nExample:\n```javascript\nlet fruits = [\"apple\", \"banana\", \"orange\"];\nfruits.push(\"grape\");\nconsole.log(fruits.length);  // Output: 4\n\nfruits.forEach(fruit =\u003e console.log(fruit));\n```\n\n### 3.2 Objects\n- Creating objects\n- Accessing and modifying properties\n- Object methods\n\nExample:\n```javascript\nlet person = {\n    name: \"Charlie\",\n    age: 30,\n    greet: function() {\n        console.log(`Hello, my name is ${this.name}`);\n    }\n};\n\nperson.greet();  // Output: Hello, my name is Charlie\n```\n\n## Week 4: Advanced Concepts\n\n### 4.1 Scope and Closures\n- Global and local scope\n- Lexical scope\n- Closures and their applications\n\nExample:\n```javascript\nfunction outerFunction(x) {\n    return function(y) {\n        return x + y;\n    };\n}\n\nconst addFive = outerFunction(5);\nconsole.log(addFive(3));  // Output: 8\n```\n\n### 4.2 This Keyword and Binding\n- Understanding 'this'\n- Function binding\n- Arrow functions and 'this'\n\n### 4.3 Prototypes and Inheritance\n- Prototype chain\n- Inheritance in JavaScript\n- ES6 classes\n\nExample:\n```javascript\nclass Animal {\n    constructor(name) {\n        this.name = name;\n    }\n\n    speak() {\n        console.log(`${this.name} makes a sound.`);\n    }\n}\n\nclass Dog extends Animal {\n    speak() {\n        console.log(`${this.name} barks.`);\n    }\n}\n\nconst dog = new Dog(\"Buddy\");\ndog.speak();  // Output: Buddy barks.\n```\n\n## Week 5: Asynchronous JavaScript\n\n### 5.1 Callbacks\n- Understanding asynchronous programming\n- Callback functions\n- Callback hell and its solutions\n\n### 5.2 Promises\n- Creating and consuming promises\n- Chaining promises\n- Error handling with promises\n\nExample:\n```javascript\nfunction fetchData() {\n    return new Promise((resolve, reject) =\u003e {\n        setTimeout(() =\u003e {\n            resolve(\"Data fetched successfully\");\n        }, 2000);\n    });\n}\n\nfetchData()\n    .then(data =\u003e console.log(data))\n    .catch(error =\u003e console.error(error));\n```\n\n### 5.3 Async/Await\n- Using async/await syntax\n- Error handling with try/catch\n- Comparing async/await with promises\n\nExample:\n```javascript\nasync function getData() {\n    try {\n        const result = await fetchData();\n        console.log(result);\n    } catch (error) {\n        console.error(error);\n    }\n}\n\ngetData();\n```\n\n## Week 6: DOM Manipulation and Events\n\n### 6.1 Document Object Model (DOM)\n- Understanding the DOM tree\n- Selecting and modifying DOM elements\n- Creating and removing elements\n\n### 6.2 Events\n- Event listeners\n- Event propagation\n- Common DOM events (click, submit, load)\n\nExample:\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n    const button = document.getElementById(\"myButton\");\n    button.addEventListener(\"click\", () =\u003e {\n        console.log(\"Button clicked!\");\n    });\n});\n```\n\n## Week 7: Modern JavaScript Development\n\n### 7.1 ES6+ Features\n- Template literals\n- Destructuring\n- Spread and rest operators\n- Modules (import/export)\n\n### 7.2 Tools and Best Practices\n- Package managers (npm, yarn)\n- Bundlers (webpack, Rollup)\n- Linters and formatters (ESLint, Prettier)\n- Version control with Git\n\n### 7.3 Introduction to Frontend Frameworks\n- Overview of popular frameworks (React, Vue, Angular)\n- Comparing vanilla JavaScript with framework-based development\n\n## Week 8: Final Project\n\nStudents will work on a final project that incorporates the concepts learned throughout the course. This could be a small web application or an interactive website that demonstrates their understanding of JavaScript fundamentals and modern development practices.\n\n# ______________________________\n\n### References\n- https://web.stanford.edu/class/cs98si/slides/overview.html\n- https://learnxinyminutes.com/docs/javascript/\n- https://cs.lmu.edu/~ray/notes/javascript/\n- https://rtoal.github.io/ple/\n- https://www.learneroo.com/modules/64/nodes/350\n- https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf\n- https://www.w3schools.com/js/default.asp\n\nWhat is Document Object Model(DOM) \n* https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/\n\nhttps://eloquentjavascript.net/\n\nhttps://domscripting.com/book/\n\nJavaScript basics:\n\n* https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics\n\nIntroducing JavaScript objects:\n\n* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects\n\nMinimal Projects\n\n* https://learnprogramming.online/\n\nTypeScript - a superset of JS\n* https://www.typescripttutorial.net/\n\n ### Interview Questions\n - https://github.com/codepo8/javascript-questions\n - https://github.com/yangshun/top-javascript-interview-questions\n\n-  https://www.geeksforgeeks.org/javascript-interview-questions-and-answers/?ref=shm\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkphp%2Fcomputer-science-in-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthinkphp%2Fcomputer-science-in-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkphp%2Fcomputer-science-in-javascript/lists"}