小试牛刀——JavaScript基础部分

二.属性操作,图片切换,短信发送模拟

2.1 HTML属性操作

html属性操作:读写
属性名
属性值
属性读操作:获取找到
元素.属性名

属性写操作: ("添加")替换,修改
元素.属性名=新的值
oP.innerHTML 读取元素内的所有HTML内容
oP.innerHTML=新值替换元素内的所有HTML内容

2.2条件判断

if(条件){
...
}

if(条件){
}else{
...
}

if(条件1){
}else if(条件2...){
}else{
}

2.3 数组应用及实例应用

2.8 图片切换及函数合并扩展模拟短信作业

三.for应用,自动生成,this关键字

3.1 动态方法:ByTagName()

var oUl=document.getElementById("list") -- 静态方法
var aLi=oUl.getElementByTagName("li") -- 动态方法
document.getElementByTagName("li");
aLi.length
aLi[0]

3.2 ByTagName动态方法特性

前边可以放document,也可以用元素
是一堆元素的集合,[]访问

3.3 初识for循环

3.4 for循环执行顺序

for(var i=0;i<arr.length;i++){
}

3.5 for应用:选取生成性能

var str="";
for(var i=0;i<100;i++){
str+='<input type="button" value="按钮" />
}
document.body.innerHTML=str;
//这样写生成速度快

3.6 for循环生成坐标

3.7 for循环遍历2维数组,嵌套

3.8 cssText文本格式化与属性操作

oDiv.onclick=function(){
  //oDiv.style.width='200px';
   oDiv.style.cssText='width:200px;height:200px;
}
//cssText没有太大兼容性问题 比较好用 没有改变原属性

3.9 综合实力:生成一组新闻及思路分析

3.10 this指向及this应用

this:这个
this:指的是调用当前方法(函数)的那个对象
window是JS老大

四.自定义属性,索引值

4.1 自定义属性,自定义一组开关应用

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

for(var i=0;i<arr.length;i++){
  arr[i].onOff=true;
  arr[i].onclick=function(){
      if(this.onOff){
      ...
        this.onOff=false;
      }else{
      ...
        this.onOff=true;
      } 
  }
}

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

        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;
                    }
                }
            }

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

  var aBtn=document.getElementsByTagName("input");
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].index=i;
                aBtn[i].onclick=function(){
                    this.value=this.index;
                }
            }

4.4 图片切换综合实例

4.8 QQ菜单实例2:实现点击高亮显示,3道作业要求

五.JS数据类型,类型转换

5.1 JS数据类型及相关操作

js中的数据类型原始类型: Number String Boolean null undefined
引用类型:函数对象(obj [] {} )
typeof 判断数据类型
str.charAt() 根据下标获取子字符串

5.2 数据类型转化Number

var a="100";
Number(a);//100
var a="";
Number(a)://0
var a=true;
Number(a);//0
var a=[];
Number(a);//0
var a="w";
Number(a);//NaN

5.3 parsetInt与parsetFloat的区别

var a="200px"
parsetInt(a)//20
var a="200.332px"
parseFloat(a);//200.332

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

+ - * / %
++ --
><
!
==

5.5 isNaN应用实例

一旦程序中出现 NaN 肯定是进行了非法的运算操作
is Not a Number 不是数字
isNaN();//true false

5.6 数据类型转换所对应的小练习

六.函数传参,重用,价格计算

6.1函数传参参数类型

函数传递参数参数=js的数据类型数字字符串布尔函数对象未定义

6.2 传参应用类型判断及多组

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

七.作用域,JS预解析机制

7.1 js作用域和预解析机制

作用域:
域:空间范围区域
逐行解读代码

7.2 全局与局部作用域解析作用域链

由上到下由内到外

预解析:var function 参数...
function a(){alert(4)}
a=....(未定义)X
遇到重名的:只留下一个
变量和函数重名了,就只留下函数
逐行解读代码
表达式:= + / *...
表达式可以修改预解析的值

    alert(a);// function a(){alert(4)}
    var a=1;
    alert(a);//1
    function a(){alert(2)}
    alert(a);//1
    var a=3;
    alert(a);//3
    function a(){alert(4)}
    alert(a);//3

7.3 调用局部数据全局声明 for嵌套函数中i取值

  var a=1;
    function fun(a){
        alert(a);//1
        a=2;
    }
    fun(a);
    alert(a);//1

