初识JavaScript

合集 - JavaScript(1)

1.初识JavaScript2024-12-11

收起

1. 是什么#

• js 是一种运行在客户端的脚本语言

• 脚本语言：不需要编译，运行过程中由 js 解释器（js 引擎）逐行来进行解释并执行

2. js 的作用#

• 表单动态校验（密码强度检测）【js 产生的最初目的】

• 网页特效

• 服务端开发（Node.js）

• 桌面程序（Election）

• App（Cordova）

• 控制硬件 - 物联网（Ruff）

• 游戏开发（cocos2d - js）

3. HTML / CSS / JS 的关系#

• HTML / CSS 标记语言 -- 描述类语言

  • HTML 决定网页结构和内容（决定看到什么），相当于人的身体

  • CSS 决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆

• JS 脚本语言 -- 编程类语言

  • 实现业务逻辑和页面控制（决定功能），相当于人的各种动作

4. 浏览器如何执行 JS#

• 浏览器分为以下两部分：

  • 渲染引擎：用来解析 HTML 与 CSS，俗称内核，比如 chrome 浏览器的 blink，老版本的 webkit

  • js 引擎：也称 js 解释器。用来读取并运行网页中的 js 代码，如 chrome 浏览器的 V8

• 浏览器本身不会执行 js 代码，而是通过内置 js 引擎执行。

5. js 的组成#

• JavaScript 语法：ECMAScript 【规定了 JS 编程语法和基础核心知识】

• 页面文档对象类型：DOM

  • Document Object Model：是 W3C 组织推荐的处理可扩展标记语言的标准编程接口

  • 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

• 浏览器对象模型：BOM

  • Browser Object Model：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

  • 通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

6. 引入 js#

• 行内式——直接写到元素内部

  • 可读性差

  • 引号多层嵌套匹配时，容易弄混

<input type="button" value="提交" onclick="alert('提交成功')" />

• 内嵌式

<script>
	alert("HelloWorld");
</script>

• 外部——script 双标签

  • 利于 HTML 页面代码结构化，把大段 JS 代码独立于 HTML 页面之外，方便文件级别的复用

  • 适用于 js 代码较多的情况

<!-- 中间留空 -->
<script src="xxx.js"></script>

6.1 html 中引入的 js 不起作用？#

• 原因

  • 引入 js 的位置不对，应在使用之前引入

  • 引入的 js 路径不对

  • 引入 js 时标签属性写错，例如：写成了引入 css 时的href='路径'

• JS 放在 head 和放在 body 中的区别

  • 浏览器解析 html 是从上到下的

  • 放在 head 部分

    • 需调用才执行的脚本或事件触发执行的脚本放在 head 部分【可以保证脚本在任何调用之前被加载】

  • 放在 body 部分

    • 当页面被加载时执行的脚本放在 body 部分【通常被用来生成页面的内容】

  • body 和 head 部分可同时有脚本

• 示例：若想定义一个全局对象，该对象是页面中的某个按钮时，则必须将其放入 body 中，若放入 head，那么当你定义时，那个按钮都还没被加载，可能获得的是一个 undefined

• 一般会绑定一个监听，当全部的 html 文档解析完之后再执行代码：

windows.onload = function () {
	//这里放入执行代码
};

7. 解释型语言和编译型语言#

• 翻译器翻译的方式有两种：编译和解释

• 编译器：在代码执行之前进行编译，生成中间代码文件

  【类比平时吃饭，把全部菜做好再吃饭】

• 解释器：运行时进行及时解释，并立即执行（当编译器以解释方式运行时，也称之为解释器）

  【类比吃火锅，边吃边涮】