JavaScript基础-1

最新推荐文章于 2024-06-10 22:18:41 发布

大大126

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量70

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119967585

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.JavaScript简介

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

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 控制了网页的行为

JavaScript 是一个面向对象的脚本语言，目前互联网上较流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

面向对象是一种编程思想

面向对象是从面向过程升华而来。

JavaScript的版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式，添加 try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加 "strict mode"，严格模式，添加 JSON 支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符 (**)，增加 Array.prototype.includes

2.JavaScript的作用

JavaScript：直接写入 HTML 输出流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("<h1>测试JavaScript直接写入 HTML 输出流</h1>")
    </script>
</head>

<body>
    <h3>JavaScript能直接写入 HTML 输出流</h3>
</body>

</html>

JavaScript：对事件的反应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function test1() {
            document.getElementById("h1").innerText = "对事件作出反应";
        }
    </script>
</head>

<body>
    <h1 id="h1">作出反应</h1>
    <input type="button" value="触发按钮" onclick="test1();">
</body>

</html>

点击按钮后

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function test1() {
            // 找到要改变的元素
            document.getElementById("test")
                // 改变元素的内容
                .innerText = "已经改变"
        }
    </script>
</head>

<body>
    <h3 id="test"> 改变 HTML 内容</h3>
    <button type="button" onclick="test1();">按钮</button>
</body>

</html>

点击按钮后

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变 HTML 图像</title>
    <script>
        function test1() {
            // 找到要改变的元素
            document.getElementById("img")
                // 改变的样式
                .style.border = "5px solid red"
            document.getElementById("img")
                .width = "200"
            document.getElementById("img")
                .height = "200"

        }
    </script>
</head>

<body>
    <img id="img" src="img/tupian1.png" alt="">
    <input type="button" value="改变图像" onclick="test1();">
</body>

</html>

运行后

点击按钮后

JavaScript：验证输入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript：验证输入</title>
    <script>
        function test1() {
            var phone = document.getElementById("text1").value;
            var spanobj = document.getElementById("span1");
            if (phone == "123456789") {
                alert("验证成功");
            } else {
                spanobj.innerText = "验证错误";
            }
        }
    </script>
</head>

<body>
    <input id="text1" type="text" placeholder="手机号">
    <span id="span1"></span>
    <input type="button" value="验证" onclick="test1();">
</body>

</html>

3.JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 innerHTML 写入 HTML 元素

使用 console.log() 写入浏览器控制台

使用 innerHTML

JavaScript 函数

function 函数名称(){} -- 结构函数

放置到 HTML 页面的 <head> 部分

<script>
        function test1() {
            // 找到要改变的元素
            document.getElementById("test")
                // 改变元素的内容
                .innerText = "已经改变"
        }
    </script>

onclick="函数名称()" -- 点击事件

放置到 HTML 页面的 <body> 部分

   <button type="button" onclick="test1();">按钮</button>

外部的 JavaScript

我们也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入外部js -->
    <script src="myjs.js">
    </script>
</head>

<body>
    <input type="button" value="测试外部链接" onclick="test()">
</body>

</html>

4.JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头。

// 单行注释

多行注释以 /* 开始，以 */ 结尾。

        /* 多行注释
         多行注释
         多行注释
         多行注释*/

大大126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础-1

1.JavaScript简介JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为JavaScript 是一个面向对象的脚本语言，目前互联网上较流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。面向对象是一种编程思想面向对象是从面向过程升华而来。JavaScript的版本JavaScript ...
复制链接

扫一扫