JavaScript第一课笔记

2023-12-18 15:34:21

什么是JavaScript

JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的网页。

简称JS

网页的组成：

一个完整的网页由三部分组成：

HTML?? （网页的主体部分）

CSS???? （美化的主体部分）

JavaScript （实现业务逻辑和页面控制）

HTML	CSS	JavaScript
结构	样式	行为
决定网页的结构和内容，相当于人的身体。	决定网页呈现给用户的效果，相当人的于衣服。	实现业务逻辑和页面控制，相当于人的各种动作。

JS的组成

JS由核心语法、DOM文档对象模型和BOM浏览器对象模型三部分组成。

ECMAScript	DOM	BOM
规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。	文档对象模型，是W3C组织指定的用于处理HTML文档和XML文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样式和内容。	浏览器对象模型，是一套编程接口，用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。

浏览器的组成

渲染引擎（排版引擎）	JavaScript引擎
负责解析HTML代码和CSS代码，用于实现网页结构和样式的渲染。	JavaScript引擎是JavaScript语言的解释器，用于读取网页中的JavaScript代码并执行。

“浏览器内核”是一个不太严谨的俗称，一般值渲染引擎和JavaScript引擎，由于JavaScript引擎越来越独立，部分资料就倾向于单指渲染引擎。

JS的特点：

1、简单易用（只需要用户安装浏览器即可使用）

2、跨平台??? 和上述一样。

3、支持面向对象

JS常见的开发工具


常见的两大开发工具	VSCode	HBuilderX
优点	什么语言都可以用它编写	专注于前台设计
缺点	界面设计不合理，安装的插件需要很多，需要联网等	功能较少

HBuilderX创建项目的HelloWorld

下载安装包并解压，将HbuilderX.exe生成快捷方式在桌面。

左上角：文件---新建---项目---普通项目---项目名称---存储路径---基本HTML项目

文件完成后需手动保存，然后运行。

案例总结

警告框代码案例
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8" /> ?? ??? ?<title></title> ?? ?</head> ?? ?<body> ?? ??? ?我是一枚想学好Java的ikun ?? ??? ?<script> ?? ??? ??? ?alert("你是ikun吗？") ?? ??? ?</script> ?? ?</body> </html>

总结：JS代码必须放在<script>标签内部????????

? ? ? ? ? ?script不能交叉嵌套

? ? ? ? ? ?script标签的摆放顺序可以随意，但将其放在body标签的内部的最下方最合适，若HTML页面中有大量JS代码，会导致加载时间过长，由于JS代码的执行是从上到下的，若是将JS代码放在HTML页面的上方就会导致执行JS代码时间过长，而下方的HTML代码则未被加载。

HTML页面书写JS代码的两种常见方式

嵌入式	外链式
将JS代码放在script标签中，将script标签放在HTML页面中（和CSS代码很类似）。适用于JS代码较少，不会影响到正常阅读HTML代码	适用于JS代码非常多，不适合放在HTML页面中，不然会导致阅读HTML代码的不方便

外链式的使用

在适当的位置（body标签的最低部）引入script标签
禁止在标签内部书写JS代码
创建一个外部的JS文件（后缀为.js文件）
这个外部js文件不用放script标签，直接写代码
在第一个步骤中添加src=“xxx.js”路径即可使用

外链式代码
<script scr="test.js"> </script>?

外链式相比于嵌入式的三大优势：

外链式存在于独立文件中，有利于修改和维护，而嵌入式会导致HTML于JavaScript代码混合在一起
外链式可以利用浏览器缓存提高速度
外链式有利于HTML页面代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用

JavaScript异步加载

浏览器执行JavaScript代码时，无论使用嵌入式还是外链式，页面的加载和渲染都会暂停，等待脚本执行完成加载后才会继续。为了尽可能减少对整个页面的影响，建议将不需要提前执行的<script>标签放在<body>标签内的底部位置

为了减少JavaScript阻塞问题对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。

所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染

文章来源:https://blog.csdn.net/2302_79612833/article/details/132753505
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！