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

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

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

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

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>数据解析</title>
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" name="userName"></br>
        年龄：<input type="text" name="age"></br>
        性别：<input type="text" name="sex"></br>
        <input type="submit">
    </form>
    <button>解析数据</button>
    <script>
        var but=document.querySelector("button");
        function dataParse(outInfo) {
            var obj = {};
            var infoStr = outInfo;
            //先获取？后面的内容
            var realInfo = infoStr.slice(1);
            var proArr = realInfo.split("&");
            for (var i = 0; i < proArr.length; i++) {
                var tempArr = proArr[i].split("=");
                obj[tempArr[0]] = tempArr[1];
            }
            return obj;
        }
        but.onclick=function(){
            var dataObj=dataParse(document.location.search);
            console.log(dataObj);
            }
    </script>
</body>
</html>

老师 我想请问一下，为什么我的也是用英文的，但是在控制台输出的时候却是加密的样子呢？

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

老师您能全面一点么三种引入的方式您这都没有讲啊。

WEB前端全系列/第二阶段：JavaScript编程模块/JavaScript基础与变量 542楼

老师，我想自定义一个alert()提示框，实现和alert一样的功能，提示框出现时页面代码停止执行，提示框关闭后页面代码继续执行。这个要怎么实现呢？

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

<div>
<div  class="div1">div1</div>
<div  id="div2">div2</div>
</div>
<button  id="but">点我</button>

<body>

<script>
    var but=document.getElementById('dut');
    var div=document.querySelector('div');
    var div1=document.querySelector('.div1');
    var div2=document.getElementById('div2');
            but.onclick=function () {
            if (div.hasChildNodes()){
                div.removeChild(div.firstChild);
            }else {
                alert('已经没有了');
            }
        }

</script>

老师，这个地方为什么后报错呢？是浏览器不兼容吗？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lastChild</title>
</head>
<body>
    <div class="div1">
        div1
        <div id="div2">div2</div>
    </div>
    <script>
        var div1 = document.querySelector('.div1');

        //firstChild / lastChild
        console.log(div1.firstChild);
        console.log(div1.lastChild);
        console.log(document.body.firstChild);
        console.log(document.body.lastChild);
    </script>
    <div>最后的内容</div>
</body>
</html>

老师，我这个代码里的body的lastChild，最后一个子节点，不应该是 div内容或者 #text 吗？为什么还是script？script并不是最后一个子节点吧？

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

老师：

下午好，我尝试了按网页的模式去做练习，但还是实现不了，现在把代码和网页上的报错分别以文字和图片格式发给你，请指导，谢谢！

代码：

=[,,,,];
=.();
=.();
.=;
.();

(=;<.;++){
=.();
=.();
.=;
    .();

 =.();
 =.();
 .();
 .=[];
 .();
 .();
 }
..();

20200808作业.png

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

<script>
var div = document.querySelector("#div");
console.log("网页可见区域宽client" + document.body.clientWidth);
console.log("网页可见区域高client" + document.body.clientHeight);
console.log("网页可见区域宽offset" + document.body.clientWidth);
console.log("网页可见区域高offset" + document.body.clientHeight);
console.log("网页正文全文宽scroll"+document.body.scrollWidth);
console.log("网页正文全文高scroll"+document.body.scrollHeight);
console.log("网页被卷曲的宽scroll"+document.body.scrollLeft);
console.log("网页被卷曲的高scroll"+document.body.scrollTop);
console.log("------------------------------------");
console.log("浏览器宽"+window.outerWidth);
console.log("浏览器高"+window.outerHeight);
console.log("浏览器视口宽（计算滚动条）"+window.innerWidth);
console.log("浏览器视口高（计算滚动条）"+window.innerHeight);
console.log("浏览器视口宽（不计算滚动条）"+document.documentElement.clientWidth);
console.log("浏览器视口高（不计算滚动条）"+document.documentElement.clientHeight);
console.log("返回页面滚动距离X"+window.pageXOffset);
console.log("返回页面滚动距离Y"+window.pageYOffset);
console.log("浏览器距离屏幕X"+window.screenX);
console.log("浏览器距离屏幕Y"+window.screenY);
</script>

在页面中插入一个宽高分别为3000和2000的div，用

document.body.clientHeight

和

document.body.clientHeight

获取的文档可视区域高度为什么都为2000呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
</head>
<body>
<script>
    function Person(name,age,height,a) {
     this.userName=name;
     this.userAge=age;
     this.userHeight=height;
     this.userAbilitty=a;
    }
    var beixi=newPerson=("贾先生","18","60",function () {console.log("敲代码");})
    var shishi=newPerson=("刘诗诗","16","40",function () {console.log("2");})
    console.log(beixi);
    console.log(shishi);
</script>
</body>
</html>

老师我这个怎么是这样的怎么只出来最后一项内容呢？

WEB前端全系列/第二阶段：JavaScript编程模块/正则对象 548楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量提升</title>
</head>
<body>
<script>
    //函数可以像简单值一样作为函数的返回值
    function info() {
        console.log('我是谁');
        console.log('我会干什么');
        function caiyi() {
            console.log('我要表演才艺');
        }
        return caiyi;
    }
    info();   //直接调用，会执行里面的内容
    var result = info();  //返回给调用者
    result();    //直接调用
</script>
</body>
</html>

1、老师，为什么info(); 直接调用没有执行'我要表演才艺’？

2、为什么必须要把info();赋值给一个变量才行，赋值后var result是一个函数吗？老师说的这句是返回给调用者，这是什么意思？caiyi()这个是在哪里执行的？为什么执行了？

