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
%%js
// put your javascript code here

%%html

<style>
    .Text p{
        align-items: center;
    }
    button {
        padding: 15px 25px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #0056b3;
      }
</style>

<input type="number" id="a" name="a" placeholder="Number 1; EX: 123456789">


<input type="number" id="b" name="b" placeholder="Number 2; EX: 123456789">


<button onclick="diffrentiate()">diffrentiate</button>

<p id="placeholder"></p>

<script>
    function diffrentiate() {
// Function to be called when the "differentiate" button is clicked
function diffrentiate() {
    // Get the values of the input fields
    var num1 = document.getElementById("a").value;
    var num2 = document.getElementById("b").value;
    var result = document.getElementById("placeholder"); // Result element for displaying the outcome

            // Compare the values of num1 and num2
    if (num1 > num2) {
        console.log("Number 1 is greater than Number 2");
        result.textContent = "Number 1 is greater than Number 2"; // Display this message if num1 is greater
    } else if (num1 < num2) {
        console.log("Number 1 is less than Number 2");
        result.textContent = "Number 1 is less than Number 2"; // Display this message if num1 is less
    } else if (num1 == num2) {
        console.log("Number 1 is equal to Number 2");
        result.textContent = "Number 1 is equal to Number 2"; // Display this message if num1 is equal to num2
    } else {
        console.log("Unexpected error");
        result.textContent = "Please try again with different number"; // Display an error message if unexpected input
    }
</script>