JavaScript基础（一）

最新推荐文章于 2023-08-06 08:23:15 发布

孤影&碧空

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量324

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_50315078/article/details/126294522

版权

1.JavaScript是什么

在这里插入图片描述

JavaScript的组成部分
- BOM\DOM\ECMAScript
BOM–Browser Object Model
- JS 操作浏览器发生变化的属性和方法
DOM— Document Object Model
- JS 操作文档流发生变化的属性和方法
ECMAScript
- JS 的书写语法和书写规则

2.JavaScript的书写位置

1.行内式

<body>
  <!-- a 标签书写行内式 js 代码 -->
  <a href="javascript: alert('hello world') ;">点我一下</a>

  <!-- 非 a 标签书写行内式 js 代码 -->
  <div onclick=" alert('hello world') ">点我一下</div>
</body>

2.内嵌式

<body>
  <script>
    alert('hello world')
  </script>
</body>

3.外链式

<body>
    /*引入js文件*/
  <script src="./test.js"></script>
</body>

text.js

alert('hello world')

3.JS定义变量

var num = 100

在这里插入图片描述

4.JS注释

1.单行注释：

//这是js单行注释

2.多行注释

/*这是js多行注释，

可以换行书写

*/

5.JS打印输入

1.alert

alert('Hello world!')

在浏览器弹窗显示

2.console.log

console.log('Hello world')

在控制台打印

3.document.write

document.write('Hello world')

直接在页面输出

在这里插入图片描述

6.JS数据类型

1.基本数据类型

1.数值类型

整数、浮点数（小数、分数）、科学计数法等都属于数值类型

在这里插入图片描述

2.字符串类型

以单双引号包含的都是字符串类型，单双引号没有区别

3.布尔类型

true/false

4.空类型

Undefined
- 表示没有值
Null
- 表示有一个值，是空值

2.引用数据类型

3.使用typeof检测数据类型

在这里插入图片描述

var result = typeof var1

4.数据类型的转换

1.转数值

var n1 = Number(var1)

NaN表示转换的东西并非一个合法数字

var n1 = parseInt(var1)

parseInt会一个一个对比，只有第一个不是整数就会出现NaN,如果前面是整数，后面不是就会显示前面的整数，而不是NaN

var v1 = parseFloat(var1)

2.转字符串

①String( )

② . toString( )

3.转布尔

①Boolean( )

结果：true or false
会转换为false的内容：
- 0
- NaN
- ‘’(空字符串）
- undefined
- null

7.运算符

1.算术运算符

在这里插入图片描述

2.赋值运算符

在这里插入图片描述

3.比较运算符

在这里插入图片描述

全等于必须数据类型与值都相同才为真

4.逻辑运算符

在这里插入图片描述

5.自增与自减运算符

①++

②–

在这里插入图片描述

8.条件分支语句

在这里插入图片描述

9.经典案例–平年还是闰年

在这里插入图片描述

<script>

  // 定义一个变量表示年份信息
  var year = 2078
  // 书写 if 语句进行判断
  if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
    console.log(year + ' 是闰年')
  } else {
    console.log(year + ' 不是闰年')
  }

<script>

10.条件分支语句–switch

在这里插入图片描述

注意每个case语句后面必须写default，否则会向下穿透

11.循环结构语句–while

在这里插入图片描述

12.循环结构语句–do while

在这里插入图片描述

13.循环结构语句–for

在这里插入图片描述

14.函数

1.函数的定义

在这里插入图片描述

2.函数的调用

语法：
- 函数名( )

3.形参与实参

在函数定义时的参数叫做形参，实参指的是调用函数式给的参数

4.函数的返回值

在函数内使用return关键字给函数添加一个结果作为函数的返回值

5.递归函数

递归函数就是函数调用自己

15.作用域

作用域指的是一个变量可以在什么范围内使用

在这里插入图片描述

16.对象数据类型

1.对象的定义

var object={

hair:'none',

head:'yes'

}

2.对象的操作

//准备一个空对象
var obj={ }
//增加成员
obj.name = '小灰灰'
obj['age'] = 18
obj.gender = '男'

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

//修改
obj.name = '灰太狼'
obj['age'] = 20

//查
console.log(obj.name)
console.log(obj['age'])

