一、初识JavaScript - JavaScript+jQuery 笔记

最新推荐文章于 2024-04-24 09:22:16 发布

小泽的熊先森

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量2.3k

点赞数 3

分类专栏： JavaScript程序文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/weixin_57002282/article/details/121029555

版权

JavaScript程序专栏收录该内容

17 篇文章 131 订阅

订阅专栏

前言

JavaScript 是一种脚本语言，被广泛应用于 Web 开发，可实现网页的交互，为用户提供流畅美观的浏览效果。

注：本笔记使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。

一、什么是 JavaScript

1、JavaScript 概述

JavaScript 是 Web 开发领域中的一种功能强大的编程语言，主要用于开发交互式的 Web 页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由 JavaScript 实现的。

对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为。结构是网页的骨架，样式是页面的外观，行为是网页的交互逻辑，三者之间的区别如下。

比较HTML、CSS 和 JavaScript
语言	作用	说明
HTML	结构	决定网页的结构和内容，相当于人的身体。
CSS	样式	决定网页呈现给用户的模样，相当于给人穿衣服、化妆。
JavaScript	行为	实现业务逻辑和页面控制，相当于人的各种动作。

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

浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在浏览器中的。

浏览器内核的分类：

渲染引擎（也称为排版引擎）：负责解析HTML与CSS，如Chrome浏览器的 Blink。
JavaScript引擎：是JavaScript语言的解释器，用于读取网页中的JavaScript 代码，对其处理后执行，如Chrome浏览器的V8引擎

2、JavaScript 诞生与发展

诞生：在1995年时，Netscape（网景）公司（现在的Mozilla）的布兰登·爱奇（ Brendan Eich）在网景导航者浏览器上首次设计出了JavaScript。Netscape 最初将这个脚本语言命名为LiveScript后来Netscape公司与Sun公司合作之后将其改名为JavaScript 。

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

JavaScript的用途：可以嵌入到网页中的编程语言，用来控制浏览器的行为。

案例应用如下：

利用前后端分离模式进行开发，基于 React 技术栈开发的移动 Web 项目
基于 Angular 构建的响应式移动 Web 项目
使用 WePY 框架并结合 ES 6 语法开发小程序电商项目
基于 Vue.js 全套技术栈开发出来的网页端后台管理系统

3、JavaScript 的特点

JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，能够快速完成程序的编写工作。
JavaScript可以跨平台，它不依赖操作系统，仅需要浏览器的支持。
JavaScript支持面向对象，可以使 JavaScript 开发变得快捷和高效，降低开发成本。

4、JavaScript 的组成

JavaScript 由 ECMAScript、DOM、BOM三部分组成。

ECMAScript：是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

DOM：文档对象模型。它是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作。

BOM：浏览器对象模型。它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作。

二、常用的开发工具

一款优秀的开发工具能够极大提高程序开发效率与体验。在Web前端开发中，常用的开发工具有很多。

1、Visual Studio Code

Visual Studio Code（简称 VS Code）是一款由微软公司开发的，功能十分强大的轻量级编辑器，其编辑器提供了丰富的快捷键，语法高亮等等特征，并支持多种语法和文件格式的编写。

2、Sublime Text

Sublime Text 是一款轻量级的代码编辑器，用户界面友好，支持拼写检查、书签、自定义按键绑定等功能，还可以通过灵活的的插件机制扩展编辑器的功能，它是一个跨平台的编辑器，支持Windows、Linux、macOS等操作系统。

3、HBuilder

HBuilder 是由数字天堂公司推出的一款支持 HTML5 的 Web 开发编辑器，在前端开发、移动开发方面提供了丰富的功能，还为基于 HTLM5 的移动端App 开发提供了良好的支持。

4、Adobe DreamWeaver

Adobe DreamWeaver 是一个集网页制作和网站管理于一身的可视化的网页编辑器，用于帮助网页设计师提高网页制作效率，简化了网页开发的难度和学习 HTML、CSS的门槛。但其缺点是可视化编辑功能会产生大量的冗余代码，而且不适合开发结构复杂、需要大量动态交互的网页。

5、WebStorm

WebStorm 是Jet Brains 公司推出的一款 Web 前端开发工具，JavaScript 、HTML5 开发是其强项，并支持许多流行的前端技术。

