第10节课：JavaScript基础——网页交互的魔法

学问小小谢

于 2024-08-05 18:01:56 发布

阅读量418

点赞数 13

分类专栏： HTML学习文章标签： javascript 交互开发语言 html5 前端学习

本文链接：https://blog.csdn.net/XWXXX666/article/details/140933409

版权

HTML学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript的作用

JavaScript最初是为网页上的交互式元素设计的，但随着技术的发展，它的应用范围已经远远超出了网页。JavaScript可以用于：

表单验证
动态内容更新（Ajax）
动画和视觉效果
Web游戏开发
响应用户事件（如点击、键盘输入等）
服务端编程（Node.js）

JavaScript的基本语法

JavaScript语法与其他C语言家族的语言类似，包括变量声明、数据类型、函数定义等。

基本语法规则

使用var、let或const声明变量。
使用函数function定义函数。
使用花括号{}定义代码块。
使用分号;分隔语句。

变量、数据类型和运算符

变量

变量是存储数据值的容器。在JavaScript中，变量可以有不同的数据类型。

var message = "Hello, World!"; // 字符串
let age = 25; // 数字
const pi = 3.14; // 常量

数据类型

JavaScript主要有以下几种数据类型：

Undefined：未定义，表示变量已声明但未赋值。
Null：空值，表示故意赋予变量的空值。
Boolean：逻辑实体，true或false。
Number：数值，包括整数和浮点数。
BigInt：可以安全地表示及操作大整数。
String：文本数据。
Symbol：ES6引入的新类型，一个唯一的、不可变的数据类型。
Object：复杂的数据结构，可以包含多个属性。

运算符

运算符用于执行数学和逻辑运算。

算术运算符：+、-、*、/、%等。
比较运算符：==（等于）、===（严格等于）、!=（不等于）、!==（严格不等于）等。
逻辑运算符：&&（逻辑与）、||（逻辑或）、!（逻辑非）等。
赋值运算符：=、+=、-=等。

实践：使用JavaScript增强网页功能

下面是一个简单的示例，展示如何使用JavaScript来增强网页的功能。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript示例</title>
</head>
<body>
    <h1 id="greeting">欢迎来到学问小小谢的网页！</h1>
    <button onclick="changeGreeting()">点击我改变问候语</button>

    <script>
        // 定义变量
        let userName = "访客";

        // 函数定义
        function changeGreeting() {
            // 获取元素
            const greetingElement = document.getElementById("greeting");
            // 改变文本
            greetingElement.textContent = `你好，${userName}！`;
        }

        // 监听键盘事件
        document.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                changeGreeting();
            }
        });
    </script>
</body>
</html>

结语

通过本节课的学习，你应该对JavaScript的基本概念、基本语法，以及变量、数据类型和运算符有了基本的了解。JavaScript是实现网页动态交互的关键技术。掌握这些基础，你将能够为网页添加各种交互功能。继续深入学习JavaScript的高级特性，如函数、对象、数组、DOM操作等，你将能够创建出更加丰富和互动的网页体验。

学问小小谢

关注

13
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
第10节课：JavaScript基础——网页交互的魔法

JavaScript是一种高级的、解释型的编程语言，它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将介绍JavaScript的基本概念、基本语法，以及变量、数据类型和运算符的使用。
复制链接

扫一扫

专栏目录