JavaScript超全的知识点总结【二】-阿里云开发者社区

JavaScript超全的知识点总结【二】

2023-08-24 77

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript超全的知识点总结【二】

嵌入方式

内嵌式

理论上js可以写在任何第一个地方但是一般写在head标签里或者 body下

1. <script type="application/javascript">
2. alert("内嵌式");
3. </script>
4. <script>alert("内嵌式");</script>

外链式

新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>

行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性

1. onclick单击事件
2. <input type="button" value="coleak" onclick="alert('xss');">
3. <button onclick="alert('xss');">coleak</button>

函数进阶

匿名函数（没有名字的函数称为匿名函数）

每3000毫秒打印一个123

1. <script type="text/javascript">
2. setInterval(function(){console.log(123);},3000)
3. </script>

自执行函数（创建函数并且自动执行）

1. <script type="text/javascript">
2. (function(arg){console.log(arg);})(1);
3. </script>

字典

输出字典元素

1. <script type="text/javascript">
2. var dict = {'k1':"coleak",'k2':'moon','age':18};
3. for(var item in dict)
4. {
5. console.log(dict[item]);
6. }
7. </script>

删除元素

1. <script type="text/javascript">
2. var dict = {'k1':"coleak",'k2':'moon','age':18};
3. for(var item in dict)
4. {
5. console.log(dict[item]);
6. }
7. delete dict['age']
8. delete dict.k1;
9. for(var item in dict)
10. {
11. console.log(dict[item]);
12. }
13. </script>

面向对象

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。

方法一

1. <script type="text/javascript">
2. function Person(my_name) {
3. //构造函数里面的方法和属性
4. this._name = my_name;
5. this.getName = function ()
6.     {
7. console.log(this._name);
8.      };
9. this.setName = function (Setname) 
10.      {
11. this._name = Setname;
12.      };
13.  }
14. 
15. var p = new Person("张三");
16.  p.getName();
17.  p.setName("李四");
18.  p.getName();
19. </script>

方法二

1. <script type="text/javascript">
2. class Person {
3. constructor(name) 
4.      {
5. this._name = name;
6.      }
7. getName() 
8.      {
9. console.log(this._name);
10.      }
11. setName(name)
12.      {
13. this._name = name
14.     }
15. }
16. let p = new Preson('张三')
17.  p.getName();  // 张三
18.  p.setName('李四');
19.  p.getName();  // 李四
20. </script>

三目运算符

表达式1?表达式2:表达式3

当我的表达式1成立时执行表达式2 否则执行表达式3

1. <script type="text/javascript">
2. var max = 2>1?'>':'<';
3. alert(max);
4. </script>

转义

escape()函数

定义和用法

escape() 函数可对字符串进行编码,该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。

encodeURI()函数

encodeURI() 函数可把字符串作为 URI 进行编码

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。其中encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号

总结

escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent（指请求参数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。

案例

1. <script type="text/javascript">
2. document.write(escape("http://test.cn/index.html") + "<br />")
3. document.write(escape("?!=()#%&"))
4. </script>

unescape还原

http%3A//test.cn/index.html

%3F%21%3D%28%29%23%25%26

1. document.write(encodeURI("my test.php?name=ståle&car=saab") + "<br />")
2. document.write(encodeURI("?!=()#%&"))

decodeURI还原

my%20test.php?name=st%C3%A5le&car=saab

?!=()#%25&

url编码

1. <script type="text/javascript">
2. document.write(encodeURIComponent("http://test.cn/index.html") + "<br />")
3. document.write(encodeURIComponent("?!=()#%&"))
4. </script>

codeURIComponent还原

http%3A%2F%2Ftest.cn%2Findex.html

%3F!%3D()%23%25%26

其他

console.log 终端输出

alert 弹出框

confirm 确认框标题 true false

url和刷新

location.href 获取url

location.href ='url' 重定向

location.reload() 重新加载

定时器

setInterval()

clearInterval()

1. <script>
2. 
3. var str="Hello world!";
4. document.write(str.substring(3)+"<br>");
5. document.write(str.substring(3,7));
6. 
7. </script>

lo world!（3~length-1，即为后文全输出）

lo w（3~6）

charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1

onblur 当用户离开input输入框时执行一段Javascript代码

综合案例

走马灯

1. <!DOCTYPE html>
2. <html>
3.  <head>
4.    <meta charset="UTF-8">
5.    <title></title>
6.  </head>
7.  <body>
8.    <div id="c1">
9.      coleak的走马灯测试内容
10.     </div>
11.     <script>
12.       function p()
13.       {
14.         var tag =document.getElementById('c1');
15.         var t = tag.innerText;
16.         var l = t.charAt(0);
17.         var s = t.substring(1,t.length);
18.         tag.innerText = s+l;
19.       }
20.       setInterval('p()',350);
21.     </script>
22.   </body>
23. </html>

搜索框

1. <!DOCTYPE html>
2. <html>
3.  <head>
4.    <meta charset="UTF-8">
5.    <title></title>
6.  </head>
7.  <body>
8.    <form method="get" action="">
9.      <input  id='c1' type="text" value="请输入关键字搜索" onfocus="f1();" onblur="f2();" />
10.       <input type="submit" value="搜索" />
11.     </form>
12.     <script>
13.       function f1(){
14.         var tag = document.getElementById('c1');
15.         var c = tag.value
16.         if(c =='请输入关键字搜索'){
17.           tag.value='';
18.         }
19.       }
20.       function f2(){
21.         var tag = document.getElementById('c1');
22.         var c = tag.value;
23.         if(c.length==0){
24.           tag.value='请输入关键字搜索';
25.         }
26.       }
27.     </script>
28.   </body>
29. </html>

JavaScript超全的知识点总结【二】

嵌入方式

函数进阶

字典

面向对象

三目运算符

转义

其他

综合案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景