简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JS的引入方式
Blogger Information
Blog 52
fans 1
comment 1
visits 38621
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS的引入方式
小丑0o鱼
Original
533 people have browsed it
  1. 1. JS的引入方式
  2. 行内脚本
  4. 在标签内的事件属性值内写的js代码
  7. <button onclick="alert('这是个按钮')">btn</button>
  8. 内部脚本
  10. 在页面内script标签内编写的js代码
  13. <!DOCTYPE html>
  14. <html lang="en">
  15. <head>
  16.   <meta charset="UTF-8">
  17.   <title>Title</title>
  18. </head>
  19. <body>
  20. <button onclick="">btn</button>
  21. <script>
  22.   document.querySelector('button').addEventListener('click', function () {
  23.       alert('Hello PHP!')
  24.   })
  25. </script>
  26. </body>
  27. </html>
  28. 外部脚本
  29. 通过script标签属性src引用的js文件
  30. 外部脚本
  31. demo1.html
  33. <!DOCTYPE html>
  34. <html lang="en">
  35. <head>
  36.   <meta charset="UTF-8">
  37.   <title>Title</title>
  38. </head>
  39. <body>
  40. <button onclick="">btn</button>
  41. <script src="btn.js"></script>
  42. </body>
  43. </html>
  44. btn.js
  46. document.querySelector('button').addEventListener('click', function () {
  47.   alert('Hello World!')
  48. })
  49. 2.变量与常量的声明与使用方式
  50. 使用var或let声明变量。变量命名使用英文、数字、_、$字符，不能使用数字开头。不可以使用保留单词。通常使用小驼峰命名法。
  51. var声明的是全局,let声明的是块级.
  53.     var id = 1;
  54.     let name = 'php';
  55. 使用const声明常量。常量命名使用的英文为大写字母，多个 单词之前使用下划线，因常量不可变，声明时就需要赋值。
  57. const USER_NAME = 'PHP中文网';
  58. 3. 函数与高阶函数
  59. 一个函数是 JavaScript 过程 — 一组执行任务或计算值的语句。
  60. 一个函数定义（也称为函数声明，或函数语句）由一系列的function关键字组成，依次为：
  61. 函数的名称。
  62. 函数参数列表，包围在括号中并由逗号分隔。
  63. 定义函数的 JavaScript 语句，用大括号{}括起来。
  65. 函数
  66. function sum(a,b) {
  67.   return a+b;
  68. }
  69. 匿名函数
  70. 没有函数名的函数。
  71. let sum = function (a,b) {
  72.   return a + b;
  73. }
  74. 高阶函数
  75. 把函数做为参数的函数
  77. function sum(a,b) {
  78.     return a+b;
  79. }
  80. function math(func,arr) {
  81.     return func(arr[0],arr[1]);
  82. }
  83. console.log(math(sum,[1,2]));
  84. 4. 函数的参数，归并参数
  85. 定义函数时，参数如果没有默认值，调用里需要传值，否则会出错误。
  88. function sum(a,b) {
  89.     return a+b;
  90. }
  91. console.log(sum(1));
  92. 定义了默认值
  95. function sum(a,b=10) {
  96.     return a+b;
  97. }
  98. console.log(sum(1));
  99. 当参数不定时，我们使用归并参数 ...来定义,会把多个参数合并为一个数组.
  100. 归并参数
  102.     function sum (...arr) {
  103.         return arr.reduce((a,b)=>a+b);
  104.     }
  105.     console.log(sum(1,2,3,4,5));
  106. 5. 箭头函数的语法与使用场景
  107. 省略function使用胖箭头=>定义的函数。
  108. 语法(参数)=>{函数体}
  109. 如果函数体只有一句,{}可省略。箭头函数可使用于可使用匿名函数的场景。如回调、函数表达式、函数返回等。。。
  110. 如果函数中要使用到this,就不要用箭头函数,不能当构造函数用
  112.     function sum (...arr) {
  113.         return arr.reduce((a,b)=>a+b);
  114.     }
  115. 6. 立即执行函数的语法与使用方式
  116. 英文简称IIFE 语法：(匿名函数体)(参数)
  117. 主要包含两部分。第一部分是包围在 圆括号运算符 () 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。
  118. 第二部分再一次使用 () 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。
  119. IIFE
  121. ((name)=> console.log('name:%s',name))('zhu')
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！