* javascrips.js

high-level, interpreted programming language

array.js

forEach vs map
forEach() — executes a provided function once for each array element
map() — creates a new array with the results of calling a provided function on every element in the calling array

* forEach
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt = txt  + index + " " + value  + "<br>"; 
}

//ouput
0 45
1 4
2 9
3 16
4 25

* map
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
  return value * 2;
}

90,8,18,32,50

* filter
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return index < 3;
}

90,8,18,32,50

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value < 10;
}

4,9

* reduce(like yield)
each array element to produce (reduce it to) a single value
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
  return total + value;
}

The sum is 99

loop_setTimeout.js

var doSettimeout = (i)=> {
   setTimeout( () => alert(i), 1000);
}

for(var i=0; i<3; i++){
   doSettimeout(i);
}

react_form.js

import React, { Component } from 'react';

class Form extends Component {
  constructor(props){
    super(props)

    this.state= {
      name: "",
      password: ""
    }
    this.handleNameChange= this.handleNameChange.bind(this);
    this.handlePasswordChange= this.handlePasswordChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this);
  }

  handleNameChange(event){
    this.setState({
      name: event.target.value
    });
  }

  handlePasswordChange(event){
    this.setState({
      password: event.target.value
    });
  }

  handleSubmit(event){
    alert("handleSubmit " + this.state.name + "  "+ this.state.password);

    event.preventDefault();
  }

  render() {
    return (
      <div>

        <form onSubmit= {this.handleSubmit} >
          <label>
            name
            <input type="text" name="name"  onChange={ this.handleNameChange}/>    
            password
            <input type="text" name="password"  onChange={ this.handlePasswordChange}/>     
          </label>

          <input type="submit"/>
        </form>

        {this.state.name}
        <br/>

        {this.state.password}

      </div>
    );
  }
}