目录
1.JS组成和基本结构
1.1 JavaScript缘由
- 可以实现HTML/CSS初级验证实现不了的复杂校验
- 减轻服务器压力(在发送请求到服务器之前使用js验证客户端)
- W3C标准,结构化(HTML),表现化(CSS),行为化(Javascript)
1.2 JavaScript定义
1.2.1 JavaScript定义
- 脚本语言(一堆命令组合在一起可以批量执行的称为脚本)
- 有一定的安全性
- 一种基于对象的一种语言(创建对象/面对对象)
- 可以定义一堆事件(方法/函数)并进行调用
1.2.2 JavaScript特点
(1)向HTML页面中添加交互行为
(2)脚本语言,语法和Java类似
(3)解释性语言,边执行边解释
1.2.3 JavaScript组成部分
(1)ECMAScript (核心语法,js的前身)
(2)DOM(文档对象模型)
(3)BOM(浏览器对象模型)
1.3 JavaScript基本结构
<script type="text/javascript">
alert("jojo");
</script>
特点1:script标签是js脚本的标签元素名
特点2:type="text/javascript"代表告诉浏览器<script>标签内部是Js代码
特点3:alert("jojo");代表在网页中弹出提示框,并且提示框的内容是jojo
特点4:<script>标签一般可以存放在页面然后位置
特点5:开发过程中一般存放在body最下方(HTML最下方)
1.4 JavaScript执行原理
第一步:用户端发送请求到服务器端
第二步:将js解析出来的数据(用户身份标识)绑定在请求路径中
第三步:服务器端获取到参数之后会响应客户端(返回数据到客户端)
第四步:客户端通过浏览器解析响应的数据并将数据展现在浏览器上
2.网页引入JS三种方式
2.1 使用script标签
2.2 使用外部引入
2.3 HTML标签内部引入
3.JavaScript核心语法
3.1 变量
特点1:JS变量 存储变量值,这个变量值会赋给变量名
【变量名 = 变量值】代表的含义即将变量值赋给变量名
特点2:如何使用变量步骤:
- 步骤1:定义变量名【var 变量名】
- 步骤2:变量赋值【变量名 = 变量值】
- 步骤3:输出变量【alert(变量名)】
特点3:变量的特殊写法:(因为Javascript是弱语言,即便你写的不如Java那样规范,但有时浏览器也会帮你兼容,但不建议这样写)
<script type = "text/JavaScript">
a = 123;
alert(a);
</script>
3.2 数据类型
- 数值类型 number
- 字符串类型 String
- 布尔类型 boolean
- underfine类型(变量定义了但是没有赋值)
- null类型
拓展:typeof()代表的含义是查询某个参数的类型
特点1:null == underfine代表两者等价
特点2:typeof(null)代表含义是null属于父类型objec类型
3.3 typeof运算符
typeof检测变量的返回值
typeof运算符返回值如下
- undefined:变量被声明后,但未被赋值
- string:用单引号或双引号来声明的字符串
- boolean:true或false
- number:整数或浮点数
- object:javascript中的对象、数组和null
3.4 String对象
3.4.1 常见用法
length属性
特点:获取某个字符串的长度,利用length属性(包含空格)
charAt(index)方法
特点:charAt()方法可返回指定位置的字符,第一个字符位置为0,第二个字符位置为1
indexof()方法
特点:查找某个指定的字符串在字符串中首次出现的位置
3.4.2 String属性方法详细
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
charAt() | 返回在指定位置的字符。 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
concat() | 连接两个或更多字符串,并返回新的字符串。 |
endsWith() | 判断当前字符串是否是以指定的子字符串结尾的(区分大小写)。 |
fromCharCode() | 将 Unicode 编码转为字符。 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
includes() | 查找字符串中是否包含指定的子字符串。 |
lastIndexOf() | 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 |
match() | 查找找到一个或多个正则表达式的匹配。 |
repeat() | 复制字符串指定次数,并将它们连接在一起返回。 |
replace() | 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。 |
replaceAll() | 在字符串中查找匹配的子串,并替换与正则表达式匹配的所有子串。 |
search() | 查找与正则表达式相匹配的值。 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分。 |
split() | 把字符串分割为字符串数组。 |
startsWith() | 查看字符串是否以指定的子字符串开头。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
trim() | 去除字符串两边的空白。 |
toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
valueOf() | 返回某个字符串对象的原始值。 |
toString() | 返回一个字符串。 |
3.5 数组
3.5.1 JavaScript数组
特点1:var array=[]代表创建一个数组
特点2:array[0]=32代表给数组第一个位置上赋值,值为32
特点3:array[5]=3代表给数组第六个位置赋值,值为3
特点4:在位置0,1,2,5上赋值,唯独3、4位置上未赋值,但依然占位,所以会导致array.length获取数组长度为6
特点5:for(var i = 0;i<array.length;i++){document.write(array[i]+"</br>")代表的含义是循环遍历array数组,从数组的0位置遍历到数组的6位置(array.length)直至循环结束
<Script type="text/javascript">
//步骤1:创建数组
var array = [];
// 步骤2:给数组赋值
array[0] = 1;
array[1] = 2;
array[2] = 3;
array[5] = 12;
// 步骤3:查询数组的长度
alert(array.length);
// 步骤4:循环遍历数组,并输出数组的每一个值至浏览器上
for(var i = 0;i<array.length;i++){
document.write(array[i]+"</br>")
}
</Script>
3.5.2 数组创建\赋值的第二种表现方式
//步骤1:创建数组第二张方式
var array = new Array();
// 步骤2:给数组赋值的第二种方式
array.push(1);
array.push(3);
array.push(6);
array.push(12);
// 步骤3:查询数组的长度
alert(array.length);
// 步骤4:循环遍历数组,并输出数组的每一个值至浏览器上
for(var i = 0;i<array.length;i++){
document.write(array[i]+"</br>")
}
3.5.3 数组常见的属性方法
属性 | length | 设置或返回数组中元素的数目 |
方法 | join( ) | 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔 |
sort() | 对数组排序 | |
push() | 向数组末尾添加一个或更多 元素,并返回新的长度 |
3.6 运算符号
3.6.1 算术运算符
+:可以是数学中的加号,也可以是连接字符串的加号
var a = 1;
var b = 2;
var c = a+b; //a+b
var d = "jojo"+"oulaoula"; //字符串连接
- * /:
var a = 1;
var b = 2;
var c1 = a-b;
var c2 = a*b;
var c3 = a/b;
3.6.2 赋值运算符
= :这个符号可是是太经常用了,给变量赋值
+= :a+=b意思是将a+b的值赋给a
var a = 1;
a+=2;
3.6.3 比较运算符
> | < | >= | <= | == | != |
大于 | 小于 | 大于等于 | 小于等于 | 等于 | 不等于 |
3.6.4 逻辑运算符
1. &&逻辑与
T && T ==>T
T && F ==>F
F && F ==>F
(但凡执行操作的所有参数中有一个为false结果为false)
2. ||逻辑或
T||F ==> T
T||T ==> T
F||F ==> F
(但凡执行操作的所有参数中有一个为true结果为true)
2. !逻辑非
!F = T
! T = F
(与原有的结果相反)
如
var n = 1;
if((!(n==1))||(n!=2)){
alert("n不为1或不为2");
}else if((n>=1)&&(n<5){
alert("1<=n<5");
}
3.7 逻辑控制语句
3.7.1 if条件语句
特点1:if是关键字
特点2:if之后括弧中的值为布尔值条件
特点3:如果条件为true,则执行小括号后方法体中的代码
特点4:如果条件为false,则执行else之后方法体中的代码
var n = 1;
if(n == 1){
alert("n等于1");
}else{
alert("n不等于1");
}
3.7.2 switch多分支语句
特点1:switch是关键字
特点2:switch()括号中的变量
特点3:如果变量匹配某个case的值,则执行case对应的代码体,并且通过break关键字阻止往下执行下一个case
var n = 2;
switch(n){
case 1: /*代码体*/ break;
case 2: /*代码体*/ break;
default: /*代码体*/
}
拓展:if多分支和switch多分支的区别:
特点1:if多分支的条件可以是范围,也可以是等值
特点2:switch多分支的条件必须是等值
3.7.3 for、while循环语句
(a) for循环
特点1:关键字是for
特点2:初始位置从0开始,即var = 0
特点3:i < array.length的含义:结束位置是小于数组的length属性值,即末位置的角标为length-1
特点4:i++的含义:每次循环遍历的时候自增1
(b)while 循环
while语句只要指定条件为true,就会执行循环,只要指定条件为true,循环就会一直执行代码
3.7.4 for-in
在JavaScript中与for循环并无什么区别,但在Java中会有一些不同。
3.8 注释
3.8.1 单行注释
//
var a = 1 //定义一个a变量并赋值1
3.8.2 多行注释
/*
*/
var a/*注释*/ = 1
3.9 输入/输出
3.9.1 alert 弹框输出
alert("提示信息");
3.9.2 prompt 弹框输入输出
prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色");
可以通过prompt使用弹窗与用户交互,第一个参数是提示信息,第二个参数是文本框中的默认信息
4.函数
4.1 函数定义
- 函数定义:是完成特定任务的代码语句块
- 函数使用方式:可以直接使用
- 函数的分类:系统函数(JavaScript内置函数),自定义函数
- 自定义函数分类:匿名函数 和 有名函数
- 函数的别名:方法
4.2 常用系统函数
4.2.1 parseInt("字符串")
将字符串转换为整型数字 如: parseInt ("86")将字符串“86“转换为整型值86
var a = "121";
//2.获取变量a的类型
alert(typeof(a));
//3.利用javaScript的内置函数parseInt
//将a变量转换成数值类型的变量,并赋值给b
var b = parseInt(a);
alert(typeof(b));
4.2.2 parseFloat("字符串")
将字符串转换为浮点型数字 如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
var a = 3.12;
var b = parseInt(a);
var c = parseFloat(a);
alert(a+" "+b+" "+c);
拓展:按理来说这个方法的参数应该放字符串,这里放了一个3.12的数还能运行成功吗,这里答案是可以,还是因为JavaScript是弱语言,有些错误浏览器会帮你兼容。
4.2.3 isNAN()
用于检查其参数是否是非数字
拓展:这里注意第二个,b是一个字符串,typeof(b)结果为字符串,但isNaN(b)的结果是flase。
4.3 自定义函数
4.3.1 有名函数
(1)特点1:定义:有函数名称的函数
(2)特点2:定义函数的语法结构
function show(){
alert("jojo");
}
(3)特点3:调用有名函数的语法结构
a)直接调用
function show(){
alert("jojo");
}
show();
b)html调用
<input type="button" name="" id="" value="jojo" onclick="show()">
4.3.2 匿名函数
- 特点1:函数无名称
- 特点2:调用匿名函数借用变量
var a = function(){
alert("jojo");
}
a();
4.4 无参函数
目前为止我们都是在用无参函数
function show(){代码体} 这个()里什么都没有就是无参函数
4.5 有参函数
有参函数和无参函数放一起一对比就很容易知道两个分别是什么