网页设计练习-JavaScript的学习

爱生活的土豆

已于 2024-01-01 22:42:22 修改

阅读量1.2k

点赞数 31

分类专栏：网页设计练习文章标签：学习 html javascript

于 2023-12-19 00:08:54 首次发布

本文链接：https://blog.csdn.net/2302_80868896/article/details/135073375

版权

网页设计练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2023.12.17 JavaScript引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素事件JavaScript</title>
    <script>
        function alert1(){
            alert("单击再次弹窗")
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1" onclick="alert('单击弹窗')">
    <input type="button" value="按钮2" onclick="alert1()">
    <script>
        document.write("单击以上按钮会有不同内容提示")
    </script>
</body>
</html>

//单击按钮1的效果

//单击按钮2的效果

知识点：

1、不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于：是否与服务器进行数据交互。或者简单来说，是否用到了后端技术（如PHP、JSP、ASP.NET）；

2、外部JavaScript：即把HTML代码和JavaScript代码单独放在不同文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码（可以再html文件中任何地方引入）；

<script src="文件路径（文件.js）"></script>

3、内部JavaScript：即把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在<script></script>标签对内（script标签不是自闭合标签）；

<script>
     ......
</script>

//等价于
<script type="text/javascript">
     .....
</script>

4、元素事件JavaScript：即在元素的“事件属性”中直接编写JavaScript或调用函数；

<input type="button" value="按钮1" onclick="alert('单击弹窗')">

5、方法

（1）document.write()：在页面输出一个内容。用<br>换行；

（2）alert()：弹出一个对话框。用\n换行；

2023.12.18 语法基础+流程控制

语法基础

<!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>
    <script>
        var a = 10;
        
        var b = 20;
        b = 30;
        document.write(a+"<br>"+b+"<br>");

        var c = 15 //变量声明
        c = c + 1;
        alert(c) 

        var num = 20 + 18;
        var str1 = "我喜欢" + "这一年";
        var str2 = "今年是" + 2023;
        var str3 = "2023" + 2024;
        document.write(num+"<br>"+str1+"<br>"+str2+"<br>"+str3+"<br>"); //加法运算符

        var m = 10;
        var n = 4;
        var n1 = m+n;
        var n2 = m-n;
        var n3 = m*n;
        var n4 = m/n;
        var n5 = m%n; //取模
        document.write("m+n="+n1+"<br>");
        document.write("m-n="+n2+"<br>");
        document.write("m*n="+n3+"<br>");
        document.write("m/n="+n4+"<br>");
        document.write("m%n="+n5+"<br>"); //运算符
    </script>
</body>
</html>

知识点：

1、变量与常量

（1）变量由字母、下划线、$或数字组成，且开头不能是数字；

（2）变量不能是系统关键字和保留字，且区分大小写；

（3）所有JavaScript变量都是由var声明（var-全局变量；let-局部变量；counts-常量）；

语法：var 变量名 = 值；

（4）一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：

var DEBUG = 1；

2、数据类型

（1）基本数据类型有5种：数字（number）、字符串（string）、布尔值（boolean）、未定义值（undefined）和空值（null）；

（2）常见的引用数据类型有两种：数组、对象。

（3）对于一个字符串来说，一定要加上引号，单引号或双引号都可以；

3、运算符

（1）加法运算符：

数字 + 数字 = 数字；

字符串 + 字符串 = 字符串；

字符串 + 数字 = 字符串；

var num = 10 + 5;                //num的值为15

var str = "从0到1" + "系列图书";  //str的值为"从0到1系列图书"

var str = "今年是" + 2023        //str的值为"今年是2023"（这是一个字符串）

（2）自增运算符：（自减同理）

i++：使用i之后，再让i的值加上1；

++i：使用i之前，先让i的值加上1；

（3）比较运算符：

==：类型转换后比较值；

===：不会进行类型转换，类型不同，值相同也是false；

4、类型转换

（1）将字符串转换为数字

Number()；

parseInt()；（0/NaN/空串/null/undefined的值为false）

parseFloat()；

（2）数字转换为字符串

与空字符串相加；

toString()；

5、注释

（1）//单行注释；

（2）/*多行注释*/；

流程控制

<!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>
    <script> //3种循环输出1-100的和的方法
        var n = 1;
        var sum1 = 0;
        while (n <= 100) //没有分号
        {
            sum1 = sum1 + n;
            n = n + 1;
        }
        document.write("1+2+3+...+100=" + sum1 + "<br>" + "<hr>");

        var m = 1;
        var sum2 = 0;
        do {
            sum2 = sum2 + m;
            m = m + 1;
        } while (m <= 100);
        document.write("1+2+3+...+100=" + sum2 + "<br>" + "<hr>");

        var i = 1;
        var sum3 = 0;
        for (i = 1; i <= 100; i++) {
            sum3 = sum3 + i;
        }
        document.write("1+2+3+...+100=" + sum3 + "<br>" + "<hr>");
    </script>

    <script> //循环方式输入菱形图案
        for (var i = 1; i < 4; i++) {
            for (var j = i; j < 4; j++) {
                document.write("-");
            }
            for (var m = 1; m <= i * 2 - 1; m++) {
                document.write("*");
            }
            document.write("<br/>");
        }
        for (var i = 1; i <= 4; i++) {
            for (var j = 1; j < i; j++) {
                document.write("-");
            }
            for (var m = i; m <= 8 - i; m++) {
                document.write("*");
            }
            document.write("<br/>");
        }
        document.write("<hr>")
    </script>

    <script> //输出九九乘法表
        var i = 0;
        do {
            i++;
            var j = 0;
            do {
                j++;
                document.write(i + " * " + j + " = " + i * j, "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
            }
            while (j < i);
            document.write("<br>");
        }
        while (i < 9);
    </script>
</body>

</html>

2023.12.19 初识函数+获取元素

初识函数

<!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>
    <a href="javascript:a()">点击跳转</a>
    <hr>
    <input type="button" onclick="eventVisit()" value="请单击我！" >

    <script> //全局变量和局部变量
        var a = "大雾四起";
        //a在主程序中定义，是全局变量，即在script标签对内都任何地方都可以用
        function getMes() {
            var b = a + "我在无人之处";
            return b;
        }
        //b在函数getMes()中定义，有效范围只在函数中

        //var str = b + "爱你"; 在页面上不会有显示，因为b是局部变量，函数外不可使用
        var str = getMes() + "爱你";
        //在函数内使用return语句，调用函数返回b的值，可以在函数外使用函数内的变量
        document.write(str);
    </script>

    <script> //在超链接中调用函数
        function a() {
            alert("欢迎光临\n我的第一位观众")
        }

    </script>

    <script> //在事件中调用函数
        function eventVisit() {
            alert("谢谢你！");
        }
    </script>
</body>

</html>

//点击“点击跳转”链接显示：

//单击“请单击我！”按钮显示：

知识点：

1、定义函数：var定义变量，function定义函数；

（1）没有返回值的函数，即函数执行完不会返回任何值；

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
}

（2）有返回值的函数，函数执行完会返回一个供我们使用的返回值；（return语句）

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
    return 返回值;
}

