JavaScript基本用法

1 > 运算符

   JavaScript当中有三种基本的运算符 —— 算数运算符、比较运算符、逻辑运算符。
   这三种运算的定义方法如下：

1.1 > 算术运算符

	var x=10;
	var res1=x++;		# 先赋值后自增1
	var res2=++x;		# 先自增1后赋值
	

1.2 > 比较运算符

	弱等于：自动转换类型
	'5' == 5 
	'''	结果为true ，js会自动转换成相同的数据类型做比较只是否一样 '''
	
	强等于：不转换类型
	'5' === 5
	''' 结果是false '''	

1.3 > 逻辑运算符

	python中使用的是 and、or、not
	js中使用 &&、||、|

2 > 流程控制

   js当中的流程控制有三种循环体—— if 判断、while循环、for循环

2.1 > if判断

	1.单if分支
		if(条件){
			条件成立执行的分支代码块
		}
	
	2.if...else分支
		if(条件){
			条件成立执行的分支代码块
		}else{
			条件不成立执行的分支代码块
		}

	3.if...else if...else分支
		if(条件1){
	      条件1成立执行的分支代码块
	    }else if(条件2){
	      条件1不成立条件2成立执行的分支代码块
	    }else{
	      条件1和2都不成立执行的分支代码块
	    }
	 4.switch语法
	 	var n1 =1；
	 	switch(n1) {
			case 0;
			console.log("干饭")；
			break；		# 如果不加break会基于当前位置一直往下运行
			case 1:
		    console.log("睡觉");
		    break;
		    case 2:
		    console.log("玩耍")
		    default:	# 没有对应条件统一执行default子代码
		    console.log("无所事事!!!")
	    }

2.2 > while循环

	
	while(循环条件){
		循环体代码
	}

2.3 > for循环

	for(初始值;循环条件;每次循环之后的操作){
	    循环体代码
	  }
	'''
		例如打印：0~9的数字
			for(var i=0;i<10;i++) {
				console.log(i);
			}
	
		例如for循环打印出数组内所有的元素
			var l1 = [11, 22, 33, 44, 55]
			for(var i=0;i<l1.length;i++){
				console.log(l1[i])
			}
	'''

3 > 三元运算符

