MDN-web开发

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'
var myArray = myData.split(',');
myArray.length;    myArray[0];
var myNewString = myArray.join(',');
Array.toString()

for (initializer; exit-condition; final-expression) {
  // code to run
}

initializer
while (exit-condition) {
  // code to run

  final-expression
}

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');

var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');

var myNumber = Math.random()

function random(number) {
  return Math.floor(Math.random()*number);
}

myButton.onclick = function() {
  alert('hello');
}

var myGreeting = function() {
  alert('hello');
}

var person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

person.age
person.interests[1]

person['age']
person['name']

name : {
  first : 'Bob',
  last : 'Smith'
},

person.age = 45
person['name']['last'] = 'Cratchit'

person['eyes'] = 'hazel'
person.farewell = function() { alert("Bye everybody!") }

function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function () {
    alert('Hi! I\'m ' + this.name + '.');
  }
  return obj;
}

var salva = createNewPerson('salva');
salva.name;
salva.greeting();

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}
//调用构建函数创建新的实例
var person1 = new Person('Bob');
var person2 = new Person('Sarah');

person1.name
person1.greeting()
person2.name
person2.greeting()

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
};

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

person1.name.first
person1['age']
person1.interests[1]
person1.bio()

var person1 = new Object();

person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
}
//还可以将对象文本传递给Object() 构造函数作为参数， 以便用属性/方法填充它。
var person1 = new Object({
  name : 'Chris',
  age : 38,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});

var person2 = Object.create(person1);

person2.name
person2.greeting()

//定义一个构造器函数：
function Person(first, last, age, gender, interests) {
  
  // 属性与方法定义
  
};
//创建一个对象实例：
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
//JavaScript 控制台输入 "person1."
person1.valueOf()

var person2 = Object.create(person1);
//create() 实际做的是从指定原型对象创建一个新的对象
person2.__proto__
//结果返回 person1 对象

person1.constructor
person2.constructor
//将返回 Person() 构造器

var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
// constructor 属性的末尾添加一对圆括号（括号中包含所需的参数），从而用这个构造器创建另一个对象实例

person3.name.first
person3.age
person3.bio()

//如果你刚好因为某些原因没有原始构造器的引用，那么这种方法就很有用了

instanceName.constructor.name
person1.constructor.name
//获得某个对象实例的构造器的名字

Person.prototype.farewell = function() {
  alert(this.name.first + ' has left the building. Bye for now!');
}
//为构造器的 prototype 属性添加一个新的方法
person1.farewell();
//整条继承链动态地更新了，任何由此构造器创建的对象实例都自动获得了这个方法

function Person(first, last, age, gender, interests) {

  // 属性与方法定义

};

var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);

Person.prototype.farewell = function() {
  alert(this.name.first + ' has left the building. Bye for now!');
}
//继承模型下，上游对象的方法不会复制到下游的对象实例中；
//下游对象本身虽然没有定义这些方法，但浏览器会通过上溯原型链、从上游对象中找到它们。
//这种继承模型提供了一个强大而可扩展的功能系统。

Person.prototype.fullName = 'Bob Smith';
//很少看到属性定义在 prototype 属性中，因为如此定义不够灵活
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
//本例中 this 引用全局范围，而非函数范围。
//访问这个属性只会得到 undefined undefined。
//但这个语句若放在先前定义的 prototype 的方法中则有效
//因为此时语句位于函数范围内，从而能够成功地转换为对象实例范围。

// 构造器及其属性定义

function Test(a,b,c,d) {
  // 属性定义
};

// 定义第一个方法

Test.prototype.x = function () { ... }

// 定义第二个方法

Test.prototype.y = function () { ... }

// 等等……

//定义了一些属性的Person构造器
function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};
//所有的方法都定义在构造器的prototype上
Person.prototype.greeting = function() {
  alert('Hi! I\'m ' + this.name.first + '.');
};

//定义 Teacher() 构造函数
function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

