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>
