JavaScript

JavaScript是什么？

HTML是一个页面的骨架

CSS是页面的样式，主要决定是什么样子的

JS决定页面的行为，来决定页面的变化

组成

BOM：指操作浏览器的部分

DOM：操作文档流的内容

ECMAScript：JS的书写语法和书写模式

书写位置

行内式（不推荐）：直接把代码书写在标签身上

a标签：书写在href的属性上

非a标签：书写在行为属性上

内嵌式：把代码放在script标签对内

内嵌式js代码，不需要依赖行为，打开就可以实现

外联式（推荐）：把代码书写在一个.js文件内

在script标签上放一个src来指定js代码的路径

JS变量

在程序运行中保存的一个中间值

格式：js中=是赋值的意思，一个变量只能存储一个值，变量命名规则同java一样

var bum = 100

//在浏览器弹窗显示num的值
alert(num)

//在控制台打印num的值
console.log（num）

//直接在页面输出num的值
document.write（num）

JS数据类型

基本数据类型

数值类型：所有数字（number）

字符串类型：单引号和双引号包裹的内容都是字符串，不区分单双引（string）

布尔类型：true（真），false（假）（boolean）

空类型：  null：表示有值，有一个空值（object）

                undefined：表示没有值（undefined）

使用typeof关键字来进行数据类型检测

var n1 = 100
var result = typeof n1
console.log = result
//浏览器控制台输出number

引用数据类型

null

数据类型转换

转数值：把其他数据类型转为数值类型

Number（"要转换的内容"），可以转换为合法数字就是数字，不合法就是Nan

parseInt（"要转换的内容"），和number是一样的

parseFloat("要转换的内容")，和parseInt一样，可以解析小数

var a = '100'
var b = number(a) // 100


var a = 'abc'
var b = number(a) // Nan

var a = '100abc'
var b = number(a) // 100



var a = '100'
var b = parseInt(a) // 100

var a = 'abc'
var b = parseInt(a) // Nan

var a = '100abc'
var b = parseInt(a) // 100

var a = '100.234'
var b = parseFloat(a) // 100



var a = '100.234'
var b = parseFloat(a) // 100.234

转字符串：把其他数据类型转为字符串类型

var a = true
String(a) // true String


var a = true
a.toString // true String

转布尔：把其他数据类型转为布尔类型

 false:0 NaN '' undefined null 其余一律为true

var a = "abc"
Boolean(a) //true

JS运算符

算数运算符：+（都是数值，加法运算，有一个为字符串，就做拼接）-，*，/，%（余数）

赋值运算符：=，+=，-=，*=，/=，%=（和java一样）

比较运算符：>，<，>=，<=，==（值比较，不考虑数据类型），===（全等，先比较数据类型，在比较值），！=（不考虑数据类型），！==（考虑数据类型）

逻辑运算符：&&，||，！（和Java一样）

自增自减运算符：++，--（和java一样）

条件分支语句

和java一样

函数

函数就是一个盒子，里面能够承载一段代码，起个名字就是函数了

函数定义阶段：装在盒子里面的代码，定义在函数内部使用的变量

形参：一个特殊的变量

特殊：只能在函数中使用，在函数调用时使用

//定义一个函数
function fn(){
console.log("这是一个函数")
}


//调用一个函数  一次定义，多次调用
fn()

函数调用阶段：把盒子中的代码执行 

实参：在函数调用的时候给形参进行赋值

递归函数:一个函数调用了自身，并设置了结束条件，这个函数才是一个正确的递归函数

function fn(n){
if(n === 1) return 1;
return n*fn(n-1)
} 

作用域

一个变量可以在什么范围进行使用

范围：

全局作用域：一个页面就是一个全局作用域

私有作用域：只有函数 生成私有作用域

使用：

定义：声明在什么位置的变量就是哪一个作用域的变量

访问：自己有用自己的，没有用父级，全局没有就报错

赋值：自己有给自己的赋值，自己没有给父级赋值，全局没有定义一个

对象数据类型

键值对的集合，对象内的值可以是任何数据类型

var obj = {hair: '书名'}

对象的操作：增删改查

var obj = {}

//增加 
obj.name = '小灰狼'
obj['age']= 18
obj.gender = ‘男’

console.log（obj）//{name：‘小灰狼’，age：18，gender：‘男’}


//删除一个键值对
//语法一
delete obj.name
//语法二
delete obj['age']

console.log（obj）//{gender：‘男’}

//修改一个键值对
obj.name = ‘小绵羊’

console.log（obj）//{name：‘小绵羊’，age：18，gender：‘男’}


//查
console.log（ obj.name）//{name:"小绵羊"}
console.log（obj['age']）//{age：18}

