首页 > 其他分享 >前端学习-4

前端学习-4

时间:2022-08-25 21:57:33浏览次数:56  
标签:函数 对象 标签 前端 JS 学习 var 客户端

目录

JS数据类型之布尔值

回顾一波
python  布尔值一般存在于if判断语句、while循环、for循环中,用于判断条件真或假
    bool
        True
        False: 0 None '' [] {}...
JS
    boolean
        true
        false:(空字符串)、0、null、undefined、NaN
null与undefined的区别
    null可以理解为曾经拥有过  现在暂时空了
    undefined可以理解为从未拥有过
很难理解吗?看图吧!!!

JS数据类型之对象(object)

在python中一切皆可对象  在JS中也是一切皆可对象
1.对象之数组
	使用单独的变量名来存储一系列的值 类似于python中的列表
 let l1 = [1, 2, 3, 4]

常见的内置方法

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start,end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val,...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并将数组添加新元素
.map() 返回一个数组元素调用函数处理后的新数组

JS数据类型之自定义对象(object)

1.自定义对象(相当于python中的字典)
	定义方式1:
        let di = {'name':'curry','pwd':666}
     定义方式2:
        let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符即可

运算符

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

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

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

流程控制

1.分支结构
	1.单if分支
    	if(条件){条件成立之后执行的代码}
 	2.if...else分支
    	if(条件){
            条件成立之后执行的代码
        }else{
            条件不成立之后执行的代码
        }
  	3.if...elif...else分支
    	if(条件1){
            条件1成立之后执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }
        else{
            条件不成立之后执行的代码
        }
"""
var day = new Date().getDay();
switch (day) {
  case 0:
  	console.log("Sunday");
  	break;
  case 1:
  	console.log("Monday");
  	break;
  default:
  	console.log("...")
}
"""
2.循环结构
	for(let i=1;i<101;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])
            }
   	
 	while(条件){
        循环体代码
    }

函数

function hanshuming(形参){
    函数体代码
    return	返回值
}

function func(a, b){
    console.log(a,b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a,b){
    if(arguments.length===2){
        console.log(a,b)
    }else{
        console.log('你倒是把参数给我啊')
    }
}
匿名函数
	funvtion(a,b){
        return a + b;
    }
箭头函数
	var f = function(v){
        return v;
    }
	var f = v => v;
    
    var f = () => 5;
    // 等同于
    var f = function(){return 5};
	
    var sum = (num1,num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2){
        return num1 + num2;  //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
    }

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}$/;   	
'''默认undefined 符合条件'''

BOM与DOM操作

BOM:浏览器对象模型
    指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”
DOM:文档对象模型
    指文档对象模型,通过它,可以访问HTML文档的所有元素

    window.innerHeight	浏览器窗口的内部高度
    window.innerWidth	浏览器窗口的内部宽度
    window.open()	打开新窗口
    window.close()	关闭当前窗口
    window.navigator.userAgent()  客户端绝大部分信息 
    window.history.forward()	前进一页
    window.history.back()	后退一页
    window.location.href	获取URL
    window.location.href = 新网址	跳转到指定页面
    window.location.reload()	重新加载页面
    alter()   警告框
    confirm()  确认框
    prompt()  提示框
	定时器相关操作(敲黑板)
   		function func1(){
        	alert('快跑呀')
        }
       let t = setTimeout(func1,3000)  // 3秒中之后自动执行func1函数
       clearTimeout(t)  // 取消上面的定时任务
        
       
    	  var s1 = null
        function showMsg() {
            function func1(){
                alert('快跑呀')
            }
            s1 = setInterval(func1, 3000)
        }
        function clearMission(){
            clearInterval(s1)
        }
        setTimeout(clearMission, 9000)
        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>curry</h1>'
        '<h1>curry/h1>'
        divEle.innerText = '<h1>curry</h1>'
        '<h1>curry</h1>' 

8.25小练习

1.简述解释性语言和编译性的区别
    编译型语言:编译型语言在执行之前要先经过编译过程,编译成为一个可执行的机器语言的文件,编译型语言的优缺点:执行效率高,缺点是跨平台能力弱,不便调试。
    解释型语言:解释性语言编写的程序不进行预先编译,以文本方式存储程序代码。执行时才翻译执行。程序每执行一次就要翻译一遍。优缺点:跨平台能力强,易于调,执行速度慢。
