妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完，并且认真完成了课后练习。感觉在JS方面的技能算是入了个门了。课后练习的作业完成的代码我都汇总在了这里。至于视频课的学习笔记，则记录如下。

第01课JS入门基础_热身课程

写JS的步骤

  1. 先实现布局
  2. 想出实现原理
  3. 了解JS语法

希望把某个元素移除的实现

  • display: none; 显示为无
  • visibility: hidden; 隐藏
  • width \ height
  • 透明度
  • left \ top
  • 拿与背景色相同的div盖住该元素
  • 利用margin值
  • ……

获取元素

  • getElementById() ——静态方法，前面只能跟document
  • document.body、document.title 页面中只有一个的元素
  • getElementsByTagName() ——动态方法，前面可以跟document也可以跟其他元素，返回的是一个类似数组的元素的集合
    • 有类似数组的length
    • 有类似数组的应用方式，比如ali[0]
    • 在用TagName的时候，必须要加上中括号[]
    • 所谓的动态方法，是指通过js动态添加的元素，getElementsByTagName()也可以找到，但是document.getElementById是找不到的

事件

事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件

  • onclick
  • onmouseover
  • onmousedown
  • onmouseout
  • onmouseup
  • onmousemove
  • ……

如何添加事件

  • 元素.onmouseover

函数

函数可以理解为命令，做一些事情，如:

function abc() { //肯定不会主动执行！ … }

  1. 直接调用：abc();
  2. 事件调用：元素.事件 = 函数名 (oDiv.onclick = abc;)
  3. ……

function(){} 匿名函数

元素.事件 = function(){}

测试

  • alert(1); 带确定按钮的警告框；alert(‘ok’); ‘ok’ 字符串
  • 初学者：最好保持随时写，随时测试的习惯

变量

var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;
  • 属性名

  • 属性值

  • 属性的读操作：获取、找到
    • 元素.属性名
  • 属性的写操作：替换、修改
    • 元素.属性名 ＝ 新的值
    • 添加的话，需要用 +=
  • innerHTML 读取元素内的所有HTML代码

字符串连接：加号

属性读写操作的注意事项

  • JS属性中不允许出现“-”，例如font-size改为fontSize
  • class在js里面是保留字，在js作用class要用className
  • 所有的相对路径都别拿来做判断（如img的src、还有href）
  • 颜色值不要拿来做判断（因为有red、#f00、rgb(250, 0, 0)等写法
  • 相对路径也不要拿来做判断
  • innerHTML的值别拿来做判断
  • IE6、IE7、IE8中表单元素的type更改不了，不支持，会报错；其他的都可以。
  • 在有些浏览器中，直接更改float值可能不支持。在js中，可以用IE(styleFloat)和非IE(cssFloat)来区别对待。
  • 不能用来做判断的东西，可以创造一个开关，利用布尔值来实现

关于兼容：

  • 技术上：必须能做到掌握兼容性（兼容性问题的解决方案）
  • 需求上：商量着来（提供最准确的呈现方案）

[]中括号的使用

  • 点“.”后面的值无法修改
  • 中括号[]里面的值可以修改；JS中允许把”.”替换成“[]”

条件判断

  • if(条件){……};
  • if(条件){……} else {……};
  • if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};

数组

  • “放数据的仓库”
  • 中括号[]，半角都好分隔，最后一个数据后面不要加逗号
  • 数组的length属性
  • 为数组最后塞东西用push();

for应用

for循环的使用场景：

  • 如果想要重复执行某些代码
  • 每次执行的时候，有个数字在变化

for循环的执行顺序：1→234→234……

  1. var i = 0;
  2. i < 3; 关键步骤
  3. 括号里面的所有代码
  4. i++

注意下面这样一个循环

for (var i=0; i<aLi.length; i++) {
  aLi[i].onclick = function(){
    alert(i);
  }
}

cssText文本格式化与属性操作

  • oDiv.style.cssText = ‘width: 200px; height: 200px;’;
  • cssText不会动head的style中的设置；但是会改变行间样式（注意，是替换行间样式，而非新增行间样式）

