javascript-MDN学习笔记

本文主要是介绍javascript-MDN学习笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

2017年02月22日

1.快速入门

1.1JavaScript first steps

number类型和string类型的互换：

var myString = '123';
var myNum = Number(myString);

var myNum = 123;
var myString = myNum.toString();

常用的string方法：

（1）indexof()：可以用来判断一个string中是否包含另一段string。

如果包含返回第一个字符的位置，不包含返回-1。

if(browserType.indexOf('mozilla') !== -1) {// do stuff with the string
}

（2）slice()：可以从string中抽取指定位置的字符串，并返回这个新字符串。

允许只包含起始位置

browserType.slice(0,3);代表从0开始，到2结束（不包括3）。

browserType.slice(2);代表从2开始，到最后。

Array和String类型的转换：

split()和join()方法。

向Array中添加/删除元素：

push、pop、unshift、shift：

push和pop向数组的末尾添加或删除，unshift和shift向数组的开头添加或删除。

------------------------------------------------------------------------------------------------------------------------------------

匿名函数：（MDN推荐匿名函数主要使用在事件中。）

function() {alert('hello');
}

匿名函数经常与事件绑定在一起使用

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

匿名函数还可以赋值给一个变量：

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

要激活此函数需要输入：

myGreeting();

这样是无法激活的：

myGreeting;

----------- ----------- ----------- ----------- ----------- ----------- ----------- ----------- ----------- ----------- ----------- -----------

函数作用域问题：

当在函数内定义变量时，从外部或是别的函数内部都无法得到此变量。

全局变量在任何地方都可以使用。

以下html中从外部引入了两个js，但每个js都有一个greeting()方法，此时只能访问到

second.js中的greeting，因为它复写了first.js中的。

<script src="first.js"></script>
<script src="second.js"></script>
<script>greeting();
</script>

// first.js
var name = 'Chris';
function greeting() {alert('Hello ' + name + ': welcome to our company.');
}

// second.js
var name = 'Zaptec';
function greeting() {alert('Our company is called ' + name + '.');
}

以下函数只会报一个错误：即z is not defined。因为报此错误后不再往后执行了。

function a() {var y = 2;output(z);
}function b() {var z = 3;output(y);
}
function output(value) {var para = document.createElement('p');document.body.appendChild(para);para.textContent = 'Value: ' + value;
}
a();
b();

在函数内调用函数：

	以下会报错：myValue is not defined。

	即使myValue的定义和subFunction的调用在一个范围内，但是依然

    不能读取myValue的值。

function myBigFunction() {var myValue;subFunction1();subFunction2();subFunction3();
}function subFunction1() {console.log(myValue);
}function subFunction2() {console.log(myValue);
}function subFunction3() {console.log(myValue);
}
	以下不会报错，因为subFunction和myValue的定义是在一个作用域内的。
function myBigFunction() {var myValue="heo";function subFunction1() {alert(myValue);}subFunction1();
}
myBigFunction();
------------------------------------------------------------------------------------------------------------------------------------
对于以下两段代码：第二个是错误的使用。
	函数后边的括号其实是让此函数立即执行。所以第二段在刷新页面时就会执行。
btn.onclick = displayMessage;
btn.onclick = displayMessage();
此时若引用的是带有参数的函数，则：
	将displayMessage函数放在一个匿名函数中，保证不会立即调用 。

btn.onclick = function() {displayMessage('Woo, this is a different message!');
};

------------------------------------------------------------------------------------------------------------------------------------
事件(event)：并非javascript的核心语言，是其提供的API。
如何给时间添加event listener（即执行事件的语句）：

1、添加事件属性：

btn.onclick = function() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}

或：

function bgChange() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
}btn.onclick = bgChange;

2、在html中添加属性（不要再这么用le）

<button onclick="bgChange()">Press me</button>

3、使用addEventListener()和removeEventListener()

主要优势：1、可以使用removeEventListener()删除执行代码

  2、可以添加多个执行代码

添加事件：

var 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.addEventListener('click', function() {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;
});

删除事件：

btn.removeEventListener('click', bgChange);

方法1和方法3的区别：

如下方法1所示。myElement只会响应functionB函数。因为复写了functionA函数。

myElement.onclick = functionA;
myElement.onclick = functionB;

如下方法3所示。 myElement会连续调用functionA和functionB。

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

------------------------------------------------------------------------------------------------------------------------------------
注意：以下代码中的e（也可以用evt/event）。代表事件对象（event object）。
	而代码中的e.target是event对象的target属性，
     target属性总是指代刚刚发生某事件的元素（这里就是这个button）
（always a reference to the element that the event has just occurred upon. ）
function bgChange(e) {var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';e.target.style.backgroundColor = rndCol;console.log(e);
}  btn.addEventListener('click', bgChange);

------------------------------------------------------------------------------------------------------------------------------------

捕获阶段和冒泡阶段：（以click为例）

捕获：先检查最外层的元素<html>是否具有click，若有执行。再移到下一级父元素并检查是否有click,有执行。直到真正到达被点击的元素。

冒泡：先检查真正被点击的元素是否有click事件，有执行。再检查父元素，直到检查至<html>元素。

现代浏览器默认是“冒泡”。想改变为“捕获”，可以通过设置addEventListener()函数的第三个参数为true。

可以通过stopPropagation()取消：

video.onclick = function(e) {e.stopPropagation();video.play();
};

冒泡阶段允许我们执行 事件代理

例：在li元素中，希望点击每一个li元素都弹出一个对话框。则将click事件设置在ul元素上。

这篇关于javascript-MDN学习笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---