引用方式
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .active { color: red; background-color: yellow; } </style> </head> <body> <h1>www.php.cn</h1> <!-- 1. 行内脚本,直接与一个元素的事件属性绑定 --> <!-- <button onclick="document.querySelector('h1').classList.toggle('active')">Click</button> --> <button onclick="toggleColor()">Click</button> <!-- 2. 内部脚本,将js代码写到一对script标签中 --> <!-- <script> function toggleColor() { document.querySelector("h1").classList.toggle("active"); } </script> --> <!-- 3.外部脚本,实现了js代码的共享 --> <script src="toggle.js"></script> </body></html>
- toggle.js
function toggleColor() {document.querySelector("h1").classList.toggle("active");}
变量与常量
// "php":字面量，直接量// 变量：数据共享，重复使用// 声明let userName；console.log(userName)；//undefind//第一次赋值，初始化userName = "老师"console.log(userName)；//第二次赋值，更新、修改userName = "学生"console.log(userName)；
函数、高阶函数
//回调函数:函数做为参数 document.addEventListener("click", function () { alert("大家晚上好"); }); // 2. 偏函数:将函数做为返回值 let sum = function (a, b) { return function (c, d) { return a + b + c + d; }; }; let f1 = sum(1, 2); // f1是一个函数 console.log(typeof f1); console.log(f1(3, 4)); // 柯里化 sum = function (a) { return function (b) { return function (c) { return function (d) { return a + b + c + d; }; }; }; }; let res = sum(1)(2)(3)(4); console.log("res =", res); // 纯函数: 在函数内部没有引用外部数据的函数 let c = 100; function add(a, b) { // c来自函数外部 // return a + b + c; // 去掉c即为纯函数,此时函数的所有参数都必须是通过调用者传入的 return a + b; } console.log(add(1, 2));
箭头函数
<script> let sum = function (a, b) { return a + b; }; //匿名函数,可以使用箭头函数来简化它 sum = (a, b) => { return a + b; }; console.log(sum(10, 20)); //如果箭头函数的代码体只有一行语句,可以删除大括号与return sum = (a, b) => a + b; //如果函数中要使用到this,就不要用箭头函数,不能当构造函数用 </script>