三、JavaScript 入门知识点

1、代码书写位置

行内式：

是将单行或少量的 JavaScript 代码写在HTML标签的事件属性中（也就是以on开头的属性，如onclick）。

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="点我" onclick="alert('行内式')">
  </body>
</html>

在上述代码中，第4行声明了网页的编码为“ UTF-8 ”，帮助浏览器正确识别网页的编码，声明编码后，确保文件本身的编码也为“ UTF-8 ”。写在 onclick 属性里的代码“ alert('行内式') ”。

使用行内式注意点：

注意单引号和双引号的使用。HTML中推荐使用双引号，JavaScript 推荐使用单引号。
行内式可读性较差，特别是在HTML中编辑大量JavaScript 代码时，不方便阅读。
在遇到多层引号嵌套时，非常容易混淆，导致代码出错。
一般情况下不推荐使用行内式，只有临时测试或特殊情况下才会使用。

内嵌式（嵌入式）：

使用<script>标签包裹 JavaScript 代码，<script>标签可以写在<head>或<body>标签中。通过内嵌式可以将多行 JavaScript 代码写在<script>标签中，内嵌式是学习 JavaScript 时最常使用的方式。

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">      //在HTML5中type属性可以忽略
      alert('内嵌式');   //JavaScript语句，结尾的分号“ ; ”，
                        //可以编写下一条代码。
    </script>
  </head>
  <body>
  </body>
</html>

在上述代码中，<script>标签中的 type 的属性值" text/javascript "，在HTML5中编写时 type 属性可以忽略不写。

外部式（外链式）：

将JavaScript代码写在一个单独的文件中，一般使用 “ js ”作为文件的扩展名，在HTML页面中使用<script> 标签进行引入，适合 JavaScript 代码量比较多的情况。注意外部式的<script>标签内不可以编写JavaScript代码。

示例代码：创建一个domo.html 文件，在文件中编写外部式 JavaScript 代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="test.js"></script>
  </head>
  <body>
  </body>
</html>

再创建一个 test.js 文件，在文件中编写 JavaScript 代码。

alert('外部式');

通过浏览器访问 domo.html 即可。

在编写JavaScript代码时，需要注意基本的语法规则：

JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性
JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写
如果一条语句结束后，换行书写下一条语句，后面的分号可以省略

2、注释

在 JavaScript 开发过程中，使用注释有利于增强代码的可读性。注释会在程序解析时被解释器忽略。

单行注释：以“ // ”开始，到该行结束或<script>标签结束之前的内容都是注释。

多行注释：以“ /* ”开始，以 “ */ ”结束。在多行注释中可以嵌套单行注释，但不能再嵌套多行注释。

在idea编辑器中：

单行注释快捷键：【Ctrl + /】双行注释快捷键：【Shift + Ctrl + /】

在VS Code编辑器中：

单行注释快捷键：【Ctrl + /】双行注释快捷键：【Shift + Alt + a】

3、输入与输出语句

JavaScript代码中提供了输入和输出语句，可以在网页中实现用户交互效果。

JavaScript常用的输入和输出语句
语句	说明
alert("msg")	浏览器弹出警告框
console.log("msg")	浏览器控制台输出信息
prompt("msg")	浏览器弹出输入框，用户可以输入内容

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <script>
      alert('这是一个警告框');
      console.log('在控制台输出信息');	
      prompt('这是一个输入框');
    </script> 
  </body>
</html>

通过浏览器测试，alert()的显示效果如下：

console.log()的输出结果需要在浏览器的控制台中查看。在浏览器中按 F12键（或在网页空白页面单机右键，在弹出的快捷菜单中选择“检查”），启动开发工具，切换到“ 控制台”(Console)选项卡中，效果如下：

prompt()的显示效果如下：

4、控制台的使用

浏览器的控制台中也可以直接输入JavaScript代码中来执行语句，这为初学者提供了很大的便利。

演示效果如图：

在图中，代码前的 “ > ” 图标表示该行代码使用户输入的，下一行的 “ < ” 图标表示控制台的输出结果，用于显示用户输入的表达式的值。

四、JavaScript 变量

1、什么是变量

变量是程序在内存中申请的一块用来存放数据的空间。

