首页 > 其他分享> > 【2022.8.25】前端开发（4）

【2022.8.25】前端开发（4）

2022-08-25 23:31:58 作者：互联网

学习内容概要

JS基本数据类型
流程控制
函数与面向对象
JS的BOM与DOM操作

学习内容详细

JS数据类型之布尔值

1.回顾之前python中布尔值（bool）
- True
- False：0 None [ ] { } ' '...
2.JS中的布尔值（boolean）
- true
- false：0、null、（空字符串）、undefined、NaN
- null与undefined的区别
  - null可以理解为之前有过值现在定义为空了
  - undefined 字面意思没有被定义的从未有值
3.python（bool）与JS（boolean）区别
- python中布尔值首字母需要大写
- JS中布尔值都是小写

JS数据类型之对象（object）

1.在JS和python一样都是一切皆对象
2.对象之数组（python中的集合）

let l1 = [1, 2, 3, 4, 5, 6]

// JS中的内置方法
let l1 = [1, 2, 3, 4, 5]
l1.length  // 计算数组的大小
5  
l1.push(66)  //  尾部追加元素  
6
l1
(6) [11, 22, 33, 44, 55, 66]  // 打印结果

3.常用内置方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.forEach()	将数组的每个元素传递给回调函

forEach语法：
- l1.forEach(function(i){console.log(i)})

JS数据类型之自定义对象（object）

1.自定义对象（相当于python中的字典）

// 定义方式1：
	let d1 = {'name':'make','hobbies':'swimming'}
// 定义方式2：
    let d2 = new Object()
// 自定义对象操作取值方式更加的简单 直接使用句点符就可以了
// 例如：
    let d1 = {'name':'make','hobbies':'swimming'}
    d1.name  // 取值
'make'  // 结果

运算符

// 算数运算符 + - * / ++ -- 

// 举例说明：
var x=10
var res1=x++ // 先赋值在自增
res1 
10
x
11
var res2=++x  // 先自增在赋值
res2
12
x
12


/*

==	弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)

&&	等价于python中的and
||  等价于python中的or
!	等价于python中的not


*/

流程控制

1.分支结构

// 1.分支结构说明：
	1.单if分支
    	if(条件){条件成立之后执行的代码}
 	2.if...else分支
    	if(条件){
            条件成立之后执行的代码
        }else{
            条件不成立之后执行的代码
        }
  	3.if...elif...else分支
    	if(条件1){
            条件1成立之后执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }
        else{
            条件不成立之后执行的代码
        }
// 习题演练：某公司招聘秘书、要求必须是19岁少女、超过的19岁的做苦力 低于19岁的回去上学

        var age = 20;
        if (age => 20){
            console.log("恭喜您终于当上了苦力工");
        }else if (age <= 18) {
            console.log("赶紧滚回去上学");
        }else {
            console.log("你就是我们要找的女秘书！！！");
        }

2.switch分支结构
- 总结：switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

    var day = new Date().getDay();  // 获取当前是周几？
    switch (day) {
        case 0:
            console.log("Sunday");
            break;
        case 1:
            console.log("Monday");
            break;
        case 2:
            console.log("Tuesday");
            break;    
        default:
            console.log("你去看下日历就知道了")
    }

3.for 循环结构

// 循环打印1~20

for(let i=1;i<21;i++){
        console.log(i)
    }


// 课堂小练习
    	//  打印数组内所有的数据值
 			l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
      	  	for(let i=0;i<l1.length;i++){
                console.log(l1[i])
            }

4.while 循环

// 	while循环结构说明：
while(条件){
        循环体代码
    }


// 习题演练：循环打印1~10
var i = 0;
while (i < 11) {
  console.log(i);
  i++;
}

函数

// 普通函数定义
function f1() {
  console.log("Hello world!");
}



// 带返回值的函数
function sum(a, b){
  return a + b;
}




// 参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a,b){
    console.log(666,888)
}
func(111,23123,4324,32,432,4324)  // 传了很多的实参
1 2  // 获取的结果还是1 2 
=======================上述是不严谨的函数传参情况================================
    
 // 如果想限制参数个数需要使用内置关键字arguments
    
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 匿名函数（需要用变量名接收才能使用）
	function(a, b){
      return a + b;
    }

//箭头函数

    var f = function(v){
      return v;
    }
	 var f = v => v;
    
    
    var f = () => 5;
    // 等同于
    var f = function(){return 5};

// 上面的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2){
      return num1 + num2;} 
    
     var sum = (num1, num2) => num1 - num2;
    // 等同于
    var sum = function(num1, num2){
      return num1 - num2;}

JS内置对象

类似于python中的内置函数或者内置模块
固定语法
	var 变量名 = new 内置对象名();
 
1.Date日期对象
2.JSON序列化对象
	回顾python序列化
    	import json
   		json.dumps()
       json.loads()
	JS中的序列化
    	JSON.stringify()
       JSON.parse()
 3.RegExp正则对象
	var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
	var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
 	注意有一些小特点

BOM与DOM操作

BOM:浏览器对象模型
    通过写js代码可以跟浏览器交互
DOM:文档对象模型
    通过写js代码可以跟html交互
    
BOM操作
	window.open()
 	window.close()
   window.navigator.userAgent() 
	window.history.forward()
   	window.history.back()
   	window.location.href
   window.location.href = 新网址
 	window.location.reload()
  	alter()   警告
   confirm()  确认
	prompt()  提示
  	定时器相关操作(重要)
   		function func1(){
        	alert('明天星期五')
        }
       let t = setTimeout(func1,5000)  // 5秒中之后自动执行func1函数
       clearTimeout(t)  // 取消上面的定时任务
        
       
    	  var s1 = null
        function showMsg() {
            function func1(){
                alert('明天星期五')
            }
            s1 = setInterval(func1, 5000)
        }
        function clearMission(){
            clearInterval(s1)
        }
        setTimeout(clearMission, 000)
        showMsg()
        
DOM操作
	JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
	
    document.getElementById()
    	根据id值查找标签 结果直接是标签对象本身
    document.getElementsByClassName()
    	根据class值查找标签 结果是数组类型
    document.getElementsByTagName()
    	根据标签名查找标签 结果是数组类型
        
    parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素	
  	 """
  	 let divEle = document.getElementById('d1')
  	 """
        
   	节点操作
    	let XXXEle = document.createElement('标签名')
       XXXEle.id = 'id值'
    	XXXEle.innerText = '内部文本'
       divEle.append(XXXEle)
    	ps:动态创建 临时有效 非永久
 	属性操作
    	XXXEle.属性  			 只能是默认属性
       XXXEle.setAttribute()  默认属性、自定义属性
   	文本操作
    	  divEle.innerHTML
        divEle.innerText

    	  divEle.innerHTML = '<h1>好的</h1>'
        '<h1>好的</h1>'
        divEle.innerText = '<h1>坏的</h1>'
        '<h1>坏的</h1>'

标签：function,25,console,log,python,JS,2022.8,var,前端开发
来源： https://www.cnblogs.com/55wym/p/16626152.html

【2022.8.25】前端开发（4）

学习内容概要

学习内容详细

JS数据类型之布尔值

JS数据类型之对象（object）

JS数据类型之自定义对象 （object）

运算符

流程控制

函数

JS内置对象

BOM与DOM操作

JS数据类型之自定义对象（object）