【笔记】菜鸟教程-JavaScript

一、javaScript输出
1、javaScript可以通过不同的方式来输出数据。
(1)window.alert()弹出警告框。
(2)document.write()方法将内容写到html文档中。
(3)innerHTML写入到html元素。
(4)console.log()写入到浏览器的控制台。
二、javaScipt语法
1、在编程语言中,一般固定值为字面量。
(1)javaScript字面量:①数字(Number)字面量。②字符串(String)字面量。③表达式字面量。④数组(Array)字面量。⑤对象(Object)字面量。⑥函数(Function)字面量。
(2)在指令式语言中,变量是一个名称,变量通常是可变的;字面量是一个值。
2、(1)JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。
(2)后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)
三、javaScript数据类型
(1)①javaScript数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
②(aSuncat外注):5种原始类型(primitive['prɪmɪtɪv] type):String、Number、Boolean、Undefined、Null
(2)创建数组的3种方式
①常规方式

var cars=new Array();
cars[0]='Saab';
cars[1]='Volvo';

②condensed array(简洁方式)

var cars=new Array('Saab','Volvo');

③literal array(字面)

var cars=['Saab','Volvo'];

(3)对象属性有2种寻址方式:

①name=person.lastname;
②name=person["lastname"];

(4)对象的赋值
(aSuncat外注)如果定义一个变量,要用这个变量给对象赋值,就得用person[y]="1"。如下:

var person={}
var y=id1;
person[y]="1";//不能用person.y="1";

得到的是:

person={id1:"1"};

(5)JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
①当您声明新变量时,可以使用关键词 “new” 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

(6)①访问person对象的fullName方法

name = person.fullName();

②访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:

name = person.fullName;

四、javaScript函数
1、(1)在使用 return 语句时,函数会停止执行,并返回指定的值。
函数调用将被返回值取代:

function myFunction(){
    var x=5;
    return x;
}
var myVar=myFunction();

(2)仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的。

function myFunction(a,b){
    if (a>b)
    {
        return;
    }
    x=a+b
}

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

五、javaScript作用域
1、在 JavaScript 中, 对象和函数同样也是变量。(aSuncat:对象和函数既是字面量,又是变量)
2、在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
3、在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
六、javaScript字符串
1、可以使用索引位置来访问字符串中的每个字符。

var carname = 'Volvo XC60';
var character = carname[7];

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

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

3、特殊字符

代码全称输出
\nnew line换行
\rreturn回车
\ttab制表符
\bbackspace退格
\fform feed换页符

4、创建字符串
(1) JavaScript 字符串是原始值,可以使用字符创建:

var firstName = "John"

(2)也可以使用 new 关键字将字符串定义为一个对象

 var firstName = new String("John")

注意:不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
5、(1)①原始值字符串,如 “John”, 没有属性和方法(因为他们不是对象)。
②原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
(2)(aSuncat:外注)
①原始值
存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
②引用值
存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
6、字符串属性

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

7、字符串方法

方法描述使用
charAt()返回指定索引位置的字符var n = str.charAt(2);
charCodeAt()返回指定索引位置字符的Unicode值
concat()连接两个或多个字符串,返回连接后的字符串var n = str1.concat(str2);
fromCharCode()将Unicode转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置。如果没有找到对应的字符,函数返回-1。str.indexOf("welcome");
lastIndexOf()返回字符串中检索指定字符最后一次出现的地方
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配。如果找到的话,返回这个字符;没有找到则返回null。str.match("World");//返回World或者null
replace()替换与正则表达式匹配的子串.str.replace("Microsoft","w3cschool");
search()检索与正则表达式相匹配的值
split()把字符串分割为子字符串数组。txt="a,b,c,d,e"//String; txt.split(",");//使用逗号分隔;输出[a,b,c,d,e]
slice()提取字符串的片段,并在新的字符串中返回被提取的部分
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocalLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocalUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值

七、javaScript运算符
在两个字符串之间增加空格的两种方法。
(1)把空格插入一个字符串之中。

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

(2)把空格插入字符串中

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

2、空文本 + 数字得到的运算结果都是把数字转成字符串,无论文本有多少个空格。

var result1=""+5;         // 得到的结果是"5"
var result2=" "+5;        // 得到的结果是"5"
var result3="       "+5;  // 得到的结果是"5"

八、javaScript比较
1、条件运算符(三目运算符)
variablename=(condition)?value1:value2

var voteable,age;
voteable=(age<18)?"年龄太小":"年龄已达到";

九、javaScript循环
1、for in循环不仅可以遍历对象的属性,还可以遍历数组。
十、javaScript Break和Continue
1、break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代,所以 continue 只能用于循环的代码块。
2、(1)continue 语句(带有或不带标签引用)只能用在循环中。
(2)break 语句(不带标签引用),只能用在循环或 switch 中。
(3)通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。

cars=["BMW","Volvo","Saab","Ford"];
list: 
{
    document.write(cars[0] + "<br>"); 
    document.write(cars[1] + "<br>"); 
    document.write(cars[2] + "<br>"); 
    break list;
    document.write(cars[3] + "<br>"); 
    document.write(cars[4] + "<br>"); 
    document.write(cars[5] + "<br>"); 
}

十一、javaScript typeof
1、用typeof检测null返回是object。
2、null是一个只有一个值的特殊类型。表示一个空对象引用。
3、undefined是一个没有设置值的变量。
4、null和undefined的值相等,但是类型不相等。
十二、javaScript类型转换
1、Number()转换为数字,String()转换为字符串,Boolean()转换为布尔值。
2、(1)javaScript中有5种不同的数据类型:string、number、boolean、object、function
(2)3种对象类型:Object、Date、Array
(3)2个不包含任何值的数据类型:null、undefined
3、(1)NaN的数据类型是number
(2)数组(Array)的数据类型是object
(3)日期(Date)的数据类型为object
(4)null的数据类型是object
(5)未定义变量的数据类型为undefined
4、如果对象是Array或Date,就无法通过typeof来判断他们的类型,因为都是Object.
5、constructor 属性返回所有 JavaScript 变量的构造函数。

(1)函数返回值
“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] }

