目录
前言
我们学完了html，css，可以做一个静态的网页，但是要想达到和用户有交互效果，还得借助于JavaScript，JavaScript可以做一些动态效果和一些和用户交互效果。建议大家每学完一个东西去复习，去多用，这样你才会遇到问题，才会知道哪些地方学的不够扎实，我之前就是因为囫囵吞枣的学完了JavaScript，看了JavaScript设计模式之后，才明白，我对JavaScript的理解远远不够。到实际开发时，怎么把代码写的更精简，怎么才能和团队更好的合作，自己写的函数以及方法和对象别人能不能调用？面向对象这个思想不是一两天就能理解透彻的，需要一段时间来磨合。当把面向对象思想理解清楚后，其余的语言差不多都是这个思想，再去学习一门新语言其实不是太难的。
1.JavaScript简介
1.什么是JavaScript
JavaScript 是一种功能强大的编程语言，简称JS。
用于开发交互式的Web页面和给页面添加动态效果。
JavaScript不仅可以运行在客户端，还可以运行在服务器端,比如：node.js。
2.Java与 JavaScript的关系
比较经典的回答有：Java 和 Javascript 的关系就像雷锋和雷峰塔，老婆和老婆饼，精卫和汪精卫的关系
Java与 JavaScript是完全不同的两种语言
相同之处：
JavaScript的语法借鉴了Java的语法
Java与 JavaScript都是面向对象的（虽然实现的方式略有不同）
Netscape之所以命名为 JavaScript：
1.JavaScript的语法借鉴了Java的语法，表示对Java的尊敬
2.是因为 Java是当时最流行的编程语言，带有 “Java” 的名字有助于这门新生语言的传播。
2.JavaScript语言特点
1.JavaScript是一种脚本(Script)语言
JavaScript与其他脚本语言一样,采用小程序段的方式实现编程。
2.JavaScript是一种解释性语言
JavaScript程序代码在运行过程中被逐行解释。
3.JavaScript是一种基于对象的语言
有关 JavaScript的对象特性， 将贯穿整套教程。
4.JavaScript是一种安全性语言
称为具有 Web安全特性，它不允许访问本地的硬盘，也不允许对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互。
5.JavaScript跨平台性
JavaScript的执行依赖于浏览器本身， 而与操作环境无关。只要是能运行浏览器的计算机，而该浏览器又支持 JavaScript，则脚本就可正确执行。
3.JavaScript基础内容
html内书写js代码和注释
js注释：
1.单行注释以 // 开头。
2.多行注释以 /* 开始，以 */ 结尾
3.HBuilder注释快捷键: ctrl+/
js代码书写方法
将JavaScript代码放在scrip中
外部引入和内部引入
1.内部引入
<script type="text/javascript">
alert("弹出框内容");
</script>
2.外部引入
<script src="js文件路径" type="text/javascript" charset="utf-8"></script>
3.行内引入
<button onclick="alert('弹出框内容3')">点击</button>
JavaScript语言书写注意事项：
js代码书写格式严格区分大小写，如果要输入符号，如逗号，分号等等，一律用输入法调成英文状态下输入。
输入输出工具
1.显示可提示用户进行输入的对话框,简称:输入弹窗。
2.弹出带有一条指定消息和一个确定按钮的警告框,简称:输出弹窗
3.输出到页面，会以ＨＴＭＬ的语法解析里面的内容
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 1.显示可提示用户进行输入的对话框,简称:输入弹窗。
// 语法: prompt(对话框中显示的纯文本,默认的输入文本);两个参数均为可选，第一个值是标题，第二个值是输入框的默认值。
//
prompt('请输入姓名：','user');
// 2.弹出带有一条指定消息和一个确定按钮的警告框,简称:输出弹窗
// 语法: alert(对话框中显示的纯文本);
alert('弹出框内容1');
// 3.输出到页面，会以ＨＴＭＬ的语法解析里面的内容
// 语法:document.write(参数1,参数2,参数3,...) ，它们将按顺序被追加到文档中。
document.write("输出到页面的内容");
</script>
</head>
<body>
</body>
</html>
输出到控制台调试工具
在控制台上输出的信息,浏览器按下 F12 打开控制台,Console 即控制台
可以接受任何字符串、数字和js对象，可以看到清楚的对象属性结构,不会阻塞程序的执行.
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 在控制台上输出的信息,浏览器按下 F12 打开控制台,Console 即控制台
// 可以接受任何字符串、数字和js对象，可以看到清楚的对象属性结构,不会阻塞程序的执行.
console.log("输出到控制台的内容");
var str = "输出到控制台的字符串变量";
console.log(str);
</script>
</head>
<body>
</body>
</html>
js对DOM树的阻塞：
1.DOM: js操作网页的接口，全称为“文档对象模型”(Document Object Model)。可以简单理解成页面中的元素。
2.DOM树:元素和元素之间的关系,可以简单理解成页面的结构。
3.js的执行会阻塞页面结构的加载,此时 DOM树是不完整的，这样在调用一些 js代码时就可能报错。
4.防止阻塞的两种方法:
a.把所有js代码放在body区域的最后
b.添加window.onload事件,表示网页加载完毕后(包括图片、css文件等等)执行的操作
window.οnlοad=function(){ 需要执行的JavaScript代码
}
js发生错误时的阻塞：
1.根据js执行顺序:按照语句出现的先后顺序执行,上一段代码执行完毕，才能执行下一段代码
2.如果一段代码出现错误，那么这段代码之后的代码都不能执行
3.根据浏览器控制台错误提示对错误进行调试
4.根据alert()的阻塞特征或者console.log()，可以对错误进行调试
4.变量以及数据类型
变量:从字面上看，变量是可变的量；从编程角度讲，变量是用于存储数据的容器，JavaScript 不管是字符串还是数值，或者浮点型等等，都用var声明，不像其他语言的数据类型分的很细节 ，其他语言的话，如java：int代表整型，float代表数值型，string代表字符型等等…。
1.先声明后赋值
var str;
str = “string_Content”;
2.边声明边赋值
var str = “string_Content”;
var wystr = “www.baidu.com”;
3.多变量一起声明(用 ,隔开)
var str,wystr;
str = “string_Content”;
wystr = “www.baidu.com”;
4.多变量一起声明一起赋值(用 ,隔开)
var str=“string_Content”,wystr = “字符串变量”;
输出语句验证
alert(wystr);
console.log(str);
JavaScript变量命名规范：
1.变量名只能以字母,_,$开头,余下的可以是字母,数字,_,$;
2.命名一定要有意义,要便于识别.可以是英文,拼音,但一定要有意义,变量名一定要见名知意，不要随便乱起，养成一个良好的习惯，如果自己以什么 a b c 等等字母为变量或者是函数名的话，不然你自己写的代码过段时间自己都看不懂，而且在工作时，一个团队之间的合作，别人看你的代码是非常脑壳疼的。（重点了解，为以后的自己写的代码易维护，便于团队合作）
3.代码变量，以及函数名常用规范
a.除第一个单词之外，其他单词首字母大写（常用于变量）(小驼峰命名法)
var myData;
b.每一个单词的首字母都采用大写字母（常用语类名，函数名，属性，命名空间
var MyDtat
c.所有字母均小写，每个单词间以下划线分割(下划线命名法)
var my_data
双引号和单引号以及分号的用法：
1.外单内双：’ “string” ’
2.外双内单：" ‘string’ "
错误用法：千万不能双引号里面再套双引号，或者单引号里面再套单引号
1. " “string” " (错误用法)
2. ’ ‘string’ ’ (错误用法)
如果这样的话编译时会直接报错，程序不能正常运行。
JavaScript的语句是以一个 ; 号为标记，代表这个语句已经结束
分号表示一段功能的结束
一段功能结束,有换行,可以不用分号
要求:不管有没有换行,一段功能的结束都用分号
多个js区块可以看作一个整体,也就是说:无论是内部引入或外部,有多少个js区块，js区块之间可以共享资源，可以相互调用资源 。
undefined和null类型的区别：
1、undefined
表示"缺少值"，就是此处应该有一个值，但是还没有定义
典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
2、null
表示"没有对象"，即该处不应该有值。
典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点
（3）空对象,表示什么也没有,连声明都没有
3.两者的值相等但是数据类型不一样
typeof undefined 输出： undefined
typeof null 输出： object
undefined = =null 返回值true
undefined ===null 返回false
JavaScript中 = =和===的区别
-
== 当左右操作数相等时返回true，如果两个操作数不是同一类型时，js会尝试将其转化为合适的类型，然后进行比较（比较的是两者之间的值）
-
===当左右操作数类型相等，并且值相等时，才会返回true，当左右两个操作数不是同一类型时，js不会转换其类型（比较两者的值而且数据类型得一样）
-
同理!= 和!==也是一样的原理
字符型和数值型：
1.number :数值类型.整数或小数(浮点数)
不要使用js做浮点运算，js浮点运算能力很差
var nume1=12; 整数
var nume1=12.52; 浮点型
2.string :表示字符串类型,凡是用引号包起来的都是字符串类型,不管里面是文字还是数字
var str = “This a String”; 字符型
boolean:布尔值.结果只有两种：true（真）或false（假）
当true和false相加？会等于多少呢？
true和false相加的结果为：1 而且数值类型为number
是不是很意外呢？因为true还可以用1表示，false可以用0表示
但是需要注意的是他们的值虽然相等但是数据类型是不一样的。
true===1 此时输出的结果就会为false true=1 输出结果为 ：true
object :对象类型,数组,函数，自定义对象 属于特殊的对象
变量的赋值：
JavaScript是弱类型语言：数据类型可以被忽略的语言。
同一个变量，后赋的值会覆盖先赋的值（只需要赋值记住一个新来就去的原则）
5.运算符的操作
1.加+,减-,乘,除/,取余%*
var a = 3+8; 结果为：11
var a = 6-2; 结果为：4
var a = 3*5; 结果为：5
var a = 12/3 结果为：4
2.自增++,自减- -
var a = 3;
a++; //4
++a; //4
var b = 5a++; //15 ++在后，先参与运算,再自增
var b = 5++a; //20 ++在前，先自增,再参与运算
a- -; //2
- -a; //2
var b = 5a- -; //15 --在后，先参与运算,再自减
var b = 5- -a; //20 --在前，先自减,再参与运算
字符串运算符,+连接,不是加法
var a = 1+“1”; 输出结果为 “11” 字符串
var str = “string”+“Name” 输出结果为：stringName
注意：只要运算对象中有一个值是字符串，那运算结果就会被转化为字符串类型，并且拼接起来
赋值运算：
1.基本的赋值运算符是=,一开始可能会以为它是“等于”，其实不是的,可以读作"等于"
赋值运算符实际上意味着把等号右边的值或表达式的值赋给等号左边的变量
var number = 25;
number = number+5;
+=先加后赋值
number += 10; //number = number+10; 35
-=先减后赋值
number -= 10; //number = number-10; 15
*=先乘后赋值
number = 10; //number = number10; 250
/=先除后赋值
number /= 10; //number = number/10; 2.5
%=先取余后赋值
number %= 10; //number = number%10; 5
1.关系（比较）运算符 : >、<、>=、<=、= =（等于）、!=（不等于）、= = =（全等）、!= =（全不等）
2.比较运算符的运算结果是布尔值(true或false)
3.>、<、>=、<=、= =（等于）、!=（不等于）:只比较值，不比较类型
4.= = =（全等）、!==（全不等）：既比较值，也比较类型
字符串的比较：
1.字符串会转成ASCII码值，再比较
2.字母越靠后越大,小写字母比大写字母大
3.从左到右比较，直到比较出结果
var b;
b = “a” > “b”; //false
b = “a” < “b”; //true
b = “c”<“y”; //true
b = “a”<“C” //false
b = “abc”>“Def” //true
b = “abc”<“aef” //true
逻辑运算符：&&（与）、||（或）、!(非)
逻辑运算符的运算结果有两个true或false。
&&：一个为假即为假
var b = 5>3 && 4<7; //true
var b = 5>3 && 4>7; //false
|| ：一个为真即为真
var b = 5>3 || 4>7 || 8<10; //true
!：非真即假
var b = !5>3; //false
三元运算符：
语法：条件 ? 为真时返回的数据 :为假时返回的数据
var c = a>20 && (a<60 || b>100) ? “真” : “假”;
真前假后原则
6.条件语句和循环语句
1.条件成立时执行，条件不成立不执行（ if（））
if(条件){
条件成立时要执行的代码
};
var a=96;
if( a>95){
document.write("压岁钱加倍");
}
2.条件成立时执行，条件不成立时也是执行（ if（）else{ } ）
if(条件) {
条件成立时要执行的代码
}else{
条件不成立时要执行的代码
};
var a=96;
if( a>95){
document.write("压岁钱加倍");
}else {
document.write("寒假作业一本");
}
3.if多条件判断写法
var a = prompt("语文成绩");
var b = prompt("数学成绩");
if( a>95 && b>96){
document.write("压岁钱加倍");
alert("作业没有");
}else {
document.write("寒假作业5本");
}
4.对条件进行多次判断，执行不同的代码
注意:条件可以有多个,可以做多件事（执行多段代码）if一般用于范围的判断
if(条件1){
条件1成立时要执行的代码
}else if(条件2){
条件2成立时要执行的代码
}else if(条件3){
条件3成立时要执行的代码
}else {
条件都不成立时要执行的代码
};
var results = prompt("请输入成绩");
if( results>90){
document.write("压岁钱加倍,作业没有");
}else if(results>80){
document.write("压岁钱加倍,作业练习册1本");
}else if(results>70){
document.write("压岁钱照旧,作业练习册2本");
}else if(results>=60){
document.write("压岁钱没有,作业练习册3本");
}else {
document.write("压岁钱没有,作业练习册4本");
};
switch语句：
switch判断:主要用于精确值的判断
var results= prompt("请输入日期")*1;
switch (results){
//()中是要判断的对象
case 8: //cresultsse是要判断的对象的值
document.write("食品8折");
breresultsk; //条件成立时结束后面的判断
case 18:
document.write("服装8折");
breresultsk;
case 28:
document.write("电器8折");
breresultsk;
default: //以上条件都不成立时执行此处代码
document.write("不打折");
break; //遇到break语句直接跳出判断
}
for循环：在循环次数确定的情况下使用
for循环:在给定条件下,反复执行同一段代码块;
for循环的规则:
01.先声明一个变量，赋初始值;
02.检测变量的值是否满足条件;
03.若满足条件,执行的代码块,不满足,终止循环;
04.变量自增或自减;
05.再检测变量的值是否满足条件;
06.反复以上规则执行,至条件不满足时终止
for循环语法:
for(声明变量=初始值; 变量和结束值作比较;怎样变化) {
要执行的代码块
};
for (var i=0; i<10; i++) {
document.write("hell word"+'</br>');
}
双层循环次数=外层循环的次数乘以内层循环的次数
双层循环打印99乘法表
for (var i=1;i<=9;i++) {
for (var a=1;a<=i;a++) {
var b=a+"X"+i+"="+(a*i)+" ";
document.write(b);
};
document.write("<br>");
}
while循环:在循环次数不确定的时候使用
while（循环条件）
{
需要执行的代码块
}
var a=1;
var b=Math.floor(Math.random() * (50 - 1)) + 1;
// document.write(b);
alert(b);
// while循环:
while(a<=b){
if (a==b) {
document.write("密码："+a+"-正确<br>")
} else{
document.write("密码："+a+"-不对<br>")
}
a++;
}
do while循环：
无论循环条件是否成立，先执行一次循环，然后第二次循环才会以判断条件是否成立来确定是否继续向下执行。
var a=1;
var b=Math.floor(Math.random() * (50 - 1)) + 1;
do{
document.write("密码："+a+"-不对<br>")
a++;
}while(a<b);
continue; 终止本次循环,开始下次循环,后面的代码不会执行
break; 在循环体中遇到该语句，直接结束循环
7.函数
什么是函数？
1、函数是一个可以多次使用的功能代码块，一个封闭的（空间），它可以在代码里随意调用。利用函数的封装可以减少重复代码的开发，提高代码的利用率。函数可以传参，利用函数内预先定义的内容对传入的不同数据参数进行处理。
2、函数也是对象，也可以为值，它可以存在于变量，数组和对象之中。
3、函数可以当参传递给函数，并且由函数返回，另外函数拥有属性。
4、函数总会有返回值（除了构造函数之外，构造函数默认返回构造器函数调用，当构造函数调用执行时，会显示返回）
1.基本方式定义函数:
通过 function 关键词进行定义，其后是函数名，括号 ()，大括号{}。
语法:
function 函数名(参数1,参数2,…){
要执行的代码(函数体)
};
fun();
function fun(){
alert("听音乐");
};
2.自面量方式定义函数(赋值法定义函数)
注意：这种方式，调用一定要在声明函数之后，否则会报错。
通过 function 关键词进行定义，其后，括号 ()，大括号{}。并赋值给一个变量
变量名就相当于函数名
var dfg = function (参数1,参数2,…){
要执行的代码(函数体)
};
var PlayGame = function (){
alert("玩游戏");
};
PlayGame();
利用函数封装99乘法表：
function MultiplicationTables (){
for (var i=1;i<=9;i++) {
for (var a=1;a<=i;a++) {
var b=a+"X"+i+"="+(a*i)+" ";
document.write(b);
};
document.write("<br>");
};
};
MultiplicationTables();
立即执行函数：不需要调用，执行到次函数，次函数立刻自己调用
(function MultiplicationTables(){
for (var i=1;i<=9;i++) {
for (var j=1;j<=i;j++) {
var um=j+"X"+i+"="+(j*i)+" ";
document.write(um);
};
document.write("<br>");
};
})();
函数中的形参和实参
形式参数：是指函数名后括号中的变量。因为形式参数只有在函数被调用的过程中才实例化（分配内存单元），所以叫形式参数。形式参数当函数调用完成之后就自动销毁了。因此形式参数只在函数中有效。
真实传给函数的参数，叫实参。实参可以是：常量、变量、表达式、函数等。无论实参是何种类型的量，在进行函数调用时，它们必须有确定的值，以便把这些值传送给形参。
function sun(x,y){
//x,y:形参,形式上的参数,没有实际值,形参只作用于函数内部
var and=x+y;
alert(and);
};
var a=10;
var b=30;
var c=40;
sun(a,b); //实参个数大于形参,函数可以执行
函数的返回值：
我们可以在函数的外部使用一个变量，来接收函数执行的结果，return后面就是需要返回的值。
function sum(x, y) {
return x + y;
};
var and = sum(15, 10);
document.write(and);
函数中的全局变量和全局变量：
1.函数外部声明的变量为全局变量,在整个js文档中都可调用;
2.函数内部用var声明的变量是局部变量,只能在函数内部调用;
3.函数内部不用var声明,直接赋值方式声明的变量是全局变量;
函数的几种调用方式：
第一种匿名函数:函数没有函数名，而是直接赋值给一个变量通过变量调用或直接调用
注意：函数的调用语句，必须放在函数声明语句之后！！！
var fun = function (){
alert("fun函数成功调用");
};
fun();
第二种匿名函数:
1.自调用
(function (a){
alert("玩游戏和"+a);
})("听音乐");
// 2.当事件发生时调用
window.onload= function (){
alert("页面结构加载完成");
};
3.函数中调用
setTimeout(function (){
alert("3秒时间已经到了");
},3000);
4.基本函数调用
function fn (){
alert("fn函数成功调用");
};
fn();
回调函数：把函数作为参数传递给另外一个函数，然后在另外一个函数调用
function GoToSchool( HaveClass2){
HaveClass2(); //相当于调用 HaveClass()这个函数
};
function HaveClass(){
alert("回调函数执行成功");
};
GoToSchool( HaveClass);
// GoToSchool:主函数,
// HaveClass:回调函数
递归函数
递归就是一个函数在它的函数体内调用它自身。执行递归函数将反复调用其自身，每调用一次就进入新的一层。递归函数必须有结束条件。
当函数在一直递推，直到遇到墙后返回，这个墙就是结束条件。
所以递归要有两个要素，结束条件与递推关系
注:递归的时候，每次调用一个函数，计算机都会为这个函数分配新的空间，这就是说，当被调函数返回的时候，调用函数中的变量依然会保持原先的值，否则也不可能实现反向输出。
递归函数计算1+2+…+100
function recursive(n){
if (n==1) //递归结束条件
{
return n
} else{
return n + recursive(n-1);
//lj(n-1) 再去调用本身，当计算出结果的时候一起返回，有一个压栈和弹栈的过程100-1,99-1减到1的时候结束递归
}
};
var sum= recursive(100);
alert(sum);
内置功能函数:
1.ECMAscript 自带的函数，ECMAscript将我们常用的一些功能封装起来
2.我们不需要知道他是怎么实现的，只需要知道怎么调用即可。
1.Number() 转换成数值类型
// var a = "123456";
// var b =typeof Number(a);
// alert(b);
// 2.String() 转换成字符串类型
// var a = 123456;
// var b =typeof String(a);
// alert(b);
// 3.Boolean() 转换成布尔类型
// var a ='a';
// var b =typeof Boolean(a);
// var c = Boolean(a);
// alert(c);
// 4.parseInt() 将字符串转换为整型
// var a = "F";
// var b =typeof parseInt(a);
// var c = parseInt(a);
// alert(b);
// alert(c);
// 5.parseInt() 将字符串转换为浮点型
// var a = "2x5";
// var b =typeof parseFloat(a);
// var c = parseFloat(a);
// alert(b);
// alert(c);
//6将小写英文转换为大写
var message = 'abcd';
alert(message.toUpperCase());
JavaScript内置功能函数表：
1、常规函数
2、数组函数
3、日期函数
4、数学函数
5、字符串函数
第一类：常规函数
(1)alert函数：显示一个警告对话框，包括一个OK按钮。
(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
(3)escape函数：将字符转换成Unicode码。
(4)eval函数：计算表达式的结果。
(5)isNaN函数：测试是(true)否(false)不是一个数字。
(6)parseFloat函数：将字符串转换成符点数字形式。
(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数：显示一个输入对话框，提示等待用户输入。
第二类：数组函数
(1)join函数：转换并连接数组中的所有元素为一个字符串。
(2)langth函数：返回数组的长度。
(3)reverse函数：将数组元素顺序颠倒。
(4)sort函数：将数组元素重新排序。
第三类：日期函数
(1)getDate函数：返回日期的“日”部分，值为1～31
(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，…，6表示星期六
(3)getHours函数：返回日期的“小时”部分，值为0～23。
(4)getMinutes函数：返回日期的“分钟”部分，值为0～59。见上例。
(5)getMonth函数：返回日期的“月”部分，值为0～11。其中0表示1月，2表示3月，…，11表示12月。见前面的例子。
(6)getSeconds函数：返回日期的“秒”部分，值为0～59。见前面的例子。
(7)getTime函数：返回系统时间。
(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
(9)getYear函数：返回日期的“年”部分。返回值以1900年为基数，例如1999年为99。
(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
(11)setDate函数：设定日期的“日”部分，值为0～31。
(12)setHours函数：设定日期的“小时”部分，值为0～23。
(13)setMinutes函数：设定日期的“分钟”部分，值为0～59。
(14)setMonth函数：设定日期的“月”部分，值为0～11。其中0表示1月，…，11表示12月。
(15)setSeconds函数：设定日期的“秒”部分，值为0～59。
(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数：设定日期的“年”部分。
(18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。
(19)setLocaleString函数：转换日期成为字符串，为当地时间。
(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。
第四类：数学函数
(1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。
(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。
(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。
(5)atan2函数：返回一个坐标的极坐标角度值。
(6)ceil函数：返回一个数字的最小整数值(大于或等于)。
(7)cos函数：返回一个数字的余弦值，结果为-1～1。
(8)exp函数：返回e(自然对数)的乘方值。
(9)floor函数：返回一个数字的最大整数值(小于或等于)。
(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。
(11)max函数：返回两个数的最大值。
(12)min函数：返回两个数的最小值。
(13)pow函数：返回一个数字的乘方值。
(14)random函数：返回一个0～1的随机数值。
(15)round函数：返回一个数字的四舍五入值，类型是整数。
(16)sin函数：返回一个数字的正弦值，结果为-1～1。
(17)sqrt函数：返回一个数字的平方根值。
(18)tan函数：返回一个数字的正切值。
第五类：字符串函数
(1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定
8.数组和对象
1.数组:一组数据的集合,数组的每一个数据叫做一个元素
2.数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组
3.JavaScript语言比较灵活，所以不用像其他语言一样，数组中的数据类型必须一致，数组中的数据类型可以是不同类型的数据。
数组的特点
1.数组:一组数据的集合,数组的每一个数据叫做一个元素
2.数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组
3.每个数组都具有一个length属性,length属性就是数组元素的个数(数组长度)
4.数组中每个元素在数组中有一个位置，以数字表示，称为索引(下标)
5.索引从0开始排列,[0]表示第一个数据,以此类推
6.数组最大的索引，始终比数组长度小1
7.数组的数据类型是一个对象,其实就是个加了数字索引和length属性的特殊对象
数组创建方式:
1.隐式方式创建的数组,最常用的方式
var arr=["小张","小王","小李","小明"];
2.直接实例化,通过构造函数Array()创建
1.直接把数组元素写到括号里
var arr=new Array("小张","小王","小李","小明");
2.创建数组并给数组元素赋值
var arr=new Array();
arr[0]="小张";
arr[1]="小王";
arr[2]="小李";
arr[3]="小明";
3.规定了数组初始的长度,并给数组元素赋值
数组长度动态调整
var arr=new Array(3);
arr[0]="小张";
arr[1]="小王";
arr[2]="小李";
arr[3]="小明";
arr[4]="小花";
数组的修改和增加
想要修改数组的值只需要找到相应的下标进行重新赋值就可以。
如：arr[5]=“string”;
想要在数据中增加可以，使用数组的length属性
如：arr[arr.length]=“newString”;
使用for循环遍历数组：
var arr=["小张","小王","小李","小明"];
第一种：普通for循环
for (var i=0;i<4;i++) {
document.write(arr[i]+"写作业去"+"<br>");
};
第二种：使用数组长度的for循环
var arr=["小张","小王","小李","小明"];
for (var i=0;i<arr.length;i++) {
document.write(arr[i]+"写作业去"+"<br>");
};
第三种：优化版for循环
var arr=["小张","小王","小李","小明"];
var len=arr.length;
for (var i=0;i<len;i++) {
document.write(arr[i]+"写作业去"+"<br>");
};
第四种：for-in遍历,使用下标
使用的人很多，在所有遍历方式中效率最低
i为数组中的每一项下标，arr为需要遍历的数组
var arr=["小张","小王","小李","小明"];
for (i in arr) {
document.write(arr[i]+"写作业去"+"<br>");
};
第五种：for-of遍历(ES6)，使用数据
for-of遍历比for-in遍历效率高，但是比普通for循环效率要低
value为数组中的每一项数据,arr是需要遍历的数组
var arr=["小张","小王","小李","小明"];
for (value of arr) {
document.write(value+"写作业去"+"<br>");
};
数组中的排序：（选择排序法）
var arr=[1,23,12,7,3,28,2,14];
for (var i=0;i<arr.length-1;i++) {
for (var j=0;j<arr.length-1;j++) {
if(arr[j]>arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
for(var i=0;i<arr.length;i++)
{
document.write(arr[i]+" ");
}
二维数组：
二维数组：数组里的数据还是数组
i对应二维数组中的每一项一维数组
j对应二维数组中的每一项一维数组中的数据长度
如果把二维数组想象为一个表格的话
i 可以看做是数组中的第几行
j 可以看做是数组的第几列
var arr=[ [27,54,66],[62,55,75],[91,25,36],[51,55,38]];
for (var i=0;i<arr.length;i++) {
for (j=0;j<arr[i].length;j++) {
document.write(arr[i][j]+",");
document.write("【"+i+","+j+"】");
}
document.write("</br>");
}
对象基础知识：
在js中，对象是王。如果您理解了对象，就理解了 JavaScript。
在js中，几乎“所有事物”都是对象。
字符串,布尔,数字（如果用 new 关键词定义）,是对象
对象,函数,日期,数组,正则表达式,页面中的元素都是对象
创建对象的方法：
1.json模式创建对象,创建对象用{}号;(最主要的形式)
var people={
name:"小明",sex:"男",age:12,height:1.8, hobby:function(){
document.write("玩游戏"+'</br>');
}
};
2.直接实例化,通过构造函数Object()创建对象
var people=new Object();
people.name="小明";
people.sex="男";
people.age=12;
people.height=1.8;
people.hobby=function(){
document.write("玩游戏"+'</br>');
}
people.hobby();
document.write(typeof people );
console.log(people);
对象属性的访问和增加
1.对象名[“属性名”]
ren["age"]; （访问）
var a= ren["age"]; （增加）
2.对象名.属性名(用得最多)
ren.sex; （访问）
var a=ren.sex; （增加）
对象的删除：
delete 关键词从对象中删除属性：会同时删除属性的值和属性本身
删除ren中的身高属性
delete ren.height;
delete ren[“height”];
对象的易变性:
var obj1 = {
name:"小明",sex:"男",age:12,height:1.7};
var obj2 = obj1;
d.name="小花";
console.log(c);
console.log(d);
这里不会创建 obj1的副本,obj1 和 obj2是同一个对象.对 obj1 的任何改变都将改变 obj2。
遍历对象：
var xiaoMing ={
name:"小明",sex:"男",age:"20"};
//遍历对象
// 语法: for(变量 in 对象名)
for( valu in xiaoMing)
{
console.log(valu); // 输出变量valu得到的属性值
console.log(xiaoMing[valu]); //对象名[变量名] 输出的是值
}
构造函数：
1.构造函数：主要功能初始化对象.可以想像成一套模板或一套方案
2.构造函数：通过new 函数名来实例化对象的函数叫构造函数。
3.new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。
4.为了区分构造函数和普通函数，构造函数的函数名首字母一般大写
function People(){
this.name=""; //this:表示现在还不知道，没有具体的名称
this.sex="男";
this.age="20";
};
// 通过new方法来创具体的叫"xiaoMing"的人
var xiaoMing = new People();
// 通过new的方法创建具体的对象时，this才有具体的名称,现在this就表示xiaoMing
xiaoMing.name="小明";
xiaoMing["age"]=21;
alert(xiaoMing.sex);
构造函数中添加属性和方法：
function People(){
this.name=""; //this:表示现在还不知道，没有具体的名称
this.sex="男";
this.age="20";
this.skill=function (){
alert("会做饭");
};
};
// 通过new方法来创具体的叫"xiaoMing"的人
var xiaoMing = new People();
// 通过new的方法创建具体的对象时，this才有具体的名称,现在this就表示xiaoMing
//添加属性
xiaoMing.name="小明";
xiaoMing["age"]=21;
//添加方法，如果构造函数中已经有这个方法，将会覆盖掉构造函数中的方法
xiaoMing.skill=function(){
alert("会做饭,会开车，会泡妞");
};
alert(xiaoMing.skill());
8.获取元素以及事件
1.ID选择器
1.输入dg工具会自动生成
2.返回文档中一个指定ID的元素，用于精确获取
3.出现多个id名的情况，CSS样式对所有该id名的元素都生效，但js脚本仅对第一个出现该id名的元素生效。
4.getElementById()该方法接收一个参数：要取得元素的id，若找到则返回该元素，若不存在则返回null
var variable= document.getElementById("idName");
获取和设置元素内容：
<div id="two"><span style="color: red;">文本内容</span></div>
<div id="one">文本内容1</div>
var font= document.getElementById("one");
var font_two= document.getElementById("two");
// 获取和设置元素内容
// 1.innerText方法,返回的是标签内的文本值，不包含html标签
var font_one= font.innerText; //获取标签内的文本内容
font_two.innerText='修改后的文本内容'; //修改文本内容
alert(font_one);
// 1.innerHTML方法,返回的是标签中的 html内容，包含html标签
var a=font.innerHTML;
console.log(document.getElementById("two").innerHTML)
font.innerHTML='<span style="color: red;background-color: #55ff00;">修改样式后的文本内容</span>';
获取和设置元素属性：
<input type="text" class="formClass" name="formNname"
id="formId" value="formValue" title="表单元素"/>
var z = document.getElementById("formId");
alert(z.id); //获取表单id
alert(z.type); //获取表单type
alert(z.value);//获取表单value
alert(z.name); //获取表单name
z.value='请输入账号';//设置表单value值
alert(z.className); //获取类名
z.title="我是新添加的";//设置表单title
z.type="password";
获取和设置元素属性通用方法(推荐使用)
<input type="text" class="formClass" name="formNname"
id="formId" value="formValue" title="表单元素"/>
1.获取任意属性:元素.getAttribute("属性名");
z=document.getElementById("formId");
document.write(z.getAttribute("class")+",");
document.write(z.getAttribute("id")+",");
document.write(z.getAttribute("type")+",");
document.write(z.getAttribute("name")+",");
document.write(z.getAttribute("title")+",");
document.write(z.getAttribute("value"));
// 2.设置任意属性:元素.setAttribute("属性名","属性值");
z.setAttribute("title","新增title");
z.setAttribute("type","password")
获取和设置文本行内样式：
<div id="id" style="color: red;font-size: 24px; width: 500px;
height: 300px;border: 2px solid black;">
文本内容
</div>
var z = document.getElementById("id");
// 获取元素的行内样式
alert(z.style.cssText);
// 设置元素的行内样式
z.style.cssText= "color: blue;font-size: 30px;font-weight: 700;"
获取和设置行内样式中的属性：
<div id="id" style="color: red;font-size: 24px;
width: 500px;height: 300px;border: 2px solid black;
padding-left: 20px;" >
文本内容
</div>
var z = document.getElementById("id");
// 获取元素的行内样式的某个样式
// 语法: 元素.style.某个样式
alert(z.style.color);
// 设置元素的行内样式的某个样式
z.style.color= "blue";
z.style.marginLeft="100px";
当行内样式中的属性名中有"-"时,应使用驼峰命名法:z.style.paddingLeft
添加和删除类名：
1.添加类名,已有相同类名，不会添加
z.classList.add(“className1”);
2.删除类名,如果要删除的类名没有，也不会出错
z.classList.remove(“className1”);
元素类名的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
color: black;font-size: 16px;}
.class2{
color: red;font-size: 24px;}
.class3{
width: 200px;height: 100px;border: 2px solid black;}
</style>
</head>
<body>
<div id="id" class="zxw1 zxw2" >
文本内容
</div>
<script type="text/javascript">
var z = document.getElementById("id");
// 1.toggle在有相同类名时执行删除，没有相同类名时执行添加
// z.classList.toggle("class1");
// 2.强制执行添加或删除
// 语法: toggle("类名",布尔值)
// 第2个参数为:true 执行添加
// 第2个参数为:false 执行删除
z.classList.toggle("class2",true); //已经有这个类名时不删除
// z.classList.toggle("class2",false);//已经有这个类名时删除删除该类名
</script>
</body>
</html>
class选择器
2.类名选择器
返回文档中所有指定类名的一组元素，而不是一个元素。
可以把它当作数组进行处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="element">文本内容1</div>
<div class="element">文本内容2</div>
<div class="element">文本内容3</div>
<div class="element">文本内容4</div>
<div class="element">文本内容5</div>
<script type="text/javascript">
//
//
var div= document.getElementsByClassName("element");
console.log(div);
// 给第1个元素设置行内样式
div[0].style.color="red";
// 给所有类名为element的元素设置行内样式
for (var i=0;i<div.length;i++) {
div[i].style.color="red";
}
</script>
</body>
</html>
标签选择器以及name选择器
3.标签名选择器
返回文档中所有指定标签名的一组元素，而不是一个元素。
可以把它当作数组进行处理
选择页面中所有的p元素
var z= document.getElementsByTagName("p");
给第1个p元素设置行内样式
z[0].style.color="red";
给所有p标签的元素设置行内样式
for (var i=0;i<z.length;i++) {
z[i].style.color="red";
}
name属性选择器
返回文档中所有指定标签名的一组元素，而不是一个元素。
可以把它当作数组进行处理
var z= document.getElementsByName("labelName");
给选中的第1个元素设置行内样式
z[0].style.color="red";
给所有name属性为labelName的元素设置行内样式
for (var i=0;i<z.length;i++) {
z[i].style.color="red";
}
返回文档中匹配指定css选择器的所有元素
语法:querySelectorAll(“css选择器”);
选中盒子中所有的p元素
var zxw=document.querySelector("#id p");
BOM和DOM
DOM:文档对象模型 Document Object Model
window:浏览器窗口对象,最大的对象,其它的是window的子对象
history:历史记录对象
location:网址对象
document:文档对象
传统事件使用方法
注意：使用事件监听时：事件名前不用加on，直接就是事件名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#btn{
width: 200px;height: 30px;line-height: 30px;text-align: center;
background: burlywood;margin: 0 auto;
}
</style>
</head>
<body>
<div id="btn">点击此处触发事件</div>
<script type="text/javascript">
// 事件:发生了事情.事件可以是浏览器行为，也可以是用户行为
window.onload=function(){
var btn =document.getElementById("btn");
btn.onclick=function(){
//鼠标单击事件
alert("我的点击事件被触发了");
};
};
</script>
</body>
</html>
行内事件绑定方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id{
width: 500px;height: 300px;background: red;margin: 0 auto;
color: white; font-size: 30px;
}
</style>
<script type="text/javascript">
function fun(){
// Math.random();取0-1之间的随机数
document.getElementById("id").innerText=Math.random();
};
</script>
</head>
<body>
<div id="id" onclick="fun()"></div>
</body>
</html>
事件监听：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 500px;
height: 300px;
background: red;
margin: 0 auto;
color: white;
font-size: 30px;
}
</style>
<script type="text/javascript">
//
function fun() {
// Math.random();取0-1之间的随机数
document.getElementById("div").innerText = Math.random();
};
function rm() {
// 移除事件监听
document.getElementById("div").removeEventListener("mousemove", fun);
};
window.onload = function() {
// 添加事件监听
document.getElementById("div").addEventListener("mousemove", fun);
// 当鼠标单击的时候移除移动事件
document.getElementById("div").addEventListener("click", rm);
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
如果你需要一个按钮绑定多个事件？你可能会这样写
var btn1=document.getElmentById('btn');
btn1.onlick=function(){
{
"alert("event1")"}；
btn1.onlick=function(){
alert("event2")
}
但是最终的结果是弹出event2，因为event1会被覆盖掉，这就需要用到事件监听
一个button按钮绑定多个事件正确写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<div id="btn">button</div>
</body>
<script type="text/javascript">
var eventOne = function(){
alert("第一个事件");
}
var eventTwo =function eventTwo(){
alert("第二个事件");
}
window.onload = function(){
var btn = document.getElementById("btn");
//addEventListener：绑定函数 此时不是onclick
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
}
</script>
</head>
</html>
当然事件监听还有第三个参数，那就是决定事件是冒泡模式还是捕捉
就是当多个元素嵌套在一起的时候，都绑定了事件，当你点击的时候到底是谁先触发，触发的顺序是什么？
这里我用几个div盒子进行演示：
冒泡事件：
用户实际点击的元素 -> 父元素 -> 祖先元素… -> body -> html根元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: white;margin: 50px auto ;text-align: center;
}
#one{
width: 300px;height: 300px;background-color: #000074;
}
#two{
width: 200px;height: 200px;background-color: #55ff00;
}
#three{
width: 100px;height: 100px;background-color: #ff0000;
}
</style>
</head>
<body>
<div id="one">one
<div id="two">two
<div id="three">
three
</div>
</div>
</div>
<script type="text/javascript">
var china=document.getElementById('one');
var bj=document.getElementById('two');
var hd=document.getElementById('three');
china.addEventListener('click',function(){
alert('第一个事件')},false);
bj.addEventListener('click',function(){
alert('第二个事件')},false);
hd.addEventListener('click',function(){
alert('第三个事件')},false);
//冒泡阶段:点击three这个div，事件将由内到外进行依次触发：three，two，one
</script>
</body>
</html>
捕获事件：
html -> body -> 父元素 -> 子项 ->…->直到用户实际点击的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: white;margin: 50px auto ;text-align: center;
}
#one{
width: 300px;height: 300px;background-color: #000074;
}
#two{
width: 200px;height: 200px;background-color: #55ff00;
}
#three{
width: 100px;height: 100px;background-color: #ff0000;
}
</style>
</head>
<body>
<div id="one">one
<div id="two">two
<div id="three">
three
</div>
</div>
</div>
<script type="text/javascript">
var china=document.getElementById('one');
var bj=document.getElementById('two');
var hd=document.getElementById('three');
china.addEventListener('click',function(){
alert('第一个事件')},true);
bj.addEventListener('click',function(){
alert('第二个事件')},true);
hd.addEventListener('click',function(){
alert('第三个事件')},true);
//捕捉阶段:点击one这个div事件将由外到内进行：one，two，three
</script>
</body>
</html>
常用事件对照表：
load 页面或图像被完成加载
click 鼠标点击某个对象
mousedown 鼠标按键被按下
mouseup 鼠标按键被松开
mouseout 鼠标从某元素移开
mouseover 鼠标被移到某元素之上
abort 图像加载被中断
blur 元素失去焦点
change 用户改变域的内容
dblclick 鼠标双击某个对象
error 当加载文档或图像时发生某个错误
focus 元素获得焦点
keydown 键盘的键被按下
keypress 键盘的键被按下或按住
keyup 键盘的键被松开
mousemove 鼠标被移动
reset 重置按钮被点击
resize 窗口或框架被调整尺寸
select 文本被选定
scroll 元素滚动条在滚动时触发。
submit 提交按钮被点击
unload 用户退出页面
touchstart : 触摸开始（手指放在触摸屏上）
touchmove : 拖动（手指在触摸屏上移动）
touchend : 触摸结束（手指从触摸屏上移开）
touchenter ：移动的手指进入一个dom元素。
touchleave ：移动的手指离开一个dom元素。
touchcancel：是在拖动中断时候触发
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
this用法
第一种:在事件绑定中：this指向用户正在操作的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 200px;height: 200px;background: red;float: left;
color: white; margin-left:10px ;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn= document.getElementsByClassName("btn");
function abc(a)
{
a.innerText=Math.random();
a.style.background="blue";
a.style.height="300px";
}
for (var i=0;i<btn.length;i++) {
var btn=document.getElementsByClassName("btn")
btn[i].onclick=function(){
// 在事件中this指向了:当前正在点击的元素
abc(this)
};
};
};
</script>
</head>
<body>
<div class="btn" ></div>
<div class="btn" ></div>
<div class="btn" ></div>
<div class="btn" ></div>
</body>
</html>
- 普通函数 this 指向window
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
- 对象的方法 this指向的是对象 o
var o = {
sayHi: function() {
console.log('对象方法的this:' + this);
}
}
o.sayHi();
- 构造函数 this 指向的是实例对象 原型对象里面的this 指向的也是实例对象
function Star() {
};
Star.prototype.sing = function() {
}
var obj = new Star();
- 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定时间函数的this:' + this);
};
- 定时器函数 this 指向的也是window
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
- 立即执行函数 this还是指向window
(function() {
console.log('立即执行函数的this' + this);
})();
9.时间,数字,字符串方法
创建时间对象：
//创建时间对象
//1.创建当前的时间对象
//var myDate = new Date();
//2.使用参数创建时间对象(年, 月, 日, 时, 分, 秒, 毫秒)
//var myDate = new Date(2019,10,1,9,10,40,50);
//3.使用字符串创建时间对象
//var myDate = new Date("2019/10/1 9:10:40");
//4.使用时间戳创建时间对象
//时间戳:从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数，13位数字
var myDate = new Date(1601870240000);
alert(myDate);
console.log(myDate)
获取当前年月日星期几：
//创建当前的时间对象
var myDate = new Date();
//获取完整的年份(4位)
var year = myDate.getFullYear();
//获取当前月份(0-11,0代表1月)
//var mon = myDate.getMonth();
var mon = myDate.getMonth()+1;
//获取当前日(1-31)
var dat = myDate.getDate();
//获取当前星期X(0-6,0代表星期天)
var day = myDate.getDay();
alert(year);
获取当前时分秒毫秒
//创建当前的时间对象
var myDate = new Date();
//获取小时数(0-23)
var hou = myDate.getHours();
//获取分钟数(0-59)
var min = myDate.getMinutes();
//获取秒数(0-59)
var msec = myDate.getSeconds();
//获取毫秒数(0-999)
var ms = myDate.getMilliseconds();
alert(hou);
获取完整的时间和日期
//创建当前的时间对象
var myDate = new Date();
//获取当前时间戳
var timestamp=new Date().getTime();
//获取完整的年月日
//var d = new Date().toLocaleDateString();
var d = new Date(timestamp).toLocaleDateString();
//获取完整的时分秒
//var t = new Date().toLocaleTimeString();
var t = new Date(timestamp).toLocaleTimeString();
//获取完整的年月日时分秒
//var dt = new Date().toLocaleString();
var dt = new Date(timestamp).toLocaleString();
alert(dt);
数字取整：
//1.向下取整（去掉小数部分）
var floor = Math.floor(1.56);
//运行结果：1
//2.向上取整(只要小数部分有值，就向上加1，但不能是0)
var ceil = Math.ceil(1.01);
//3.四舍五入
var round
= Math.round(1.57);
//运行结果：2
//.4取最大数
var max =Math.max(1,2,6);
//运行结果：6
//.5取最小数
var min =Math.max(1,2,6);
//运行结果：1
//.6取绝对值
var abs=Math.abs(-5);
//运行结果：5
//.7取随机数，返回一个0~1之间1的数，但是不会包括1
var random=Math.random();
//运行结果：0.3777896747357721
document.write(random);
//.8取随机数公式： Math.floor(Math.random()*(最大数-最小数+1)+最小数);
//还有很多其他取随机数的方式，但是有了这个公式其他的我就不多说了，这挺好用的。
var num= Math.floor(Math.random()*(50-10+1)+10);
//运行结果：14
字符串查找：
1.查找指定位置的字符
返回某个位置的字符，即字符在字符串中的下标,第一个字符的下标是 0
如果下标超出了字符串长度，该方法将返回一个空字符串
var z = "www.baidu.net";
var a = z.charAt(7); //返回d
var b = z.charAt(13); //返回空，什么也没有，连null都没有
console.log(a);
console.log(b);
2.返回某个指定的字符串值在字符串中首次出现的位置
对大小写敏感,如果要检索的字符串值没有出现，则该方法返回 -1
var z = "www.baidu.net";
var c = z.indexOf("ba"); //返回4
var d = z.indexOf("str"); //返回-1
console.log(c);
console.log(d);
字符串替换：
语法:replace(“要替换的字符”,“用什么字符替换”);
括号内也可以是正则表达式
var str1 = "www.baiduw.com";
var a = str1.replace("com","net"); //返回结果:www.baiduw.net
//全局匹配
var b = str1.replace(/www/g,"WWW"); //WWW.baiduw.com
//忽略大小写
var c= str1.replace(/WWW/i,"qqq"); //qqq.baiduw.com
//全局匹配,忽略大小写
var d = str1.replace(/WWW/gi,"EEE"); //EEE.baiduw.com
console.log(d)
字符串大小写转换：
var str1 = "www.baidu.net";
var str2 = "WWW.BAIDU.NET";
//toUpperCase()将所有的字符串都转换成大写字母
var a = str1.toUpperCase();//WWW.BAIDU.NET
//toLowerCase()将所有的字符串都转换为小写字母
var b = str2.toLowerCase(); //www.baidu.net
var str = "string";
// 把指定位置字符转换为大写
var Str =str.replace(str.charAt(0),str.charAt(2).toUpperCase());//返回Rtring
// charAt(需要转为大写的字符位置)
截取指定个数的字符
2.substr()截取从指定下标（1）开始的指定个数的字符
语法: substr(开始下标,截取个数);
substr()可以接受负值
//只有一个参数时，从指定位置截取到字符串结尾
var str = "www.baidu.com";
var a = str.substr(4); //返回baidu.com
//有两个参数时，从指定下标开始截取指定的个数的字符，包头
var b = str.substr(4,8); //返回baidu.co
//开始下标可以接受负值（-1 指字符串中最后一个字符，-2 指倒数第二个字符）（从后向前截取）
var d = str.substr(-3,3); //com
var e = str.substr(-4,-5); //错误写法,第二个参数不能为负数
console.log(e);
字符串分割：
split();把一个字符串分割成字符串数组
语法： split(指定位置分割，指定数组的长度);
var str = "www.baidu.com";
var a = str.split("."); //["www", "baidu", "com"]
var b = str.split(".",2); //["www", "baidu"]
把字符串看成数组来使用：
var str = "www.baidu.com";
//把字符串当成数组来使用
var a = str.charAt(4);//返回b
var b = str[5]; //返回a 返回下标为5的字符
for (var i=0;i<str.length;i++) {
document.write(str[i]+"<br>");//依次输出：www.baidu.com
}
console.log(a)
对象的方法：
对象的合并
Object.assign()方法用于对象的合并
将源对象的属性，复制到目标对象中
第一个参数是目标对象，后面的参数都是源对象
会修改目标对象,不会修改源对象
var obj1 = {
age:18};
var obj2 = {
name:"user"};
var obj = Object.assign(obj1,obj2);
//（目标对象，源对象）
console.log(obj1);//{age: 18, name: "user"}
console.log(obj2);//{name: "user"}
console.log(obj); //{age: 18, name: "user"}
如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性
var obj1 = {
age:18,name:"root"};
var obj2 = {
name:"user"};
var obj = Object.assign(obj1,obj2);
console.log(obj1);//{age: 18, name: "user"}
console.log(obj2);//{name: "user"}
console.log(obj); //{age: 18, name: "user"}
多个对象的合并：
var obj1 = {
age:18};
var obj2 = {
name:"user"};
var obj3 = {
sex:"男"};
var obj = Object.assign(obj1,obj2,obj3);
//{age: 18, name: "user", sex: "男"}
console.log(obj);
数组方法：
数组转字符串：
1.join()将数组的元素转成一个字符串,原来的数组会保留
join(“分隔符”): 该方法只接收一个参数：即分隔符,省略的话则用默认用逗号为分隔符。
var arr = ["2020","02","01"];
var str = arr.join("-");
console.log(str); //返回 2020-02-01
console.log(arr); //返回 ["2020", "02", "01"]
伪数组转为真实数组
Array.from()将伪数组转成数组,只要有length属性的就可以转成数组。ES6语法
主要用来把字符串,set数据类型转成数组
var str = "stringarray";
var a = Array.from(str);
var obj = {
name:"username", age:18};
var c = Array.from(obj);//返回空数组
console.log(obj.length);//对象没有长度 undefined
console.log(str.length) //11
console.log(a); // ["s", "t", "r", "i", "n", "g", "a", "r", "r", "a", "y"]
console.log(c); ///返回空数组 []
数组删除与添加
1.pop() 数组末尾移除最后一项，减少数组的 length 值，然后返回移除的元素。
pop()会直接修改原数组，而不是创建一个新的数组
var arr = [1,2,3,4,5,6];
var a = arr.pop();
console.log(arr); // arr: [1,2,3,4,5]
console.log(a) // a: 6
2.push() 用于向数组的末尾添加一个或多个元素，并返回修改后数组的长度(数值类型)。
push()会直接修改原数组，而不是创建一个新的数组
var arr = [1,2,3,4,5,6];
var b = arr.push("newString");
console.log(b) //返回 7
console.log(arr); //返回:[1, 2, 3, 4, 5, 6, "newString"]
数组开头添加与删除
1.shift() 删除数组开头第一项，减少数组的 length 值，然后返回移除的元素。
shift()会直接修改原数组，而不是创建一个新的数组
var arr = [1,2,3,4,5,6];
var a = arr.shift();
console.log(a); //a: 1
console.log(arr); // [2, 3, 4, 5, 6]
2.unshift() 用于向数组的开头添加一个或多个元素，并返回修改后数组的长度(数值类型)。
unshift()会直接修改原数组，而不是创建一个新的数组
var arr = [1,2,3,4,5,6];
var c = arr.unshift("name","age");
console.log(c); //8
console.log(arr); // ["name", "age", 1, 2, 3, 4, 5, 6]
数组任意位置删除和插入
splice():可以实现删除,插入,替换,截取。会直接修改原数组
1.删除:可以删除任意数量的项，需指定 2 个参数：要删除的第一项的位置和要删除的项数。
var arr = ["java","php","python","C++"];
arr.splice(0,2);
document.write(arr); //返回：python,C++
2.插入:可以向指定位置插入任意数量的项，需提供 至少3 个参数：起始位置、 0（要删除的项数）和要插入的项。
var arr = ["java","php","python","C++"];
arr.splice(2,2,"C#","linux");
console.log(arr); //返回：["java", "php", "C#", "linux"]
数组任意位置替换和截取
3.替换:可以向指定位置插入任意数量的项，且同时删除任意数量的项，需提供 至少3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
var arr = ["java","php","python","C++"];
arr.splice(1,1,"html");//把php替换为html
console.log(arr);
4.截取:splice()返回一个包含从原始数组中删除项的数组
可以截取从指定位置开始,指定元素个数的数组（从指定位置开始（不包含本身），截取多少位）
var arr = ["java","php","python","C++"];
var str = arr.splice(1,2); //["php", "python"]
console.log(str)
截取指定下标数组或字符串的值（不会改变原数组）
slice():截取指定下标的数组或字符串元素。数组，字符串均有效
语法： slice(开始下标,结束下标);
如果结束下标未被规定，那么会选取从开始下标到数组结尾的所有元素
返回一个包含从开始下标到结束下（不包括结束标下标）的新数组或字符串
可使用负值从数组的尾部选取元素
var arr = [0,1,2,3,4,5,6,7,8,9];
var str = "www.baidu.com";
//var str = arr.slice(2); //[2,3,4,5,6,7,8,9]
//var str = arr.slice(3,8); //[3,4,5,6,7]
//var str = arr.slice(-6,-1); //[ 4, 5, 6, 7, 8 ] 从右往左，超出数组下标返回空值
//var str = arr.slice(-6,-9); //空数组
var str = str.slice(2); //w.baidu.com
console.log(str);
查找指定元素的下标
1.indexOf() 查找指定元素的下标,从前往后查找
若有重复的，则返回第一个查到的下标
若不存在，则返回 -1
var arr1 = ["java","php","python","C++"];
var a = arr1.indexOf("C++"); //3
console.log(a);
2.lastIndexOf() 查找指定元素的下标,从后往前查找
若有重复的，则返回第一个查到的下标
若不存在，则返回 -1
var arr1 = ["java","php","python","C++","python"];
var a = arr1.lastIndexOf("python"); //4
console.log(a);
数组合并以及反转
1.concat() 方法用于连接两个或多个数组
该方法会先创建当前数组一个副本,不会改变原有的数组，会返回一个新数组。
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var arr = arr1.concat(arr2,arr3); //[1,2,3,4,5,6,7,8,9]
2.reverse()：反转数组中元素的顺序
该方法会改变原来的数组，而不会创建新的数组
返回值并不是排序后的数组，而是数组的引用
var arrays = [1,2,3,4,5,6];
console.log(arrays.reverse()); //[ 6, 5, 4, 3, 2, 1 ]
数组元素升序排序：
var arr1 = [3,9,7,6,4,2];
var arr2 = ["e","a","f","b","c","d"];
var arr3 = [33,99,17,6,24,2];
var arr4 = ["ea","aj","ff","mb","zc","hm"];
arr1.sort(); //[ 2, 3, 4, 6, 7, 9 ]
arr2.sort(); // ["a", "b", "c", "d", "e", "f"]
arr3.sort(); //[17, 2, 24, 33, 6, 99]
arr4.sort(); //["aj", "ea", "ff", "hm", "mb", "zc"]
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
数组元素自定义排序
sort()参数为规定排序顺序，必须是函数
语法:sort(比较函数);
比较函数函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。
比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
//1.升序排列
function asc(a,b){
if (a<b) {
return -1;
} else if (a>b){
return 1;
} else {
return 0;
};
};
//1.降序排列
function desc(a,b){
if (a<b)
return 1;
else if (a>b){
return -1;
} else {
return 0;
};
};
var arr3 = [33,99,17,6,24,2];
var arr4 = ["5","6","9","8","4","6"];
arr3.sort(desc); //[ 99, 33, 24, 17, 6, 2 ]
arr4.sort(desc); //["9", "8", "6", "6", "5", "4"]
console.log(arr3);
console.log(arr4);
数组元素按条件过滤
filter():把数组中的某些元素过滤掉，然后返回剩下的元素,接收的是一个回调函数
数组中的每一项运行给定函数，返回满足过滤条件组成的新数组。
不会改变原数组
var arr1 = [1,2,3,4,5,6,7,8,9,10];
function fun(x){
return x>6;
};
//保留大于6的数组元素
var arr2 = arr1.filter(fun);
function oddCheck (x){
return x%2 == 1;
};
//保留数组中的奇数元素
var arr3 = arr1.filter(oddCheck);
console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10](原数组不作改变)
console.log(arr2); //[7,8,9,10] 筛选出大于6的元素
console.log(arr3);//[1,3,5,7,9] 筛选出奇数
遍历数组法去重复:
建立一个新数组，然后循环遍历要去重的数组，每次判断新数组不包含旧数组的值时（新数组用indexOf方法检索旧数组的值返回结果等于-1）将该值加入新数组。
var arr1 = [1,1,2,2,3,3]; //[1,2,3]
function ToRepeat(arr){
var newArr=[];
for(var i=0; i<arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
};
};
return newArr;
};
var arr2 = ToRepeat(arr1);
console.log(arr2); //[1,2,3]
使用set方法去重复：
set数据类型:ES6提供了新的数据结构Set。
它类似于数组，但是成员的值都是唯一的，没有重复的值。
var arr1 = [1,1,2,2,3,3];
//1.数组转set
var set = new Set(arr1); //[1,2,3]
//console.log(arr1);
//console.log(set1);
//2.set转数组
var arr2 = Array.from(set);//[1,2,3]
var arr3 = [...set]; //[1,2,3]
console.log(arr2);
console.log(arr3);
//3.has()判断一个值是否在set中
//返回布尔值，在为true，不在为false
console.log(set.has(2)); //true
console.log(set.has(5)); //false
数组的差集，交集，并集：
var arr1=[1,2,3];
var arr2=[2,3,4];
var a = new Set(arr1);
var b = new Set(arr2);
//1.并集:a+b再把重复去掉 [1,2,3,4]
var un = new Set([...a,...b]); //[1,2,3,4]
console.log(un);
//2.交集:a和b共同的部分[2,3]
var is = new Set([...a].filter(x=> b.has(x)));//[2,3]
console.log(is);
// function(x){
// return b.has(x);
// }
//3.差集:a-b [1]
var df = new Set([...a].filter(x=> !b.has(x)));//[1]
console.log(df);
10.JSON数据格式
JSON数据格式简介
JSON(JavaScript Object Notation, js对象标记法) 是一种轻量级的数据交换格式。
JSON基于 ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
JSON字符集必须是UTF-8，JSON的字符串规定必须用双引号""，键名也必须用双引号""。
任何支持的数据类型都可以通过 JSON 来表示。
JavaScript内置了JSON的解析
json本质就是字符串
JSON和对象相互转换：
var obj = {
name:"user",age:18}; //这是一个对象
var str = '{"name":"root","age":18}'; //这是一个json字符串
//1.JS对象转JSON字符串:使用 JSON.stringify()方法
var str_json = JSON.stringify(obj);
// console.log(str_json);
// console.log(typeof str_json);
//2.JSON字符串转JS对象:使用 JSON.parse()方法
var str_obj = JSON.parse(str);
console.log(str_obj);
console.log(str_obj.name);
console.log(str_obj.age);
把对象转换为JSON字符串时处理键值对
1.JS对象转JSON字符串:使用 JSON.stringify()方法
JSON.stringify()可以有3个参数
参数1:要转换对象或数组
参数2(可选):数组或函数
如果参数2 是一个数组，则仅转换数组中指定的属性
如果参数2为函数，则将调用该函数，并传入每个成员的键和值。
参数3(可选):文本缩进(文本显示格式)、空格和换行符
// 把js对象转换为JSON字符串,并且在转换的时候处理每一项的键和值
// 这里是把值为男的属性改为女
var obj = {
name:"小明",age:18,sex:"男",height:"1.8米"}; //这是一个对象
function sex(key,value){
if (value == "男") {
return "女";
};
return value;
}
var xm_json = JSON.stringify(obj,sex,'\n');
console.log(xm_json);
传入函数处理键值：
2.JSON字符串转JS对象:使用 JSON.parse()方法
JSON.parse()方法可以有2个参数
参数1:要转换JSON字符串
参数2(可选):在 parse 函数返回之前处理结果的函数,处理每个成员的键和值
var xm = '{"name":"小明","age":18,"sex":"男","height":"1.8米"}';
var sex_obj = JSON.parse(xm,setSex);
var name_obj = JSON.parse(xm,setName);
// 处理value值 修改sex值
function setSex(key,value){
if (value == "男") {
return "女";
};
return value;
}
// 处理key值修改name值
function setName(key,value){
if (key == "name") {
return "修改后的"+value;
};
return value;
}
console.log(sex_obj);
console.log(name_obj);
好了到这里就结束了，认真的学习好JavaScript再去学JavaScript框架就会容易很多。