Dr. Derek Austin djD-REK

## Replacing all inline CSS styles using JavaScript.js
// Replace the inline styles:
for (div of document.getElementsByTagName("div")) {
  div.style.cssText = "font-size: 3rem"
}

// Clear out all inline styles:
for (div of document.getElementsByTagName("div")) {
  div.style.cssText = ""
}

## One-liner for applying CSS to <div> elements with JavaScript.js
// As a one-liner:
for (div of document.getElementsByTagName("div")) {
  div.style.fontSize = "3rem"
}

## Applying CSS styles to <div> elements using JavaScript.js
// Apply CSS styles to all of the selected <div> elements
for (div of allDivs) {
  div.style.fontSize = "3rem"
}

## Selecting <div> elements with JavaScript.js
// Select all the <div> elements on the current page
const allDivs = document.getElementsByTagName("div")

## Select all <div> elements using document.getElementsByTagName().js
// Select all <div> elements on the page
const divs = document.getElementsByTagName("div")

// Apply CSS styles to the selected <div> elements
for (div of divs) {
  div.style.border = "3px solid orange"
}

// As a one-liner:
for (div of document.getElementsByTagName("div")) { div.style.border = "3px solid orange" }

## Using jQuery to select all <div> elements on a page.js
// Load jQuery, equivalent to having the <script> tag on the page
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
const loadScript = async (url) => {
  const response = await fetch(url)
  const script = await response.text()
  eval(script) // or Function(script)
}

const scriptUrl = "https://code.jquery.com/jquery-3.5.0.js"
loadScript(scriptUrl)

## Loading jQuery with a <script> tag.js
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

## Load an external script using jQuery.js
$.getScript("script.js") // Load a script using jQuery

## Using Function() instead of eval() to load jQuery.js
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
const loadScript = async (url) => {
  const response = await fetch(url)
  const script = await response.text()
  Function(script)
}

const scriptUrl = "https://code.jquery.com/jquery-3.5.0.js"
loadScript(scriptUrl)

## Use fetch() with a Promise chain to load jQuery.js
// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
fetch("https://code.jquery.com/jquery-3.5.0.js")
  .then((response) => response.text())
  .then((text) => eval(text))
  .then(() => {
    /* Use jQuery */ $("div").css("border", "3px dotted orange")
  })
	// Replace the inline styles:
	for (div of document.getElementsByTagName("div")) {
	div.style.cssText = "font-size: 3rem"
	}

	// Clear out all inline styles:
	for (div of document.getElementsByTagName("div")) {
	div.style.cssText = ""
	}
	// As a one-liner:
	for (div of document.getElementsByTagName("div")) {
	div.style.fontSize = "3rem"
	}
	// Apply CSS styles to all of the selected <div> elements
	for (div of allDivs) {
	div.style.fontSize = "3rem"
	}
	// Select all the <div> elements on the current page
	const allDivs = document.getElementsByTagName("div")
	// Select all <div> elements on the page
	const divs = document.getElementsByTagName("div")

	// Apply CSS styles to the selected <div> elements
	for (div of divs) {
	div.style.border = "3px solid orange"
	}

	// As a one-liner:
	for (div of document.getElementsByTagName("div")) { div.style.border = "3px solid orange" }
	// Load jQuery, equivalent to having the <script> tag on the page
	// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
	const loadScript = async (url) => {
	const response = await fetch(url)
	const script = await response.text()
	eval(script) // or Function(script)
	}

	const scriptUrl = "https://code.jquery.com/jquery-3.5.0.js"
	loadScript(scriptUrl)
	// <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
	fetch("https://code.jquery.com/jquery-3.5.0.js")
	.then((response) => response.text())
	.then((text) => eval(text))
	.then(() => {
	/* Use jQuery */ $("div").css("border", "3px dotted orange")
	})