标签：function 25 console log python JS 2022.8 var 前端开发
学习内容概要
- 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。