CompSci Blogs

August 2023 to June 2024

View the Project on GitHub sfremy/csablog

29 August 2023

Basics of Javascript

by

Home HTML Data Types DOM JavaScript JS Debugging

How to use javascript in any of your pages

%%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

Try code with Console

Storing data

Types of data

Name the Data

Accessing data

%%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

Assignment Operator

%%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

Assignment Operator

%%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

%%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

%%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

%%js
// put your javascript code here
<IPython.core.display.Javascript object>
tags: