小试牛刀——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 全局与局部作用域解析 作用域链

由上到下 由内到外

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

    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) 未定义----数据类型

1. 函数名+括号: fn1()==>return后面的值;
2. 所有函数默认返回值:未定义(undefined)
3. 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 字符串获取类,封装检测数字的方法

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

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

12.3 indexOf,lastIndexOf

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

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

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

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

8. str.toUpperCase();------转化为大写
9. str.toLowerCase();------转化为小写
10. 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)