1.js概述
1.1概述
是基于对象和事件驱动的脚本语言,应用在客户端
基于对象:提供了很多对象,可以直接使用
事件驱动:js实现动态效果
作用:提高用户体验,提高交互效果
1.2 特点
交互性:实现信息的动态交互
安全性:不可以直接访问磁盘上的文件
跨平台性:只要是可以解析js的浏览器都可以使用
1.3 和java之间的关系
对象:
java:面向对象
js:基于对象
数据类型:
java:强类型的语言 例如:double height;int age;
js:弱类型的语言,变量的类型由值决定
1.4 js的组成
a.EMCAScript提供了一套js语法
b.BOM:Brower Object Model,浏览器对象类型
c.DOM:Document Object Model,文档对象模型
1.5 js和html的结合方式
方式一:内嵌式
在head标签中,使用script标签,在script中直接写js代码
方式二:外联式
创建js文件,在js文件中编写js代码,使用script标签在src属性中引入该js文件
细节:
1.两种方式可以同时使用,且可以多次使用,执行顺序与书写顺序一致
2.两种方法不同混合使用
1.6 js中的注解
2.js语法
2.1 变量
2.1.1 变量定义
使用关键字 var
var age=20;
var weight;
weight =80;
2.1.2 变量的命名规则
a.一般可以由数字、字母、下划线、美元符组成
b.不能有数字开头
c.不能包含中文和空格
d.不能和关键字重名
e.严格区分大小写
2.2 数据类型
2.2.1 一般的数据类型
Boolean:布尔类型,只有true和false
Number:数值类型
String:字符串,用一对单引号或者双引号括起来
Object:对象
Array:数组
Funcation:函数类型
RegExp:正则表达式
2.2.2特殊的数据类型
Null:当定义一个变量后,但是这个变量没有 任何指向,那么它的类型就是null
Undefined:定义一个变量,但是没有赋值
NaN:not a number;不是一个数字
2.2.3 Array
2.2.3.1概述
数组是一种特殊的数据类型,用于存放一个或一个以上的元素值
特点:
1.同一个数组可以存放任意类型的元素
2.可以通过push()方法添加元素
2.2.3.2创建
方式一:
var 数组名 = {值1,值2……};
方式二:
var 数组名 = new Array(值1,值2,值3);
var 数组名 = new Array(3);
2.2.3.3 数组的访问
格式:
数组名[下标/索引]
细节:如果下标/索引超出了范围,会报undefind错误
2.2.4Object
2.2.4.1 对象的创建
方式一:构造函数创建对象
var 对象名= new Object();
对象名.属性 = 值;
对象名.方法名 = funcation(){
方法体
}
方法二:对象字面量,使用键值对直接创建对象
var 对象名 = {
属性1:值1,
属性2,值2
方法名:funcation(){
方法体
}
};
2.2.4.2 属性和方法的调用
1.属性的调用
对象名.属性
2.方法的调用
对象名.方法名()
2.3运算符
2.3.1 算术运算符
+:求和,字符串拼接
-
*
/
%:取模,求余数
细节:
1.结果的政府与被模数一致
2.a%b的结果范围是[0,b)
++:自增1
--:自减1
前置后置:
1.单独运算时,前置和后置没有区别
2.复合运算
前置:先执行自增(减),再执行其他操作
后置:先执行其他操作,再执行自增(自减)
2.3.2 逻辑运算符
&&;与 ,并且
||;逻辑或,或者
!;逻辑非,取反
^;异或,表达式两边相同结果为false 表达式两边不同结果为true
2.3.3 关系运算符
大于>
小于>
大于等于>=
小于等于<=
不等!=
==相等,判断值是否相等
===相等,判断值和类型是否完全相等
2.3.4 赋值运算符
=
+=
-=
*=
/=
%=
var a =3;
a=a+3 等价于 a=+3;
a++是先执行百表达式后再自增,执行表度达式时使用的是a的原值。
++a是先自问增再执行表答达示,执行表达式时使用的是自版增后的a。
2.3.5 三目运算符
格式:
条件表达式?表达式1(变量或者常量):表达式2(变量或者常量)
原理:
判断条件表达式的结果,若为true,执行表达式1;否则执行表达式2
2.3.6 typeof操作符
typeof是用来检测变量的数据类型
字符串返回String
整数小数返回number
布尔值返回boolean
数组\json\返回object
2.4流程控制
2.4.1概述
流程控制分为三种:
顺序结构、分支结构、循环结构
2.4.2 分支语句--if
2.4.2.1 单if结构
if(条件表达式){
语句
}
2.4.2.2 双分支结构(标准的if-else结构)
if(条件表达式){
语句1
}else{
语句2
}
2.4.2.3 多分支结构
if(条件表达式1){
语句1
}else if(条件表达式2){
语句2
}else{
}
2.4.2.4嵌套
if(条件表达式1){
if(条件表达式2){
}
}
2.4.3.分支语句--switch
switch(表达式或者变量){
case 常量1:
语句1;
break;
case 常量2:
语句2;
break;
case 常量3:
语句3;
break;
default:
语句4;
break;
}
2.4.4循环语句
2.4.4.1循环语句--while
格式:
while(条件表达式){
循环体
}
2.4.4.2 循环语句--do-while
do{
循环体
}while(条件表达式);
2.4.4.3 for循环
格式:
for(初始化;条件表达式;步进表达式){
循环体
}
3.函数
3.1 自定义函数
3.1.1 概述
函数式被设计为执行待定任务的代码块
函数在被调用时才会执行
3.1.2 语法
格式:
funcation 函数名(参数列表){
要执行的代码(方法体)
}
funcation:函数必须通过funcation关键字进行定义
函数名:就是标识符
参数列表:形式参数,与java相同,但是不需要写数据类型
方法体:要执行的功能
3.1.3 函数调用
情况:
1.事件发生时
2.其他js代码调用时
3.自调用
3.1.4 函数的参数
参数与java中函数的参数相同
定义方法时的参数是形式参数(不需要声明形参的类型)
调用方法时的参数是实际参数。
注:
1.当前同名方法时,后写方法会覆盖前面的方法,当进行调用时,调用的后写方法
2.事件发生时,调用方法的参数是this,表示传递的参数是发生时间的这个标签自身的对象,调用的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//f(3,4);
function calc(obj){
var inp = document.getElementById("inp");
var value = obj.value;
if(value == "="){
//计算
inp.value = eval(inp.value);
}else{
//拼接
inp.value += obj.value;
}
}
</script>
</head>
<body>
<!--
作者:offline
时间:2020-06-05
描述:点击按钮将按钮所对应的数值显示在输入框中
-->
<input type="text" id="inp"/>
<table width="400px" >
<tr>
<td><input type="button" value="0" onclick="calc(this)"/></td>
<td><input type="button" value="1" onclick="calc(this)"/></td>
<td><input type="button" value="2" onclick="calc(this)"/></td>
<td><input type="button" value="3" onclick="calc(this)"/></td>
<td><input type="button" value="+" onclick="calc(this)"/></td>
<td><input type="button" value="-" onclick="calc(this)"/></td>
<td><input type="button" value="=" onclick="calc(this)"/></td>
</tr>
</table>
</body>
</html>
3.1.5 函数返回值
js中的函数没有返回值
使用关键字return进行返回
return的作用:
1.结束方法
2.结束方法的同事将方法的运算结果返回给调用者
3.2 匿名函数
3.2.1 概述
所谓匿名函数,就是没有名字的函数
下面是一个有名字的函数
funcation login(n,m){
//...
return;
}
3.2.2 匿名函数调用
方式一:将此匿名函数用一个变量接收,这个变量名其实就相当于这个函数的函数名
var func = function(i, j, k) {
alert(i + j + k);
}
func(1,2,3);
方式二:自调用方式
(function(){
var obj1 = document.getElementsByTagName("input")[0];
var obj2 = document.getElementsByTagName("input")[1];
obj1.style.color = "red";
obj2.style.background="pink";
})();
方式三:使用事件进行调用
<script type="text/javascript">
//方式三:使用时间进行调用
onload = function(){
var btnObj = document.getElementById("btn");
btnObj.onclick = function(){
alert(btnObj);
}
}
</script>
方式四:将此匿名方法作为对象的方法调用
<script type="text/javascript">
//方式四:将此匿名方法作为对象的方法调用
var person = new Object();
person.show = function(){
alert(666);
};
person.show();
var human = {
print : function(){
alert("abc");
}
};
human.print();
</script>
方式五:将匿名函数作为另一个函数的参数
<script type="text/javascript">
//方式五:将匿名函数作为另一个函数的参数
function f(t){
t();
}
function(){
alert(666);
});
</script>