(2)可以使用constructor属性来查看对象是否为数组(包含字符串“Array”)

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

(3)可以使用constructor属性来查看对象是否为日期(包含字符串“Date”)

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

6、
(1)数字转换为字符串的方法:

方法描述
String(x)
x.toString()
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串,结果的小数点后有指定位数的数字。

(2)日期转换为字符串

方法描述
String(x)
x.toString()
getFullYear()从Date对象以四位数字返回年份
getMonth()从Date对象返回月份(0-11)
getDate()从Date对象返回一个月中的某一天(1-31)
getHours()返回Date对象的小时(0-23)
getSeconds()返回Date对象的秒数(0-59)
getMilliseconds()返回Date对象的毫秒(0-999)
getDay()从Date对象返回一周中的某一天(0-6)
getTime()返回1970年1月1日至今的毫秒数

(3)字符串转换为数字

方法描述
Number()①全局方法Number()可以将字符串转换为数字。②空字符串转换为0。③其他的字符串会转换为NaN
parseFloat()解析一个字符串,并返回一个浮点数
parseInt()解析一个字符串,并返回一个整数
一元运算符+①可将变量转换为数字。②var y = "5"; // y 是一个字符串; var x = + y;// x 是一个数字 ③如果变量不能转换,它仍然会是一个数字,但值为NaN。var y = "John";// y 是一个字符串; var x = + y;// x 是一个数字 (NaN)

(4)布尔值转换为数字

方法描述
Number()Number(false)// 返回 0; Number(true) // 返回 1

(5)日期转换为数字

方法描述
Number()d = new Date();Number(d)
getTime()日期方法getTime()能将日期转换为数字。d = new Date();d.getTime()

(6)自动转换类型
当javaScript尝试操作一个“错误”的数据类型时,会自动转换为“正确”的数据类型。
①数字+null,null转换为0,+为运算符
5 + null // 返回 5 ,null 转换为 0
②字符串+null,null转换为字符串"null",+为拼接
“5” + null // 返回"5null" , null 转换为 “null”
③字符串+数字,数字转换为字符串,+为拼接
“5” + 1 // 返回 “51”,1 转换为 “1”
④字符串-数字,字符串转换为数字,-为运算符
“5” - 1 // 返回 4,“5” 转换为 5
(7)自动转换为字符串
当你尝试输出一个对象或一个变量时,javaScript会自动调用变量的toString()方法

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

