1 什么是 JavaScript

张哥编程

发布于 2024-12-13 18:25:41

1.8K0

文章被收录于专栏：云计算linux云计算linux

1 什么是 JavaScript

JavaScript 是 Web 开发领域中的一种功能强大的编程语言。主要用于开发交互式的 Web 页面，使网页的互动性更强，用户体验更好。

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）。

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

Web页面是由多个网页组成的。网页制作涉及的技术：HTML、CSS 和 JavaScript。

HTML 代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。
CSS 代表了样式，样式是网页的外观，从审美的角度，美化页面。
JavaScript 代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

JavaScript 内嵌于 HTML 网页中，通过浏览器内置的 JavaScript 引擎直接编译，把一个原本只用来显示的页面，转变成支持用户交互的页面程序。

2 JavaScript 的由来

1995 年，Netscape（网景）公司，现在的 Mozilla 的 Brendan Eich（布兰登·艾奇）在网景导航者浏览器上首次设计出了 JavaScript。

Netscape 最初将这个脚本语言命名为 LiveScript。由于当时Sun公司（2009年被Oracle公司收购）推出的 Java 语言备受关注，Netscape 公司为了营销借用了 Java 这个名称。JavaScript 与 Java 本质上是两种不同的编程语言，并无任何关系。

JavaScript 在设计之初是一种可以嵌入到网页中的编程语言，用来控制浏览器的行为。比如，直接在浏览器中进行表单验证，用户只有填写格式正确的内容后才能够提交表单，避免了因表单填写错误导致的反复提交，节省了时间和网络资源。

JavaScript 缺点：

JavaScript 语言非常灵活，其语言特性也产生了一些不良的影响。
利用 JavaScript 制作网页上的漂浮广告、弹窗，让用户感到厌烦。
利用 Web 开发中的安全漏洞，在网页中编写恶意代码，窃取用户网站身份信息、传播病毒等。

JavaScript 特点：

解释性语言
基于原型的面向对象
Ajax 技术兴起之后，浏览器和服务器可以进行异步交互了，网站的用户体验又得到了更大的提升。当人们在百度的搜索框中输入几个字以后，网页会智能感知用户接下来要搜索的内容。
JavaScript 语言不依赖操作系统，仅需要浏览器的支持。

3 JavaScript 与 ECMAScript 的关系

ECMAScript 指的是 Ecma 发布的浏览器脚本语言的标准。
JavaScript 是网景公司在 Navigator 2.0 浏览器中内置的脚本语言。
ES6 指的是 2015 年 Ecma 国际发布了新版本 ECMAScript 2015。

JavaScript 包括 ECMAScript、DOM、BOM

ECMAScript
- ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
- ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。 <img src="https://gitee.com/rawait/rwpicgo/raw/master/teaching/2022-01-11/202201111441556.png" alt="img" style="zoom:80%;" />
DOM文档对象模型
- 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM浏览器对象模型
- BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

4 浏览器内核

排版引擎（渲染引擎）
- 负责将取得的网页内容（如HTML、CSS等）进行解析和处理，然后显示到屏幕中。
- 俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JavaScript 引擎
- 用于解析 JavaScript 语言，通过执行代码来实现网页的交互效果。
- 比如 chrome 浏览器的 V8

浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。

JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

5 第一个 JavaScript 程序

<script>
    alert('第一个 JavaScript 程序');
</script>

JavaScript 语法规则：

JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。
JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。
如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。
在HTML中我们推荐使用双引号，JS中我们推荐使用单引号

6 JavaScript 引入方式

6.1 嵌入式

嵌入式就是使用 <script> 标签包裹 JavaScript 代码，直接编写到HTML文件中。

<!-- 语法 -->
<script>
    JavaScript语句;
</script>

<script type="text/javascript">
     JavaScript语句;
</script>

type 属性用于告知浏览器脚本的类型。
type 默认值为text/javascript（HTML5），可以省略 type 属性。

6.2 外链式

外链式是指将 JavaScript 代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用 <script> 标签的src属性引入文件中。

<!-- 语法 -->
<script src="js/test.js"></script>

相比嵌入式，外链式优点：

嵌入式会导致 HTML 与 JavaScript 代码混合在一起，不利用修改和维护。
嵌入式会增加 HTML 文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。
外链式有利于分布式部署。网页中链接的 js、css、图片等静态文件可以部署到 CDN 服务器上，利用 CDN 的优势加快下载速度。

6.3 行内式

行内式是将 JavaScript 代码作为HTML标签的属性值使用。

