javascript笔记

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标签引入外部脚本文件

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

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

三、基本用法

1.变量

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

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

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

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

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

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

2.输入和输出

输出：

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

输入：

• prompt()弹出输入框，获取用户输入的数据
  使用typeof变量名判断变量的类型
  使用number（变量名）将字符串转换为数值

3.转义字符

常用的转义字符：

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

4.注释

单行注释：//

多行注释：/注释内容/

5.编码规范

代码是区分大小写

每天语句以分号结尾

代码缩进

四、核心语法

1.数据类型

基础数据类型：

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

数据类型的转换

• 转换为number
  使用Number()、parselnt()、parsseFloat()
• 转换为string
  拼接空字符串
• 转换为boolean
  使用Boolean
  注：0、空字符串、null、underfind、NaN会转换为false，其他值都会被转换为true

2.运算符

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

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

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

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

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

3.选择结构

if…else…switch

4.循环结构

whilt、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，...]

注：

• 数组的长度会自动扩展
• 数组中元素的默认值为umderfined
• 使用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 Array();
arr[][] = 值;

var arr = [
	[值1，值2,....];
	[值1，值2,....];
	[值1，值2....];
]

6、函数

6.1自定义函数

语法：

function 函数名(参数1，参数2，....)
{
	函数体；
}

注：

• 定义函数时不需要指定参数的类型
• 实参个数和形参个数可以不同，未指定参数时其默认值为undefind
• 不需要指定返回值的类型，如果有返回值，直接使用return返回即可
• 如果函数中没有使用return返回值，则默认返回undefined

变量的作用域：

• 局部作用域
  在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
• 全局作用域
  在函数外声明的变量，在任何位置均可以访问
• 块级作用域
  使用let关键字声明的变量，只能在声明它的代码块中访问

6.2回调函数

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

调用时致谢函数名，没有小括号和参数

应用：

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

6.3匿名函数

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

应用：

• 用于函数的回调
  window.onclick = function(){
  console.log(‘点击了页面’);
  };

• 用于一次性执行的函数，会自动执行，称为自执行函数----定义插件时使用
  (function () {
  console.log(‘此函数只执行一次’);
  })();

6.4i箭头函数

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