文章目录
一、JavaScript
1.1 JavaScript的介绍
1.概念：一门客户端脚本语言
（1）运行在客户端的浏览器中，每一个浏览器都有自己的JavaScript的解析引擎
（2）脚本语言：不需要编译，直接就可以被浏览器解析执行。
2.JavaScript的功能：
用来增强用户和html页面的交互过程，可以控制html元素，让页面有一些动态效果。
JavaScript与CSS、HTML的关系：
HTML：页面元素的展示
CSS:页面样式的控制以及布局
JS：增强用户与html页面的交互过程，控制html元素，让页面有动态的效果
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
1.2 JavaScript的基本语法
与html的结合方式
* 内部js：
-定义<script>标签，标签体书写js代码
- 注意：<script>标签定义的位置，会影响执行顺序
- <script>可以定义多个。
* 外部js:
- 定义<script>标签,通过src属性导入外部js文件
注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
数据类型：原始数据类型和引用数据类型
原始数据类型：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 包含字符和字符串
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
引用数据类型：对象
变量
变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法：
var 变量名 = 初始化值;
typeof运算符：获取变量的类型。
注：null运算后得到的是object
ES6中，引入一个新的关键字let作用在一个变量上，那么这个变量只能在所处的代码块中定义。
ES6中，引入const定义一个常量
运算符
1. 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
* ++ --: 自增(自减)
* ++(--) 在前，先自增(自减)，再运算
* ++(--) 在后，先运算，再自增(自减)
* +(-)：正负号
* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
2. 算数运算符
+ - * / % ...
3. 赋值运算符
= += -+....
4. 比较运算符
> < >= <= == ===(全等于)
* 比较方式
1. 类型相同：直接比较
* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
* 5. 逻辑运算符
&& || !
* 其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true
6. 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
* 语法：
* 表达式? 值1:值2;
* 判断表达式的值，如果是true则取值1，如果是false则取值2；
流程控制语句
1. if...else...
2. switch:
在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. 5. for
JS的特殊语法：
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量(不建议)
案例练习：在页面输出九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//while循环
var j=1;
while(j<=9){
var i=1;
while(i<=j){
document.write("<span style='color: blueviolet;size: a3; font-style: 楷体;'>"+(i+"*"+j+"="+i*j)+"</span>");
document.write(" ");
i++;
}
document.write("<br>");
j++;
}
//for循环
for(var x=1;x<=9;x++){
for(var y=1;y<=x;y++){
document.write("<span style='color: hotpink;size: a2; font-style: 宋体;'>"+(y+"*"+x+"="+x*y)+"</span>");
document.write(" ");
i++;
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
1.3 JavaScript的基本对象
js是一门基于对象的语言,不能由原生的对象派生出新的对象。换句话说，不存在继承关系
function：函数对象
JS中的函数，类似于Java中的方法，可以封装一段功能逻辑，以实现重复调用。
1. 创建：
1. var fun = new Function(形式参数列表,方法体);
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
2. 方法：
3. 属性：
length:代表形参的个数
4. 特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5. 调用：
方法名称(实际参数列表);
三种定义函数的方式：
<script type="text/javascript">
//方式1: 不推荐使用，仅作了解 方法体，书写凌乱，阅读性差
var test = new Function("a,b", "alert(a+b)");
//test(20,30);
//方式2：var 函数名=function(形参列表){函数体}
var test2 = function(a, b) {
//函数体
alert(a + b);
}
//方式3 function 函数名(形参列表){函数体}
function test3(a, b) {
alert(a + b);
}
test3(20, 30);
//匿名函数，有时可以作为参数传入
/*
function(a, b) {
//函数体
alert(a + b);
}
*/
var add=function(){
//arguments 他本质上是一个数组，可以把传过来的所有实参，放到这个数组中
return arguments[0]+arguments[1]+arguments[2];
}
//函数的在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
var sum=add(20,30,40);
alert(sum);
</script>
我们可以使用自调用函数：
<script type="text/javascript">
//函数没有返回值
(function add(a,b){
alert(a+b)
}(20,30))
//函数有返回值
var result=(function add(a,b){
return (a+b)
}(20,30))
alert(result)
</script>
void关键字
可以拦截函数的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
alert(100);
return 1;
}
</script>
</head>
<body>
<h1>asdfassdf</h1>
<h1>asdfassdf</h1>
<a href="#">一个连接</a>
//void 一元运算符，可以拦截函数的返回值
//void(0)是用来代替undefined
<a href="javascript:void(0)">可以点击不跳转页面</a>
<!-- 内联 -->
<a href="javascript:void(show())">拦截跳转页面还可以执行函数</a>
<!-- 内联的写法-->
<a href="javascript:show()">JS内联的写法，可以调用函数</a>
<a href="javascript:window.open('about:blank')">Click me</a>
<a href="javascript:void(window.open('about:blank'))">Click me</a>
</body>
</html>
二、JavaScript的内置对象
String 对象
创建String对象的语法：
new String(s);
String(s);
参数s就是存储在String对象中或转换成原始字符串的值。
两种创建的区别：
当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
属性：length：字符串的长度
方法：
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim():去除字符串两端的空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str1=new String("abc");
var str2=String("abc");
alert(str1);
alert(str2);
alert(typeof str1);//object
alert(typeof str2);//string
//String 对象属性
var len1=str1.length;
var len2=str2.length;
//String 对象方法
// slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
var s1="勒布朗詹姆斯".slice(0,3);
alert(s1);//勒布朗
var s3="勒布朗詹姆斯".slice(0,-2);
alert(s3);//勒布朗詹
//substring() 提取字符串中两个指定的索引号之间的字符。
var s2="勒布朗詹姆斯".substring(0,4);
alert(s2);//勒布朗詹
//indexOf() 检索字符串
//区分大小写 参数1 检索的字符 参数2 起始索引 没有则-1
var index1="abcdefghijklmn".indexOf('f',0);
alert(index1);//5
var index2="abcdefghijklmn".indexOf('F',0);
alert(index2)//-1
//trim():去除字符串两端的空格
// replace() 替换字符串。
</script>
</head>
<body>
</body>
</html>
Number 对象
对原始数据的包装对象
创建Number的对象
var myNum=new Number(value);
var myNum=Number(value);
参数就是创建的Number对象的数值，或者是转换成数字的值
当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。
属性：
MAX_VALUE 可表示的最大的数
MIN_VALUE 可表示的最小的数。
方法：
toString()：把数字转换为字符串，使用指定的基数。
toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。
方法的使用
var myNum2=new Number(3.156666666644444444);
var numStr1=myNum2.toString();//转换字符串
var numStr2=myNum2.toFixed(3); //保留小数点后面三位，会四舍五入
var str=myNum2.toPrecision(4); //连整数算在内保留4位，会四舍五入
Data对象
Data对象用于处理日期和时间
创建Data对象的语法：
var myDate=new Date()
方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();
var dataString=time.toDataString();
var timeString=time.toTimeString();
Math对象
Math对象用于执行数学任务
创建 Math对象：
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
方法：
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
abs(x) 返回数的绝对值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//我要整数 1---100；
for (var i = 0; i < 10; i++) {
var num2 = Math.random() * 100 + 1
//向下取整
var v = Math.floor(num2);
document.write(v + "<br>");
}
document.write("<hr>")
//你在页面随机输出 10个随机4位验证码 (验证码数字和字母的组合)
var str = "0123456789abdefafhkjolly";
//生成4个随机索引，用随机索引从字符串中截取4个字符拼接起来
//生成4个随机索引
var one = Math.floor(Math.random() * str.length);
var two = Math.floor(Math.random() * str.length);
var three = Math.floor(Math.random() * str.length);
var four = Math.floor(Math.random() * str.length);
//根据索引截取字符
var ch1 = str.charAt(one);
var ch2 = str.charAt(two);
var ch3 = str.charAt(three);
var ch4 = str.charAt(four);
//拼串
var code = ch1.concat(ch2).concat(ch3).concat(ch4);
document.write(code);
</script>
</head>
<body>
</body>
</html>
Boolean对象
Boolean对象表示两个值：true和false
创建Boolean对象的语法：
new Boolean(value); //构造函数
Boolean(value); //转换函
当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。
如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。
常用方法：
toString() 把逻辑值转换为字符串，并返回结果。
var b=new Boolean(true);
var vv=b.toString();
Array数组对象
Array 对象用于在单个的变量中存储多个值。
创建 Array对象的语法
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。
当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。
当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。
当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。
属性： length 数组的长度
注意：JS的数组中没有角标越界，通过角标如果找不到元素，那么获取的就是undefined。
常用方法：
concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
slice() 从某个已有的数组返回选定的元素 需要传入起始索引和终止索引，来截取一段元素 含头不含尾
sort() 对数组的元素进行排序
splice(index,howmany) 删除元素，并向数组添加新元素。 从index处开始删除howmany个元素
toString() 把数组转换为字符串，并返回结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//concat方法
var arr1 = [20, 30, 50, 40]
var arr2 = [200, 300, 500, 400,100];
var maxarr=arr1.concat(arr2);
alert(maxarr);
//join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
//join() 把数组元素拼接成字符串，可以使用拼接符来连接
var str1=arr1.join("");
alert(str1);
alert(typeof str1);
//pop() 删除并返回数组的最后一个元素
var s1=arr1.pop();
alert(s1);
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。 类似Java list集合的add()
//arr1 20,30,50
var len=arr1.push(500);
alert(len);//4 长度
alert(typeof len);//number
alert(arr1);
//reverse() 颠倒数组中元素的顺序。
/* arr1.reverse();
alert(arr1) */
// shift() 删除并返回数组的第一个元素 与pop()相反
var s2=arr1.shift();
alert(s2)
alert(arr1)
//slice() 从某个已有的数组返回选定的元素 需要传入起始索引和终止索引，来截取一段元素 含头不含尾
var newarr=arr1.slice(0,2);
alert(newarr);
//sort() 对数组的元素进行排序
var arr0=new Array(10,50,64,89,11,54,123);
//排序 sort传递函数
var arrrr=arr0.sort(function(a,b){
return a-b;
});
alert(arrrr);
var bj=function(a,b){
return a-b;//按照返回值的正负
}
arrrr.sort(bj); //传入这个比较器，可以按照大小排序
alert(arrrr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[20,30,50,30,90,400];
//arr.splice(0,2);//从0索引出开始删除2个元素
//arr.splice(1,1,200);//从1索引处开始删除一个元素，把200这个元素加入到1索引处
arr.splice(0,2,500,500,600,600,800,900);//从0索引处开始删除2个元素，把后面的元素从0索引处开始添加进去
//toString() 把数组转换为字符串，并返回结果。
var str=arr.toString();会把逗号也转换成字符串
alert(typeof str);
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 跟push方法相反
var newLen=arr.unshift(50000);
alert(newLen);
//数组的遍历，获取数组中的最值 冒泡排序，选择排序，插入排序，希尔排序，堆排序，，，，，
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br>");
}
</script>
</head>
<body>
</body>
</html>
正则表达式（RegExp）对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建RegExp对象的语法：
new RegExp(pattern, attributes);
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”。
修饰符：
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
正则表达式的模式与Java中相同。
位置：
^ 开头
$ 结尾
次数：
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个，最多m个
通配符：
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
组合：
[a-z]
[0-9]
常用方法
test 检索字符串中指定的值。返回 true 或 false。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//new RegExp(pattern, attributes);
//pattern 规则
//attributes 取值 g：全文检索
//attributes 取值 i：不区分大小写
var reg=new RegExp(/^[a-z0-9]+$/);
var str1="sdasd12344";
//检索字符串中指定的值
var b1=reg.test(str1);
alert(b1);
//大写字母
var str2="ASDsasf1231";
var b2=reg.test(str2);
alert(b2);
//加入i不区分大小写
var reg1=new RegExp(/^[a-z0-9]+$/i);
var b3=reg1.test(str2);
alert(b3);
//正则简写格式
var reg2=/^[A-Z0-9]+$/;
//不加^$的 表示检验的字符串中如果包含正则的任意一个格式，就可以返回true
var reg3=/[A-Z0-9]+/;
var s="SD1231aa";
var flag1=reg2.test(s);//false
var flag2=reg3.test(s);//true
alert(flag1);
alert(flag2);
//转义符 就 \. 一根斜杠
</script>
</head>
<body>
</body>
</html>
字符串的replace方法以及spilt方法传入正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//查找出三个字符组成的单词。
var str = "da jia hao hao xue xi a haha HAO";
// exec(str) 把符合 正则的字符串截取出来 ，注意加上全文检索 g
//正则:
var regx = /\b[a-z]{3}\b/gi; //这里就不要加上开头和结尾了 g 全文检索，从头检索到尾
var line ="";
while ((line = regx.exec(str)) != null) {
document.write(line + "<br/>")
}
document.write("<hr/>")
//字符串中有关于正则的方法
var ss="aaa=bbb=ccc=ddd";
//split() 把字符串分割为字符串数组。
var arr=ss.split(/=/); //传入正则表达式，或字符串都可以
alert(arr);
//Stirng的replace() 替换与正则表达式匹配的子串。
// 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。
// 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
var newss=ss.replace(/=/g,"#");
alert(newss);
</script>
</head>
<body>
</body>
</html>
Global：全局方法对象
全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。
方法直接调用即可
isNaN() 检查某个值是否是NaN。
parseInt() 解析一个字符串并返回一个整数。
parseFloat() 解析一个字符串并返回一个浮点数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//isNaN() 检查某个值是否是NaN。
var a = NaN;
var b = NaN;
//我们判别一个值是不是NaN 你使用==号判别不出来
//alert(a==b);false
//isNaN() 检查某个值是否是NaN。
var v = isNaN(a);
alert(v); //true
//parseFloat() 解析一个字符串并返回一个浮点数。
//parseInt() 解析一个字符串并返回一个整数。
//把一个字符串的数字，转成数字
var num = "100";
var v1 = 1 * num;
alert(v1) //100
alert(typeof v1) //number
var num2 = "100abc";
var v2 = 1 * num2;
alert(v2); //NaN num2是NaN
alert(typeof v2) //number
//parseInt() 解析一个字符串并返回一个整数。
//parseFloat() 解析一个字符串并返回一个浮点数。
//从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
//比正号强大些 var v=+“123”；
var p = parseInt("100abc首挡泥瓦得到");
alert(p + 20); //120
var vv = parseFloat("3.144444你好");
alert(vv + 3); //6.144444
</script>
</head>
<body>
</body>
</html>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
