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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //输入一个数字打印对应的星期
  var day=prompt('请输入星期');
  switch (day) {
    case 1:{
      alert('monday');
    }
      break;
    case 2:{
      alert('tuseday');
    }
      break;
    case 3:{
      alert('wednesday');
    }
      break;
    case 4:{
      alert('Thursday');
    }
      break;
    case 5:{
      alert('Friday');
    }
      break;
    case 6:{
      alert('Saturday');
    }
      break;
    case 7:{
      alert('Sunday');
    }
      break;
    default:{alert('啥也不是')

    }

  }
</script>

</body>
</html>

老师，这个为什么不能用prompt输入数值，之后进行语句选择呢

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

<!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>
    <script>
       
        document.onmousedown=function(){
          
            setInterval(function () {
                console.log('111');
                
            },2000)

        
       
        }
        document.onmouseup=function(){
           document.onmousedown=null;

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

老师怎么去除事件，怎么去出不了mousedown的事件

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ width: 50px;
height: 50px;
background-color: pink;
position: absolute;
top: 50px;

}
</style>
</head>
<body>
<div></div>
<input type="range" max="100" min="0" value="0" >
<script>
var div=document.querySelector('div');
var input=document.querySelector('input');


input.onmousedown=function(){ input.onmousemove=function(){
var move=event.clientX;
div.style.left=move+'px';
console.log(event.clientX);
}

}






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

老师。鼠标移动这个事件在没触发mousedown事件也能触发的吗

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width:60px ;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
 <div class="div1">
     <div class="div2"></div>
 </div>
  <script>function fun1 () {
    console.log('div1');
    
}
function fun2 () {
         console.log('div2');}
      var div1=document.querySelector('.div1');
      var div2=document.querySelector('.div2');
      div1.addEventListener('click',fun1,true)
     div2.addEventListener('click',fun2,true)
    </script>
</body>
</html>

老师我哪里写错了怎么用不了普抓机制

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width:60px ;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    
    <div class="div1" onclick="test1()">
        <div class="div2"  onclick="test2();test3()"></div>
    </div>
    <script>
        var i=0;
        var div1=document.querySelector('.div1');
        /*html事件采用冒泡机制 子节点出发，传递给父节点
             绑定多个函数用分号隔开
              根据绑定函数的先后顺序，触发事件顺序    */
             
        
       function test1() {
        i++;
        alert('div1');
      
        console.log(i);
       }
       if (i>=3) {
           div1.setAttribute('onclick',null);
           
           
       } else {
           
       }
        function test2() {alert('div2');
           
        }
        function test3() {
            
           
        }

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

老师，怎么才能点第三次div1的时候不会触发事件

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

<!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>
<ul>
    <li class="1">11</li>1111
    <li class="2"></li>
</ul>
<div id="div1"></div>
<script>
    var li=document.createElement('li');
    var li_text=document.createTextNode('1qianmian');
    li.appendChild(li_text);                              
     var ul=document.querySelector('ul');
    ul.insertBefore(li,ul.firstChild);                           
    /* 语法 noded.insertBefore(node1,node2)  
  node1是插入进去的节点 node2是node1插入在node2子节点前面（插入位置） 
    返回值 是返回插入的节点     */
var li_list=document.querySelectorAll('li'); /*node.removeChild(node1)    node为node1的父节点，node1为需要删除的节点*/
var div=document.querySelector('div');
ul.removeChild(li_list[0]);
console.log(li_list);
var but=document.createElement('button');
but.innerHTML='替换';
document.body.appendChild(but);
but.onclick=function(){
  var span=document.createTextNode('tihuan')
  
    ul.replaceChild(span,ul.childNodes[1]);
    
}

/*node.contains(node1) node是否包含node1 node为node1 父节点 返回布尔值   */
var buer=ul.contains(ul.childNodes[1]);
console.log(buer);
    
</script>
</body>
</html>

老师为啥var buer=ul.contains(ul.childNodes[1]) ul包含li 但是代码写成var buer=ul.contains(li)就是false

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

<!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>
<ul>
    <li class="1">11</li>
    <li class="2"></li>
</ul>
<div id="div1"></div>
<script>
    var li=document.createElement('li');
    var li_text=document.createTextNode('1qianmian');
    li.appendChild(li_text);                              
     var ul=document.querySelector('ul');
    ul.insertBefore(li,ul.firstChild);                           
    /* 语法 noded.insertBefore(node1,node2)  
  node1是插入进去的节点 node2是node1插入在node2子节点前面（插入位置） 
    返回值 是返回插入的节点     */
