【相关推荐:javascript视频教程、web前端】
(相关资料图)
介绍
JavaScript是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript特点
JavaScript 是一门脚本语言。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。JavaScript 很容易学习。JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。
年份 | 名称 | 描述 |
---|---|---|
1997 | ECMAScript 1 | 第一个版本 |
1998 | ECMAScript 2 | 版本变更 |
1999 | ECMAScript 3 | 添加正则表达式 添加 try/catch |
ECMAScript 4 | 没有发布 | |
2009 | ECMAScript 5 | 添加 "strict mode",严格模式 添加 JSON 支持 |
2011 | ECMAScript 5.1 | 版本变更 |
2015 | ECMAScript 6 | 添加类和模块 |
2016 | ECMAScript 7 | 增加指数运算符 (**) 增加 Array.prototype.includes |
用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的
和 部分中。通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
实例1:head中的script函数
head标签中script <script> function myFunction() { document.getElementById("demo").innerHTML = "这是我的函数"; } </script>我的函数
一段话
实例2:body中的script函数
body中的script 我的函数
我的函数
<script> function myFunction() { document.getElementById("demo").innerHTML = "这是我的函数" }</script>
JavaScript也可以放在外部供调用,注意外部拓展名为.js。
实例3:外部调用JavaScript
外部调用.js
function myFunction() { document.getElementById("demo").innerHTML = "这是我的函数"}
调用外部script
调用外部script 一段文字
<script src="外部脚本.js"></script>
输出
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert()弹出警告框。使用 document.write()方法将内容写到 HTML 文档中。使用 innerHTML写入到 HTML 元素。使用 console.log()写入到浏览器的控制台。实例1:aler()弹窗输出
alert输出 alert输出
<script> window.alert(5 + 6)</script>
实例2:document.write()输出
document.write输出 document.write输出
<script> document.write(Date()); document.write("Hello,Web!");</script>
实例3:写到HTMl文档
写到HTMl文档 写到HTMl文档
<script> function myFunction() { document.write("函数输出"); }</script>
实例4:使用 console.log() 写入到浏览器的控制台
使用console.log()写入到浏览器的控制台 console.log()写入到浏览器的控制台
<script > a = 5; b = 6; c = a + b; console.log(c)</script>
语法介绍
JavaScript 是一个脚本语言,它是一个轻量级,但功能强大的编程语言。
字面量
在编程语言中,一般固定值称为字面量。
数字(Number)字面量:可以是整数或者是小数,或者是科学计数(e)。如3.14,5.88等。字符串(String)字面量:”可以使用单引号或双引号。如"Hello","Web"等表达式字面量:用于计算的固定值。3 + 2.2,3.14 * 2等。数组(Array:字面量:定义一个数组。如[1,2,3,4,5,6]。对象(Object:字面量:定义一个对象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。函数(Function)字面量:定义一个函数。如function myFunction(a, b) { return a * b;}。注意,在JavaScript中,语句需要加结束符“;”。
JavaScrip变量
在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量, 使用等号来为变量赋值,变量之间可以相互操作:
var y = false // 布尔值var length = 16; // 数字var points = x * 10; // 数字计算var lastName = "Johnson"; // 字符串var cars = ["Saab", "Volvo", "BMW"]; // 数组var person = {firstName:"John", lastName:"Doe"}; // 对象字典
JavaScript函数
为了能够重复引用相同的功能,减少代码的书写和维护的方便,JavaScript提供函数功能,由关键字function引导:
function myFunc(a, b) { return a + b; // 返回a+b结果}
JavaScript特点
相对其它语言,JavaScript具有下列特点:
JavaScript对大小写敏感。JavaScript使用Unicode字符集。JavaScript推荐使用驼峰命名法定义变量,命名避免关键字。JavaScript属于弱类型语言,定义变量都是var关键字。abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
JavaScript注释(与Java相同)
// 这是代码:单句注释,在编辑器一般是ctrl + L键。
/* 这是代码 */:多行注释,在编辑器一般是ctrl + shift + L键。
语句
JavaScript语句向浏览器发出的命令,告诉浏览器该做什么。下面的JavaScript语句向id="demo"的 HTML元素输出文本"Hello World!" :
document.getElementById("demo").innerHTML = "Hello World!";
与Python不同的是,JavaScript代码块都是在大括号中的,这点像极了Java。
Java标识符
语句 | 描述 |
---|---|
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
大部分语言能够自动补全空格,我们建议在运算符两边加上空格,这样清晰美观,但是要注意在HTML中空格的是要留意用法的,切勿混谈。在JavaScript中,下面两句话是一样的:
var a = 10;var b=10;
与Python相似,JavaScript也是脚本语言,属于解释型。
对象
定义对象
任何事物都是对象,具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。
在JavaScript中,对象就是是属性变量的容器,类似Python中的字典,Java中的哈希映射,其中定义了对象的属性。
var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student"};
以上就是对象定义,当然你也可以写作一行,我这样是为了美观,以后也强烈大家这样写。
访问对象属性
可以说 "JavaScript 对象是变量的容器"。但是,我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为key : value(键与值以冒号分割),键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "(大部分语言都是用的这个)。
这是网站 访问类属性
<script> var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student" }; document.getElementById("demo").innerHTML = people["firstName"] + "." + people.lastName;</script>
两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
参数与返回值
在调用函数时,您可以向其传递值,这些值被称为参数,参数个数不限。
参数在调用时,应该严格按照其顺序传参,如下所示:
这是一个JavaScript网站 函数参数传递问题
点击下面按钮调用
<script> function myFunc(name, age, address) { alert("My name is " + name + ", age is " + age + " and my home is in " + address); }</script>
JavaScript函数允许有返回值,返回关键字为return。当函数返回值后,函数将停止执行,在return后面的语句将不会被执行。
实例:计算两个数的乘积并返回结果
JavaScript网站 计算两个数的值返回
<script> function myFunc(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunc(3, 4);</script>
变量
JavaScript变量分为两种:
全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。局部变量:在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。当我们向未声明的JavaScript变量分配值时,该变量将被自动作为window的一个属性。如下列语句:
name = "Mike";
将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。如:
var var1 = 1; // 不可配置全局属性var2 = 2; // 没有使用 var 声明,可配置全局属性console.log(this.var1); // 1console.log(window.var1); // 1delete var1; // false 无法删除console.log(var1); //1delete var2; console.log(delete var2); // trueconsole.log(var2); // 已经删除 报错变量未定义
事件
描述
HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时, JavaScript可以触发这些事件。
HTML事件可以是浏览器行为,也可以是用户行为。以下是HTM 事件的实例:
HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击通常,当事件发生时,你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性,使用JavaScript代码来添加HTML元素。
单引号:<some-HTML-elementsome-event="JavaScript 代码">双引号:<some-HTML-elementsome-event="JavaScript 代码">JavaScript事件 JavaScript事件处理两种方式
JavaScript通常是多行代码,比较差常见的就是通过事件属性调用。
JavaScript事件 JavaScript事件之属性调用
点击执行myFunc()函数
<script> function myFunc() { document.getElementById("one").innerHTML = Date(); }</script>
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
后续会继续学习更多事件。
事件作用
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
页面加载时触发事件页面关闭时触发事件用户点击按钮执行动作验证用户输入内容的合法性可以使用多种方法来执行 JavaScript 事件代码:
HTML 事件属性可以直接执行 JavaScript 代码HTML 事件属性可以调用 JavaScript 函数你可以为 HTML 元素指定自己的事件处理程序你可以阻止事件的发生字符串
字符串:一系列字符的集合。
var a = "abc";var b = "Hello";
与Python类似,可以使用索引来访问字符串中的每个字符:
var c = b[1]; // e
length
该属性可以计算字符串的长度。
字符串长度 <script> var txtOne = "Hello World!"; document.write("" + txtOne.length + "
"); var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write("" + txtTwo.length + "
");</script>
JavaScript也有一些特殊字符,例如当我们要打印引号时,需要加上“\”来进行转义,否则编译器无法解析。
代码 | 输出 |
---|---|
\" | 单引号 |
\" | 双引号 |
\\ | 反斜杠 |
\n | 换行 |
\r | 回车 |
\t | tab(制表符) |
\b | 退格符 |
\f | 换页符 |
字符串作为对象
通常,JavaScript字符串是原始值,可以使用字符创建: var firstName = "Mike",但我们也可以使用new关键字将字符串定义为一个对象:var firstName = new String("Mike"),这点与Java类似。
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
==与===区别
1、对于 string、number 等基础类型,== 和 === 是有区别的
a)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同,其结果就是不等。 b)同类型比较,直接进行 "值" 比较,两者结果一样。2、对于 Array,Object 等高级类型,== 和 === 是没有区别的
进行 "指针地址" 比较
3、基础类型与高级类型,== 和 === 是有区别的
a)对于 ==,将高级转化为基础类型,进行 "值" 比较 b)因为类型不同,=== 结果为 false4、!= 为 == 的非运算,!== 为 === 的非运算
var num=1;var str="1";var test=1;test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值也相同, 非运算肯定是false num == str //true 把str转换为数字,检查其是否相等。 num != str //false == 的 非运算 num === str //false 类型不同,直接返回false num !== str //true num 与 str类型不同 意味着其两者不等 非运算自然是true啦
运算符
运算符 | 描述 | 例子 | 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 |
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | 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 |
运算符 | 描述 | 比较 | 返回值 |
---|---|---|---|
== | 等于 | 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 |
<= | 小于或等于 | x<=8 | true |
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。如:
variablename=(condition)?value1:value2
条件判断
在 JavaScript 中,我们可使用以下条件语句:
if 语句- 只有当指定条件为 true 时,使用该语句来执行代码if...else 语句- 当条件为 true 时执行代码,当条件为 false 时执行其他代码if...else if....else 语句- 使用该语句来选择多个代码块之一来执行switch 语句- 使用该语句来选择多个代码块之一来执行if语句
条件为true时才会执行代码。如:
JavaScript网站 这是if语句
<script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 20) { x = "Hello, Before 20:00"; } document.getElementById("one").innerHTML = x; }</script>
if...else语句
使用 if....else语句在条件为true时执行代码,在条件为false时执行其他代码。
JavaScript网站 这是if...else语句
<script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 20) { x = "Hello, Before 20:00"; }else { x = "Hello, After 20:00"; } document.getElementById("one").innerHTML = x; }</script>
多重if..else语句
JavaScript网站 多重if...else语句
<script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 12) { x = "上午好"; } else if (time < 14) { x = "中午好"; } else { x = "下午好"; } document.getElementById("one").innerHTML = x; }</script>
switch语句
使用switch语句来选择要执行的多个代码块之一。如:
JavaScript网站 switch语句
<script> function myFunc() { var x = ""; var time = new Date().getMonth(); switch (time) { case 0: x = "January"; break; case 1: x = "February"; break; case 2: x = "March"; break; case 3: x = "April"; break; case 4: x = "May"; break; case 5: x = "Jane"; break; case 6: x = "July"; break; case 7: x = "August"; break; case 8: x = "September"; break; case 9: x = "October"; break; case 10: x = "November"; break; case 11: x = "December"; break; default: x = "ERROR"; } document.getElementById("one").innerHTML = x; }</script>
循环
JavaScript 支持不同类型的循环:
for- 循环代码块一定的次数for/in- 循环遍历对象的属性while- 当指定的条件为 true 时循环指定的代码块do/while- 同样当指定的条件为 true 时循环指定的代码块for循环
JavaScript循环 点击按钮循环代码5次。
<script> function myFunc() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "该数字为 " + i + "
"; } document.getElementById("demo").innerHTML = x; }</script>
fo /in循环
Title 点击下面的按钮,遍历对象person属性
<script> function myFunc() { let x; let text = ""; const person = { firstName: "Bill", lastName: "Gates", age: 56 }; for (x in person) { text = text + " " + person[x]; } document.getElementById("one").innerHTML = text; }</script>
while循环
Title 点击按钮,i小于5就会打印输出
显示在这里
<script> function myFunc() { let x = "", i = 0; while (i < 5) { x = x + "这个数字为" + i + "
"; i++; } document.getElementById("one").innerHTML = x }</script>
do/while循环
Title 点击按钮,打印小于5的数
<script> function myFunc() { let x = ""; let i = 0; do { x = x + "该数字为" + i + "
"; i++; } while (i < 5); document.getElementById("one").innerHTML=x; }</script>
for循环和while循环比较
Title 这是funcOne
funcOne在这里
这是funcTwo
funcTwo在这里
<script> function funcOne() { numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let i = 0; let addRes = 0; while (numbers[i]) { addRes += numbers[i]; i++; } document.getElementById("one").innerHTML = addRes + "
"; } function funcTwo() { numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let i = 0; let mulRes = 1; for (; numbers[i];) { mulRes *= numbers[i]; i++; } document.getElementById("two").innerHTML = mulRes + "
"; }</script>
Break和Continue
break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
Title 这是continue和break语句
这是funcOne
这是funcTwo
<script> function funcOne() { let x = ""; let i = 0; for (i = 0; i < 10; i++) { if (i < 5) { break; } x = x + "该数字为" + i + "
"; } document.getElementById("one").innerHTML = x; } function funcTwo() { let x = ""; let i = 0; for (i = 0; i < 10; i++) { if (i === 8) { continue; } x = x + "该数字为" + i + "
"; } document.getElementById("two").innerHTML = x; }</script>
typeof、null和undefined
使用typeof操作符来检测变量的数据类型。
Title <script> document.getElementById("one").innerHTML = typeof "john" + "
" + typeof 3.14 + "
" + typeof false + "
" + typeof [1, 2, 3, 4] + "
" + typeof {name: "john", age: 34};</script>
在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null表示空,也就是”什么也没有“。当使用typeof 检测时,返回object。对象可以使用undefined来清空。
Title one:
two:
<script> var person = {firstName: "Bill", lastName: "Gates", age: 50}; var person = null; document.getElementById("one").innerHTML = typeof person; person = undefined document.getElementById("two").innerHTML = typeof person;</script>
constructor属性
constructor属性返回所有JavaScript变量的构造函数。可以使用constructor属性来查看对象是否为数组或者是否为日期 (包含字符串 "Date")等。
Title constructor属性返回变量或者构造函数
HRER
<script> document.getElementById("one").innerHTML = "Hello".constructor + "
" + 3.14.constructor + "
" + false.constructor + "
" + [1, 2, 3].constructor + "
" + {name: "Hello", age: 18}.constructor + "
" + new Date().constructor + "
" + function () { }.constructor;</script>
类型转换
JavaScript 变量可以转换为新变量或其他数据类型:
通过使用JavaScript函数通过JavaScript自身自动转换Title String()方法可以将数字转化为字符串
HERE
toString()方法可以将数字转化为字符串
HERE
<script> let x = 123; document.getElementById("one").innerHTML = String(x) + "
" + String(123) + "
" + String(100 + 23); document.getElementById("two").innerHTML = x.toString() + "
" + (123).toString() + "
" + (100 + 123.2).toString();</script>
一元运算符+
Operator+可用于将变量转换为数字:
Title typeof操作符返回变量或者表达式类型
HERE
HERE
<script> function myFuncOne() { let y = "5"; let x = +y; document.getElementById("one").innerHTML = typeof y + "
" + x + "
" + typeof x; } function myFuncTwo() { let a = "Hello"; let b = +a; document.getElementById("two").innerHTML = typeof a + "
" + b + "
" + typeof b; }</script>
原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 |
---|---|---|---|
false | 0 | "false" | false |
true | 1 | "true" | true |
0 | 0 | "0" | false |
1 | 1 | "1" | true |
"0" | 0 | "0" | true |
"000" | 0 | "000" | true |
"1" | 1 | "1" | true |
NaN | NaN | "NaN" | false |
Infinity | Infinity | "Infinity" | true |
-Infinity | -Infinity | "-Infinity" | true |
"" | 0 | "" | false |
"20" | 20 | "20" | true |
"Runoob" | NaN | "Runoob" | true |
[ ] | 0 | "" | true |
[20] | 20 | "20" | true |
[10,20] | NaN | "10,20" | true |
["Runoob"] | NaN | "Runoob" | true |
["Runoob","Google"] | NaN | "Runoob,Google" | true |
function(){} | NaN | "function(){}" | true |
{ } | NaN | "[object Object]" | true |
null | 0 | "null" | false |
undefined | NaN | "undefined" | false |
正则表达式
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
search()
用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
Title 收索字符串,匹配位置
HERE
HERE
<script> function myFuncOne() { let str = "Hello,World!"; document.getElementById("one").innerHTML = str.search(/World/i); } function myFuncTwo() { let str = "Welcome to China!"; document.getElementById("two").innerHTML = str.search("China"); }</script>
replace()
用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
Title 正则表达式replace()替换
Hello,Java
Hello,Java
<script> function myFuncOne() { let str = document.getElementById("one").innerHTML; document.getElementById("one").innerHTML = str.replace(/Java/i, "Python"); } function myFuncTwo() { let str = document.getElementById("two").innerHTML; document.getElementById("two").innerHTML = str.replace("Java","JavaScipt"); }</script>
正则表达式模式
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n的字符串。 |
n* | 匹配任何包含零个或多个 n的字符串。 |
n? | 匹配任何包含零个或一个 n的字符串。 |
test()
用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false。
Title <script> let obj = new RegExp("e"); let boolOne = obj.test("Hello,This is JavaScript"); let boolTwo = obj.test("This is JavaScript"); document.write(boolOne + "
" + boolTwo);</script>
exec()
用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
Title <script> let obj = new RegExp(/e/); resOne = obj.exec("Hello,This is JavaScript"); resTwo = obj.exec("This is JavaScript"); /*没有就是null*/ document.write(resOne + "
" + resTwo);</script>
错误异常
错误类型
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。可能是语法错误,通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。可能是由于来自服务器或用户的错误输出而导致的错误。当然,也可能是由于许多其他不可预知的因素。try...catch
try语句允许我们定义在执行时进行错误测试的代码块,catch语句允许我们定义当try代码块发生错误时,所执行的代码块。
Title <script> let txt = ""; function myFunc() { try { alert111("Hello,World!") } catch (err) { txt = "这里有一个错误\n\n"; txt += "错误描述:" + err.message + "\n\n"; txt += "点击确定继续\n\n"; alert(txt) } }</script>
throw
throw语句允许我们创建自定义错误。正确的技术术语是:创建或抛出异常(exception)。如果把throw与try和catch一起使用,那么您能够控制程序流,并生成自定义的错误消息。
Title 请输入一个5-10之间的数字
HERE
<script> function myFunc() { let message; let x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("one").value; try { if (x === "") throw "值为空"; if (isNaN(x)) throw "不是数字"; x = Number(x); if (x < 5) throw "太小"; if (x > 10) throw "太大"; } catch (error) { message.innerHTML = "错误" + error; } }</script>
函数调用
JavaScript 函数有 4 种调用方式,每种方式的不同在于this的初始化。一般而言,在Javascript中,this指向函数执行时的当前对象。
调用1:作为一个函数调用
one
function myFunc(a, b) { return a * b;}myFunc(1, 2);
two
function myFunc(a, b) { return a * b;}window.myFunc(1, 2);
调用2:函数作为方法调用
Title 函数作为方法调用
HERE
<script> let myObject = { firstName: "Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } }; document.getElementById("one").innerHTML = myObject.fullName();</script>
调用3:使用构造函数调用函数
Title 该实例中,myFunc()是函数的构造函数
<script> function myFunc(argOne, argTwo) { this.Name = argOne; this.Number = argTwo; } let x = new myFunc("Hello", 123); document.getElementById("one").innerHTML = x.Name;</script>
调用4:作为函数方法调动函数
Title 作为函数方法调动函数
HERE
<script> let obj, array; function myFunc(a, b) { return a * b; } array = [5, 6]; obj = myFunc.apply(obj, array); document.getElementById("one").innerHTML = obj;</script>
闭包
内嵌函数
实际上,在JavaScript中,所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数,嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量:
Title 内嵌函数
HERE
<script> document.getElementById("one").innerHTML = add(); function add() { let counter = 0; function plus() { counter += 1; } plus(); return counter; }</script>
闭包
函数的自我调用称为bibao
Title 局部计数器
HERE
<script> let add = (function () { let counter = 0; return function () { return counter += 1; } })(); function myFunc() { document.getElementById("one").innerHTML = add(); }</script>
【相关推荐:javascript视频教程、web前端】
以上就是归纳整理JavaScript基础之语法的详细内容,更多请关注php中文网其它相关文章!