17.数组数据类型

数组：有序的，数据的集合
索引是从零开始
中间的数据类型没有限制

var arr = [100,200,300,400]
//获取数组长度
console.log(arr.length)
//修改数组长度：
arr.length = 3
//获取数据中索引为2的数据
console.log(arr[2])
//修改数组中索引为2的值
arr[2] = 100

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

18.数组常用方法

1.push

在这里插入图片描述

2.pop

在这里插入图片描述

3.unshift

在这里插入图片描述

4.shift

在这里插入图片描述

5.reverse

在这里插入图片描述

6.splice

在这里插入图片描述

7.sort

默认是位操作，所以a-b代表从小到大排序，b-a表示从大到小排序

在这里插入图片描述

8.join

在这里插入图片描述

9.concat

在这里插入图片描述

10.slice

在这里插入图片描述

11.indexOf

在这里插入图片描述

12.forEach

在这里插入图片描述

arr表示原始数组

13.map

在这里插入图片描述

  // 准备一个原始数组
  var arr = [ 100, 200, 300, 400 ]
  // 输出一次
  console.log( arr )

  // 执行 map 方法
  var res = arr.map( function (item, index, arr) {
	
    // 以 return 的方式书写映射条件    
      return item * 10
  } )
  // 输出返回值
  console.log( res )

在这里插入图片描述

14.filter

在这里插入图片描述

  // 准备一个原始数组
  var arr = [ 100, 200, 300, 400 ]
  // 输出一次
  console.log( arr )

  // 执行 filter 方法
  var res = arr.filter( function (item, index, arr) {
	
    // 以 return 的方式书写过滤条件   
      return item > 150
  } )
  // 输出返回值
  console.log( res )

15.every

在这里插入图片描述


  // 准备一个原始数组
  var arr = [ 100, 200, 300, 400 ]
  // 输出一次
  console.log( arr )

  // 执行 every 方法
  var res = arr.every( function (item, index, arr) {
	
    // 以 return 的方式书写条件    
      return item > 150
  } )
  // 输出返回值
  console.log( res )

16.some

在这里插入图片描述

  // 准备一个原始数组
  var arr = [ 100, 200, 300, 400 ]
  // 输出一次
  console.log( arr )

  // 执行 some 方法
  var res = arr.some( function (item, index, arr) {
	
    // 以 return 的方式书写条件    return item > 150
  } )
  // 输出返回值
  console.log( res )

17.总结

在这里插入图片描述

19.字符串常用方法

1.charAt

在这里插入图片描述

2.toLowerCase

在这里插入图片描述

3.toUpperCase

在这里插入图片描述

4.replace

注意只能替换一次

在这里插入图片描述

5.trim

在这里插入图片描述

6.split

在这里插入图片描述

7.substr\substring\slice

在这里插入图片描述

substring与slice都是左闭右开

8.总结

在这里插入图片描述

20.数字常用方法

1.random

在这里插入图片描述

注意Math开头字母必须大写

2.round

在这里插入图片描述

3.ceil&floor

在这里插入图片描述

4.pow

在这里插入图片描述

5.sqrt

在这里插入图片描述

6.abs

在这里插入图片描述

7.max

在这里插入图片描述

8.min

在这里插入图片描述

9.PI

在这里插入图片描述

10.案例–获取范围内的整数

在这里插入图片描述

11.总结

在这里插入图片描述

21.时间常用方法

1.创建时间对象

时间(Date)
var time = new Date()

    // 时间对象

    // 第一段
    // // 创建一个时间对象
    // var time = new Date()

    // // 输出一次
    // console.log( time )

    // 第二段
    // 创建一个时间对象
    var time = new Date( 2002, 1, 23, 11, 22, 18 )

    // 输出一次
    console.log( time )

2.获取时间中的信息

序号	方法名	说明
1	`时间对象.getFullYear()`	年份
2	`.getMonth()`	月份
3	`getDate()`	日期
4	`getHours()`	小时
5	`getMinutes()`	分钟
6	`getSeconds()`	秒
7	`getDay()`	星期
8	`getTime()`	时间戳

 // 时间对象
// 创建一个时间对象
var time = new Date( 2021, 2, 31, 9, 40, 25 )

// 输出一次
console.log( time )

