{"id":19261934,"url":"https://github.com/hacksu/webdev_2_javascript","last_synced_at":"2026-02-09T21:09:52.612Z","repository":{"id":149141658,"uuid":"103201122","full_name":"hacksu/Webdev_2_Javascript","owner":"hacksu","description":"Webdev II: ATTACK OF THE JAVASCRIPT","archived":false,"fork":false,"pushed_at":"2017-09-13T05:18:35.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-23T19:47:30.295Z","etag":null,"topics":["beginner","lesson"],"latest_commit_sha":null,"homepage":null,"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/hacksu.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":"2017-09-12T00:14:55.000Z","updated_at":"2020-02-23T21:48:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"e3e2bc68-5e93-4dce-9790-c2dc292991cb","html_url":"https://github.com/hacksu/Webdev_2_Javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hacksu/Webdev_2_Javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FWebdev_2_Javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FWebdev_2_Javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FWebdev_2_Javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FWebdev_2_Javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/Webdev_2_Javascript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FWebdev_2_Javascript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29281455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T19:05:41.198Z","status":"ssl_error","status_checked_at":"2026-02-09T19:05:37.449Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["beginner","lesson"],"created_at":"2024-11-09T19:29:03.455Z","updated_at":"2026-02-09T21:09:52.580Z","avatar_url":"https://github.com/hacksu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webdev 2 Javascript\n### Webdev II: ATTACK OF THE JAVASCRIPT\n\n## Intro/Goals\n\nToday we're going to be learning how to integrate javascript in a basic webpage!! Nice! **Make sure you bring a laptop!**\n\nBasically, javascript is going to let our web page actually *do* things, as opposed to just look pretty. Note: Javascript is totally different and unrelated to Java. idk why they named them that way, it's dumb.\n\n### What we need\n\nWe're going to be working with HTML and CSS, and saving our projects on Github. You can see my tutorial on setting up Github and a basic HTML/CSS webpage [here](https://github.com/hacksu/Github-and-Webdev-Basics). \n\nAlternately, you can just use the HTML and CSS file in this repo.\n\n## Setting up our JS file\n\nIf you haven't already, figure out what github repo you want to work in. You can set up a new one via github and clone it to your desktop, or you can work in the one we set up last time. Remember, the commands to navigate to a folder in your terminal or in Powershell are `ls` to list the contents of your current folder and `cd myFolder` to go inside another folder.\n\nInside the folder you want to work in, create a new file, and call it something like `script.js`. In that script, type:\n\n`alert('hello world!');`\n\nNow save the script, and go into your HTML file. In the `\u003chead\u003e` tags, add: `\u003cscript src=\"script.js\"\u003e\u003c/script\u003e`. Save and open your html - if it linked the two scripts together, it should give you a popup saying 'hello world!'! nice!\n\n## The different parts of JS\n\nLet's set up a basic JS function! Erase the `alert` from earlier and let's set up a function:\n\n\n```\n// this is a JS comment\n\nvar myVar = 0; // This is a variable \n// C++ users, notice how we don't have to declare the var type \n\nfunction myFunction() {\n  myVar = myVar + 1; // equivalent to myVar++, if you want to be fancy!\n  alert(\"Your variable is equal to: \" + myVar);\n}\n```\n\nNow, in your HTML in the `\u003cbody\u003e`, add this:\n\n```\n\u003cbutton onclick=\"myFunction()\"\u003e Click to call the function! \u003c/button\u003e\n```\n\nSee if it works! If it does, play around with the javascript and see what fun math you can do. +-/\\* are all math operators.\n\nLet's try a few more things. \n\nHere's the setup to a function using arguments. This should take an 'argument' and add it to a div.\n\nWe're using a global variable 'myVar' to store a bunch of words. Then, we're getting a feild in our HTML with the ID of `output`, and displaying the text there.\n\n```\nvar myVar = 0; \n\nfunction myFunction(thing) {\n\n  myVar = myVar + thing;\n  \n  document.getElementById('output').innerHTML = myVar;\n}\n\n```\n\nHere's what we'll need to add to our HTML:\n\n```\n\u003cbutton onclick=\"myFunction('boots and ')\"\u003eAdd the text \"boots and \"\u003c/button\u003e\n\u003cbutton onclick=\"myFunction('cats and ')\u003eAdd the text \"cats and \"\u003c/button\u003e\n\n\u003cdiv id=\"output\"\u003e\u003c/div\u003e\n\n```\n\nHere's the setup for our second function! This one looks in our HTML for a user input value, and then logs something in the console\n\n\nfunction myLoop() {\n  var loopAmt = document.getElementById('loopAmt').value;\n  \n  while (loopAmt \u003e 0) {\n    console.log(\"Loop amount = \" + loopAmt);\n  }\n}\n\n\nHere's what we should add to our HTML:\n\n```\n\n\u003cinput type=\"number\" id=\"loopAmt\"\u003e \n\u003cbutton onclick=\"myLoop()\"\u003eLoop through the loop amount!\u003c/button\u003e\n```\n\n\n## Additional resources\n\nIf you want javascript to be useful, you're going to need a few libraries. Start by learning [Jquery](https://www.w3schools.com/JQuery/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fwebdev_2_javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Fwebdev_2_javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fwebdev_2_javascript/lists"}