十三、javaScript正则表达式
1、正则表达式
(1)正则表达式是由一个字符序列形成的搜索模式。
(2)搜索模式可用于文本搜索和文本替换。
(3)正则表达式可用于所有文本搜索和文本替换的操作。
2、var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
3、在javaScript中,正则表达式通常用于两个字符串方法:search()和replace()。
(1)search()方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
①正则表达式搜索Runoob,且不区分大小写。

var str='I love Runoob Runoob';
var n = str.search(/Runoob/i);
console.log(n);//得到的n为7(第一个Runoob的R的下标)

②search()方法可使用字符串作为参数。字符串参数会转换为正则表达式。

var n = str.search("Runoob");

(2)replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
①使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

var txt = str.replace(/microsoft/i,"Runoob");

②replace() 方法将接收字符串作为参数。

var txt = str.replace("Microsoft","Runoob");

4、正则表达式修饰符

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

5、正则表达式模式
(1)方括号用于查找某个范围内的字符。

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

(2)元字符是拥有特殊含义的字符

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

(3)量词

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

6、使用RegExp对象
在javaScript中,RegExp对象是一个预定义了属性和方法的正则表达式对象。
7、test()和exec()
(1)test()
test()方法是一个正则表达式方法。
test()方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false.

var patt = /e/;
var str="The best things in life are free!";
patt.test(str);

返回true

var str = 'runoob';
var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理
var patt2 = new RegExp('\w', 'g');  // 无转义作为字符串处理
var patt3 =/\w+/g;  // 与 patt1 效果相同
document.write(patt1.test(str)) //输出 true
document.write("<br>") 
document.write(patt2.test(str)) //输出 false
document.write("<br>") 
document.write(patt3.test(str)) //输出 true

(2)exec()
exec()方法是一个正则表达式方法。
exec()方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。

var patt=/e/;
var str="The best things in life are free!"
patt.exec(str);

返回e
十四、javaScipt错误
1、javaScript错误-throw、try和catch
(1)try语句测试代码块的错误。
(2)catch语句处理错误。
(3)throw语句创建自定义错误。
2、try和catch
(1)try语句允许我们定义在执行时进行错误测试的代码块。
(2)catch语句允许我们定义当try代码块发生错误时,所执行的代码快。
(3)javaScript语句try和catch是成对出现的。

try {
  //在这里运行代码
} catch(err) {
  //在这里处理错误
}

(4)catch块会捕捉到try块中的错误,并执行代码来处理它。

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述:" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

3、throw语句
(1)throw语句创建或抛出异常(exception[ik’sepʃən]:异常)。
(2)throw与try和catch一起使用,能够控制程序流,并生成自定义的错误消息。
(3)语法

throw exception

异常可以是javaScript字符串、数字、逻辑值或对象。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    } catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

十五、javaScript调试
1、console.log()
2、debugger
debugger关键字用于停止执行javaScript,并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。
十六、javaScript变量提升
1、javaScript中,函数及变量的声明都将被提升到函数的最顶部。

x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x

2、javaScipt只有声明的变量会提升,初始化的不会。

var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y
var y = 7; // 初始化 y

y输出了undefined,因为变量声明(var y)提升了,但是初始化(y=7)并不会提升,所以y变量是一个未定义的变量。
上述代码类似于下列代码

var x = 5; // 初始化 x
var y;     // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
y = 7;    // 设置 y 为 7

十七、javaScript严格模式(use strict)
1、严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。“use strict” 指令只运行出现在脚本或函数的开头。
2、为什么使用严格模式?
消除javascript语法的一些不合理,不严谨之处,减少一些怪异行为。
(1)消除代码运行的一些不安全之处,保证代码运行的安全。
(2)提高编译器效率,增加运行速度。
(3)为未来新版本的javascript做好铺垫。
3、同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。
4、严格模式的限制:
(1)不允许使用未声明的变量。
对象也是一个变量。
(2)不允许删除变量或对象。

"use strict";
var x = 3.14;
delete x;                // 报错

(3)不允许删除函数。
(4)不允许变量重名。
(5)不允许使用八进制。
(6)不允许使用转义字符。

"use strict";
var x = \010;            // 报错

(7)不允许对只读属性赋值。

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 报错

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

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 报错

(9)不允许删除一个不允许删除的属性。

"use strict";
delete Object.prototype; // 报错

(10)变量名不能使用“eval”字符串。
(11)变量名不能使用“arguments”字符串。
(12)不允许使用以下这种语句。

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

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

"use strict";
eval ("var x = 2");
alert (x);               // 报错