var li_list=document.querySelectorAll('li');
var div=document.querySelector('div');
ul.removeChild(li_list[0]);
console.log(li_list);
    
</script>
</body>
</html>

老师为啥我删除了第一个文本内容为1qianmian的li 页面删除了为啥搜索li元素，集合还可以搜索到3个li？

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

<!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><span>11
        <div>
            22
        </div>
        <div>3</div>
    </span>

    <script>
        /*var span=document.querySelector('span');
console.log(span.nodeName); 通用属性节点.nodeName  node.Type
                                 节点.ownerDocument 返回当前节点所在顶层文档对象 Document .ownerDocument返回null
                                 节点.nextSibling属性返回此节点的下一个同级节点（回车也算一个节点，文本节点）没有返回null
                                  节点.previousSibling  属性返回此节点的上一个同级节点（回车也算一个节点，文本节点）没有返回null
                                  节点.parentNode 返回当前节点的父节点 ，没有返回null（例如document）
                                  节点.parentElement 返回当前节点的父元素节点 ，没有或者父节点不是元素节点返回null（例如document）
                                                                
console.log(span.nodeType);*/  

/*var span=document.querySelector('span');   节点.textContent 返回当前节点及当前节点的后代节点的文本内容
var text_Content=span.textContent;              节点.nodeValue  一般用书文本节点 返回当前节点的值
console.log(text_Content);*/

var span=document.querySelector('span');
console.log(span.childNodes);
console.log(document.body.lastChild)
console.log(document.body.firstChild)

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

lk老师为啥body最后一个子节点不是aa吗为啥是scrpit?

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <div class="one" style="width: 30px"></div>
    <script>
        
        var style_one=document.querySelector('.one').style;
     var width_1=style_one.getPropetryValue("width");
       console.log(width_1);

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

不知道为啥浏览器输出不了，报错

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <div class="one" style="width: 30px;"></div>
    <script>
        // var h2=document.createElement('h2');
        // var h2_style=document.createAttribute('style');
        // h2_style.value='color:red';
        // h2.innerHTML='我是h2';
        // h2.setAttributeNode(h2_style);
        // document.body.appendChild(h2);
        // var but=document.createElement('button');
        // var button_style=document.createAttribute('style');
        // button_style.value='height:50px;width:30px;'
        // button.innerHTML='操作';
        // document.body.appendChild(button);
        var style_one=document.getElementsByClassName('one');
        console.log(style_one.style.getpropetryValue('width'));

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

我想获取div的宽度但是浏览器显示最后一行代码出错编辑器没提示出错

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

var alt = "";
for (var i = 1; i <= 5; i++) { //控制行
    var blank = "";
    for (var j = 1; j <= 5 - i; j++) { //控制空白三角形
        blank += "&nbsp;";
    }
    var starts = "";
    for (var m = 1; m <= 2 * i - 1; m++) {
        starts += "*";
    }
    alt += blank + starts + "<br/>";
}
document.write(alt);
console.log(alt);

老师看下这种有没有错

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

var i=1;
var evensum=0;
var oddsum=0;
    while (i<=100){
        if(i%2==0){
            evensum+=i;
        }else{
            oddsum+=i;
        }
        //i=i+1;
        //i+=1;
        i++;
    }
    document.write("偶数之和："+evensum+"<hr/>");
    document.write("奇数之和："+oddsum);

这个应该是没有什么问题的吧

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

<script>
    /*var i=1;
    //死循环；
    while (i<=100){
        document.write(i);
    }*/
    var i=1;
    while (i<=100){
        document.write(i+"<br/>");
        //i=i+1;
        //i+=1;
        i++;
    }
</script>

这种应该是可以的吧

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window对象的name属性</title>
</head>
<body>
    <button>跨域传输</button>
    <script>
/*         var name=123;
        console.log(name);
        console.log(typeof name);
        var age=123;
        console.log(age);
        console.log(typeof age); */

/*         window.name
        描述：是页面在切换之后，甚至域名更改之后会储存信息的容器
        说明：借助window.name可以实现页面之间数据的传递，称为跨域传输。 */
        //console.log(num);
        //如果想要获取一个页面的信息，那么必须先加载
        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);
            //当iframe加载完成，意味着window.name的内容已经被赋予完成
            iframe.onload=function(eve){
                var iframeWindowName=eve.target.contentWindow.name;
                //console.log(iframeWindowName);
                eval(iframeWindowName);
                console.log(num);

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

老师为什么这一行在vscode里运行会报错误呢？在WebStorm 就可以运行！！

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

<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编程模块/运算符_数据类型和流程循环语句 510楼

同学您好