function myFunction() {
alert('hello');
}
//普通函数
/*
function() {
alert('hello');
}
*/
//匿名函数
var myGreeting = function() {
alert('hello');
}
myGreeting();
//可以通过这个定义一个函数，弹出一个警告框
myButton.onclick = function() {
alert('hello');
// I can put as much code
// inside here as I want
}
//通过点击触发函数
btn.onclick = displayMessage();
//当使用的是函数名()会在未点击的时候就弹出来一次，想要点击弹出来，需去掉括号 函数返回则return 函数只需在括号写定函数名，按顺序调用即可
/*
作用域:
<script src="first.js"></script>
<script src="second.js"></script>
<script>
greeting();
</script>
当first和second有相同名字的函数的时候，由于second后加载，边把first覆盖了，调用的是第二个函数
*/
var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);
panel.parentNode.removeChild(panel);
//先找到其父亲，再让父亲干掉儿子，儿子自己不能干掉自己
/*
下段代码使用了另一个名字叫做 Document.createElement() 的DOM方法，用来创建 <div> 元素并且把该新建元素的引用（实际上是新建对象的地址）放在一个叫做 panel的变量中。
这个元素将成为我们的消息框的外部容器。
然后我们又使用了一个叫做 Element.setAttribute() 的DOM方法给panel元素添加了一个值为msgBox 的class 类属性。
这样做方便我们来给这个元素添加样式 — 查看CSS代码你就知道我们使用.msgBox 类选择器来给消息框和消息内容设置样式。
html需要通过之前的类选择器将其选上
最后，我们还使用了一个叫做 Node.appendChild() 的DOM方法，给 html变量（我们之前定义好的）追加了我们设置好样式的panel元素 。
该方法追加了元素的同时也把panel<div>元素指定为<html>的子元素 。
这样做是因为我们创建了一个元素之后这个元素并不会莫名其妙的出现在我们的页面上（浏览器只知道我们创建了一个元素，但是不知道把这个元素怎么呈现出来）
— 因此，我们给这个元素了一个定位，就是显示在html里面！
isNAN(num) 判断是否不是数字，真则不是数字
*/
//一些事件
//点击事件，也可以写函数名在后面
function random(number){
return Math.floor(Math.random()*(number+1));
}
btn.onclick = function(){
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
/*
btn.onfocus及btn.onblur — 颜色将于按钮被置于焦点或解除焦点时改变（尝试使用Tab移动至按钮上，然后再移开）。
这些通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。
btn.ondblclick — 颜色将仅于按钮被双击时改变。
window.onkeypress, window.onkeydown, window.onkeyup — 当按钮被按下时颜色会发生改变. keypress 指的是通俗意义上的按下按钮 (按下并松开)
而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开. 注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。
btn.onmouseover 和 btn.onmouseout — 颜色将会在鼠标移入按钮上方时发生改变, 或者当它从按钮移出时
*/
//监听事件
btn = document.querySelector('button');
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.addEventListener('click', bgChange);
btn.removeEventListener('click', bgChange);//删除监听
//当点击时，调用该函数，当想要多个函数同时监听一个，使用onclick则会被后者覆盖，只有使用addEventListener
//表单阻止
var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');
form.onsubmit = function(e) {
if (fname.value === '' || lname.value === '') {
e.preventDefault();
//阻止表单提交
para.textContent = 'You need to fill in both names!';
}
}
/*
这里我们用一个onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）来实现一个非常简单的检查，用于测试文本字段是否为空。
如果是，我们在事件对象上调用preventDefault()函数，这样就停止了表单提交
*/
videoBox.onclick = function() {
videoBox.setAttribute('class', 'hidden');
};
video.onclick = function() {
video.play();
};
//捕获与冒泡，当我们点击了video，video注册了监听器，执行。然后查看父元素，父元素也注册了监听器，执行，然后隐藏了
/*
当一个事件发生在具有父元素的元素上(例如，在我们的例子中是<video>元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。 在捕获阶段：
浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。
在冒泡阶段，恰恰相反:
浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
*/
video.onclick = function(e) {
e.stopPropagation();
video.play();
};
//在默认现代浏览器，一般是以冒泡为显示，可以阻止冒泡
/*
当用循环来遍历时，需要注意这个
function display(e) {
var imgSrc = e.target.getAttribute('src');
show(imgSrc);
}
用e.target获得需要的东西
修改特定盒子的属性，也是document.querySelectAll(),获得对象然后再修改该对象
*/
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.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()
//用此可以来调用他
//对象可以包含一个对象，只需要通过多个.运算符调用即可
person.name.first
person['name']['first'];
//两种方法效果一样
person['eyes'] = 'hazel';
//可以用此来创建新对象,但必须用[]表示法
function People(name) {
this.name = name;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
};
}
var people1 = new People('lne');
//使用Object创建对象
var animal = new Object();
animal.name = 'just';
animal['age'] = 10;
animal.greeting = function(){
alert("Hi I'm " + this.name);
}
var person1 = new Object({
name : 'Chris',
age : 38,
greeting : function() {
alert('Hi! I\'m ' + this.name + '.');
}
});
var dog = Object.create(animal);
//也是一种创造实例对象
var cat = Object.create(dog);
//以dog为原型对象，创造cat
person2.constructor;
//返回的是原型的Person()的构造器
var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
//因此可以用实例对象的构造器，再创建一个实例对象
person1.constructor.name;
//constructor 属性还有其他用途。比如，想要获得某个对象实例的构造器的名字，可以这么用
function doSomething(){}
doSomething.prototype.foo = "bar";
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";
/*
dosomething.prototype是dosomething的原型对象，让他的原型对象添加属性foo
他的实例对象会继承他以及他的所有原型对象，一直往上推，也就是说，祖宗和父元素的所有属性都会被继承
当查找一个实例对象的某个属性时，会先查找自身是否有该属性，如没有，则会一直往上查找
*/
//比如，我想让一个实例对象有新的方法，如果这个方法是通性，我们一般不在这个实例方法中添加
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';添加属性则不会
//-----继承
function Person(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
};
Person.prototype.greeting = function() {
alert('Hi! I\'m ' + this.name.first + '.');
};
function Teacher(first, last, age, gender, interests, subject) {
Person.call(this, first, last, age, gender, interests);
this.subject = subject;
}
//继承，teacher继承了person，在teacher中使用person.call函数，this以及参数带入，下面是增加的方法或者属性
//此处的this。传给call，标明this是teacher的，当继承的函数不需要任何参数时，只需要传一个this即可,Person.call(this);
//第二种继承方式
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
//让teacher的原型指向person的原型，但是此时teacher的构造函数也会是person的，因此需要将teacher的构造函数修改会自己
//想给该类添加方法和属性。必须向函数原型添加
Teacher.prototype.say = function(){
alert("hello");
}
//json JSON 是一种纯数据格式，它只包含属性，没有方法。
/*
{
"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"]
//如上是一个json对象，同样通过名.参数名来调用参数值，或者名['参数名']来调用，如果其参数是一个对象，同样继续通过下层方式获取值
//json数组 [{},{},{}]
//如何从服务器中获得json
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';//也可以设置为text，获取的便是文本类型的对象
request.send();
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}
/*
为了载入 JSON 到页面中，我们将使用 一个名为XMLHTTPRequest的API（常称为XHR）。
这是一个非常有用的 JavaScript 对象，使我们能够通过代码来向服务器请求资源文件(如：图片，文本，JSON，甚至HTML片段)
意味着我们可以更新小段内容而不用重新加载整个页面。这将有更多响应页面，
然后打开一个新的请求
设置格式为json
发送请求
设置一个方法来处理载入请求的操作 request.onload = function(){}
*/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
