javascript之作用域、运算符、常用的数学方法

最新推荐文章于 2019-07-08 17:44:06 发布

pleasecallme_522

最新推荐文章于 2019-07-08 17:44:06 发布

阅读量551

点赞数

分类专栏： javascript学习文章标签： javascript

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/52165690

版权

javascript学习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一.作用域
1.概念：作用域即空间、区域、范围等。写js必须放在script里，css放在style里；
2.作用：读和写（在一个范围内）
3.浏览器对JS的解析（当读到script标签时开始解析）步骤：
第一步：预解析：找到var和function，但变量会被设置为未定义，函数会被整体取到。
注:预解析时会重复保留有内容的。接下来举例说明这句话：
假设script标签中分别有如下代码时：
a.

var a=10;//预解析后解析器会保存a=undefined

var a=10;//预解析读到这句时保存a=undefined
function a()={alert(4)};//又遇到一个与a变量同名的函数，则优先保存有内容的函数，并且取到函数的整体内容

var a=10;//预解析读到这句时保存a=undefined
function a()={alert(4)};//又遇到一个与a变量同名的函数，则优先保存有内容的函数，并且取到函数的整体内容
function a()={alert(3)};//此时又遇到一个与a同名的函数，此时解析器选择保留后面的函数

第二步：逐行读代码

接下来通过几组代码的对比来更加深化对作用域的了解：
第一组对比：

alert(a); //弹出undefined（逐行读代码，读到一个变量但是仍是第1步预解析得到的数据时，会变成未定义，读到表达式（= + - * / % ++ -- ！参数，就是能变化值的），因此弹出undefind）
var a=1;

和

var a=1;
alert(a);//弹出1

第二组：

alert(a);//弹出function a(){alert(4);}
var a=1;
alert(a);//弹出1
function a(){alert(2);}//逐行读到这句时无操作，因为这只是个函数的定义，没有元素调用他，故a的值不变
alert(a);//弹出1
var a=3;
alert(a);//弹出3
function a(){alert(4);}//同上一个函数
alert(a);//弹出3

第三组：

<head>
 <script>
  alert(a);//报错（解析器先解析此处script内的代码，发现无var和函数，故报错。与此同时此处alert(a)失效）
 </script>
</head>
<body>
  <script>
   var a=1;//预解析没有问题，但由于上个script部分的alert(a)已失效，所有不弹出任何任何内容
  </script>
</body>

和

<head>
 <script>
  var a=10;//此处完成预解析
 </script>
</head>
<body>
  <script>
   alert(a);//弹出10
  </script>
</body>

结论：将JS代码分在head和body两处写的时候一定要注意，要将定义变量放在head中，否则会出现上面第一种的错误

第四组：（一个函数的内部也是一个域）

var a=1;
function fn1(){
    alert(a);//弹出undefined（当fn1()调用该函数时，该函数也开始预解析，它在内部发现var a=2;但由于定义在alert之后，所以此处a为undefined）
    var a=2;
}
fn1();
alert(a);//弹出1（此处a是JS代码预解析时获取到的a）

和

var a=1;
function fn1(){
 alert(a);//弹出1（同上，调用该函数时，函数内部也开始解析。函数内部只有一个定义格式错误的a，故此时会在函数外面找，找到a=1;）
 a=2;//预解析获得的a值变为2
}
fn1();
alert(a);//弹出2

和

var a=1;
function fn1(a){
 alert(a);//undefined（在内部的形参处找到一个a,但值未定义，故弹出undefined）
 a=2;
}
fn1();
alert(a);//1（预解析时获得的a值没有变）

和

var a=1;
function fn1(){
 alert(a);//1
 a=2;
}//虽然函数括号里没有形参接收，但函数内部有一个默认的argument会接受传进来的值
fn1(a);
alert(a);//2

4.if(){}和for(){}的花括号不是域。因此在alert一个if里的函数应该一起解读出来，但是在FF里会出现错误，不能解析if或其他里面，应该把函数写在外面。类似的window.onload = fucntion(){},{}里也是一个域，里面的变量也是局部变量

二.JavaScript的运算符
1.算数运算符：+加、-减、*乘、/除、%求余
练习：给一组li每5个给一个颜色（红、黄、蓝、绿、黑），并且鼠标移入时背景变灰，移开时变回去
代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#list li{list-style:none; width:100px; height:100px; border:1px #fff solid; position:absolute; background:red;}
</style>
</head>

<body>
    <ul id="list">
    </ul>
    <script>
        var oUl=document.getElementById("list");
        var aLi=oUl.getElementsByTagName("li");
        var str="";
        var color;
        var arr=["red","yellow","blue","green","black"];
        for(var i=0;i<50; i++){
            str+="<li></li>";
        }
        oUl.innerHTML=str;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].style.left=(i%10)*102+"px";
            aLi[i].style.top=parseInt(i/10)*102+"px";
            aLi[i].style.backgroundColor=arr[i%5];
            /*法一：aLi[i].onmouseover=function(){
                for(j=0;j<aLi.length;j++){
                    aLi[j].style.backgroundColor=arr[j%5];
                }
                aLi[this.index].style.backgroundColor="#ccc";
            }*/

            //法二
            aLi[i].onmouseover=function(){
                color=this.style.backgroundColor;
                aLi[this.index].style.backgroundColor="#ccc";
            }
            aLi[i].onmouseout=function(){
                aLi[this.index].style.backgroundColor=color;
            }
        }
    </script>
