JavaScript使用技术快速复习一日计划_如何一周之内把js考试通过代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_41245021/article/details/131691136

文件的保存路径不要有中文，会存在一些路径上的错误

JavaScript

什么是JS

js和Java的关系是什么？并没有什么关系

ECMAjs基础

DOM文档对象模型

BOM浏览器对象模型

引入方式

内联式

内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

外联式

内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

外联式

例子：

<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签

接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式 bv

在VS Code中创建名为 10.JS-引入方式.html 的文件

按照上述第一种内部脚本的方式引入js

添加<script>标签来引入外部demo.js文件,具体代码如下：

<!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>JS-引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

注意事项

注意:<script>标签是不能自己闭合的!!!

ECMAScript

常量和变量

// 定义变量age
var age =19;
// 定义变量name
let name='tom';
// 定义常量PI
const PI=3.1415926;
alert(PI)

数据类型

JS是一门弱类型的脚本语言

字符串 String
布尔 boolean
数字 number
对象 object
undefined 未定义
关键字 tyoeof

var name="Tom"
// alert(typeof name)
var bl=true
// alert(typeof bl)
var num=10.12;
// alert(typeof num)
var obj={
"name":"Tom",
"age":19
}
// alert(typeof obj)
var def;
alert(typeof def)

&=&==

==比较内容

===比较内容和类型

       // 值比较
        // alert(1=='1')
        // 比较内容和类型
        alert(1==='1')

函数

语法格式

function 函数名称(参数1,参数2){
    //实现函数业务逻辑
    return 返回值;
}

//调用函数
var result = 函数名称(参数1,参数2);

函数的定义和调用

//定义一个求和的函数
//1.接收 2个参数
//2.实现函数的核心功能 求和
//3.把结果返回
function sum(a,b){
    return a+b
}

var result = sum(10,7)
//alert(result)

function tk(){
    alert('弹框')
}

tk();

调用函数和函数引用

//匿名函数
var fun1 = function(){
    alert('这是一个匿名函数')
}
//此时
//fun1 就相当于是这个函数本身
//函数引用

//函数的调用
//fun1()

var fun2 = function (a,b){
    return a-b;
}
var fun3 = fun2
var result = fun3(10,5)
alert(result)
//结论:
//带()表示执行函数
//不带()表示函数对象

DOM

dom=文档对象模型

树形结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cn76MZhk-1689169627863)(C:\Users\LuoLuo\Desktop\DOM树形结构.png)]

docment文档对象
element标签对象
attribute属性对象
text文本对象

具体应用

1.如何获取标签

API	解释说明
document.getElementByld(“id值”)	根据id属性值获取，返回单个Element对象
document.getElementsByTagName(“标签名”）	根据标签名称获取，返回Element对象数组
document.getElementsByName()	根据name属性值获取，返回Element对象数组
document.getElementsByClassName()	根据class属性值获取，返回Element对象数组

getElementsByTagName 方法基于标签名称进行查找，而 getElementsByName 方法基于 name 属性进行查找

<!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>
    <div id="byid">这是一段文字1</div>
    <div class="byclass">这是一段文字2</div>
    <div class="byclass">这是一段文字3</div>
    <script>
        //根据id获取标签对象
        var byid=document.getElementById("byid")
        alert(byid.innerText)
        //根据属性名获取标签对象
        alert(byid.innerHTML)

        // 通过标签名获取对象
        //注意这里是tagname
        var divArr=document.getElementsByTagName("div")
        // divArr.length
        // for(var i=0;i<divArr.length;i++){
        //     alert(divArr[i].innerHTML)
        // }

        // 通过class名字获取标签对象
        var dClassArr=document.getElementsByClassName("byclass")
        for(var i=0;i<dClassArr.length;i++){
            // alert(dClassArr[i].innerHTML)
        }
    </script>
</body>
</html>

2.如何获取和设置标签的属性

API	说明
ele.innerHTML	获取&设置内容(标签会被解析)
ele.innerText	获取&设置内容(标签不会被解析)

<body>
    <div id="content"></div>
    <script>
        var content ='<b>hello js</b>';
        //innerHTML 可以获取或者设置标签的内容区域
        var divEle = document.getElementById('content')
        //标签会被解析
        //divEle.innerHTML = content
        divEle.innerText = content

        alert(divEle.innerText)
    </script>
</body>

案例：点击按钮显示图片

<button onclick="showImg()">点我查看图片</button>
<hr>
<img src="" id="pic">
<script>
    function showImg(){
        //1.拿到img标签对象
        var picEle = document.getElementById('pic')
        //2.设置图片的src属性
        picEle.src = "imgs/alien.jpg"
    }
</script>

练习2:点击按钮往列表中添加数据

<input type="text" id="content">
<button id="btn">点我插入数据</button>
<hr>
<ul id="city">
    <li>山东</li>
    <li>北京</li>
    <li>上海</li>
</ul>

<script>
    /*
            任务需求:
                用户在输入框填写内容
                点击按钮
                将内容添加到列表的下面
         */
    //1.处理按钮点击
    document.getElementById('btn').onclick = function(){
        //2.获取用户输入的内容
        var content = document.getElementById('content').value
        //3.把内容插入到列表中
        document.getElementById('city').innerHTML += "<li>"+content+"</li>"
        //4.添加内容后,清空输入框
        document.getElementById('content').value = ""
    }
</script>

案例3:动态生成表格

<body>
    请输入行<input type="text" id="rows">
    请输入列<input type="text" id="cols">
    请输入内容<input type="text" id="content">
    <button id="btn">点击动态生成表格</button>
    <hr>
    <center>
        <table id="table" width="800px" border=".5px" height="300px"></table>
    </center>

    <script>
        document.getElementById('btn').onclick = function(){
            //填充表格内容
            //获取行和列
            var rows = document.getElementById('rows').value
            var cols = document.getElementById('cols').value
            var content = document.getElementById('content').value
            //关系 => 行里套着对应的列
            var tableStr = ""
            for (let i = 0; i < rows; i++) {
                var trStr = "<tr align='center'>"
                for (let j = 0; j < cols; j++) {
                    trStr += "<td>"+content+"</td>"
                }
                trStr += "</tr>"
                tableStr += trStr
            }
            //最终目的:填充表格
            document.getElementById('table').innerHTML = tableStr
        }
    </script>
</body>

如何设置标签的样式

api	说明
ele.style.样式名 = 值	获取或者设置样式

案例1

<style>
    #d1{
        width: 200px;
        height: 200px;
        border: .5px solid red;
    }
