JavaScript常见基本功能-阿江博客

JavaScript（简称JS）是一种函数优先的轻量级、解释型、即时编译型脚本语言，广泛应用于HTML、移动端、PC端桌面应用开发。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript：写入 HTML

# 页面加载的时候会创建H1标签和P标签

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

JavaScript：改变 HTML 内容

document.getElementById("demo")方法是HTML DOM中定义的，用来查找元素。

# 单击按钮后会改变P标签的文本内容

<p id="demo">这是原始内容</p>
<button type="button" onclick="my_click()">改变内容</button>
<script>
    function my_click() {
        document.getElementById("demo").innerHTML = "这是改变后的内容";
    }
</script>

JavaScript：改变 HTML 图像

element.src.match("off")的意思是检索img标签中src属性的值有没有包含"off"这个字符串，如果存在即将src更新为on.gif，否则更新为off.gif。

<body>
    <p>点击图片就可以打开或关闭灯光</p>
    <img id="image" onclick="changeImage()" src="off.gif" width="100" height="180">
    <script>
        function changeImage() {
            element = document.getElementById("image")
            if (element.src.match("off")) {
                element.src = "on.gif";
            } else {
                element.src = "off.gif";
            }
        }
    </script>
</body>

JavaScript：改变 HTML 样式

# 点击按钮后P标签的文本颜色会更新

<body>
    <p id="demo">JavaScript 能改变 HTML 元素的样式</p>
    <button type="button" onclick="change_color()">点击这里</button>
    <script>
        function change_color() {
            document.getElementById("demo").style.color = "#ff0000";
        }
    </script>
</body>

JavaScript：判断数字输入

<body>
    <input type="text" id="demo" placeholder="请输入内容">
    <button type="button" onclick="is_num()">开始判断</button>
    <script>
        function is_num() {
            var nums = document.getElementById("demo").value;
            if (isNaN(nums) || nums.replace(/(^\s*)|(\s*$)/g, "") == "") {
                alert("不是数字");
            } else {
                alert(nums);
            }
        }
    </script>
</body>