// 获取时间对象中的年份信息
var year = time.getFullYear()

// 输出年份信息
console.log( year )

// 获取时间对象中的月份信息
var month = time.getMonth()

// 输出月份信息
console.log( month )

// 获取时间对象中的日期信息
var date = time.getDate()

// 输出日期信息
console.log( date )

// 获取时间对象中的小时信息
var hours = time.getHours()

// 输出小时信息
console.log( hours )

// 获取时间对象中的分钟信息
var minutes = time.getMinutes()

// 输出分钟信息
console.log( minutes )

// 获取时间对象中的秒钟信息
var seconds = time.getSeconds()

// 输出秒钟信息
console.log( seconds )

// 获取时间对象中的星期信息
var week = time.getDay()

// 输出星期信息
console.log( week )

// 获取时间对象中的时间戳信息
var ms = time.getTime()

// 输出时间戳信息
console.log( ms )

3.设置时间中的信息

    // 时间对象

    // 创建一个时间对象
    var time = new Date()

    // 输出一次
    console.log( time )

    // 设置年份信息
    time.setFullYear( 2002 )
    // 设置月份信息
    time.setMonth( 1 )
    // 设置日期信息
    time.setDate( 23 )
    // 设置小时信息
    time.setHours( 11 )
    // 设置分钟信息
    time.setMinutes( 22 )
    // 设置秒钟信息
    time.setSeconds( 18 )

	//time.setTime(数字)，传递一个时间差

    // 再次输出时间对象
    console.log( time.getTime() )

4.获取时间差

   // 案例 - 时间差

    // 第一段
    // // 1. 准备两个时间节点
    // var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
    // var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

    // // 2. 获取到两个时间节点的时间戳
    // var ms1 = time1.getTime()
    // var ms2 = time2.getTime()

    // // 3. 两个时间戳相减得到相差的毫秒数
    // var sub = ms2 - ms1

    // // 输出一下相差的毫秒数
    // console.log( sub )

    // 第二段
    // // 1. 准备两个时间节点
    // var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
    // var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

    // // 2. 获取到两个时间节点的时间戳
    // var ms1 = time1.getTime()
    // var ms2 = time2.getTime()

    // // 3. 两个时间戳相减得到相差的秒数
    // var sub = Math.ceil( (ms2 - ms1) / 1000 )

    // // 输出一下相差的毫秒数
    // console.log( sub )


    // 第三段
    // // 1. 准备两个时间节点
    // var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
    // var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

    // // 2. 获取到两个时间节点的时间戳
    // var ms1 = time1.getTime()
    // var ms2 = time2.getTime()

    // // 3. 两个时间戳相减得到相差的秒数
    // var sub = Math.ceil( (ms2 - ms1) / 1000 )

    // // 4. 开始换算
    // // 4-1. 换算天
    // var day = Math.floor( sub / ( 60 * 60 * 24 ) )
    // // 4-2. 换算小时
    // var hours = Math.floor( sub % ( 60 * 60 * 24 ) / ( 60 * 60 ) )
    // // 4-3. 换算分钟
    // var minutes = Math.floor( sub % ( 60 * 60 ) / 60 )
    // // 4-4. 换算秒钟
    // var seconds = sub % 60

    // console.log(day, hours, minutes, seconds)


    // 第四段
    // 1. 准备两个时间节点
    var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
    var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

    // 准备一个函数, 接受两个参数
    function getDiff( time1, time2 ) {

      // 获取到两个时间节点的时间戳
      var ms1 = time1.getTime()
      var ms2 = time2.getTime()
      // 两个时间戳相减得到相差的秒数
      var sub = Math.ceil( (ms2 - ms1) / 1000 )
      // 开始换算
      var day = Math.floor( sub / ( 60 * 60 * 24 ) )
      var hours = Math.floor( sub % ( 60 * 60 * 24 ) / ( 60 * 60 ) )
      var minutes = Math.floor( sub % ( 60 * 60 ) / 60 )
      var seconds = sub % 60

      return { day: day, hours: hours, minutes: minutes, seconds: seconds }

    }

    // 需要获取 time1 和 time2 之间的时间差
    var res = getDiff( time1, time2 )
    console.log(res)

22.BOM操作

Browser Object Model

1.获取浏览器窗口尺寸

