有效沟通问答-【官方】百战程序员_IT在线教育培训机构

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 132358个问题

 ::(){
        that = (){
            that.}}
}.(.()())

这个打印出来为什么是my object？

WEB前端全系列/第二阶段：JavaScript编程模块/面向对象编程 466楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ppt练习题</title>
</head>
<body>
<!--按图完成效果，要求：
(1)导航静态实现
(2)数据内容动态实现
(3)样式要写在style中,用动态实现。-->
<script>
    var arr = ['全部','精华','分享','问答','招聘'];
    var ul = document.createElement('ul');
    var ul_style = document.createAttribute('style');
    ul_style.value = "list-style: none;padding: 0;margin: 0;";
    ul.setAttributeNode(ul_style);
    document.body.appendChild(ul);

    for (var i = 0; i<arr.length ;i++){
        var li = document.createElement('li');
        var li_style = document.createAttribute('style');
        li_style.value = "display: block;float: left;background: azure;margin: 0 5px;width:35px;height: 30px;line-height: 30px;text-align: center;";
        if (i== 0){
            li_style.value ='display: block;float: left;margin: 0 5px;width:35px;height: 30px;line-height: 30px;text-align: center;background:red;';
        }
        li.setAttributeNode(li_style);
        var a = document.createElement('a');
        a.innerHTML = arr[i];
        li.appendChild(a);
        ul.appendChild(li);
    }
</script>
</body>

</html>

老师，这个第一问是这个思路吗？

2、第二问数据内容动态实现是什么思路呢？是用循环和Input结合吗？把input在for循环中创建吗？判断条件的话应该怎么确定，能让他实现动态循环？

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 467楼

为什么id会重复，id不是唯一的吗

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 468楼

var num = 5;
for(var i = 1;i<=num;i++){
    console.log(i);
}

老师，这个for循环的执行顺序是不是：判断条件符合以后，先执行输出i，其次执行i++，继续判断。

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 469楼