八.运算符,流程控制

运算符流程控制

判断: if,switch(case break default),? :
循环:while ,for
跳出:break , continue
什么是真,什么是假
真:非零的数字,字符串,true,函数,Object:[] {}(存在)
假:零,NaN,空字符串,false,null,未定义

var str="css"
switch(str){
  case "js" : alert("js");
  break;
  case "html" : alert("html");
  default;
  case "css" : alert(str);
}
//三目
alert(12<450?"120<450":"120!<450")

//while循环
var i=0;
while(i<3){
  alert(i);
  i++
}

//for循环
for(var i=0;i<3;i++){
  if(i===2){
    break;
   //continue;
    }
alert(i);
}

九.return,定时器基础

9.1函数返回值 return详解应用

return返回值 :数字字符串布尔函数对象.......(元素 [] {} null) 未定义----数据类型

函数名+括号: fn1()==>return后面的值;
所有函数默认返回值:未定义(undefined)
return 后面的任何代码都不执行了;

9.2 arguments实参集合与局部变量,参数关系

arguments是实参形参可以不要---实参的集合(类数组集合)

sum(1,2,3);
sum(1,2,3,4);
function sum(){
  var n=0;
  for(var i=0;i<arguments.length;i++){
      n+=argumenst[i];
  }
}

9.3 currentStyle与getComputedStyle应用

getComputedStyle(element).width/height/.... //获取计算机计算后的样式
background:url() red... 复合样式不要获取单一样式不要做判断
不要有空格不要获取未设置后的样式: 不兼容

getStyle(,'width');
function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

9.4 setInterval详解,定时器管理,背景选择实例

定时器:时间概念
setInterval(函数,毫秒);//重复执行
clearInterval(timer) //清除

注意 : 定时器如果是由事件控制的一定要先关后开每次点击之前先清除一下

9.5 setTimeout详解,弹窗广告实例(写在demo里)

9.6 定时器应用-自动切换焦点图,qq延时菜单实例(写在demo里)

十.定时器管理,函数封装

10.1 定时器管理-开关设置

要明白定时器使用规则每次定时器执行时要先清除定时器

10.2,10.2 函数封装的传参,判断处理,正负值的处理,添加毁掉函数

     div{width:60px;height:60px;background:red;position:absolute;left:0;top:35px;}
    <input type="button" value="向前" id="btn1">
    <input type="button" value="向后" id="btn2">
    <div id="div1"></div>
    <script>
        /*
        * obj 对象
        * attr css属性 方向 宽高云云
        * dir 步长
        * target 目标
        * endFn 回调函数
        * */
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oDiv=document.getElementById("div1");
        oBtn1.onclick=function(){
            doMove(oDiv,"left",10,800,function(){doMove(oDiv,"top",10,500)});
        }
        oBtn2.onclick=function(){
            doMove(oDiv,"left",10,0);
        }
        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);
                    endFn&&endFn();
                }
            },50)

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



    </script>

10.4 doMove应用小练习

引入以上封装js

 window.onload=function(){
        var str="";
        var len=10;
        var aDiv=document.getElementsByTagName("div");
        var timer=null;
        var num=0;
        var onOff=true;
        for(var i=0;i<len;i++){
            str+='<div style="width:50px;height:50px;background:red;position:absolute;top:0px;left:'+i*60+'px;"></div>'
        }
        document.body.innerHTML=str;
        document.onclick=function(){
            clearInterval(timer);
            timer=setInterval(function(){
                if(onOff){
                    doMove(aDiv[num],'top',30,500);
                    num++;
                    if(num===len){
                        clearInterval(timer);
                        onOff=false;
                        num=0;
                    }
                }else{
                    doMove(aDiv[num],'top',30,0);
                    num++;
                    if(num===10){
                        clearInterval(timer);
                        onOff=true;
                        num=0;
                    }
                }
            },200)

        }
    }

10.5 抖动原理及实现过程

需要引入以上封装js

 img{width:260px;height:auto;display:block;position:absolute;top:100px;left:250px;}
 window.onload=function(){
        var oImg=document.getElementById("img1");
         oImg.onclick=function(){
            var pos=parseInt(getStyle(oImg,"left"));
            var arr=[];
            var timer=null;
            var num=0;
            for(var i=20;i>0;i-=2){
                arr.push(i,-i)
            }
            arr.push(0);
           clearInterval(timer);
           timer=setInterval(function(){
               oImg.style.left=pos+arr[num]+"px";
               num++;
               if(num===arr.length){
                   clearInterval(timer)
               }
           },50)
        }
    }

