59b45a8c661a24d8f838697f27c14bb0.png

什么是Javascript

通俗来讲javascript是一种脚本语言，允许用户编写一些运行在浏览器端的程序，这些程序可以通过更改HTML或者CSS来改变浏览器显示的内容。

Javascript和Java的关系

这是两种完全不相关的语言，Java是一种编程语言，用于编写一些运行于电脑或者其他设备上的程序，而javascript是一种脚本语言，用于和浏览器的内容进行交互。

Javascript开发使用的工具

Javascript是一种运行在浏览器端的不需要编译的脚本语言。进行javascript编程只需要一个文档编辑器和一个浏览器。

一个优秀的编辑器和浏览器以及一些插件能大大简化Javascript的开发过程。

浏览器是Javascript的自然运行环境，一个优秀的浏览器可以在Javascript的开发过程中提供大量的帮助，包括显示一些日志信息等等。

在这里使用的是谷歌浏览器

谷歌浏览器使用F12（检查）功能，可以打开谷歌开发者界面，可以看到其中包括很多功能，对于javascript开发而言，我们着重用到的是控制台（Console）窗口。

在控制台窗口中，我们可以直接编写javascript代码并在窗口中显示

在控制台中输入：

alert("hello world!")

e39cc8d2e1b47a2e38fc28dacc8ccd0c.png

并按下回车，浏览器会弹出一个新窗口，

b2cbe4adad04007fd62f712b4655594a.png

我们也可以进行一些复杂的编写，比如在命令行中输入：

var date = new Date()
alert("Today is "+date)

06fd0a577f6d52312281c2fdd4519ebd.png

回车之后我们可以得到

a60f988057e7cc78a1fd817201033fb3.png

使用alert，浏览器会弹出新的窗口显示我们输入的内容，我们也可以使用console.log() 以避免每次都要关闭新窗口的麻烦。

在使用Javascript的过程中，我们需要对浏览器使用的HTML语言有一个基本的理解，要知道一个网页的内容是包含在body标签中的，继续上面的例子，我们在命令行使用：

9f4a6cadcd2f09f27c55974119eeb56e.png

显示为;

89919fc651c0500ad662bafc6de8e39e.png

如果刷新了页面，所有的内容都会消失，这是因为代码并没有在浏览器运行的时候被加载，而只是写在了命令行里

当实际使用时，不可能指望用户打开命令行自己更改网页，实际中使用的方法有：

1: 在HTML代码中直接加载javascript

当我们在HTML中直接使用Javascript时，需要使用标签script

理论上我们可以把script标签放在HTML代码的任何位置，这种被称为嵌入式脚本。

但是，对于嵌入脚本来说，如果希望在网页内容显示之前就运行javascript，那么需要把script标签写在head中；如果希望在网页加载完成，显示内容之后在运行javascript，那就把script标签写在body的后面

<!DOCTYPE html>

加载页面可以得到

525266d19ce3ffd6cacda97ffa33d7ae.png

而当我们把script的内容添加到head中的时候

<!DOCTYPE html>
<html>
<head>
    <script>
        var date = new Date();
        document.body.innerHTML = "<h1>Today is: "+date+"</h1>"
    </script>  
    <title>空白页</title>    
</head>
<body>
</body>
  
</html>

再次加载页面时，我们会得到一个空白页面，当使用F12功能检查输出时发现

92ed06f6c9372027c0881d7a1b4a2807.png

得到这个错误的原因是，在运行javascript时，document.body还没有被创建。

这里有个一概念就是，当浏览器在运行时，代码脚本是不经过编译的，运行到哪里就显示到哪里，在上面的例子中，当javascript运行时，body标签还没有被创建，所以没有出现期待的页面

2：把Javascript保存进单独的文件中，在浏览器加载页面的时候，同时加载javascript脚本。

内嵌式的script通常使用在运行较小的程序或者程序只运行在当前页面的时候，对于比较大的javascript脚本或者需要在多个页面中运行的javascript脚本，内嵌式就不是那么有效率。为此我们可以在网页中加载外部的javascript文件来解决上面的问题

我们在HTML页面所在的目录下创建一个新的文件叫做script.js，js表明了这是一个javascript脚本文件。

同时在HTML文件中加入脚本的引用

<!DOCTYPE html>
<html >

<head>
 <title>空白页面</title>
 <script src="script.js">
 </script>
</head>
<body>
</body>
</html>

这样就完成了对外部script的调用

但是同样的，和方法1一样，当我们的调用处于head中，依然会得到一个空白的页面以及一个后台命令行中的异常，这是由于使用外部js和嵌入式脚本一样，浏览器会在运行到调用外部js的时候开始寻找js中使用的元素，同样的，这时候body依旧没有被创建。

为了解决这个问题，在调用外部js文件时，可以使用以下三种方法

  1. <script src="script.js">
  2. <script src="script.js" async>
  3. <script src="script.js" defer>

async告诉浏览器，可以预先下载js文件，在下载完成之后在运行，这样对于加载较大的js文件时，可以有效的提高浏览器的显示速度，但是依旧解决不了上面的问题

defer和async一样，浏览器会预先下载js文件的内容，区别是defer会使HTML内容完全加载之后，在运行js文件中的脚本，这样就解决了上面我们遇到的问题。

以上三种不同的调用方式代表了浏览器在处理内部外部文件时的顺序

在默认情况下：

09b4ba59a51280633a20445b9235f2db.png

使用async时

51e486b72873111f8ac0215ce62276ea.png

而使用defer时：

c8e7b0e7d6c6d010fdcf2708c01572e9.png

在脚本的调用中，要根据不同的情况使用不同的参数。

使用javascript的注意

  1. Javascript是大小写敏感的语言
  2. 使用变量或者方法时建议使用驼峰式大小写camelCase
  3. Javascript不在乎空格，但是从代码维护角度，编写人员应该加入适当的空格
  4. Javascript不在乎是否使用分号来结束一段程序
  5. 应该加入适量注释：注释是为了给后期维护人员理解使用，html在加载过程中会忽略注释中的内容
//单行注释
/*
多行注释
*/

初学javascript，有不对的地方，欢迎指正。

Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

avatar AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..

avatar AI Agent技术社区
cover

2025年8月SCI-炭黑四角蜂优化算法 Tetragonula carbonaria Optimization Algorithm-附Matlab免费代码

avatar AI Agent技术社区