《客户端脚本语言-JavaScript》

最新推荐文章于 2023-12-19 09:15:00 发布

原创最新推荐文章于 2023-12-19 09:15:00 发布 · 6.3k 阅读

1 ·

CC 4.0 BY-SA版权

B/S学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript的基本概念，包括其特点、组成及应用方法，并通过五个实例展示了如何在HTML页面中运用JavaScript实现页面行为的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

在之前学习的项目中接触过JavaScript，并且在参与的积分系统中也有涉略。但对于其的认识是碎片化的，通过此《北风网李炎恢视频》的学习，对于JavaScript有了一个较为系统的认识。此篇博文重点为大家展示JavaScript是何物？

JavaScript

基于对象和事件驱动并且具有相对安全性的、具有面向对象能力的、解释型的程序设计语言，具体来说，便是客户端脚本语言。运行依赖于可支持的浏览器。

特点：

（1）松散性：变量无需一个明确的类型

（2）对象属性：对象可把属性名映射为任意的属性值

（3）继承机制：基于原型

组成:

（1）核心（ECMAScript）

（2）文档对象模型（DOM：Document Object Model）：针对HTML和XML的API（应用程序接口）描绘了一个层次化的节点树，运行开发人员添加、移除、修改页面的某一部分，是表现和操作页面标记的真正跨平台、语言中立的方式。

D：整个web加载的网页文档

O：类似Window对象之类的东西，可调用属性和方法

M:网页文档的树形结构

（3）浏览器对象模型（BOM：Browser Object Model）:提供很多对象，用于访问浏览器的功能。

用法：

JavaScript是轻量级的编程语言，可插入HTML页面，由所有的现代浏览器执行。

简而言之：JavaScript与HTML、CSS一起工作。具体关系为：HTML定义网页的内容；CSS描述网页的布局；JavaScript关乎网页的行为

基本原则：

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

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

实例：

（1）直接写入HTML输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实例</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>清风明月</h1>");
document.write("<p>清风徐来</p>");
</script>
<p>
您只能在 HTML 输出流中使用
	
</body>
</html>

运行结果：

（2）对事件作出反应：alert()函数在起作用，可用于代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
</head>
<body>
<h1>我的第一个JavaScript</h1>
<p><button type="button" onclick="alert('欢迎加入')"/>点我!</p>
</body>
</html>

结果：

（3）改变HTML内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>

JavaScript实例

</title> 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">//*********************************************以ID为链接，改变此处的内容显示JavaScript 能改变 HTML 元素的内容。</p>
<script>
  function myFunction(){
    x=document.getElementById("demo"); // 找到元素
    x.innerHTML="Hello JavaScript!"; // 改变内容
  }
</script>
<button type="button" onclick="myFunction()">点击这里</button> //*******************************创建按钮，触发myFunction()
</body>
</html>

结果：

（4）改变HTML样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>

JavaScript实例

</title> 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
    function myFunction(){
          x=document.getElementById("demo") // 找到元素
          x.style.color="#ff0000"; // 改变样式
     }

</script>
<button type="button" onclick="myFunction()">点击这里</button> //***********************改变字体颜色，运行机制与改变HTML内容一致</body></html>

结果：

（5）验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>

JavaScript实例

</title>
 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>function myFunction()//***********************************************关键部分
{var x=document.getElementById("demo").value;
if(x==""||isNaN(x)){
   alert("不是数字");
}}//****************************************************************************
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

结果：