Javascript Syntax

JavascriptSyntax.js

var intro = "Remove multiline comments to run the code therein"
var __version__ = "0.1"
document.write("Version:" +__version__)

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

function title1(name=""){
  document.write('<br/><h2>'+capitalize(name) + "</h2><br>")
  document.write("<hr>")
}

function title2(name=""){
  document.write('<br/><h3>'+name.toUpperCase() + ":</h3><br>")
  document.write("<hr>")
}

function title3(name=""){
  document.write('<br/><h4>'+name.toUpperCase() + ":</h4><br>")
  document.write("<hr>")
}

function newline(){
  document.write("<br/>")
}

function info(x){
  document.write('<br><h1>'+x+'</h1><br>')
}

function write(x){
  document.write(x+'<br>')
}


//--------------------------------------------------------

//TABLE OF CONTENTS
//--------------------------------------------------------
//WRTING
//INPUT
//OPERATORS
//COMMENTS
//VARIABLES
//FUNCTIONS
//CONDITIONALS
//LOOPS
//CLASSES
//MODULES

//INTERMEDIATE
//ADVANCED
//POPULAR LIBRARIES
//EXAMPLES

//*** BEGINNER ***
info("Beginner code follows this line")

//WRITING
/*
title1('writing')
//Write a String
document.write("Hello World")
//Write multiple strings
document.write("Hello","World")
//Join/Concatenate two strings
document.write("Hello"+"World")
//Printing numbers
document.write(27)
//Another way to write
console.log("Hello World") //Doesn't print to to page but in web console
//Write an empty line
document.write('<br>')
*/

//INPUT
title1('input')
/*
//Get input
prompt("What is your name")
*/

//OUTPUT
title1('output')
/*
//Set output
alert("Hello World")
*/

//OPERATORS
title1('operators')
/*
//Adding
write(1+2)
//Subtracting
write(4-3)
//Multiplying
write(3*3)
//Dividing
write(18/3)
//Remainder/Modulus
write(9%4)
//Power
write(2**8)
//Square Root
write(144**(1/2.0)) //must use at least one float
//Comparisons
write(2<4)
write(4>9)
write(5==6)
write(3==3)
write(4!=9)
*/

//COMMENTS/NOTES
// A comment is a note for future or peer reference. The // symbol turns a line into a comment. Comments are not recognized as code, and are often used to disable bits of code.

/*
This is a multiline comment. It can span multiple lines
*/

//VARIABLES
title1('variables')
/*
//Types

//Character
var at = "@"
write(at)

//String (wrapped in quotes)
var name = "Doctor"
write(name)

//Integer (no quotes)
var age = "32"
write(age)

//Float
var height = 6.3
write(height)

//Boolean
var is_cool = true
write(is_cool)

//Array/List
var empty_array = []
var colors = ['red','orange','yellow','green','blue','indigo','violet']
var numbers = [0,1,2,3,4,5,6,7,8,9]
var mixed_array = [9,'alpha',63.3,true]
var all = '' + empty_array+colors+numbers+mixed_array;
//https://stackoverflow.com/questions/8978405/joining-two-variables-in-javascript
write(all)

//Tuple
var loc = Object.freeze({ lat:0, long:0})
write(loc.lat)

//Dictionary
var dictionary = {key:"value"}
write(dictionary.key)

//Overwriting Variable
var is_cool=false
var name ="Tutorial Doctor"
var age = 1085 //in days
var height = 6.1
write(''+is_cool+name+age+height)

//Set a boolean to the opposite of itself
is_cool = ! is_cool
write(is_cool)

//Casting (change the type of a variable)
var x = (123).toString()
var y = String(123)

Number(x)

//Printing the type of a variable
write(typeof(x+y))

//Declare multiple variables at once
//var a,s,l = 29,'Male','Georgia'

//Setting multiple variables to same value at once
a=b=c = 45
write(a,b,c)
*/

//STRINGS
title1('strings')
/*
//Empty Strings
var first_name= ""
var last_name =''
var occupation = "Programmer"
//Assign value to a string
first_name= "Raphael"
last_name ='Smith'

//Adding strings(contatenating)
write(first_name+last_name)
//Adding a space between string variables
write(first_name+'\n'+last_name)
//Starting a new line (escape characters)
write(first_name+'<br>'+last_name)
//Escaping
//String Formatting (adding variables inside a string)
// Number Formatting
// Get an index of a string (indices start at 0)
// Indexing backwards
// Multiline-String
// More legal syntax

//String Functions
//Capitalized
var name ="raphael"
write(capitalize(name)) //This is custom. Not included
//Uppercase
write(name.toUpperCase())
// Lowercase
write(name.toLowerCase())
// Length of string
write(name.length)
// Split a string into individual words
var bio_words = 'hello'.split('*',5)
write(bio_words)
// Joining split words into a single string
// Replace items in a string
*/

//Integers
//Floats
//Arrays
//List Functions
//Dictionaries

//FUNCTIONS
title1('functions')
/*
function sum(a,b){
  write(a+b)
}
sum(2,4)

//Return
function product(a,b){
  return a*b
}
write(product(3,4))

//Local and Global Variables
var word = "BIG"
function change(){
  //Get the global variable
  //Change It
  world = 'small'
  write(world)
}
change()

//CONDITIONALS
title1('if, else if, else')
var age=18;

// If something..
if(age>18){
  write(age);
}
// Otherwise, if something else...
else if(age<18){
  write(age); 
}
//If anything else...
else{
  write('They are Equal');
}

// Swtich
var fruit = 'apple'
    
switch(fruit){
  case "banana":
    write('I hate bananas');
    break;
  case "apple":
    write('I love apples');
    break;
  case "orange":
    write('Oranges are okay');
    break;
  default:
    write('I love all other fruits');
    break;
}

//if(1 === 1){}//3 means == but data types have to match. 1 vs '1'
*/

