Basics of Javascript

September 2023 (1094 Words, 7 Minutes)

Home

HTML

JavaScript

DOM

Data Types

Correcting errors

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

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

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

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

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

Conditional Statements + Operators

• Since many operators return a true/false value (equals, gerater than, etc.) we can use them inside “if” statements

%%html

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
//generates random values for a and b
var a = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);

console.log("The value of A is: " + a);
console.log("The value of B is: " + b);

//checks if a is greater than b
if (a > b) {
    console.log("a is greater than b");
}
//checks if a and b are equal
else if(a == b) {
    console.log("a and b are equal");
}
else {
    console.log("a is less than b");
}

<IPython.core.display.Javascript object>