(14)禁止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未定义

十八、javaScript使用误区:
1、赋值运算符应用错误。
在javaScript程序中,如果你在if条件语句中使用赋值运算符的等号(=)将会产生一个错误结果,正确的方法是使用比较运算符的两个等号(==)。
(1)

var x = 0;
if (x == 10)//返回false(因为x不等于10)

(2)

var x = 0;
if (x = 10)//返回true(因为条件语句执行为x赋值为10,10为true)

(3)

var x = 0;
if (x = 0)//返回false(因为条件语句执行为x赋值0,0为false)

赋值语句返回变量的值。
2、比较运算符常见错误
这种错误经常会在switch语句中出现,switch语句会使用恒等计算符(===)进行比较。
3、加法与连接注意事项。
加法是两个数字相加。
连接是两个字符串连接。
javaScript的加法和连接都使用+运算符。
4、浮点型数据使用注意事项
javaScript中的所有数据都是以64位浮点型数据(float)来存储。

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

为解决以上问题,可以用整数的乘除法来解决:

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

5、字符串分行
(1)javaScript允许我们在字符串中使用断行语句:

var x =
"Hello World!";

(2)在字符串中直接使用回车换行是会报错的:

var x = "Hello
World!";

(3)字符串断行需要使用反斜杠(\)

var x = "Hello \
World!";

6、return语句使用注意事项。
不要对 return 语句进行断行。

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

返回undefind;
①如果是一个不完整的语句,如:var
②javaScript将尝试读取第二行的语句:power=10;
③但是由于这样的语句是完整的:return
④javaScript将自动关闭语句:return;
由于 return 是一个完整的语句,所以 JavaScript 将关闭 return 语句。
7、数组中使用名字来索引
(1)许多程序语言都允许使用名字来作为数组的索引。
使用名字来作为索引的数组称为关联数组(或哈希)。
(2)javaScript不支持使用名字来索引数组,只允许使用数字索引。

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

(3)在javaScript中,对象使用名字作为索引。
如果你使用名字作为索引,当访问数组时,javaScript会把数组重新定义为标准对象。
执行这样的操作后,数组的方法和属性将不能再使用,否则会产生错误。

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

8、undefined不是null
(1)在javaScript中,null用于对象,undefined用于变量,属性和方法。
对象只有被定义才有可能为null,否则为undefined;
(2)如果我们想测试对象是否存在,在对象还没定义时会抛出一个错误。
错误的使用方式:

if (myObj !== null && typeof myObj !== "undefined") 

正确的方式是我们需要先使用typeof来检测对象是否已定义:

if (typeof myObj !== "undefined" && myObj !== null)

十九、javaScript表单
1、数据验证
(1)服务端数据验证:是在数据提交到服务器上后再验证。
(2)客户端数据验证(side validation):是在数据发送到服务器前,在浏览器上完成验证。
2、约束验证css伪类选择器

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

二十、javaScript验证API
1、约束验证DOM方法

propertydescription
checkValidity()如果input元素中的数据是合法的返回true,否则返回false
setCustomValidity()设置input元素的validationMessage属性,用于自定义错误提示信息的方法。
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

2、约束验证DOM属性

属性描述
validity布尔属性值,返回input输入值是否合法
validationMessage浏览器错误提示信息
willValidate指定input是否需要验证

3、validity属性

属性描述
customError设置为true,如果设置了自定义的validity信息。
patternMismatch设置为true,如果元素的值不匹配它的模式属性。
rangeOverflow设置为true,如果元素的值大于设置的最大值。
rangeUnderflow设置为true,如果元素的值小于它的最小值
stepMismatch设置为true,如果元素的值超过了maxLength属性设置的长度
typeMismatch设置为true,如果元素的值不是预期相匹配的类型
valueMissing设置为true,如果元素(required属性)没有值
valid设置为true,如果元素的值是合法的。
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你输入的不是数字";
    }else if(inpObj.validity.rangeOverflow) {
       txt = "输入的值太大了";
    }else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
 
// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

二十一、javaScript保留关键字
地址:http://www.runoob.com/js/js-reserved.html

二十二、javaScript JSON
1、json语法规则:
(1)数据为键/值对。
(2)数据由逗号分隔。
(3)大括号保存对象
(4)方括号保存数组
2、json数据——一个名称对应一个值
键/值对包含字段名称(在双引号中),后面一个冒号,然后是值:

