从零认识JavaScript到精髓（持续更新中......）

最新推荐文章于 2024-04-28 12:21:38 发布

张清悠

最新推荐文章于 2024-04-28 12:21:38 发布

阅读量224

点赞数

分类专栏： ⭐️JavaScript⭐️ 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48193717/article/details/121113856

版权

⭐️JavaScript⭐️ 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

JavaScript入门及语法结构

JavaScript简介
第一个程序开发
变量
运算符
代码规范

1-1.1 JavaScript是个什么东西

JavaScript是web端的编程语言，最早是在html网页上使用，用来给HTML网页增加一些动态功能。后续发展过程中主要出现两个方向的JS开发：客户端JS、服务器端JS

1-1.2 为什么学习JavaScript

HTML（css3.0）网页显示效果更加炫丽，同时添加各种动态数据的验证和处理，提升用户使用的感知度。

布兰登·艾奇（Brendan Eich）

1-1.3 学习之前需要掌握的知识

HTML网页开发基本知识
CSS样式表基础知识
主要要用JS操作网页标签和标签的属性、标签的样式

1-2 JavaScript简介

javascript是一种基于对象和事件驱动的客户端脚本语言

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
是一种嵌入到html 中的脚本语言，由浏览器边解释，边解析/执行（即逐行解释）
Html、css、js的关系
- Html是结构 css是表现 js是行为

JavaScript是一种轻量级的编程语言，是一些简单指令的集合，可将JS代码插入到HTML网页标签中解释执行。

1-2.1 发展历史

重要的：标准化

各种HTML网页端的编程语言，互相不兼容、不相同——标准化【ECMA】——所有的客户端语言，使用同一的语法、结构、对象等等。

JavaScript诞生于1995年，起初它的目的是–处理以前由服务器端负责的一些表单验证，当时的软件环境，都是由服务器进行数据的验证等处理的。在那个年代走在最前端的网景(Netscape)公司决定着手开发一种客户端验证的语言。

起源：Nombas公司的C-- 嵌入式脚本语言，是之后嵌入网页中的脚本的理念的基础原型。
计划1995年2月发布LiveScript
布兰登·艾奇（Brendan Eich，1961年～），JavaScript之父主导，LiveScript完善并改名JavaScript
- 迎合当时的Java热潮
1997年，JavaScript1.1提交ECMA（欧洲计算机制造商协会），该协会负责将这种脚本语言标准化==> ECMAScript
- n ECMAScript主要规范语言的组成部分如下
  - 语法
  - 类型
  - 语句
  - 关键字
  - 保留字
  - 操作符
  - 对象
- ECMAScript标准==> JavaScript / Jscript 实现
- 通常开发中，ECMAScript和JavaScript通常表示一个意思
1998年6月：ECMAScript2.0发布
1999年12月：ECMAScript3.0发布，成为JS通行标准
2007年10月：ECMAScript4.0发布，改动较大，引起分歧。
2008年7月：分歧太大，中止ECMAScript4.0，改善后发布为ECMAScript3.1版本，并起名为Harmony(和谐)，之后不长时间ECMAScript3.1更名为ECMASciprt5
……
2015年6月17日，ECMAScript6正式发布，即ECMAScript2015.

1-2.2 组成部分

通常情况下JavaScript和ECMAScript被人用来表达相同的意思，但是需要明确的是，JavaScript是ECMAScript的实现，并且在实现的同时扩展了更多功能，一个完整的JavaScript通常由三部分组成

核心——ECMAScript
文档对象模型——DOM（文件File/ Document文件/文档 html网页 html文档）
- 关于DOM：文档对象模型，是W3C的标准，当网页被加载时，就会创建页面的文档对象模型。
浏览器对象模型——BOM
- 关于BOM：浏览器对象模型，描述了与浏览器进行交互的方法和接口。

1-2.3 JavaScript语言脚本的特点：

a) 脚本编写语言：它是以个小的代码块，在那里需要，就在那里写代码
b) 基于对象的语言：自己创建的对象，自己可以使用。
c) 简单性：就是没有太多的约束，实现的时候可以灵活。
d) 动态性：它可以直接对用户或客户输入做出响应，不需要经过Web服务程序。这里客户的反映是采用事件驱动的方式执行的。
e) 安全性：它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。
f) 跨平台性：比如淘宝：我们可以在win7系统上浏览，也可以在win8系统上浏览，也可以在win10系统上浏览，也可以在Mac IOS系统上浏览。（只需要编写一次代码，就可以实现多个平台上运行。）

