java script 菜鸟教程_JS 基础知识之菜鸟教程（2016-09-30）

//2016-09-30 重读菜鸟教程上JS教程同时摘录重要知识点

1.JavaScript 输出几种方式：

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

2.字面量就是常量，变量是可变的可通过变量名来访问。

3.JavaScript 语句向浏览器发出的命令！例如：告诉浏览器向 id="demo" 的 HTML 元素输出文本 "你好 Dolly"

document.getElementById("demo").innerHTML = "你好 Dolly";

4.如果重新声明 JavaScript 变量，该变量的值不会丢失：

var carname = 'Volvo'

var carname;

console.log('carname='+carname)//carname=Volvo

5.创建数组的三种方式

方式1：类似java

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

方式2：类似java

var cars=new Array("Saab","Volvo","BMW");

方式3：json格式创建(推荐)

var cars=["Saab","Volvo","BMW"];

6.创建对象，json方式(推荐)

var person={

firstname : "John",

lastname : "Doe",

id : 5566

};

取值：

var firstname = person.firstname;

var firstname = person['firstname'](推荐)

7. JavaScript 对象是拥有属性和方法的数据。属性就是眼睛能看到的东西类似化学中的物体的物理性质

例如：汽车的属性，颜色，品牌，型号，合资与否等等属性(汽车参数配置中的都是属性)

汽车的方法，就是这个东西能干什么? 上路开，刹车，载人等等方法

8.如果变量在函数内没有声明(没有使用 var 关键字)，该变量为全局变量。(这个是错误的我测试过)

function fun() {

carname = 'BMW'

console.log("carname++++"+carname)

}

console.log("carname---"+carname)//提示undefined

fun();

9.局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。

10.HTML 事件是发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为！

浏览器页面加载完成， onload

HTML元素改变， onchange

按钮被点击 onclick

11.

现在的时间是??

现在的时间是? //this代表的是button标签对象

12. 字符串创建2种方式

推荐：var x = "John"; typeof x // 返回 String

var y = new String("John"); typeof y // 返回 Object

alert(x===y)//false,3等号是绝对相等，数据类型&&值都必须相等，switch(c)用的是就是3等！！！

alert(x==y)//true, 2等号是相对相等，值相等即可，不考虑数据类型

13.For/In 循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};

var txt = '';

for (x in person){// x 为 fname lname age

txt += person[x];

}

console.log(txt)//JohnDoe25

14. js中的类型

typeof "John" // 返回 string

typeof 3.14 // 返回 number

typeof NaN // 返回 number

typeof false // 返回 boolean

typeof [1,2,3,4] // 返回 object,数组是一种特殊的对象类型

typeof {name:'John', age:34} // 返回 object

typeof function () {} // 返回 function

var person = null; // 返回 object 值为 null(空)

typeof myCar // 返回 undefined (如果 myCar 没有声明)

null === undefined // false

null == undefined // true

15. JavaScript 类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

JavaScript 数据类型： string number boolean object function null undefined

String(Date()) ||Date.toString()//将日期转换为字符串,这个叼！！！

Number("3.14") // 返回 3.14

Number(" ") // 返回 0

Number("") // 返回 0

Number("99 88") // 返回 NaN

Number(false) // 返回 0

Number(true) // 返回 1

Number(new Date()) // 返回 1404568027739

new Date().getTime()// 返回 1404568027739

16.自动类型转换

16.1：当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null // 返回 5 null 转换为 0

"5" + null // 返回"5null" null 转换为 "null"

"5" + 1 // 返回 "51" 1 转换为 "1"

"5" - 1 // 返回 4 "5" 转换为 5

16.2：当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法

// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"

// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"

// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

17. JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

if (typeof myObj !== "undefined" && myObj !== null) //正确

if (myObj !== null && typeof myObj !== "undefined") //错误，抛出异常

18.表单验证，当onsubmit为true才会提交表单

姓:

function validateForm(){//验证账号不能不输入

var x=document.forms["myForm"]["fname"].value;

if (x==null || x==""){

alert("姓必须填写");

return false;

}

}

function validateFormEmail(){//验证邮箱

var x=document.forms["myForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos=x.length){

alert("不是一个有效的 e-mail 地址");

return false;

}

}

19.JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。

JSON.parse(jsonStr) //JSON 字符串---》 JavaScript 对象。

JSON.stringify(jsonObj) //JavaScript ---》JSON 字符串。

20. href="#"定位锚点 与href="javascript:void(0)"死链接

点我没有反应的!

点我定位到指定位置!

...

尾部定位点

21. 函数创建的两种方式，函数必须调用才会执行