10.6 抖的函数封装及隐患,修复及练习

 img{width:260px;height:auto;display:block;position:absolute;top:100px;left:250px;}
 window.onload=function(){
        var oImg=document.getElementById("img1");
        var onOff=true;
        oImg.onmouseover=function(){
            shake(oImg,'top')
        }
        function shake(obj,attr,endFn){
            if(onOff){
                clearInterval(obj.timer);
                onOff=false;
                var num=0;
                var arr=[];
                var pos=parseInt(getStyle(obj,attr));
                for(var i=20;i>0;i-=2){
                    arr.push(i,-i)
                }
                arr.push(0);

                obj.timer=setInterval(function(){
                    oImg.style[attr]=pos+arr[num]+"px";
                    num++;
                    if(num===arr.length){
                        clearInterval(obj.timer);
                        endFn&&endFn();
                        onOff=true;
                    }
                },50)
            }
        }
    }
    /*
    * 心得:如何在一次事件没有执行完毕之前避免当时再次执行该事件 找了两种方法
    * 第一种方法:定义一个开关,让它为true,在true的条件下执行事件 执行过程中开关为false 执行完毕开关再变回true
    * 第二种方法:定义一个遮罩层,再第一次事件执行的时候生成 然后就可以防止再次执行事件穿透 第一次事件执行完毕遮罩层删掉云云
    *
    * */

十一.日期对象,时钟倒计时

11.1系统时间对象

系统时间对象 new Date() -----当前系统的时间对象
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()

方法名	描述
getFullYear()	返回Date对象"年份"部分的实际数值
getMonth()	返回Date对象"月份"部分的数值(0-11)
getDate()	返回Date对象"日期"部分数值(1-31)
getDay()	返回Date对象"星期"部分的数值(0-6)
getHours()	返回Date对象"小时"部分的数值(0-23)
getMinutes()	返回Date对象"分钟"部分的数值(0-59)
getSeconds()	返回Date对象"秒"部分的数值(0-59)
getMilliseconds()	返回Date对象"毫秒部分的数值(0-999)"
getTime()	返回Date对象与UTC时间1970年1月1日午夜之间相差的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间(GMT)的分钟差
修改时间信息
setFullYear()	设置Date对象中"年份"部分的实际数
setMonth()	设置Date对象中"月份"部分的数值(0-11,但不限于)
setDate()	设置Date对象中"日期"部分的数值(1-31,但不限于)
setHours()	设置Date对象中"小时"部分的数值(0-23,但不限于)
setMinutes()	设置Date对象中"分钟"部分的数值(0-59,但不限于)
setMilliseconds()	设置Date对象中"毫秒"部分的数值(0-999,但不限于)
setTime()	以毫秒值设置Date对象
时间格式转换
toString	返回Date对象的字符串形式
toDateString()	返回Date对象"日期"部分(年月日)的字符串形式
toTimeString()	返回Date对象"时间"部分(时分秒)的字符串形式
toLocaleString()	基于本地时间格式,返回Date对象的字符串形式
toLocalDateString()	基于本地时间,返回Date对象"日期"部分(年月日)的字符串形式
toLocalTimeString()	基于本地时间格式,返回Date对象"时间"部分(时分秒)的字符串形式
toGMTString()	基于GMT时间格式,返回Date对象的字符串形式
toUTCString()	基于UTC时间格式,返回Date对象的字符串形式

11.3 倒计时原理

Date对象参数:
数字形式: new Date(2017,4,1,9,48,12);
字符串形式: new Date('June 10,2017 12:12:12');
月份取值:January February Match April May June July August September October November December
时间转换公式:
天: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.4 倒计时实例

function fnTime(){
        var iNow=new Date();
        var iNew=new Date(2018,0,2,18,0,0);
        var t=Math.floor((iNew-iNow)/1000);
        var str=Math.floor(t/60/60/24)+"天"+Math.floor(t%86400/3600)+"时"+Math.floor(t%86400/60)+"分"+Math.floor(t%60)+"秒";
        document.body.innerHTML="距离下班还有: "+str;
    }
    fnTime();
    setInterval(function(){
        fnTime();
    },1000)

