JavaScript语法基础

1-1 基础知识


  • 单行注释:// 内容
  • 在网页中按F12可以看到控制台(console)和对所写的代码进行调试。

1-2 赋值语句

var str = '春眠不觉晓'

  • var:声明变量的关键字。浏览器解析看到var就知道它后面跟一个变量。

  • str:变量名称,可以任意取名,但是有一定的命名规则,一般都是命名为有意义的名字,例如:
    var age = 19

  • =:赋值符号,这是一种运算符号,其含义是将右面的值赋值给左面的变量。

  • ’ ':单引号里面的值是字符串,而数字是不需要加单引号的。双引号也可以,但是为了节省空间,一般采用单引号。

  • ;:在JavaScript中,分号可加可不加,分号是用来将两行语句区别开的,换行也可做到,建议不加分号。

1-3 数值类型:


  • number:数字类型,例如:
    var n=18
    其中的18就是数字类型。
  • string:引号里面的就是字符串类型
  • bool:布尔类型 只有两个值:truefalse
  • 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}&nbsp;&nbsp;`)	// &nbsp是空格
	}
	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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值