JavaScript

最新推荐文章于 2024-07-20 10:36:53 发布

初学小白Lu

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量213

点赞数

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_43956958/article/details/132563185

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript 是脚本语言，是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

用途

直接写入 HTML 输出流
对事件的反应
改变HTML内容
改变HTML图像
改变HTML样式
验证输入

用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
外部 JavaScript 文件的文件扩展名是 .js。
使用外部文件，在 <script> 标签的 “src” 属性中设置该 .js 文件：<script src="myScript.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = "测试 JavaScript";
    </script>
</body>
</html>

JavaScript 没有任何打印或者输出的函数

显示数据

弹出警告框window.alert()

<!DOCTYPE html>
<html>
	<body>
		<h1>测试标题</h1>
		<p>测试段落。</p>
		<script>window.alert(警告);</script>
	</body>
</html>

操作 HTML 元素

从 JavaScript 访问某个 HTML 元素，使用 document.getElementById(id) 方法。innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

向HTML 文档写入内容

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

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

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

输出到控制台

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

关键字

关键词	描述
break	终止switch或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

注释：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。

字面量.

书写混合值最重要的规则是：写数值有无小数点均可：15.90，10011。
字符串是文本，由双引号或单引号包围：“Bill Gates”，‘Bill Gates’ 。

变量

在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。

var x;
x = 7;

声明（创建）变量

在 JavaScript 中创建变量被称为“声明”变量。通过 var 关键词来声明 JavaScript 变量：

var carName;

声明之后，变量是没有值的。（技术上，它的值是 undefined。）
赋值给变量，使用等号：carName = "porsche";

运算符

算数运算符

+ - * / 来计算值：(7 + 8) * 10

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

注释：JS 算数这一章对算数运算符进行了完整描述。

赋值运算符

使用赋值运算符（=）向变量赋值：

var x, y;
var x = 7;
var y = 8;

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

==比较：它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用比较，始终坚持使用=比较。

NaN这个特殊的Number与所有其他值都不相等，包括它自己：NaN === NaN; // false isNaN(NaN); // true

比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

注释：JS 比较这一章中完整描述了逻辑运算符。

JavaScript 位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

JavaScript 使用 32 位有符号数。因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

注释

双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略，不会被执行：

var x = 7;   // 会执行
// var x = 8;   不会执行

标识符

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
首字符必须是字母、下划线（-）或美元符号（$）。

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值

const变量

JavaScript const 变量必须在声明时赋值

数据类型

Number

JavaScript不区分整数和浮点数，统一用Number表示。

var length = 7;                             // 数字
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
0xff00 //十六进制

字符串

字符串是以单引号’或双引号"括起来的任意文本

var lastName = "Gates";                      // 字符串

布尔值

true、false两种值

数组

数组是一组按顺序排列的集合，集合的每个值称为元素。可以包括任意数据类型。数组用[]表示，元素之间用,分隔。
例如：[1, 2, 3.14, ‘Hello’, null, true];

另一种创建数组的方法是通过Array()函数实现：new Array(1, 2, 3); // 创建了数组[1, 2, 3]

数组的元素可以通过索引来访问。请注意，索引的起始值为0：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined

对象

对象是一组由键-值组成的无序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

对象的键都是字符串类型，值可以是任意数据类型。其中每个键又称为对象的属性。
要获取一个对象的属性，我们用对象变量.属性名的方式：

person.name; // 'Bob'
person.zipcode; // null

null和undefined

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

var person;                  // 值是 undefined，类型是 undefined。

undefined仅仅在判断函数参数是否传递的情况下有用。

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

person = undefined;          // 值是 undefined，类型是 undefined。

null表示一个“空”的值，它和0以及空字符串’‘不同，0是一个数值，’'表示长度为0的字符串，而null表示“空”。

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：
typeof 运算符返回变量或表达式的类型：

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"