JavaScript(一）——JavaScript简介

最新推荐文章于 2024-07-30 22:36:34 发布

神秘的博主

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量144

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_62701594/article/details/140807149

版权

为什么学习 JavaScript?

JavaScript 是脚本语言

JavaScript：直接写入 HTML 输出流

对事件的反应

改变 HTML 内容

JavaScript：改变 HTML 样式

JavaScript：验证输入

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 控制了网页的行为

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript：直接写入 HTML 输出流

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档

对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是众多事件之一

改变 HTML 内容

示例：

<!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>
    <p id="demo">
        111
    </p>
    <script>
        function myFunction() {
            x = document.getElementById("demo");  // 找到元素
            x.innerHTML = "Hello JavaScript!";    // 改变内容
        }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
</body>

</html>

运行后结果：

JavaScript：改变 HTML 样式

示例：

<!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>
    <p id="demo">
        111
    </p>
    <script>
        function myFunction() {
            x = document.getElementById("demo");  
            x.style.color="#ff0000";
        }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
</body>

</html>

运行后结果：

JavaScript：验证输入

示例：

<!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 id="demo" type="text">
    <script>
        function myFunction() {
            var x = document.getElementById("demo").value;
            if (x == "" || isNaN(x)) {
                alert("不是数字");
            }
        }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
</body>

</html>

运行后结果：

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上

神秘的博主

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(一）——JavaScript简介

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 是一种轻量级的编程语言。onclick 事件只是众多事件之一。
复制链接

扫一扫