网页设计练习-JavaScript的学习

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属性操作

知识点:

1、获取css属性;

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;";