How to use javascript in any of your pages

Simply add a <script></script> in your markdown or jupyter cells
(Note: the %%html magic command allows us to add HTML and JavaScript into a jupyter notebook, the outputted “site” will be shown below the code)

%%html
<h3>Page Heading</h3>
<p>Paragraph description of page</p>
<script>
    console.log("Output to console, showing that JavaScript code is running")
</script>

Page Heading

Paragraph description of page

Writing text to console.log

The text written with console.log appears in the Console
console.log allows you to write text – but you don’t see any text in above example until you view Console.
Activate Console window
- VSCode Help-Toggle Developer Tools allows you to see console.log output
- Chrome and other browsers require right click -> inspect also allows access to console.log output
  - 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”
- By default you usually need to click Console next to Elements, to see console.log output
- Also, you may want to press clear console (cirlcl with slash) to clean up screen before analysis.

Try code with Console

Developers typically keep console open
In console window, you can run javascript code from prompt

Storing data

One of the most important things in programming is learning how data is stored, this is often called Data Abstraction (the ability to represent data in a programming language).

Types of data

Javascript has a few basic types of data, which align with what the types of data you might know yourself
In javascript, these types are formalized as:
- text = “string”, number = “number”, true/false = “boolean”

Name the Data

When you think of data, it has a name and a value.
Using the “var” JavaScript syntax you create a variable with a name and a 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)

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>
// create variables
var firstName = "Rohan"
var lastName = 'Juneja'
var age = 17;
var isSchoolDay = true; 

// inspect values and type
console.log(firstName, typeof firstName)
console.log(lastName, typeof lastName)
console.log(age, typeof age)
console.log(isSchoolDay, typeof isSchoolDay)

</script>

String Operators

”+” concatenates string, same as combining text
”==” checks if strings are the same, if so it outputs true, otherwise false
- ”!==” is “not equal to” (opposite of equal to)

Assignment Operator

”=” can be used to change the value of a variable
- ie. if you already created “name1” you can reassign name1 = “New Name”

%%html

<script>
// string assignment
var name1 = "Doe"
var name2 = "Doe"

// compare names
console.log("String Comparison")
console.log("name1", name1)
console.log("name2", name2)
console.log("name1 == name2", name1 == name2)

// changing the value of name1 and repeat compare
console.log("String Comparison after change")
name1 = "John"  // reassign
console.log("name1", name1)
console.log("name2", name2)
console.log("name1 == name2", name1 == name2)

console.log("String Concatenation")
console.log(name1 + " " + name2)
</script>

Number Operators

”+” adds numbers 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 create or change the value of a variable

%%html

<script>
var age1 = 17
var age2 = 16
var age3 = '17'

console.log("Number Comparisons")
console.log("age1:", age1)
console.log("age2:", age2)
console.log("age3:", age3)
console.log("age1 == age2", age1 == age2)
console.log("age1 == age3", age1 == age3)
console.log("age1 === age3", age1 === age3)
console.log("age1 > age2", age1 > age2)
console.log("age1 < age2", age1 < age2)

var num1 = 9
var num2 = 5
console.log("\n")
console.log("Arithmetic Operations")
console.log("num1:", num1)
console.log("num2:", num2)
console.log("num1 + num2", num1 + num2)
console.log("num1 - num2", num1 - num2)
console.log("num1 * num2", num1 * num2)
console.log("num1 / num2", num1 / num2)
console.log("num1 % num2", num1 % num2)

</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 = 17
var age2 = 37

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

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

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

</script>

Hacks

Write a JavaScript program that compares two variables, a and b. Log “a is greater” if a is greater than b, “b is greater” if b is greater than a, and “both are equal” if a and b are equal. Make sure to use if statements and console.log

%%html

<label for="num1">Number 1:</label>
<input type="text" id="num1" name="num1" placeholder="40">

<label for="num2">Number 2:</label>
<input type="text" id="num2" name="num2" placeholder="60">

<button onclick="compareNumbers()">Compare Numbers</button>

<p id="resultParagraph"></p>

<script>
    function compareNumbers() {
        var num1 = parseFloat(document.getElementById("num1").value);
        var num2 = parseFloat(document.getElementById("num2").value);

        var resultParagraph = document.getElementById("resultParagraph");
    
        if (!isNaN(num1) && !isNaN(num2)) {
        if (num1 > num2) {
            console.log(num1 + " is greater than " + num2);
            resultParagraph.textContent = "Number 1 is greater";
        } else if (num2 > num1) {
            console.log("b is greater");
            resultParagraph.textContent = "Number 2 is greater";
        } else {
            console.log("both are equal");
            resultParagraph.textContent = "Both numbers are equal";
        }
        } else {
            console.log("Please enter valid numbers in both fields.");
            resultParagraph.textContent = "Please enter valid numbers in both fields.";
        }
}
</script>

Number 1:

Number 2:

Basics of Javascript • 18 min read

Description

How to use javascript in any of your pages

Page Heading

Writing text to console.log

Try code with Console

Storing data

Types of data

Name the Data

Accessing data

String Operators

Assignment Operator

Number Operators

Assignment Operator

Conditional Statements

Conditional Statements + Operators

Hacks