JavaScript总结

最新推荐文章于 2023-10-24 22:05:07 发布

adorable_

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/adorable_/article/details/123852326

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、JavaScript简介

JavaScript（缩写：JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点如下：

JavaScript是一种轻量级解释性脚本语言（代码不进行预编译）。
JavaScript主要用来向HTML页面添加交互行为。
JavaScript可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改等

二、JavaScript用法

1、嵌入HTML

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html>

<head>
<script>
document.write("hello world");
</script>
</head>

<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。

2、外部的JavaScript脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>

</body>
</html>

你可以将脚本放置于 <head> 或者 <body>中，放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

3、Console窗口调试JavaScript代码

打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
在这里插入图片描述

4、Chrome snippets小脚本

我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
在这里插入图片描述
如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。
点击New snippet 后，会自动创建一个文件，你只需在右侧窗口输入以下代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。
保存后，右击文件名，选择 “Run” 执行代码：
在这里插入图片描述

5、事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。如点击事件：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

三、JavaScript变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
注：JavaScript 语句和 JavaScript 变量都对大小写敏感。

1、声明变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量，使用等号来为变量赋值：

var a;  //声明
var a = 3;  //初始化
a = 5;  //赋值

//注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

也可以使用let和const来定义，这三者的区别是：var与let涉及块级作用域，let 声明的变量只在 let 命令所在的代码块{}内有效；const 声明一个只读的常量，一旦声明，常量的值就不能改变，具体参考JavaScript let 和 const。一般用var即可，let更推荐。

2、数据类型

变量	解释	示例
String	字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来	var name = “John”; 字符访问:name[0] name[1]
Number	数字。JavaScript 只有一种数字类型。数字可以带小数点，也可以不带	let x1=34.00; let x2=34;
Boolean	布尔值（真 / 假）。 true/false 是 JS 里的特殊关键字，无需引号	let x=true; let y=false;
Array	数组，用于在单一引用中存储多个值的结构	let cars=[“Saab”,“Volvo”,“BMW”]; 元素引用方法：cars[0],cars[1]
Object	对象，JavaScript 里一切皆对象，一切皆可储存在变量里。对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔	let person={firstname:“John”, lastname:“Doe”, id:5566}; let newObject = document.querySelector(‘h1’); 对象属性访问:object.AttributesName object[’‘AttributesName’’]

3、算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
		x=y++	5	6
–	自减	x=–y	4	4
		x=y–	5	4

4、赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

5、比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

运算符	描述	比较	返回值
==	等于	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x===“5”	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==“5”	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

6、逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

运算符	描述	例子
`&&`	and	(x < 10 && y > 1) 为 true
`\|\|`	or (x==5
`!`	not	!(x==y) 为 true

四、基本语法

1、条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句：只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句：当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句：使用该语句来选择多个代码块之一来执行
switch 语句：使用该语句来选择多个代码块之一来执行

1.1 if 语句

if (condition)
{
    当条件为 true 时执行的代码
}

只有当指定条件为 true 时，该语句才会执行代码。

1.2 if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

1.3 if…else if…else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  	当条件 1 和 条件 2 都不为 true 时执行的代码
}

使用 if…else if…else 语句来选择多个代码块之一来执行。

1.4 switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

1.5 三目运算

let str = (condition)?value1:value2 
//condition成立则str=value1否则value2

2、循环语句

JavaScript 支持不同类型的循环：

for：循环代码块一定的次数
for/in：循环遍历对象的属性
while：当指定的条件为 true 时循环指定的代码块
do/while：同样当指定的条件为 true 时循环指定的代码块

2.1 for 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 ：（代码块）开始前执行

语句 2 ：定义运行循环（代码块）的条件

语句 3 ：在循环（代码块）已被执行之后执行

2.2 for/in 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

2.3 while 循环

while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

2.4 do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

3、函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3.1 调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

function myFunction(var1,var2)
{
	代码
}

3.2 带有返回值的函数

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

3.3 匿名函数

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

var x = function (a, b) {return a * b};
var z = x(4, 3);

4、异常处理

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。

常见的异常处理语句：

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

4.1 try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

4.2 throw 语句

throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
// 异常可以是 JavaScript 字符串、数字、逻辑值或对象

adorable_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript总结

文章目录一、JavaScript简介二、JavaScript用法1、嵌入HTML2、外部的JavaScript脚本3、Console窗口调试JavaScript代码4、Chrome snippets小脚本5、事件触发三、JavaScript变量1、声明变量2、数据类型3、算术运算符4、赋值运算符5、比较运算符6、逻辑运算符四、基本语法1、条件语句1.1 if 语句1.2 if...else 语句1.3 if...else if....else 语句1.4 switch 语句1.5 三目运算2、循环语句2.1
复制链接

扫一扫