数组数据类型

有序的数据的集合

var arr = [100,true,'hello world']
    序号    0   1      2

操作

长度的操作和数据的操作

var arr = [100,true,'hello world']

//获取数组的长度
console.log（arr.length）//3

//修改一下数组的长度
arr.length = 2
console.log（arr.length）//2
console.log（arr）//[100,true]

获取数据和设置数据

[100,true,'hello world']

//查询
console.log（arr[1]）//true

//修改
arr[0] = 88
console.log(arr[0])//88

数组的遍历

var arr = [100,200,300,400,500]

//遍历数组
for(var i = 0; i < arr.length;i++){
console.log(arr[i])
}

冒泡排序

var arr = [9,3,6,2,4,1,8,5,7]

//循环遍历数组
for(var j = 0;j<arr.length-1;j++){

    for(var i=0;i<arr.length-1-j;i++){
    if(arr[i]>arr[i+1]}){
  
    var temp = arr[i]
    arr[i]= arr[i+1]
    arr[i+1]=temp
        }
    }
}

数组常用方法

数组.push（数据），将数据追加到数组的末尾

数组.pop（）不需要传递参数，删除数组的最后一个数

数组.unshift（数据），将数据添加到数组的最前

数组.shift，删除数组最前一个数据

数组.reverse（），反转数组

数组.splice（开始索引，多少个，要插入的数据）删除数组中若干数据，并选择是否插入新的数据

数组.sort（），把数组排序

数组.sort（function ( a , b )  { return a - b} ）//从小到大升序

数组.sort（function ( a , b )  { return b - a} ）//从大到小排序

数组.join（连接符），将数组用连接符进行链接成一个字符串

数组.concat（其他数组），将其他数组和数组拼接在一起

数组.slice（开始索引，结束索引），截取数组中的某些数据

数组.indexOf（数据），查询数据所在的位置

数组.forEach（function（item（数组中的每一项），index（索引），arr（原始数组））{}），遍历数组

数组.map（function（item，index，arr）{}），映射数组

数组.filter（function（item，index，arr）{}），过滤数组

数组.evert（function（item，index，arr）{}），判断数组是不是每一项都满足条件

数组.some（function（item，index，arr）{}），判断数组中是否有某一项满足条件

字符串常用方法

帮助我们对字符串进行快速操作

字符串.charAt（索引），获取索引位置的字符

字符串.toLowerCase（），将字符串中的所有字母转换为小写

字符串.toUpperCase（），将字符串中所有字母转换为大写

字符串.replace（换下内容，换上内容），将字符串内第一个满足换下内容的片段替换，只能替换一个

字符串.trim（），去除首尾空格，中间不去除

字符串.split（分隔符），按照分隔符将字符串拆分成一个数组

字符串.substr（开始索引，多少个）

字符串.substring（开始索引，结束索引）

字符串.slice（开始索引，结束索引）截取字符串

数字常用方法

Math.random（），获取0~1之间的随机小数，含0不含1

Math.round（数字），对数字进行四舍五入的取整

Math.ceil（数字），对数字进行向上的取整

Math.floor（数字），对数字进行向下的取整

Math.pow（底数，指数），对数字进行取幂运算Math.pow（2，5）=2的5次方

Math.sqrt（数字），对数字进行二次方根计算（算数平方根）

Math.abs（数字），绝对值运算

Math.max（数字1，数字2，.....）对参数返回最大值

Math.min（数字1，数字2，.....）对参数返回最小值

（属性）Math.PI，得到一个近似pai的值

时间常用方法

//创建时间
var time = new Date（）

var time = new Date(年，月，日，时，分，秒)（0表示1月，11表示12月）

获取：

时间对象.getFullYear（），获取时间对象中的年份信息

时间对象.getMonth（），获取时间对象中的月份信息（0表示1月，11表示12月）

时间对象.getDate（），获取时间对象中的日期信息

时间对象.getHours（），获取时间对象中的小时信息

时间对象.getMinutes（），获取时间对象中的分钟信息

时间对象.getSeconds（），获取时间对象中的秒钟信息

时间对象.getDay（），获取时间对象的星期信息

时间对象.getTime（） ，获取时间对象的时间戳信息

设置（都需要传递参数  ）：

时间对象.setFullYear（），获取时间对象中的年份信息

时间对象.setMonth（），获取时间对象中的月份信息（0表示1月，11表示12月）

时间对象.setDate（），获取时间对象中的日期信息

时间对象.setHours（），获取时间对象中的小时信息

时间对象.setMinutes（），获取时间对象中的分钟信息

时间对象.setSeconds（），获取时间对象中的秒钟信息

时间对象.setTime（） ，获取时间对象的时间戳信息