JS的导入 ```python 定义：运行在浏览器上的前端脚本编程语言 作用：处理前端数据、渲染页面、修改样式、完成交互、前后台数据通信 三种导入方式: 行间式：写在标签中的事件属性 例：<!--<div id="dd" onclick="alert('hello js')"></div>--> 内联式：写在script标签中，script标签应该出现在body的最下方(可以将其放在body结束后) 例子： <script> dd.onclick = function () { alert('hello js') } </script>--> 外联式：通过script标签的src属性，链接外部js文件 例：<script src="js/js导入.js"> 特别注意！ // 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽 即有了外联式，内联式将会被屏蔽！！！ ``` ## JS语法： ```python let aaa = 123; let bbb = '123'; console.log(aaa == bbb); // == 只做数据比较 console.log(aaa === bbb); // === 做数据与类型比较 // 弱语言类型：会自己根据环境决定如何选择类型存储数据 console.log(1 + 2); // 3 console.log('1' + '2'); // 12 console.log(1 + '2'); // 12 console.log(1 - '2'); // -1 ``` ## 数据类型： ```python 三、数据类型 值类型 1) 数字类型 let a = 123; console.log(a, typeof(a)); a = 3.14; console.log(a, typeof(a)); 2) 布尔类型 let b = false; console.log(typeof(b), b); 3) 字符串类型：'' "" `` let c = '123' // 常量声明时必须赋初值，且一旦赋值，不可改变 console.log(c, typeof(c)); 4) 未定义类型：未初始化的变量 let d; console.log(d, typeof(d)); 引用类型 5) 数组（相当于list）： let arr = [1, 2, 3]; console.log(arr, typeof(arr)); 6) 对象（相当于dict）：所有的key必须是字符串 let sex = '男'; let dic = { name: 'Owen', age: 17.5, sex, // value如果是变量，变量名与key同名，可以简写 }; console.log(dic, typeof(dic)); 7) 函数类型 function fn() { } console.log(fn, typeof(fn)); 8) null类型 let x = null; console.log(x, typeof(x)); </script> <script> // 二、变量与常量 let num = 123; num++; console.log(num); const str = '123'; // str = '456'; // 常量声明时必须赋初值，且一旦赋值，不可改变 console.log(str); ``` 三种输出信息的方式： ```python 一、三种输出信息的方式 控制台输出语句 console.log('你丫真帅') 弹出框提示信息 alert('你丫确实帅') 将内容书写到页面 document.write('<h2 style="color: red">你丫帅掉渣</h2>') ``` ## 运算符： ```python 自增自减 console.log(n1); ++在前优先级最高，++在后优先级最低(比赋值符=还低) res = n1++; // 先将n1的值赋值给res，自己再自增1 res = ++n1; // 先自己自增1, 再将n1的值赋值给res 逻辑运算符 let x = 10; res = 0 && ++x; console.log(res, x); res = 100 || ++x; console.log(res, x); console.log(!!x); 三元运算符 // 条件 ? 结果1 : 结果2 res = 10 == '10' ? '相等' : '不等'; console.log(res); ``` ## 流程控制 ```python 顺序、分支、循环 if (条件) { } else if (条件) { } else { } 拓展：随机数 [0, 1) => [m, n] [0, 1) * 11 => [0, 11) parseInt() => [0, 10] + 5 => [5, 15] [0, 1) * (n - m + 1) => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n] 公式：parseInt(Math.random() * (max - min + 1)) + min 循环 while (条件) { 循环体 } do { } while (条件); for (循环变量初始化①; 循环条件②; 循环增量③) { 循环体④; } ``` ## 函数： ```python 函数的定义 function 函数名(参数列表) { 函数体; return 返回值 } function：定义函数的关键字 函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值 参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的) 函数体：完成功能的主体代码 返回值：只能返回一个值 匿名函数 function () { // 没有名字的函数就是匿名函数 } 匿名函数自调用：一次性使用 (function (a, b) { console.log('匿名函数自调用:', a, b) })(10, 20, 30); let abc = 10; hhh.onclick = function () { console.log(abc); };})() ``` ## 四种变量 ```python let a = 10; const b = 20; var c = 30; d = 40; console.log(a); // 有{}就不能被外界访问 console.log(b); // let和const有块级作用域，不允许重复定义 console.log(c); // var没有块级作用域, 但有局部作用域，可以重复定义 console.log(d); // 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用 ``` ## 字符串、数组、字典数据类型的应用： ```python 字符串 1）定义： let ss = '123abc呵呵'; let res; console.log(ss); 2）索引 res = ss[0]; console.log(res); 3）切片 res = ss.slice(3, 6); console.log(res); 4）替换 res = ss.replace('abc', 'ABC'); console.log(res); 5）拆分: string => array res = ss.split(''); console.log(res); 6) 拼接 res = ss + ss; console.log(res); 7) 迭代 for (s of ss) { console.log(s); } 数组 array => string let arr = [3, 1, 2, 4, 5]; res = arr.join(''); // 默认, | '' | '自定义符合' console.log(res); 迭代 for (a of arr) { console.log(a); } 排序 arr.sort(); arr.reverse(); console.log(arr); 增删改查 console.log(arr[4]); arr[4] = 555; console.log(arr[4]); arr.push(100); // 尾增 arr.unshift(200); // 头增 console.log(arr); arr.pop(); // 尾删 arr.shift(); // 头增 console.log(arr); 重点：增删改 console.log(arr); 开始操作的索引 操作的长度 操作后的结果(不定长0~n个) arr.splice(2, 1, 222, 333, 444); console.log(arr); 不定长参数: ...变量名 function f(...a) { console.log(a) } f(1, 2, 3, 4, 5, 6) 字典 增删改查 dic = {}; 增 dic['name'] = 'owen'; dic.age = 18; 改 dic.age = 20; // 对象的删除 delete dic.age; console.log(dic); 查 console.log(dic.name); 字典的迭代用 for in for (k in dic) { console.log(k); }//为什么这时候用dic.k不行？？？k是变量？ 特别注意：这里不是真正意义上的字典。而是object类型!!! ``` ## JS的选择器： ```python 一、js选择器：js如何与html标签建立起联系 1) let h1 = document.getElementById('hhh'); console.log(h1); console.log(hhh); // id是标签的唯一标识，所以js通过id名可以直接拿到标签 let h2s = document.getElementsByClassName('hh2'); let h2s = document.getElementsByTagName('h2'); console.log(h2s); console.log(h2s[0]); 2) 同css3选择器 querySelector就是获取一个 h1 = document.querySelector('#hhh'); h1 = document.querySelector('body h1#hhh'); console.log(h1); h21 = document.querySelector('#hhh ~ .hh2'); console.log(h21); // querySelectorAll就是获取多个 h2s = document.querySelectorAll('#hhh ~ .hh2'); console.log(h2s); // 优势：通过id、class或标签，都可以快速定位到某一个或某几个 h22 = document.querySelector('.hh2:nth-of-type(2)'); console.log(h22); ``` ## JS操作步骤 ```python 1）找目标标签 let h1 = document.querySelector('h1'); let fontSize = h1.style.fontSize; console.log(fontSize); 标签.style.属性名 只能获取行间式!!! getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式) let bgColor = getComputedStyle(h1, null).backgroundColor; console.log(bgColor); console.log(h1.innerText); console.log(h1.innerHTML); console.log(h1.getAttribute('id')); console.log(h1.getAttribute('owen')); 3）修改样式、内容、属性 h1.style.color = 'red'; // js可以直接修改样式 - 修改的是行间式 h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js的 小驼峰命名法 h1.innerText = '修改过后的内容'; h1.innerHTML = '<i>修改过后的内容</i>'; h1.setAttribute('owen', 'oooooooooooooooo'); let img = document.querySelector('img'); if (Math.random() > 0.5) { img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg') } else { img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg') } 表单内容 let inp = document.querySelector('input'); console.log(inp.value); inp.value = 67890; console.log(inp.getAttribute('value')); inp.setAttribute('value', '0000000000000'); ``` ## 键盘、鼠标事件： ```python 为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的this就代表自身） 键盘事件 只要在窗口下，点击鼠标就可以触发 onkeydown、onkeyup、onkeypress /* document.onkeydown = function (ev) { console.log(ev.keyCode); if (ev.keyCode == 37) { console.log('你按了左键'); } else if (ev.keyCode == 38) { console.log('你按了上键'); } console.log(ev.altKey); if (ev.ctrlKey && ev.keyCode == 13) { console.log('留言'); } } */ let inp = document.querySelector('input'); inp.onkeydown = function (ev) { console.log(ev.keyCode) 鼠标事件 let h1 = document.querySelector('h1'); onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup h1.onclick = function (ev) { console.log(ev); // 包含着鼠标的相关信息 鼠标点击点 console.log(ev.clientX, ev.clientY); 特殊按键 console.log(ev.altKey, ev.ctrlKey, ev.shiftKey); }; h2 = document.querySelector('h2'); h2.onmouseover = function () { h1.innerText = 'h2被悬浮了'; h1.style.color = 'green'; }; h2.onmouseleave = function () { h1.innerText = 'h2被放开了'; h1.style.color = 'red'; }; let count = 1; h2.onmousemove = function () { ++count; h1.innerText = '鼠标在h2身上游走' + count + '下'; this.innerText = '鼠标在h2身上游走' + count + '下'; }; ```