按钮点击之后，不再重复功能的思路

  1. 找按钮的麻烦，比如点击一次之后，设置oBtn.disabled = true;
  2. 继续找按钮的麻烦，比如点击一次后，将按钮隐藏oBtn.style.display = ‘none’;
  3. 将按钮添加的东西清空，然后再添加一次，先清空再生成
  4. 用判断

this指向及this应用

window是js中的”老大“

function fn1(){
    alert(this);
}
fn1();

上述代码中执行函数fn1()相当于window.fn1();因此，在函数体内弹出这个this仍然是window。

function fn1(){
    alert(this);
}
oBtn.onclick = fn1;

上述用按钮的点击事件调用的fn1函数，最终弹出来的是这个按钮，而不是window。

function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    alert(this)
}

上述代码，点击按钮弹出的this仍然是oBtn这个按钮。

function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    fn1();
}

上述代码，点击oBtn按钮，弹出的就不再是oBtn这个对象，而是window。

<input  />

述代码中，弹出的this就是window。

  • this: 调用当前方法（函数）的那个对象 
    function fn1(){
    this
}

fn1(); this ＝> window

oDiv.onclick = fn1; this => oDiv

oDiv.onclick = function(){
    this => oDiv
};

oDiv.onclick = function(){
    fn1(); fn1()里面的this => window
}

<div onclick="  this  "></div> this => div

<div onclick = "  fn1();  "></div>  fn1()里面的this => window
    <script>

fn1(this);
function fn1(obj){
  obj => window
}

oDiv.onclick = function(){
  this
  fn1(this);
};
function fn1(obj){ obj => oDiv }

</script>
    <input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  for(var i=0; i<aBtn.length; i++) {
    aBtn[i].onclick = function(){
      this.style.background = 'yellow';
    }
  }
}

    上述代码还等价于下面这段代码：

  • <input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  for(var i=0; i<a.aBtn.length; i++) {
    aBtn[i].onclick = fn1; //注意不要在fn1后面加括号
  }
  
  function fn1(){
    this.style.background = 'yellow';
  }
}

     

第03课：自定义属性、索引值

 自定义属性的读写操作

winddow.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  aBtn[0].abc = 123; //自定义属性
  
  // alert(aBtn[0].abc); 自定义属性的读
  // aBtn[0].abc = 456; 自定义属性的写
}

JS可以为任何HTML元素添加任意个自定义属性

自定义属性应用

用自定义属性可以元素添加开关属性，作为控制开关。如下面这个例子：

window.onload = function(){
  var aLi = document.getElementsByTagName('li');
  // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。
  
  for(var i=0; i<aLi.length; i++) {
    aLi[i].onOff = true;
    aLi[i].onclick = function(){
      if (this.onOff){
        this.style.background = 'url(img/active.png)';
        this.onOff = false;
      } else {
        this.style.background = 'url(img/normal.png)';
        this.onOff = true;
      }
    }
  }

获取自身递增数字及匹配数组内容

在网页上设置三个按钮，默认值为0，每点击一次按钮，字母依次ABCD轮换。

<input type="button" value="0" />
<input type="button" value="0" />
<input type="button" value="0" />

var aBtn = document.getElementsByTagName('input');
  var arr = ['A', 'B', 'C', 'D'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].num = 0;
    aBtn[i].onclick = function(){
      this.value = arr[this.num]
      this.num++;
      if(this.num === arr.length){
        this.num = 0;
      };
    };
  };

添加索引值、匹配数组、HTML元素

把三个按钮的value与数组里面的值依次进行匹配。

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var arr = ['莫涛','张森','杜鹏'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].index = i; //自定义属性index，添加索引值
    aBtn[i].onclick = function(){
      //alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。
      this.value = arr[this.index];
    };
  };

上面是通过索引值匹配数组值，匹配HTML中的元素也是同理。

想建立”匹配“、”对应“关系，就用索引值。

第04课：JS数据类型、类型转换

数据类型

  • HTML标签类型：
    • block
    • inline
    • inline-block
    • table
    • ……
  • JS中的数据类型：
    • 数字（NaN属于数字类型）
    • 字符串
    • 布尔值
    • 函数类型
    • 对象
      • obj
      • []
      • {}
      • null （空是不能添加自定义属性的）
    • 未定义 undefined

typeof用来判断数据类型。

字符串方法charAt()：通过字符串的下标获取子字符串。

