{"id":16322703,"url":"https://github.com/goldhand/code-newbies-js-intro","last_synced_at":"2025-09-04T05:11:39.617Z","repository":{"id":37617200,"uuid":"74312429","full_name":"goldhand/code-newbies-js-intro","owner":"goldhand","description":"This is a fast introduction to javascript.","archived":false,"fork":false,"pushed_at":"2016-11-22T21:26:20.000Z","size":7,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"start","last_synced_at":"2025-04-07T10:11:13.330Z","etag":null,"topics":["learning-js","nodejs","websockets"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/goldhand.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}},"created_at":"2016-11-21T00:40:01.000Z","updated_at":"2024-08-04T09:35:18.000Z","dependencies_parsed_at":"2022-08-19T03:50:30.639Z","dependency_job_id":null,"html_url":"https://github.com/goldhand/code-newbies-js-intro","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/goldhand/code-newbies-js-intro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldhand%2Fcode-newbies-js-intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldhand%2Fcode-newbies-js-intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldhand%2Fcode-newbies-js-intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldhand%2Fcode-newbies-js-intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldhand","download_url":"https://codeload.github.com/goldhand/code-newbies-js-intro/tar.gz/refs/heads/start","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldhand%2Fcode-newbies-js-intro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273555459,"owners_count":25126316,"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-09-04T02:00:08.968Z","response_time":61,"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":["learning-js","nodejs","websockets"],"created_at":"2024-10-10T22:52:03.812Z","updated_at":"2025-09-04T05:11:39.544Z","avatar_url":"https://github.com/goldhand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Code-newbies Intro to Javascript\n================================\n\nThis is a fast introduction to javascript.\n\n\nJavascript Crash Course\n-----------------------\nLet's run over a bunch of javascript stuff so you research the material later on your own.\n\n### Comments ###\n\n* Lines starting with `//` will be ignored by the javascript runtime.\n* Same for blocks surrounded with `/*` and `*/`.\n\n### Primitive Datatypes ###\n\n* undefined\n* null\n* boolean\n* string\n* number\n\n### Objects ###\nObjects in javascript can be thought of as a set of properties. Each property has a key and a value. The key of a property can be used to get or set values.\n\n```javascript\n{\n  key: 'value',\n  color: 'blue',\n}\n```\n\n### Statements ###\nIn HTML, JavaScript statements are \"instructions\" to be \"executed\" by the web browser.\n\n* `var` - Declares a variable, optionally initializing it to a value.\n* `if` - Executes a statement if a statement is true.\n* `for` - Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.\n\nSee a list of all javascript [statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)\n\n\n### Operators ###\nJust go over the operators that are used when building the `chatApp`.\n\n* `=` - Assignment operator. Will set a variable to a value. The left value the target of the assignment.\n* `===` - Comparison operator. Checks type and value are equal.\n* `!==` - Comparison operator. Checks type and value are *not* equal.\n* `+` - Arithmetic operator. Returns the sum of the left and right values.\n\nOperator example:\n```javascript\n// Assignment\nvar myVariable = 1;\n\n// Comparison\n1 !== 2\n\n// Arithmetic\n1 + 1\n```\n\nOperators can be used together:\n```javascript\n// Assignment and arithmetic\nvar two = 1 + 1;\n\n// Assignment and comparison\nvar isFalse = 1 === two;\n```\n\nFor a full list, see this [list of javascript operators](http://www.w3schools.com/jsref/jsref_operators.asp).\n\n### Functions ###\nFunctions, the last javascript datatype, are not primitives. They take **arguments** and can **return** values.\n\nThe `function` declaration **declares** (defines) a function with specified parameters.\n```javascript\nfunction add(argument1, argument2) {\n  return argument1 + argument2;\n}\n```\n\nTo use a function, you need to **invoke** it.\n```javascript\nvar two = add(1, 1);\n```\n\nNotice that when used with the *assignment* operator, `=`, that value that is **returned** by the function will be assigned to the variable on the left.\n\n\nWorkshop: Chat Application\n--------------------------\nTo put these concepts to use we are going to build a simple chat room application.\nThis will demonstrate two different javascript runtimes, the client browser and the server NodeJS runtime.\nYou can also use the end result as a starting point for other explorative javascript projects.\nThis repository is used to show solutions for each step of the lesson.\nTo check your code against the working solution, you can click the title of the step below or select the tag for the corresponding step.\n\n### [Step 1: Hello Worlding][step-1] ###\nCreate an `index.html`, `index.js` and `style.css` files then add a minimal amount of code to make sure they are all working.\n\n### [Step 2: HTML / CSS][step-2] ###\nCopy some styles and html into the app or write your own.\n\n### [Step 3: Client Javascript][step-3] ###\nWrite some code that appends the text input value to a the messages list then resets the message input.\n\n### [Step 4: Server Javascript][step-4] ###\nSetup a simple node server that serves our `index.html`, `index.js` and `style.css` files.\n\n### [Step 5: Socket.IO][step-5] ###\nAdd socket.io to the project and dispatch messages to our server (instead of just appending them to our display).\n\n### [Step 6: Communicate][step-6] ###\nUse socket.io from the server to listen for chat messages then dispatch those messages to all connected clients. In the client, listen for chat events and display the message value in the messages list.\n\n\n[step-1]: https://github.com/goldhand/code-newbies-js-intro/tree/step-1\n[step-2]: https://github.com/goldhand/code-newbies-js-intro/tree/step-2\n[step-3]: https://github.com/goldhand/code-newbies-js-intro/tree/step-3\n[step-4]: https://github.com/goldhand/code-newbies-js-intro/tree/step-4\n[step-5]: https://github.com/goldhand/code-newbies-js-intro/tree/step-5\n[step-6]: https://github.com/goldhand/code-newbies-js-intro/tree/step-6\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldhand%2Fcode-newbies-js-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldhand%2Fcode-newbies-js-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldhand%2Fcode-newbies-js-intro/lists"}