Apply for the next session

For Each What?

Last updated: September 22, 2023

Get deep

Newly introduced language features

  1. HTML element

    Linking external scripts

    <script src='main-site-scripts.js'></script>

    You might think you can leave off the closing tag like an <img /> tag, but this script element is double duty. It can have JS inside of it – or it can link a file with the src attribute. (but it can’t have both)

  2. HTML usage

    Loading scripts in HTML

    <!doctype html>

<html>
  	<head>
      	<title>My site!</title>

		<link rel='stylesheet' href='site.css' /> <!-- get em loading in! -->
  	</head>

	<body>
		<h1>Welcome</h1>


		<script src='site.js'></script>	
	</body>
</html>

    You want to get that CSS loading as fast as possible while the HTML is all getting parsed.

    But if you load your script up at the top, then it might try to access the DOM before it’s built. Imagine if you wanted to turn the h1 red, but it wasn’t parsed yet, and the script tried to find it. It wouldn’t be able to. So, place it just before the end of the body tag, and you can be sure that the HTML has been read first.

    (just a note, remember that these sources are other files, and they’ll need to be downloaded just like an image would be)

    (also: why does the script element need a closing tag and the link doesn’t?)

  3. HTML usage

    Loading scripts with with the defer attribute

    <!doctype html>

<html>
  	<head>
      	<title>My site!</title>

		<link rel='stylesheet' href='site.css' /> <!-- get em loading in! -->
      	<script defer src='site.js'></script> <!-- and these too! -->
  	</head>

	<body>
		<h1>Welcome</h1>


		<!-- stuff -->
	</body>
</html>

<!-- run scripts after the DOM is parsed -->

    You want to get that CSS loading as fast as possible while the HTML is all getting parsed. Well, now you can do that with your scripts too. So, this even better than waiting until the DOM is parsed. This way the scripts and styles can be downloading and parsed while the HTML is getting parsed to DOM.

    (But for little projects, it’s not going to matter either way)

  4. JavaScript

    Array.forEach

    itemsArray.forEach( function(item) {
	console.log("item: ", item);
});

itemsArray.forEach( function(currentItem, indexOfCurrentArray, fullArray) {
	console.log(currentItem, indexOfCurrentArray, fullArray);
});

//

function renderItem(item, index) {
	console.log(index, item);
}

itemsArray.forEach(renderItem); // consider that!
Apply for the next session