Coding in JS - Lesson 1

by onejdc

HTML

<h1 class='center'>Lesson 1 - Javascript Introduction</h1>

CSS

/* https://meta.discourse.org/t/is-it-possible-to-show-line-numbers-in-code-block/204178/8 */

html, body { margin: 0; padding: 0; background-color:black;}
h1 { display:block;  color: rgb(0,228,150);text-align:center;}

.center { display:flex;justify-content:center;align-items:center; height:90vh;}

JavaScript

//======================================================================
// 							Introduction to Javascript, Part 1
//======================================================================

// This is a comment. Anything after the slashes is ignored

/* 
	This is a comment
    that can span
		 multiple lines
*/

// The purpose of a program is to tell a computer what to do.
// Often, this is by giving the program commands (INPUT) and having the program
// give us something back (OUTPUT).

// Examples of INPUT: typing on the keyboard, a mouse click, reading in a file
// Examples of OUTPUT: The browser console, a terminal window, a Windows window, a file


/* 
	Javascript can be run in lots of places, but I like JSFiddle. 
	It includes easy access to a console, and while it doesn't support writing to a file,
	you can output to a webpage (based on the code you have in the HTML tab) 
*/
	
// Let's start learning some key concepts


//--------------------------------------------------------------------
// Statements, WhiteSpace, Blocks
//--------------------------------------------------------------------


//----------------------------------
// Statements
//----------------------------------
//	Code written in javascript is in the form of statements. Statements usually end with a semicolon (;) but this is not strictly required:

let x = 1;
x = x + 1;


//----------------------------------
// Whitespace
//----------------------------------
// Whitespace is largely ignored in Javascript. However, if you have function definition or 
// function call, you should avoid spaces between the name and the parenthesis:

// this whitespace is ignored:
	if ( x     >  1){console.log('something');}
	
// but don't do this:  
//                     v
       function myFunc  (){}

//----------------------------------
// Blocks
//----------------------------------
// Sections of code that can be grouped together are often 'blocks' and you can tell
// them because they have opening...