目录
JavaScript,他和Python一样是一门编程语言,而浏览器内置了JavaScript语言的解释器,所以JavaScript代码在浏览器上就可以运行。
DOM,(Document Object Model)是指文档对象模型,通过它,可以操作HTML文档的相关功能,例如:对标签内容进行删除和替换等。
BOM,(Browser Object Model)是指浏览器对象模型,通过他,可以操作浏览器相关的功能,例如:浏览器设置定时器,浏览器定时刷新页面。
他们三者之间的关系可以简单理解为:JavaScript是编程语言,DOM和BOM是两个模块,利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。
javascript
一句话概括就是,js是一门独立的语言,浏览器具有js的解释器。
1. 代码存在形式
常见的JavaScript代码有两种存在方式:
方式一:Script代码块,只能在当前页面使用
应用场景:所有功能只当前页面需要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function GetData(){
var i = document.getElementById('user')
alert(i.value);
}
</script>
</head>
<body>
<input type="text" id="user">
<input type="button" οnclick="GetData();" value="check me">
</body>
</html>
方式二:独立js文件,可以被多个引入之后使用。
应用场景:多个页面公共功能可以放入文件,避免重复编写。
commons.js
function GetData(){
var i = document.getElementById('user')
alert(i.value);
}
s1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="commons.js"></script>
</head>
<body>
<input type="text" id="user">
<input type="button" οnclick="GetData();" value="check me">
</body>
</html>
推荐位置
浏览器在解析HTML、CSS、JavaScript文件时,是按照从上到下逐步解释并执行,如果JavaScript代码或文件放在head中可能会有因为耗时(网络请求或代码)导致页面显示速度太慢,影响用户感受,所有建议将js代码都放在body标签的底部。
2. 注释
单行://
多行:/* */
3. 变量
JavaScript中,局部变量必须以var开头,如果未使用var,则默认表示声明的是全局变量。
4. 定时器
setInterval(“执行代码”, 时间间隔)
5. 常见数据类型
数字(Number)
javascript中不区分整数和浮点数,所有数字均用浮点数来表示。
// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
字符串转换成数字:
parseInt(“1.2”) 将某值转换成数字,不成功则NaN
parseFloat(“1.2”) 将某值转换成浮点数,不成功则NaN
特殊值:
NaN,非数字,可用isNaN(num)来判断
Infinity,无穷大,可使用isFinity(num)来判断
字符串
// 声明
var obj = "xueguoxiang" 创建字符串
var name = String("xueguoxiang");
var age_str = String(18);
//常用方法
obj.charAt(n): 返回字符串中的第n个字符
obj.substring(from,to): 根据索引值获取子序列,n<=子序列<m
obj.length : 获取当前字符串长度
obj.trim() : 移除空白
obj.trimLeft() : 移除左空白
obj.triRight() : 移除右空白
obj.concat(value, ...) : 拼接
obj.indexOf(substring, start) : 子序列位置
obj.lastIndexOf(substring, start): 子序列位置
obj.slice(start, end): 切片
obj.toLowerCase(): 大写
obj.toUpperCase(): 小写
obj.split(delimiter, limit): 分割,根据delimiter分割,limit表示取分割后的几个
案例:跑马灯
https://blog.csdn.net/weixin_40318474/article/details/103522620
布尔类型(Boolean)
布尔类型仅包含真假,与python不同的是其首字母是小写。
var status = true;
var status = false;
/*
在js中进行比较时,需要注意:
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
*/
数组
js中的数组类似于python中的数组
常见功能:
// 声明
var names = ['seth', 'tom', 'jack']
var names = Array('seth', 'tom', 'jack')
//常用方法
obj.length 数组长度
obj.push(ele) 在尾部追加内容
obj.pop() 尾部获取一个元素
obj.unshift() 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素,start起始位置,deleteCount要删除的个数,value新值
obj.splice(n,0,val) 指定n位置插入元素
obj.splice(n,1,val) 指定n位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice() 切片
obj.reverse() 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串,ex:sep='-'
obj.concat(val, ...) 连接数组
obj.sort() 对数组元素进行排序
字典
a = {‘k1’:‘v1’, ‘k2’:‘v2’}
// 声明
info = {
name:'seth',
"age":22
}
// 常用方法
var val = info['name'] // 获取
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除
6. for循环
//第一种方式:循环的元素是索引
//默认生成索引,适用于:字符串、元组、字典。
a = [11,22,33,44]
for(var item in a){
console.log(a[item]);
}
a = {'k1':'v1', 'k2':'v2'}
for(var item in a){
console.log(a[item]); // item是key,a[item]是values
}
//第二种方式:不支持字典的循环
//自定义索引并设置增加步长,适用于:字符串、元组。(字典索引非有序)
for(var i=0; i<10; i++){
}
a = [11,22,33,44]
for(var i=0; i<a.length; i++){
}
7. 条件语句
if(条件){
}else if(条件){
}else{
}
var num = 18;
switch(num){
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('老男人');
break;
case 100:
console.log('....');
break;
default:
console.log('太大了');
}
8. 函数
普通函数
function function_name(a,b,c){
}
//调用
function_name(1,2,3)
匿名函数
function (arg){
return arg + 1;
}
// 一般用于当做参数使用
//例子
setInterval(function(){
console.log(123);
}, 5000);
自执行函数
//创建函数并且自动执行
//例子
(function(arg){
})(1)
9. 异常
在JavaScript的异常处理中有两个注意事项:
- 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
- catch只能破获一次,如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
var name = ''
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}
10. 序列化
JSON.stringify(obj) 序列化,把一个对象转换成字符串
JSON.parse(str) 反序列化,把字符串转换成对象
应用场景:网络中数据传输本质上是基于字符串进行,如果想要把一个js的对象通过网络发送到某个网站,就需要对对象进行序列化然后发送.
11. 转义
decodeURI() URI中未转义的字符
decodeURIComponent() URI组件中的未转义字符
encodeURI() URI中的转义字符
encodeURIComponent() 转义URI组件中的字符
//下面这三个应用在登录之后保存登录信息的场景下面,将数据经过转义之后,保存在cookie中
escape() 对字符串转义
unescape() 给转义字符串解码
URIError() 由URI的编码和解码方式抛出
encodeURI和decodeURI的例子
encodeURIComponent和decodeURIComponent的例子
自动登录并点赞
pip3 install requests
### 1、首先登录任何页面,获取cookie
i1 = requests.get(url="http://dig.chouti.com/help/service")
### 2、用户登录,携带上一次的cookie,后台对cookie中的gpsd进行授权
i2 = requests.post(
url="http://dig.chouti.com/login",
data = {
'phone': '86手机号',
'password': '密码',
'oneMonth': ""
},
cookies = i1.cookies.get_dict()
)
### 3、点赞(只需携带已经被授权的gpsd即可)
gpsd = i1.cookies.get_dict()['gpsd']
i3 = requests.post(
url = requests.post(
url = "http://dig.chouti.com/link/vote?linksId=8979998",
cookies = {'gpsd': gpsd}
)
)
print(i3.text)
12. eval
JavaScript中的eval是Python中eval和exec的集合,既可以编译代码也可以获取返回值。
eval()
EvalError() 执行字符串中的JavaScript代码
13. 时间
Date类
var d = new Date();// d 代表了当前时间
d.getXXX 获取
d.setXXX 设置
14. 作用域
其他语言:以代码块作为作用域
python:以函数作为作用域
JavaScript:
- 以函数作为作用域
- 函数的作用域在函数未被调用之前就已经创建
- 函数的作用域存在作用域链,并且也是在被调用之前创建
//1 name = "73"; function func(){ //var name = "bob"; function inner(){ //var name = "peter"; console.log(name); } inner(); } func(); //2 name = "73"; function func(){ var name = "bob"; function inner(){ console.log(name); } return inner; } var ret = func(); ret(); //bob //3 name = "73"; function func(){ var name = "bob"; function inner(){ console.log(name); } var name = "peter"; return inner; } var ret = func(); ret(); //peter
- 函数内部局部变量提前声明
function func(){ console.log(xxoo); // undefined var xxoo = 'xue'; console.log(xxoo); // xue } func();
15. 词法分析 ×××(非常重要)
结果:
16. JavaScript面向对象
//1、this代指对象(相当于python self)
//2、创建对象时,new 函数()
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
var obj = new Foo('xue');
obj.sayName()
在python的面向对象中,创建对象时,内存空间存储形式如下
JavaScript创建对象时如下所示
可以看到,JavaScript每创建一个对象时,内部都保存了一次函数,而python没有,这样做完全没有必要,那怎么改呢,看下面
//原型
function Foo(n){
this.name = n;
}
//Foo的原型,这样做的好处是:由于Foo类只创建一次,Foo的原型也就只创建一次
Foo.prototype = {
'sayName': function(){
console.log(this.name);
}
}
obj1 = new Foo('xue');
obj1.sayName();
obj2 = new Foo('bob');
obj2.sayName();
//现在这样就和python很类似了
17. 正则表达式
1、定义正则表达式
/…/ 用于定义正则表达式
/…/g 表示全局匹配
/…/i 表示不区分大小写
/…/m 表示多行匹配
JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和KaTeX parse error: Expected group after '^' at position 9: ,m模式也会使用^̲来匹配换行的内容
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
res = pattern.exec(text)
res = pattern.exec(text)
res = pattern.exec(text)
2、匹配
JavaScript中支持正则表达式,其主要提供了两个功能:
test(string) 检查字符串中是否和正则匹配
n = 'uui99sdf'
reg = /\d+/
reg.test(n) # true
# 只要正则在字符串中存在就匹配,如果想要开头和结尾匹配的话,就需要在正则前后加^和$
exec(string) 获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组
获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组
非全局模式
获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配)
var pattern = /\bJava\w*\b/;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text);
var pattern = /\b(Java)\w*\b/; //分组,()表示再拿出括号内匹配到的内容
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text);
全局模式
需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕
var pattern = /\bJava\w*\b/g;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text);
var pattern = /\b(Java)\w*\b/g;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text);