AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-08-24 86
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
前端开发
索引
Java
程序员
关键词：
JavaScript知识点
coleak
目录
相关文章
雷霆半月斩掉你的板砖
|
6月前
|
JavaScript 前端开发 API
Vue.js 知识点总结（一）
Vue.js 知识点总结（一）
雷霆半月斩掉你的板砖
44 0
进步`于辰
|
19天前
|
自然语言处理 JavaScript 前端开发
[JS]知识点
本文介绍了JavaScript中的多个重要知识点，包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源，帮助读者更好地理解和应用这些概念。内容持续更新中，适合初学者和进阶开发者参考。
进步`于辰
14 2
[JS]知识点
iOS开发欢乐使者
|
6月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点：Vue.js 安装
总结 vue3 的一些知识点：Vue.js 安装
iOS开发欢乐使者
73 0
iOS开发欢乐使者
|
6月前
|
JavaScript
总结 vue3 的一些知识点：​Vue.js 条件语句​
总结 vue3 的一些知识点：​Vue.js 条件语句​
iOS开发欢乐使者
50 0
进步`于辰
|
19天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
进步`于辰
32 1
CamilleKing
|
27天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点，ES6 还带来了许多其他的特性和改进，这些特性使得 JavaScript 更加现代化和强大，为开发者提供了更多的便利和灵活性。
CamilleKing
20 3
神明木佑
|
1月前
|
存储 JSON JavaScript
JS知识点
JS知识点
神明木佑
21 3
小强在此
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
25 5
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点，包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子，演示了类的构造器、方法定义、继承关系和静态方法的调用。
杀死一只知更鸟debug
36 0
JavaScript 类知识点概览
神明木佑
|
1月前
|
前端开发 JavaScript
JavaScript 知识点总结
JavaScript 知识点总结
神明木佑
28 0

热门文章

最新文章

  • 1
    java和JavaScript究竟什么关系，有什么样的区别
  • 2
    JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
  • 3
    JS代码位置
  • 4
    【转】Javascript关键字和保留字
  • 5
    JS中遍历语法的比较
  • 6
    JavaScript 操作 Cookie
  • 7
    05.javascript访问CSS
  • 8
    Node.js 中流操作实践
  • 9
    js数组遍历some,foreach,map,filter,every对比
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    105
  • 2
    JavaScript 数组方法概览
    37
  • 3
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    57
  • 4
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    46
  • 5
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 6
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    56
  • 7
    JavaScript 的垃圾回收机制有一些潜在的缺点
    40
  • 8
    nbcio-vue下载安装后运行报错，diagram-js没有安装
    59
  • 9
    了解JavaScript的垃圾回收机制
    39
  • 10
    uni-app和Vue.js二者之间有什么区别？
    64

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML5 新特性教程
  • 前端开发CSS基础
  • HTML基础入门学习
  • HTML 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • CSS基础教程
    • 下一篇
    无影云桌面