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>