2、调用函数

（1）直接调用（一般用于没有返回值的函数）；

函数名(实参1, 实参2, ... , 实参n);

（2）在表达式用调用（一般使用函数的返回值作为一部分参与表达式的计算）；

function addSum(a,b)
{
    var sum = a + b;
    return sum;
} //定义函数addSum(a,b)

var n = addSum(1, 2) + 100;
//调用函数参与表达式计算n的值

document.write(n);

（3）在超链接中调用（在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户点击超链接时，就会调用该函数）；

（4）在事件中调用（鼠标移动、鼠标单击等事件中调用）；

DOM基础-获取元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oInput = document.getElementsByName("subject");
            for (var i = 0; i < oInput.length; i++) { //利用for循环选中所有复选框
                oInput[i].checked = true;
            }
            document.title = "梦想是什么？"; //选择title元素
            //document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
            //设置网页body中的内容


            var arr = ["网页设计", "java程序设计", "数据结构"];
            var oLi1 = document.getElementById("list"); //id选择
            var oLi2 = document.getElementsByTagName("li"); //标签名选择
            for (var i = 0; i < oLi2.length; i++) {
                oLi2[i].innerHTML = arr[i]; //设置li元素中的内容为对应下标的数组arr中的元素
            }

            var oLi3 = document.getElementsByClassName("li") //class选择
            oLi3[1].style.color = "red"; //设置li类中第2个元素的颜色为红色


            var oTable1 = document.querySelectorAll(".all") //获取所有class为all的元素，类数组
            for (var n = 0; n < oTable1.length; n++) {
                oTable1[n].style.color = "blue";
            }

            var oTable2 = document.querySelector("#selector tr:nth-child(2)") //选取id为selector的元素下的第2个元素
            oTable2.style.color = "pink";

            var oDiv = document.getElementById("div1");
            oDiv.style.color = "green";
        }

    </script>
