JavaScript详解

1 JavaScript介绍

JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释
执行代码，不进行预编译。

2 HTML与javaScript结合方式

使用js的三种方式

2.1 行内脚本

1. 点击按钮（触发）
2. 弹框（具体的操作）

2.2 内部脚本

1. 使用
2. 标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置 外，
   内部，都可以。

2.3 外部脚本

1. 在项目根目录下创建一个目录js
2. 在js目录中创建一个文件，后缀名是.js
3. 在html页面中，使用<script src="js/xx.js"></script>

以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

3 JavaScript的使用

3.1 变量

• 因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
  输入打印语句：console.log()
  显示在浏览器控制台：F12

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

• 数据类型转换函数
  parseInt：强制转换成整数
  parseFloat：强制转换成浮点数
  typeof：查询数值当前类型，返回 string / number / boolean / object
  如果不能转换，则返回 NaN
  
  
• null 与 undefined
  
  
• 逻辑运算符与控制语句（同java）

3.2 常用字符串API

• length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号
• toUpperCase/toLowerCase :转大小写
• charAt(下标) ： 返回某个下标上的字符
• indexof(字符)：查找字符串中字符出现的首次下标
• lastIndexof(字符)：查找字符串中字符最后一次出现的下标
• substring(开始,结束)：截取字符串中一部分（结束是不包含的）
• replace(旧的,新的)：将字符串中的旧字符替换成新字符
• split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

3.3 数组

• 初始化数组的三种方式

• 1定义数组，按下标赋值
• 2定义数组同时赋值
• 3直接[]赋值，所有类型均可

• 数组的常用方法
  tostring()：将数组转换成字符串
  join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串
  concat(新元素)：将原来的数组连接新元素，原数组不变。
  slice(开始，结束)：在数组中提取一部分，形成新的数组。
  reverse()：数组的反转（倒序）
  sort()：数组排序
  arr.sort() 字符排序
  arr.sort(func) 数值排序

var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
} 

3.4 Math数学对象

没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法
Math.random()； Math.floor();

3.5 Number对象

Number.fixed(2);———>保留两位小数， 自带四舍五入技能，需要创建Number

var a = new Number(3.14159);
        var b = a.toFixed(2);
        console.log(b);//3.14

3.5 正则表达式

var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
console.log("验证通过！");
} else {
console.log("格式错误");
}

3.7 日期对象

new Date();获取当前日期时间
通过get——获取部分值

3.8 函数

使用关键字 function 定义函数
无/有返回值

function qiuhe(a, b) {
var he = a + b;
//return "两数之和：" + he;
console.log("两数之和：" + he);
}
qiuhe(3,4);
//console.log( s );

参数对象
在函数内部，调用参数列表的属性

function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}

• 构造函数
• 匿名函数
• 全局函数
  isNaN：检查其参数是否是非数字值
  eval：用来转换字符串中的运算
  encodeURI 转码
  decodeURI 解码

闭包

3.9 弹框输出

• 页面输出 document.write("<h2>我爱你中国</h2>");
• 确认框 confirm
• 输入框 prompt

4 DOM 操作

在一个html页面中，会使用很多标签来规划制作页面。每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
DOM是查找的方法——文档对象模型，树结构

4.1 dom访问

• getElementById：通过id属性获得元素节点对象
  案例：当帐号为空时，阻止表单提交
• getElementsByName：通过name属性获得元素节点对象集
  案例：购物车全选效果
• getElementsByTagName：通过标签名称获得元素节点对象集
  案例：表格隔行变色

4.2 dom修改

document.getElementById ≠ getElementsById