Cool Javascript

<button type="button" class="entry" onclick="coinDisplay.src='1917d-ob-sm.png' ">Heads</button>
<button type="button" class="clear" onclick="coinDisplay.src='1917d-re-sm.png' ">Tails</button>

CSS Styling Reference

Outputbox

.entry { width: 150px; height: 30px; background-image: -webkit-linear-gradient(80deg, #008080, #000000, #008080); color: #ecd8b8; border-radius: 15px; font-weight: bold; font-size: 14px; }

.clear { width: 150px; height: 30px; background-image: -webkit-linear-gradient(80deg, #ff0000, #ff0000, #000000, #ff0000, #ff0000); color: #ffffff; border-radius: 15px; font-weight: bold; font-size: 14px; }

.outputbox { width: 300px; height: 24px; background-image: -webkit-linear-gradient(80deg, #008080, #000000, #008080); color: #ecd8b8; margin: 0 auto; border: 2px solid #ff9d80; line-height: 24px; margin-bottom: 8px; }

Basics

JavaScript goes between HTML <script> javascript here </script> tags

HTML Buttons can execute javascript functions:
<button type="button" onclick="functionName()" >Button Text</button>

Bracket Types

( )	Round Brackets (parenthesis) process variables
[ ]	Square Brackets are used for arrays
{ }	Curly Brackets (braces) contain javascript code

Comments

// Comments follow two forward slashes on one line
/* Comments written between these */ , are useful for multiline comments
As in HTML, CSS, and SVG, JavaScript ignores multiple spaces, tabs, and line feeds

Statements

Semicolons ; MUST end all JavaScript statements.
Multiple statements on one line are allowed when each statement is separated by a semicolon.

let a = 5; let b = 6.33; let c = a + b;

Declaring Variables - const, let

Variables MUST be declared before they can be used.

const a = 3 ; // Constants MUST be given a value when they are declared

const a = [1,"a"] ; // Arrays MUST be given a value when they are declared

let a = 3 ; // declares a Variable and assigns a value

let a ; // declares a Variable

var a = 3 ; // this is older code DO NOT USE 'var'

JavaScript Variables that are declared outside of any function() or block { }
are Global Scope Variables that any function can access.

Identifiers

JavaScript identifiers are case sensitive
Hyphens are NOT allowed in JavaScript. Hyphens are reserved for subtraction only

The Best Practice for Identifiers is to use cameLcase which starts with a lowercase letter. Examples are:
firstName, lastName, visaCard, phoneNumber, expDate

let lastname, lastName; // declares 2 different variables

lastname = "Doe"; // assigns a string to lastname

lastName = "Lincoln"; // assigns a string to lastName

= assigns a value to a variable (NOT an equal sign)
This expression is valid in JavaScript: x = x + 5 // adds 5 to x (same as x += 5)

Using Functions

Function code template...

<script>
function functionName() {
// block of code to be executed
}
</script>

Function code example...

<script>
function myRoulette() {
wheelNum = Math.floor(Math.random() * 38);
if (wheelNum > 36) {wheelNum = "00";}
document.getElementById("wHeel").innerHTML = wheelNum ;
}
</script>

A function can be called called using...

onClick
<button type="button" onclick="myRoulette()" >Run Function</button>

onmouseover
<div onmouseover="myRoulette()" >div element</div>

'Streamlining' Javascript Code

Since the folowing code is used a lot, declare it as a variable:

Then it can be accessed so:

myDiv.innerHTML = "some text" + numbers ; // outputs to the div

myDiv.innerHTML = "" ; // clears the div

Display as Currency

myDiv = document.getElementById("someDiv") ;
let x ;
x = (x).toFixed(2) ;

myDiv.innerHTML = "$ " + x ;

Output Methods

.innerHTML

The above box is a <p> element with a border, assigned a class, and given an id

The box below is a <div> styled by a CSS class named .outputbox and assigned an id.

emoji display using .innerHTML=

😊 (😊)
Replace the &#x with 0x (no semicolon at end)
Treat the emoji code as a variable with no quotes
.innerHTML = String.fromCodePoint(0x1f60a) + " Input must be a positive number less than 1";

Using a <span> in Javascript

DO NOT USE <span> for .innerHTML directly inside <button> tags

✓ <span> tags must be inserted between quotes in the output string, the same as text.

✓ Use single quotes for the CSS style = 'definitions'.

ans1 = "<span class = 'red'>The answer is </span>" ; // shorter version
ans2 = "√<span style = 'text-decoration: overline;'> 2 </span> = 1.414" ; // shorter version
</script>

Fot the .innerHTML output, use the variables: myDiv.innerHTML = ans1 + ans2 ;

<button type="button" class="entry" onclick="print()">Print this page</button>

Input Methods & Alerts

Be Careful

The Alert() Method may be called alone OR within a function

Internal text formatting can be tricky

Also they can be annoying — use sparingly

Stand Alone

<button type="button" class="entry" onclick="myAlert()">Alert Box</button>

Error Checking Code with Alert

else if(isNaN(y)) {
alert("NOT a number! Try again." ) ;
document.getElementById("answerBox").innerHTML = """ + x + "" is NOT a number. Input MUST be a number." ; }

else { All remaining javaScript code . . . }
</script>

Input via Alert Box

let person = prompt("Please enter your first name:", "default answer" ) ;

Input via Confirm Box

let answer = confirm("Proceed with deposit?") ; // returns true or false

Input via Standard Text Box

<input type="text" id="textBox" value=" default text, if any" > // standard box, no class defined

Input via Standard Number Box

NOTE: type="number" comes with up ⁄ down buttons

if else else if and or

if() { } else { } else if() { }

if (condition) {
// block of code to execute if the condition is true
} else if (condition2) {
// block of code to execute if condition2 is true
} else {
// block of code to execute if the condition is false

else if and else are optional

Logic Conditionals:

The (condition) MUST be inside ( ). Options are:

== is equal to

>= is greater than or equal to

<= is less than or equal to

!= is not equal to

+= adds/concatenates the right side to the left side

&& and, compares two values, if both are true returns true

|| or, compares two values, if either is true returns true

Example:

Arrays

Define an Array as a constant outside of Block Scopes { }
Arrays are contained between square brackets [ ]
Constants cannot be redifined
Arrays can be added to with push() or reduced with pop()
Array terms can be numbers or strings. Strings are put inside quotes,e.g. "Tesla"
Spaces and line breaks are ignored.
Arrays are always indexed. The first term is index [ 0 ]

Array Elements by Index Number

Array elements are indexed starting at 0

array.includes() Method

To determine if an array contains a term use the Method array.includes()

To use a term in an array by index number

Modify an Array
array.push() Method array.pop() Method

const fruits = ["Banana", "Orange", "Apple", "Mango"] ;
fruits.push("Kiwi"); document.getElementById("idName").innerHTML = fruits;
fruits.pop("Apple"); document.getElementById("idName").innerHTML = fruits;

</script>

Result...

fruits = ["Banana", "Orange", "Mango", "Kiwi"] ; // "Kiwi" added with push(), "Apple" removed with pop()

Sorting an Array
array.sort() Method array.reverse() Method

const fruits = ["Banana", "Orange", "Apple", "Mango", 2, 3, 1] ;
fruits.sort(); document.getElementById("idName").innerHTML = fruits;
fruits.reverse(); document.getElementById("idName").innerHTML = fruits;

</script>

Results...

1) fruits = [1,2,3,"Banana","Kiwi","Mango","Orange"] ; // first sorts alphabetically
2) fruits = ["Orange","Mango","Kiwi","Banana",3,2,1] ; // then reverse sorts

Sorting Numbers in an Array
array.sort( function(a, b) {return a - b} )

const points = [40, 100, 1, 5, 25, 10] ;
points.sort( function(a, b) {return a - b} ); document.getElementById("idName").innerHTML = points;
points.reverse() ); document.getElementById("idName").innerHTML = points;

</script>

Results...

1) points = [1, 5, 10, 25, 40, 100] ; // first sorts ascending
2) points = [100, 40, 25, 10, 5, 1] ; // then sorts descending

Loops

When looping through any Array replace the actual length with arrayName.length

Unicode Characters in Text

Unicode Formats - always put in "quotes"
escape Unicode: " \u00a9 "
extended Unicode: " 🪐 "

function showChars() {
document.getElementById("unicodeBox").innerHTML = ""; // 1st clear the box
for (let i = 0; i < specialChars.length; i++) {
document.getElementById("unicodeBox").innerHtml += specialChars[ i ] + " " ;
}
}
</script>

Sample Unicode Characters

Egyptian Hieroglyphics Unicode Travel & Places

∫ ƒ(x) dx Mathematics

Math Calculations

Math.round()	Rounds up	(4.5) returns 5
Math.floor()	Rounds down	(4.5) returns 4
Math.ceil()	Rounds up next integer	(4.1) returns 5
Math.trunc()	Removes decimal part	(4.1) returns 4
Math.sign()	Returns 1, 0, -1	(4.5) returns 1, (-4.5) returns -1, (0) returns 0
Math.abs()	Absolute Value	(4.5) returns 4.5, (-4.5) returns 4.5, (0) returns 0
x.toFixed(n)	x to n decimal places	(n) returns x to n decimal places, rounded up
Math.PI	pi π	returns 3.141592653589793...
Math.PI.toFixed(5)	pi to 5 decimal places	returns 3.14159
Math.E	Euler's number e	returns 2.718281828459045...
Math.E.toFixed(5)	e to 5 decimal places	returns 2.71828
Φ = ( 1 + √5 ) ⁄ 2	Φ Golden Ratio	returns 1.618033988749895...
1 ⁄ Φ	Inverse Golden Ratio	returns 0.618033988749895...
Math.SQRT2	√2	returns 1.4142135623730951...
Math.SQRT1_2	√2 ⁄ 2	returns 0.7071067811865476... sin(45°) = cos(45°)
Math.sin(θ)	Returns sine	(θ in radians) returns sine of angle θ
Math.cos(θ)	Returns cosine	(θ in radians) returns cosine of angle θ
Math.tan(θ)	Returns tangent	(θ in radians) returns tangent of angle θ
Math.asin(n)	Returns arcsine	(n) returns angle θ in radians
Math.atan(n)	Returns arctangent	(n) returns angle θ in radians
Number.isInteger(x)	Returns true or false	useful in if () { } statements

Arithmetic Operators

JavaScript uses the basic arithmetic operators ( + - * / ) plus these...

** Exponentiation y = x ** 2 x²

** Exponentiation (square root) y = x ** .5 √x

** Exponentiation (more roots) y = x ** (1/3) ³√x cube root of x

++ Increment x = x++ adds 1 to x

-- Decrement x = x-- subtracts 1 from x

+= Concatenate¹ x += y concatenates y to x useful for strings in loops

% Modulus (division remainder) x = 5 % 2 returns 1 (5 ÷ 2 = 2 with remainder of 1)

For the Operation: y = 2 ** .5 ; can also be written: y = x ** (1/2) ;

¹ Concatenate - link together in a series, append to, from the Latin: concatenat

Radians ⭤ Degrees

degrees = (180 / π) x (radians) radians = (π / 180) x (degrees)

Φ Phi

Quadratic Equations

ax² + bx + c = 0

The Quadratic Equation is a second order equation
and therefore has
two solutions (roots) given by:

x = -b ± √b² - 4ac
2a

where a ≠ 0
𝒾 = √ -1

Drawing Canvas

Output to a Drawing Canvas

Define a Drawing Canvas

Canvas Origin (0,0) is the upper left corner x → y ↓

Correct Order of <script> Sequencing...

Access the canvas with ctx
ctx.beginPath();
set parameters - ctx.lineWith = 4; , ctx.strokeStyle = ("#123456"); , ctx.fillStyle = ("#123456");
enter type of path - moveTo(x₀,y₀); lineTo(x₁,y₁); rect(x₀,y₀,x₁,y₁); arc(x,y,r,0,2*Math.PI);
ctx.stroke();
ctx.fill();

Canvas - Add a Line

Canvas - Draw a Dashed Line

ctx.setLineDash([10, 5]) ; // dashes are 10px and spaces are 5px

Canvas - Draw a Rectangle

Canvas - Draw an Arc or Circle

ctx.arc(x center coord, y center coord, radius, start angle, end angle, direction) ;
direction is optional, false is default (clockwise), true is counter clockwise
Complete circle: 0 → 2*Math.PI

Canvas - Linear Gradient Fill

Canvas - Add Text

Text is anchored at its lower left corner

Canvas - Add Shadows

Clear the Canvas

Dates / Time

d = new Date();

Date objects are static
Dates are the NUMBER OF MILLISECONDS SINCE JANUARY 01, 1970
Dates, by default, output in full text string format
getMonth() method returns the month of a date as a number (0-11)
getDay() method returns the weekday of a date as a number (0-6)
Date.parse() returns milliseconds since January 1, 1970

Time Display

function startTime() {
intervalID = setInterval(getTimer,1000) ; // begins the intervals for calling "getTimer" function
}

function stopTimer() { // clears the intervalID, therefore stops calling the "getTimer" function
clearInterval(intervalID) ;
document.getElementById("timeBox").innerHTML = "";
}
</script>

Typewriter Text

Random Number Generator

// Returns a random integer from 0 to 9
Math.floor(Math.random() * 10);

Math.random() is used with Math.floor() to return random integers

Scroll to Bottom of a div
(Very Cool)

// place wheelNum in div and scroll to bottom - - - - -
myDiv.innerHTML += wheelNum + "<br>" ;
myDiv.scrollTop = myDiv.scrollHeight ;
</script>

CSS Overflow Options for a <div>

overflow: scroll; // always show scrollbars
overflow: hidden; // never show scrollbars nor allow scrolling

Toggle On/Off & Function Timer

Toggle Button - to repeat a Function at an Interval
iD = setInterval(functionName,milliseconds);
iD = clearInterval(iD);

This code requires TWO functions...

#1 A toggle function
ON - Sets the interval for myFunction
OFF - Clears the same interval
#2 myFunction

function myToggle() {
if (toGGle == 0) { interval_ID = setInterval(myFunction(),1000) ; toGGle = 1; more javascript ; }
else{ clearInterval(interval_ID) ; toGGle = 0; more javascript ; }
}

function myFunction() {
toGGle = 1;
// actual javascript to run repeating at the set Interval ;
}
</script>

Analog Clock

The Clock Face, Gears, and Hands are created using SVG
CSS is used to style and animate the elements
Javascript is written to actually run the Clock

let interval = setInterval(runTheClock, 1000) ;

function runTheClock() {
let d = new Date() ;
secPosition = 6 * d.getSeconds() ;
minPosition = 6 * d.getMinutes();
hrPosition = 30 * (d.getHours()%12) + (d.getMinutes()/2) ; // the clever bit

SECONDHAND.style.transform = "rotate(" + secPosition + "deg)" ;
MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)" ;
HOURHAND.style.transform = "rotate(" + hrPosition + "deg)" ;
}
</script>

Javascript Animations

1 - Create an Animation Container

ALL animations should be inside a container <div>

2 - Style the Elements

The container should use style = "position: relative"
The animation should use style = "position: absolute"

function frame() {
if (/* test for finished */) {clearInterval(id); }
else {
/* code to change the element style */
}
}
</script>

Cool Extras

Number → String String → Number

This is very useful for adding a leading zero to a number display.
7 → 07
Strings are indexed starting at index 0

Consider the number: 2468
We want to use the 'tens digit' numeral at index [2], which is 6

Reload Page

'Alien' Characters

Change CSS Styles

JavaScript can change the style of an HTML element.

Multiple style assignments are seperated by semicolons '1st coding here' ; '2nd coding here' ;

Code Fragments

document.body.style.backgroundColor = "#008080" ;

document.body.style.backgroundImage = "linear-gradient(45deg, #1d4949, #1d4949, #00cccc, #1d4949, #1d4949)" ;

let myDiv = document.getElementById("someDiv") ; // creates a useful shortcurt for myDiv

let x = myDiv.value ; // retrieves the value displayed in myDiv

onclick="myDiv.style.transform = "rotate( numBer + "deg" ) " ; " // rotates myDiv

onclick="myDiv.style.transform = "scale( 2.0,2.0) " ; " // scales myDiv

onclick="myDiv.style.color = '#00ffff' ;" // changes the color of text in myDiv - use single quotes inside double

onclick="myDiv.style.font = '30px times' ; " // changes the font in myDiv - use single quotes inside double

<button type="button" class="entry" onclick="functionName()" >Button Text</button> // activates the function

<button type="button" class="clear" onclick='document.getElementById("myDiv").innerHTML = "" '>Clear</button>

document.getElementById("myDiv").innerHTML = x + "px" ; // concatenates the individual values

let name = prompt("Please enter your first name:", "default value" ) ; // OK assigns name = default value

let answer = confirm("Proceed with deposit?") ; // returns true or false

function functionName() {
// block of code to be executed
}

const	a = 3 ;	// Constants MUST be given a value when they are declared
const	a = [1,"a"] ;	// Arrays MUST be given a value when they are declared
let	a = 3 ;	// declares a Variable and assigns a value
let	a ;	// declares a Variable
var	a = 3 ;	// this is older code DO NOT USE 'var'

let lastname, lastName;	// declares 2 different variables
lastname = "Doe";	// assigns a string to lastname
lastName = "Lincoln";	// assigns a string to lastName

==	is equal to
>=	is greater than or equal to
<=	is less than or equal to
!=	is not equal to
+=	adds/concatenates the right side to the left side
&&	and, compares two values, if both are true returns true
\|\|	or, compares two values, if either is true returns true

**	Exponentiation	y = x ** 2	x²
**	Exponentiation (square root)	y = x ** .5	√x
**	Exponentiation (more roots)	y = x ** (1/3)	³√x cube root of x
++	Increment	x = x++	adds 1 to x
--	Decrement	x = x--	subtracts 1 from x
+=	Concatenate¹	x += y	concatenates y to x useful for strings in loops
%	Modulus (division remainder)	x = 5 % 2	returns 1 (5 ÷ 2 = 2 with remainder of 1)