对象可以添加自定义属性。如果把函数扔给了对象，就给该对象添加了一个方法。

JS数据类型转换

把字符串转成数字的方法：

JS方法：Number();

var a = '100';
alert(a + 100); //'100100'

var b = '00100';
alert(Number(b)); //100

var c = '+100';
alert(Number(c)); //100

var d = '';
alert(Number(d)); //0

var e = '   ';
alert(Number(e)); //0

var f = true;
alert(Number(f)); //1

var g = false;
alert(Number(g)); //0

var i = [];
alert(Number(i)); //0 空数组用Number转出来是0

var j = [''];
alert(Number(j)); //0

var k = [123];
alert(Number(k)); //123

var l = ['123'];
alert(Number(l)); //123

var o = null;
alert(Number(o)); //0

----------------------------
var m = [1,2,3];
alert(Number(m)); //NaN

var json = {abc:123};
alert(Number(json)); //NaN

var json2 = {};
alert(Number(json2)); //NaN 即使是空json，Number方法也转不了

var h = function(){};
alert(Number(h)); //NaN

var p;
alert(Number(p)); //undefined 

var q = '100px';
alert(Number(q)); // NaN

parseInt与parseFloat

var a = '100px';
alert(parseInt(a)); //100

var b = '100px123456789';
alert(parseInt(b)); //100

var d = '-100px';
alert(parseInt(d)); //-100 parseInt还是认加减号的

var e = '   100px';
alert(parseInt(e)); //100 parseInt也是认空格的

var f = '000000100px';
alert(parseInt(f)); //100

var g = '12.34元';
alert(parseInt(g)); //12 parseInt只能转出整数
------------------------------
var c = true;
alert(parseInt(c)); //NaN

//parseInt也不能用于转函数等

parseInt()方法还有一个参数，就是按照几进制来转，比如parseInt(a, 10);表示按照十进制来转；parseInt(b, 2);表示按照二进制来转。

var a = '12.34元';
alert(parseFloat(a)); //12.34

var b = '12.3.4元';
alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点

parseInt和parseFloat的配合使用，可以来判断某个值是整数还是小数，如下：

var num = '200.345';
if(parseInt(num) == parseFloat(num)) {
  alert(num + '是整数');
} else {
  alert(num + '是小数');
}

JS中稀奇古怪的隐式类型转换

显式类型转换（强制类型转换）：

  • Number();
  • parseInt();
  • parseFloat();

隐式类型转换：

  • - * \/ \% 减、乘、除、取模可以将字符串转成数字
  • + 加号可以将数字转成字符串
  • ++ -- 加加、减减运算符可以把字符串转成数字
  • < > 大于号、小于号可以把字符串转成数字，一定要注意是进行数字的比较还是字符串的比较
  • ! 取反 把右边的数据类型转成布尔值
  • ==
  • alert('200' - 3); //197
alert(200 + '3'); //2003

var a = '10';
a++;
alert(a); //11

alert('10'>9); //true
alert('1000000'>'9'); //false
//注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。

alert(!'ok'); //false
alert(!100); //false

alert('2' == 2); //true
alert('2' === 2); //false 三个等号不仅判断值，还会先判断两者的类型

    隐式类型转换转不出来，也会返回一个NaN，例如：alert(‘……’ - 9);就会弹出NaN。

    isNaN应用实例

    NaN: (not a number)。Nan是个不是数字的数字类型。所有的数字都是数字类型，但不是所有的数字类型都是数字。

    • NaN是个数字类型，但它不是个数字。
    • 一旦写程序中出现了NaN，肯定说明进行了非法的运算操作。
    • NaN是个false。
    • NaN与自己都不相等。
    var a = Number('abc');
//alert(a); //NaN
//alert(typeof(a)); //number

if(a) { //会弹出‘假’，说明NaN是false
  alert('真');
} else {
  alert('假');
}

//alert(a === a); //false NaN比较，比出false

    isNaN：is not a Number 是不是不是个数字（不是数字）。

    isNaN();是个方法，用来干活的。

    • 帮助判断某些值是不是数字。
    • 不喜欢数字、讨厌数字(不是讨厌数字类型，isNaN遇到NaN就很喜欢，会返回true，但是NaN就是个数字类型) 用来判断数字。如alert(isNaN(2)); 返回false。alert(isNaN(‘我爱你’)); 返回true。alert(isNaN(function(){})); 返回true。

    isNaN的判断过程，将括号里面的东西扔给Number，Number转出来数字，就返回false；转不出来就返回true。

  • alert(isNaN('250'));
