​​​📝​ Penn Week 9b – Intro to JavaScript

​​Intro to JavaScript

​​JavaScript (JS) is a programming language that runs inside the internet browser. It was created in 1995. (HTML and CSS are not programming language – they set up style and structure rather than behavior). Despite having similar names, it is entirely different from Java, which is a programming language from the early 90s, originally intended to create interactive televisions.
​​
​​Originally, JavaScript was used for front-end interaction. Now it’s also used for back-end. In general, you can use it to program the behavior of a webpage.
​​
​​Before we can do anything fun with javascript, it’s important to understand the basics.
​​

​​Why would you use JavaScript?

  • ​​Add interactions to site that are input or time based
  • ​​Manipulate HTML or CSS based on user input
  • ​​Load additional resources
  • ​​Add, edit, or remove classes
​​

​​JavaScript, HTML, or CSS?

​​To edit the contents of a paragraph?
​​
​​To style the page to have a blue background?
​​
​​To change the background when a user clicks a button?
​​

​​Console

​​The web console is a tool where you can write commands on a server directly into a webpage. In other words, it’s an easy way to test out javascript commands and see if they’re working.
​​
​​To open it up, go to a website hold down command, option and J (⌄+⌘+J) or go to View / Developer / Javascript Console.
​​
​​This is how it should look:
​​
 
User-uploaded image: image.png
​​
​​The JavaScript console is text only, and you can use it to communicate with the website using lines of codes. It’s also where errors will be recorded.
​​
​​Try saying “Hello” to the browser and see if it says anything back.
​​
​​​👎​
​​
​​Unless you’re using the correct syntax, you’ll likely see an error. Try this instead:
​​alert("Hello Friend!")
​​
​​Now that you’ve made friends with your browser, you might be wondering what’s going on.
​​You’ve done 4 things:
​​
  1. ​​You called up the function, alert
  • ​​alert(“Hello Friend!”)
  1. ​​You utilized basic syntax, by starting with parentheses
  • ​​alert(“Hello Friend!”)
  1. ​​You typed a parameter, which is a string
  • ​​alert(“Hello Friend!”)
  1. ​​You utilized basic syntax, by ending with parentheses
  • ​​alert(“Hello Friend!”)
​​
​​console.log("Hello Friend!")