"name":"Runoob"

3、json字符串转换为javaScript对象
(1)创建javaScript字符串,字符串为json格式的数据。

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

(2)使用javaScript内置对象JSON.parse()将字符串转换为javaScript对象:

var obj = JSON.parse(text);

(3)在页面中使用新的javaScript对象:

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

4、相关函数

函数描述
JSON.parse()用于将一个JSON字符串转换为javaScript对象
JOSN.stringify()用于将javaScript值转换为JSON字符串

二十三、javaScript void
1、javascript:void(0)中最关键的是void关键字,void是javaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
2、语法格式如下:

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()
或者
void(func())
javascript:void(func())
//-->
</script>
</head>

void(0)计算为0,但javaScript上没有任何效果。
3、href="#"与href="javascript:void(0)"的区别
(1)#包含了一个位置信息,默认的锚是#top也就是网页的上端。
(2)javascript:void(0),仅仅表示一个死链接。
(3)在页面很长的时候会用#来定位页面的具体位置,格式为:#+id
二十四、javaScript代码规范
1、代码规范通常包括以下几个方面。
(1)变量和函数的命名规则。
(2)空格、缩进、注释的使用规则
(3)其他常用规范…
2、变量名。
变量名推荐使用驼峰法来命名(camelCase)。
3、空格与运算符。
通常运算符(=±*/)前后需要添加空格。

var x = y + z;

4、代码缩进
(1)通常使用4个空格符号来缩进代码块。
(2)不推荐使用tab键来缩进,因为不同编辑器tab键的解析不一样。
5、语句规则。
(1)简单语句的通用规则:
①一条语句通常以分号作为结束符。
(2)复杂语句的通用规则。
①将花括号放在第一行的结尾。
②左花括号前添加一空格。
③将右花括号独立放在一行。
④不要以分号结束一个复杂的声明。

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

6、对象规则
(1)将左花括号与类名放在同一行。
(2)冒号与属性值间有个空格。
(3)字符串使用双引号,数字不需要。
(4)最后一个属性-值对后面不要添加逗号。
(5)将右花括号独立放在一行,并以分号作为结束符号。

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

(6)短的对象代码可以直接写成一行。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

7、每行代码字符小于80
(1)为了便于阅读每行字符建议小于数80个。
(2)如果一个javaScript语句超过了80个字符,建议在运算符或者逗号后换行。

document.getElementById("demo").innerHTML =
    "Hello Runoob.";

8、命名规则
(1)一般很多代码语言的命名规则都是类似的。
①变量和函数为驼峰法。(camelCase)
②全局变量为大写(UPPERCASE)
③变量(如PI)为大写(UPPERCASE)
(2)html和css的横杠(-)字符
①css使用-来连接属性名(font-size)。
②-通常在javaScript被认为是减法,所以不允许使用。
(3)下划线。
①SQL数据库。
②php语言通常都使用下划线。
(4)帕斯卡拼写法(PascalCase)。
①单字之间不以空格断开或连接号(-),底线(_)连接,第一个单字首字母采用大写字母,后续单字的首字母亦用大写字母。
②帕斯卡命名法也称为“大驼峰式命名法”。
③帕斯卡拼写法(PascalCase)在C语言中运用较多。

js函数

二十五、javaScript函数定义
1、函数声明后不会立即执行,会在我们需要的时候调用到。
2、分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句,所以不以分号结束。
3、匿名函数:

var x = function (a, b) {return a * b};
var z = x(4, 3);

匿名函数,函数存储在变量中,不需要函数名称,通常通过变量名来调用。
4、函数定义的3种方式:
(1)函数声明:

function myFunction(a, b) {
    return a * b;
}

(2)函数表达式:

var x = function (a, b) {return a * b};

(3)Function()构造函数

var myFunc = new Function("a", "b", "return a * b");

var x = myFunc(4, 3);

也可以写成:

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

注意:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
5、(1)函数可以通过声明定义,也可以是一个表达式。
(2)函数可以作为一个值使用,也可以作为一个表达式使用。
①值:

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);

②表达式:

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

6、提升(Hoisting)
(1)提升是 JavaScript 默认将当前作用域提升到前面去的的行为。
(2)提升(Hoisting)应用在变量的声明与函数的声明。
(3)表达式定义函数时无法提升。
7、自调用函数
(1)函数表达式可以 “自调用”。
(2)自调用表达式会自动调用。
(3)如果表达式后面紧跟 () ,则会自动调用。
(4)不能自调用声明的函数。
(5)通过添加括号,来说明它是一个函数表达式。
(6) 匿名自我调用的函数:

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