//LOOPS
title1('loops')
/*
//For Loop

console.log('123')
for(var i=0;i<10;i++){
  console.log(i)
}
console.log('')

//While Loop
i = 0
while(i<10){
  console.log(i)
  i++
}

//For Each Loop
var numbers = [35,54,76,34,2,6];

numbers.forEach(function(number){
  console.log(number);
});

var numbers3 = [35,54,76,34,2,6];
for(i=0;i<numbers3.length;i++){
  console.log(numbers3[i]);
}
*/

// OBJECTS
title1('objects')
/*
    // Similar to Arrays
    
    //Object Literal
    var person ={
      firstName: "Brad",
      lastName: "Traversy",
      age: 34,
      children: [
        'Brianna','Nicolas'
      ],
      address: {
        street: '555 Something St.',
        city: 'Boston',
        state: 'MA'
      },
      fullName: function(){
        return this.firstName +" "+ this.lastName
      }
    }
    write(person.firstName)
    write(person.age)
    write(person.children[0])
    write(person.address.street)
    write(person.fullName())
    
    //Object Constructor
    // Another way
    // Not good f you want multiple types of fruit.
    var apple = new Object();
    apple.color = 'red'
    apple.shape = 'round'
    apple.describe = function(){
      return "An apple is the color "+this.color+" and is the shape "+this.shape
    }
    write(apple);
    write(apple.describe());
    
    // Constructor Pattern
    function Fruit(name,color,shape){
      this.name = name;
      this.color = color;
      this.shape = shape;
      this.describe = function(){
        return "A " +this.name+" is the color " + this.color + " and is the shape "+this.shape
      }
    }
    
    var apple = new Fruit('apple','red','round');
    write(JSON.stringify(apple));
    
    var melon = new Fruit('melon','green','round');
    write(JSON.stringify(melon));
    write(melon.color);
    write(melon.describe());
    
    //Arrays of Objects
    var users = [
      {
        name: 'John Doe',
        age: 30
      },
       {
        name: 'Mark Smith',
        age: 44
      },
       {
        name: 'Shelly Williams',
        age: 20
      }
    ]
    write(JSON.stringify(users));
    write(JSON.stringify(users[0]));
    write(users[0].name);
*/

//EVENTS
title1('events')

    function doClick(){
      alert('You Clicked!')
    }
    
    function changeText(id){
      id.innerHTML = "You Clicked Me 3";
    }
    
    function changeHeadingText(){
      var heading = document.getElementById('heading');
      heading.innerHTML = "You Changed Text";
    }
    
    function showDate(){
      var time = document.getElementById('time');
      time.innerHTML = Date();
    }
    
    function clearDate(){
      var time = document.getElementById('time');
      time.innerHTML = "";
    }


//CLASSES
title1('classes')
/*
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Person{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
}

var man = new Person('Joey',45)
write(JSON.stringify(man))

class Rectangle{
  constructor(height,width){
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);
write(square.area); // 100

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

write(Point.distance(p1, p2)); // 7.0710678118654755


class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined



function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object


//Subclassing with extends
class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    write(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    write(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

//SuperClass
class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    write(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    write(this.name + ' roars.');
  }
}

var l = new Lion('Fuzzy');
l.speak(); 
// Fuzzy makes a noise.
// Fuzzy roars.
*/

//MODULES

//*** INTERMEDIATE ***
info("Intermediate code follows this line")

//*** ADVANCED ***
info("Advanced code follows this line")


//FORMS
    function changeBackground(x){
      //write(x.value);
      var body = document.getElementById('body');
      body.style.backgroundColor = x.value;
    }
    
    // Form Validation
    function validateForm(){
      var firstName = document.forms['myForm']['firstName'].value;
      var lastName = document.forms['myForm']['lastName'].value;
      
      if(firstName == null || firstName == ''){
        alert('First Name is requried');
        return false;
      }
      
       if(firstName.length < 3){
        alert('First Name must be at least 3 characters');
        return false;
      }
    }
    
    function changeColor(x){
      //write(x.value);
      var heading = document.getElementById('heading');
      heading.style.color=x.value;
      document.getElementsByTagName('P')[0].style.color=x.value;
    }

//HTML TO SUPPLEMENT
/*
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="JavascriptSyntax.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
    <!-- jQuery library-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  
  <!---->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>

<body id="body" class="container">
  <h1 id="heading"></h1>
  <button onclick="doClick()">Click Me</button>
  <button onclick="this.innerHTML = 'You Clicked Me To'">Click Me 2</button>
  <button onclick="changeText(this)">Click Me 3</button>
  <button onclick="changeHeadingText()">Change Heading Text</button>
  <button onclick="showDate()">Show Date</button>
  <button onmouseout="clearDate()" onmouseover="showDate()">Show Date MouseOver</button>
  <h1 id='time'></h1>
  
<!--FORM-->
<form method="post" action="x.php" name="myForm" onsubmit="return validateForm()">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" id="firstName"/><br/>
  </div>

  <div>
    <label>Last Name</label>
    <input type="text" name="lastName" id="lastName"/><br/>
  </div>

  <div>
    <label>Background</label>
    <select name="background" id="background" onchange="changeBackground(this),changeColor(this)">
      <option value='red'>Red</option>
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
    </select>
  </div><br/>
  <input type="submit" value="Submit" /><br/>
</form>
<!--END FORM-->
  
</body>
  
</html>
*/