js注意的细节

一.注意点

1.引入CSS在head中,JS建议在body的尾部引入;这样有利于加载速度

2.this是什么？

*一个关键字，一个内置的引用变量

*在函数中都可以直接使用this

*this代表当前函数的调用对象

*在定义函数时，this还没有确定，只有在执行时才动态绑定的

记住：跟函数定义没关系，跟函数的执行有大大的关系。总之就是：函数在哪里调用才决定了this到底引用的是啥

3.JavaScript 对大小写敏感。
4.如果把数字与字符串相加，结果将成为字符串。

5.函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

①没有带参数的函数

function 函数名(){}

②调用带参数的函数

function 函数名(var1,var2){}

③带有返回值的函数

function 函数名(){

var x=5;

return x;

}

使用return语句时，函数会停止执行，并返回指定的值

6.JavaScript 计时器

①setInterval(函数名,时间)在执行时,从载入页面后每隔指定的时间执行代码。

②clearInterval() 方法可取消由 setInterval() 设置的交互时间

function clock(){      var time=new Date();                       document.getElementById("clock").value = time; }var i=setInterval("clock()",100);<input type="text" id="clock" size="50" /><input type="button" value="Stop" onclick="clearInterval(i)" />

③setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次

7.函数中call()和apply()的作用：都是用来改this指向

8.获取随机值

①Math.random();产生0-1的随机数

②产生x-y的随机数

Math.random()*(y-x)+x

9.给定4个整数，把他们输出来

％是除法取余运算

function newNum(num){
        //1234
        var qian = parseInt(num/1000); //1  
        var bai = parseInt(num/100)%10; // 42%10 =2
        var shi = parseInt(num/10)%10;  //3
        var ge = num%10;  //4
                console.log(qian,bai,shi,ge);
        }
            newNum(4234);// 4 2 3 4

二.语法

1.查找元素

<p id="con">JavaScript</p>

①找到的是p标签
var mychar= document.getElementById('con')；

②输出p标签的内容

console.log( mychar.innerHTML);

③改变html元素文本内容

 mychar.innerHTML="改变p的值";

console.log( mychar.innerHTML);

2.改变样式

x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式颜色

3.写到html中输出 

document.write("<p>MyFirst JavaScript</p>");

4.弹出对话框

①alert()

②消息对话框通常用于允许用户做选择的动--提问-确认

③promot提问通常用于询问一些需要与用户交互的信息。-------输入框

5.打开新窗口

①.window.open() 方法打开一个新的页面

window.open('http://www.imooc.com');

②.window.close();   //关闭本窗口

varmywin=window.open("http://www.imooc.com");

    mywin.close();   //关闭本窗口

6.可视窗口宽/高

$(window).height(); //浏览器时下窗口可视区域高度

$(window).width(); //浏览器时下窗口可视区域宽度

7.监听屏幕尺寸，随着浏览器的窗口变化而变化

        $(window).resize(function () {
            //需要变化的值
        });

8.浏览器判断

function getBrowserType() {//取得浏览器的userAgent字符串var userAgent = navigator.userAgent;//            console.log(userAgent);//判断是否Opera浏览器var isOpera = userAgent.indexOf("Opera") > -1;//判断是否IE浏览器var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera;//判断是否IE的Edge浏览器var isEdge = userAgent.indexOf("Windows NT 6.1;") > -1 && userAgent.indexOf("Trident/7.0;") > -1 && !isIE;//判断是否Firefox浏览器var isFF = userAgent.indexOf("Firefox") > -1;//判断是否Safari浏览器var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;//判断Chrome浏览器var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1;if (isIE){ return "IE"; }if (isFF) {  return "FF";}if (isOpera) {  return "Opera";}if (isSafari) {  return "Safari";}if (isChrome) { return "Chrome";}if (isEdge) { return "Edge";}}var type = getBrowserType();console.log(type);

三.小案例

1.5秒后自动跳转

如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址

<h1>操作成功</h1>            <span id="second">5</span>秒后回到主页<a href="#" >返回</a>            <script type="text/javascript">                  var second=document.getElementById("second");                 var i=6;                function time(){                    i--;                    second.innerHTML=i;                    if(i==1){                        window.location.href ="https://www.baidu.com/";                    }                 }                setInterval(time,1000);            </script>

2.给一组不重复的数字数据，从数组中求出最大数、最小数和最小数的索引。

function maxArr(arr){                var max=arr[0],min=arr[0];                for(var i=0;i<arr.length;i++){                    if(max < arr[i]){                        max = arr[i];                    }                    if(min > arr[i]){                        min = arr[i];                    }                }                console.log('最大值：'+ max +' 最大值的索引：'+ arr.indexOf(max));                console.log('最大值：'+ min +' 最小值的索引：'+ arr.indexOf(min));            }            maxArr(['10','30','5','45','1','3','50']);            //快速获取数组中的最大值最小值            var a=[1,2,3,5];            console.log(Math.max.apply(null, a));//最大值            console.log(Math.min.apply(null, a));//最小值            //多维数组可以这么修改            var a2=[1,2,3,[5,6],[1,4,8]];            var ta=a2.join(",").split(",");//转化为一维数组            console.log('多维数组,最大值：'+Math.max.apply(null,ta));//最大值            console.log('多维数组,最小值：'+Math.min.apply(null,ta));//最小值