</head>

<body>
    <form>
        <input type="checkbox" name="subject" value="网页设计">网页设计
        <input type="checkbox" name="subject" value="java程序设计">java程序设计
        <input type="checkbox" name="subject" value="数据结构">数据结构
    </form>
    <hr>
    <ul id="list">
        <li class="li"></li>
        <li></li>
        <li class="li"></li>
    </ul>
    <hr>
    <table id="selector">
        <tr>
            <td class="all">网页设计</td>
        </tr>
        <tr>
            <td>java程序设计</td>
        </tr>
        <tr>
            <td class="all">数据结构</td>
        </tr>
    </table>
    <hr>
    <div id="div1">呵呵</div>
</body>

</html>

知识点：获取元素的6种方式

1、getElementById()：“get element by id（通过id来获取元素）”类似css中的id选择器；

document.getElementById("id名")

2、getElementsByTagName()：“get elements by tag name（通过标签名来获取元素）”类似css中的元素选择器；

document. getElementsByTagName("标签名")

3、getElementsByClassName()：“get elements by class name（通过类名来获取元素）”类似css中的class选择器；

document. getElementsByClassName("类名")

4、querySelector()和querySelectorAll()

document.querySelector("选择器"); //对于id选择器更建议使用byid方法获取元素
document.querySelectorAll("选择器");
//#id名 .class名

document.querySelector("#main") //选择id为main的第一个元素
document.querySelector("#list li:nth-child(1)") //选择id为list的元素下的第1个元素
document.querySelectorAll("#list li") //选择id为list的元素下的所有li元素
document.querySelectorAll("input:checkbox") //获取页面上第1个复选框的值

5、getElementsByName()：只用于表单元素，通过起name属性获取，一般只用于单选按钮和复选框；

document.getElementsByName("name名")

6、document.title和document.body：选取页面中唯一的title元素和body元素；

7、使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了；

window.onload = function () 
{
    ……
}

2023.12.20 HTML属性操作（对象属性）+css属性操作

DOM进阶-HTML对象属性操作

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            //动态创建一个按钮
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";
            document.body.appendChild(oInput); //设置按钮的id、type和value属性值并将按钮添加到body中
            //为按钮添加点击事件
            oInput.onclick = function () 
            {
                alert(oInput.id); //获取按钮的id属性值
            }

            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true; //使用布尔变量flag来标识两种状态，使得两张图片可以来回切换
            oBtn.onclick = function(){
                if(flag){
                    oBtn.value = "熄灭";
                    oPic.src = "../img/on.gif"
                    flag = false;
                } else {
                    oBtn.value = "点亮";
                    oPic.src = "../img/off.gif"
                    flag = true;
                }
            }
            
        }
    </script>
</head>
<body>
    <img id="pic" src="../img/off.gif" >
    <input id="btn" type="button" value="点亮">
    <hr>
