Hello WEB ! 不是吧阿sir，JS叫智能家居！？（一）--基本用法+简单事件

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119374444

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

JS是什么

script 既可以写在<head>也可以写在<body>

JS放在哪
1.一般放在<body>里面因为文本流的引用关系
2.新建一个JS文件直接导入在js文件里面不需要script标签[在html中<script src="js文件">]

JS 注意事项
1.严格区分大小写
2.每一行完整的句后面要加分号
3.变量名不能使用关键字和保留字
4.代码要缩进、保持可读性

用法
文字获取元素：var txtdom = document.getElementById('id名'); //var 定义变量
文字修改： txtdom.innerText = "新的内容"
网页修改：txtdom.innerHTML = "新的内容"
script 中设置函数 <script> function 函数名(){函数体 } </script>

例子:
<p id="txt">我是一个段落标签</p>
<button type="button" onclick="hanshu()"> holy shit </button>

<script>
    function hanshu(){
        document.getElementById("txt").innerText='一给我里giao giao';
    }
</script>

js获取元素的方法：
JavaScript有六大数据类型:
1,Number类型整数和小数
NaN属性 not a number(数字类型中，不是数字的值)
isNaN() 检查，监测参数是不是数字值

2,string 字符串
length 查看长度

3,Boolean 布尔
true,false 区分大小写

4,Undefine类型
只有一个值，就是Undefine，变量声明但未初始化。

5，Null类型
js里面的null属于对象类型的，但是它不具有对象的共性

6，object
js中对象类型一组集合

对象是由花括号分割的，在括号内部。
typeof 查看数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript基本使用+简单事件</title>
</head>

<body>
<!--使用导入script-->

<!--<script src="1.JavaScript基本使用+简单事件.js">-->
        <!--// 弹窗-->
    <!--// alert("弹窗");-->
    <!--</script>-->

<!-------------------------------------------------------------------------------------------------------------------->
<!--通过script改文字内容-->

<p id="txt">我是一个段落标签</p>
<button type="button" onclick="hanshu()"> 点我 </button>
<button type="button" onclick="hanshu2()"> 再点我 </button>

<script>
    function hanshu(){
        document.getElementById("txt").innerText='一给我里giao giao';

    }
    function hanshu2(){
        document.getElementById("txt").innerText = '我是一个段落标签';
    }
</script>

<!-------------------------------------------------------------------------------------------------------------------->
<!--Text 和 Html 的区别-->

<div id="div1">
    <p id="txt1" >我是一个段落标签1</p>
    <p id="txt2" class="c1">我是一个段落标签2</p>
    <p id="txt3" class="c1">我是一个段落标签3</p>
    <p id="txt4" class="c2">我是一个段落标签4</p>
</div>

    <script>
        var box = document.getElementById('div1');
        var txtDom1 = document.getElementById('txt1');
        var txtDom2 = document.getElementById('txt2');
        txtDom1.innerHTML = '我不一样的烟火';
        txtDom2.innerText = '一给我里 giao';

        // 打印在操控台(innerText 显示文本 innerHTML 显示标签)
        console.log(box.innerText);
        console.log(box.innerHTML);

        // css选择器
        var txtDom3 = document.querySelector('#txt1').innerHTML = '标签1';
        var txtDom4 = document.querySelectorAll('.c1')[0].innerHTML = '标签2';
        var txtDom5 = document.querySelectorAll('p')[2].innerHTML = '标签3';

    </script>

<!-------------------------------------------------------------------------------------------------------------------->
<!--监控事件-->

<div id="div2" style="background: #dafffc">     点击事件    <br>

<script>
    // 点击事件
    function dj()
    {
        document.getElementById('p1').innerText = '单击有惊喜';
    }

    function sj()
    {
        document.getElementById('p2').innerHTML = '<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2515373747,3366093492&fm=26&gp=0.jpg">'
    }

    // var box = document.getElementById('div1');
    //
    // box.onclick=
    //     function dj(){console.log('单击事件')};
    //
    // box.ondblclick=
    //     function dj() {console.log('双击事件')};
</script>

<button onclick="dj()"> 单击 </button>
<button ondblclick="sj()"> 双击有惊喜 </button>
<p id="p1"></p>
<p id="p2"></p>
</div>

<!-------------------------------------------------------------------------------------------------------------------->
<div id="div3" style="width: 100px;height: 100px;background: purple"></div>
<select id="s1">
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

<script>

    // 鼠标划入 onmouseenter
    var box = document.getElementById('div3');
    box.onmouseenter = function ()
    {
        box.style.backgroundColor = 'red';
    };

    //鼠标划出 onmouseleave
    box.onmouseleave = function ()
    {
        box.style.backgroundColor = 'pink';
    };

    // 窗口变化 onresize
    window.onresize = function ()
    {
      console.log('窗口发生变化了！！！');
    };
    
    // 下拉框变化 onchange
    var sss = document.querySelector('select');
    sss.onchange = function () {
        console.log('下拉框发生变化了')
    };
    

</script>




</body>
</html>