//Number() '250' => 250 => false

alert(isNaN(true));
//Number() true => 1 => false

alert(isNaN([]));
//Number() [] => 0 => false

    下面是一个isNaN的小应用：

  • <input type="text" />
<input type="button" value="判断输入值是不是数字" />
window.onload = function(){
  var aInp = document.getElementsByTagName('input');
  var str = '';
  
  aInp[1].onclick = function(){
    str = aInp[0].value
    //alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串
    
    if(isNaN(str)){
      alert(str + '不是数字');
    } else {
      alert(str + '是数字');
    }
  }
}

     

第05课：函数传参、重用、价格计算

参数 ＝ JS的数据类型：

  • 数字
  • 字符串
  • 布尔值
  • 函数
  • 对象
  • 未定义

参数类型判断

fn1(100);
fn1('miaov');
fn1(function(){alert(1);});

function fn1(a){
  if(typeof a === 'number' && a === a) {
    alert(a+20);
  } else if (typeof a === 'string'){
    alert(a.charAt(2));
  } else if (typeof a === 'function'){
    a();
  }
}

重用代码步骤

  1. 尽量保证HTML代码结构一致，可以通过父级选取子元素
  2. 把核心的主程序实现，用函数包起来
  3. 把每组里不同的值找出来，通过传参实现

第06课：作用域、JS预解析机制

什么是作用域

  • 域：空间、范围、区域
  • 作用：读、写

浏览器的“JS解析器”

“JS解析器”：浏览器中专门用来读JS的程序。它至少做下面两件事（当然还有其他事情）：

  1. 准备工作（“找一些东西”）：根据var、function、参数找东西 —— JS的预解析

    a = 未定义 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){alert(2);} 所有的函数，在正式运行代码之前，都是整个函数块

    遇到重名的，只留一个

  2. 逐行解读代码 每读一行，就会回到预解析的库里面去看一眼。 碰上表达式（带有 = + - * / % ++ – ! 参数……都是表达式）能够改变值的是表达式。碰上表达式，就到库里面去修改值。

  3. alert(a); //未定义
var a=1; //在库里面a的值由未定义换成1
function fn1(){alert(2);}
alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a);  //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function

    以上代码在预解析中的过程如下：

    1）预解析： var function 参数 …… 读到 var a = 1 => a 未定义 读到 function a(){alert(2);} => a = functiona(){alert(2);} 变量与函数重名了，就只留下函数： a = function(){alert(2);} 读到 var a = 3 => a 未定义，这里与上面名为a的函数重名了，所以还是保留a = function(){alert(2);} 读到function a(){alert(4);} => a = function a(){alert(4);} 与前面的 a = function(){alert(2);}重名，根据上下文，后面的函数覆盖了前面的函数，所以预解析就只留下了 a = function(){alert(4);} 2）逐行解读代码 读到表达式，表达式可以修改预解析的值。参数也可以改变预解析的值。 遇到函数调用，又要做两件事：预解析、逐行解析代码 函数声明，不是表达式，不改变预解析里面的值。

作用域

  • 在<script>标签里面声明的函数和变量，都是全局函数和全局变量（但是js解析器要把一块的事情处理完，然后处理另外一块事情）自上而下
  • 函数：函数也是个域，也是先找后执行。由里到外
  • 对象 {}

作用域链：从子级作用域跳到父级作用域的过程

第07课：运算符、流程控制

算术

  • + 加
  • - 减
  • * 乘
  • / 除
  • % 取模（求余数）

赋值

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

关系

  • <
  • >
  • <=
  • >=
  • ==
  • !=
  • ===
  • !===

逻辑

  • && 与
  • || 或
  • ! 否

运算优先级

  • 括号

程序流程控制

判断

  • if
  • switch (case break default)
  • ?:

循环

  • while
  • for

跳出、跳过

  • break
  • continue