function Brick() {
  this.width = 10;
  this.height = 20;
}

function BlueGlassBrick() {
  Brick.call(this);

  this.opacity = 0.5;
  this.color = 'blue';
}

Teacher.prototype = Object.create(Person.prototype);

//我们用这个create函数来创建一个和Person.prototype一样的新的原型属性值
//（这个属性指向一个包括属性和方法的对象），
//然后将其作为Teacher.prototype的属性值。
//这意味着Teacher.prototype现在会继承Person.prototype的所有属性和方法。

//现在Teacher()的prototype的constructor属性指向的是Person()
//这是因为我们生成Teacher()的方式决定的。

//将其正确设置
Teacher.prototype.constructor = Teacher;
//输入Teacher.prototype.constructor就会得到Teacher()

Teacher.prototype.greeting = function() {
  var prefix;

  if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
    prefix = 'Mr.';
  } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
    prefix = 'Mrs.';
  } else {
    prefix = 'Mx.';
  }

  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};

//范例尝试
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');

teacher1.name.first;
teacher1.interests[0];
teacher1.bio();
teacher1.subject;
teacher1.greeting();

//前面三个进入到从 Person() constructor 继承的属性和方法
//后面两个则是只有 Teacher() constrcuort 才有的属性和方法

{
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

superHeroes.hometown
superHeroes["active"]
//简单地链式访问（通过属性名和数组索引）
superHeroes["members"][1]["powers"][2]

1、首先我们有变量名 superHeroes，储存对象 。
2、在对象中我们想访问 members 属性，所以我们使用 ["members"].
3、members 包含有对象数组，我们想要访问第二个元素，所以我们使用 [1].
4、在对象内，我们想访问 powers 属性，所以我们使用 ["powers"].
5、 powers 属性是一个包含英雄技能的数组。我们想要第三个，所以我们使用[2].

[
  {
    "name" : "Molecule Man",
    "age" : 29,
    "secretIdentity" : "Dan Jukes",
    "powers" : [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name" : "Madame Uppercut",
    "age" : 39,
    "secretIdentity" : "Jane Wilson",
    "powers" : [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

//保存一个即将访问的 URL 作为变量
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

//创建一个Http请求
var request = new XMLHttpRequest();

//使用 open() 函数打开一个新的请求
request.open('GET', requestURL);
//需要两个强制参数：
//HTTP 方法，网络连接时使用。这个示例中 GET 就可以了，因为我们只要获得简单的数据。
//URL，用于指向请求的地址。我们使用之前保存的变量。

//设定 responseType 为 JSON
request.responseType = 'json';
request.send();

//服务器的返回数据，然后处理它
request.onload = function() {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');
  myH1.textContent = jsonObj['squadName'];
  header.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
  header.appendChild(myPara);
}

function showHeroes(jsonObj) {
  var heroes = jsonObj['members'];
      
  for(i = 0; i < heroes.length; i++) {
    var myArticle = document.createElement('article');
    var myH2 = document.createElement('h2');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');
    var myList = document.createElement('ul');

    myH2.textContent = heroes[i].name;
    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
    myPara2.textContent = 'Age: ' + heroes[i].age;
    myPara3.textContent = 'Superpowers:';
        
    var superPowers = heroes[i].powers;
    for(j = 0; j < superPowers.length; j++) {
      var listItem = document.createElement('li');
      listItem.textContent = superPowers[j];
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

//使用变量代指了 <canvas> 元素, 然后对其调用 getContext() 从而我们获得一个开始画画的环境。
//存储以上操作结果的变量（ctx）是一个对象，直接代指 canvas 上的一块允许我们绘制 2D 图形的区域。

//返回一个这两个数字之间的一个随机数。
function random(min, max) {
  var num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}

//通过一个对象实例化
//x 和 y 坐标 — 小球在屏幕上最开始时候的坐标。坐标的范围从 0 （左上角）到浏览器视窗的宽和高（右下角）。
//水平和竖直速度（velX 和 velY）— 我们会给每个小球一个水平和竖直速度。
//实际上，当我们让这些球开始运动时候，每过一帧都会给小球的 x 和 y 坐标加一次这些值。
//color — 每一个小球会有自己的颜色。
//size — 每一个小球会有自己的大小 — 也就是小球的半径，以像素为单位。
function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}
//画小球,小球的原型加上 draw( ) 方法
Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
}
//首先，我们使用 beginPath()来声明我们现在要开始在纸上画一个图形了。
//然后，我们使用 fillStyle 来定义这个形状的颜色我们把这个加到小球的颜色属性。
//接下来，我们使用 arc() 方法来在纸上画出一段圆弧。有这些参数：
//x 和 y 是 arc 中心的坐标 — 也就是小球的中心坐标。
//arc 的半径 — 小球的半径。
//最后两个参数是开始和结束的角度，也就是圆弧对应的夹角。
//这里我们用的是 0 和 2 * PI，也就是 360 度
//最后，我们使用 fill() 方法，也就是声明我们结束了以 beginPath()开始的绘画,
//并且使用我们之前设置的颜色进行填充。 

//创建一个小球实例
var testBall = new Ball(50, 100, 4, 4, 'blue', 10);

testBall.x
testBall.size
testBall.color
testBall.draw()

//更新小球的数据
Ball.prototype.update = function() {
  if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }

  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }

  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }

  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }

  this.x += this.velX;
  this.y += this.velY;
}

//让球动起来
var balls = [];

function loop() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
  ctx.fillRect(0, 0, width, height);

  while (balls.length < 25) {
    var ball = new Ball(
      random(0,width),
      random(0,height),
      random(-7,7),
      random(-7,7),
      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
      random(10,20)
    );
    balls.push(ball);
  }

  for (var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
  }

  requestAnimationFrame(loop);
}

//loop（）函数做了下面的事情：
//1、将整个画布的颜色设置成半透明的黑色。使用  fillRect() 
//2、当且仅当小球数量小于 25 时，将 random( ) 函数产生的数字传入新的小球实例从而创建一个新的小球，并且加入到数组中
//3、遍历数组中的所有小球，并且让每个小球都调用 draw( ) 和 update( ) 函数来将自己画出来，并且再接下来的每一帧都按照其速度进行必要的跟新。
//4、使用 requestAnimationFrame() 方法再运行一次函数，
//当一个函数正在运行时传递相同的函数名，从而每隔一小段时间都会运行一次这个函数，从而得到一个平滑的动画效果。
//这主要是通过递归完成的 — 也就是说函数每次运行的时候都会调用自己，从而可以一遍又一遍得运行。

loop();

//增加撞击侦察
Ball.prototype.collisionDetect = function() {
  for (var j = 0; j < balls.length; j++) {
    if (!(this === balls[j])) {
      var dx = this.x - balls[j].x;
      var dy = this.y - balls[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < this.size + balls[j].size) {
        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
      }
    }
  }
}

//1、每个小球，我们都要检查其他的小球是否和当前这个小球相撞了。
//为了达到此目的，我们构造另外一个循环来遍历数组中的小球。
//2、一个条件判断来检查当前遍历的小球是否与当前的小球相同。
//3、用了一个常见的算法来检测两个小球是否相撞了，
//两个小球中心的距离是否小于量小球的半径之和。
//4、如果两个小球真的相撞了，会运行 if 下的代码。
//我们会将两个小球的颜色都设置成随机的一种。

//在 balls[i].update() 加上下面的代码：
balls[i].collisionDetect();

var _this = this;
window.onkeydown = function(e) {
    if (e.keyCode === 65) {
      _this.x -= _this.velX;
    } else if (e.keyCode === 68) {
      _this.x += _this.velX;
    } else if (e.keyCode === 87) {
      _this.y -= _this.velY;
    } else if (e.keyCode === 83) {
      _this.y += _this.velY;
    }
  }