</body>
</html>

效果图如下：
这里写图片描述
鼠标移入某一个方块时：

2.赋值：
=、+=、-=、*=、/=、%=（后面的如同+=）
<、>、<=、>=、==、!=、===、!==
练习1：反选框，点击反选时选中的取消，其余选中
原理：元素.checked=true代表被选中/false代表未选中配合!来做
代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="div">
    <label><input type="checkbox" name="a" /><span>1</span></label>
    <label><input type="checkbox" name="a" /><span>2</span></label>
    <label><input type="checkbox" name="a" /><span>3</span></label>
    <label><input type="checkbox" name="a" /><span>4</span></label>
    <label><input type="checkbox" name="a" /><span>5</span></label>
    <label><input type="checkbox" name="a" /><span>6</span></label>
</div>
<input type="button" value="反选" id="btn1" />
<script>
    var oDiv=document.getElementById("div");
    var aInput=oDiv.getElementsByTagName("input");
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=function(){
        for(var i=0;i<aInput.length;i++){
            /*法一：if(aInput[i].checked){
                aInput[i].checked=false;
            }else{
                aInput[i].checked=true;
            }*/
            //法二：
                  aInput[i].checked=!aInput[i].checked;
        }
    }
</script>
</body>
</html>

结果图如下：
点击反选框之前：
这里写图片描述
点击反选框之后：

练习2：全选框
代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="div">
    <label><input type="checkbox" name="a" /><span>1</span></label>
    <label><input type="checkbox" name="a" /><span>2</span></label>
    <label><input type="checkbox" name="a" /><span>3</span></label>
    <label><input type="checkbox" name="a" /><span>4</span></label>
    <label><input type="checkbox" name="a" /><span>5</span></label>
    <label><input type="checkbox" name="a" /><span>6</span></label>   
</div>
<label><input id="input2" type="checkbox" name="b" /><span>全选</span></label>
<script>
    var oDiv=document.getElementById("div");
    var oInput=document.getElementById("input2");
    var aInput=oDiv.getElementsByTagName("input");
    var j=0;
    oInput.onclick=function(){
        if(oInput.checked){
            for(var i=0;i<aInput.length;i++){
                aInput[i].checked=true;
            }
        }else{
            for(var i=0;i<aInput.length;i++){
                aInput[i].checked=false;
            }
        }
        //此处代码的作用是：点击全选后元素全部被选中，再次点击全选时要保证所有元素被取消全选
    }
    for(var i=0;i<aInput.length;i++){
        aInput[i].onclick=function(){
            if(!this.checked){
                oInput.checked=false;
            }
            if(this.checked){
                j++;
                if(j==aInput.length){
                    oInput.checked=true;
                }
            }
        }

    }
</script>
</body>
</html>

结果图如下：
点击全选：
这里写图片描述

只要退选多选框中的任意按钮，全选“消失”：
这里写图片描述
还要求当一个一个点击选项，当全部选上时全选“出现”。

3.常用的数学方法：
Math.floor()：向下取整（下舍去）
Math.ceil()：向上取整（上进入）
Math.round()：四舍五入
Math.abs()：取绝对值
Math.cos()：余弦值
Math.sin()：正弦值
Math.max()：比较（取大）
Math.min()：比较（取小）
Math.random：0~1的一个随机数
练习：将任意数字（以秒为单位）转换为时分秒的形式
代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input id="input" type="text" placeholder="请输入您想要转换的时间(单位：秒)" />
<button id="btn">转换</button>
<div id="div"></div>
<script>
    var oInput=document.getElementById("input");
    var oBtn=document.getElementById("btn");
    var oDiv=document.getElementById("div");
    var time,hour,minute,second;
    oBtn.onclick=function(){
        time=oInput.value;
        hour=Math.floor(time/3600);
        time=Math.floor(time%3600);
        minute=Math.floor(time/60);
        second=Math.floor(time%60);
        oDiv.innerHTML="转换之后时间为："+hour+"小时"+minute+"分钟"+second+"秒";
    }
</script>
</body>
</html>

结果图如下：
页面刷新时：
这里写图片描述
输入值后：

pleasecallme_522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之作用域、运算符、常用的数学方法

一.作用域 1.概念：作用域即空间、区域、范围等。写js必须放在script里，css放在style里； 2.作用：读和写（在一个范围内） 3.浏览器对JS的解析（当读到script标签时开始解析）步骤：第一步：预解析：找到var和function，但变量会被设置为未定义，函数会被整体取到。注:预解析时会重复保留有内容的。接下来举例说明这句话：假设script标签中分别有如下代码时
复制链接

扫一扫