什么是真，什么是假

  • 真：非零的数字、字符串、true、函数、object：[] {} 能找到的元素
  • 假：零、NaN、空字符串、false、null、未定义、不能找到的元素

第08课：return、定时器基础

  • return 返回值：函数名+括号（例如fn1())就相当于得到了该函数里面return后面的值
  • 所有函数默认返回值是：undefined
  • 可返回：数字、字符串、布尔、函数、对象（元素、[]、{}、null）、未定义
  • return后面的任何代码都不执行了
  • alert fn1();
function fn1(){
    return function(){
        alert(1);
    }
}
此时弹出的是：function(){alert(1);}

alert fn1()();
function fn1(){
    return function(){
        alert(1);
    }
}
此时弹出的是1，也就是return的匿名函数执行的结果。

alert fn1()(10);
function fn1(){
    return function(a){
        alert(a);
    }
}
此时弹出的是10。

alert fn1(20)(10);
function fn1(a){
    return function(b){
        alert(a + b);
    }
}
此时弹出的是30。

    arguments

    fn1(1, 2, 3); //实参——实际传递的参数

    function fn1(a, b, c) //形参——形式上，a、b、c这些名代表1、2、3

    如果不写形参，1、2、3也能够传进来，都存在arguments的肚子里。

    function fn1(){ //arguments => [1, 2, 3] —— 实参的集合（不是数组，但是类似数组，有length，也可以用下标找到其中的数据） }

    当函数参数个数无法确定的时候，用arguments：

  • alert(sum(1,2,3));
function sum(){
    var n=0;
    for(var i=0; i<arguments.length; i++){
        n += arguments[i];
    }
    return n;
}
var a=1;
function fn2(a){ //arguments的某个数值就相当于某个形参
    arguments[0]=3;
    alert(a); //弹出3
    var a=2;
    alert(arguments[0]); //弹出2
}
fn2(a);
alert(a); //弹出1

    currentStyle与getComputedStyle应用

    • getComputedStyle获取的是计算机（浏览器）计算后的样式，但是不兼容IE6、7、8
    • currentStyle方法兼容IE6、7、8，但是不兼容标准浏览器

    属性判断法、版本检测法来解决浏览器间的兼容性问题 ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~

    注意事项：

    • 如果用以上的方法获取某个元素的复合样式，例如background，那么就不要用上面那种方式获取，在不同浏览器间有兼容性问题。用上面的方法获得单一样式，而不要用来获取复合样式。
    • 使用以上方法，注意不要多按空格
    • 使用以上方法，不要获取未设置后的样式，因为浏览器间不兼容
    • 在火狐4.0之前，有个bug，如果getComputedStyle后面不跟参数，会出现问题，所以有些人写成getComputedStyle(obj, false)，那个false就是为了解决这个bug。这里的bug也可以写成0，或者其他任何参数都可以。不过目前火狐的浏览器都比较高，因此这个问题已经不是很常见了。

第09课：定时器管理、函数封装

setInterval

setInterval(函数, 毫秒); 重复执行（发动机）

var i=0;
function fn1(){
    document.title = i;
    i++;
}
setInterval(fn1, 1000);

事件调用的方法

  • fn1(); 直接调用
  • document.onclick = fn1; 事件调用
  • setInterval(fn1, 1000); 函数调用

clearInterval

var timer = setInterval(函数, 毫秒); //重复执行
clearInterval(timer); //清除定时器
var i=0,
    timer = null;
function fn1(){
    i++;    
    document.title = i;
    
    if(i===10){
        clearInterval(timer);
    }
}
timer = setInterval(fn1, 1000);

注意

定时器如果是由事件控制的，比如按钮的onclick控制的，那么一定要遵循一个原则，先关后开。这样可以避免连续点击多次按钮，重复设置定时器。另外，clearInterval()不论里面填的是一个timer，还是null还是未定义，都可以顺利运行。

setTimeout

var timer = setTimeout(函数, 毫秒); 执行一次（炸弹）

clearTimeout(timer);

定时器的小应用（函数封装和回调函数）

doMove的函数封装

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head>

<body>

<input id="btn1" type="button" value="走" />
<div id="div1"></div>

<script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    // doMove ( oDiv, 'width', 34, 600 );
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn && endFn();
            
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>

</body>
</html>
View Code

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode