2022-10-31

Js模块链接HTML模块

1.HTML 中的 Javascript 脚本代码必须位于标签之间。

2.Javascript 脚本代码可被放置在 HTML 页面的和部分中。

3.也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

    外部 JavaScript 文件的文件扩展名是 .js。

   

JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字var来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6

运算符

类型实例描述赋值,算术和位运算符= + - * /在 JS 运算符中描述条件,比较及逻辑运算符== != < >在 JS 比较运算符中描述

三种变量命名规则

varfirstName='king';//小驼峰

varFirstName='queen';//大驼峰

varfirst_name='maizi';//下划线法

JavaScript 语句标识符

JavaScript 语句通常以一个语句标识符为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句描述break用于跳出循环。catch语句块,在 try 语句块执行出错时执行 catch 语句块。continue跳过循环中的一个迭代。do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块。for在条件语句为 true 时,可以将代码块执行指定的次数。for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。function定义一个函数if ... else用于基于不同的条件来执行不同的动作。return退出函数switch用于基于不同的条件来执行不同的动作。throw抛出(生成)错误 。try实现错误处理,与 catch 一同使用。var声明一个变量。while当条件语句为 true 时,执行语句块。

声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

带有返回值的函数

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

function myFunction(a,b)

{

    if (a>b)

    {

        return;

    }

    x=a+b

}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述onchangeHTML 元素改变onclick用户点击 HTML 元素onmouseover鼠标指针移动到指定的元素上时发生onmouseout用户从一个 HTML 元素上移开鼠标时发生onkeydown用户按下键盘按键onload浏览器已完成页面的加载

JavaScript 字符串

字符串可以存储一系列字符,如 "John Doe"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:

var carname = "Volvo XC60";

var carname = 'Volvo XC60';

//字符串添加转义字符来使用引号: \' ,\"

/*

  反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

  转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。

  */

var x = 'It\'s alright';

var y = "He is called \"Johnny\"";

//双引号" "中用单引号' '可以不用加反斜杠,

//单引号' '中用双引号" "不需要加反斜杠,

特殊字符

代码输出\'单引号\"双引号\\反斜杠\n换行\r回车\ttab(制表符)\b退格符\f换页符

字符串长度

可以使用内置属性length来计算字符串的长度:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var sln = txt.length;

字符串属性

属性描述constructor返回创建字符串属性的函数length返回字符串的长度prototype允许您向对象添加属性和方法

字符串方法

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3,下表解释了逻辑运算符:

运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true

日期转换为字符串的函数:

JavaScript类型转换

将字符串转换为数字

全局方法Number()可以将字符串转换为数字。

将数字转换为字符串

全局方法String()可以将数字转换为字符串。

// 全局方法String()可以将数字转换为字符串。 

    String(x)// 将变量 x 转换为字符串并返回

    String(123) // 将数字 123 转换为字符串并返回

    String(100+23)// 将数字表达式转换为字符串并返回

   

// Number 方法toString()也是有同样的效果。

    (123).toString()    // 将数字 123 转换为字符串并返回

    (100+23).toString()

   

// 全局方法String()可以将布尔值转换为字符串。  方法toString()也有相同的效果

    String(false) // 返回 "false"

    String(true) // 返回 "true"         

     

//全局方法 String() 可以将日期对象转换为字符串。

    String(new Date())     

   

//    =========================================================

//    全局方法Number()可以将字符串转换为数字。

/*

    字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

    空字符串转换为 0。

    其他的字符串会转换为 NaN (不是个数字)。

*/

    Number("3.14")// 返回3.14

    Number(" ")// 返回0

    Number("")// 返回 0

    Number("99 88")// 返回 NaN

   

// 全局方法Number()可将布尔值转换为数字。

    Number(false)// 返回0

    Number(true) // 返回 1

// 将日期转换为数字 全局方法Number()

    d =newDate();

    Number(d) // 返回 1404568027739

   

//日期方法getTime()也有相同的效果。

    d =newDate();

    d.getTime()  // 返回 1404568027739

下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写:

修饰符描述i执行对大小写不敏感的匹配。g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。m执行多行匹配。

--------------------------------------------------------------------------------

正则表达式模式

方括号用于查找某个范围内的字符:

表达式描述[abc]查找方括号之间的任何字符。[0-9]查找任何从 0 至 9 的数字。(x|y)查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符描述\d查找数字。\s查找空白字符。\b匹配单词边界。\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词描述n+匹配任何包含至少一个n的字符串。n*匹配任何包含零个或多个n的字符串。n?匹配任何包含零个或一个n的字符串。

使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

JavaScript try 和 catch

try语句允许我们定义在执行时进行错误测试的代码块。

catch语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句try和catch是成对出现的。

语法

try {

    ...    //异常的抛出

} catch(e) {

    ...    //异常的捕获与处理

} finally {

    ...    //结束处理

}

严格模式的限制

//不允许使用未声明的变量:

"use strict";

x =3.14;// 报错 (x 未定义)

//对象也是一个变量。

"use strict";

x ={p1:10, p2:20};// 报错 (x 未定义)

//不允许删除变量或对象。

"use strict";

varx =3.14;

deletex; // 报错

//不允许删除函数。

"use strict";

functionx(p1, p2) {};

deletex;// 报错

//不允许变量重名:

"use strict";

functionx(p1, p1) {};// 报错

//不允许使用八进制:

"use strict";

varx =010;// 报错

//不允许使用转义字符:

"use strict";

varx = \010;// 报错

//不允许对只读属性赋值:

"use strict";

varobj = {};

Object.defineProperty(obj,"x", {value:0, writable:false});

obj.x =3.14; // 报错

//不允许对一个使用getter方法读取的属性进行赋值

"use strict";

varobj = {get x(){return0} };

obj.x =3.14;// 报错

//不允许删除一个不允许删除的属性:

"use strict";

deleteObject.prototype;// 报错

//变量名不能使用 "eval" 字符串:

"use strict";

vareval=3.14;// 报错

//变量名不能使用 "arguments" 字符串:

"use strict";

vararguments=3.14;// 报错

//不允许使用以下这种语句:

"use strict";

with(Math){x = cos(2)};// 报错

//由于一些安全原因,在作用域 eval() 创建的变量不能被调用:

"use strict";

eval("var x = 2");

alert (x);        // 报错

//========禁止this关键字指向全局对象。=========

function f(){

return !this;

}

// 返回false,因为"this"指向全局对象,"!this"就是false

function f(){

"use strict";

return !this;

}

// 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。

//因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。

function f(){

"use strict";

this.a = 1;

};

f();// 报错,this未定义

//严格模式新增了一些保留关键字:

implements

interface

let

package

private

protected

public

static

yield

"use strict";

varpublic=1500;// 报错

约束验证 HTML 输入属性

属性描述disabled规定输入的元素不可用max规定输入元素的最大值min规定输入元素的最小值pattern规定输入元素值的模式required规定输入元素字段是必需的type规定输入元素的类型

约束验证 CSS 伪类选择器

选择器描述:disabled选取属性为 "disabled" 属性的 input 元素:invalid选取无效的 input 元素:optional选择没有"optional"属性的 input 元素:required选择有"required"属性的 input 元素:valid选取有效值的 input 元素

你可能感兴趣的:(2022-10-31)