8、函数是对象
(1)arguments.length 属性返回函数调用过程接收到的参数个数

function myFunction(a, b) {
    return arguments.length;
}

(2)toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

9、函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。

二十六、javaScript函数参数
1、显式参数(Parameters)与隐式参数(Arguments)
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。
2、默认参数
如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:

function myFunction(x, y) {
    y = y || 0;//如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
}

3、arguments对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
4、传递参数的2种途径:
(1)通过值传递参数
①在函数中调用的参数是函数的隐式参数。
②JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
③如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。
④隐式参数的改变在函数外是不可见的。
(2)通过对象传递参数
①在JavaScript中,可以引用对象的值。
②因此我们在函数内部修改对象的属性就会修改其初始的值。
③修改对象属性可作用于函数外部(全局变量)。
④修改对象属性在函数外是可见的。
二十七、javaScript函数调用
1、javaScript4种调用方式:作为函数调用、函数作为方法调用、使用构造函数调用函数、作为函数方法调用函数。
每种方式的不同方式在于 this 的初始化。

// 1、作为函数调用
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20
// 2、函数作为方法调用
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"
// 3、使用构造函数调用函数
// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
} 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"
// 4、作为函数方法调用
// call
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

// apply
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

2、this
一般而言,在Javascript中,this指向函数执行时的当前对象。
3、

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);   //window.myFunction(10, 2) 返回 20

这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。
4、全局对象
(1)当函数没有被自身的对象调用时, this 的值就会变成全局对象。
(2)在 web 浏览器中全局对象是浏览器窗口(window 对象)。
(3)函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
5、函数作为方法调用

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

函数作为对象方法调用,会使得 this 的值成为对象本身。
6、使用构造函数调用函数
(1)如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象。
(2)构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
(3)构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
7、作为函数方法调用函数
(1)在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
(2)call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
(3)

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
二十八、javaScript闭包
1、JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
2、变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
3、全局和局部变量即便名称相同,它们也是两个不同的变量。修改其中一个,不会影响另一个的值。
4、(1)闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3

①add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
②这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
③计数器受匿名函数的作用域保护,只能通过 add 方法修改。
(2)闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。

js html dom

二十九、dom简介
1、Document Object Model,文档对象模型
三十、dom html
1、改变html元素的属性:
document.getElementById(id).attribute=新属性值

document.getElementById("image").src="landscape.jpg";

三十一、dom css
document.getElementById(id).style.property=新样式

document.getElementById("p2").style.color="blue";

三十二、dom事件
1、onload 和 onunload 事件
onload 和 onunload 事件可用于处理 cookie。
2、onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
三十三、dom EventListener
1、addEventListener()
(1)addEventListener() 方法用于向指定元素添加事件句柄。
(2)addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
(3)你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
(4)addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
(5)当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
(6)可以使用 removeEventListener() 方法来移除事件的监听。
2、语法

element.addEventListener(event, function, useCapture);

(1)第一个参数是事件的类型 (如 “click” 或 “mousedown”).
(2)第二个参数是事件触发后调用的函数。
(3)第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
3、当用户重置窗口大小时添加事件监听:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

4、事件冒泡或事件捕获
(1)事件传递有两种方式:冒泡与捕获。
(2)事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击<p> 元素, 哪个元素的 “click” 事件先被触发呢?
(3)在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:<p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
(4)在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:<div> 元素的点击事件先触发 ,然后再触发<p>元素的点击事件。
(5)addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:
(6)addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
5、(1) IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

(2)跨浏览器解决办法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

三十四、dom元素
1、var para=document.createElement("p");
2、var node=document.createTextNode("这是一个新段落。");
3、para.appendChild(node);
4、parent.removeChild(child);
5、child.parentNode.removeChild(child);

js高级教程

三十五、javaScript对象
1、javaScript中的所有事物都是对象:字符串、数值、数组、函数…
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
2、对象的属性和方法:
(1)访问对象属性的语法是:

objectName.propertyName

(2)方法是能够在对象上执行的动作。
可以通过以下语法来调用方法:

objectName.methodName()

3、创建对象的2种方法:
(1)定义并创建对象的实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

