Js模块链接HTML模块
1.HTML 中的 Javascript 脚本代码必须位于标签之间。
2.Javascript 脚本代码可被放置在 HTML 页面的
和部分中。alert("我的第一个 JavaScript");
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 元素