<!-- 语法 -->
<a rel="nofollow" href="javascript:alert('Hello');">test</a>
<input type="button" onclick="alert('Hello');" value="test" />

目前网页开发推崇结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。

7 JavaScript 异步加载

在引入 JavaScript 代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。这样会导致页面出现白屏，或者打开页面样式错乱。

解决方案：

对于不需要提前执行的代码，将 <script> 标签放在 <body> 标签的底部，可以减少对整个页面下载的影响。

可用 HTML5 为 <script> 标签新增的两个可选属性：async 和 defer

<!-- 方式一：async 脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）-->
<script src="http://js.test/file.js" async></script>
<!-- 方式二：defer 当页面已完成加载后，才会执行脚本 -->
<script src="http://js.test/file.js" defer></script>

8 常用输出语句

8.1 alert() 警告框

alert(msg) 会在页面弹出一个提示框，内容是 msg。

<script>
    alert(msg);
</script>

8.2 console.log() 控制台输出

console.log(msg) 会在开发者工具控制台，输出内容 msg。

<script>
    console.log(msg);
</script>

8.3 document.write() 文档页面输出

document.write(msg) 会在网页当中输出内容 msg。

<script>
    document.write(msg);
</script>

9 JavaScript 注释

注释可便于代码的可读性，在程序解析时会被 JavaScript 解释器忽略。

9.1 单行注释

单行注释使用“//”。以“//”开始，到该行结束或 JavaScript 标记结束之前的内容都是注释。

<script>
  document.write('Hello, JavaScript'); // 输出一句话
</script>

9.2 多行注释

多行注释使用“/* */”。多行注释以“/*”开始，以“*/”结束，它们之间的内容为多行注释。

<script>
  /*
  alert('Hello, JavaScript');
  console.log('1234');
  */
</script>

多行注释中可以嵌套单行注释。
多行注释中不能再嵌套多行注释。

10 数据与运算

10.1 数学运算

JavaScript支持加（+）减（-）乘（*）除（/）四则运算。
小括号可以改变优先顺序。

alert(220 + 230);             // 输出结果：450
alert(2 * 3 + 25 / 5 - 1);    // 输出结果：10
alert(2 * (3 + 25) / 5 - 1);  // 输出结果：10.2

10.2 比较大小

比较的结果是 true 或 false，这是一种布尔类型的值，表示真和假。
如果比较结果为 true，表示成立；如果比较结果为 false，表示不成立。

alert(22 > 33);			// 输出结果：false
alert(22 < 33);			// 输出结果：true
alert(22 == 33);		// 输出结果：false
alert(22 == 22);		// 输出结果：true

10.3 字符串

当需要在警告框中输出“Hello”时，为了在代码中保存“Hello”这个数据，就需要用到字符串这种数据类型。
在 JavaScript 中，使用单引号或双引号包裹的数据是字符串。

alert('Hello');		// 单引号字符串
alert("Hello"); 	// 双引号字符串

使用“==”运算符可以比较两个字符串是否相同。

alert('22' == '22');	// 输出结果：true
alert('22' == '33');	// 输出结果：false

字符串与数字的拼接

“+”运算符的操作数只要有一个是字符串，就表示字符串拼接。
“+”运算符的操作数全部为数字时，表示相加。
字符串内数据不进行运算

alert('220' + '230');		            // 输出结果：220230
alert('220 + 230 = ' + 220 + 230);	    // 输出结果：220 + 230 = 220230
alert('220 + 230 = ' + (220 + 230));	// 输出结果：220 + 230 = 450

10.4 比较语句

if…else 语句用于需要根据比较的结果，来执行不同的代码。

if (22 > 33) {
  alert(true);	// 判断成立时执行此语句
} else {
  alert(false);	// 判断不成立时执行此语句
}

10.5 变量

当一个数据需要多次使用时，可以利用变量将数据保存起来。

概念：变量是保存数据的容器，每一个变量都有唯一的名称。

定义：利用var关键字定义。

var num1 = 22;	
var num2 = 33;	
alert(num1 + num2);
alert(num1 - num2);

var temp = num1;
num1 = num2;
num2 = temp;
alert('num1 = ' + num1);
alert('num2 = ' + num2);

10.6 函数

代码量增多，维护困难、条理不清、阅读困难。所以代码应该模块化、组件化，才能更好的维护。

常将一些常用的功能模块编写成函数，通过调用函数来完成任务。alert() 就是一个函数。
函数执行后可返回一个表示执行结果的值。
函数支持传入一个或多个参数，多个参数可使用逗号分隔。
除直接调用 JavaScript 内置的函数，用户还可自己定义函数，用于封装代码。

