15-前端开发之JavaScript

什么是 JavaScript ?

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

Java和Javascript有什么关系？

答：区别就像印度和印度尼西亚的区别，只是名字中有点相同的部分，其他没什么关系。

为什么学习 JavaScript ?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为

编写 JavaScript

JavaScript 代码存在形式

<!-- 方式1:导入外部js文件 -->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式2:直接在当前文件写js -->
<script type"text/javascript">
    Js代码内容
</script>

JavaScripts 代码存放位置

• HTML的head中
• HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

定义变量

JavaScript中变量的声明是一个非常容易出错的地方，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">

    // 全局变量：可以在脚本中的任何位置被引用。
    name = 'seven';

    function func(){
        // 局部变量：只存在于声明它的那个函数内部。
        var age = 18;

        // 全局变量
        gender = "男"
    }
</script>

PS：JavaScript中代码注释：

• 单行 //
• 多行 /* */

注意：此注释仅在Script块中生效。

数据类型

JavaScript 中的数据类型分为原始类型和对象类型：

• 原始类型
  • 数字
  • 字符串
  • 布尔值
• 对象类型
  • 数组
  • 「字典」
  • 其他……

特别要注意的是：数字、布尔值、null、undefined、字符串是不可变的。

null 、undefined

• null 是js语言的关键字，它表示一个特殊值，常用来描述「空值」。
• undefined 是一个特殊值，表示变量未定义。

1. 数值（Number）

JavaScript中不区分整数值和浮点数值，所有数字均用浮点数值表示。

var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
parseInt("1.2");  //将某值转换成数字，不成功则NaN
parseFloat("1.2");  //将某值转换成浮点数，不成功则NaN

特殊值：

• NaN，非数字。可使用 isNaN(num) 来判断。
• Infinity，无穷大。可使用 isFinite(num) 来判断。

2. 字符串(String)

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

var name = "Alex";
var name = String("Alex");
var ageStr = String(18);

常用功能：

obj.length                           长度
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

3. 布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写。

var status = true;
var status = false;
var status = Boolen(1==1)

• == 比较值相等
• != 不等于
• === 比较值和类型相等
• !=== 不等于
• || 或
• && 且

4. 数组

JavaScript中的数组类似于Python中的列表

var names = ['dave', 'john', 'eric']
var names = Array('dave', 'john', 'eric')

常用方法：
    添加
        obj.push(ele)                   //追加
        obj.unshift(ele)                //最前插入
        obj.splice(index,0,'content')   //指定索引插入
    移除
        obj.pop()                       //数组尾部获取
        obj.shift()                     //数组头部获取
        obj.splice(index,count)         //数组指定位置后count个字符
    替换
        obj.splice(index,1,'content')
    切片
        obj.slice(start,end)
    合并
        newArray ＝ obj1.concat(obj2)
    反转
        obj.reverse()
    字符串化
        obj.join('_')   //将数组元素连接起来以构建一个字符串
    长度
        obj.length
    排序
        obj.sort( ) 

关联数组
var items = Array();
items["name"] = "computer";
items["year"] = 2000；
items["running"] = false;
//不推荐这样使用。
//本质上，在创建关联数组时，你创建的是Array对象的属性。在JavaScript中，所有的变量实际上都是某种类型的对象。因此，理想状态下，不应该修改Array对象的属性，而应该使用通用的对象（Object）来表达这种情形。

5. 字典

字典是数组的一种特殊形式

dict1 = {'k1':123,'k2':234} #定义一个字典
Object {k1: 123, k2: 234}
dict1['k1']
123

条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

// if条件判断
if(条件){
   ···
}else if(条件){
   ···
}else{
   ···
}
// switch条件判断
switch(name){
    case '1':
        age = 123;
        break;
    case '2':
        age = 456;
        break;
    default :
        age = 777;
}

循环语句

JavaScript中支持三种循环语句，分别是：

// 第一种：
var names = ["eric", "tony", "rain"];

for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

// 第二种：
var names = ["eric", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

// 第三种
while(条件){
    // break;
    // continue;
}

异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

PS: 主动跑出异常 throw Error('xxxx')

函数

JavaScript中函数基本上可以分为一下三类：

// 普通函数
    function func(arg){
        return true;
    }

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

---

DOM 编程

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

PS:一般说的JS让页面动起来泛指JavaScript和Dom.

选择器

直接查找

document.getElementById('id') 根据ID获取一个标签，然后我们可以进行操作。

下面的例子，当我们打开浏览器的时候，「周杰伦」就会被修改为「周润发」。

<body>
    <div id="i1">
        周杰伦
    </div>
    <script type="text/javascript">
        var i = document.getElementById('i1');
        i.innerText = '周润发';
    </script>
</body>

下面几中选择器也可以实现：

document.getElementsByName          // 根据name属性获取标签集合
document.getElementsByClassName     // 根据class属性获取标签集合
document.getElementsByTagName       // 根据标签名获取标签集合

间接查找

innerText
innerHTML

var obj = document.getElementById('nid')
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>q1mi</h1>"      # 设置HTML内容

特殊的：
    input系列
    textarea标签
    select标签
    value属性操作用户输入和选择的值

操作

1、内容

innerText
innerHTML

var obj = document.getElementById('nid')
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>Tesla</h1>"      # 设置HTML内容

特殊的：
    input系列
    textarea标签
    select标签
    value属性操作用户输入和选择的值

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

3、class 操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "Joy"
tag.className = "c1"
tag.href = "http://www.jd.com/"

// 方式二
var tag = "<a class='c1' href='http://www.jd.com/'>Joy</a>"

b.操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById('i1')

obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

注册 事件