Web之Javascript

一、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、循环语句
1for循环,循环时,循环的是元素索引
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 
2for循环
a = [11,22,33]
for (var i=0;i<a.length;i++){
	....
}
不支持字典的循环
3while循环
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个组内容;
                                        $&:当前匹配的内容;
                                        $`:位于匹配子串左侧的文本;
                                        $':位于匹配子串右侧的文本
                                        $$:直接量$符号
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值