This was originally posted on my site at https://martyhimmel.me on January 11, 2017. Like a number of others on dev.to, I've decided to move my technical blog posts to this site.
Throughout this series, you'll see
console.log('something in here'); statements - anything inside the parentheses will be printed to the console you just opened. In fact, you can copy and paste that in the console, too. You'll see 'something in here' printed below the line - the statement that was logged to the console.
For more permanent scripts, there are a couple ways you can do it. The first is inside an HTML file - an inline script. You can place a set of
script tags anywhere in the
body sections. Here's an example showing a script in both sections.
<html> <head> <script> alert('Popup triggered in the head tags.'); </script> </head> <body> <script> console.log('This is logged to the console from the body tags.'); </script> </body> </html>
One thing to keep in mind is order matters. The script in the
head section runs first, then the script in the
body section. If you have script in the top of the
body section that targets an HTML element below the script, it won't know what to do and you'll get an error. At the time the script is run, the HTML element hasn't loaded yet, so it doesn't exist. There are a couple ways around this.
The first is to put all of your
script tags right before the closing
body tag. This makes sure all the HTML is loaded first before running the scripts. This was a common workaround for over a decade, and some systems still use this for backwards compatibility (e.g. WordPress). The second is the either
src attribute on the
script tag. The tag contents are also empty.
<!-- index.html --> <html> <head> <script src="myscript.js"></script> </head> <body> </body> </html>
// myscript.js alert('Popup triggered in the head tags.');
Again, order matters. The contents of the "myscript.js" file will be loaded before the
body tag is loaded. This is where
defer come in to play.
async will load a file in the background while continuing to load the rest of the page. If you have code that depends on an HTML element, this may or may not work, depending on which one finishes loading first (the .js file or the HTML).
defer will wait until the page is loaded, then it will load the script.
defer. Here's what it looks like.
<html> <head> <script src="myscript.js" defer></script> </head> <body> </body> </html>
Statements should be terminated (end with) a semicolon. If you forget a semicolon, the browser will automatically insert one when it's interpretting the code, but it's not always accurate. Missing semicolons can lead to hard to debug issues.
Comments are written in one of two ways - using
/* */. The first is a single line comment and the second is a multiple line comment. Comments are ignored by the browser.
// This is a single line comment /* This comment spans multiple lines */
"some text" is the same as
'some text'. For same types within a string, you can either use both or escape the quote. Using both looks like
"it's blue". Escaping a character means putting a backslash in front of the character, such as