javascript基础总结(一)
JavaScript(以下简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
JavaScript与Java的关系
屁关系没有
在线运行/测试
方法有多种,但集中说两种
第一种是浏览器中的开发选项中,按F12可打开,点击【控制台】即可运行,但只能输入一行代码,调试用
第二种是在线工具,推荐JS在线运行工具,Javascript 代码在线运行 (sojson.com),可供上手使用。
开始写第一个JS程序:
var a = "helloworld";
alert(a);
在在线工具运行后,弹出helloworld的弹窗
HTML引入javascript
一般在</body>
标签前引入javascript,例如:
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<script src="myScript.js"></script>
</body>
</html>
也可以直接在html中写javascript代码,script标签中加type="text/javascript"
属性即可:
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<script type="text/javascript">
console.log("你好,javascript")
</script>
</body>
</html>
推荐使用外链,这样更方便管理
注释
单行注释
// 描述内容
var a = 1;
多行注释
以 /*
开始,以 */
结尾。
/*
描述内容
*/
var a = 1;
打印输出
弹窗
使用alert()
,会将括号内的内容以弹窗的形式在浏览器中显示
var a = 1;
alert(a)
执行后会在浏览器中弹出弹框,显示1
控制台输出
使用console.log()
,会将括号内的内容在浏览器控制台中显示,使用F12可以查
var a = 1;
console.log(a)
基本数据类型
JavaScript数据类型有2大分类:一是“基本数据类型”,二是“特殊数据类型”。
其中,基本数据类型包括以下3种:
数字型(Number型)
字符串型(String型)
布尔型(Boolean型)
特殊数据类型有3种:
空值(null型);
未定义值(undefined型);
转义字符;
JavaScript属于弱变量类型的语言,定义类型和python大同小异,只是要在前面加var
:
var a = 1;
var b = "1";
var c = false; // true
查看数据类型
使用typeof
函数可查看某变量是什么类型的
var a = 1;
var b = "1";
var c = false; // true
console.log(typeof(a))
console.log(typeof(b))
console.log(typeof(c))
数据类型转换
JavaScript 变量可以转换为新变量或其他数据类型:
通过使用 JavaScript 函数
通过 JavaScript 自身自动转换
将数字转换为字符串,一共有两种方法:
String(1)
(1).toString()
同样适用于布尔值:
String(false)
false.toString()
将字符串转换为数字
Number("3.14")
正则表达式
在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。
const a = "abcdefghijk";
const search = a.search("d");
console.log(search); // 结果为3
const replace = a.replace("d","11111");
console.log(replace); // 结果为abc11111efghijk
比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 绝对等于(值和类型均相等) |
!= | 不等于 |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
条件语句
在 JavaScript 中,我们可使用以下条件语句:
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
循环
JavaScript 支持不同类型的循环:
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
for循环,可编辑型循环
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
for/in循环,遍历型循环
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
while循环
var i = 0;
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
do/while循环
var i = 0;
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
break和continue语句
break 语句可用于跳出循环。break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话),例如:
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
console.log("循环后代码")
i
为3之后,就会执行for循环之后的代码
continue跳过当前的循环,并继续下一次循环,例如:
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
当执行到第4次,也就是i = 3
之后,该循环体直接跳过,不执行for循环中的语句,然后执行下一次循环
变量定义
可以知道,变量的定义都是用var
。ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
在 ES6 之前,是没有块级作用域的概念的。ES6 之后,使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。
{
var x = 2;
}
// 这里可以使用 x 变量
let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。
{
let x = 2;
}
// 这里不能使用 x 变量
const
定义常量与使用let
定义的变量相似:
二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称
const
声明的常量必须初始化,而let
声明的变量不用const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。
var x = 10;
// 这里输出 x 为 10
{
const x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10
const 声明的常量必须初始化:
// 错误写法
const a;
PI = 1;
// 正确写法
const a = 1;
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript中,函数就是包裹在花括号中的代码块,前面使用了关键词 function,例如:
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
以上例子是带参数的函数,不带参数的函数可以括号内的内容去掉即可,函数也可以有返回值,例如:
function myFunction()
{
var x=5;
return x;
}
调用函数例子如下:
document.getElementById("demo").innerHTML=myFunction();
箭头函数
ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。基本语法是:
参数 => 函数体
基本用法:
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => {
return x * y;
}
当箭头函数没有参数或者有多个参数,要用 () 括起来。
var a = () => {
return 1;
}
b = a();
console.log(b); // 1
var f = (a,b) => {
return a+b;
}
f(6,2); //8
当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var a = () => 1
b = a();
console.log(b);
当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来
// 报错
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
注意点:没有 this、super、arguments 和 new.target 绑定。
var func = () => {
// 箭头函数里面没有 this 对象,
// 此时的 this 是外层的 this 对象,即 Window
console.log(this)
}
func(55) // Window
var func = () => {
console.log(arguments)
}
func(55); // ReferenceError: arguments is not defined
箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。
function fn(){
setTimeout(()=>{
// 定义时,this 绑定的是 fn 中的 this 对象
console.log(this.a);
},0)
}
var a = 20;
// fn 的 this 对象为 {a: 18}
fn.call({a: 18}); // 18
不可以作为构造函数,也就是不能使用 new 命令,否则会报错
在 JavaScript 中,箭头函数能在类中定义方法,包括类的原型方法和实例方法。举个例子,你可以在类的原型方法中使用箭头函数,如下所示:
class MyClass {
myMethod = () => {
// 方法的内容
}
}
请注意,在类中使用箭头函数可能会影响方法的 "this" 值。 在箭头函数中, "this" 的值是固定的,它继承自外层作用域的 "this" 值。 与传统函数不同,传统函数的 "this" 值是在运行时绑定的,取决于函数调用的方式。
对象
在 JavaScript中,几乎所有的事物都是对象。该对象的格式非常像json,可以使用字符来定义和创建 JavaScript 对象,例如:
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
定义 JavaScript 对象可以跨越多行,但空格跟换行不是必须的,其中键值对是JavaScript 对象的对象属性,可以通过以下两种方式访问对象属性:
person.lastName;
person["lastName"];
对象可以创建方法,例子如下:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
fullName
为方法命名,function
的括号内可以带参数,调用的例子如下:
person.fullName()
类
我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
实例:
class Test01 {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
调用该类,使用:
let test = new Test01("John", 2018);
test.name;
类创建的对象叫类对象。上面说的对象,可以看做是json对象。
类方法
我们使用关键字 class 创建一个类,可以添加一个 constructor() 方法,然后添加任意数量的方法。以下实例我们创建一个 "year" 方法,并返回年龄:
class Test01 {
constructor(name, age) {
this.name = name;
this.age = age;
}
year() {
let date = new Date();
return date.getFullYear() - this.age;
}
}
我们还可以向类的方法发送参数:
class Test01 {
constructor(name, age) {
this.name = name;
this.age = age;
}
year(x) {
return x+100;
}
}
若要定义静态方法,只需要在方法名前增加static
即可,例如:
static year(x) {
return x+100;
}
继承
继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易。
super() 方法用于调用父类的构造函数。
当创建一个类时,您不需要重新编写新的数据成员和成员函数,只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类(父类),新建的类称为派生类(子类)。
继承代表了 is a 关系。例如,哺乳动物是动物,狗是哺乳动物,因此,狗是动物,等等。
// 基类
class Animal {
// eat() 函数
// sleep() 函数
};
//派生类
class Dog extends Animal {
// bark() 函数
};
派生类可以使用基类的属性或者函数,使用super()
即可,super() 方法引用父类的构造方法。通过在构造方法中调用 super() 方法,我们调用了父类的构造方法,这样就可以访问父类的属性和方法。
JSON
JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据 。
Javascript中,创建对象(注意不是类对象)就可以创建一个json对象,但是json本质上是一个字符串,可以通过函数进行相互调换
JSON.parse()
,用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()
,用于将 JavaScript 值转换为 JSON 字符串。
首先创建一个对象和一个JSON字符串:
var obj = {a: 'Hello', b: 'World'}; //这是一个js对象,注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'} 一个对象
要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 一个JSON格式的字符串
实现以上所有功能的前提,就是字符串必须是json格式。
模块
和python一样,在ES6中,一个Js文件也可以看做为一个模块,import
和 export
是 JavaScript 中的模块系统,用于在一个文件(通常称为模块)中定义变量、函数和其他可以在其他文件中调用的对象,然后在其他文件中使用这些对象。
这些特性属于 ECMAScript 标准的一部分,可以在最新版本的 JavaScript 中使用。
假设我们有一个叫做 math.js
的文件,其中包含以下内容:
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
export function multiply(x, y) {
return x * y;
}
export function divide(x, y) {
return x / y;
}
然后我们可以在另一个文件中使用 import
语句来使用这些函数。
import { add, subtract, multiply, divide } from './math.js';
console.log(add(1, 2)); // 3
console.log(subtract(1, 2)); // -1
console.log(multiply(1, 2)); // 2
console.log(divide(1, 2)); // 0.5
你也可以使用 *
来导入所有的导出内容:
import * as math from './math.js';
console.log(math.add(1, 2)); // 3
console.log(math.subtract(1, 2)); // -1
console.log(math.multiply(1, 2)); // 2
console.log(math.divide(1, 2)); // 0.5
你还可以使用 export default
导出一个默认的导出,并使用 import
语句时不使用大括号:
// math.js
export default function add(x, y) {
return x + y;
}
// main.js
import add from './math.js';
console.log(add(1, 2)); // 3
当你在导入一个模块时,你可以使用任何名称来引用它:
import { add as myAddFunction } from './math.js';
console.log(myAddFunction(1, 2)); // 3
这可以使你可以使用更清晰的名称来引用导入的内容,或者避免与其他名称冲突。
JavaScript 还允许你使用动态导入来加载模块。这意味着你可以在运行时根据需要加载模块。
async function getMathModule() {
const math = await import('./math.js');
console.log(math.add(1, 2)); // 3
}
getMathModule();
常用的一些jS API
Date(日期)对象
Date 对象用于处理日期与时间。
创建 Date 对象: new Date()
以下四种方法同样可以创建 Date 对象:
var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
milliseconds 参数是一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自 1970 年 1 月 1 日 00:00:00 UTC(the Unix epoch)以来的毫秒数。
dateString 参数表示日期的字符串值。
year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。
关于Date对象的属性具体如下:
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的 Date 函数的引用。 |
prototype | 使您有能力向对象添加属性和方法。 |
关于Date对象的方法具体如下:
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
Math(数学)对象
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
关于Math对象的属性具体如下:
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
关于Math对象的方法具体如下:
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值。 |
acos(x) | 返回 x 的反余弦值。 |
asin(x) | 返回 x 的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 Ex 的指数。 |
floor(x) | 对 x 进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y,z,...,n) | 返回 x,y,z,...,n 中的最高值。 |
min(x,y,z,...,n) | 返回 x,y,z,...,n中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 四舍五入。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
tanh(x) | 返回一个数的双曲正切函数值。 |
trunc(x) | 将数字的小数部分去掉,只保留整数部分。 |
Number(数值)对象
Number 对象是原始数值的包装对象。Number 创建方式 new Number()。
关于Number对象的属性如下:
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的 Number 函数的引用。 |
MAX_VALUE | 可表示的最大的数。 |
MIN_VALUE | 可表示的最小的数。 |
NEGATIVE_INFINITY | 负无穷大,溢出时返回该值。 |
NaN | 非数字值。 |
POSITIVE_INFINITY | 正无穷大,溢出时返回该值。 |
prototype | 允许您可以向对象添加属性和方法。 |
关于Number对象的方法具体如下:
方法 | 描述 |
---|---|
isFinite | 检测指定参数是否为无穷大。 |
isInteger | 检测指定参数是否为整数。 |
isNaN | 检测指定参数是否为 NaN。 |
isSafeInteger | 检测指定参数是否为安全整数。 |
toExponential(x) | 把对象的值转换为指数计数法。 |
toFixed(x) | 把数字转换为字符串,结果的小数点后有指定位数的数字。 |
toLocaleString(locales, options) | 返回数字在特定语言环境下的表示字符串。 |
toPrecision(x) | 把数字格式化为指定的长度。 |
toString() | 把数字转换为字符串,使用指定的基数。 |
valueOf() | 返回一个 Number 对象的基本数字值。 |
isInteger() | 用来判断给定的参数是否为整数。 |
isSafeInteger() | 判断传入的参数值是否是一个"安全整数"。 |
String(字符串)对象
String 对象用于处理文本(字符串)。String 对象创建方法: new String()。
关于String对象的属性具体如下:
属性 | 描述 |
---|---|
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
关于String对象的方法具体如下:
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符。 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
concat() | 连接两个或更多字符串,并返回新的字符串。 |
endsWith() | 判断当前字符串是否是以指定的子字符串结尾的(区分大小写)。 |
fromCharCode() | 将 Unicode 编码转为字符。 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
includes() | 查找字符串中是否包含指定的子字符串。 |
lastIndexOf() | 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 |
match() | 查找找到一个或多个正则表达式的匹配。 |
repeat() | 复制字符串指定次数,并将它们连接在一起返回。 |
replace() | 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。 |
replaceAll() | 在字符串中查找匹配的子串,并替换与正则表达式匹配的所有子串。 |
search() | 查找与正则表达式相匹配的值。 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分。 |
split() | 把字符串分割为字符串数组。 |
startsWith() | 查看字符串是否以指定的子字符串开头。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
trim() | 去除字符串两边的空白。 |
toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
valueOf() | 返回某个字符串对象的原始值。 |
toString() | 返回一个字符串。 |
Array(数组) 对象
使用单独的变量名来存储一系列的值。
创建数组:
// 常规方式
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
// 简洁方式
var myCars=new Array("Saab","Volvo","BMW");
// 字面方式
var myCars=["Saab","Volvo","BMW"];
访问数组:
var name=myCars[0];
可以在数组中有不同的变量类型。例如:
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组自带的方法和属性如下:
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
全局属性和函数
JavaScript 全局属性:
属性 | 描述 |
---|---|
Infinity | 代表正的无穷大的数值。 |
NaN | 指示某个值是不是数字值。 |
undefined | 指示未定义的值。 |
JavaScript 全局函数:
函数 | 描述 |
---|---|
decodeURI() | 解码某个编码的 URI。 |
decodeURIComponent() | 解码一个编码的 URI 组件。 |
encodeURI() | 把字符串编码为 URI。 |
encodeURIComponent() | 把字符串编码为 URI 组件。 |
escape() | 对字符串进行编码。 |
eval() | 计算 JavaScript 字符串,并把它作为脚本代码来执行。 |
isFinite() | 检查某个值是否为有穷大的数。 |
isNaN() | 检查某个值是否是数字。 |
Number() | 把对象的值转换为数字。 |
parseFloat() | 解析一个字符串并返回一个浮点数。 |
parseInt() | 解析一个字符串并返回一个整数。 |
String() | 把对象的值转换为字符串。 |
unescape() | 对由 escape() 编码的字符串进行解码。 |
DOM操作
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
这些树的叶子,就是一个一个html标签。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素,则 x 将包含 null。例如:
var x=document.getElementById("id");
查找 id="tagid" 的元素,然后查找 id="tagid" 元素中的所有<p>
元素:
var x=document.getElementById("tagid");
var y=x.getElementsByTagName("p");
通过getElementsByClassName
函数来查找class="classname"
的元素:
var x=document.getElementsByClassName("classname");
操作HTML
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性,如:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="我修改了html!";
</script>
</body>
</html>
运行后,会改变id为p1的html中的内容
改变 HTML 属性
如需改变 HTML 元素的属性,通过获取DOM后.属性 = 值
来改变某个Html的属性,例如:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
本例子会将src
属性中的值改为landscape.jpg
改变CSS
如需改变 HTML 元素的样式,通过获取DOM后.style.css属性 = 值
来改变某个html的属性,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
事件
HTML 事件是指 HTML 元素上可能发生的某些动作或状态。这些动作或状态可以由用户触发或由浏览器自动触发,并且可以在发生时触发 JavaScript 代码来做出响应。
HTML 事件可以是浏览器行为,也可以是用户行为。
一些常见的 HTML 事件包括:
onload
:当页面或图像加载完成时触发。onclick
:当用户点击某个元素时触发。onmousedown
、onmouseup
:onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。onmouseover
:当用户将鼠标移动到某个元素上时触发。onsubmit
:当用户提交一个表单时触发。onchange
:当值改变时触发,常见于input表单onmouseover
、onmouseout
:可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
可以在HTML中直接绑定到元素的属性上,或者用JavaScript的方式添加事件监听器来监听和处理 HTML 事件:
<button onclick="alert('Button was clicked')">Click me</button>
上面这段代码中,会在按钮被点击时弹出一个警告框。
在事件中,可以直接写js代码,也可以调用Js的方法来实现:
<button onclick="displayDate()">现在的时间是?</button>