这篇文章主要介绍“JavaScript基础之语法实例分析”,在日常操作中,相信很多人在JavaScript基础之语法实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript基础之语法实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
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 页面的 <body> 和 <head> 部分中。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
实例1:head中的script函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>head标签中script</title> <script> function myFunction() { document.getElementById("demo").innerHTML = "这是我的函数"; } </script> </head> <body> <h2>我的函数</h2> <p id="demo">一段话</p> <button type="button" onclick="myFunction()">这是函数</button> </body> </html>
实例2:body中的script函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>body中的script</title> </head> <body> <h2>我的函数</h2> <p id="demo">我的函数</p> <button type="button" onclick="myFunction()">点击一下</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "这是我的函数" } </script> </body> </html>
JavaScript也可以放在外部供调用,注意外部拓展名为.js。
实例3:外部调用JavaScript
外部调用.js
function myFunction() { document.getElementById('demo').innerHTML = "这是我的函数" }
调用外部script
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>调用外部script</title> </head> <body> <p id="demo">一段文字</p> <button type="button" onclick="myFunction()">尝试一下</button> <script src="外部脚本.js"></script> </body> </html>
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
实例1:aler()弹窗输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>alert输出</title> </head> <body> <h2>alert输出</h2> <script> window.alert(5 + 6) </script> </body> </html>
实例2:document.write()输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document.write输出</title> </head> <body> <h2>document.write输出</h2> <script> document.write(Date()); document.write("Hello,Web!"); </script> </body> </html>
实例3:写到HTMl文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>写到HTMl文档</title> </head> <body> <h2>写到HTMl文档</h2> <script> function myFunction() { document.write("函数输出"); } </script> <button onclick="myFunction()">点击这里</button> </body> </html>
实例4:使用 console.log() 写入到浏览器的控制台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用console.log()写入到浏览器的控制台</title> </head> <body> <h2>console.log()写入到浏览器的控制台</h2> <script > a = 5; b = 6; c = a + b; console.log(c) </script> </body> </html>
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对象通常称为对象属性。我们访问属性也是通过万能的" . "(大部分语言都是用的这个)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是网站</title> </head> <body> <h2>访问类属性</h2> <!--下面语句一定要在script之前--> <p id="demo"></p> <script> var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student" }; document.getElementById("demo").innerHTML = people["firstName"] + "." + people.lastName; </script> </body> </html>
两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
参数与返回值
在调用函数时,您可以向其传递值,这些值被称为参数,参数个数不限。
function myFunction(var1,var2)
{
代码
}
参数在调用时,应该严格按照其顺序传参,如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个JavaScript网站</title> </head> <body> <h2>函数参数传递问题</h2> <p>点击下面按钮调用</p> <button onclick="myFunc('Mike','18','Beijing')">点击这里</button> <script> function myFunc(name, age, address) { alert("My name is " + name + ", age is " + age + " and my home is in " + address); } </script> </body> </html>
JavaScript函数允许有返回值,返回关键字为return。当函数返回值后,函数将停止执行,在return后面的语句将不会被执行。
实例:计算两个数的乘积并返回结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript网站</title> </head> <body> <h2>计算两个数的值返回</h2> <p id="demo"></p> <script> function myFunc(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunc(3, 4); </script> </body> </html>
变量
JavaScript变量分为两种:
全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
局部变量:在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。
当我们向未声明的JavaScript变量分配值时,该变量将被自动作为window的一个属性。如下列语句:
name = "Mike";
将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。如:
var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明,可配置全局属性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义
描述
HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时, JavaScript可以触发这些事件。
HTML事件可以是浏览器行为,也可以是用户行为。以下是HTM 事件的实例:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常,当事件发生时,你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性,使用JavaScript代码来添加HTML元素。
单引号:<some-HTML-element some-event='JavaScript 代码'>
双引号:<some-HTML-element some-event="JavaScript 代码">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript事件</title> </head> <body> <h2>JavaScript事件处理两种方式</h2> <p id="demoOne"></p> <button onclick="getElementById('demoOne').innerHTML=Date()">点击查看时间1</button> <p id="demoTwo"></p> <button onclick="this.innerHTML=Date()">点击查看时间2</button> </body> </html>
JavaScript通常是多行代码,比较差常见的就是通过事件属性调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript事件</title> </head> <body> <h2>JavaScript事件之属性调用</h2> <p>点击执行<em>myFunc()</em>函数</p> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <script> function myFunc() { document.getElementById("one").innerHTML = Date(); } </script> </body> </html>
事件 | 描述 |
---|---|
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
该属性可以计算字符串的长度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字符串长度</title> </head> <body> <script> var txtOne = "Hello World!"; document.write("<p>" + txtOne.length + "</p>"); var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write("<p>" + txtTwo.length + "</p>"); </script> </body> </html>
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)因为类型不同,=== 结果为 false
4、!= 为 == 的非运算,!== 为 === 的非运算
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时才会执行代码。如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript网站</title> </head> <body> <h2>这是if语句</h2> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 20) { x = "Hello, Before 20:00"; } document.getElementById("one").innerHTML = x; } </script> </body> </html>
if...else语句
使用 if....else语句在条件为true时执行代码,在条件为false时执行其他代码。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript网站</title> </head> <body> <h2>这是if...else语句</h2> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <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> </body> </html>
多重if..else语句
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript网站</title> </head> <body> <h2>多重if...else语句</h2> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <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> </body> </html>
switch语句
使用switch语句来选择要执行的多个代码块之一。如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript网站</title> </head> <body> <h2>switch语句</h2> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <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> </body> </html>
JavaScript 支持不同类型的循环:
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
for循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript循环</title> </head> <body> <h2>点击按钮循环代码5次。</h2> <button onclick="myFunc()">点击这里</button> <p id="demo"></p> <script> function myFunc() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "该数字为 " + i + "<br>"; } document.getElementById("demo").innerHTML = x; } </script> </body> </html>
fo /in循环
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>点击下面的按钮,遍历对象person属性</p> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <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> </body> </html>
while循环
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>点击按钮,i小于5就会打印输出</p> <button onclick="myFunc()">点击这里</button> <p id="one">显示在这里</p> <script> function myFunc() { let x = "", i = 0; while (i < 5) { x = x + "这个数字为" + i + "<br>"; i++; } document.getElementById("one").innerHTML = x } </script> </body> </html>
do/while循环
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>点击按钮,打印小于5的数</p> <button onclick="myFunc()">点击这里</button> <p id="one"></p> <script> function myFunc() { let x = ""; let i = 0; do { x = x + "该数字为" + i + "<br>"; i++; } while (i < 5); document.getElementById("one").innerHTML=x; } </script> </body> </html>
for循环和while循环比较
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>这是funcOne</p> <button onclick="funcOne()">点击funcOne</button> <p id="one">funcOne在这里</p> <p>这是funcTwo</p> <button onclick="funcTwo()">点击funcTwo</button> <p id="two">funcTwo在这里</p> <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 + "<br>"; } 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 + "<br>"; } </script> </body> </html>
Break和Continue
break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>这是continue和break语句</p> <button onclick="funcOne()">点击funcOne</button> <p id="one">这是funcOne</p> <br> <br> <br> <br> <br> <br> <button onclick="funcTwo()">点击funcTwo</button> <p id="two">这是funcTwo</p> <script> function funcOne() { let x = ""; let i = 0; for (i = 0; i < 10; i++) { if (i < 5) { break; } x = x + "该数字为" + i + "<br>"; } 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 + "<br>"; } document.getElementById("two").innerHTML = x; } </script> </body> </html>
使用typeof操作符来检测变量的数据类型。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p id="one"></p> <script> document.getElementById("one").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof false + "<br>" + typeof [1, 2, 3, 4] + "<br>" + typeof {name: 'john', age: 34}; </script> </body> </html>
在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null表示空,也就是”什么也没有“。当使用typeof 检测时,返回object。对象可以使用undefined来清空。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>one:</p> <p id="one"></p> <p>two:</p> <p id="two"></p> <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> </body> </html>
constructor属性返回所有JavaScript变量的构造函数。可以使用constructor属性来查看对象是否为数组或者是否为日期 (包含字符串 "Date")等。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>constructor属性返回变量或者构造函数</p> <p id="one">HRER</p> <script> document.getElementById("one").innerHTML = "Hello".constructor + "<br>" + 3.14.constructor + "<br>" + false.constructor + "<br>" + [1, 2, 3].constructor + "<br>" + {name: "Hello", age: 18}.constructor + "<br>" + new Date().constructor + "<br>" + function () { }.constructor; </script> </body> </html>
JavaScript 变量可以转换为新变量或其他数据类型:
通过使用JavaScript函数
通过JavaScript自身自动转换
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>String()方法可以将数字转化为字符串</p> <p id="one">HERE</p> <p>toString()方法可以将数字转化为字符串</p> <p id="two">HERE</p> <script> let x = 123; document.getElementById("one").innerHTML = String(x) + "<br>" + String(123) + "<br>" + String(100 + 23); document.getElementById("two").innerHTML = x.toString() + "<br>" + (123).toString() + "<br>" + (100 + 123.2).toString(); </script> </body> </html>
Operator+可用于将变量转换为数字:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <P>typeof操作符返回变量或者表达式类型</P> <button onclick="myFuncOne()">CLICK HERE ONE</button> <p id="one">HERE</p> <button onclick="myFuncTwo()">CLICK HERE TWO</button> <p id="two">HERE</p> <script> function myFuncOne() { let y = "5"; let x = +y; document.getElementById("one").innerHTML = typeof y + "<br>" + x + "<br>" + typeof x; } function myFuncTwo() { let a = "Hello"; let b = +a; document.getElementById("two").innerHTML = typeof a + "<br>" + b + "<br>" + typeof b; } </script> </body> </html>
原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 |
---|---|---|---|
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()
用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>收索字符串,匹配位置</p> <button onclick="myFuncOne()">CLICK HERE ONE</button> <p id="one">HERE</p> <button onclick="myFuncTwo()">CLICK HERE TWO</button> <p id="two">HERE</p> <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> </body> </html>
replace()
用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>正则表达式replace()替换</p> <button onclick="myFuncOne()">CLICK ONE</button> <p id="one">Hello,Java</p> <button onclick="myFuncTwo()">CLICK TWO</button> <p id="two">Hello,Java</p> <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> </body> </html>
正则表达式模式
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
test()
用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <script> let obj = new RegExp("e"); let boolOne = obj.test("Hello,This is JavaScript"); let boolTwo = obj.test("This is JavaScript"); document.write(boolOne + "<br>" + boolTwo); </script> </body> </html>
exec()
用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <script> let obj = new RegExp(/e/); resOne = obj.exec("Hello,This is JavaScript"); resTwo = obj.exec("This is JavaScript"); /*没有就是null*/ document.write(resOne + "<br>" + resTwo); </script> </body> </html>
错误类型
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。
可能是语法错误,通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然,也可能是由于许多其他不可预知的因素。
try...catch
try语句允许我们定义在执行时进行错误测试的代码块,catch语句允许我们定义当try代码块发生错误时,所执行的代码块。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="button" value="查看消息" onclick="myFunc()"> <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> </body> </html>
throw
throw语句允许我们创建自定义错误。正确的技术术语是:创建或抛出异常(exception)。如果把throw与try和catch一起使用,那么您能够控制程序流,并生成自定义的错误消息。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>请输入一个5-10之间的数字</p> <label for="one"></label><input id="one" type="text"> <button type="button" onclick="myFunc()">CLICK</button> <p id="message">HERE</p> <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> </body> </html>
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:函数作为方法调用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>函数作为方法调用</p> <p id="one">HERE</p> <script> let myObject = { firstName: "Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } }; document.getElementById("one").innerHTML = myObject.fullName(); </script> </body> </html>
调用3:使用构造函数调用函数
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>该实例中,myFunc()是函数的构造函数</p> <p id="one"></p> <script> function myFunc(argOne, argTwo) { this.Name = argOne; this.Number = argTwo; } let x = new myFunc("Hello", 123); document.getElementById("one").innerHTML = x.Name; </script> </body> </html>
调用4:作为函数方法调动函数
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>作为函数方法调动函数</p> <p id="one">HERE</p> <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> </body> </html>
内嵌函数
实际上,在JavaScript中,所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数,嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>内嵌函数</p> <p id="one">HERE</p> <script> document.getElementById("one").innerHTML = add(); function add() { let counter = 0; function plus() { counter += 1; } plus(); return counter; } </script> </body> </html>
闭包
函数的自我调用称为bibao
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>局部计数器</p> <button type="button" onclick="myFunc()">计数器</button> <p id="one">HERE</p> <script> let add = (function () { let counter = 0; return function () { return counter += 1; } })(); function myFunc() { document.getElementById("one").innerHTML = add(); } </script> </body> </html>
到此,关于“JavaScript基础之语法实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。