Coding with Josh

Let's Learn JavaScript!

JavaScript is a programming language that can be used to create interactive web pages. It has built-in data structures like Arrays, and Objects. It also comes with built in methods like the Date, and Math functions. Additionally, it has a core set of language elements like operators, conditional loops, and statements.

Variables are what we use to store values. Variables are declared with var, let or const. Variables declared with var can be reassigned (changed) and redeclared at anytime, let can be reassigned at anytime, and const can never be reassigned or redeclared using the same name.
For example: var age = 10; let message = "hello"; const type = "human";

Operators are mathematical symbols that produce a result based on two values (or variables). For example you can write 1 + 1 in javascript and it will output 2.

If statements, and loops rely on conditions. If statements are used to execute a block of code if a specified condition is true.
ie. if this, then this; if not, then that.

Loops are used to execute a block of code repeatedly until a specified condition is met.

Here is an example of a script that would be used within the HTML document. Like CSS you can also link a script file by stating:
<script src = "yourScriptSource.js"></script>

<script>
 function myFunction() {
  alert("Hello World");
  document.getElementById("demo").innerHTML = "Hello World";
 }
</script>

  • Lesson 1
  • Easy     
  • Medium 
  • Hard     

Challenge

Create variable called name and a variable called age and assign them values. Then change the HTML elements to show what your variables say in the document using Javascript and DOM interface.

Bonus Challenge: Use the alert function to say this message:

Hello {{Name}}, you are {{age}} years old.
Replace the bracketed words with your variable's values.


You can select an element with its id by using the document.getElementById('ID Goes Here') statement.
The IDs for the elements are "name" and "age". Here is an example: document.getElementById('ID Goes Here').innerHTML = {{Your Variable}};

P.S. Semi-colons are important for your code to work correctly in here.

Videos