妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习。感觉在JS方面的技能算是入了个门了。课后练习的作业完成的代码我都汇总在了这里。至于视频课的学习笔记,则记录如下。
第01课JS入门基础_热身课程
写JS的步骤
- 先实现布局
- 想出实现原理
- 了解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() { //肯定不会主动执行! … }
- 直接调用:abc();
- 事件调用:元素.事件 = 函数名 (oDiv.onclick = abc;)
- ……
function(){} 匿名函数
元素.事件 = function(){}
测试
- alert(1); 带确定按钮的警告框;alert(‘ok’); ‘ok’ 字符串
- 初学者:最好保持随时写,随时测试的习惯
变量
var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;
第02课HTML属性操作
- 属性名
属性值
- 属性的读操作:获取、找到
- 元素.属性名
- 属性的写操作:替换、修改
- 元素.属性名 = 新的值
- 添加的话,需要用 +=
- 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……
- var i = 0;
- i < 3; 关键步骤
- 括号里面的所有代码
- 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中的设置;但是会改变行间样式(注意,是替换行间样式,而非新增行间样式)
按钮点击之后,不再重复功能的思路
- 找按钮的麻烦,比如点击一次之后,设置oBtn.disabled = true;
- 继续找按钮的麻烦,比如点击一次后,将按钮隐藏oBtn.style.display = ‘none’;
- 将按钮添加的东西清空,然后再添加一次,先清空再生成
- 用判断
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 id="btn2" type="button" value="按钮2" onclick="alert(this)" />
述代码中,弹出的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)); // var c = '+100';
alert(Number(c)); // var d = '';
alert(Number(d)); // var e = ' ';
alert(Number(e)); // var f = true;
alert(Number(f)); // var g = false;
alert(Number(g)); // var i = [];
alert(Number(i)); //0 空数组用Number转出来是0 var j = [''];
alert(Number(j)); // var k = [123];
alert(Number(k)); // var l = ['123'];
alert(Number(l)); // var o = null;
alert(Number(o)); // ----------------------------
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)); // var b = '100px123456789';
alert(parseInt(b)); // var d = '-100px';
alert(parseInt(d)); //-100 parseInt还是认加减号的 var e = ' 100px';
alert(parseInt(e)); //100 parseInt也是认空格的 var f = '000000100px';
alert(parseInt(f)); // 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); //
alert(200 + '3'); // var a = '10';
a++;
alert(a); // 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比较,比出falseisNaN: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();
}
}
重用代码步骤
- 尽量保证HTML代码结构一致,可以通过父级选取子元素
- 把核心的主程序实现,用函数包起来
- 把每组里不同的值找出来,通过传参实现
第06课:作用域、JS预解析机制
什么是作用域
- 域:空间、范围、区域
- 作用:读、写
浏览器的“JS解析器”
“JS解析器”:浏览器中专门用来读JS的程序。它至少做下面两件事(当然还有其他事情):
准备工作(“找一些东西”):根据var、function、参数找东西 —— JS的预解析
a = 未定义 所有的变量,在正式运行代码之前,都提前赋了一个值:未定义 fn1 = function fn1(){alert(2);} 所有的函数,在正式运行代码之前,都是整个函数块
遇到重名的,只留一个
逐行解读代码 每读一行,就会回到预解析的库里面去看一眼。 碰上表达式(带有 = + - * / % ++ – ! 参数……都是表达式)能够改变值的是表达式。碰上表达式,就到库里面去修改值。
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); //弹出1currentStyle与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>
抖动的函数封装
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
img { width:100px; height:100px; position:absolute; top:200px; }
</style>
<script> function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function shake ( obj, attr, endFn ) { var pos = parseInt( getStyle(obj, attr) ); // 有隐患的 var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null; for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0); clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();
}
}, 50);
} window.onload = function () {
var aImg = document.getElementsByTagName('img'); for ( var i=0; i<aImg.length; i++ ) {
aImg[i].style.left = 80+i*110 + 'px'; aImg[i].onmouseover = function () {
shake( this, 'top' );
};
}
};
</script> </head> <body> <img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" /> </body>
</html>
第10课:日期对象、时钟倒计时
Date对象参数
- 数字形式:new Date(2013, 4 , 1 , 9 , 48 , 12); //年月日时分秒,注意月是从0开始算的。
var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0);
var t = Math.floor((iNew - iNow)/1000);
var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
- 天:Math.floor(t/86400)
- 时:Math.floor(t%86400/3600)
- 分:Math.floor(t%86400%3600/60)
秒:t%60
- 字符串形式:new Date(‘June 10, 2013 12:12:12’);
var iNow = new Date();
var iNew = new Date('November 10, 2013 21:56:0');
var t = Math.floor((iNew - iNow)/1000);
var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
时间戳
getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数
第11课:字符串、查找高亮显示
字符串获取类、封装检测数字的方法
- .length 空格也算长度
- .charAt() 找到子字符串。括号中什么也不写,默认找第0个。如果超过字符串长度减1,则返回空
- .charCodeAt() 得到指定子字符的unicode编码。括号中什么也不写,默认找到第0个字符的unicode值,括号中最小为0,最大为字符串长度减1
- String.fromCharCode(); 根据字符编码,返回一个字符。例如String.fromCharCode(22937);返回的是“妙”字;要得到多个字符,可以用逗号将不同字符编码隔开,例如:String.fromCharCode(22937, 21916);返回的就是“妙味”两个字。0~9 => 48~57;a~z => 97~122;A~Z => 65~90
var str = '妙味课堂';
//alert( str.length );//4
//alert( str.charAt() );//妙 //alert( str.charCodeAt() ); // 22937
//alert( str.charCodeAt(1) ); // 21619 //alert( str.charCodeAt() ); // 0~9 48~57 a~z 97~122 A~Z 65~90 alert( String.fromCharCode(22937, 21619) );//妙味
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>检测输入的是数字</title>
</head> <body> <input type="text" />
<input type="button" value="检测" /> <script> // alert( detectNum('123456') ); var aInp = document.getElementsByTagName('input'); aInp[1].onclick = function () { var val = aInp[0].value; if ( detectNum(val) ) {
alert( '恭喜,'+ val +'全是数字' );
} else {
alert('输入有误');
}
}; function detectNum ( str ) {
var n = 0;
for ( var i=0; i<str.length; i++ ) {
n = str.charCodeAt(i);
if ( n<48 || n>57 )return false;
}
return true;
} </script> </body>
</html>
indexOf、lastIndexOf
- .indexOf() 返回某个字符或字符串在整个字符串中的位置 str.indexOf(‘m’, 5)代表在str字符串中的第5位开始往后找字符m的位置。如果用indexOf()来找,找不到,则返回-1。从左往右找。如果第二个参数为负数,则默认当成0来处理。
- .lastIndexOf() 从右往前找,也可以带数字参数,表示从哪里开始往前找。
var str = 'www.miaov.com/2013ww';
for ( var i=0; i<str.length; i++ ) {
if ( str.charAt(i) === 'a' ) {
// alert(i);//6
}
}
//alert( str.indexOf('a') );//6
//alert( str.indexOf('a', 5) );//6
// alert( str.indexOf('X') ); // -1 表示没找到 alert( str.indexOf('2013', 2) ); //14
var str = '妙味课堂是';
str.indexOf('妙味', 2) // 从左往右找
alert( str.lastIndexOf('堂',4) );//3
// 如果第2个值为负数,默认当成0来处理
//字符串比较 比较第一位的编码值
alert( 'a'.charCodeAt() );//
alert( '1' > '2' ); //false
alert( 'cbbbbb' > 'b' );//true
alert( '10000' > '2' ); //false
比较类、截取类
字符串的大小比较,比较的就是字符串第0位的字符的unicode编码
- .substring(n, m) 截取从第n位起,到m位结束的字符。如果没有m,就默认截取到最后一位。str.substring(2, 0);和str.substring(0, 2);的结果是一样的。substring可以检测里面两个参数的大小,如果后面的参数小于前面的参数,它就把这两个参数自动颠倒过来。如果括号里面什么参数都没有,就相当于从0位截取到最后一位,也就是整个字符串。如果参数中有负数的话,就当做0处理。
- .slice(n, m) str.slice(0, 2)和str.slide(2, 0)结果不一样。后者找不到结果,因为.slice()方法,不会判断里面参数的大小并交换参数位置。str.slice(-2);截取的是从最后一位截取到倒数第二位。-1代表的是最后一位字符串。str.slice(-4, -2);截取的是倒数第四位到倒数第二位的字符串。
var str = '妙味课堂是一支独具特色的IT培训团队'; alert( str.substring(0,2) ); //妙味
alert( str.substring(2,0) ); //妙味 // 可以检测两个数,大的往后扔,小的往前扔
alert( str.substring(-3, 2) ); //妙味 // -3 当成0处理
alert( str.substring(2, -3) ); //妙味 alert( str.slice( 2, 0 ) ); //空 // 不交换位置
alert( str.slice( -4, -2 ) ); //培训 // 负数从后面倒着往前数~
字符串操作总结
var str = '妙味课堂-WWW.miaov.com'; str.charAt(1); //味
str.charCodeAt(1); //
String.fromCharCode(22937, 21619); //妙味 str.indexOf('m', 3); //
str.lastIndexOf('o'); // '1000' < '2' //true
'1000' > 2 //true str.substring(0, 4); //妙味课堂
str.slice(-3); //'com' str.toUpperCase(); //'妙味课堂-WWW.MIAOV.COM'
str.toLowerCase(); //'妙味课堂-www.miaov.com' str.split('.', 2); //['秒微课堂-www', 'miaov'] var arr = ['www', 'miaov', 'com'];
arr.join('.'); //'www.miaov.com'
第12课:数组随机、数组去重
json数据格式及语法
var json = { name: 'leo', age: 32};
alert(json.name); var imgData = {
url: ['img/1.png', 'img/2.png'],
text: ['图片一', '图片二']
};
alert(imgData.url[1]); var json2 = { 'name': 'miaov' }; //推荐的安全格式的写法
alert(json2.name);
alert(json2['name']);
json2.name = 'abc';
json2['name'] = '妙味'; //注意中括号里面要用引号 var arr = [{'name': 'TM', 'age': 23}, {'name': 'leo', 'age': 32}];
alert(arr[0].name);
for-in循环,遍历json
var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
alert(attr);
alert(json4[attr]);
} var json5 = {
url: ['img/1.png', 'img/2.png'],
text: ['图片一', '图片二']
}; for(var attr in json5) {
for(var i=0; i<json5[attr].length; i++){
alert(json5[attr][i]);
}
}
for-in也可以遍历对象属性:
var str = '';
var num = 0;
for(var attr in window){
str += num + '. ' + attr + ' : ' + window[attr] + '<br/>';
num ++;
}
document.body.innerHTML = str;
数组也可以用for-in来遍历:
var arr = ['a', 'b', 'c'];
for(var i in arr){
alert(arr[i]);
}
清空数组和清空数组效率问题
// var arr = [1, 2, 3];
// var arr = new Array(1, 2, 3); var arr = new Array(4);
alert(arr.length); // 4 在new Array()里面写了一个数字,就是定义了arr的长度 var arr = [1, 2, 3];
arr.length = 1; //数组的length属性是可写的
alert(arr); ar arr = [1, 2, 3];
arr.length = 0; //快速清空数组arr
或
arr = []; //通过重新赋值来清空数组,效率更高 var str = 'aaaaa';
str.length = 1;
alert(str); // 'aaaaa'
//字符串的length属性不可写,但是数组的length属性可写
数组的操作
添加
- push方法:arr.push(); 往数组最后一位添加内容。.push()方法是有返回值的,返回的是数组新的长度
- unshift方法:arr.unshift(); 往数组的最前面添加内容,返回值为数组新的长度(IE6、7不支持unshift的返回值)
删除
- pop方法:arr.pop(); 删除数组的最后一个,返回值是被扔掉的值
- shift方法:arr.shift(); 删除数组的第一个,返回值是被扔掉的值
小技巧
ar arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为:['Leo', '钟毅', '张森', '杜鹏', 'TM']
或
arr.push(arr.shift()); //数组变为:['钟毅', '张森', '杜鹏', 'Leo', 'TM']
splice方法
- splice方法有删除、替换、添加三种功能
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位,删1个。两个参数第一个是从第几位开始,第二个是删掉几个。splice删除的时候有返回值,返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位,替换1个,替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里,删除0个,添加了一个'李贤'到了第1位,'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个,那么就没有返回值。
数组去重
var arr = [1, 2, 2, 4, 2];
for ( var i=0; i<arr.length; i++ ) {
for ( var j = i+1; j<arr.length; j++) {
if( arr[i]==arr[j] ){
arr.splice( j, 1 );
j--;
}
}
}
sort排序
var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序 var arr2 = [4, 3, 5, 76, 2, 0, 8];
arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的,因此出现了76排在8前面的情况 // arr2. sort(function( a, b ){
return a - b; //如果a-b返回正数,就a、b两个数字换个序。如果a-b是负数,就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76 // arr2. sort(function( a, b ){
return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
var arrWidth = [ '345px', '23px', '10px', '1000px' ]; arrWidth.sort(function ( a, b ) { return parseInt(a) - parseInt(b);
}); alert( arrWidth ); //10px,23px,345px,1000px
其他排序方法:
- 快速排序法
- 希尔排序法
- 冒泡排序法
- 归并排序法
- 选择排序法
- 插入排序法
var arrWidth = ['345px', '23px', '10px', '1000px'];
arrWidth.sort(function(a, b){
return parseInt(a) - parseInt(b);
}); // ['10px', '23px', '345px', '1000px']
随机排序
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(function(a, b){
return Math.random() - 0.5;
});
随机数以及随机公式推理过程
Math.random(); 返回0~1之间随机的一个数
如果想要随机返回0和1之间的一个整数,可以用四舍五入的方法:
Math.round(Math.random()); //注意,这里不能用Math.floor
如果想要返回0~10之间的一个随机数:
Math.round(Math.random() * 10); //返回0~10之间的随机整数
返回从20~100之间的一个随机数:
Math.round( Math.random()*80 + 20 ); //返回5~10之间的随机整数
如果想要返回一个x到y之间的整数,可以写成:
Math.round( Math.random() * (y - x) + x );
返回0~x的整数,可以写成
Math.round( Math.random() * x );
返回1~x的整数,可以写成
Math.ceil( Math.random() * x ); //Math.ceil()是向上取整
concat方法
concat方法用于连接数组。
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9]; arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
reverse方法
reverse方法是颠倒数组中的位置,会改变原数组
var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]
var str = 'abcdef';
alert(str.split('').reverse().join('')); //'fedcba'
妙味课堂——JavaScript基础课程笔记的更多相关文章
- 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 网易云课堂--妙味 《js基础课程》
==小例子1 ==JS中允许将"." 替换成 “[ ]” document.getElementById('btn1') 写成 document['etElementById' ...
- 妙味课堂:JavaScript初级--第12课:json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- javascript基础知识笔记-自用
笔记内容根据个人基础知识不足不明白之处做的记录.主要看的:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 1.变量,变量的名字又叫标识符 ...
- 妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- HashMap—— values() remove方法 containsKey()方法 containsValue()方法
values()方法:看下面的实例,就是把所有的value值封装成一个connection型的数组 Map<Integer,Student> students=new HashMap< ...
- sp_addlinkedserver 跨服务器连接数据库查询
----创建远程链接服务器--exec sys.sp_addlinkedserver --@server='LMS',--被访问的服务器别名--@srvproduct='',--@provider=' ...
- 你不知道的css各类布局(二)之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
- JS 中的跨域请求
跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...
- 快递100API
url:http://www.kuaidi100.com/query 拼接参数: 参数名称 参数取值 参数类型 type 快递码,请参考快递100码 String postid 快递单号 String ...
- 自己Linux东西存放情况
elasticsearch /home/panfeng 包含了 elasticsearch 和 ik分词器 FastDFS https://www.cnblogs.com/taopanfeng/p/1 ...
- ubuntu安装软件apt-get
一. apt-get用法 apt 0.8.16~exp12ubuntu10.26 for i386 compiled on Aug 5 2015 19:06:21Usage: apt-get [op ...
- 网络初级篇之STP(BPDU详解与STP故障恢复)
一.BPDU包含的参数 通过STP的原理,我们学习了红色部分的字段(根桥ID.根路径开销.桥ID.端口ID).现在讲解一下黄色部分的字段(类型.计时器.老化时间.访问时间) 1.(BPDU Type) ...
- MySQL 高级 视图 事物 触发器 函数 索引优化
视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次直接使用即可 2.为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何用视图 create view t ...
- 5.NIO_ Selector选择器
1.阻塞与非阻塞 传统的 IO 流都是阻塞式的.也就是说,当一个线程调用 read() 或 write() 时,该线程被阻塞,直到有一些数据被读取或写入, 该线程在此期间不能执行其他任务因此,在完成网 ...