JavaScript - JavaScript基础 - 《Java 全栈开发》

[TOC]

JS简介

什么是JS — JavaScript的简称，是一种动态脚本语言。
什么是动态页面 — 人机交互静态页面 — 没有人机交互
JS需要安装才能使用吗？ — 不需要
什么是BOM — 浏览器对象模型 DOM — 文档对象模型

详细介绍

JavaScript是一种基于对象和事件驱动的客户端脚本语言，最初的设计是为了检验HTML表单输入的正确性，起源于Netscape公司的Livescript语言

JavaScript的组成：ECMAsxcript（语法）、Browser Objects(DOM BOM 特性)组成

JavaScript的注释和分号

//单行注释
/多行注释/
语句结束还是用分号，如果省略，则由解析器确定语句地结尾

JavaScript的标识符

什么是标识符 — 变量、函数、属性的名字，或者函数的参数。
标识符的命名规则
1. 由字母、数字、下划线(_)或者美元（$）组成
2. 不能以数字开头
3. 不能使用关键字，保留字作为标识符

编写第一个JS程序

使用script标签在HTML中插入JavaScript，编写内部JavaScript ```html <!DOCTYPE html>


2. 引用外部JS文件
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/js1.js"></script>
</head>
<body>

</body>
</html>

JS变量

与其他程序设计语言相同，用来临时存储信息
创建方法如下：弱数据类型
1. var x=1; var x=2,name=”zhangsan”;
2. var x; x=1; var name; name=”lisi”;
注意：Js中的变量，区分类型，但是没有int之类的关键词

JS调试

alert()弹框调试、console.log控制台输出调试
观察变量值的变化规律，是否符合程序设计的目的
语法：
```
alert(flag);
console.log(flag);
```

JS自定义函数

JavaScript函数：自定义函数、内置函数
自定义函数：是完成某一个功能模块的代码段，可以重复执行，方便管理和维护。
创建方法：
1. 这种是函数声明，可以先使用后定义。
```
function fun1(){
代码段;
return;
}
```
  b.这种叫做：函数表达式，必须先定义后使用
```
var fun1 = function(x){
return x+1;
}
```

JavaScript数据类型

ECMAScript：
1. 简单数据类型：
  1. Undefined
  2. Null
  3. Boolean
  4. Number
  5. String
b. ECMAScript6: es6 新增symbol数据类型
c. 复杂数据类型：Object — 对象

1、number — 数字类型，整型、浮点型都包括。

2、string — 字符串类型，必须放在单引号或者双引号中

3、boolean — 布尔类型，只有true和false 2种值

4、undefined — 未定义，一般指的是已经声明，但是没有赋值的变量,派生自null值， undefined==null ——> 返回的是true

5、null — 空对象类型，var a = null; 和 var a = “”;有区别；

特殊类型

object — 对象类型，在js中常见的window document array等
NaN — 是Number的一种特殊类型，isNaN() 如果是数字返回false 不是数字返回true
isNaN() — 说明：对接受的数值，先尝试转换为数值，再检测是否为非数值。
任何涉及NaN的操作（例如NaN/10）都会返回NaN
NaN与任何值都不相等，包括NaN本身。 ```html var id=”16”; console.log(isNaN(id));//false 转换之后是数字

var id=”lisi”; console.log(isNaN(id));//true 转换之后不是数字


<a name="XZHvK"></a>
#### type of

1. 功能：检测变量类型
1. 语法：typeof 变量   或者  typeof(变量)
1. 返回值：string  number    boolean   object  underfined   function

<a name="M3vaS"></a>
#### 类型转换

   - parseInt() - 转换成整型  
   - parseFloat() - 转换成浮点类型，带小数点  
   - Number() - 包括整数和小数  
   - Boolean() - 转换成逻辑类型
1. 强制类型转换       隐式类型转换
1. 案例演示
1. 总结：
   1. 除0之外的所有数字，换换成布尔型都是true
   1. 除""之外的所有字符，转换成布尔型都是true
   1. null和undefined转换成布尔型是false

<a name="WJlgD"></a>
### 变量作用域

1. 全局变量和局部变量
   1. 局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。
   1. 全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。

<a name="Oc6TD"></a>
### 比较运算符

1. 比较运算符：用于比较两个值，结果true或者false
1. 运算符的范围：  >   >=    !=   <   <=
1. 实例：x < 10为true   //x=2

<a name="7hdVm"></a>
### 逻辑运算符

1. 包含逻辑与   或  非   等，结果是true或者false
1. &&   and       ||    or      !   非
1. (x<10&&y>1)    x=2以及y=5    true
   1. 对于&&  两个都是true结果是true，如果有一个false结果是false
   1. 对||    ，其中一个是true结果就是true，两个都是false结果才为false

