HTML 学习笔记 JavaScript（简介）

JavaScript 是世界上最流行的编程语言。

这门语言可用于HTML和web 更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是脚本语言

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

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

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

JavaScript 输出：

<script>
    document.write("<h1>这是标题</h1>");
    document.write("哈哈哈哈哈");
</script>

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

JavaScript 对事件作出反应:

<body>
        <button id="btn">点我哦</button>
        <script>
//            document.getElementById("btn").addEventListener("click",function(){
//                alert("点击btn触发我哦");
//            });
            //添加事件的另一种方式
            document.getElementById("btn").onclick = function() {
                alert("点解我");
            };
        </script>
</body>

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

JavaScript 改变HTML的内容:

<body>
    <p id="fristP">我是第一段文字</p>
    <button id="btn">点我哦</button>
    <script>
        //获取文档元素
        var fristP = document.getElementById("fristP");
                document.getElementById("btn").addEventListener("click",function(){
                if (fristP.innerHTML == "我是第一段文字") {
                    fristP.innerHTML = "改变了哦";
                } else{
                    fristP.innerHTML = "我是第一段文字";
                }
            });
            
    </script>
</body>

JavaScript 改变HTML图像

<body>
        
    <img id="img1" src="img/HBuilder.png" />
    <br />
    <button id="btn">点我哦</button>
    <script>
        //获取文档元素
        var ele = document.getElementById("img1");
            document.getElementById("btn").addEventListener("click",changeImage);
            
        function changeImage() {
            ele.src = "img/PHP.png"
        }
            
    </script>
</body>

JavaScript 验证输入

    <body>
        
        请输入数字<input type="text" id="input1" />
        <br />
        <button id="btn">点我哦</button>
        <script>
            
            document.getElementById("btn").addEventListener("click",checkValue);
            
            function checkValue() {
                //获取文档元素
                var ele = document.getElementById("input1").value;
                if (ele == "" || isNaN(ele)) {
                    alert("Not Numberic");
                }
            }
            
        </script>
    </body>

提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

JavaScript初体验

JS有三种书写位置分别为行内内嵌和外部

1. 行内式JS

<!-- 1. 行内式js 直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

可以将单行或少量JS代码卸载HTML标签的事件属性中如： onclick

注意单双引号的使用:在HTML中我们推荐使用双引号，在JS中我们推荐使用单引号。

这种方式可读性差在html中编写大量代码时不方便阅读所以只在特殊情况下使用。

2.内嵌式js

<!-- 内嵌式的js -->
<script>
    alert('沙漠骆驼')
</script>

可以将多行JS代码写到<script>标签中

3.外部js文件：

<!-- 外部js script 双标签-->
<script src="../js/first.js"></script>

利于HTML页面代码结构化把大段JS代码独立到HTML页面之外既美观也方便文件级别的复用

引用外部js文件的script标签中间不可以写代码

适合于js代码量比较大的情况。

JavaScript 输入输出语句

为了方便信息的输入输出 JS中提供了一些输入输出语句常用的如下:

alert(msg) 浏览器弹出提示框

console.log(msg) 浏览器控制台打印输出信息

prompt(info) 浏览器弹出输入框用户可以输入

示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 这是一个输入框
        prompt('请输入你的年龄')
        // 弹出警示框 展示给用户的
        alert('输入信息错误')
        // 控制台输出
        console.log('这里有错误吗')
    </script>
</head>