</style>
<button id="btn">点我改变div的背景色</button>
<br>    
<div id="d1"></div>
<script>
    document.getElementById('btn').onclick = function(){
        document.getElementById('d1').style.backgroundColor = "green"
    }
</script>

案例2

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<button id="btn1" onclick="hide()">点我隐藏</button>
<button id="btn2" onclick="show()">点我显示</button>
<div id="d1"></div>

<script>
    //display样式可以控制标签的状态!!!

    function hide(){
        document.getElementById('d1').style.display = "none";
    }
    function show(){
        document.getElementById('d1').style.display = "block";
    }
</script>

BOM

bom浏览器对象模型

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器参数封装的对象
Screen	屏幕的参数对象
History	历史记录封装对象
Location	d地址栏对象

上述5个对象与浏览器各组成对应的关系如下图所示：

Window对象常用API

对话框

代码	名称
alter()	普通弹框	显示带有一段消息以及确认按钮的对话框。
confim	确定对话框	显示带有一段消息以及确认按钮和取消按钮的对话框。
cosole.log	输出对话框	控制台输出

定时器

 function tk(){
            alert("执行了代码")
        }
        //设置定时器,每五秒执行一次代码 只执行一次代码
        // setTimeout(tk,5000);
        // 错误格式:直接执行代码,并没有定时功能
        // setTimeout(tk(),5000);

        //把字符串当作js命令来做
        // eval("tk()")
        // eval("alert('开始执行命令吧')")

        //循环执行语句
        setInterval(tk,2000)

控制台

//日志输出
console.log("sdaasdas========================");
console.log("sdaasdas========================");
console.log("sdaasdas========================");
console.log("sdaasdas========================");
debugger;
console.log("sdaasdas========================");
console.log("sdaasdas========================");
console.log("sdaasdas========================");
console.log("sdaasdas========================");

1.5.2 location对象常用api

api	说明
location.href	页面跳转的
location.reload()	重新加载页面

<body>
    <button onclick="baidu()">点我跳转百度</button>
    <button onclick="refresh()">点我刷新页面</button>
    <script>
        function baidu(){
            //协议 http file https
            location.href = "http://www.baidu.com"
        }

        function refresh(){
            location.reload();
        }
    </script>
</body>

1.5.3 BOM综合案例

代码实现

<!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>
        span{
            color:red
        }
    </style>
</head>
<body>
    <center>
        <div style="margin-top: 100px;">登陆成功,页面将在<span id="numSpan">5</span>秒后跳转首页</div>
    </center>
    <script>
        function jumpIndex(){
            //对5进行倒计时显示
            var num = document.getElementById('numSpan').innerHTML
            num --;
            if(num <1){
                //当值变成0的时候跳转
                location.href ="http://www.baidu.com"
            }else{
                //值>=1的时候改变内容
                document.getElementById('numSpan').innerHTML = num
            }
        
            
        }

        setInterval(jumpIndex,1000);
    </script>
</body>
</html>

1.6 事件

常用事件

onclick 点击事件

<!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 onclick="show()">点我一下</button>
<script>
    function show(){
        alert("恭喜你，触发了点击事件，你获得万倍返现")
    }
</script>
</body>
</html>

onblur 失去焦点事件

onfocus 获取焦点事件

<!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>
    <!-- <input οnblur="outOfOcus()">
    <span id="msg"></span> 
    
    <script >
        var input = document.getElementById("input");
        function outOfOcus(){
            var msg = document.getElementById("msg");
            msg.innerHTML='你的密码必须包含英文大小写'
        }
    
    </script> -->
    <input onfocus="showFocusMessage()">
    <span id="msg2"></span>
    
    <script>
      function showFocusMessage() {
        var msg2 = document.getElementById("msg2");
        msg2.innerHTML = '密码组成为英文大小写+数字';
      }
    </script>
    
</body>
</html>

onload 加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function onLoadFunction() {
          console.log("Document loaded!");
          // 在这里执行其他操作
        }
        </script>
</head>
<body onload="onLoadFunction()">
  <h1>Onload Event Example</h1>
  <p>This is an example of the onload event.</p>
</body>
</html>

lementById(“msg2”);
msg2.innerHTML = ‘密码组成为英文大小写+数字’;
}

```

onload 加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function onLoadFunction() {
          console.log("Document loaded!");
          // 在这里执行其他操作
        }
        </script>
</head>
<body onload="onLoadFunction()">
  <h1>Onload Event Example</h1>
  <p>This is an example of the onload event.</p>
</body>
</html>