JavaScript基础概念、核心组成与嵌入方式详解

一、什么是JavaScript

JavaScript是一种具备面向对象能力的解释型程序设计语言。具体而言，它是基于对象和事件驱动的客户端脚本语言，具备相对的安全性。其运行不依赖特定的语言环境，只需浏览器支持即可执行。JavaScript的主要应用场景包括验证提交至服务器的数据合法性、增强网页互动性以及提升用户体验等。

• 基于对象：JavaScript内置了大量对象，开发者可直接调用对象的属性和方法进行操作，从而简化编程过程。
• 事件驱动：程序从启动到结束，能够持续监听并响应各类事件。
• 解释性语言：JavaScript无需编译成计算机专用的可执行文件，而是采用“调用哪块解释哪块”的方式，并非一次性编译。例如C#属于编译型语言，运行前必须编译为exe或dll文件，而JavaScript无需预先编译。
• 脚本语言：JavaScript需要嵌入到其他语言中才能发挥作用，通常嵌入在HTML中，单独存在并无实际意义。

二、JavaScript和ECMAScript的关系

• ECMAScript构成了JavaScript的标准与基础规范。

三、JavaScript特点

1、松散性（弱类型）

JavaScript的核心语法结构与C、C++、Java相似，涵盖条件判断、循环和运算符等。但JavaScript属于松散类型语言，变量无需声明明确类型，甚至可以不声明直接使用。例如，一个变量先被赋值为数字，随后又可被赋值为字符串等其他类型。

2、对象属性

JavaScript中的对象将属性名映射为任意属性值，这种机制类似于哈希表或关联数组，与C语言的结构体或C++、Java中的传统对象模型有所不同。

3、继承机制

JavaScript的面向对象继承机制基于原型（Prototype，即最基础的基类），这与C++和Java中通过子类继承父类的机制有显著区别。

4、严格区分大小写。

四、JavaScript组成部分

一个完整的JavaScript体系由以下三个不同部分组成：

1、核心（ECMAScript）

• 核心部分定义了JavaScript的语言基础，各浏览器均严格遵守此规范，因此不存在兼容性问题。该规范由ECMA制定，包含语法、类型、语句、关键字、保留字、操作符和对象等要素。

2、文档对象模型（DOM）

• 文档对象模型（Document Object Model）定义了如何将HTML转换为符合DOM规范的树形结构，以及如何对该树进行操作。该规范由W3C制定，但部分浏览器未严格遵守，开发时需考虑兼容性问题。
• HTML和XML的应用程序接口（API）。
• 将整个页面规划为层级式的节点结构。

3、浏览器对象模型（BOM）

• 浏览器对象模型（Browser Object Model）内置了用于操作窗口的对象，包括window、screen、location、navigator、document和xmlhttprequest等。尽管这部分没有统一规范，但各浏览器均支持这些对象。开发人员利用BOM可以控制浏览器显示页面以外的部分。BOM的独特之处在于它作为JavaScript实现的一部分，至今仍未制定相关标准，这也常导致问题。

BOM可对浏览器窗口进行访问和操作，具体包括：

• 弹出新的浏览器窗口。
• 移动、关闭浏览器窗口及调节浏览器窗口大小。
• 获取用户屏幕分辨率的屏幕对象。
• web浏览器详细的定位对象。

五、使用JavaScript

<Script>标签解析

<script>xxx</script>标签组是在HTML页面中插入JS的主要方法，主要包含以下属性：

• 1、charset：可选。表示通过src属性指定的字符集。由于大多数浏览器忽略此属性，因此使用较少。
• 2、defer：可选。表示脚本可延迟到文档完全解析和显示后再执行。因大多数浏览器不支持，故很少使用。
• 3、language：已废弃。原用于指定代码使用的脚本语言，因大多数浏览器忽略此属性，建议不再使用。
• 4、src：可选。表示包含要执行代码的外部文件路径。
• 5、type：必需。可视为language的替代品，表示代码使用的脚本语言的内容类型。范例：type="text/javascript"

<script>标签示例：

<script type="text/javascript">
   alert('欢迎来到JavaScript世界!');
</script>

六、JavaScript使用方式：

1、事件定义式：在定义事件时直接写入JavaScript脚本。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件定义式</title>
</head>
<body>
    <input type="button" value="点击" onclick="alert('我被点击了')" />
</body>
</html>

效果：

2、直接嵌入式：在网页中直接嵌入JavaScript代码。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直接嵌入式</title>
    <script>
       function btnClick(){
           alert("我是写在head里面的JavaScript");
       };
    </script>
</head>
<body>
    <input type="button" value="点击" onclick="btnClick()" />
    <script>
       alert("我是写在body里面的JavaScript");
    </script>
</body>
</html>

效果：

注意：

• 使用直接嵌入式时，JavaScript脚本既可以写在<head>标签内，也可以写在<body>标签内。

3、文件调用式：在网页中调用独立的JavaScript文件。将JS代码写在单独的.js文件中，通过src属性引入。这种方式具有高维护性、可缓存（加载一次无需再次加载）以及便于未来扩展的特点。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件调用式</title>
    <script src="../demo.js"></script>
</head>
<body>
    <input type="button" value="点击" onclick="btnClick()" />
</body>
</html>

注意：

• 1、使用外部样式引入js，虽然没有任何代码了，但也不能使用单标签： <script type="text/javascript" src="demo.js"/>
• 2、不能再里面添加任何代码，添加的代码执行不到 <script type="text/javascript" src="demo.js">alert('我很可怜，因为执行不到')</script>

到此这篇关于JavaScript基础与实例的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。