Js笔记

JavaScript

一、JavaScript简介

1.什么是JavaScript

JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

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

2. JavaScript作用

• 在客户端浏览器上动态的操作页面
• 在客户端浏览器上做数据的校验
• 在客户端上发送异步请求

二、引用方式

1.内联方式

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

JavaScript标签可以放在页面的任意位置，一般放在head中

    <script>
        js代码
    </script>

2.行内方式

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

提示：什么是事件属性？----面向对象

eg：对象----外观修饰----CSS实现

​ 行为、事件-----某一时间发生的对象不一样，所引发的反应也不相同多态性

    <!--2.行内方式-->
    <input type="button" value="点我" onclick=alert("我被点,晕了")>
    <!--<a href="" onclick="alert"('超链接被触发')>超链接</a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

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

3.外部方式

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

    <!--3.外部方式-->
    <script type="text/javascript"          src="js/hello.js"></script>

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

三、基本语法

1.变量

变量是用来存储常量的量

常量就是固定值----常数项

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

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

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

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

注：在IDEA中配置ES版本settings—language&frameworks—javascrit=—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类型，表示数值类型
• bollean布尔
• null空类型
• undefined未定义类型

类型转换：

• 转换number

  使用Number（）、parseint（）、parseFloat（）

• 转换为字符串

  拼接空字符串

• 转换为布尔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：结束本次循环，返回到条件判断处继续进行下一次执行循环的条件判断

 var str='welcome';//可以将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
            console.log(index);//输出str的索引
            console.log(str[index]);
            
        }

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	将数组元素使用指定的分割字符串连成字符串，默认通过逗号连接
indexOf（）	返回指定元素在数组中首次出现的位置
slice（begin，end）	截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString	将数组转换为字符串

5.3 二维数组

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

var arr = new Array();//定义一个具有m行个元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值；

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