方式1：var x = function (a, b){return a * b}; //匿名函数赋值给了变量，那么可以通过变量名来访问

方式2：function x(a, b){return a * b};

方式3：var x = new Function("a", "b", "return a * b"); //内置的 JavaScript 函数构造器(Function())严重不推荐

调用：

var z = x(4, 3);

22. 自调用函数 ---(函数)();

(function(){var x = "hello"; alert(x)})();

23.隐式参数对象 Arguments

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {

var i, sum = 0;

for (i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

24.this关键字，this指向函数执行时的当前对象

1).当函数没有被自身的对象调用时， this 的值就会变成全局对象,在web浏览器中全局对象是window对象

function myFunction(){return this;}

myFunction(); // 返回 window 对象 ，默认等于window.myFunction();

var myObject = {

firstName:"John",

lastName: "Doe",

fullName: function() {

return this.firstName + " " + this.lastName ;//谁调用了funnName方法，this就是谁！此处this就是myObject

}

}

document.getElementById("demo").innerHTML = myObject.fullName(); //我调用了fullName方法

2).使用new调用函数，如果函数调用前使用了 new 关键字, 则是调用了构造函数，创建一个新对象，新对象会继承构造函数的属性和方法

// 构造函数:

function myFunction(arg1, arg2) {

this.firstName = arg1;

this.lastName = arg2;

}

var x = new myFunction("John","Doe");

x.firstName

3). call() 和 apply() 是预定义的函数方法

var myObj = [1,2,3];

var myObj = '';

var myObj = {name: "ckang", money: 8888888}; //我测试的三个对象都可以

function myFunction(a, b) {

return a * b;

}

console.log(myFunction.call(myObj,10,2));

function myApplyFunction(a, b) {

return a * b ;

}

var args = [50,2];

console.log(myApplyFunction.apply(myObj,args))

25. JavaScript 闭包

计数器困境：全局变量，任何方法都能访问都可以随意更改，局部变量counter不能自加！

局部变量计数

计数

0

function myFunction() {document.getElementById("demo").innerHTML = add();}

var add = (function () {

var counter = 0;

return function () {

return counter += 10;

}

})();

实例解析：

1.自我调用函数只执行一次，初始化计数器为0；

2.add 变量 = function(){return counter+=10;} 即return回来的东西给了变量add，如果想要结果那么需要调用变量指向的匿名函数

3.这就是闭包

26. HTML DOM (文档对象模型) 本质是一棵树 Document,RootElement,Element,Attribute,Text

当网页被加载时，浏览器会创建页面的文档对象模型

DOM树：Document --Root element -- Element(head(title(text)),body(a(attribute,text),h1(text)))

js可以改变所有的HTML元素及其属性，CSS样式，所有事件作出反应。

27. 事件 默认冒泡 userCapture = false

1.事件传递方式：冒泡和捕获

冒泡: 如果用户点击p，p的事件先被触发，后触发div的点击事件

捕获：与冒泡相反！

同个元素添加不同类型的事件：注意不能要on

element.addEventListener("mouseover", myFunction);

element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseout", myThirdFunction);

移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

跨浏览器解决方法：

var x = document.getElementById("myBtn");

if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本

x.addEventListener("click", myFunction);

} else if (x.attachEvent) { // IE 8 及更早版本

x.attachEvent("onclick", myFunction);

}

28.JavaScript HTML DOM 元素(节点)

1. 创建新HTML元素

这是一个段落

这是第二个段落

var new_p = document.createElement("p");//

var new_p_text = document.createTextNode("我是新建段落的文本");//我是新建段落的文本

new_p.appendChild(new_p_text);//

我是新建段落的文本

var div = document.getElementById("div1")

div.appendChild(new_p);//将

我是新建段落的文本

放到div中

2. 删除已有的HTML元素 两种方式

第一种

div.removeChild(document.getElementById("p2"))//删除p2元素，从父级元素删除子元素

第二种：先找到需要被删除的元素，然后找到它的父node，再删除！(推荐)

var p1 = document.getElementById("p1")

p1.parentNode.removeChild(p1);

29.JavaScript 基于 prototype，而不是基于类的。

30.JavaScript Window - 浏览器对象模型BOM

1.获取浏览器窗口的宽度和高度的通用方法 1904 ： 997

function getWindowWidth() { //该例显示浏览器窗口的高度和宽度：(不包括工具栏/滚动条)

return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

}

function getWindowHeight() { //该例显示浏览器窗口的高度和宽度：(不包括工具栏/滚动条)

return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

}

2.screen

var screenW = screen.availWidth;//1920

var screenH = screen.availHeight;//1040