当前位置：首页 > news >正文

JavaScript简介与快速体验

news 来源：原创 2024/5/4 5:19:16

文章目录

一、JavaScript的特点
二、JavaScript 快速体验
- 2.1 直接写入HTML内容
- 2.2 对事件的响应
- 2.3 改变HTML的内容
- 2.4 改变HTML图像
- 2.5 改变HTML样式
- 2.6 验证输入

一、JavaScript的特点

JavaScript 是一种轻量级的编程语言
JavaScript 是可插入HTML页面的编程代码
JavaScript 插入HTML页面后，可由所有的现代浏览器执行
JavaScript 很容易学习

二、JavaScript 快速体验

2.1 直接写入HTML内容

如下创建一个html文件，然后在body内增加一个script标签，然后使用document.write函数直接写入HTML内容，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript直接写入HTML</title>
</head>
<body>
    <script>
        document.write("<h1>我的第一个标题</h1>");
        document.write("<p>我的第一个段落</p>");
    </script>
</body>
</html>

然后在浏览器中打开，结果如下：

2.2 对事件的响应

如下，在html的body体内，通过button标签定义一个按钮，然后按钮中响应点击事件，弹出“你好，世界”的问候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button type="button" onclick="alert('你好，世界')")>确定</button>
</body>
</html>

在浏览器中运行，结果如下：

点击【确定】按钮之后，弹出如下提示框：

2.3 改变HTML的内容

如下，在html文件中的body体内，定义一个段落和按钮，点击按钮修改段落内容，修改的动作实现由script标签中的update_demo函数实现的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo">你好，JavaScript</p>
    <button type="button" onclick="update_demo()")>更新</button>
    <script>
        function update_demo()
        {
            demo_elem=document.getElementById("demo");
            demo_elem.innerHTML="Hello,JavaScript";
        }
    </script>

</body>
</html>

在浏览器中打开结果如下：

当点击【更新】按钮后，页面更新为如下：

2.4 改变HTML图像

这里可以在和html同目录下分别存放两张图片
01.png图片如下

02.png图片如下：

然后编写html代码，如下，即通过change_image函数进行切换图片，从而做到页面显示开灯和关灯的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function change_image()
        {
            elem=document.getElementById("demo")
            if (elem.src.match("01"))
            {
                elem.src="02.png";
            }
            else
            {
                elem.src="01.png";
            }
        }
    </script>
    <img id="demo" onclick="change_image()" src="01.png" width="240" height="180">
    <p>点击图片可以打开或者关闭电灯</p>
</body>
</html>

在浏览器中打开效果如下：

当点击灯泡一下后，显示如下：

当再次点击后又会显示关灯的效果。

2.5 改变HTML样式

编写html代码如下，即通过change_style函数修改段落的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo">我的第一个段落</p>
    <button type="button" onclick="change_style()">修改段落颜色</button>
    <script>
        function change_style()
        {
            elem=document.getElementById("demo");
            elem.style.color="#ff0000"
        }
    </script>
</body>
</html>

在浏览器中打开如下

当点击按钮后，效果如下：

2.6 验证输入

在html编写如下代码，即检查输入的是否为数字，如果不是数字，则弹窗提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="demo" type="text">
    <button type="button" onclick="check_input()">检查</button>
    <script>
        function check_input()
        {
            var num=document.getElementById("demo").value;
            if(num=="" || isNaN(num))
            {
                alert("您输入的不是数字！")
            }
        }
    </script>
</body>
</html>