python中的三元运算
	res = 11 if 1 > 2 else 22
  '''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''

js中的三元运算
	res = 1 > 2 ? 11 : 22
 	'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
 	# 三元运算一般情况下都不推荐嵌套使用!
 	

4 > 函数

4.1 > 函数的定义

	function 函数名(参数1,参数2){
		函数体代码
		return	返回值
	}
	'''
		定义时需要注意几点
		1.function 定义函数的关键字 相当于python中的def
		2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
		3.参数可写可不写
		4.return返回值
		函数调用:
			函数名加括号 有参则传参即可 ！！！
	'''

4.2 > 无参函数

	
	function f1(){console.log(111)}
	f1()

4.3 > 有参函数

	function f2(a, b){console.log(a,b)}
	f2()			# 可以调用 	相当于传了两个undefined
	f2(1)			# 可以调用	相当于传了一个值打印1，和undefined
	f2(1,2)  		# 可以调用	相当于传了两个值 1 2
	f2(1,2,3,4,5)  	# 可以调用 打印 1 2

	'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
	
	function f2(){
		console.log(arguments)
		if (arguments.length === 0){
			console.log('什么参数都没传')
		}else if(arguments.length === 1){
			console.log('传了一个参数')
		}else{
			console.log('传了多个参数')
		}
	}
	

4.4 > 返回值参数

  函数有一个返回值return，但这个return 和 python当中的return不支持返回多个参数。

4.5 > 匿名函数

	
	var ff = function () {
		console.log(123)
	}

4.6 > 箭头函数(drf中vue框架会再次接触)

	var f = v => v;
		// 等同于(箭头左边是形参右边是返回值)
			var f = function(v){
				return v;
			}
	
	var f = () => 5;
		// 等同于
			var f = function(){return 5};

	var sum = (num1, num2) => num1 + num2;
		// 等同于
			var sum = function(num1, num2){
				return num1 + num2; 	#这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
			}

5 > 自定义对象

  自定义对象相当于python里面的字典，具体操作如下：

	var d1 = {'name':'jason','age':18}
	'''python 字典取值操作js中的自定义对象都有 且自定义对象还可以直接通过句点符取值 更像一个对象'''

	取值操作如下：
		d1.name		# jason
	
	循环取值操作：
		for(var i in d1){
			console.log(d1[i])
		}

   定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)

	var d2 = new Object()  # 相当于生成了空字典

6 > 内置对象

   内置对象可以看成是python中的内置方法 内置模块等，是已经提前写好的可以直接调用。

	1.Date对象
		var d1 = new Date()
		d1.toLocalString()		'2022/4/28 16:45:23'
		d1.toLocalDateString()	'2022/4/28'
		d1.toLocaleTimeString()	'16:45:23'

   具体有关于时间的内置对象代码如下表格

内置对象	作用
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

7 > JSON对象

	python中序列化反序列化操作如下
		import json
		json.dumps()	# 序列化对象
		json.loads()	# 反序列化


	js中序列化反序列化操作如下
		JSON.stringify()
		JSON.parse()

8 > 正则对象

	创建正则表达式的两种方式
		var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
		var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

	使用正则
		reg2.test('jason123')   # true
		'''括号内什么都不写 就相当于写了undefined'''
		reg2.test() 			# true

	全局匹配
		在正则表达式的最后添加一个字母g
		var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
		
		reg3.lastIndex
		0
		reg3.test('jason666')
		true
		reg3.lastIndex
		8
		reg3.test('jason666')
		false

9 > BOM操作(了解)

   Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
   1 > 打开子页面代码如下(window可以省略不写)：

window.open('https://www.baidu.com','','width=400,height=400')

   2 > 关闭页面代码如下：

window.close()

9.1 > navigator对象

	window.navigator.appVersion	# 获取当前浏览器版本
	window.navigator.userAgent	# 标识当前是否是一个浏览器
	

9.2 > history 对象

	window.history.forward()  # 前进一页
	window.history.back()  # 后退一页

9.3 > location 对象

	
	window.location.href  # 获取页面的url地址
	window.location.reload()  # 刷新页面
	window.location.href = url  # 跳转到指定页面

9.4 > 弹框系列

	alert("你看到了吗？")	#警告
	confirm('你看见了什么？')				确认
		#	获取用户是点击取消还是确认 返回false和true
	prompt('说出你看见了什么')				提示
		#	获取用户输入的内容 也可以通过第二个参数添加默认内容

9.5 > 计时器

	
	'''单次定时'''
	var t = setTimeout(showMsg,9000)  # 9秒钟之后自动执行showMsg
	clearTimeout(t)  # 取消定时器

	'''循环定时'''
	var s = setInterval(showMsg,3000)  # 每隔3秒执行一次
 	clearInterval(s)  # 取消定时器

	'''单词定时与循环定时结合'''
	
	function showMsg() {
            alert(123)
        }
	var t = setInterval(showMsg,3000)
	function clearMsg() {
    	clearInterval(t)
	}
	setTimeout(clearMsg, 9000)

9.6 > 补充说明

   由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
   所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
   解决的措施之一: 将script标签写在body内最下方

10 > DOM操作

   Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素。但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)。

10.1 > 直接查找

	
	通过标签名查找标签
		document.getElementsByTagName('div')  # 数组套标签对象
		
	通过class值查找标签
		document.getElementsByClassName('c1')  # 数组套标签对象

	通过id值查找标签
		document.getElementById('d1')  # 标签对象本身
		

10.2 > 间接查找

	parentElement            父节点标签元素
	children                 所有子标签
	firstElementChild        第一个子标签元素
	lastElementChild         最后一个子标签元素
	nextElementSibling       下一个兄弟标签元素
	previousElementSibling   上一个兄弟标签元素