十二.字符串,查找高亮显示

12.1 字符串获取类,封装检测数字的方法

str.charAt()------对应下标的内容
str.charCodeAt()------对应下标内容的编码
String.fromCharCode(22937)----根据编码转换为字

12.2 fromCharCode返回字符串实例,字符串加密

12.3 indexOf,lastIndexOf

str.indexOf('x',1) ----从左往右找,第一个参数是一个字符串,默认从0开始查找 ,如果有第二个参数数字就从数字指定的位置开始查找返回-1表示没找到
str.lastIndexOf('x')----从右往左找如果第二个参数为负数,默认当成0来处理

12.4 比较类,截取类,substring应用实例

subString()------默认从0开始截取全部,可以检测两个数,小的自动放前边,如果有一个参数为负数默认从0开始
两个特点:两个参数会自动交换位置,所有的负数当0处理
总而言之,就记着str.subString(x,y)---从x开始截取到y结束 x<y
str.slice(x,y)---从x开始到y结束可以支持负数

12.5 大小写转换,split分割字符串

str.toUpperCase();------转化为大写
str.toLowerCase();------转化为小写
str.split('x'); 字符串分割成一个数组

12.6 split彩色文字效果实例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{width:300px;height:300px;border:1px solid red;padding:5px;}
        span{padding:5px 15px;display:inline-block;margin:5px 0;}
    </style>
</head>
<body>
<div id="div"></div>
<input type="text">
<input type="button" value="按钮">
<script>
    var  oDiv=document.getElementById("div");
    var aInp=document.getElementsByTagName("input");
    aInp[1].onclick=function(){
        var str=aInp[0].value;
        var arr=str.split("");
        var color=["#f2a0a1","#c1e4e9","#5b7e91","#eaf4fc"];
        for(var i=0;i<arr.length;i++){
            arr[i]="<span style='background:"+color[i%color.length]+"'>"+arr[i]+"</span>";
        }
       oDiv.innerHTML=arr.join("");

    }
</script>
</body>

