1-1 基础知识
- 单行注释:// 内容
- 在网页中按F12可以看到控制台(console)和对所写的代码进行调试。
1-2 赋值语句
var str = '春眠不觉晓'
-
var:声明变量的关键字。浏览器解析看到var就知道它后面跟一个变量。
-
str:变量名称,可以任意取名,但是有一定的命名规则,一般都是命名为有意义的名字,例如:
var age = 19
-
=:赋值符号,这是一种运算符号,其含义是将右面的值赋值给左面的变量。
-
’ ':单引号里面的值是字符串,而数字是不需要加单引号的。双引号也可以,但是为了节省空间,一般采用单引号。
-
;:在JavaScript中,分号可加可不加,分号是用来将两行语句区别开的,换行也可做到,建议不加分号。
1-3 数值类型:
- number:数字类型,例如:
var n=18
其中的18就是数字类型。 - string:引号里面的就是字符串类型。
- bool:布尔类型 只有两个值:true 或false。
- undefined:没有赋值的变量类型,例如:
var aa
中的aa未被赋值,即是undefined类型。
name是窗口对象window的一个属性,而JavaScript中编写window属性的时候是可以省略window的。
===:完全等于(即数值和数值类型都相同才为真)。
2-1 运算符号:
1.算数运算符:+ - * / %
2.浮点数的精度问题:浮点数值的最高精度是17位小数,但是在算术计算时其精度远不如整数,解决方法是:
- 四舍五入法
var num = 2.51515
num = num.toFixed(2)
// 输出结果是:2.52
- 先转化成整数,再 转化为小数:
var a = 0.2
var b = 0.1
console.log((a*10+b*10)/10)
// 输出结果是:0.3
3.递增和递减:
var n=10
n=n+2 // 依次加2
var n=10
n++ // 依次加1
var n=10
n+=2 // 依次加2
**当递增运算单独存在的时候,会先计算递增后的是;但当递增运算存在于其他表达式中,会首先输出n的值,然后再++;如果希望先++,再输出新的值,就需要使用++n。 **
2-2 if语句:
- 用来作流程控制。
if (m>0){
alert('我比较大!')
}else{
alert('我比较小!')
}
// 如果满足条件,则执行我比较大,否则则执行我比较小。
2-2.1 逻辑或(||):
- 只要有其中一个条件满足,那么运算结果就是True。
if (a>m || a<n){
alert('console.log('True')')
}else{
alert('console.log('Flase')')
}
// a>m或者a<n成立时,运算结果为ture。
2-2.2 逻辑与(&&):
- 只有当两个条件都为True的时候,运算结果才为Ture,否则为False。
if (a>m && a<n){
alert('console.log('True')')
}else{
alert('console.log('False')')
}
// 只有当a>m和a<n同时满足时,运算结果才为ture。
2-2.3 逻辑非(!):
相当于取反。
console.log('ture')
的运算结果是True。console.log('!ture')
的运算结果是False。
2-3 for循环:
for(var i=1;i<=10;i++){
console.log('i')
}
// var i:定义变量的初始值,只执行一次。
// i<=10:循环条件,只要i<=10的输出结果是True,就会执行循环体。
3-1 switch语句:
- 使用case后面的值与变量day比较,如果相等,则执行相应case后面的语句。
- 获取计算机当前时间:
var now = new date()
- 获取当前计算机的日期:
var day = now.getDay()
switch语句的应用有局限性,主要在于只能进行 等于 比较。
switch(day):{
case 1:
console.log('学习理论知识')
break
case 2:
console.log('学习理论知识')
break
case 3:
console.log('企业实践')
break
case 4:
console.log('企业实践')
break
case 5:
console.log('总结经验')
break
case 6:
console.log('休息和娱乐')
break
case 7:
console.log('休息和娱乐')
break
}
3-2 使用连接运算符:+
for(var i=1;i<=6;i++){
console.log('这是取出的第'+i+'个球')
}
// 输出结果是:这是取出的第i(i<=6)个球
for(var i=1;i<=6;i++){
console.log(`这是取出的第${i}个球`)
}
// 输出结果是:这是取出的第i(i<=6)个球
3-3 累加案例:
var sum=0
for(var i=1;i<=10;i++){
sum=sum+i
}
console.log(sum)
// 实现的是1-10的和
3-4 while循环:
- 当满足条件的时候,执行循环体里面的内容。
while(i<=6){
console.log(`这是第${i}个球`)
i++
}
// 当i<=6时,执行循环体里面的代码
// 输出结果是:这是第i(i<=6)个球
3-5 循环关键词:
- continue:结束本次循环,继续i++
for(var i=1;i<10;i++){
if(i == 5){
continue
}
console.log(i)
}
// 输出结果是:1 2 3 4 6 7 8 9
- break:结束循环,继续执行循环后面代码。
for(var i=1;i<10;i++){
if(i == 5){
break
}
console.log(i)
}
// 输出结果是:1 2 3 4
4-1 函数:
- 函数的作用是为了做到代码复用,所以不要尝试修改函数代码。
var sum = 0
function he(){ // 定义一个函数使用function
for(var i=1;i<=10;i++){
sum=sum+i
}
console.log(sum)
}
he()
// 输出结果是1-10的和——55
两个undefined变量相加结果为NaN(not a number)表示不是一个数字。
4-2 嵌套for循环:
- 外循环执行一次,内循环执行一遍。
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
console.log(i,j)
}
}
// 输出结果是:(0,0)(0,1)(0,2)(1,0)(1,1)(1,2)(2,0)(2,1)(2,2)
4-3 最大值和最小值
4-3.1 交换变量的值:
- 交换变量的值需要借助其他的变量,不可以直接交换。
m=10
n=20
var temp=m //第一步先把m的值赋值给一个临时变量,m=undefinde,n=20,temp=10
var m=n //第二步再把n的值赋值给m,m=20,n=undefinde,temp=10
var n=temp //第三步把临时变量的值赋值给n,m=20,n=10,temp=undefinde
4-3.2 最大值案例:
// 找出数组中的最大值
var numbers=[3,2,55,6,7,8] // 定义一个数组
var max=number[0] // 假设数组中第一个值是最大值
for(var i=1;i<numbers.length;i++){
if(numbers[i]>max){ /*如果数组中第i个数大于max,则把i个数赋值给max*/
max=number[i]
}
}
console.log(max)
// 输出结果是:55
- 最小值方法与最大值方法相同。
4-3.3 平均数:
- 利用最大值的方法取出一个最大值和一个最小值,再计算平均分。
4-4 打印直角三角形:
for(var i=1;i<5;i++){
for(var j=1;j<=i;j++){
document.write('★') // 在网页中输入文本需要使用document.write()
}
document.write('<br/>') // 在网页中换行
}
// 输出结果是:
★
★★
★★★
★★★★
★★★★★
5-1 冒泡排序:
- 通过比较将数组由小到大排序。
var a=[12,23,1,3,45,7]
for(var i=0;i<a.length;i++){
for(var j=0;j<a.length-i-1;j++){
if(a[j]>a[j+1]){
// 给两个值换位置
var temp=a[j]
a[j]=a[j+1]
a[j+1]=temp
}
}
}
// 输出结果是:1 3 7 12 23 45
5-2 九九乘法表:
// 找到行数与列数的关系,利用for循环完成
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(`${j}*${i}=${i*j} `) //  是空格
}
document.write('<br/>')
}
// 输出结果是:九九乘法表
5-3 作用域:
变量的势力范围,一个变量可以在那里使用。
- 在函数外部定义的变量叫全局作用域,可以在任何地方访问。
- 在函数内部定义的变量叫局部作用域,只能在函数内部访问。
5-4 作用域链:
5-4.1 变量提升:
- 当声明处于使用变量后面时,浏览器会将变量的声明提前,这叫做变量提升。
console.log(a)
var a=10
- 上面的代码真正执行时,浏览器其实将代码改成下面这样:
var a
console.log(a) // 所以输出结果是undefined
a=10
5-4.2 函数提升:
- 当函数的调用放到函数定义前,浏览器会将整个函数的定义放到前面来,这与变量的提升不一样。
f1()
function f1(){
console.log('f1执行起来了!')
}
// 运行结果是:f1执行起来了!
5-4.3 变量的一个访问顺序问题:
var num = 456 // 函数外部是全局作用域
function f1(){ // f1函数是一个局部作用域
var num = 123
function f2(){ // f2函数是一个局部作用域
// 就近原则
console.log(num)
}
f2()
}
f1()
// 全局作用域包括了f1和f2作用域,f1作用域包含了f2作用域
// 运算结果是:123
5-4.4 作用域总结:
1.作用域就是一块内存空间。
2.函数外部叫做全局作用域,定义在全局作用域的变量,在所有地方都可以访问。
3.每个函数内部都是一块局部作用域,定义在局部作用域内的变量,只能在此作用域内部访问,也就是说定义在函数内部的变量,只能在函数内部访问。
4.作用域是有层次的,当在一个作用域内(也就是在一个函数内)访问某个变量时,首先在这个作用域内寻找有没有定义变量,如果定义了,使用此作用域内的变量,如果没有定义,向上一级的作用域中寻找,如果有,就用,如果没有,继续向上寻找,一直寻找到全局作用域中,如果全局作用域中也没有此变量的定义,则会报错:此变量没有定义。
6-1 Math对象:
- Math对象不是构造函数,它具有数学常数和函数的属性和方法,跟数学相关的运算(求绝对值,取整,最大值等)可以使用Math中的成员。
6-1.1 圆周率:
- Math.PI是一种属性,它的功能是圆周率。
var r = 5
console.log(Math.PI*r*r) // Math.PI规定用作圆周率使用
// 输出结果是:78.53981633974483
6-1.2 取整:
- Math.floor(),Math.cell(),Math.round()是一种方法。
1.Math.floor()的功能是向下取整。
var a = 55
var b = 3
console.log(Math.floor(a/b))
// 输出结果是:18(小数点后面的数全部舍掉)
2.Math.ceil()的功能是向上取整。
// 在分页功能中,经常使用Math.ceil()方法进行向上取整。
var totalCount = 51 // 总记录数
var pageSize = 10 // 每页显示的记录数
var page = 1 // 总页数
// %:取余,两个数相除取其余数。
if(totalCount % pageSize == 0){
page = totalCount / pageSize
}else{
page = Math.ceil(totalCount / pageSize)
}
console.log(page)
// 输出结果是6
3.Math.round的功能是四舍五入版 就近取整 注意-3.5的结果是-3。
var a = 55
var b = 3
console.log(Math.floor(a/b))
// 输出结果是:18(采用四舍五入的方法对结果进行取整)
6-1.3 最大值和最小值
- Math.max()是求最大值,Math.min是求最小值。
// var max = Math.max(4,33,56,77,1,8)
// 获取数组中的最大值
var arr = [4,33,56,77,1,8]
console.log(arr) // 输出结果是:[4,33,56,77,1,8]
console.log(...arr) // 输出结果是:4,33,56,77,1,8
var max = Math.max(...arr) // 最小值的获取方法和最大值相同。
console.log(max) // 输出结果是:77
// ...是展开运算符,将数组展开成一组数。
6-1.4 随机数
- Math.random() 函数返回一个浮点。伪随机数在范围[0,1),也就是说,,从0(包括0)往上但是不包括1(排除1),然后你可以缩到所需的范围。实现将初始种子选择到随机数生成算法,它不能被用户选择或重置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 300px;
margin: 100px auto;
margin-bottom: 10px;
text-align: center;
line-height: 300px;
font-size: 30px;
font-weight: 700px;
border: 1px solid black;
}
button{
display: block;
padding: 10px 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
<button>停止</button>
<script>
var students = ['金吒','木吒','哪吒','孙悟空','太乙真人','东皇太一','杨戬','太上老君']
// 生成两个数之间的随机整数,包含两个数
function getRandomIntInclusive(min,max){
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * ( max - min + 1)) + min; // 含最大值和最小值
}
function f1(){
var index = getRandomIntInclusive(0,7)
// 将生成的学生姓名插入到box中
document.querySelector('.box').innerHTML = students[index]
}
var id = setInterval(f1,50)
//停止
document.querySelector('button').onclick = function(){
// 停止计时器
clearInterval(id)
}
</script>
</body>
</html>
6-2 Date函数
6.2-1 获取当前时间
var now = new Date()
console.log(now)
// 输出结果是:Tue Apr 06 2021 20:32:42 GMT+0800 (中国标准时间)
6-2.2 获取年份
- 先要获取当前时间(new Date())才可以得到年月日。
var now = new Date()
var year = now.getFullYear()
console.log(`${year}年`)
// 输出结果是:2021年
6-2.3 获取月份
var now = new Date()
var month = now.getMonth()
console.log(`${month+1}月`)
// 输出结果是:4月
6-2.4 获取日期
var now = new Date()
var date = now.getDate()
console.log(`${month}日`)
// 输出结果是:6日
6-2.5 获取时
var now = new Date()
var hour = now.getHours()
console.log(`${hour}时`)
// 输出结果是:20时
6-2.6 获取分
var now = new Date()
var minutes = now.getMinutes()
console.log(`${minutes}分`)
// 输出结果是:32分
6-2.7 获取秒
var now = new Date()
var seconds = now.getSeconds()
console.log(`${seconds}秒`)
// 输出结果是:42秒
- 一般的格式为2021-4-6 20:32:42
console.log(${year}-${month}-${date} ${hour}:${minutes}:${seconds})
6-3 时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<div class="box"></div>
<script>
function gettime(){
var now = new Date() // 获取当前时间
var year = now.getFullYear() // 获取年
var month = now.getMonth() // 获取月
var date = now.getDate() // 获取日
var hour = now.getHours() // 获取时
var minutes = now.getMinutes() // 获取分
var seconds = now.getSeconds() // 获取秒
var time = (`${year}-${month}-${date} ${hour}:${minutes}:${seconds}`)
document.querySelector('.box').innerHTML = time // 获取盒子并把当前时间填入到盒子里。
}
setInterval(gettime,1000) // 计时器
</script>
</body>
</html>
7-1 数组对象
7-1.1判断是否是一个数组类型
1.定义一个数组:
var arr = [1,ture,false,"text"]
2.使用new Array定义一个空的数组:
var arr = new Array()
7-1.2 数组操作
1.数组排序:
- soft()方法使用原地排序对数组进行排序,并返回数组。默认是将元素转化为字符串,再对元素的utf-16代码单元值序列进行比较进行的。
var arr = [44,66,13,1,7,9,10]
arr.sort()
console.log(arr)
// 输出结果是:[1, 10, 13, 44, 66, 7, 9]
- 数组由小到大排序:
var arr = [44,66,13,1,7,9,10]
function mysort(first,second){
return first - second // 从小到大排序
// 从大到小排序:return second - first
}
arr.sort(mysort)
console.log(arr)
// 输出结果是:[1, 7, 9, 10, 13, 44, 66]
2.数组的索引:
- 寻找数组的索引需要使用indexOf(寻找第一个符合要求的元素的索引)和lastindexOf(寻找最后一个符合要求元素的索引)。
- 数组的索引是指在一个数组中找到想找的元素位置。
var arr = ['孙悟空','唐僧','猪八戒','沙和尚','白龙马','金角大王','银角大王']
7-2 跑马灯
- substr(想要获取的第一个索引,获取的长度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
background-color: #eee;
padding: 10px 20px;
color: red;
white-space: nowrap;
overflow: hidden;
}
</style>
<body>
<div class="box">欢迎乘坐G520次列车,本车时速为340Km/h,请系好安全带。</div>
<script>
setInterval(f1,300); // 计时器
function f1(){
// 使用document.querySelector().innerHTML获取div中的文本。
var str = document.querySelector('.box').innerHTML
// 获取第一个字符。
var first = str.substr(0,1)
// 获取除第一个字符之外的所有字符。
var second = str.substr(1)
// 把第一个字符拼接在最后面,产生跑马灯的效果。
document.querySelector('.box').innerHTML = second + first
}
</script>
</body>
</html>