夜光带你走进 前端工程师（二十九 jS ）

于 2019-05-31 09:15:29 发布
阅读量392 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： My thoughts 前端工程师 JS核心技术 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41987706/article/details/90710183
本文围绕JavaScript展开，介绍了函数返回值及终止代码执行的作用，算术运算符的前置和后置自加运算，条件语句的多种形式，还阐述了点击、鼠标悬停、获得和失去焦点等事件的应用，通过代码示例进行了详细说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

夜光序言：

 

 

 

Do not worry about smiling, my mouth hardly ever smiles, but it doesn’t mean I’m not smiling in my brain. 别为微笑而忧虑，我也很少在表面上微笑，但这并不表示我没在心里微笑。

 

 

 

 

 

 

 

 

 

 

 

 

正文：

 $id  函数

 夜光

 

一个函数只可以有一个返回值，同时，终止代码执行作用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function fun(a,b){
        return a+b;
    }
    console.log(fun(1,2));
</script>
</body>
</html>

// 帅气   输出3

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function fun(a,b){
        return a+b;
        console.log("这句话可以看见么");   // 可惜，看不见
    }
    console.log(fun(1,2));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function fun(a,b){
        console.log("这句话可以看见么");  //  换了个位置，这样就可以看见了
        return a+b;

    }
    console.log(fun(1,2));
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div{
        width: 400px;
        height: 400px;
        background-color: aquamarine;
    }
</style>

<body>
<div id="a1"></div>
<div id="a2"></div>
<script>
/*    var a1=document.getElementById("a1");
    var a2=document.getElementById("a2");*/
    function $(id){
        return document.getElementById(id);
    }
    $("a1").style.background="black";
    $("a2").style.background="purple";

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

 

++前置和后置

夜光

 

不断成长:砥砺前行

var total=10;

var number = square(5);

alert(number);

function square(n){

     total=n*n;

return total;

}

 

//输出25  第一句话被覆盖了，灭有输出

 

 

1.5  算术运算符

+ -* /  ^  %

 

i++  ++后置   每次加1  【先运算后自加】

++i  ++前置    每次加1   【先自加后运算】

 

<script>
    var num=1;
    console.log(num++);  //输出1
/*    console.log(++num);*/

</script>

<script>
    var num=1;
 /*   console.log(num++);*/
    console.log(++num);   //输出2

</script>

先自加后运算

Var a=10,b=20,c=30;

++a;  //11

a++;   //12

S=++a+(++b)+(c++)+a++   //13+21+30+13

Alert(s);

 

//输出77

 

 

查询中奖

                      夜光

 

1.6  条件语句

if（条件表达式）{语句；}

if（）{}else{}

 

If()  elseif(){}    elseif(){}  else{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
          window.onload=function(){
              function $(id){return document.getElementById(id);}
              $("a").onclick = function(){
                   alert(11);//  这是基本操作  接下来
}


}

</script>
</head>
<body>
<input type="text" id="b" value="亲，输入"> <button id="a">查询</button>

        </body>
        </html>

 

 

   <script>
          window.onload=function(){
              function $(id){return document.getElementById(id);}
              $("a").onclick = function(){
            /*       alert(11);*/
                     alert($("b").value);  //还有不足  需要思考
}
              
}

</script>

 

  <script>
          window.onload=function(){
              function $(id){return document.getElementById(id);}
              $("a").onclick = function(){
            /*       alert(11);*/
                     alert($("b").value);
                  if ($("b").value == "夜光")
                  alert("okay");
                  else
                  alert("try again");
}

}

</script>

点击隐藏文字

                  夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{

        }
        .search{
            width: 858px;
            height: 60px;
            margin: 10px auto;
      /*      background-color: aquamarine;*/
        }
        .search input{
            width: 636px;
            height: 49px;
            background-image: url("百度元素_07.jpg");
            padding: 0;
            padding-left: 8px;
            color: #ccc;
            float: left;   //  这个十分重要  控制两个在一起
        }
        .search button{
            width: 123px;
            height: 49px;
            background: url("百度元素_08.jpg") no-repeat;
            float: left;           //这个十分重要   控制两个在一起
            border: 0;
            border-style: none;
        }
        .search img{
            width: 245px;
            height: 85px;
            margin: 260px ;
            margin-bottom: 10px;

        }
        p{
            font-family: 隶书;
            font-size: 36px;
          /*  text-align: center;*/
            margin-left: 680px;
        }
    </style>
</head>
<body>
<p>贺钰设计百度首页 ID:夜光</p>
<div class="search">
    <img src="百度元素_03.jpg">
    <input type="text" value="夜光设计，请输入~~~">
    <button></button>
</div>
</body>
</html>

 

获得焦点  失去焦点事件

Onclick

Onmouseover

Onmouseout

获得焦点：onfocus

失去焦点：onblur

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{

        }
        .search{
            width: 858px;
            height: 60px;
            margin: 10px auto;
      /*      background-color: aquamarine;*/
        }
        .search input{
            width: 636px;
            height: 49px;
            background-image: url("百度元素_07.jpg");
            padding: 0;
            padding-left: 8px;
            color: #ccc;
            float: left;
        }
        .search button{
            width: 123px;
            height: 49px;
            background: url("百度元素_08.jpg") no-repeat;
            float: left;
            border: 0;
            border-style: none;
            cursor: pointer;
        }
        .search img{
            width: 245px;
            height: 85px;
            margin: 260px ;
            margin-bottom: 10px;

        }
        p{
            font-family: 隶书;
            font-size: 36px;
          /*  text-align: center;*/
            margin-left: 680px;
        }
    </style>
    <script>
        window.onload=function(){
            var a = document.getElementById("a");
            a.onfocus=function(){    //获得焦点
     /*    /!*       alert("获得焦点");*!/
                //什么时候清空
                //用户第一次点击的时候  嘿嘿  厉害了
                //如果原本内容没有改变过  就说明没有使用input value="夜光设计，请输入~~~"*/
                if(a.value == "夜光设计，请输入~~~"){
                    a.value = "";
                }
            };
            a.onblur=function(){
        /*        alert("失去焦点");*/
            }
        }

    </script>
</head>
<body>
<p>设计百度首页 ID:夜光</p>
<div class="search">
    <img src="百度元素_03.jpg">
    <input type="text" value="夜光设计，请输入~~~" id="a">
    <button></button>
</div>
</body>
</html>

 

完整的JS：

<script>
    window.onload=function(){
        var a = document.getElementById("a");
        a.onfocus=function(){    //获得焦点
 /*    /!*       alert("获得焦点");*!/
            //什么时候清空
            //用户第一次点击的时候  嘿嘿  厉害了
            //如果原本内容没有改变过  就说明没有使用input value="夜光设计，请输入~~~"*/
            if(a.value == "夜光设计，请输入~~~"){
                a.value = "";
                a.style.color="#333";
            }
        };
        a.onblur=function(){
    /*        alert("失去焦点");*/
          /*  input 值为空*/
            if(a.value==""){
                a.value = "夜光设计，请输入~~~";
                a.style.color="#ccc";
            }
        }
    }

</script>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值