12.7 高亮显示关键字实例,替换搜索关键字实例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{border:10px solid #ddd;width:360px;height:200px;background:#ebf6f7;font-size:14px;padding:6px;margin: 5px 0;}
        span{background:#ff4;}
    </style>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="替换">

<div id="div">
    老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。 老王送孙子上学，路上看到一帮人对着一名环卫工又拍又照的。回头对孙子说：看到没，不好好学习将来和他一样扫马路。
</div>
<script>
    window.onload=function(){
        var div=document.getElementById("div");
        var text=div.innerHTML;
        var input=document.getElementsByTagName("input");
        input[2].onclick=function(){
            var str=input[0].value;
            var newStr=input[1].value;
            if(!str) return;
            div.innerHTML=text.split(str).join('<span>'+newStr+'</span>');
        }

    }
</script>

12.8 字符串方法总结,两道有趣的课后练习

var str = '字符串方法总结字符串方法总结www.com';
str.charAt(1); // '字'
str.charCodeAt(1); // 21619
String.fromCharCode(22937, 21619); // '妙味'
str.indexOf('m', 4); // 9
str.lastIndexOf('o'); // 16
'1000' < '2' // true
'1000' > 2 // true
str.substring(0, 4); // '字符串方'
str.slice(-3); // 'com'
str.toUpperCase(); // '妙味课堂-WWW.COM'
str.toLowerCase(); // '妙味课堂-www.com'
str.split('.', 2); // [ '字符串方法总结字符串方法总结www','com']

十三.JSon,数组方法,随机函数,数组去重

13.1 json数据格式及json语法

var json={name:'leo',age:'32'}
json.name-----leo
var json={name:'leo',age:'32'}
var json={'name':'leo','age':'32'}---安全系数高

13.2 for in遍历json语法

for( var attr in json){
console.log(json[attr])
}

13.3 数据定义及清空数据效率问题

arr.length="";

13.4 数组4个小宝贝方法与技巧

arr.push("abc")
arr.unshift("abc") ---IE6 7不支持
arr.pop("abc") -----如果不写任何参数默认为1
arr.shift("abc") -----如果不写任何参数默认为1

一种排队的方法
var arr=["小乔","大乔","武则天","诸葛亮","阿珂"];
arr.unshift(arr.pop())

13.5 splice方法,数组去重

//删除替换添加
arr.splice()
第一个参数: 从几开始
第二个参数: 删除几个
之后的参数: 用于替换或添加内容取决于第二个参数如果为0 则是添加否则为替换

13.6 sort排序

arr.sort() ---字符串的比较
arr.sort(function(a,b){return a-b}) ----从小到大
arr.sort(function(a,b){return b-a}) ----从大到小
排序扩展实例:

var arrWidth=["345px","58px","90px","1000px"]
arrWidth.sort(function(a,b){
    return parseInt(a)-parseInt(b);
})
console.log(arrWidth)//["58px", "90px", "345px", "1000px"]

随机排序
arr.sort(function(a,b){
    return Math.random()-0.5;
})

13.7 随机数及随机公式推理过程

Math.round(Math.random()*(max-min)+min)

13.8 concat,reverse,面试题及练习

arr.concat()
arr.reverse()

数组去重splice()方法

var arr=[2,5,6,8,5,3,9,7,5,2,6];
    for(var i=0;i<arr.length;i++){
        for(var n=i+1;n<arr.length;n++){
            if(arr[i]===arr[n]){
                arr.splice(n,1);
            }
        }
    }

随机产生100个从0-1000之间不重复的整数

var n=100;
    for(var i=0,str=[];i<n;i++){
        str.push(Math.round(Math.random()*n));
        if(str.length>1){
            for(var a=0;a<str.length;a++){
                for( b=a+1;b<str.length-1;b++){
                    if(str[a]===str[b]){
                        str.splice(b,1);
                        n++;
                    }
                }
            }
        }
    }
    str=str.join(" | ");
    document.body.innerHTML=str;

为数组编写indexOf();方法

var arr=[6,9,3,8,7,4,5];
indexOf(arr,5);
function indexOf(arr,elem){
  for(var i=0;i<arr.length;i++){
      if(arr[i]===elem){
        return i;  
      }
    }
   return -1;
}

冒泡排序

 var arr=[5,26,3,59,18,22,66,37,42,26];
  for(var n=1;n<arr.length;n++){
       for(var i=0;i<arr.length-n;i++){
            if(arr[i]>arr[i+1]){
                arr[i]+=arr[i+1];
                arr[i+1]=arr[i]-arr[i+1];
                arr[i]-=arr[i+1]
            }
       }
    }
    console.log(arr)

找最大

    var arr=[5,26,3,59,18,22,66,37,42,26];
    var max=arr[0];
    for(var i=0;i<arr.length-1;i++){
        if(max<arr[i+1]){
            max=arr[i+1]
        }
    }
    console.log(max)

去掉数组中重复的元素(哈希去重),并统计原数组中每个值出现的次数,输出出现次数最多的那个字符和次数

 var arr=[5,26,3,59,18,22,66,37,42,26,3,18,5,5];
    var hash={};
    for(var i=0;i<arr.length;i++){
        if(hash[arr[i]]!==undefined){
             hash[arr[i]]++;
        }else{
             hash[arr[i]]=1;
        }
    }
    console.log(hash);//{3: 2, 5: 3, 18: 2, 22: 1, 26: 2, 37: 1, 42: 1, 59: 1, 66: 1}
    arr=[];
    var max=maxKey=0;
    for(var key in hash){
        arr[arr.length]=(key-=0);
        if(hash[key]>max){
           max=hash[key]
        }
        if(max===hash[key]){
            maxKey=key;
        }
    }
    console.log("输出次数最多的数字是:"+maxKey+" 次数为: "+max);//输出次数最多的数字是:5 次数为: 3
    console.log(arr);//去重后 :[3, 5, 18, 22, 26, 37, 42, 59, 66]

统计字符串中每个字符出现的次数,并输出出现次数最多的那个字符

    var str="zheshiyigetebiemeidedifang";
    var hash={};
    for(var i=0;i<str.length;i++){
        if(hash[str[i]]===undefined){
            hash[str[i]]=1;
        }else{
            hash[str[i]]++;
        }
    }
    var max=maxKey=0;
    for(var key in hash){
        if(hash[key]>max){
            max=hash[key];
        }
        if(max===hash[key]){
            maxKey=key;
        }
    }
    console.log(hash)
    console.log(max)
    console.log(maxKey)