var name = prompt('请输入你的名字：','匿名');

// 定义函数
function sum(a, b) {
    var c = a + b; 
    return c;
}
// 调用函数，输出结果：33
alert(sum(11, 22));
// 调用函数，输出结果：55
alert(sum(22, 33));

10.7 对象

编写程序如同打游戏，在程序中划分对象，如同在游戏中划分角色。
一个对象的成员由属性和方法组成，如同角色有基本角色，有技能。
属性就是一些变量，可以用来保存角色的基本信息，比如攻击、防御、法强、魔抗等等。
方法就是一些函数，就是角色的技能。
当我们操作一个角色时，通过查看角色的属性来了解基本信息，通过角色的技能来进行游戏。

window 对象

window 对象是 JavaScript 与浏览器之间交互的主要接入点。
提供了用于 JavaScript 脚本控制浏览器的一些接口。
弹出警告框、输入框，或者更改网页文档内容等效果。

window.console;
window.document;
window.alert('test');
window.prompt('test');
window.console.log('test');
window.document.write('test');

document 对象

document 对象是 window 对象的属性之一，主要用于与网页文档进行交互。

<div id="test">Hello</div>
<script>
    var test = document.getElementById('test');
    alert(test.innerHTML);
</script>

String 对象

在代码中直接定义的字符串，就可以作为对象来使用。
String对象用于对字符串进行处理。

var str = 'apple';		     // 定义一个字符串
alert(str.length);		     // 获取字符串长度，输出结果：5
alert(str.toUpperCase());	 // 获取转换大写后的结果，输出结果：APPLE
alert('aa'.toUpperCase());	 // 直接调用字符串的成员方法，输出结果：AA

自定义对象

除了直接使用 JavaScript 中的内置对象，用户也可以自己创建一个自定义对象。

// 创建对象
var stu = {};          // 创建一个名称为stu的空对象
// 添加属性
stu.name = '小明';      // 为stu对象添加name属性
stu.gender = '男';      // 为stu对象添加gender属性
stu.age = 18;		   // 为stu对象添加age属性
// 访问属性
alert(stu.name);       // 访问stu对象的name属性，输出结果：小明
// 添加方法
stu.introduce = function () {
  return '我叫' + this.name + '，今年' + this.age + '岁。';
};
// 调用方法
alert(stu.introduce());	// 输出结果：我叫小明，今年18岁。

10.8 事件

事件是指可以被 JavaScript 侦测到的交互行为。

在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。

当发生事件以后，可以利用 JavaScript 编程来执行一些特定的代码，从而实现网页的交互效果。

<input id="btn" type="button" value="test">
<script>
    document.getElementById('btn').onclick = function() {
        alert(this.value);  // 获取按钮的value属性，输出结果：test
    };
</script>

11 练习作业

比较两个数字的大小
- 定义A，B两个数。
- 运用if条件语句，判断是两数之间是大于、小于还是等于的关系。
- 通过consloe.log()函数输出比较的结果。
编写一个将用户输入的信息输出到网页的 JavaScript 程序。
计算 1*2*3*4*……*100 的乘积。
页面中输出 1+2+3+4+……+100 算式，并计算结果。
输入钱数，点击按钮，输出由多少张100元，多少张50元，多少张20元，多少张10元，多少张5元，多少张1元。
改变网页背景色
- 编写网页，提供按钮。
- 为按钮添加点击事件。
- 根据函数传递的不同参数设置网页的背景色。
验证用户输入的密码
- 通过输入框获取用户输入的密码。
- 判断用户输入的密码。
- 若输入正确，则提示“密码输入正确！”，否则提示“密码输入错误！”
计算年龄小游戏
- 在输入窗口中输入出生年份，得到你的年龄

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除

函数

1 什么是 JavaScript

1 什么是 JavaScript

1 什么是 JavaScript

2 JavaScript 的由来

3 JavaScript 与 ECMAScript 的关系

4 浏览器内核

5 第一个 JavaScript 程序

6 JavaScript 引入方式

6.1 嵌入式

6.2 外链式

6.3 行内式

7 JavaScript 异步加载

8 常用输出语句

8.1 alert() 警告框

8.2 console.log() 控制台输出

8.3 document.write() 文档页面输出

9 JavaScript 注释

9.1 单行注释

9.2 多行注释

10 数据与运算

10.1 数学运算

10.2 比较大小

10.3 字符串

10.4 比较语句

10.5 变量

10.6 函数

10.7 对象

10.8 事件

11 练习作业

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