JavaScript是web开发人员不可不学的一门脚本语言,也是互联网上最流行的脚本语言,它是一个轻量级,但功能强大的编程语言,这门语言可用于HTML和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它主要用于网页的行为。JavaScript是可插入HTML页面的编程代码,插入HTML页面后,可由所有的现代浏览器执行。
它是所有现代浏览器以及HTML5中的默认脚本语言。JavaScript对大小写是敏感的(JavaScript语句和JavaScript变量都对大小写敏感)。JavaScript使用Unicode字符集。Unicode覆盖了所有的字符,包含标点等字符。在JavaScript中,几乎所有的事物都是对象。这跟java类似,在java中一切也是对象。
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。Symbol是ES6引入了一种新的原始数据类型,表示独一无二的值。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
JavaScript变量均为对象。当您声明一个变量时,就创建了一个新的对象。当您声明新变量时,可以使用关键词"new"来声明其类型,也可以不用。
var carname= new String;//字符类型
var x= new Number;//数字类型
var y= new Boolean;//布尔类型
var cars= new Array;//数组类型
var person= new Object;//对象类型
JavaScript变量生命周期在它声明时初始化,局部变量在函数执行完毕后销毁,全局变量在页面关闭后销毁。未使用var声明的变量都是Window的属性,可以通过window.varname来进行访问。js中有变量提升的概念,即变量可以先使用后声明,但是已经初始化的变量不会进行变量提升。
一、事件HTML事件是发生在HTML元素上的事情,当在HTML页面中使用JavaScript时, JavaScript可以触发这些事件。HTML事件可以是浏览器行为,也可以是用户行为。
以下是HTML事件的实例:HTML页面完成加载、HTML input字段改变时、HTML按钮被点击。事件包括:点击事件,失去焦点,获得焦点,鼠标事件、键盘事件、改变事件、页面加载事件,表单提交事件等。
html各种事件参见:https://www.runoob.com/jsref/dom-obj-event.html 。
二、字符串
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号,如下所示:
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
可以使用索引位置来访问字符串中的每个字符:var character = carname[7]; 可以理解为字符串也是一个数组。可以使用内置属性length来计算字符串的长度:var sln = carname .length;
某些字符串中有特殊的字符如单引号,斜杠等,这时可以使用转义字符来进行特殊字符转义。转义字符\
可以用于转义撇号,换行,引号,等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符:
代码 | 输出 |
---|---|
\' |
单引号 |
\" |
双引号 |
\\ |
反斜杠 |
\n |
换行 |
\r |
回车 |
\t |
tab(制表符) |
\b |
退格符 |
\f |
换页符 |
字符串方法
更多方法实例可以参见:JavaScript String 对象。
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
三、JavaScript 运算符
1、算术运算符
y=5,下面的表格解释了这些算术运算符:
运算符 | 描述 | 例子 | 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 | 4 | 4 | 实例 » |
2、赋值运算符
给定 x=10 和 y=5,下面的表格解释了赋值运算符:
运算符 | 例子 | 等同于 | 运算结果 | 在线实例 |
---|---|---|---|---|
= | 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 | 实例 » |
注意:两个数字相加,返回数字相加的和,如果数字与字符串相加,返回数字与字符拼接而成的字符串。
3、比较运算符
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
x=5,下面的表格解释了比较运算符:
运算符 | 描述 | 比较 | 返回值 | 实例 |
---|---|---|---|---|
== | 等于 | x==8 | false | 实例 » |
=== | 绝对等于(值和类型均相等) | x==="5" | false | 实例 » |
!= | 不等于 | x!=8 | true | 实例 » |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) | x!=="5" | true | 实例 » |
> | 大于 | x>8 | false | 实例 » |
< | 小于 | x<8 | true | 实例 » |
>= | 大于或等于 | x>=8 | false | 实例 » |
<= | 小于或等于 | x<=8 | true | 实例 » |
4、逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3,下表解释了逻辑运算符:
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x5 || y5) 为 false |
! | not | !(x==y) 为 true |
5、条件运算符(三目运算符)
语法:variablename=(condition)?value1:value2 ,例如:voteable=(age<18)?"年龄太小":"年龄已达到"; 解释:如果变量age中的值小于18,则向变量voteable赋值 "年龄太小",否则赋值 "年龄已达到"。
四、JavaScript 数据类型
在JavaScript中有6种不同的数据类型:string、number、boolean、object、function、symbol。3种对象类型:Object、Date、Array。2个不包含任何值的数据类型:null、undefined。
1、typeof 操作符
NaN的数据类型是number、数组(Array)的数据类型是object、日期(Date)的数据类型为object、null的数据类型是object、未定义变量的数据类型为undefined。如果对象是JavaScript Array或JavaScript Date ,就无法通过typeof来判断他们的类型,因为都是返回object。你可以使用typeof操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
//在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
//用typeof检测null 返回是object。
2、null
在 JavaScript 中null表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。你可以设置为null来清空对象。
3、undefined
在JavaScript中, undefined是一个没有设置值的变量。typeof一个没有值的变量会返回undefined。任何变量都可以通过设置值为undefined清空,类型为undefined。
4、undefined和null的区别
null和undefined的值相等,但类型不等,如下所示
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
5、constructor属性
constructor属性返回所有JavaScript变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
你可以使用constructor属性来查看对象是否为数组 (包含字符串 "Array"):其他的也是一样,都可以这样判断,然后根据判断结果进行一些操作。
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
五、JavaScript正则表达式
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
语法:/正则表达式主体/修饰符(可选)
实例:
var patt = /runoob/i
实例解析:
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
其他更多参考:https://www.runoob.com/js/js-regexp.html 。
js表单验证参见: https://www.runoob.com/js/js-validation.html 。
六、JavaScript this 关键字
面向对象语言中this表示当前对象的一个引用。但在JavaScript中this不是固定不变的,它会随着执行环境的改变而改变。在方法中,this表示该方法所属的对象;如果单独使用,this表示全局对象;在函数中,this表示全局对象;在函数中,在严格模式下,this是未定义的(undefined);在事件中,this表示接收事件的元素;类似call()和apply()方法可以将this引用到任何对象。
七、JavaScript JSON格式数据
json是一个易于传输的数据格式,为键值对形式。中括号表示数组,大括号表示对象。
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
JSON字符串转换为JavaScript对象
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相关函数
函数 | 描述 |
---|---|
JSON.parse() | 用于将一个JSON字符串转换为JavaScript对象。 |
JSON.stringify() | 用于将JavaScript值转换为JSON字符串。 |
八、JavaScript 函数
使用function关键字来进行声明,可以有参也可以无参。在需要调用的地方进行调用即可。
九、JavaScript 操作dom
js可以更改dom元素,修改html内容,属性,样式。处理事件。
十、JavaScript 库
常用的js库为jQuery。
参考资料:
(1) https://www.runoob.com/js/js-tutorial.html (菜鸟教程)