<a name="T7M2U"></a>
### 三目运算符  --  三元运算符

1. 根据不同的条件，执行不同的操作/返回不同的值
1. 格式：条件？值1：值2；
1. 实例：x>1?"大于":"小于";

<a name="zp7Hd"></a>
### 算数操作符

1. +  加
1. -  减
1. *  乘  
1. /  除
1. %  取余

<a name="g02SW"></a>
### 递增和递减

1. 递增   ++a  与  a++   都是对a进行递增的操作
1. 区别
   1. ++a先返回递增之后的a的值   --  先运算再赋值
   1. a++ 先返回a的原来的值，再返回递增之后的值  --  先赋值在运算
3. 递减同理

<a name="6DZKh"></a>
### 赋值运算符

1. 简单赋值    =
1. 复合赋值   +=  -=   *=    /=  %=

<a name="JtzRW"></a>
### 比较运算符  --  拓展
==：相等，只比较值是否相等。<br />===：全等，比较值得同时比较数据类型是否相等。<br />！=：不相等，比较值是否不相等。<br />！==：不全等，比较值得同时比较数据类型是否不相等。<br />返回都是boolean类型

<a name="e0hLO"></a>
### 运算符的优先级

1. （）   小括号      --    优先级高
1. ++  --   自加  自减
1. *   /    %  乘  除  取余
1. +  -   加  减
1. <  <=   >  >=   逻辑运算
1. ==   !=   等于  不等于
1. &&  逻辑与
1. ||   逻辑或
1. ？： 三目运算符
1. =   赋值     --     优先级低


<a name="7Tu54"></a>
### 程序控制语句

