Home HTML Data Types DOM JavaScript JS Debugging

How to use javascript in any of your pages

  • Simply add a <script></script> in your markdown or html files, like so:
  • (Note: the %%html allows us to add HTML in a jupyter notebook, the outputted “site” will be shown below the code)
%%html
<p>This is a page</p>
<script>
    console.log("our code is running!")
</script>

This is a page

Writing text (see above example)

  • console.log allows you to write text – but you don’t see any text above!
  • The text written with console.log appears in the console – access this by right click -> inspect element (try it on this blog!)
    • Safari users will need to enable developer settings before inspecting an element. To do this go to Safari settings -> advanced and check the box next to “Show develop menu in menu bar”
  • This text must be wrapped in quotes (explained below)

Trying everything out

  • Keep your inspect element console open, you can run javascript code in here!
  • Try to test out everything that is explained in this lesson

Storing data

  • one of the most important things in programming is how data is stored
  • Think about what data you know: your name, age, whether today is a school day, etc.
    • All of this data can be stored inside javascript

Types of data

  • Javascript has a few basic types of data, which align with what the types of data you might know yourself
  • For instance: your name = text, your age = a number, whether today is a school day = true/false
  • In javascript, these types are formalized as:
    • text = “string”, number = “number”, true/false = “boolean”

Labeling data

  • When you think of something you know, it has a name, and a value:
    • For instance “your age” would be the name and 18 would be the value
  • In javascript this can represented with the following: var someName = value;
    • The name cannot have spaces
    • Text values must be wrapped in single or double quotes to identify it as text (see exmaples below)
  • Using the “var” syntax is called creating a variable
%%html
<script>
var firstName = "Rohan"
var lastName = 'Juneja'
var age = 17;
var isSchoolDay = true; 
</script>

Accessing data

  • To access data (the value of a variable), simply just use the name of the variable
  • For example, we can use the values from previously in a console.log
%%html
<script>
var firstName = "Rohan"
var lastName = 'Juneja'
var age = 17;
var isSchoolDay = true; 

// using the value of the variable
console.log(firstName)
</script>

Operators

  • ”+” adds numbers together, or combines text together
  • ”-“ subtracts numbers, “/” divides numbers, “*” multiples numbers
  • ”===” checks if two values are the same, if so it outputs true, otherwise false
    • ”!==” is “not equal to” (opposite of equal to)
    • normal oeprators like “<”, “>”, “>=” (greater than or equal to), “<=” with numbers

Assignment Operator

  • ”=” can be used to change the value of a variable
    • ie. if you already created “name1” you can do name1 = “New Name”
%%html
<script>
var name1 = "Name"
var name2 = "Name"

console.log("Operators")
console.log("Messing with names")
console.log(name1 == name2)

// changing the value of name1
name1 = "New Name"

console.log(name1 + name2)

var age1 = 17
var age2 = 16
console.log("Age1 vs Age2 comparisons")
console.log(age1 == age2)
console.log(age2 > age1)
console.log(age2 < age1)

var age3 = age1 * age2
console.log("Two ages multipled")
console.log(age3)
</script>

Conditional Statements

  • Think about any actions that you take: you usually take them based on information you take in
    • If tommorow is a school day, set an alarm for tomorrow at 8am
  • We can also add additional clauses at the end
    • If tommorow is a school day, set an alarm for tomorrow at 8am, otherwise (else) set an alarm for tommorow at 10am
%%html
<script>
// the above example in code
console.log("Alarm Example")

var tommorowIsSchoolDay = false

if (tommorowIsSchoolDay) {
    // this code runs if tommorw is a school day
    console.log("Setting alarm for 8am")
} else {
    // this code runs if tommorow is not a school day
    console.log("Setting alarm for 10am")
}
</script>

Conditional Statements + Operators

  • Since many operators return a true/false value (equals, gerater than, etc.) we can use them inside “if” statements
%%html
<script>
console.log("If statements + Operators")
var age1 = 16
var age2 = 17

if (age1 > age2) {
    // runs if age1 is more than age2
    console.log("age1 is more than age2")
}

if (age1 === age2) {
    // runs if age1 and age2 are the same
    console.log("age1 is the same as age2")
}

if (age1 < age2) {
    // runs if age2 is more than age1
    console.log("age1 is less than age2")
}
</script>

%%html

<form id="numberForm">
    <label for="num1">Enter the first number:</label>
    <input type="number" id="num1" required><br>
    
    <label for="num2">Enter the second number:</label>
    <input type="number" id="num2" required><br>

    <button type="button" onclick="compareNumbers()">Compare</button>
</form>

<p id="result"></p>

<script>
    function compareNumbers() {

        var num1 = parseFloat(document.getElementById("num1").value);
        var num2 = parseFloat(document.getElementById("num2").value);
        var result = document.getElementById("result");


        if (num1 == num2) {
            console.log("num1 is the same as num2")
            result.textContent = "num1 is the same as num2";
        } else if (num1 < num2) {
            console.log("num1 is less than num2")
            result.textContent = "num1 is less than num2";
        } else {
            console.log("num1 is more than num2")
            result.textContent = "num1 is more than num2";
        }
    }
</script>