一、Javascript如何编写
Javascript是单独的一门语言,浏览器具有js解释器
Javascript代码的存在形式:
- Head中
<script>
//Javascript代码
alert(123);
</script>
<script type="text/javascript">
//javascript代码
alert(123);
</script>
- 在文件中
<script src='js文件路径'> </script>
PS:js代码需要放置在<body>标签内部的最下方
二、变量
name = 'alex' # 全局变量
var name = 'alex' # 局部变量
<script>
name = 'lishang' #全局变量name='lishang'
function func(){
var name = 'zhaoxiaomeng' #局部变量函数里name='zhaoxiaomeng'
}
</script>
三、数据类型
1、数字
JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
<script>
age = "18";
i = parseInt(age)
j = parseFloat(age)
// print(i,j)
</script>
2、字符串
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
n= "lishang"
n.charAt(6)=g //返回字符串中的第n个字符
n.length //返回字符串的长度,这里为7
n.substring(1,4) //返回大于等于1,小于4范围的字符串
n.trim() //移除空白
n.trimLeft()
n.trimRight)
n.concat(value, ...) //拼接
n.indexOf(substring,start) //子序列位置
n.lastIndexOf(substring,start) //子序列位置
n.slice(start, end) //切片
n.toLowerCase() //大写
n.toUpperCase() //小写
n.split(delimiter, limit) //分割
n.search(regexp) //从头开始匹配,返回匹配成功的第一个位置(g无效)
n.match(regexp) //全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
n.replace(regexp, replacement) //替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
3、定时器
setInterval("要执行的代码",执行的频率)
function f1() {
console.log(1);
}
setInterval("f1()",4000) //每隔4秒执行一次f1函数
定时器的小例子:文字滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">welcome zhaoxiaomeng marry lishang</div>
<script>
function func() {
//根据id获取指定标签内容,定义于局部变量接受
var tag = document.getElementById('i1');
//获取标签内部的内容
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',500)
</script>
</body>
</html>
效果:(自行脑补滚动状态)
4、布尔值
布尔类型仅包含真假,与Python不同的是其首字母小写。
在python中,a=True,b=False
在javascript中,a=true,b=false
= 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
5、数组
JavaScript中的数组类似于Python中的列表
常见功能:
n.length 数组的大小
n.push(ele) 尾部追加元素
n.pop() 尾部获取一个元素
n.unshift(ele) 头部插入元素
n.shift() 头部移除元素
n.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
n.splice(n,0,val) 指定位置插入元素
n.splice(n,1,val) 指定位置替换元素
n.splice(n,1) 指定位置删除元素
n.slice( ) 切片
n.reverse( ) 反转
n.join(sep) 将数组元素连接起来以构建一个字符串
n.concat(val,..) 连接数组
n.sort( ) 对数组元素进行排序
四、语句和异常
1、条件语句
JavaScript中支持两个中条件语句,分别是:if 和 switch
if(条件){
...
}else if(条件){
...
}else{
...
}
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
另外判断时的符号:
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
2、循环语句
1、for循环,循环时,循环的是元素索引
a = [11,22,33,44]
for(var i in a){
console.log(a[i]);
break; // 退出整个循环
}
--->
11
22
33
44
b = ['k1':'v1','k2':'v2']
for(var i in b){
console.log(b.[i]);
continue; // 退出此次循环
}
--->
v1
v2
2、for循环
a = [11,22,33]
for (var i=0;i<a.length;i++){
....
}
不支持字典的循环
3、while循环
while(条件){
}
五、函数
1、基本函数
JavaScript中函数基本上可以分为以下三类:
// 普通函数
function func(a){
return a+1
}
var result = func(1)
console.log(result);
// 匿名函数,没有生命函数的名字
setInterval(function(){
console.log(123);
},5000)
// 自执行函数(创建并主动执行)
(function(arg){
console.log(arg);
})(1)
2、作用域
①其他语言:以代码块作为作用域
pubilc void Func(){
if(1=1){
string name = 'Java';
}
console.writeline(name);
}
Func()
以python的角度理解,是能够运行的,但是因为作用域的原因,出了大括号,name就无意义了,因此console.writeline(name)会报错。
②而python是以函数为作用域的
def func():
if 2==2:
name = 'zhaoxiaomeng'
print(name) #正常输出
func()
print(name) #会报错,NameError: name 'name' is not defined
③在Javascript中,默认函数为作用域的
function func(){
if (1==1){
var name = 'lishang';
}
console.log(name);
}
func()
会正常输出lishang
结论:
1、函数的作用域在函数未被执行之前已经创建了
2、函数的作用域存在作用域链,并且也是在函数未被执行之前已经创建了
3、函数内局部变量提前声明
例子1
xo = 'xiaomeng'
function func() {
var xo = 'lishang'
function inner() {
xo = 'kaixin'
console.log(xo)
}
inner()
}
func()
现在输出的是'kaixin',如果注释掉xo = 'kaixin',会输出'lishang',如果这行也注掉,会输出'xiaomeng'
例子2:
xo = 'xiaomeng'
function func() {
var xo = 'lishang'
function inner() {
console.log(xo)
}
return inner;
}
var ret = func()
ret()
会输出'lishang',因为作用域链一开始就已经建立了
3、面向对象
注意:
Foo充当的构造函数
this代指对象,相当于python中的self
创建对象时需要使用 new 函数()
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
var obj = new Foo('lishang'); //生成一个对象
obj.name
obj.sayName()
var obj1 = new Foo('xiaomeng');
obj1.name
--- >>>
"lishang"
lishang
xiaomeng
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:
原型
function Foo(n){
this.name = n;
}
Foo.prototype = {
'sayName': function(){
console.log(this.name);
}
}
obj1 = new Foo('lishang')
obj1.sayName()
obj2 = new Foo('zhaoxiaomeng')
obj2.sayName()
---->>>>
lishang
zhaoxiaomeng
六、其他
1、序列化
JSON.stringify(obj) 序列化、将对象转换成字符串
JSON.parse(str) 反序列化、将字符串转换成对象类型
li = [1,2,3,4,5]
s = JSON.stringify(li)
"[1,2,3,4,5]"
n = JSON.parse(s)
[1, 2, 3, 4, 5]
2、转义
将数据经过转义后,保存在cookie
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
url = "https://www.sogou.com/web?query=理解"
a = encodeURI(url)
"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
b = encodeURIComponent(url)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3"
a1 = decodeURI(a)
"https://www.sogou.com/web?query=理解"
b1 = decodeURIComponent(b)
"https://www.sogou.com/web?query=理解"
c = escape(url)
"https%3A//www.sogou.com/web%3Fquery%3D%u7406%u89E3"
3、eval
JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
4、时间
Date类
var d = new Date()
d
Tue Oct 13 2020 10:13:25 GMT+0800 (中国标准时间)
d.getxxx 获取
d.setxxx 设置
5、正则表达式
①定义正则表达式
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
②匹配
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)
③字符串中相关方法
obj.search(regexp) 获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效)
obj.match(regexp) 获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部
obj.replace(regexp, replacement) 替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号