在这里插入图片描述

2.浏览器的弹出层

在这里插入图片描述

    // 浏览器的弹出层

    // 提示框
    // window.alert( '欢迎光临' )

    // 询问框
    // var res = window.confirm( '你爱我吗 ?' )

    // // // 输出返回值--true or false
    // console.log( res )

    // // 输入框
    var res = window.prompt(' 请输入您的银行卡密码 ')

    // // 输出返回值
    console.log( res )

3.开启和关闭标签页

在这里插入图片描述

  // 开启按钮的点击事件
    on.onclick = function () {
      // 开启标签页
      window.open( 'http://www.mobiletrain.org/' )
    }

    // 关闭按钮的点击事件
    off.onclick = function () {
      // 关闭标签页
      window.close()
    }

4.浏览器常见事件

在这里插入图片描述

    // // 资源加载完毕
    // window.onload = function () {
    //   console.log( '资源已经加载完毕' )
    // }


    // 窗口尺寸改变
    // window.onresize = function () {
    //   console.log( '窗口尺寸发生变化了' )
    // }

    // 滚动条位置改变
    window.onscroll = function () {
      console.log( '滚动条位置改变了' )
    }

5.浏览器的历史记录操作

在这里插入图片描述

6.浏览器卷去的尺寸

在这里插入图片描述

在有标签的时候可以使用第一个
否则使用第二个

    // 滚动条位置变化
    // window.onscroll = function () {
    //   // 有 DOCTYPE 标签
    //   // console.log( document.documentElement.scrollTop )
    //   // // 没有有 DOCTYPE 标签
    //   // console.log( document.body.scrollTop )

    //   // 兼容
    //   var height = document.documentElement.scrollTop || document.body.scrollTop
    //   console.log( height )
    // }

    window.onscroll = function () {
      // 有 DOCTYPE 标签
      // console.log( document.documentElement.scrollLeft )
      // // 没有有 DOCTYPE 标签
      // console.log( document.body.scrollLeft )

      // 兼容
      var height = document.documentElement.scrollLeft || document.body.scrollLeft
      console.log( height )
    }

7.浏览器滚动到

在这里插入图片描述

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body { width: 3000px; height: 3000px; }

    button { position: fixed; bottom: 50px; right: 50px; }
  </style>
</head>
<body>

  <button id="go"> 走你 </button>
  <script>
    // // 按钮添加点击行为
    // go.onclick = function () {
    //   // 浏览器滚动到指定位置
    //   window.scrollTo( 300, 400 )
    // }
    // 按钮添加点击行为
    go.onclick = function () {
      // 浏览器滚动到指定位置
      window.scrollTo({
        left: 300,
        top: 400,
        behavior: 'smooth'
      })
    }
  </script>
</body>

8.总结

在这里插入图片描述

23.JavaScript的定时器

1.间隔定时器

按照指定周期(毫秒)去执行指定的代码

在这里插入图片描述

    // 间隔定时器
    // 书写一个定时器
    setInterval(function () {
      console.log( '执行一次' )
    }, 1000)

2.延时定时器

在固定的时间(毫秒)后指定一次代码

在这里插入图片描述

    // 间隔定时器
    // 书写一个定时器
    setTimeout(function () {
      console.log( '执行一次' )
    }, 1000)

3.定时器的返回值

在这里插入图片描述

    // 定时器返回值
    // 书写第一个定时器
    var timer1 = setInterval(function () {}, 1000)
    // 书写第二个定时器
    var timer2 = setTimeout(function () {}, 1000)
    // 输出返回值，表示当前页面的第几个定时器
    console.log( 'timer1 : ', timer1 )
    console.log( 'timer2 : ', timer2 )

作用，用来关闭定时器

4.关闭定时器

在这里插入图片描述

可以相互关闭，不区分类型

    // 定时器返回值
    // 开启定时器
    // 书写第一个定时器
    var timer1 = setInterval(function () {
      console.log('间隔定时器')
    }, 1000)
    // 书写第二个定时器
    var timer2 = setTimeout(function () {
      console.log('延时定时器')
    }, 3000)
    // // 给按钮绑定点击事件
    off.onclick = function () {
      // 关闭定时器
      clearInterval(timer1)
      clearInterval(timer2)
    }