Js的特点

动态改变页面内容

动态改变页面的外观

验证表单数据

响应事件

1-3 入门程序

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS01</title>
    <script type="text/javascript">
        // 在打开网页的时候弹出一个对话框。
        alert("Hello JS!");
    </script>
</head>
<body>
</body>
</html>

1-3.1 引入JS文件

通常JS代码会出现在三个地方

标签内嵌——使用特别少，根据具体需求而定
页面内嵌——使用比较普遍
外部JS文件——使用最多

代码案例：

标签内嵌：

<div style="width:100px;height:30px;background-color:#ccc;line-height: 30px;"
onclick="window.location='http://www.baidu.com'">百度</div>

页面内嵌：

<head>
    <meta charset="UTF-8">
    <title>JS01</title>
    <script type="text/javascript">
        // 在打开网页的时候弹出一个对话框。
        alert("Hello JS!");
    </script>
</head>

外部JS引入：

<!—引入一个HTML网页之外的JS文件 -->
<script src="js/demo.js"></script>

注意：
<script>标签必须以</script>结束
<script></script>标签中间不能出现其他代码

1-3.2

<script language="…" src="…" type="…"></script>

language：已废弃。原来用于指定代码使用的脚本语言，由于大多数浏览器忽略它，所以基本不用了。
src：表示要引入的外部JS文件的路径
type：表示脚本语言的类型（可以不写）type=”text/javascript”

代码案例——内嵌JS脚本：

代码案例——引入JS文件：

1-3.3 特殊字符处理

由于网页显示内容是通过HTML进行格式化的，所以通常会出现一些特殊的字符不能正确显示或者让网页本身产生一些问题。如<、>

通常这样的符号，会通过特殊的格式字符来进行替代

&lt;   ---  <
&gt;   ---  >
&nbsp; ---  空格符号


反斜杠\, 转义字符
\'  ----	单引号
\"  ----	双引号
\n  ----	换行符

代码案例：页面中输出标签

1-3.4 JavaScript四种输出方式

警告对话框
- alert(“你好”);
输入对话框
- prompt(“你好”);
在控制台中打印出信息
- console.log(“你好”);
在页面中写入
- document.write(“你好”);

1-4 语法

i. 区分大小写

这里同一个字母的大写和小写完全是不一样的

ii. 标识符

标识符的概念：指变量、函数、属性的名字，或者函数的参数

命名规则

换句话说，标识符就是给我们使用的内容起个名字

iii. 每条语句结尾都要加分号，作为当前代码段的结束

iv. 注释—主要对一行或者多行代码做简短说明来使用的

// 单行注释
/* */ 多行注释

v. 代码段要封闭，以英文;结尾

b) 关键字和保留字

JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。JavaScript关键字是不能作为变量名和函数名使用的，也就是说变量的名称或者函数的名称不能跟系统的关键字重名。使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入过程中出现编译错误。

关键字

Break Else new var
case finally return void
Catch For switch while
continue function this with
default If throw
Delete In try
Do instanceof typeof
保留字

abstract Enum int short
boolean Export interface static
Byte Extends long super
Char Final native synchronized
Class Float package throws
Const Goto private transient
debugger implements protected volatile
Double Import public

Break	Else	new	var
case	finally	return	void
Catch	For	switch	while
continue	function	this	with
default	If	throw
Delete	In	try
Do	instanceof	typeof

abstract	Enum	int	short
boolean	Export	interface	static
Byte	Extends	long	super
Char	Final	native	synchronized
Class	Float	package	throws
Const	Goto	private	transient
debugger	implements	protected	volatile
Double	Import	public

1-5 变量

1-5.1 概念

变量是存储数据值的容器，在程序运行过程中，其值是可以改变的

就是一个保存值的临时小空间。
命名规则遵循标识的命名规则。(只能以字母、下划线、$符号开头，不能以数字开头，不能以特殊字符开头；见名知意；不能是关键字和保留字)

1-5.2 变量的声明与赋值

在JavaScript中，使用变量之前需要先声明变量。

所有的JavaScript变量都由关键字var声明

语法：

var 变量名;

var 变量名 = 值;

i、什么是变量(代码示例)

/*
JavaScript{JS}中，临时保存数据的容器，称为[变量]
变量：临时保存数据的容器

声明变量/定义变量：使用var关键字定义一个变量
*/

