# Coaching - JavaScript 1 with Founders and Coders --- ## What is Javascript? ---- JavaScript is a scripting language you can use to make web pages interactive. It is one of the core technologies of the web, along with HTML and CSS, and is supported by all modern browsers. --- ## How does JavaScript relate to HTML & CSS? ---- When we write a website, we use JS to update the HTML document which the users sees. ---- While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. ---- We'll look at connecting HTML, CSS and JS in later weeks. For now, we'll focus on JavaScript fundamentals. --- ## freeCodeCamp ---- A free platform to learn to code. [Take a look](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/golf-code) :eyes: ---- When faced with a problem, follow these steps: - Read the problem - Check the tests - Code between the comments --- ## Features of JavaScript --- ### Variables ---- A variable is used to store information or data. ---- Each variable has a unique name. ---- ```javascript= var myNumber = 10; var emptyVar; ``` --- ### Assignment ---- We can _assign_ values to variables using a single `=`. ---- ```javascript= var myNumber = 10; myNumber = 25; console.log(myNumber) // outputs 25 var emptyVar; emptyVar = myNumber - 2; ``` ---- ```javascript= var firstString = "Hello"; var secondString = "World"; var combinedString = firstString + " " + secondString; ``` --- ### Arrays ---- Arrays let us store multiple values. ---- ```javascript= var numArray = [1,3,5,7]; var strArray = ['dog', 'cat', 'fox', 'cow']; var mixedArray = [1, 'frog', true, 0, [4, 5, 6]]; ``` --- ### Objects ---- Objects also allow us to store multiple values. ---- In objects, we store values in key / value pairs. In other words, each value has a particular key we use to access that value. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', } ``` ---- We can access values using dots or square brackets. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', }; console.log(myObject[name]); // outputs 'Gregor' console.log(myObject.username); // outputs 'Albadylic' ``` ---- We can nest objects inside of other objects. ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', activities: { daytime: 'web development', nighttime: 'fight crime' } }; ``` ---- ```javascript= let myObject = { name: 'Gregor', username: 'Albadylic', activities: { daytime: 'web development', nighttime: 'fight crime' } }; console.log(myObject.activities.daytime); console.log(myObject['activities']['daytime']); console.log(myObject['activities'].daytime); ``` --- ### Functions ---- ### What is a function? Some lines of code that do a predefined task. A function may take some input and return an output. ---- ### Why do we use functions? ---- #### Define reusable code Declare code which can be used in many places to do similar things with different inputs to give different outputs. ---- #### Modularise our code Break our code up into sections. ---- #### Help us understand our code - Having a well named function is easier to understand than a list of statements. - A meaningful name makes it easier to understand what the function does. A function that adds two numbers can be "addTwoNumbers". ---- #### Writing a function ---- ```javascript= function addTwoNumbers(num1,num2){ return num1+num2; } var total = addTwoNumbers(2,3) // total is assigned the returned value ``` ---