//主动操作_导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;
            padding: 0;
        }
        li{
            display: inline-block;width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: pink;cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="http://www.baidu.com">首页</a></li>
        <li><a href="http://www.baidu.com">娱乐</a></li>
        <li><a href="http://www.baidu.com">军事</a></li>
        <li><a href="http://www.baidu.com">新闻</a></li>
    </ul>
    <script>
        var lis=document.querySelector("li");
         for (var i=0;i<lis.length;i++){
            lis[i].onclick=function () {
                this.querySelector("a").click();
            }
        }
    </script>
</body>
</html>

老师，麻烦帮我看一下，为啥我运行完结果不对，不是点哪儿都能跳转页面

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 470楼

<script>
var s=prompt("请输入您的分数：");
var s=parseInt(s/10);
switch (s) {
    case 10:
        case 9:
            document.write("A");
            break;
    case 8:
        document.write("B");
        break;
    case 7:
    case 6:
        document.write("C");
        break;
    default:
        document.write("不及格");
}
</script>

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 471楼

为什么id会重复，id不是唯一的吗

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 472楼

//求平均值
 var arr=[2,5,1,6,8,4,9];
 function  getAverage(tempArr){
 var sum=0;
 for(var i in tempArr){
 sum+=tempArr[i];
 }
       
 return sum/tempArr.length; //返回平均值
 }
       
 var  result=getAverage(arr);  //函数的调用
 console.log(result);

1、为什么函数的调用那行不写成

var  result=getAverage(tempArr);

呢？

2、计算结果时都要用return结尾吗？意义是什么呢？

WEB前端全系列/第二阶段：JavaScript编程模块/函数与对象 473楼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var ul=document.createAttribute('ul');
        ul.style.listStyle='none';
        ul.style.padding='0';
        var arr=["首页","军事","娱乐","历史","政治"];
        for(var i=0;i<arr.length;i++){
            var li=document.createAttribute("li");
            li.style.cssText="display:inline-block;width:100px;height:30px;line-height:30px;" +
                    "text-align:center;margin-left:5px;background-color:skyblue";
            li.innerHTML=arr[i];
            ul.appendChild(li);
            li.onmouseenter=function(){
                this.style.backgroundColor="blue";
            }
            li.onmouseleave=function(){
                this.style.backgroundColor="pink";
            }
        }
        document.body.appendChild(ul);
    </script>
</head>
<body>

</body>
</html>

listStyle出错，onmouseenter和onmouseleave是我手动敲出来的，编辑器没有自动提示，我的webstrom版本是10.0.3

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 474楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{width: 200px;height: 200px;background-color: darkseagreen;}
        .div2{width: 100px;height: 100px;background-color: pink;margin: 25px auto;}
    </style>
</head>
<div>
    <div class="div1">div1
        <div class="div2" onclick="test3()">div2</div>
    </div>

</div>
<body>
<script>
    var div1=document.querySelector('div1');
    var div2=document.querySelector('div2');

    function test3() {
        console.log('这是第二个函数');
        div2.setAttribute('onclick',null);
    }
</script>
</body>
</html>

老师帮忙看下报错了，什么原因？

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 475楼

<div style="width:200px;height: 200px;background-color: pink"></div>
<script>
   var div = document.querySelector('div');
   //鼠标按下时触发
div.onmousedown=function(){
    div.style.backgroundColor='blue';
}
//鼠标抬起时触发
div.onmouseup=function(){
    div.style.cssText='background-color:red';
}

为什么鼠标抬起时功能不能实现?

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 476楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 例子
    function info() {
        console.log("我是xxx");
        console.log("我会唱xx");

        function caiyi() {
            console.log("我要表演才艺")

        }
        return caiyi() ;
    }
    info();
    // console.log(result);
//    例子2
    function info2() {
        console.log("我是xxx");
        console.log("我会唱xx");

        function caiyi2() {
            console.log("我要表演才艺")

        }
        return caiyi2 ;
    }
    info2()();
    //例子3
    function info3() {
    console.log("我是xxx");
    console.log("我会唱xx");

    function caiyi3() {
        console.log("我要表演才艺")

    }
    return caiyi ;
}
info3();

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

老师，例1返回值返回的是一个语句，所以只需要调用一次；例2返回值返回的是一个函数，所以需要调用两次；例子3虽有返回值，但是没有调用，所以没用输出“我要表演才艺”；我可以这样理解吗？

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 477楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    // 随机
    function get() {
        var str = '0123456789abcdef';// 定义取值范围
        var color = '#';
        for (var i = 0; i < 6; i++) {
            var num = Math.floor(Math.random() * str.length);// Math.floor 向下取整，Math.random随机
            color += str[num];
        }
        console.log(color.length);
        console.log(color);
    }
    get();
    // hi~老师，我没弄清楚下面这段代码到底是怎么执行的
    /*
    random方法是随机获取0~1之间的小数，floor方法是向下取整，那么不管random获取到什么小数
    floor咔擦一下就把小数全部去掉了，那剩下的也就只有0一个整数了
    那为什么用 Math.floor(Math.random() 乘以数字它就能取到一个随机的数字呢
    */
    console.log(Math.floor(Math.random() * 100));// 取到100以内的随机数。。。
    console.log(Math.floor(Math.random() + 100));// 100
</script>
</body>
</html>

老师~这个我想不明白，求解！！

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 478楼

老师，我想利用dom2事件，实现验证用户名和邮箱，点击验证按钮执行，但是我这个代码不知道是怎么回事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则练习</title>
</head>
<body>
    <p>
        <input type="text" class="userName" placeholder="用户名为英文、数字和下划线组成，最小6位不超过10位">
        <span class="userSpan"></span>
    </p>
    <p>
        <input type="text" class="number" placeholder="邮箱必须是QQ邮箱格式">
        <span class="emailSpan"></span>
    </p>
        <button>验证</button>
    <script>


        /*
        QQ邮箱是以数字开头，且前面只能位数字，以@qq.com结尾
        */


        var email=document.querySelector('.number');
        var userName=document.querySelector('.userName');
        var btn=document.querySelector('button');
        var emailSpan=document.querySelector('.emailSpan');
        var userSpan=document.querySelector('.userSpan');
        btn.addEventListener(click,function(){
            var userName_value=userName.value;
            var  wtq= /^[\w]{6,10}$/;
            var q=userName_value.test(wtq);
            if(q){
                userSpan.innerHTML="用户名格式正确";
            }else{
                userSpan.innerHTML="用户名格式错误";
            }
        },true);
        btn.addEventListener(click,function(){
            var str=email.value;
            var front=str.substring(0,str.length-7);//字符串删去@qq.com之后形成的字符串
            var reg1=new RegExp('@qq.com$');//字符串的结尾只能是@qq.com
            var reg2=new RegExp('^[0-9]{6,11}$');//新形成的字符串（字符串的开头）只能为数字
            var t=reg2.test(front);
            var w=reg1.test(str);
            if(w&&t){
                emailSpan.innerHTML="邮箱格式正确";
            }else{
                emailSpan.innerHTML="邮箱格式不正确";
            }
        },true);
    </script>
</body>
</html>

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 479楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>
        跨域传输
    </button>
    <script>
var but=document.querySelector('button');
but.onclick=function(){
    var iframe=document.createElement('iframe');
    iframe.src='page.html';//加载页面
    iframe.style.display='none';
    document.body.appendChild(iframe);
}
window.onload=function(eve){
 var iframeWindowName=eve.target.contentWindow.name;
 eval(iframeWindowName);
 console.log(num);
}
    </script>
</body>
</html>

老师，为啥报错的 contentWindow.name和eval()是啥意思

WEB前端全系列/第二阶段：JavaScript编程模块/面向对象编程 480楼

同学您好