HTML and JavaScript: Absolute Basics

<!doctype html>
<html>
<head>
 <title>The basic stuff page</title>
 <meta charset="utf-8">
</head>
<body>
 
 var test = "This stuff"
 document.write(test);
 
</body>
</html>

BasicHtml01

BasicHtml02


 

<!doctype html>
<html>
<head>
 <title>The basic stuff page</title>
 <meta charset="utf-8">
</head>
<body>
(sorry blame WP - see the screenshot below)
 http://BasicStuff01.js
</body>
</html>

BasicHtml03 BasicHtml04 BasicHtml05

Updating an element in the DOM

You have to ensure that the DOM is fully loaded before trying to address any of its elements. An example of what happens if you don’t do that:

BasicHtml06

Run that, and in the browser you see this (that is, the JavaScript has not updated the page)…

BasicHtml08

, and in Chrome F12/dev tools you see this:

BasicHtml09 BasicHtml10

The variable roxyMusic is null because the JS tried to get the Paragraph01 element… but it wasn’t yet loaded.

If we now fix that up, by creating our first function, which contains the code to update the element, but which is not invoked until the page has completely loaded…

BasicHtml11

, then the browser now displays what we intended…

BasicHtml12

, and Chrome dev tools looks healthier:

BasicHtml13

By the way, the editing here was all done in Visual Studio Code, and I’m getting to like that. But I will soon be getting Visual Studio 2015 which I hear has a lot of stuff around JavaScript, HTML, Angular, etc.


HTML snippets base for Visual Studio Code

HtmlSnips01

 


{
"Basic HTML boilerplate": {
"prefix": "BasicHtml",
"body": [
"<!DOCTYPE html>",
"<html>",
"\t<head>",
"\t\t<title>From the snippets location in Visual Studio Code</title>",
"\t\t<meta charset=\"utf-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.jsx\"></script>",
 "\t\t			<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\"></link>",
 "\t\t<script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script>",
"\t\t<script src=\"BasicStuff.js\">",
 "\t\t</script>",
"\t</head>",
"\t<body>",
"\t\t<input type=\"button\" value=\"Press me\" id=\"BasicHtmlPressMeId\">",
"\t\t<input type=\"text\" value=\"Press mex\" id=\"BasicHtmlCapacityId\">",
"\t</body>",
"</html>",
"<!-- https://validator.w3.org/nu/#textarea -->",
"<!-- Location is [file:///e:/sandbox/javascript/test.html] -->"
],
"description": "A basic snippet of HTML"
},
"BSButtons": {
"prefix": "B01",
"body": [
"
<div class=\"page-header\">",
"\t
<h1>A bunch of big Bootstrap buttons</h1>
",
"</div>
",
"",
"\t<button type=\"button\" class=\"btn btn-lg btn-default\">Default</button>",
"\t<button type=\"button\" class=\"btn btn-lg btn-primary\">Primary</button>",
"\t<button type=\"button\" class=\"btn btn-lg btn-success\">Success</button>",
"\t<button type=\"button\" class=\"btn btn-lg btn-info\">Info</button>",
"\t<button type=\"button\" class=\"btn btn-lg btn-warning\">Warning</button>",
"\t<button type=\"button\" class=\"btn btn-lg btn-danger\">Danger</button>",
"

"
],
"description": "Initial bootstrap buttons"
},
"Ang01": {
"prefix": "Ang01",
"body": [
"\t<script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js\"> </script>"
],
"description": "Angular CDN"
},
"BSScriptTags": {
"prefix": "BSScript",
"body": [
"\t\t<!-- http://getbootstrap.com/css/#tables-condensed -->",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js\"></script>",
 "\t\t			<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\"></link>",
 "\t\t<script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script>"
],
"description": "The Bootstrap src, css and jquery bits"
}
}

And something to bring some of the html/JS points together:
https://plnkr.co/edit/T8UUKYCuzLL6dk6y9hcD

 

And another bit here:

https://plnkr.co/edit/Iud8OLI9FMNZek9ZWe4e?p=info