JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。
作用: 验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
JavaScript与java之间没有关系:
组成:
ECMAScript 核心语法
BOM 浏览器对象模型
DOM 文档对象模型
使用方式:
行内js : js代码定义在html元素标签上
内部js : 通过script标签对定义在html中
外部js : 定义在外部的一个js文件中,通过script标签引入
注意:一个script标签对只能用要不引入外部js,要不定义内部js代码
位置:
可以定义在html中的任意位置
建议:1.head中
一目了然,便于后期维护
有可能获取不利因素
2.body结束之前
肯定能够获取到每一个元素
不便于观察
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<!--内部js-->
<!--引入外部js-->
<script src="js/first.js"></script>
</head>
<body>
<button type="button" onclick="alert('网抑云!!!!')" id="btn">按钮</button>
<script>
console.log("消愁~~~");
console.log(document.getElementById("btn"));
</script>
</body>
</html>
2.调试方式
1.alert 弹出框
最先执行
不推荐做调试使用
2.document.write("在文档页面中写入内容")
当页面内容加载完毕之后,再触发document.write的执行,会覆盖原页面
3. console控制台输出 -> 推荐使用
console.log()
console.info()
console.error()
console.warn()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调试方式</title>
</head>
<body>
<button type="button" onclick="document.write('我被他们三个夸我太帅了')">点击按钮</button>
<script>
alert("泽鹏君");
alert("郭老贼");
alert("志康君")
document.write("他们三个都夸朕帅");
</script>
</body>
</html>
3. 变量
变量没什么好讲的,就是可以先声明再赋值,或者先赋值再声明 var
而且一行中可以通过定义多个变量也可以同时获取多个变量 列如:
var a = 2,b = false, c = "haha";
console.log(a,b,c)
4.数据类型
简单数据类型
Number 数值型 ---》蓝色
整数 小数
NaN not a number
(1)直接赋值
(2)通过运算无法得到一个正确的结果时 NaN
String 字符串 -> 黑色
可以通过一对'',或者一对""定义字符串
可以包含0~n个字符
如果字符串中出现特殊字符,可以通过转义字符进行转义 \
Boolean 布尔型 -> 蓝色
true
false
Null 空->灰色
1)直接赋值null
2)获取不到元素得到null
Undefined 未定义 > 灰色
1)直接赋值undefined
2)变量已声明未赋值就为undefined
Function 函数型
function 函数名(参数列表){
函数体;
}
复杂数据类型
对象型 {}
键值对的集合
key : value
每个键值对之间使用,分隔
键与值之间使用:分隔
value可以为任意类型的值
5.类型判断
typeof 判断数据类型
typeof 数据
typeof(数据)
返回数据类型的小写字符串表现形式
6.赋值比较
= 赋值
== 是否相等 数据
=== 是否相等 数据+类型
先比较类型后比较数据值
逻辑运算符
&& 两个都是真才是真,一个假就是假
如果两端出现非boolean类型的操作数:
先把第一个操作数转为boolean.如果为false,最终的结果为第一个操作数,如果为true,结果为 第 二个操作数
|| 一个为真就是真,两个都为假才是假
如果两端出现非boolean类型的操作数:
先把第一个操作数转为boolean.如果为true,最终的结果为第一个操作数.如果为false,结果为 第二个操作数
具有短路的特点
! 非
7.类型转换
隐式类型转换 | 自动
在进行一些其他操作运算的时候,目的不是为了发生类型转换,而在运算过程中会默认自动 发生类型转换,这种类型转换成为隐式类型转换
一般为四则运算 + - * / ..
列如:
console.log(1+false);
console.log(1+'a');
console.log(false-'a')
显示类型转换 | 强制
任意类型都可以转换为一下三种类型 : String Number Boolean
Number(数据)
String(数据)
Boolean(数据)
注意: 对象类型,函数类型不参与类型转换
Number(数据)
String
'' 空串 -> 0
' ' 空格字符串 -> 0
'123' 纯数字字符串 数字
'123abc' 非纯数字字符串 NaN
Boolean
false ->0
true ->1
Null -> 0
Undefined -> NaN
Boolean()
String
'' false
' ' true
其他字符串 true
Number
0,NaN ->false
非0数字 ->true
Null ->false
Undefined ->false
7.赋值和数组
赋值:
= 赋值
== 是否相等 数据
=== 是否相等 数据+类型
先比较类型后比较数据值
逻辑运算符
&& 两个都是真才是真,一个假就是假
如果两端出现非boolean类型的操作数:
先把第一个操作数转为boolean.如果为false,最终的结果为第一个操作数,如果为true,结果为第二个操作数
|| 一个为真就是真,两个都为假才是假
如果两端出现非boolean类型的操作数:
先把第一个操作数转为boolean.如果为true,最终的结果为第一个操作数.如果为false,结果为第二个操作数
具有短路的特点
! 非
数组:
数组 : 存储多个数据
可变长,长度根据跟随数据的增删动态的改动
索引,可以根据索引操作数组中的数据
数组的索引可以跟随数据的改动进行动态修改
如果数组存在,索引位置存在,但是没有赋值,默认undefined
js中的数组中可以存放任意类型的数据
创建方式:
1.字面量的创建方式 [数据1,数据2...] -> 推荐
2.new Array() 空数组
3.new Array(值1,值2...)
数组的长度: 数组名.length
数组的索引 : 从0开始,每次+1
操作数组中的数据:
跟随索引操作
数组名[索引值]
8.数组常用方法
数组常用方法:
slice 截取(切片)数组,原数组不发生变化
1个参数 起始索引,默认截取到最后
2个参数 起始索引 结束索引 结束索引位置不包含
splice 剪接数组,原数组变化,可以实现前后删除效果
1个参数 起始索引 实现删除与截取的效果
2个参数 起始索引 删除|截取个数 实现删除与截取的效果
3个往上 起始索引 个数 从第三个参数开始后面所有的参数为要替换的新数据 替换,截取
9.函数
函数 : 定义功能的实现
函数声明 :
function 函数名(参数列表){
函数体;
return 返回值;
}
函数的调用:
1)函数名(实参) -> 执行函数中的代码
2)把函数声明转为函数表达式进行自调用
转换方式: 在函数声明的开始位置添加!,~,+,-
函数表达式
var 变量名 = function 函数名(形参){
};
函数的调用:
1)变量名(实参);
2)在函数的最后直接添加()进行自调用
注意:
1.在js中所有的函数都存在返回值,没定义返回值默认undefined
2.形参与实参可以不一一对象,如果没有对应的实参,形参的默认值undefined
3.函数表达式中的函数名一般省略不写,不可用来调用函数,只有在发生递归的时候有用
作用域 : 函数
块: {} 具有语义化的特点
函数的作用域提升 : 把函数声明方式定义的函数提升到当前作用域的最上面
变量的作用域提升 : 把通过var定义的变量的变量的声明,提升到当前作用域的最上面
注意:
js中的函数可以任意嵌套