A Beginners Guide To HTML Elements.
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
"title" : "A Beginners Guide To HTML Elements" ,
"author" : "Dave Auguste" ,
"version" : "Thu Jun 10 2021 22:02:20 GMT+0100 (British Summer Time)" ,
"big_thanks_to" : "Mum, Sue, Taye, Misha, Rob, Caroline, Jess, Ryan, Helen, Stevie, Ani" ,
Content :
Introduction :
HTML :
CSS :
JavaScript :
Tips :
Appendix I :
Appendix II :
Appendix III :
Introduction :
This web page was made using HTML (Hyper-Text Markup Language). HTML is a human readable formatting system, initially designed for composing text, images, and hyperlinks, within the first browsers. Modern browsers have expanded the capabilities of HTML to include video, audio, and animation, and now provide far more sophisticated ways to interact with the browser, including via bluetooth, USB and Real-Time Communication ( RTC ) .
All that is required to get started is a web browser. Although source code editing software can be extremely useful when constucting large projects, a plain-text editor may suffice for smaller applications, and an embedded HTML editor is provided here to help you get started.
HTML :
In essense, HTML is composed using tags to mark regions that require formatting. For example, to instruct a browser to write bold text one could surround the text to be displayed within a start-tag and an end-tag, like so ...
<b>text to be displayed</b>
The start-tag opens with a 'less-than' symbol ( < ), followed immediately by a lower-case letter b ( abbreviation for bold ), then closes with a 'greater-than' symbol ( > ).
<b>text to be displayed</b>
The end-tag is similar, opening with a less-than sign, but is immediately followed by a 'forward' slash ( / ), before a lower-case letter b, and then closing with a greater-than sign.
<b>text to be displayed</b>
Italic text can be produced in the same way ...
<i>text to be displayed</i>
... and HTML tags can surround other HTML elements to combine effects ...
<u><i><b>text to be displayed</b></i></u>
... as in the example above, where lower-case letter u is an abreviation for underline.
A hyperlink to another web page can be marked-up like so ...
<a> hyperlink to another web page </a>
... where lower-case letter a stands for anchor. However, it is necessary, for our purpose, to specify the location of the other web page that we want our hyperlink to go to. That can be achieved by defining a hyper-link reference attribute within the start-tag, labelled href ...
<a href="anotherWebPage.html"> hyperlink to another web page </a>
An image can be displayed in a similar way ...
<img src="imageToBeDisplayed.png">
... although we use an attribute labelled src ( meaning source ) to specify the location of the image data to be displayed, and we omit the end-tag as it is not required to describe the attributes of an HTML image element.
Comment elements can be used to make notes within HTML, but are not displayed by the browser ...
<!-- this is an HTML comment element -->
More info:
W3Schools - HTML Tutorial
CSS :
One of the most important attributes of an HTML element is its style attribute. As an example, if our text to be displayed is contained within an HTML paragraph element ...
<p>text to be displayed</p>
... then bold, italic, and underline styling can be defined inline, affecting all text gathered inside the tags, like so ...
<p style="font-weight:bold;font-style:italic;text-decoration:underline;">text to be displayed</p>
... or can be defined internally within a seperate HTML style element, and applied to several paragragh blocks simultaneously...
<style>
p {
font-weight : bold ;
font-style : italic ;
text-decoration : underline ;
}
</style>
<p>text to be displayed</p>
<p>more text to be displayed</p>
<p>even more text to be displayed</p>
... or can be defined externally in a seperate file, and linked to our web page like so ...
<link href="seperateFile.css">
<p>text to be displayed</p>
<p>more text to be displayed</p>
<p>even more text to be displayed</p>
In addition to font-family, font-size, and color properties, block width, height, background-image, rotation, as well as more than 300 other properties can be specified, combined and animated using CSS ( Cascading Style Sheets ).
Comment blocks can also be used to make notes within CSS, but are ignored by the browser.
<style>
/* this is a CSS comment block */
</style>
More info:
W3Schools - CSS Tutorial
JavaScript :
JavaScript is a computer programming language that enables us to control the behaviour of elements within a web page in response to events. For example, using an internal HTML script element...
<script> </script>
... after a browser loads our web page, we can display a notification message to the end-user, like so ...
<script>
onload = function ( ) {
alert ( "hello world" ) ;
} ;
</script>
In our source-code, we set a built-in attribute named onload by assigning a custom function to it, using the equals sign ( = ). The code inside the custom function invokes a built-in function named alert, which we use to instruct the browser to display a dialog box containing the text message, "hello world".
The round-brackets ( ) and curly-brackets { } are used to mark the start and end of different sections of code. The semi-colon ( ; ) marks the end of a set of code, and the double-quotation marks ( " ) denote the start and end of the text message to be displayed.
Take a break, grab a pen and a piece of paper, then lets look at some of the most commonly used components in JavaScript in more detail.
More info:
W3Schools - JavaScript Tutorial
JavaScript : "the nuts and bolts" ...
Pen and paper ready? Comments :
Comment blocks can be used to make notes within source code, but are ignored by the browser.
There are 2 types of comment blocks in JavaScript: single-line and multi-line ...
<script>
// a single-line comment
/* a multi-line comment */
/* ...
another
multi-line
comment ...
*/
</script>
Variables :
Variables are used to store data. JavaScript varibles can be defined in 3 ways:
<script>
var a = 1 ;
let b = 2 ;
const c = 3 ;
</script>
Please note, names for variables must begin with an alphabet symbol ( lower-case a to z or upper-case A to Z ) or a dollar symbol ( $ ) or an underscore symbol ( _ ), and may be affixed with numbers ( 0 to 9 ) .
<script>
var abc = 1 ; // ok
let _$2 = 2 ; // cryptic, but ok
const 012 = 3 ; // ERROR ! ! !
</script>
Please note that var and let are subtly different, but can often be interchanged. const denotes a variable whose value never changes. Careful use of const and let, in place of var, can improve the performance of a web page, by freeing allocated memory when no longer required by the browser, and assisting the browser by hinting at ways to optimize its use of memory.
Numbers :
Numbers may take one of two forms, integers or decimals.
<script>
let integer = 1234 ;
let decimal = 3.14 ;
</script>
Mathematical operators :
Mathematical operators can be used to combine the values of two variables into one new variable ...
<script>
function add ( _a,_b ) { return ( _a + _b ) } ;
function subtract ( _a,_b ) { return ( _a - _b ) } ;
function multiply ( _a,_b ) { return ( _a * _b ) } ;
function divide ( _a,_b ) { return ( _a / _b ) } ;
function modulus /* remainder */ ( _a,_b ) { return ( _a % _b ) } ;
</script>
A minus sign can be used to change the sign of a value ...
<script>
let one = 1 ;
let negativeOne = - one ;
</script>
Some mathematical shortcut methods will automatically assign the result of an operation to an existing variable...
<script>
var a = 1 , b = 2 , c = 3 ;
alert ( ++a ) // same effect as alert ( a = a + ( 1 ) )
alert ( a++ ) // same, except change in value is not immediate
alert ( --b ) // same effect as alert ( b = b - ( 1 ) )
alert ( b-- ) // same, except change in value is not immediate
alert ( c+= 1 ) // same effect as alert ( c = c + ( 1 ) )
alert ( c-= 2 ) // same effect as alert ( c = c - ( 2 ) )
alert ( c*= 3 ) // same effect as alert ( c = c * ( 3 ) )
alert ( c/= 4 ) // same effect as alert ( c = c / ( 4 ) )
alert ( c%= 5 ) // same effect as alert ( c = c % ( 5 ) )
</script>
Strings :
Strings are used to define text data. Strings can be created in several ways:
<script>
var string1 = "hello" ; // double-quote boundary marks
let string2 = 'world' ; // single-quote boundary marks
const string3 = `${string1} ${string2}` , // back-tick template string
string4 = string1 + ' ' + string2 ; // string concatenation
/*
Please note how the comma symbol ( , )
is used to mark the end of an assignment instruction,
whilst the affect of the variable type modifier ( const ) continues
up to the semi-colon ( ; ) as with ...
let x = 1 , y = 2 , z = 3 ;
*/
</script>
Arrays :
Arrays are used to group data into lists. An array can be created as follows:
<script>
let array = [ "?","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" ] ;
array [ 0 ] = "Jan" ; // Please note, array element indexes always start from zero
alert ( array ) ; // ... displays the content of the array
alert ( array.length ) ; // ... displays the length of the array
</script>
Objects :
Objects are used to group data into meaningful structures. An object can be created as follows:
<script>
let bird = { wings:2, beak:true , consumes:"seeds" } ; // please note: true without quotes is of boolean type, and
let plane = { wings:2, beak:false } ; // as such may assume a value of either true or false ...
plane.consumes = "fuel" ; // A dot can be used to denote a property ( variable attribute ) of an object
plane[ "consumes" ] = "kerosine" ; // A string inside square brackets can also be used to denote a property of an object
</script>
Functions :
Functions are used to invoke actions, and may be created as follows:
<script>
function add ( _a,_b ) { return _a + _b; } ;
let subtract = function ( _c,_d ) { return _c - _d; } ;
const display = new Function ('_value', 'alert (_value);') ;
display ( add( 1,2 ) ) ; // returns 3
display ( subtract ( add( 1,2 ) , 3) ) ; // returns 0
</script>
Classes :
Classes are used to construct objects without repeating code.
<script>
class Shape {
constructor ( _name,_numberOfSides ) {
this.name = _name ;
this.numberOfSides = _numberOfSides ;
} ;
} ;
const array = [
new Shape ( 'triangle', 3 ) ,
new Shape ( 'square' , 4 ) ,
new Shape ( 'pentagon', 5 ) ,
new Shape ( 'hexagon' , 6 ) ,
new Shape ( 'circle' ,Infinity ) ,
] ;
// ...
</script>
The original way to construct classes was through functions, an alternative approach that remains popular today ...
<script>
function Shape ( _name,_numberOfSides ) {
this.name = _name ;
this.numberOfSides = _numberOfSides ;
} ;
const array = [
new Shape ( 'triangle', 3 ) ,
new Shape ( 'square' , 4 ) ,
new Shape ( 'pentagon', 5 ) ,
new Shape ( 'hexagon' , 6 ) ,
new Shape ( 'circle' ,Infinity ) ,
] ;
const number_of_shapes = array.length ;
const random_integer = Date.now ( ) % number_of_shapes ;
const random_shape = array [ random_integer ] ;
alert ( `The number of side in a ${ random_shape.name } is equal to ${ random_shape.numberOfSides }` ) ;
// ... Date is a built-in object that provides us with time and date
// ... information. Date.now provides us with the number of miliseconds
// ... that have elapse since January 1st 1970 ( a moment known as
// ... 'The Epoch' )
</script>
More info:
Mozilla Developers Network - JavaScript First Steps
The window object :
The window object contains a set of pre-fabricated objects and functions that allow us to control the browser.
The window object contains the document object, for example, which allows us to compose HTML and CSS using only JavaScript strings. The window object also contains the navigator object, which can provide us with information about each user's system, so we can adapt our web-pages to suit different devices, such as automatically switching layout parameters for desktop or for mobile.
The structure of the window object is abbreviated below ...
<!--
const window = {
document : { /* ... */ } , // please note, objects can contain other objects
navigator : { /* ... */ } ,
screen : { /* ... */ } ,
originPolicyIds : [ /* ...*/ ] , // please note, objects can contain arrays
alert : function ( _message ) { /* ... */ } ,
confirm : function ( _message ) { /* ... */ } ,
prompt : function ( _message,_defaultInputValue ) { /* ... */ } ,
// ... objects can also contain functions
// ...
}
/* ... Please note, window attributes may be distinguished using a dot,
... such as:
window.alert ( "hello world" ) ;
... */
-->
More info:
Mozilla Developers Network - Window
Program flow :
The term 'program flow' refers to the order in which operations are carried out. Generally, computer operations are read from left to right, one line at a time, from top to bottom, down to the end of the source-code, (although it should be noted that the code within some blocks, such as within functions, inside switch statements, and inside if statement code-execution blocks are not invoked until called for).
Logical operators:
Logical operators are often used to compare two values to evaluate whether a condition is true or false, before redirecting program flow.
<script>
// ... comparison operators ...
function isEqualTo ( _a,_b ) { return ( _a == _b ) } ;
function isNotEqualTo ( _a,_b ) { return ( _a != _b ) } ;
function isLessThan ( _a,_b ) { return ( _a < _b ) } ;
function isLessThanOrEqualTo ( _a,_b ) { return ( _a <= _b ) } ;
function isGreaterThan ( _a,_b ) { return ( _a > _b ) } ;
function isGreaterThanOrEqualTo ( _a,_b ) { return ( _a >= _b ) } ;
</script>
Comparison operators can be conjoined using logical AND and logical OR ...
<script>
// ... logical conjunction operators ...
function AND ( _p,_q ) { return ( _p && _q ) } ;
function OR ( _p,_q ) { return ( _p || _q ) } ;
</script>
... and sometimes we may want to invert the result of a logical comparison, using logical NOT ...
<script>
// ... logical inversion operator ...
function NOT ( _c ) { return ( ! _c ) } ;
// ... for example :
// ... window.alert ( ! ( screen.width > screen.height ) )
// ... ... here, a value of true indicates a device is in portrait mode ...
</script>
if ... else statements:
An if statement is used to redirect program flow, after determining whether a logical operation or non-boolean operation evaluates to true or false. For example :
<script>
const name = window.prompt ( 'Please enter your name :' ) ;
if ( name == null ) { window.alert ( "no name was entered" ) ; }
else if ( name == "David" ) { window.alert ( "my name is also David" ) ; }
else { window.alert ( "hello " + name ) ; }
// ... please note, null is a value that equates to 'undefined' and will
// ... occur if the user clicks 'cancel' in response to window.prompt
</script>
switch statements:
A switch statement is used to redirect program flow, by matching a value against a list of values. For example :
<script>
const name = window.prompt ( 'Please enter your name :' ) ;
switch ( name ) {
case null : { window.alert ( "no name was entered" ) ; break; }
case "David" : { window.alert ( "my name is also David" ) ; break; }
default : { window.alert ( "hello " + name ) ; break; }
}
</script>
Ternary operation:
A ternary operation is in effect an abbreviated if ... else statement used to redirect program flow. For example :
<script>
const name = window.prompt ( 'Please enter your name :' ) ;
const response = [
function ( ) { window.alert ( "no name was entered" ) ; } ,
function ( ) { window.alert ( "my name is also David" ) ; } ,
function ( ) { window.alert ( "hello " + name ) ; } ,
] ;
// ... Please note, array objects may list functions
if ( name == null ) ( response [ 0 ] )( ) ;
else ( name == "David" ) ? ( response [ 1 ] )( ) : ( response [ 2 ] )( ) ;
// ... Please note, ternary operation code-execution blocks are separated by a
// ... question mark ( ? ) ..... and a colon ( : )
// ... and consecutive operations may be grouped using round brackets and commas ...
// ... such as:
// confirm ( '...' ) ? ( a=1 , alert ( a ) ) : ( b=2,c=3 , alert ( a+b-c ) ) ;
</script>
while loops:
A while loop is used to repeat a block of code several times, until an exit condition equates to false. For example :
<script>
let counter = 0, numberOfRepetitions = 5 , textMessage = "" ;
while ( counter < numberOfRepetitions ) {
counter++;
textMessage += "hello world" + "\n" ; // "\n" - new-line
}
window.alert ( textMessage ) ;
</script>
for loops:
A for loop is used to repeat a block of code several times, until an exit condition evaluates to false. For example :
<script>
let counter = undefined , numberOfRepetitions = 5 , textMessage = "" ;
for ( counter = 0 ; counter < numberOfRepetitions ; counter++ ) {
textMessage += "hello world\n" ;
}
window.alert ( textMessage ) ;
</script>
More info:
Mozilla Developers Network - JavaScript Building Blocks
Tips :
Assuming you are equiped, willing, and free to learn, the biggest limitation in programming is human memory. We are not machines. We are complex biological entities, and as such we are bound to make mistakes. Have patience and forgive yourself where no harm hath come from trying. Beyond what spark it takes to get started, we can use our powers of recognition of our own circumstances and our creative potential to invent mnemonic techniques to help us transform our ideas into new states of reality.
Common typographical errors, such as forgetting end-tags, or forgetting closing-brackets, or forgetting end-quotes on strings, can be greatly reduced by simply typing your open-bracket/tag/quote followed by your close-bracket/tag/quote, then doubling-back using the left-arrow-key to fill in the missing text...
However, as your source code begins to spill off the screen, the efficacy of unaided human memory storage and retrieval becomes ever more questionable. Though it might help to simply remember to check your code every seventh time you hit the new-line key ( enter-enter-enter-enter-enter-enter-check!! ), or to ensure that large blocks of code can be excluded without raising errors using multi-line comment tags if they malfunction, in practice, after decades of coding, I have settled on 2 reliable solutions to what I summarize as 'the out-of-sight out-of-mind problem':
1 : "Semantic code structure" ...
Semantic code structure, or meaningful code layout, for me, results from abiding by a list of stumbled upon best practice, such as : - ... minimising the use of variables, so I have less to remember,
- ... using descriptive names for variables as much as possible so that I can read my own code without an instruction manual weeks, months, even years later,
- ... confining the use of variables to within nearby blocks only, as much as possible, so that I do not have to search too far to retrieve clarity ( loss of recall appears time dependent, so, though I believe that insight and contemplation are more important in solving problems, my assumption is that the quicker one can type without making mistakes the less susceptible one might be to making errors due to processes analogous to 'synaptic signal decay' ),
- ... expressing several operations in a single line ( not in a list ) to maximise the use of screen space so as to maintain direct sight of the code, ( software and hardware permitting, the ability to shrink font-size can also help ),
- ... using indentation, and aligning symbols so that related sections of code can be more easily perceived as coherant groups from a distance when trying to comprehend their overall effect. A 'satelite view' of your code should reveal clumps that you can combine with comments to use as navigation landmarks when 'abseiling' your code.
2 : "Code folding and syntax highlighting" ...
Code folding and syntax highlighting, combined with drawing and careful code structure is equivalent to using a crane to lift heavy components to build a skyscraper from a blueprint. For the majority of us, who are not super human, it may be fair to claim that there is no other way to build big projects single handedly without good techniques and tools. As programmers, numerous commercial software packages exist for our purpose, though as you advance you may want to build your own tools, as is common within professional enterprises and niche studios, ... in which case you may only be limited by the amount of time and dedication that you can afford to apply to devising unique features for your own bespoke code editing software. ...
...
Isolating errors and visualising data is called
debugging. The best browsers have built-in debugging features that are accessible through JavaScript, but unfortunately most cannot be used on mobile phones. Fortunately,
window.alert and
window.prompt can be used to probe code and retrieve written feedback of what's going on inside your programs. As we are using HTML, during development we can also append an HTML textarea element anywhere inside our code for the same purpose. If its worthwhile, we can even display sci-fi-movie-like performance visualisations in fixed-semi-transparent HTML canvas elements, and thereby obtain more specific runtime information about the inner-workings of our code than a general purpose built-in debugger might provide.
When developing very large projects, it helps to decompose each project into manageable chunks or stages, to regard each stage as a problem to be solved, and to visualise key elements within each problem in
abreviated symbolic form ( such as 'pseudo-code' ) or
diagramatic form ( such as 'Object Modeling Language' ), or simply by
drawing , on paper, on a white-board, or using graphics software. An external representation of a plan, or a map, helps to reinforce our internal memory by refining the structure of our solution, or our problem space, permits repeated exposure to accurate representations of our solutions, and further aids recall by providing a reliable external backup. Even if we are stuck with a plain-text editor, we can still visualise our solutions externally using box-drawing symbols ...
<!--
┌ window ──────────────────────────────────────────────────┐
│ ┌ document ────────────────────────────────────────────┐ │
│ │ ┌ html ────────────────────────────────────────────┐ │ │
│ │ │ ┌ head ────────────────────────────────────────┐ │ │ │
│ │ │ │ ┌ style ───────────────────────────────────┐ │ │ │ │
│ │ │ │ │ /* ... */ │ │ │ │ │
│ │ │ │ └──────────────────────────────────────────┘ │ │ │ │
│ │ │ │ ┌ script ──────────────────────────────────┐ │ │ │ │
│ │ │ │ │ /* ... */ │ │ │ │ │
│ │ │ │ └──────────────────────────────────────────┘ │ │ │ │
│ │ │ │ appendChild = function ( ... ) { /* ... */ } │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ │ ┌ body ────────────────────────────────────────┐ │ │ │
│ │ │ │ appendChild = function ( ... ) { /* ... */ } │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ │ createElement = function ( ... ) { /* ... */ } │ │
│ └──────────────────────────────────────────────────────┘ │
│ onload = null │
└──────────────────────────────────────────────────────────┘
┌ script ──────────────────────────────────────────────────┐
│ │
│ // JavaScript ... │
│ window.onload = function ( ... ) { │
│ │
│ // ... can generate CSS ... │
│ const style = document.createElement ('style') ; │
│ style.innerText = 'div { color:red; }' ; │
│ document.head.appendChild ( style ) ; │
│ │
│ // ... as well as HTML ... │
│ const div = document.createElement ('div' ) ; │
│ div.innerHTML = '<u><i><b>hello world</b></i></u>' ; │
│ document.body.appendChild ( div ) ; │
│ │
│ } ; │
│ │
└──────────────────────────────────────────────────────────┘
-->
Appendix I : "Binary operations" ...
Computers represent numbers using 'ones-and-zeroes'. We call this sytem 'binary'. Each 'one' and 'zero' is called a 'bit' ( binary-digit ) . Binary operations enable us to carry out actions on bits.
<script>
const zero = { hexadecimal:0x0 , decimal: 0 , binary:0b0000 } ;
const one = { hexadecimal:0x1 , decimal: 1 , binary:0b0001 } ;
const two = { hexadecimal:0x2 , decimal: 2 , binary:0b0010 } ;
const three = { hexadecimal:0x3 , decimal: 3 , binary:0b0011 } ;
const four = { hexadecimal:0x4 , decimal: 4 , binary:0b0100 } ;
const five = { hexadecimal:0x5 , decimal: 5 , binary:0b0101 } ;
const six = { hexadecimal:0x6 , decimal: 6 , binary:0b0110 } ;
const seven = { hexadecimal:0x7 , decimal: 7 , binary:0b0111 } ;
const eight = { hexadecimal:0x8 , decimal: 8 , binary:0b1000 } ;
const nine = { hexadecimal:0x9 , decimal: 9 , binary:0b1001 } ;
const ten = { hexadecimal:0xa , decimal:10 , binary:0b1010 } ;
const eleven = { hexadecimal:0xb , decimal:11 , binary:0b1011 } ;
const twelve = { hexadecimal:0xc , decimal:12 , binary:0b1100 } ;
const thirteen = { hexadecimal:0xd , decimal:13 , binary:0b1101 } ;
const fourteen = { hexadecimal:0xe , decimal:14 , binary:0b1110 } ;
const fifteen = { hexadecimal:0xf , decimal:15 , binary:0b1111 } ;
function invertBits ( _a ) { return ( ~_a ) ; }
function shiftBitsLeft ( _a ) { return ( _a << ( 1 ) ) ; }
function shiftBitsRight ( _a ) { return ( _a >> ( 1 ) ) ; }
function binaryAND ( _a,_b ) { return ( _a & _b ) ; }
function binaryOR ( _a,_b ) { return ( _a | _b ) ; }
function binaryXOR ( _a,_b ) { return ( _a ^ _b ) ; }
const array = [
function ( ) { return window.confirm ( ~ 5 ) ; } ,
function ( ) { return window.confirm ( 8 >> 3 ) ; } ,
function ( ) { return window.confirm ( 1 << 3 ) ; } ,
function ( ) { return window.confirm ( 5 & 10 ) ; } ,
function ( ) { return window.confirm ( 5 | 10 ) ; } ,
function ( ) { return window.confirm ( 15 ^ 10 ) ; } ,
] ;
let index = -1 ;
while ( ++index < array.length )
if ( array[index]( ) ) continue ; // ... continue loop
else break ; // ... or break loop
</script>
More info:
Mozilla Developers Network - JavaScript Guide
Appendix II : "Regular expressions" ...
Regular expressions provide a way of matching patterns in text. Sequences of numbers, specific symbols, line-breaks, can all be summarised into a symbolic form that the computer can use to recognise matching patterns in strings.
<script>
const string = "Mary Mary quite contrary, \n" +
"How does your garden grow? \n" +
"With silver bels and cockle shells, \n" +
"And pretty maids all in a row;" ;
function replaceBelsWithBells ( ) {
return string.replace ( /bels/ , "bells" ) ;
// ... Please note, forward-slash ( / ) boundary marks
// ... distinguish /regular expressions/ from "strings"
}
function checkIfPoemContainsJackOrJill ( ) {
const regularExpression = /(Jack)|(Jill)/g ;
// ... Please note, g at the end activates global test option
return string.test ( regularExpression ) ;
}
function getAllWordsThatRhymeWithGrow ( ) {
const regularExpression = /\b[\w]{1,}(ow)/gi ;
// ... Please note, i at the end activates case-insensitive match option
return string.match ( regularExpression ) ;
}
/*
REGULAR EXPRESSION CODES :
CHARACTERS:
\n - new-line
\s - space
\t - tab
\b - word boundary
\w - word character
\W - not word character
\d - decimal digit
\D - not decimal digit
\uxxxx - hexadecimal uni-code character identifier
. - any character except new-line
REPETITIONS:
* - zero or more
+ - one or more
{n} - n number of times
{n,} - n number of times or more
{n,N} - n to N number of times
GROUPS:
[abc] - a OR b OR c
(xyz)|(123) - xyz OR 123
OPTIONS:
g - global
i - case-insensitive
m - multi-line
*/
</script>
More info:
Mozilla Developers Network - Regular Expressions
Appendix III : "Scalable Vector Graphics" ...
Scalable Vector Graphics ( SVG ) is a mark-up language specifically for drawing shapes in a web-page. Its similarity to HTML makes it ideal for interacting with DOM objects, such as standard events, and animation.
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" style="fill:red;"/>
<!-- Please note, an SVG circle element's end-tag can be abreviated
using a forward slash ( / )
followed by a greater-than symbol ( > )
at the end of its start-tag
-->
</svg>
More info:
World Wide Web Consortium - Scaleable Vector Graphics (SVG) 1.1 (Second Edition)