【Web】JavaScript-入门

1_变量

无需指定类型，任何类型都可以用var声明，变量类型由赋值时的类型决定，声明后类型可以改变。

简单类型：String,Number,Boolean,Null,Undefined

对象类型：Object,Array,Function

typeOf：获取变量的类型

2_运算符

1. = 和 == 和 ===

   =：赋值

   ==：忽略类型比较

   ===：先比较类型，再比较值

2. &&、||

   a && b：若a是false，返回a，否则返回b（找false）

   a || b：若a是true， 返回a，否则返回b（找true）

3_函数

3_1_定义

1. 普通函数

function 函数名([参数1，参数2...]){
    return 值;// 可选，没有返回值默认返回undefined
}

2. 匿名函数

var 变量名 = function([参数1，参数2...]){
    return 值;
}

3. 箭头函数

()=>{方法体};

3_2_调用

普通函数：函数名（参数1，参数2...）
匿名函数：变量名（参数1，参数2...）

把匿名函数作为变量的值传递给a函数，在a函数中来调用

4_数组

js中数组不会出现数组越界的情况，数组不是定长的

• 创建数组对象

var arr = new Array();

• 静态初始化

var arr1 = new Array("a", "b", "c");
var arr2 = new Array(1, 2, 3, 4);

• 动态初始化

var arr3 = new Array(3);// 建议不写

• 字面量

var arr4 = ["tom","jerry", "jack"];

数组遍历

1. for：最简单，使用频率最高

for (var i=0; i<arr.length; i++) {}

2. forEach

arr.forEach(function (item, index, array) {
            // item 数组元素
    		// index 索引
    		// array 数组本身
        })

3. map遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回

let newArr = arr.map(function (item, index) {
            return item + index;
        });
        console.log(newArr);

4. for-in(可以遍历数组和对象)

// 遍历数组
var arr = ["a", "b", "c"];
for (var i in arr){
    console.log(i);// i是索引
    console.log(arr[i]);
}
// 遍历对象
var person = {name: "Tom", age: 20};
for (i in person){
    console.log(i);// 属性名
    console.log(person[i]);// 属性值
}

5_面向对象

构造函数

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sleep = function(){
        //函数体
    }
}
Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。

创建对象

var p = new Person("xxx", 20);
// 可以访问p.name,p.age, p.sleep(8);

快捷方式创建对象

var p = {name:"xxx", age:20};

6_DOM

6_1_获取元素

时间点：元素加载到document中之后才能获取

怎么获取：三种方式：

getElementById

getElementsByTagName

getElementsByClassName

6_2_元素节点的属性操作

6_2_1_操作标准属性

• 获取属性值

ele.属性名

ele[“属性名”]

ele.getAttribute(“属性名”)

• 设置属性值

ele.属性名=值

ele[“属性名”]=值

ele.setAttribute(“属性名”, 值)

6_2_2_操作自定义属性

• 获取属性值

ele.getAttribute(“属性值”)

• 设置属性值

ele.setAttribute(“属性名”,值)

6_3_Node对象的属性和方法

属性：firstChild/lastChild/childNodes/previousSibling/NextSibling/parentNode 

方法：hasChildNodes()/appendChild(node)/replaceChild(node)/removeChild(newNode, oldNode)/insertBefore(newNode, refNode)/复制结点：cloneNode(true)

7_事件

7_1_form表单事件

属性	描述
onblur	元素失去焦点时触发
onchange	元素改变时触发
onfocus	获取焦点时触发
onsubmit	提交时触发

7_2_事件绑定方式

1. 在标签中使用“onxxx"属性绑定

<input type="button" value="fuckme" onclick="alert('fuck');" />

2. 通过元素对象的属性（id,class等）绑定

html:
<input type="button" value="fuckme" id="btn"/>
javascript:
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("fuck");
}

注意：

1. 引入方式

引入JavaScript代码的两种方式不能糅杂使用

• 方式一：

index.js

alert("xxx");

hello.html引入

双标签
<script type="text/javascript" scr="index.js"></script>

• 方式二：script 标签可以存放在 html 标签中的任何位置，但是推荐写在 head标签里面。

<script>
	<!--js代码-->
</script>

appenChild和removeChild操作数组元素特殊性

当把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点，用for in遍历结果也是一样的。想正常的删除全部节点的话，我们应该从后面往前删除，代码如下：
for(var i = childs.length - 1; i >= 0; i--) {
  f.removeChild(childs[i]); 
}
我们从索引最大值开始删除，采用递减的方法，这样索引便不会移动改变了。
或者：
在循环前获取长度，在循环时长度就不会变化了
let len = childs.length;
for(var i = 0; i < len; i++) {
  f.appendChild(childs[i]); 
}