</body>
</html>

//单击“点亮”按钮

//单击“熄灭”按钮

//单击“提交”按钮

知识点：

1、获取html属性值；

obj.attr

//obj表示DOM对象(名)，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点。
//attr表示CSS属性名。驼峰型命名css属性名

2、设置html属性值；

obj.attr = "值";

DOM进阶-css属性操作

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            var oBtn1 = document.getElementById("btn1")
            var oBtn2 = document.getElementById("btn2")


            oBtn.onclick = function () {
                //获取两个文本框的值（也就是输入的内容）
                var attr = document.getElementById("attr").value;
                var val = document.getElementById("val").value;
                oBox.style[attr] = val; //单击“设置”按钮为box设置css属性
                return oBox.style[attr];
            }
            oBtn1.onclick = function () {
                alert(oBtn.onclick());
            }
            oBtn2.onclick = function () {
                alert(getComputedStyle(oBox).backgroundColor);
            }

            var oBtn3 = document.getElementById("btn3");
            var oBox3 = document.getElementById("box3");
            oBtn3.onclick = function () {
                var txt = document.getElementById("txt").value;
                oBox3.style.cssText = txt; //cssText可以设置多个css属性且不需驼峰型命名
            }
        
        }
    </script>
</head>

<body>
    CSS属性：<input id="attr" type="text" value="" /><br />
    CSS取值：<input id="val" type="text" value="" /><br />
    <input id="btn" type="button" value="设置" /> <!--设置“设置”按钮-->
    <div id="box"></div>
    <input id="btn1" type="button" value="获取1" /> <!--设置“获取1”按钮-->
    <input id="btn2" type="button" value="获取2" /> <!--设置“获取2”按钮-->
    <hr>
    <input id="txt" type="text" value="">
    <input id="btn3" type="button" value="修改"> <!--设置“修改”按钮-->
    <div id="box3"></div>
</body>

</html>

//填写css属性和取值后单击“设置”按钮和“获取1”按钮：

//单击“获取2”按钮：

//填写水平线下文本框内容（width:50px;height:50px;background-color:lightskyblue;）后单击“修改”按钮：

知识点：

1、获取css属性；

getComputedStyle(obj).attr
//等价于
//getComputedStyle(obj)["attr"]

2、设置css属性；

（1）style对象：

obj.style.attr = "值";
//等价于
//obj.style["attr"] = "值"

（2）cssText属性：

obj.style.cssText = "值";
//cssText的值是一个字符串
//这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如background-color应该写成background-color，而不是backgroundColor。
//例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";

b站黑马程序员视频学习

JSON

BOM

DOM

事件监听（事件绑定&常见事件）

console.log("")：输入到控制台的日志中

Ajax（原生方法了解即可）

XML是一种标记语言，用于存储技术

从服务器端获取数据

1、创建XMLHttpRequest

var xmlHttpRequest = new XMLHttpRequest();

2、发送异步请求

xmlHttpRequest.open('GET','数据地址'); //设置请求方式以及请求路径

xmlHttpRequest.send(); //发送请求

3、获取服务响应数据

xmlHttpRequest.onreadystatechange = function(){ //检测xml状态变化，若状态变化则触发该函数

if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ //如果true则响应成功

document.getElementById('id').innerHTML = xmlHttpRequest.responseText; //请求成功后获取服务端响应的数据并填充至页面

}

Axios（对原生的Ajax进行了封装，简化书写，快速开发）

两种请求方式

1

1、引入Axios的js文件

2、使用Axios发送请求，并获取响应结果

//通过axios发送异步请求-get

axios({

method: "get", //请求方式

url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list" //请求路径

}).then((result) => {

console.log(result.data); //成功回调函数

})

//通过axios发送异步请求-post

axios({

method: "post",

url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",

data: "id=1"

}).then((result) => {

console.log(result.data);})

2 代码

<!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>Ajax-Axios</title>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {
            console.log(result.data);
        })
        
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>