(2)使用函数来定义对象,然后创建新的对象实例

//使用对象构造器
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
4、JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
5、JavaScript for…in 语句循环遍历对象的属性。

for (variable in object){
	执行的代码……
}

for…in 循环中的代码块将针对每个属性执行一次。
三十六、javaScript Number对象
1、JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
2、javaScript中,所有的数字都是浮点型类型。
3、精度
(1)整数(不使用小数点或指数计数法)最多为 15 位。

var x = 999999999999999;   // x 为 999999999999999
var y = 9999999999999999;  // y 为 10000000000000000

(2)小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

var x = 0.2+0.1; // 输出结果为 0.30000000000000004

4、八进制和十六进制
(1)如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。

var y = 0377;
var z = 0xFF; 
document.write(y + "<br>");//255
document.write(z + "<br>");//255

绝不要在数字前面写零,除非您需要进行八进制转换。
(2)默认情况下,JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

5、无穷大(infinity)
无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。
6、NaN
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false

7、数字属性

属性备注
MAX_VALUE最大值
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
NaN
prototype
constructor

8、数字方法

方法备注
toExponential()
toFixed()
toPrecision()
toString()
valueOf()

三十七、javaScript String
三十八、javaScript日期
1、4种初始化日期方式:

new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。
2、设置日期
将日期对象设置为 5 天后的日期:

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
三十九、javaScript 数组
1、可以在一个数组中包含对象元素、函数、数组。

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

2、var y=myCars.indexOf("Volvo");// "Volvo" 值的索引值

四十、javaScript Boolean
1、定义一个名为 myBoolean 的布尔对象:

var myBoolean=new Boolean();

2、如果布尔对象无初始值或者其值为:
0、-0、null、""、false、undefined、NaN
那么对象的值为 false。
否则,其值为true。(即使是字符串“false”)
四十一、javaScript Match
1、JavaScript 提供 8 种可被 Math 对象访问的算数值:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
2、算术方法。

方法名备注
round()对一个数进行四舍五入。
random()返回一个介于 0 和 1 之间的随机数。(0<=x<1)
floor()
ceil()

四十二、javaScript RegExp对象
1、正则表达式(regular expression)
2、语法:
(1)var patt=new RegExp(pattern, modifiers);//modifiers修饰符:是否全局,是否大小写。
(2)var patt=/pattern/modifiers;

JS浏览器BOM

四十三、javaScript window
1、浏览器对象模型BOM(Browser Object Model)
2、document也是window对象的属性之一。
3、window尺寸。
(1)对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
(2)对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者:
document.body.clientHeight
document.body.clientWidth

//所有浏览器窗口的宽度和高度(不包括工具栏/滚动条)
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

4、其他window方法
(1)window.open()-打开新窗口
(2)window.close()-关闭当前窗口
(3)window.moveTo()-移动当前窗口
(4)window.resizeTo()-调整当前窗口的尺寸
四十四、javaScript window screen
1、window.screen对象包含有关用户屏幕的信息。
2、screen.availWidth - 可用的屏幕宽度。以像素计,减去界面特征,比如窗口任务栏。
screen.availHeight -可用的屏幕宽度
四十五、javascript window location
1、window.location对象用于获得当前页面的地址(url),并把浏览器重定向到新的页面。

方法名作用example
location.pathname返回当前页面的路径和文件名。
location.href返回当前页面的urlhttp://www.runoob.com/js/js-window-location.html
location.protocol返回所使用的web协议http://或https://
location.hostname返回web主机的域名www.runoob.com
location.port返回web主机的端口80(https默认端口为443)
location.pathname返回url的路径名/js/js-window-location.html
location.assign()加载新的文档

四十六、javaScript window history
1、windwo.history对象包含浏览器的历史

方法名备注
history.back()加载历史列表的前一个url,与在浏览器点击后退按钮相同
history.forward()与在浏览器中点击按钮向前相同

四十七、javaScript window navigator
1、

对象名备注
window.navigator包含有关访问者浏览器的信息
navigator.appCodeName浏览器代号
navigator.appName浏览器名称
navigator.appVersion浏览器版本
navigator.cookieEnabled启用Cookie
navigator.platform硬件平台
navigator.userAgent用户代理
navigator.systemLanguage用户代理语言

