【2022-08-25】python前端开发(四)

python前端开发(四)

JS数据类型之布尔值(Boolean)

• 与python不一样的是，在JavaScript中，true和false都是小写

typeof true
'boolean'
typeof True
'undefined'


null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。

python布尔值bool	数据类型是否为False
0	是
None	是
' '	是
[ ]	是
	是

JS布尔值Boolean	数据类型是否为false
0	是
" "(空字符串)	是
null	是
undefined	是
NaN(not a number)	是

JS数据类型之数组

• 数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

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

JS数据类型之对象(object)

• JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
• JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
• 对象只是带有属性和方法的特殊数据类型。

对象之数组(相当于python中的列表)
	let l1 = [11, 22, 33, 44]

常见内置方法(push、forEach...)

JS数据类型之自定义对象

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

ps:思考python中如何让字典也可以通过句点符操作字典的数据值

JS常见运算符

算数运算符

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

比较运算符

> >= < <= != == === !==

1 == “1”   // true  弱等于
1 === "1"  // false 强等于

上面这种情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

逻辑运算符

&&  与   等价于python中的and

||  或	等价于python中的or

!   非	等价于python中的not

赋值运算符

=  等于
+= 加等于
-= 减等于
*= 乘等于
/= 除等于

JS流程控制之分支结构

分支结构
	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("...")
}
"""

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

JS流程控制之循环结构

循环结构

	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(条件){
        循环体代码
    }

JS函数

• JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

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

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

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

匿名函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

箭头函数

箭头函数
    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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
    }

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

JS函数名称空间与作用域

局部变量

• 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量

• 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期

• JavaScript变量的生命期从它们被声明的时间开始。
• 局部变量会在函数运行以后被删除。
• 全局变量会在页面关闭后被删除。

作用域

• 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

JS内置对象

• JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

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}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

前端之BOM操作

• BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

window对象

- 所有浏览器都支持 window 对象。它表示浏览器窗口。 
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。全局函数是 window 对象的方法。
- 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
- 一些常用的Window方法：
	
        window.innerHeight  浏览器窗口的内部高度
        window.innerWidth   浏览器窗口的内部宽度
        window.open()   	打开新窗口
        window.close()      关闭当前窗口

navigator对象

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象

屏幕对象，不常用。常用属性：

screen.availWidth    可用的屏幕宽度
screen.availHeight   可用的屏幕高度

history对象

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

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

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

• 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("你看到了吗？");

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("你确定吗？")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

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操作

• DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM树

• DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档

• 元素节点(element 对象)：代表一个元素（标签）

• 文本节点(text对象)：代表元素（标签）中的文本

• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性

• 注释是注释节点(comment对象)　

• JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素

• JavaScript 能够改变页面中的所有 HTML 属性

• JavaScript 能够改变页面中的所有 CSS 样式

• JavaScript 能够对页面中的所有事件做出反应

DOM操作之标签查找

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找

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

DOM操作之节点操作

创建节点

语法：

createElement(标签名)

示例：

var divEle = document.createElement("div");

添加节点

语法：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

示例：

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除节点

语法：

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

语法：

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML


设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."