1. 条件判断控制语句
```html
if(判断条件){
}else{
}

多重if嵌套控制语句
```
if(判断条件){
}else if(){
}else{
}
```

多条件分支类控制语句演示

成绩是100分，显示满分
成绩大于等于90，显示优秀
成绩大于等于70，显示良好
成绩大于等于60分，显示及格
否则，不及格
var myscore=55;
var str;
var n=parseInt(myscore/10);
switch(n){
 case 10:
     str="manfen";
     break;
 case 9:
     str="youxiu";
     break;
 case 8:
 case 7:
     str="lianghao";
     break;
 case 6:
     str="jige";
     break;
 default:
     str="bujige";
     break;
}

循环类控制语句

for循环
while循环
do-while循环

for循环
//1+2+3+4+5+。。。。+100=5050
// var i;
// var sum=0;
// for(i=0;i<=100;i++){
//     // sum=sum+i;
//     sum+=i;
// }
// console.log(sum);

//1+2+3+4+5+。。。。+100=5050
//while循环是先判断条件，条件满足了再继续执行
var i=0;
var sum=0;
while(i<=100){
    sum=sum+i;
    i++;
}
console.log(sum);

//1+2+3+4+5+。。。。+100=5050
// do-while:  先执行一次，执行完之后再进行判断
var i=0;
var sum=0;
do{
    sum=sum+i;
    i++;
}while(i<=100);
console.log(sum);

补充 — 弹出输入框

语法：prompt();
弹出输入框
返回值：
1. 点击确定，返回输入的内容
2. 点击取消，返回null

补充 — 字符串的长度

语法：string.length
功能：获取string字符串的长度
返回值：number

内置函数

字符函数
日期函数
数学函数
转化函数

字符函数

var str = "520134199906061234";
//两个参数,索引从0开始，截取到0
//第一个参数表示从哪儿开始，第二个参数表示截取的长度
console.log(str.substr(0,3));
console.log(str.substr(1,3));//
console.log(str.substr(3,6));//起始位置 长度

//两个参数,索引从0开始
//第一个参数：起始位置，第二个参数表示：结束位置，算前不算后
console.log(str.substring(0,3));//520
console.log(str.substring(6,10));//1999
console.log(str.substring(6,11));//起始位置   结束位置

var str="Hello world!";
// console.log(str.substr(0,5));//Hello
// console.log(str.substring(0,5));//Hello

console.log(str.substr(3));//一个参数表示索引位置，截取到最后
console.log(str.substring(3));//一个参数表示索引位置，截取到最后

//charAt()获取字符串  但是根据索引位置获取
var str = "520134199906061234";
console.log(str.charAt(16));//3
var n = parseInt(str.charAt(16));
if (n%2 == 0) {
    console.log("nv");
} else {
    console.log("nan");
}

console.log(str.length);//获取字符串的长度

//indexOf()  参数：索引位置  查找1在str字符串中的第一次出现的位置
//索引从0开始
console.log(str.indexOf(1));//3

//两个参数表示  从索引位置4开始查找，找索引位置4后面的1出现的位置
console.log(str.indexOf(1,4));//6

//有一个自动类型转换  可以加上""
console.log(str.indexOf("1",4));//6

var str="Hello world!";
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("Hello")+"<br/>");//0
//如果某个指定的额字符串在源字符串中不存在，返回-1
document.write(str.indexOf("wwww")+"<br/>");//-1
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("world"));//6
//document.write可以解析html标签
// document.write("<h1 style='color:red;'>渡课</h1>");

//split  --  将字符串有规律的转换成数组  [11,22,33556,0]
// var str = "aa,ttt,121,gg,kk,aa,bb";
// var arr = str.split(",");
// console.log(arr);
// console.log(arr[7]);

var str = "How are you";
console.log(str.split(" ",2));

var str = "aa,ttt,121,gg,kk,aa,bb";
var arr = str.split(",");
console.log(arr);
console.log(arr[0]);
//concat -- 既可以连接字符串，也可以连接数组
console.log(str.concat(",55",",77",",00"));
console.log(arr.concat("55","77","00"));

//replace:替换(配合正则表达式)
//如下写法只会替换第一个符合要求的字符串
var str = "aa,ttt,121,gg,kk,aa,bb";
console.log(str.replace("aa","dodoke"));

//全部替换的功能
console.log(str.replace(/aa/g,"dodoke"));

日期函数

1、日期函数：
(1) Date getDate getDay getMonth getFullYear （getYear） getHours getMinutes getSeconds

//2020-5-20 15:58   日期格式化
function fun_FmtDate(){
    var d1 = new Date();
    var yyyy,mm,dd,hh,mi,ss;
    var time;
    //逻辑代码
    yyyy=d1.getFullYear();
    mm=d1.getMonth()+1;
    dd=d1.getDate();
    hh=d1.getHours();
    mi=d1.getMinutes();
    ss=d1.getSeconds();
    time=yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
    return time;
}
console.log(fun_FmtDate());

数学函数

1、数学函数
(1) Math.round max min abs

//数学函数
var n = 16.654789;
console.log(Math.round(n));//js中round只能取整数，不能保留小数，遵循四舍五入。
//保留小数   遵循四舍五入
console.log(n.toFixed(2));
console.log(n.toFixed(0));//17
//取最小
console.log(Math.min(2,6,81,1));
//取最大
console.log(Math.max(2,6,81,1));
//取绝对值
console.log(Math.abs(-3));
console.log(Math.abs(5));

数组

//声明或者创建一个不指定长度的数组，又称之为实例化创建
// var arrayObj = new Array();
//声明或者创建一个数组并指定长度的数组
// var arrayObj = new Array(5);
//声明或者创建一个带有默认值的数组
// var arrayObj = new Array(2,4,"a","y",8);
//创建一个数组并赋值的简写，又称之为隐式创建数组
var arrayObj = [2,4,"a","y",8];
console.log(arrayObj);
console.log("数组arrayObj的长度为："+arrayObj.length);
//数组的赋值，字符索引下标，数组的遍历
// console.log(arrayObj[0]);//2
// console.log(arrayObj[4]);//8
// console.log(arrayObj[5]);//undefined
for(var i in arrayObj){
    // console.log(str);//获取的是索引值
    console.log(arrayObj[i]);
}

var i;
var n=arrayObj.length;
for(i=0;i<n;i++){
    console.log(arrayObj[i]);
}

数组的栈方法

push()
unshift()
pop()
shift()

push()

把它的参数顺序添加到数组的尾部
arr.push(l1,l2…)
返回值：把指定的值添加到数组后的新长度。返回的是number

unshift()

把它的参数顺序添加到数组的头部
arr.unshift(l1,l2…)
返回值：把指定的值添加到数组后的新长度。返回的是number

pop()

删除arrayObj的最后一个元素
语法：arr.pop()
返回值：被删除的那个元素

shift()

删除arrayObj的第一个元素
语法：arr.shift()
返回值：被删除的那个元素

数组的方法 — join() — reverse() — sort()

掌握数组的转换方法
掌握数组的重排序方法

join()

用于把数组中的所有元素放入一个字符串
语法：arr.join()
返回值：字符串

reverse()

用于颠倒数组中的元素的顺序
语法：arr.reverse()
返回值：数组

sort()
用于对数组的元素进行排序
语法：arr.sort()
返回值：数组
说明：
1. 即使数组中每一项都是数值，sort()方法比较的也是字符串
2. sort()方法可以接收一个比较函数作为参数

数组操作方法 — concat() — slice()

掌握数组的操作方法

concat()

用于连接两个或多个数组
语法：arr.concat(arr1,arr2…)
返回值：数组

slice()

从已有的数组中返回选定的元素
语法：arr.slice(start,end) — 截取
参数：
1. start — 必须规定从何处开始选取，如果是负数，从数组的尾部开始算起
2. end — 可选规定从何处结束选取，是数组片段结束处的数组下标
3. start和end指的是数组中的索引值
4. 截取从start到end（不包含的元素），正确的是从start到end-1的元素 — 算前不算后
返回值：数组

DOM基础

JavaScript由ECMAScript+DOM+BOM组成的。
DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写

课程介绍

如何获取一个元素
如何访问一个元素的样式
如何设置和删除属性

掌握基本的DOM查找方法

document.getElementById() — 根据id获取唯一的一个元素
document.getElementsByTagName() — 返回所有的tag标签引用的集合 — 返回的是数组
document.getElementsByName() — 返回所有的name属性引用的集合 — 返回的是数组
document.getElementsByClassName() — 返回包含带有指定类名的所有元素的集合 — 返回的是数组

设置元素的样式（css）

语法：ele.style.stylName = styleValue
功能：设置元素的样式
说明：
1. ele表示要设置样式的DOM对象
2. styleName表示要设置的样式名称 — 使用驼峰命名方式 — fontSize
3. styleValue — 要设置的样式的值

innerHTML

语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=“html”
功能：设置ele元素开始和结束之前的HTML内容为html

className

语法：ele.classname
功能：返回ele元素的class属性
语法：ele.classname = “cls”
功能：设置ele元素的class属性为cls

如何设置DOM元素属性或添加属性

获取属性

语法：ele.getAttribute(“attribute “)
功能：获取ele元素的属性
说明;
1. ele — 要操作的DOM对象
2. attribute — 是要获取的html属性（id type class）

设置属性

语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：
1. ele — 要操作的dom对象
2. attribute — 要设置的属性名称
3. value — 要设置的attribute属性值

删除属性

语法：ele.removeAttribute（“attribute”）
功能：删除ele元素上的attribute属性
说明：
1. ele — 要操作的对象
2. attribute — 要删除的属性名称

JavaScript对表单元素进行设置

JavaScript对表单操作分为三种：初始化赋值取值

DOM事件

掌握什么是事件
掌握HTML事件
掌握DOM0级事件
掌握常用的鼠标和键盘事件
掌握this的指向

事件

就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
主讲2种：
1. HTML事件
2. DOM0级事件

HTML事件

直接在HTML元素标签内添加的事件，执行脚本。
语法：
功能：在html元素上绑定事件
说明：执行脚本可以是一个函数的调用

鼠标事件

onload — 页面加载时触发
onclick — 鼠标点击时触发
onmouseover — 鼠标滑过时触发
onmouseout — 鼠标离开时触发
onfoucs — 获得焦点时触发 — input标签type为text password / textarea标签
onblur — 失去焦点时触发
onchange — 域的内容发生改变时触发 — 一般作用在select、checkbox、radio

关于this的指向

在事件触发函数中，this是对该DOM对象的引用

DOM0级事件

通过DOM获取HTML元素
（获取HTML元素）.事件 = 执行脚本
语法：ele.事件 = 脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

鼠标事件 — 拓展

onsubmit事件 — 表单中的确认按钮被点击时发生 — 不是加在按钮上而是表单上
onmousedown — 鼠标按钮在元素上按下时触发
onmouseup — 在元素上松开鼠标按钮时触发 — 2和3成就了onclick事件
onmousemove — 在鼠标指针移动时触发
onresize — 当调整浏览器窗口大小时触发
onscroll — 拖动滚动条滚动时触发

键盘事件与keycode属性

onkeydown — 在用户按下一个键盘按键时触发
onkeypress — 在按下键盘按键时发生（只会响应字母和数字符号）
onkeyup — 在键盘按键松开时发生
keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

项目案例图：

总结

DOM：将文档表现为结构化的表示方法，使得每一个页面元素都是可操控的。DOM将网页和脚本以及其他编程语言联系起来。
DOM树：
常见的DOM操作：
(1) getElementById 返回带有指定的ID元素
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
(4) getElementsByName 获取相同名称（name）的元素的所有节点列表

BOM基础

课程介绍：

掌握BOM核心是window对象
掌握什么是BOM
掌握window对象的控制，弹出窗口方法

BOM概念

bom:(browser object model) — 浏览器对象模型

window是浏览器的一个实例

是通过JavaScript访问浏览器窗口的一个接口
又是ecmascript规定的global对象 — 全局对象

window对象的方法

window.alert();
window.confirm(“message”);
1. 点击确定，返回true
2. 点击取消，返回false
window.prompt()
window.open()
window.close()
location对象 — window对象的属性，也是document对象的属性
history.back() — history.go(-1) — 回退
history.forward() — history.go(1) — 前进

JavaScript基础