1 js引入
<html> <body> </body> <script src="js/xxx.js"></script> <script> // js代码块 </script> </html>
2 js的基本数据类型
// 值类型: number string boolean undefined
// 引用类型: function object(dic)
// 特殊的对象类型: Null Array Date RegExp Math
3 js数组与字典操作
// 数组
var arr = [5, 2, 3, 1, 4];
// unshift() | push()
// shift() | pop()
// splice(beginIndex, ctrlCount, newArgs);
// sort()
// 字典
var dic = {
k1: v1,
...
kn: vn
}
// key一定是字符串类型, value可以为任意类型
// 怎么表示字典成员: dic.key | dic['key']
// delete dic.key来删除
4 js函数
// 1.定义函数 function 函数名(形参列表) { 代码块 }
function fn1() {
console.log('我是函数fn1');
}
var fn2 = function () {
console.log('我是函数fn2');
};
// js匿名函数: 只能在定义阶段被调用一次
(function() {
console.log('我是匿名函数');
})(); // (fn定义)() 第一个()是将定义的fn作为整体拿到内存地址,第二个()是函数的调用
// 2.函数的调用 函数名(实参列表)
fn1();
fn2();
// 3.函数的返回值 js函数有且只有一个返回值
function fn3() {
// 没有明确返回值返回undefined
// 空返回返回undefined
// return;
// 正常返回一个值
// return 10;
// 如果返回多个值, js最终只能返回最后一个值 20
// return 10, 20;
// 如何实现返回多个值 借助 数组和字典
return [10, 20]
}
var res = fn3();
console.log(res);
// 4.函数的参数
// i) 形参与实参个数不需要统一, 但一定按位置传参
function fn4(a, b) { // 实参少传,就会由形参未被赋值, 实参多传,多传的实参就会被丢弃
console.log(a, b)
}
fn4(10, 20, 30)
// ii) 带值的形参就是默认值参数,位置随意
function fn5(a, b=10, c, d=20) { // b有默认值对应在c之前意义不大,原因要给c赋值,一定给b赋值完了
console.log(a, b, c, d)
}
fn5(100, 200, 300);
// iii) ...args为不定长形参
function fn6(a, ...b) { // 不定长参数有数组存储
console.log(a, b)
}
fn6({name:'Bob'}, 1, 2, 3, 4, 5)
5 js完成页面交互
// 1.通过js选择器获取页面标签对象
// 2.为该对象绑定事件, 当该标签触发该事件时就会调用绑定的函数
// 3.在绑定的函数内部完成指定的业务逻辑
// js完成与页面进行交互, 该js一定要写在body的最下方 // 1.通过js选择器获取页面标签对象 // 永远获取匹配到的第一个标签对象,参数为css语法的选择器 var box = document.querySelector('body .box'); // 永远获取匹配到的所有标签对象(不够有多少个结果一定是数组),参数为css语法的选择器 var boxs = document.querySelectorAll('.box'); console.log(box); console.log(boxs); console.log(boxs[1]); // 2.为目标标签对象(们)绑定交互的方式(事件) // 3.在事件的内部完成具体交互的业务逻辑 box.onclick = function () { // 该方法是在box被点击是系统回调, 所有在函数内部拿到this对象一定是box console.log('box1被点击了', this); // 获取内容 var msg = this.innerText; console.log(msg); // 修改内容 this.innerHTML = "<b>呵呵</b>"; // 获取样式 getComputedStyle(页面对象, 伪类 没有时用null填充).js语法方式的样式名称 var fontSize = getComputedStyle(this, null).fontSize; console.log(fontSize); // 设置样式 this.style.backgroundColor = "red"; this.style.marginLeft = '100px'; // 获取类名 var className = this.className; console.log(className); // 设置类名 this.className += " big"; // 空格不可以省略 } // boxs[1].onmouseover = function () { // console.log('box2被悬浮了') // }
6 js流程控制
//1 顺序结构： 代码本质就是顺序结构 //2 分支结构： if家族 //3 循环结构： for , while , do...while
/* py: if 条件1： 代码块1 elif 条件2： 代码块2 else: 代码块3 */ /* js: if(条件){ 代码块1; } else if (条件2){ 代码块2; } else { 代码块3; } */
var btn = document.querySelector('.btn'); var inp = document.querySelector('.inp'); btn.onclick = function () { //1 如何获取input框中的内容，该标签的value值 val =inp.value; // alert(val); //2 将内容转换为数字，转换成功就是数字，失败则是NaN num = +val; //只要不是NaN就是数字 isNaN() // alert(num) //3 判断弹出结果 //!就是取反，相当于py中的not if (!isNaN(num)){ alert('是数字'); } else { alert("不是数字"); } //4 清空输入框 inp.value = ""; }
//1 js之while循环： 除了可以解决以下两种循环方法(相对复杂)，还可以完成不知道循环次数的需求 //循环流程：1 初始化循环变量 2进行变量的判断 3完成业务逻辑 4循环变量增量(234是循环体) n = 0; while (n < 5){ console.log("呵呵"); n += 1; }
//2 js之for循环: 很明确知道循环次数 //循环流程: 1 var i=0 , 2 i<5, 3 console.log 4 i+=1 (1是入口 2是出口,和while一样) for (var i = 0; i < 5; i += 1){ console.log("for循环"); }
//3 js之do...while循环： 在条件判断之前就需要执行一次循环体 count =0; do { console.log("do...while循环") count += 1 } while (count < 5)