JS案例，笔记总结

JavaScript

一、JavaScript简介

1、什么是JavaScript？

JavaScript简称JS，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），需要编译，可以直接运行

Web前端三层：

• 结构层HTML定义页面的结构
• 样式层CSS定义页面的样式
• 行为层JavaScript用来实现交互，提升用户体验

2、JavaScript作用

• 在客户端动态的操作页面，eg：购物车
• 在客户端做数据校验
• 在客户端发送异步请求

二、引用方式

1、内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

<script>
    js代码
</script>

2、行内方式

在普通标签中编写js代码，一般需要结合事件属性，如：onclick、onmouseover等

补充：

对象：客观存在的并且可以相互区别的事物，eg：标签 div p span

外观：-----长相-----CSS

行为：-----事件属性-----“我爱你”

<input type="button" value="点我" onclick="alert('我被点了，晕了')">

<!--<div onmouseover="alert('走开')">把鼠标移上来</div>-->

<!--<a href="" onclick="alert('超链接被触发了')">我是超链接</a>-->

<a href="javascript:alert('超链接被触发了')">我是超链接</a>

<!--使用超链接的href属性执行js时，必须添加javascript:-->

3.外部方式

使用单独的js文件定义，然后在页面中使用script标签引入外部脚本文件

<sctipt type="text/javascript" src="js文件的路径"></sctipt>

注意：如果某个script标签用于引入外部的js文件，则该script标签的标签体中不能再写js代码

三、基本用法

1、变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名=常量或表达式；

注意：数据类型：常量（具体值）和变量（存放变量的量）

在ECMAScript6规范中新增let 关键字，也用于声明变量

使用let声明的变量支持块级作用域，而var声明的变量不支持块级作用域

注意：在IDEA中配置ES版本Settings–>language&frameworks–>javascript–>javascript language version

2、输入和输出

输出：

• alert()弹出警告框
• console.log()输出到浏览器的控制台
• document.write()输出到页面

输入：

• prompt()弹出一个输入框，获取用户输入的数据

  使用typeof变量名判断变量的类型

  使用Number(变量名)将字符串转换为数值

3、转义字符

常用的转义字符：

• \n换行
• \t缩进
• \'单引号
• \"双引号

4、注释

单行注释：//

多行注释：/*注释内容*/

5、编码规范

代码是区分大小写

每条语句以分号结尾

代码缩进

四、核心语法

1、数据类型

基础数据类型：

• string字符串
• number数值(NaN表示非数字Not a Number，其自身是number类型，表示数值为不正常状态)
• boolean布尔
• null空类型
• undefined未定义类型

数据类型的转换

• 转换为number

  使用Number()、parselnt()、parseFloat()

• 转换为string

  拼接空字符串

• 转换为boolean

  使用Boolean()

  注：0、空字符串、null、undefined、NaN会被转换为false，其他值都会被转换为true

2、运算符

算术运算符：+、-、*、/、%、**、++、–

比较运算符：>、>=、<、<=、、=、!=

赋值运算符：=、+=、-=、*=、/=、%=、**=

逻辑运算符：&&、||、！

条件运算符：条件？表达式1：表达式2

3、选择结构

if…else…、switch

4、循环结构

while、do…while、for、for…in

break、continue

break：退出整个循环

continue：退出本次循环，继续进行下一次是否执行循环体的条件判断

		//for..in..对集合类型的数据进行遍历
        var str='welcome to JavaScript';
        for(var s in str)
            // console.log(s);
            console.log(srt[s]);

5、数组

5.1定义方式

语法：

var arr = new Array();
var arr = new Array(值1，值2....);
var arr = [值1，值2....];

注：

• 数组的长度会自动扩展
• 数组中元素的默认值为undefined
• 使用length属性来获取到数组的宽度

5.2常用方法

方法	描述
sort()	排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可
reverse()	反转，将数组元素倒序排列
join(separator)	将数组中元素使用指定的分隔符连接成字符串，默认通过逗号链接
indexOf()	返回指定元素在数组中首次出现的位置
slice(begin,end)	截取数组索引从begin到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString()	将数组转换为字符串

5.3二维数组

二维数组可以认为是一个特殊的一维数组，即一维数组中的每个元素又是一个一维数组

语法：

var arr = new Array();
arr[0] = new Array();
arr[1] = new