2、来自navigator对象的信息具有误导性,不应该被用于检测浏览器版本,因为:
(1)navigator数据可被浏览器使用者更改。
(2)一些浏览器对测试站点会识别错误。
(3)浏览器无法报告晚于浏览器发布的新操作系统。
3、只有opera属性支持window.opera,可以由此识别出opera

if (window.opera) {...some action...}

四十八、javascript弹窗
1、可以在javascript中创建三种消息框:警告框,确认框,提示框。
2、警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
3、确认框
确认框通常用于验证是否接受用户操作。
当确认框弹出时,用户可以点击“确认”或者“取消”来确定用户操作。
当你点击“确认”,确认框返回true,如果点击“取消”,确认框返回false。
4、提示框
提示框通常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null。
5、换行。
弹窗使用反斜杠(\n)来设置换行。
四十九、 计时事件
1、setInterval()-间隔指定的毫秒数不停地执行指定的代码。
2、setTimeout()-暂停指定的毫秒数后执行指定的代码。
3、clearInterval()
要使用clearInterval()方法,在创建计时方法时你必须使用全局变量。

myVar=setInterval("javascript function",milliseconds);
function myStopFunction(){
	clearInterval(myVar);
}

4、clearTimeout()
要使用clearTimeout()方法,你必须在创建超时方法中(setTimeout)使用全局变量。
如果函数还未执行,你可以使用clearTimeout()方法来停止执行函数代码。

var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("hello")},3000);
}
function myStopFunction(){
	clearTimeout(myVar);
}

五十、JavaScript cookie
1、cookie是一些数据,存储在你电脑上的文本文件中。
2、cookie的作用就是用于解决“如何记录客户端的用户信息”:
(1)当用户访问web页面时,他的名字可以记录在cookie中。
(2)在用户下一次访问该页面时,可以在cookie中读取用户访问记录。
3、cookie以名/值对形式存储,如下所示:
username=John Doe
4、1)创建cookie
(1)创建cookie

document.cookie="username=John Doe";

(2)可以为cookie添加一个过期时间(以UTC或GMT时间)。默认情况下,cookie在浏览器关闭时删除:

document.cookie="username=John Doe;expires=Thu, 18 Dec 2013 12:00:00 GMT";

(3)可以使用path参数告诉浏览器cookie的路径。默认情况下,cookie属于当前页面。

document.cookie="username=John Doe;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"

2)读取cookie

var x=document.cookie;

3)使用js修改cookie
在js中,修改cookie类似于创建cookie,如下:

document.cookie="usrname=John Smith;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"

旧的cookie将被覆盖。
4)js删除cookie
删除cookie非常简单。您值需要设置expires参数为以前的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当你删除时不必指定cookie的值。
5、cookie字符串
document.cookie属性看起来像一个普通的文本字符串,其实它不是。
6、(1)设置cookie值的函数:

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

(2)获取cookie值的函数

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

(3)检测cookie值的函数:

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

js库

五十一、javaScript测试jQuery
1、jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
2、jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
3、不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
4、jQuery允许链接(链式语法)。
链接(chaining)是一种在同一对象上执行多个任务的便捷方法。
五十二、javaScript测试prototype

function myFunction(){
$("h01").insert("Hello Prototype!");}
Event.observe(window,"load",myFunction);

1、event.observe()接受三个参数:
(1)您希望处理的html dom或bom对象。
(2)您希望处理的事件。
(3)您希望调用的函数。

js实例

五十三、javaScript实例
1、创建对象的实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old."

2、创建用于对象的模板

function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");

五十四、javaScript对象实例
1、javaScript对象实例:
String(字符串)对象
Date(日期)对象、
Array(数组)对象、
Boolean(布尔)对象、
Math(算术)对象
五十五、javaScript浏览器对象实例
1、JavaScript Browser 对象 实例:
Window对象
Navigator对象
Screen对象
History对象
Location对象
五十五、javaScript html dom实例
1、JavaScript 对象 实例:使用内置JavaScript的对象实例。
Document对象
Anchor对象
Area对象
Base对象
Button对象
Form对象
Frame/Iframe对象
Image对象
Event对象
Option和Select对象
Table, TableHeader, TableRow, TableData 对象

js函数

五十七、javaScript 参考手册
1、javaScript对象: https://www.runoob.com/jsref/jsref-tutorial.html
2、HTML DOM对象: https://www.runoob.com/jsref/dom-obj-document.html

  • 9
    点赞
  • 24
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

aSuncat

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值