一、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 οnmοuseοver="alert('走开')">把鼠标移上来</div>-->
 
    <!--<a href="" οnclick="alert('超链接被触发了')">我是超链接</a>-->
 
    <a href="javascript:alert('超链接被触发了')">我是超链接</a>    <!--使用超链接的href属性执行js时，必须添加javascript:-->

3.外部方式

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

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

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

三、基本用法

1、变量

js是一门弱类型的语言，声明变量时使用var 关键字，不需要指定变量的类型
语法：var 变量名=常量或表达式;

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

在ECMAScript 6规范中新增 let 关键字，也用于声明变量
使用let声明的变量支持块级作用域，而 var 声明的变量不支持块级作用域
注意：在IDEA中配置ES版本Settings–>language &frameworks–>javascript–>javasscript 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()、parseInt()、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(str[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(beign,end)	截取数组中索引从begin到end的元素，左闭右开，如果省略第二个 参数，则表示截取到末尾
toString()	将数组转换为字符串

5.3 二维数组

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

语法：

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

6、函数

6.1 自定义函数

语法:

function 函数名(参数1,参数2,...) 
{    
	函数体; 
}

注意：

• 定义函数时不需要指定参数的类型

• 实参个数和形参个数可以不同，未给形参传入实参的，其默认值为undefined

• 不需要指定返回值的类型，如果有返回值，直接使用retrun返回

• 如果函数中没有使用return语句返回值，则默认返回undefined

变量的作用域：

• 局部作用域

​ 在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁

• 全局作用域

  在函数外部声明的变量，在任何位置都可以访问

• 块级作用域

  使用let关键字声明变量,只能在声明它的代码块内访问

6.2 回调函数

不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数 callback

调用时只写函数名，没有小括号()和参数

应用：

• 作为事件绑定的函数
• 作为另一个函数的参数

6.3 匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

• 用于函数的回调

  window.οnclick=function () {    
  		console.log(111); 
  };
  

• 用于一次性执行的函数，会自动执行，称为自执行函数----用于定义一个插件

  (function () {    
  	console.log(333); 
  })()
  

6.4 箭头函数

ES6中允许使用 箭头=>定义函数，称为箭头函数，也叫lambda表达式，是一种特殊匿名函数