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 教程 | 菜鸟教程 (runoob.com)

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种:

  1. 数字型(Number型)

  2. 字符串型(String型)

  3. 布尔型(Boolean型)

特殊数据类型有3种:

  1. 空值(null型);

  2. 未定义值(undefined型);

  3. 转义字符;

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 关键字: letconst

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文件也可以看做为一个模块,importexport 是 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 模型被构造为对象的树:

DOM HTML tree

这些树的叶子,就是一个一个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:当用户点击某个元素时触发。

  • onmousedownonmouseup:onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

  • onmouseover:当用户将鼠标移动到某个元素上时触发。

  • onsubmit:当用户提交一个表单时触发。

  • onchange:当值改变时触发,常见于input表单

  • onmouseoveronmouseout:可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

可以在HTML中直接绑定到元素的属性上,或者用JavaScript的方式添加事件监听器来监听和处理 HTML 事件:

<button onclick="alert('Button was clicked')">Click me</button>

上面这段代码中,会在按钮被点击时弹出一个警告框。

在事件中,可以直接写js代码,也可以调用Js的方法来实现:

<button onclick="displayDate()">现在的时间是?</button>


文章作者: Vsoapmac
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 soap的会员制餐厅
前端 javascript
喜欢就支持一下吧