2.列举你所知道的python2与python3之间的区别
1、输出print的不同;2、整数除法,返回值的不同;3、列表理解循环变量方面;4、Unicode字符串方面;5、错误处理方面;6、xrange方面不同等等。
3.什么是匿名函数。匿名函数一般结合什么一起使用,请列举几个常用的
    匿名函数指一类无须定义标识符的函数。Python用lambda语法定义匿名函数,只需用表达式而无需申明。匿名函数有个限制,就是只能有一个表达式,不用写return,返回值就是该表达式的结果。 但通常都是在定义lambda函数的同时将其应用作为参数传递给另一个函数,该函数在其处理过程中对lambda定义的函数进行调用。结合max、min、sorted、map、reduce、filter使用
4.什么是TCP三次握手四次挥手
	有两个端,(客户端、服务器),三次握手主要是保障两端都进入一个叫确立的状态,客户端发起(同步发送),服务器接受然后又响应回去(同步响应)状态,客户端接收到服务器的响应后(就绪),再响应一次给服务器,让服务器也处于(就绪)状态。所以,客户端有两次状态,服务器也有两次状态,形成三次握手,缺少一次,就不能保障两端都处于(就绪)状态。
    而断开是需要四次挥手的,客户端发起断开,服务器收到后说好的进入一个(等待关闭)状态然后响应给客户端,这个过程,客户端是处于(终止等待第一阶段),然后服务器不放心,再发一次给客户端(最后确认),客户端收到服务器发过来的确认马上响应给服务器说,放心是真的关闭,然后服务器就关闭了,客户端也关闭。
5.列举你所知道的css选择器
	id选择器 类选择器 标签选择器 后代选择器 子选择器 毗邻选择器 伪类选择器 通用(*)选择器

标签:函数,对象,标签,前端,JS,学习,var,客户端
From: https://www.cnblogs.com/zzjjpp/p/16624836.html

相关文章

  • 学习笔记270—Excel如何快速批量将中文名字转换为拼音?
    Excel如何快速批量将中文名字转换为拼音?在excel表格中,我们可以通过内置的功能来进行拼音的编辑,但无法直接批量地转换中文为拼音。当然,这里是跳过了vba的用法,因为vba要求......
  • 监督学习集成模型——LightGBM
    LightGBM的全称为LightGradientBoostingMachine,即轻量的梯度提升机,由微软在其论文“LightGBM:AHighlyEfficientGradientBoostingDecisionTree”中提出,作为与XGBo......
  • 性能测试学习笔记——工具的使用,性能测试流程
    性能测试学习笔记一、为什么要做性能测试:因为功能和接口测试只能验证软件的功能是否正常运行,功能和接口测试不能验证软件的性能在多用户,多并发,长时间的操作下,能否正常运......
  • 2022-08-25 第五组 赖哲栋 学习笔记
    元素的设置<!--所有的HTMl元素,我们可以根据具体需求,自定义添加属性--><divhaha="abc"id="xyz"></div>获取属性的值元素.属性名的方式只适用于元素原生的属性......
  • 【Java高级编程】IO流学习笔记
    目录IO流File类文件/文件夹基础操作创建文件的完整步骤IO流-节点流读入文件一个字节(一个字节)[FileInputStream]字节数组的方式读取(读取全部内容)[FileInputStream]读取......
  • Android学习笔记五(JAVA):创建新的Activity,启动新的Activity,管理任务之定义启动模式,从
    本篇笔记给QuizDemo新增一个HelpActivity,用户点击Help按钮,会跳转到HelpActivity屏幕,并选择是否查看答案。查看答案之后,返回到答题屏幕,但是如果已经看了答案,这一题的作答就......
  • 算法学习--广度优先搜索和深度优先搜索
    广度优先搜索BFS一、相关概念1.图的遍历:从图中某一顶点出发,按照某种搜索方法沿着图中的边对图中的所有节点访问一次且仅访问一次二、算法流程首先访问起始顶点v;......
  • Flask 学习-16.项目设计与蓝图的使用
    前言一个最简单的Flask应用可以是单个app.py文件,当项目越来越大的时候,把所有代码放在单个文件中就很难维护了。我们需要设计一个项目结构,每个目录做对应的事情。项......
  • SQL学习——数据库定义语言(DDL)定义约束
    本章将介绍数据库中的约束是什么,如何给表之间建立约束。1、约束类型介绍主要有5中约束,包括:非空约束(NOTNULL):指定列不能包含空值唯一性约束(UNIQUE):指定列或者列......
  • 2022-08-25 第二组刘禹彤 学习笔记
    打卡40天###学习内容Javascript自定义属性获取属性所有的html元素,我们可以根据具体需求,自定义添加属性元素.属性名的方式只适用于元素原生的属性自定义属性di......