// 1、声明变量，然后给变量赋值
  var y;
  y = "hello javascript!";
// 2、声明变量的同事，给变量中存放一个数据[赋值]
	var x = "hello world!";
// 在浏览器中，弹出窗口输出数据
	alert(x + "----" + y); // 这里的+号，表示把不同的部分连接/拼接到一起

ii、变量的命名规则(代码示例)

/*
变量：只能以字母、下划线、$符号开头。不能以数字开头，不能以特殊字符开头
*/
  var xStart = "字母";
  alert(xStart);
  var _start = "下划线";
  alert(_start);
  var $start = "$符号";
  alert($start);
  // var 3num = "数字";
  // var %num = "%号"

iii、同时声明多个变量名，变量名之间必须用英文逗号“,”隔开。

例如声明变量name、age、gender，分别表示姓名、年龄、性别，代码如下：

// 先声明三个变量，然后赋值
var name, age, gender;
name = '张三', age = 18, gender = '男';
alert('姓名：' + name + ';年龄：' + age + ';性别：' + gender);
// 声明三个变量的同时，对变量进行赋值
var name = '李四', age = 10, gender = '女';
alert('姓名：' + name + ';年龄：' + age + ';性别：' + gender);

iv、变量的值是如何改变的

// 声明一个变量 并赋值一个初始值
var num = 10;
alert('num'+ num);
num = 20;
alert('num'+ num);

1-6 数据类型

JavaScript提供了5种基本数据类型和1种复杂类型

ECMAScript表示不支持任何创建自定义类型的机制，所有值都是以下6种数据类型之一。

类型	描述
Number	数字类型，表示整数或者浮点数，另外还有一个特殊的值：NaN。
String	字符串类型（用单引号’和双引号"包裹起来）
Boolean	布尔类型，只有两个值,true或者false
undefined	未定义，使用var声明了但是没有初始化 var a;
null	空类型，只有一个值null var b = null;
Object	复杂类型

查看数据类型——typeof操作符

1、使用typeof关键字来检测变量的数据类型

2、通常检测结果如下

Number类型

包含两种数值，整数或者浮点数
特殊值：NaN （Not a Number）表示“不是一个数字”，主要出现在将字符串解析成数字出错的场合。
重点：为了支持不同的数值类型，定义了不同类型的数值表示方式
- 十进制：没有前导0的数值。
- 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
- 十六进制：有前缀0x或0X的数值。
- 二进制：有前缀0b或0B的数值。
**难点：**类型转换

通常网页上操作的过程中，会涉及到类型转换的问题，将字符串转换成数字的形式。

Number(value);将value转换成整数，在转换字符串时复杂并且不够合理，因此实际处理的时候更常用的是parseInt(value)或者parseFloat(value);

String类型

放在单引号或双引号之中
**难点：**类型转换

通常网页上操作的过程中，会涉及到类型转换的问题，将数据转换成字符串的形式。

String(value); value.toString(); 将value转换成字符串

Boolean类型

只有两个值true或者false
注意：其他类型的值，都和boolean类型有相互等价的值，可以通过Boolean(param)进行转换。同时也可以在条件中进行隐式转换，但是不推荐使用。

undefined类型

这个类型只有一个值undefined，使用从来没有声明过的变量，或者使用了var声明的但是没有初始化的变量时，就会出现这个值。

null类型

只有一个值null，表示一个空对象引用，typeof检测会出现object对象类型
注意：undefined是从null派生出来的，所以==判断会返回true结果

Object类型

各种值组成的集合（包括：狭义的对象（object）、数组（array）、函数（function））

总结

 以上就是今天带你走进从零认识JavaScript到精髓（一）,
 会持续更新中......
 原创不易，期待您的点赞关注与转发评论😜😜😜

张清悠

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
从零认识JavaScript到精髓（持续更新中......）

JavaScript入门及语法结构JavaScript简介第一个程序开发变量运算符代码规范1-1.1 JavaScript是个什么东西JavaScript是web端的编程语言，最早是在html网页上使用，用来给HTML网页增加一些动态功能。后续发展过程中主要出现两个方向的JS开发：客户端JS、服务器端JS1-1.2 为什么学习JavaScriptHTML（css3.0）网页显示效果更加炫丽，同时添加各种动态数据的验证和处理，提升用户使用的感知度。布兰登·艾奇（Brendan Eich
复制链接

扫一扫