例如，程序在内存中保存字符串“小明”和“小张”，如下图所示。内存中的变量需要进行命名，才可以找到某一个变量，因此，图中的变量分别被命名为p1和p2.

数据储存

2、变量的使用

变量的使用，分为两步：声明变量和变量赋值，这两步可以分开进行，也可以同时进行。

声明变量：

在JavaScript 中变量通常使用 var 关键字进行声明。

var age;  // 声明一个名称为age的变量

当使用 var 关键字声明变量后，计算机会自动为变量分配内存空间。age 是自定义的变量名，可以通过变量名访问变量在内存中分配的空间。

变量赋值：

变量声明出来后，是没有值的，接下来就是赋值了。

var age;      // 声明变量
age = 10      // 为age变量赋值

在代码中，等号“ = ” 不是相等的意思，而是表示将等号右边的 10 赋值给左边的变量 age 。

变量初始化：

声明一个变量并直接为其赋值，这个过程就是变量的初始化。

var age = 18 // 声明变量的同时赋值

3、变量的语法细节

更新变量的值：

一个变量重新赋值后，它原有的值将会被覆盖，示例代码如下：

var myName = '小明';
console.log(myName);  // 输出结果：小明
myName = '小红';       // 更新变量的值
console.log(myName);   // 输出结果：小红

同时声明多个变量：

在 var 关键字后面可以同时声明多个变量，多个变量名之间用英文逗号 “ , ” 隔开，示例代码如下：

var myName, age, email;   // 同时声明多个变量，不赋值

var myName = '小明', age = 18,
    email = 'xiaoming@163.com';      // 同时声明多个变量，并赋值

声明变量的特殊情况：

只声明变量，但不赋值，则输出变量时，输出结果为 undefined 。
```
var age;
console.log(age);	// 输出结果：undefined
```

不声明变量，直接输出变量的值，则程序出错。
```
console.log(age);
```
执行代码后，在控制台中可以看到错误提示。如果前一行代码出错，则后面的代码将不会执行。
不声明变量，只进行赋值
```
age1 = 10;			    // 变量age1没有使用var进行声明
console.log(age1);	    // 输出结果：10
```
由于JavaScript 语言的特性，使得直接赋值为声明的变量，也可以正确输出变量的值。

4、变量的命名规范

在对变量进行命名时，需要遵循变量的命名规范，具体如下：

由字母、数字、下划线和美元符号（$）组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
要尽量做到 “ 见其名知其意 ”，如 age 表示年龄，num 表示数字等
建议遵循驼峰命名法，首字母小写，后面的单词首字母大写

5、保留关键字

在JavaScript 中，关键字分为 “ 保留关键字 ” 和 “ 未来保留关键字 ” 。保留关键字是指在 JavaScript 语言中被事先定义好赋予特殊含义的单词，不能作为变量名使用。

ECMAScript 6 中的保留关键字
break	case	catch	class	const
continue	debugger	default	delete	do
else	export	extends	finally	for
function	if	import	in	instanceof
new	return	super	switch	this
throw	try	typeof	var	void
while	with	yield	-	-

未来保留关键字
enum	implements	package	public	interface
private	static	let	protected	-

注：未来保留关键字是指ECMAScript 规范中预留的关键字，目前他们没有什么特殊功能，但是在未来可能会加上，所以建议不要当作变量名来使用，以免未来它们转换成关键字时出错。

总结

首先介绍了JavaScript的用途、发展状况，以及JavaScript的3大组成部分及其与ECMAScript 的关系，然后是常用开发工具的内容，接着介绍了代码书写位置、注释、输入输出语句及控制台的使用，最后针对 JavaScript 变量进行了介绍，如变量的本质、使用方式、语法规范及命名规范。

尾注

希望这篇文章对你有所帮助，记得转载、点赞、收藏，支持一下，小编将会持续更新哦

小泽的熊先森

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
一、初识JavaScript - JavaScript+jQuery 笔记

JavaScript 是一种脚本语言，被广泛应用于 Web 开发，可实现网页的交互，为用户提供流畅美观的浏览效果。注：本笔记使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。JavaScript 是 Web 开发领域中的一种功能强大的编程语言，主要用于开发交互式的 Web 页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由 JavaScript 实现的。
复制链接

扫一扫