JavaScript概述

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #脚本语言

笔记专栏收录该内容

8 篇文章

订阅专栏

第二课时 JavaScript概述

1、关于JavaScript
2、JavaScript的组成结构
3、为什么学习 JavaScript?
4、用JavaScript能做什么？
5、浏览器解析页面的原理
- - *疑问：为什么CSS文件放在头部，将JS文件放到尾部？*
6、JavaScript的基本使用
- - 6.1 JavaScript的引用方式
  - 6.2 输入 / 输出语句

1、关于JavaScript

JavaScript是轻量级的编程语言，是一种运行在客户端浏览器中，由浏览器解析的脚本语言。
脚本语言：即不需要编译，直接可以被浏览器解析和执行。

在这里插入图片描述

2、JavaScript的组成结构

在这里插入图片描述

3、为什么学习 JavaScript?

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

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

4、用JavaScript能做什么？

JavaScript可以用来修改页面内容，HTML图像，HTML样式，以及表单的验证。

5、浏览器解析页面的原理

第一步:浏览器向服务器发起请求，服务器接受请求后返回请求的页面文档

第二步：浏览器接收文档，开始从头解析（解析HTML文件）。

第三步：解析文档生成DOM，如果有CSS文件则会生成CSSDOM（加载外部脚本和样式表文件）

第四步：解析并执行脚本代码

第五步：解析完成文档后生成DOM树（触发DOMContentLoaded)

第六步：加载图片等外部文件

第六步：浏览器根据DOM树的内容计算出各个节点的位置和大小，绘制在浏览器上（页面加载完成，触发oad）

当从dom从上到下解析时，遇到script标签会停止解析，转而去解析script脚本，如果是内联的脚本，浏览器会先去执行这段内联脚本。如果是外链的，那会会先加载脚本js文件，后执行js文件。在处理完js脚本后，浏览器会继续解析HTML文档。

同样，Javascript执行也会收到标签CSS样式文件的影响。如果在标签前面有CSS样式文件，需css样式文件解析并加载完后才执行脚本，因为javascript可以查询对象的样式。

疑问：为什么CSS文件放在头部，将JS文件放到尾部？

因为浏览器生成DOM树时是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。

6、JavaScript的基本使用

HTML 中的脚本必须位于标签之间。且脚本可被放置在 HTML 页面的<body>和<head>部分中。

6.1 JavaScript的引用方式

内嵌式：将JS代码写在<script>标签内，<script>标签可放置于任何位置

<script type="text/javascript">  
    alert(‘hello world!’) //alert()方法为弹出一个警告对话框 
</script>

外联式：将JS代码写入外部JS文件中，通过<script>标签内的src属性引入

<script src="./index.js" type="text/javascript" charset="utf-8"></script>

行内JS：直接将代码写在HTML元素内，该方法问题较多，不推荐使用

<button type="button" onclick="javascript:alert('hello world!')">click me</button>

6.2 输入 / 输出语句

alert(): 创建一个警告对话框，参数内容为对话框文本
例如：
输出字符串

alert('hello world')

输出表达式

alert(1+1)

输出变量

var name = 'Alice'
alert('我是'+name)

prompt():创建一个提示对话框，用于收集用户输入，参数一为提示框文本
内容，参数二为输入框的默认值（参数二可选）

prompt('你最喜欢的颜色是','红色')

或者有返回值，可将返回值存入变量再调用

var color = prompt('你最喜欢的颜色是','红色')
alert(color)

document.write()：直接在页面上输出内容，参数除了可以是字符串、表达式变量，还可以是HTML标签代码

document.write('<h1>hello world</h1>')

document.write()中可以使用转义字符，但无法使用\n换行符，如需换行，可使用<br>标签

document.write('hello' + '<br>' + 'world')

JavaScript的调试，在浏览器中使用F12激活调试，然后选择console
控制台输出：console.log()

var a = 1  
var b = 2  
var c = a + b  
console.log(c) //控制台输出语句

以上代码结果为：
在这里插入图片描述