javascript笔记和代码

JavaScript

一、JavaScript简介

1.什么是javascript

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

web前端三层：

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

2.JavaScript作用

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

二、引用方式

1.内联方式

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

script可以放在页面的任意位置，一般放在头部

<script>
        alert("hello javascript");
</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 onmouseover="alert('走开')">把鼠标移上来</div>

3.外部方式

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

<script type="text/javascript" src="js/hello.js"</script>

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

三、基本语法

1.变量

变量是用来存储常量的量

常量就是固定值—常数项

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

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

在ECMAscript 6规范当中新增let关键字，可以声明变量

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

注：在IDEA中配置ES版本：settings—>language&frameworks—> javascript language version

变量的命名规则：

1）由字母、数字、下划线、汉字组成

2）由字母、下划线开头

3）不能和系统关键字重名

4）区分大小写

2.输入和输出

输出：

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

输入：

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

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

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

3.转义字符

常用转义符：

• \n 换行
• \t 缩进
• " 双引号
• ’ 单引号
• \ \ 斜杠

4.注释

单行 //

多行 /* */

5.编码规范

代码是区分大小写

每个语句以分号结尾

代码注意缩进

四、核心语法

1.数据类型

常量：具体值，不变的量 —常数项

变量：变化的值，存储常量的值

基础数据类型：

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

类型转换：

• 转换number

  使用Number()、parseInt()、parsefloat()

• 转换为字符串

  拼接一个空字符串

• 转换为Boolean

  使用Boolean()

注意： 0、空字符串、null、undefined、NaN都会被转换为false,其它值会被转换为ture

2.运算符

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

关系运算符： > < >= <= == === !=

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

逻辑运算符： && || !

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

3.选择结构

if else switch

4.循环结构

while do while for

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...],
    ...
]

6.函数

6.1 自定义函数

语法：

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

注意：

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

变量的作用域：

• 局部作用域

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

• 全局作用域

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

• 块级作用域

  使用let关键字，只能在声明他的代码块中访问

6.2回调函数

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

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

应用场景:

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

6.3匿名函数

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

应用场景：

• 用于函数的回调

  window.onclick = function () {
       
      console.log('111');
  };
  

• 用于一次性执行的函数，会自动执行，称为自执行函数

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

6.4箭头函数

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

var c = (x,y) => {
   
    var sum = x+y;
    return sum;
};

五、符合类型

1.string

1.1定义方式

语法：

var str = 'welcome to JS!';  //基本数据类型
var str = new String('welcome'); //引用数据类型

使用length属性获取字符串的长度

1.2常用方法

方法名	说明
charAt()	返回在指定索引位置的字符，也可以使用[索引]的方式
indexOf()	返回某个指定的字符串在字符串当中首次出现的位置
lastindexOf()	返回某个指定的字符串在字符串当中最后出现的位置
toLowerCase()	将字符串转换为小写
toUpperCase()	将字符串转换为大写
subString()	提取字符串中两个指定索引号之间的字符串，左闭右开
repalce()	将指定的字符串替换成新字符串
solit()	把指定的字符串分割为字符串数组
trim()	去除字符串前后空格

2.Date

2.1定义方式

语法：

var date = new Date(); //定义一个日期对象，表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年月日时分秒
var date = new Date(millsSecond)； //参数为当前时间与1970-1-1相差的毫秒数

2.2常用方法

方法名	说明
getFullYear	以四位数字返回年份
getMonth()	返回月份[0，11]，0表示1月
getDate()	返回一个月中的某一天(1-31)
getHours()	返回小时[0,23]
getMinutes()	返回分钟[0,59]
getSeconds()	返回秒数[0，59]
getmilliseconds()	返回毫秒[0,999]
getDay()	返回一周中的某一天[0,6] 0表示周日
getTime()	返回从1970-1-1 0：0：0至今的毫秒数

setXxx方法与getXxx方法一样

3.JSON

3.1JSON简介

javascript object notation 是一种轻量级的数据交换格式，用于表示javascript对象的一种方式

采用与编程语言无关的文本格式，易与阅读和编写，同时也易于解析和生成

3.2基本用法

语法：{"属性名":"属性值","属性名":"属性值",...}

注意：

• json结构是由一系列的键值对所组成的，称为JSON对象
• 属性名必须用双引号括起来

使用：

• 简单的JSON对象
• 复合属性&#x