本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于基础语法的相关问题,JavaScript是互联网上最流行的脚本语言,下面就一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、web前端】
JavaScript是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
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 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的和部分中。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
实例1:head中的script函数
head标签中script 我的函数
一段话
实例2:body中的script函数
body中的script 我的函数
我的函数
JavaScript也可以放在外部供调用,注意外部拓展名为.js。
实例3:外部调用JavaScript
外部调用.js
function myFunction() { document.getElementById('demo').innerHTML = "这是我的函数" }
调用外部script
调用外部script 一段文字
JavaScript 可以通过不同的方式来输出数据:
实例1:aler()弹窗输出
alert输出 alert输出
实例2:document.write()输出
document.write输出 document.write输出
实例3:写到HTMl文档
写到HTMl文档 写到HTMl文档
实例4:使用 console.log() 写入到浏览器的控制台
使用console.log()写入到浏览器的控制台 console.log()写入到浏览器的控制台
JavaScript 是一个脚本语言,它是一个轻量级,但功能强大的编程语言。
字面量
在编程语言中,一般固定值称为字面量。
注意,在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具有下列特点:
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对象通常称为对象属性。我们访问属性也是通过万能的" . "(大部分语言都是用的这个)。
这是网站 访问类属性
两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
参数与返回值
在调用函数时,您可以向其传递值,这些值被称为参数,参数个数不限。
function myFunction(var1,var2)
{
代码
}
参数在调用时,应该严格按照其顺序传参,如下所示:
这是一个JavaScript网站 函数参数传递问题
点击下面按钮调用
JavaScript函数允许有返回值,返回关键字为return。当函数返回值后,函数将停止执行,在return后面的语句将不会被执行。
实例:计算两个数的乘积并返回结果
JavaScript网站 计算两个数的值返回
变量
JavaScript变量分为两种:
当我们向未声明的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 事件的实例:
通常,当事件发生时,你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性,使用JavaScript代码来添加HTML元素。
JavaScript事件 JavaScript事件处理两种方式
JavaScript通常是多行代码,比较差常见的就是通过事件属性调用。
JavaScript事件 JavaScript事件之属性调用
点击执行myFunc()函数
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
后续会继续学习更多事件。
事件作用
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
可以使用多种方法来执行 JavaScript 事件代码:
字符串:一系列字符的集合。
var a = "abc"; var b = "Hello";
与Python类似,可以使用索引来访问字符串中的每个字符:
var c = b[1]; // e
length
该属性可以计算字符串的长度。
字符串长度
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 等基础类型,== 和 === 是有区别的
2、对于 Array,Object 等高级类型,== 和 === 是没有区别的
进行 "指针地址" 比较
3、基础类型与高级类型,== 和 === 是有区别的
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时才会执行代码。如:
JavaScript网站 这是if语句
if...else语句
使用 if....else语句在条件为true时执行代码,在条件为false时执行其他代码。
JavaScript网站 这是if...else语句
多重if..else语句
JavaScript网站 多重if...else语句
switch语句
使用switch语句来选择要执行的多个代码块之一。如:
JavaScript网站 switch语句
JavaScript 支持不同类型的循环:
for循环
JavaScript循环 点击按钮循环代码5次。
fo /in循环
Title 点击下面的按钮,遍历对象person属性
while循环
Title 点击按钮,i小于5就会打印输出
显示在这里
do/while循环
Title 点击按钮,打印小于5的数
for循环和while循环比较
Title 这是funcOne
funcOne在这里
这是funcTwo
funcTwo在这里
Break和Continue
break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
Title 这是continue和break语句
这是funcOne
这是funcTwo
使用typeof操作符来检测变量的数据类型。
Title
在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null表示空,也就是”什么也没有“。当使用typeof 检测时,返回object。对象可以使用undefined来清空。
Title one:
two:
constructor属性返回所有JavaScript变量的构造函数。可以使用constructor属性来查看对象是否为数组或者是否为日期 (包含字符串 "Date")等。
Title constructor属性返回变量或者构造函数
HRER
JavaScript 变量可以转换为新变量或其他数据类型:
Title String()方法可以将数字转化为字符串
HERE
toString()方法可以将数字转化为字符串
HERE
Operator+可用于将变量转换为数字:
Title typeof操作符返回变量或者表达式类型
HERE
HERE
原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 |
---|---|---|---|
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
replace()
用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
Title 正则表达式replace()替换
Hello,Java
Hello,Java
正则表达式模式
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个n的字符串。 |
n* | 匹配任何包含零个或多个n的字符串。 |
n? | 匹配任何包含零个或一个n的字符串。 |
test()
用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false。
Title
exec()
用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
Title
错误类型
try...catch
try语句允许我们定义在执行时进行错误测试的代码块,catch语句允许我们定义当try代码块发生错误时,所执行的代码块。
Title
throw
throw语句允许我们创建自定义错误。正确的技术术语是:创建或抛出异常(exception)。如果把throw与try和catch一起使用,那么您能够控制程序流,并生成自定义的错误消息。
Title 请输入一个5-10之间的数字
HERE
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
调用3:使用构造函数调用函数
Title 该实例中,myFunc()是函数的构造函数
调用4:作为函数方法调动函数
Title 作为函数方法调动函数
HERE
内嵌函数
实际上,在JavaScript中,所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数,嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量:
Title 内嵌函数
HERE
闭包
函数的自我调用称为bibao
Title 局部计数器
HERE
【相关推荐:javascript视频教程、web前端】
以上是归纳整理JavaScript基础之语法的详细内容。更多信息请关注PHP中文网其他相关文章!