3、为什么result();可以直接调用，这句是函数吗？完整的语句执行是怎么执行的？没有看明白这个顺序。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据解析</title>
</head>
<body>
<form action=""method="get">
    姓名: <input type="text" name="userName"><br>
    姓名: <input type="text"name="age"><br>
    姓名: <input type="text" name="sex"><br>
    <input type="submit"/>
</form>
<br>
<button>解析数据</button>
<script>
    var but=document.querySelector('button');
    function dataParse(outInfo){
        var obj={};
        var inforStr=outInfo;
        //获取？后面的数据
        var realInfo=inforStr.slice(1);
        var proArr=realInfo.split("&");
        for (var i=0;i<proArr.length;i++){
            var tempArr= proArr[i].split("=");
            obj[tempArr[0]]=tempArr[1];
        }
        return obj;
    }
    but.onclick=function () {
        var dataObj=dataParse(window.location.search);
        console.log(decodeURIComponent(dataObj));
    }
</script>
</body>
</html>

老师麻烦给看看是哪里错了第二个问题这个outInfo是怎么回事？不明白谢谢老师这个是beixi赋值给username，还有age跟sex没有赋值吧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右击菜单案例</title>
    <style>
        *{padding: 0;margin: 0}
        ul{
            list-style: none;
            background-color: darkgray;
            min-width: 220px;
            display: inline-block;
            position: absolute;
            display: none;
        }
        ul li{
              height: 30px;
              line-height: 30px;
              padding:5px 20px;
              cursor: pointer;
            transition: 0.3s;

        }
        ul li:hover{
            background-color: olivedrab;
            color: #fff;
        }
    </style>
</head>
<body>
<ul>
    <li>北京尚学堂</li>
    <li>欢迎你</li>
    <li>去百度搜索页面中选中的内容</li>
    <li>赚大钱</li>
</ul>
<textarea cols="80" rows="20"></textarea>
<script>
    var ul=document.querySelector("ul");
    document.oncontextmenu=function (eve) {
        return false;//表示事件禁用
    }
    document.onmouseup=function (eve) {
    //eve.button能够判断鼠标用的是哪个按钮
        //0左键  1滑轮 2邮件
        if (eve.button==2){
         ul.style.display="inline-block";
         //设置鼠标点击的位置
            ul.style.left=eve.clientX+"px";
            ul.style.top=eve.clientY+"px";
        }else {
            //关闭菜单
            ul.style.display="none";
        }
    }
    //点击某一菜单选项时触发的事件（事件委托）
    ul.onmousedown=function (eve) {
     if (eve.target.innerHTML=='北京尚学堂'){
        alert("那就去吧");
     }else if (eve.target.innerHTML=='欢迎你') {
         if (confirm('欢迎你？')) {
             window.close();}
     }else if (eve.target.innerHTML=='去百度搜索页面中选中的内容'){
             var result=document.getSelection().toString();
             window.open('http://www.baidu.com/s?wd='+result);
         }else {
         var result=prompt("输入内容然后去百度");
         window.open('http://www.baidu.com/s?wd='+result);
     }
    }
</script>
</body>
</html>

老师我写的这个怎么不跳转百度？为什么要变成字符串的形式？

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

eve.target.contentwindow.name,老师能解释视频当中的contentwindow是啥意思吗？在10分10秒左右。谢老师

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

eve.target.contentwindow.name,老师能解释视频当中的contentwindow是啥意思吗？

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

老师，我在做分辨率和缩放率的测试时，发现在div设置了背景图后，div内的文字本来是居中的，一般的分辨率也正常，但是在电脑的缩放率300%和分辨率变得很大，到达4000左右的时候，就会出现文字不居中了的情况了？这是为什么呢？背景图在设置为宽100%，高为auto，不就是自适应页面大小的，文字设置了center，我觉得就不会出现这种情况的。实在不明白了，麻烦老师了，正常图和问题图如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
 maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>flex</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script
    <![endif]-->
    <script src="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"></script>
    <script src="https: //cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            width: 100%;
            height: 100%;
            background: #0d3349;
        }
        body{
            min-width: 768px;
        }
        #div{
            width: 100%;
            height: 100%;
            background: #00c2de;
        }
        #div1{
            background: #bd362f;
            background-image:url(static/images/shouye-biaoti.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            width: 100%;
            height: 15%;
            margin-top: 1%;

        }

        h1{
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;

        }

    </style>
</head>
<script>
    function setRem() {
        var whdef = 100 / 1920
        var bodyWidth = document.body.clientWidth
        console.log(bodyWidth)
        console.log(window.screen.width)
        var rem = bodyWidth * whdef
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
    }
    window.addEventListener('load', setRem)
    window.addEventListener('resize', setRem)
</script>
<body  style="font-size: 60px">
<div id="div">
        <div id="div1" >
            <h1 >标题</h1>
        </div>
</div>
</body>
</html>

WEB前端全系列/第二阶段：JavaScript编程模块/正则对象 554楼

老师，在使用rem的时候，var bodyWidth = document.body.clientWidth和var bodyWidth = window.screenWidth 为什么字体都为0.5rem,显示结果不是一样的？在缩放率和分辨率都变得情况下，body.clientWidth和window.screenWidth都是变得呀。那都是按比例变得，我觉得用哪一个都一样的。

WEB前端全系列/第二阶段：JavaScript编程模块/正则对象 555楼

同学您好