在HTML中使用Javascript
-
<script>
元素的六个属性:属性 作用 async 可选。表示应该立即下载脚本 charset 可选。表示通过src属性指定的代码的字符集 defer 可选。表示脚本可以延迟到文档被完全解析和显示后再执行 language 已废弃。 src 可选。表示包含要执行代码的外部文件 type 可选。表示编写代码使用的脚本语言的内容类型 <script> function sayHi() { alert("hello, world") } </script>
-
标签的位置
-
延迟脚本:添加
defer='defer'
属性 -
异步脚本:添加
async
属性 -
<![CDATA[content]]>
:content部分可以使用任意字符 -
文档模式:
- 混杂模式
- 标准模式
- 准标准模式
-
<noscript>
:指定在不支持脚本的浏览器中显示的替代内容
基本概念
-
标识符
-
注释(与C语言相同)
-
严格模式:
"use strict";
-
变量:
var message
,无论什么类型都采用var
声明,声明不赋值默认为undefined
类型扫描二维码关注公众号,回复: 11529222 查看本文章 -
数据类型
undefined
:未定义boolean
:布尔值string
:字符串number
:数值object
:对象或nullfunction
:函数
-
Number.MIN_VALUE
,Number.MAX_VALUE
,Infinity
,-Infinity
-
NaN
:非数值,是一个特殊的数值。用于表示一个本来要返回数值的操作数未返回数值的情况(不会抛出错误)。任何涉及NaN
的操作都会返回NaN
。NaN
与任何值都不相等,包括自己。 -
isNaN()
:确定参数是否“不是数值”, 任何不能被转换为数值的值都会导致这个函数返回true
-
Number()
:null
0
,undefined
NaN
,字符串规则:- 如果字符串中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即"1"会变成1,"123"会变成123,而"011"会变成11(忽略前导零);
- 如果字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值(忽略前导零);
- 如果字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整数值;
- 如果字符串是空的(不包含任何字符),则将其转换为0;
- 如果字符串中包含除上述格式之外的字符,则将其转换为NaN。
-
parseInt()
:若第一个字符不是数字字符或负号,则返回NaN
parseInt('AF', 16) //16进制解析
-
parseFloat()
-
string
类型不区分单引号与双引号 -
toString()
:数值、布尔值、对象和字符串都有该方法toString(2)
:2表示进制,可将数值转换成2进制的值,并以字符串的形式存储。 -
String()
:在toString
方法的基础上加上了对null
和undefined
类型的支持,null
返回null
,undefined
返回undefined
-
Object类型:
var ob = new Object();
Object实例的属性与方法:
属性与方法 介绍 constructor 保存用于创建当前对象的函数 hasOwnProperty(propertyName) 检查给定的属性在当前对象实例中是否存在,属性名需以字符串形式指定 isPrototypeOf(object) 检查接受的对象是否在当前对象的原型链上 propertyIsEnumerable(propertyName) 检查属性是否能使用for-in语句来枚举 toLocaleString() 返回对象的字符串表示,与执行环境的地区对应 toString() 返回对象的字符串表示 valueOf() 返回对象的字符串、数值或布尔值表示。通常与toString方法的返回值相同 操作符
-
一元操作符
-
递增递减操作符:
++
,--
-
一元加减:
//一元加操作放在数字前无影响,在对非数值使用时像Number()函数对非数值进行转换 var o = { valueOf: function() { return -1; } }; o = +o alert(o) //输出-1 // 一元减操作应用于数值,是该值变为负数,若应用于非数值,相当于进行一元加操作,再对所得结果求相反数
-
-
位操作符
- 按位非(NOT):
~
:返回反码 - 按位与(AND):
&
:同一则一 - 按位或(OR):
|
:同零才零 - 按位异或(XOR):
^
:不同为一 - 左移:
<<
- 右移:
>>
- 按位非(NOT):
-
布尔操作符
-
逻辑非:
!
-
逻辑与:
&&
-
逻辑或:
||
与逻辑与操作相似,如果有一个操作数不是布尔值,逻辑或也不一定返回布尔值;此时,它遵循下列规则:
- 如果第一个操作数是对象,则返回第一个操作数;
- 如果第一个操作数的求值结果为false,则返回第二个操作数;
- 如果两个操作数都是对象,则返回第一个操作数;
- 如果两个操作数都是null,则返回null;
- 如果两个操作数都是NaN,则返回NaN;
- 如果两个操作数都是undefined,则返回undefined。
-
-
乘性操作符:
*
,/
,%
-
加性操作符:
+
,-
-
关系操作符:
<
,>
,<=
,>=
-
相等操作符:
==
,!=
,===
(全等,类型也一致),!==
(不全等) -
条件操作符:
?:
-
赋值操作符:
=
,*=
,-=
, -
逗号操作符
语句
-
if语句
-
do-while语句
-
while语句
-
for语句:在循环内部定义的变量也可以在外部访问到
-
for-in语句:
for (var key in keys){ alert(key); }
-
label语句:
//添加标签,以便将来使用 label: statement start: for (var i=0; i < count; i++){ alert(i); }
-
break与continue语句
-
label语句与break、continue语句的联合使用:
let num = 0; outcome: for(let i = 1; i <= 10; i++){ for(let j = 1; j <= 10; j++){ if(i === 5 && j === 5){ break outcome;//同时退出内部与外部循环 } num++; } }//num:44 let num1 = 0; outcome: for(let i = 1; i <= 10; i++){ for(let j = 1; j <= 10; j++){ if(i === 5 && j === 5){ continue outcome;//退出内层循环,执行外部循环 } num1++; } }//num1:94
-
with语句:关联某个对象
-
switch语句:可以使用任何数据类型,case的值可以是变量和表达式
函数
function sayHi(name, message) { alert("Hello," + name + "," + message); return 1; }
参数:ECMA函数的参数很自由,可以通过arguments来访问
function sayHi() { alert("Hello," + arguments[0] + "," + arguments[1]); return 1; }
不存在函数重载,若定义了两个名字相同的函数,则该名字只属于后定义的函数
-
变量、作用域和内存问题
-
instanceof
操作符:alert(person instanceof Object); //person是Object吗?
-
创建Object实例:
var person = new Object(); person.name = "Snow zhao"; person.age = 18; // 对象字面量表示法 var person = { name: "Snow zhao", age:18 }; //留空花括号 var person = {}; person.name = "Snow zhao"; person.age = 18; //类似python字典类型
-
Array
类型:var colors = new Array(); var colors = new Array(20);//大小为20 var colors = new Array("red", "purple", "orange");//添加元素 //省略new var colors = Array(3); var colors = Array("black"); //数组字面量表示法 var colors = ["red", "white", "brown"]; var colors = [];
数组类型会自动更新数组大小
var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 colors[99] = "black"; // (在位置99)添加一种颜色 alert(colors.length); // 100, 位置3到98为undefined
判断是否为数组类型:
Array.isArray(value)
数组的输出:
var colors = Array("red", "white", "black"); alert(colors);//red,green,blue alert(colors.toString());//red,green,blue alert(colors.valueOf());//red,green,blue alert(colors.toLocaleString());//不一定与toString方法相同 alert(colors.join(","));//red,green,blue alert(colors.join("|"));//red|green|blue
栈:
var colors = new Array(); var count = colors.push("red", "green");//压入栈, count = 2 count = colors.push("black");//count = 3 var item = colors.pop();//item = "black"
队列:
var colors = new Array("black", "white"); var item = colors.shift(); //弹出队首项 //unshift方法, 往队首添加元素,并返回长度 colors.unshift("red");
排序:
let values = [1, 5, 4, 2, 3]; values.sort();//1, 2, 3, 4, 5 alert(values) values = [1, 5, 4, 2, 3]; values.reverse();//3, 2, 4, 5, 1 alert(values); values.reverse();//1, 5, 4, 2, 3 alert(values);
sort方法默认使用升序排列,且实现排序会调用toString方法,比较字符串来排序,如5会排在15之后。
//sort函数 function cmp(value1, value2){ if(value1 <= value2){ return 1; } else{ return -1; } } let values = [1, 5, 4, 2, 3]; values.sort(cmp);//5, 4, 3, 2, 1 alert(values); //sort函数中的传递的函数与C++中的函数效果相反 //reverse()与sort()方法的返回值是排序后的数组
操作方法:
//concat() 复制原数组添加参数中的元素后返回,原数组不变
let colors = ["red", "blue", "yellow"];
let colors2 = colors.concat("green", ["black", 'white']);
alert(colors2);//red,blue,yellow,green,black,white
//slice()截取原数组,返回新数组,原数组不变
let colors3 = colors.slice(1, 2);
alert(colors3);//blue
//splice()功能较为强大
let colors3 = colors.splice(1, 2);//从第二项起删除两项
let colors4 = colors.splice(0, 0, "blond", "brown");//从第一项起不删除,插入两项
let colors5 = colors.splice(1, 1, "red", "purple");//从第二项起,删除一项,插入两项
位置方法:
let nums = [1, 2, 4, 5, 6, 4, 2, 3, 4];
alert(nums.indexOf(4));//第一个出现4的位置
alert(nums.lastIndexOf(4));//倒着数第一个出现4的位置
alert(nums.indexOf(4, 3));//从位置3开始第一个出现4的位置
alert(nums.lastIndexOf(4, 6));//从位置6开始倒着数第一个出现4的位置
迭代方法:
- every():对数组的每一项运行给定函数,若每一项都返回true,则返回true
- filter():对数组的每一项运行给定函数,返回true的项构成的数组
- forEach():对数组的每一项运行给定函数,没有返回值
- map():对数组的每一项运行给定函数,返回每次函数调用结果组成的数组
- some():对数组的每一项运行给定函数,对任意一项返回true,则返回true
numbers = [1, 2, 3, 4, 5, 6, 7];
let everycount = numbers.every(function (item, index, array) {
return (item > 2);
})
alert(everycount);
// 其余几个函数的参数类似
归并方法:
-
reduce():从数组的第一项开始遍历到最后
-
reduceRight():从数组的最后一项开始向前遍历到第一项
//参数,一个函数,一个作为归并基础的初始值(可选) //函数接受4个参数:前一个值、当前值、项的索引和数组对象 /* 这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。 */ let values = [1, 2, 3, 4, 5]; let sum = values.reduce(function (prev, cur, index, array) { return prev + cur; }); alert(sum); //第一次执行回调函数,prev 是1,cur 是2。第二次,prev 是3(1加2 的结果),cur 是3(数组的第三项)
-
Date类型:
//创建date对象 let now = new Date(); //根据特定的时间创建日期对象 let someDate = new Date(Date.parse("May 25, 2004")); //如果parse函数传入的字符串不合理,将返回NaN //直接将表示日期的字符串传给Date构造函数,会在后台调用Date.parse()函数 //Date.UTC()的参数分别是年份、基于0的月份(一月是0,二月是1,以此类推)、月中的哪一天(1到31)、小时数(0到23)、分钟、秒以及毫秒数。 let allFives = new Date(Date.UT)
let start = Date.now(); //do something let end = Date.now(); let result = end - start; alert(result); let start = new Date(); let end = new Date(); let result = end - start; alert(result);
Date的类型的
toLocaleString()
和toString()
方法在浏览器中有差别,valueOf()
方法不返回字符串,而是返回日期的毫秒表示。因此可用比较操作符来比较两个Date对象。Date 类型还有一些专门用于将日期格式化为字符串的方法,这些方法如下。
- toDateString()——以特定于实现的格式显示星期几、月、日和年;
- toTimeString()——以特定于实现的格式显示时、分、秒和时区;
- toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年;
- toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
- toUTCString()——以特定于实现的格式完整的UTC 日期。
-
RegExp类型
用于支持正则表达式
字面量构造
var expression = /pattern /flags;
使用RegExp类型构造正则表达式:
var pattern = new RegExp("[bc]at", 'i');
let re = null, i; for(i = 0; i < 10; i++){ re = /cat/g; re.test("catastrophe"); } for(i = 0; i < 10; i++){ re = new RegExp("cat", "g") re.test("catastrophe"); }
RegExp实例属性:
- global:布尔值,表示是否设定了g标志
- ignoreCase:布尔值,i标志
- lastIndex:整数,表示开始搜索下一个匹配项的字符位置,从0开始
- multiline:布尔值,m标志
- source:正则表达式的字符串,按照字面量的形式
exec()方法:
let text = "mom and dad and baby"; let pattern = /mom( and dad( and baby)?)?/gi; let matches = pattern.exec(text); alert(matches.index); // 0 alert(matches.input); // "mom and dad and baby" alert(matches[0]); // "mom and dad and baby" alert(matches[1]); // " and dad and baby" alert(matches[2]); // " and baby"
在全局模式下index才会改变
test()方法:匹配返回true,否则返回false
toString()和toLocaleString()都返回正则表达式的字面量
RegExp构造函数的属性
let re = /(.)hort/g;
let text = 'this had been a short summer';
if(re.test(text)){
alert(RegExp.input);
alert(RegExp.leftContext); // this has been a
alert(RegExp.rightContext); // summer
alert(RegExp.lastMatch); // short
alert(RegExp.lastParen); // s
alert(RegExp.multiline); //undefined
}
-
Function类型
var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐
function sum(num1, num2){ return num1 + num2; } alert(sum(10,10)); //20 var anotherSum = sum; alert(anotherSum(10,10)); //20 sum = null; alert(anotherSum(10,10)); //20
函数表达式与函数声明
//函数声明 alert(sum(10,10)); function sum(num1, num2){ return num1 + num2; }//ok, 代码执行之前会将函数声明提升到顶部 //函数表达式 alert(sum(10,10)); var sum = function(num1, num2){ return num1 + num2; };//runtime error
函数作为参数传递:
function add(num1, num2){ return num1 + num2; } function callSomefunction(some, number, number2) { return some(number, number2); } let result = callSomefunction(add, 1, 2); alert(result);//3
arguments.callee消除紧密耦合
function factorial(num){ if (num <=1) { return 1; } else { return num * arguments.callee(num-1) } } var trueFactorial = factorial; factorial = function(){ return 0; }; alert(trueFactorial(5)); //120 aler t(factorial(5)); //0 //倘若将arguments.callee换成factorial的话,在调用trueFactorial函数递归时仍然会使用factorial函数,就会导致达不到我们想要的结果
this对象
函数的名字仅仅是一个包含指针的变量而已
函数对象的属性:caller,保存调用当前函数的函数的引用
let inner = function () { alert(arguments.callee.caller); }; function outer(){ inner(); } outer();//将显示outer函数的源代码 //在严格模式下访问arguments.callee, arguments.caller都会导致错误
函数对象的属性与方法:
length:函数接受的参数个数
apply():在特定的作用域中调用函数
call():调用函数
//apply()接受两个参数,一个是在其中运行函数的作用域,另一个是参数数组,第二个参数可以是Array的实例,也可以是arguments对象 function sum(num1, num2){ return num1 + num2; } function callSum1(num1, num2){ return sum.apply(this, arguments); // 传入arguments 对象 } function callSum2(num1, num2){ return sum.apply(this, [num1, num2]); // 传入数组 } alert(callSum1(10,10)); //20 alert(callSum2(10,10)); //20 //在严格模式下,未指定环境对象而调用函数,则this值不会转型为window(全局对象)。除非明确把函数添加到某个对象或者调用apply()或call(),否则this值将是undefined。 //call()方法和apply()方法的区别在于参数的接收方式,call()方法传递的参数必须逐个列举出来
bind():将this值绑定到传给bind()函数的值
-
基本包装类型
三个特殊的引用类型:
Boolean
,Number
,String
var value = "25"; var number = Number(value); //转型函数 alert(typeof number); //"number" var obj = new Number(value); //构造函数 alert(typeof obj); //"object" let falseObject = new Boolean(false); let numberObj = new Number(10); let num = 10; alert(num.toFixed(2));//"10.00", 按指定的小数位返回数值的字符串表示,有自动舍入的特性 alert(num.toExponential(1));//返回以指数表示法表示的数值的字符串形式,接受一个参数,指定输出结果中的小数位数 let num2 = 99; alert(num2.toPrecision(1));//一位有效数字 alert(num2.toPrecision(2));//两位有效数字 alert(num2.toPrecision(3));//三位有效数字
String类型的字符方法:charAt()
和charCodeAt()
,还可以直接通过方括号索引的方法来访问字符串中的字符
操作方法:
- concat():加起来
- slice():第一个参数指定子串的开始位置,第二个参数为子串最后一个字符后面的位置
- substr():第一个参数指定子串的开始位置,第二个参数为返回的字符个数
- substring():取子串
在传递给这些方法的参数是负值的情况下,它们的行为就不尽相同了。其中,slice()方法会将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。最后,substring()方法会把所有负值参数都转换为0。
var stringValue = "hello world";
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)
位置方法:indexOf
,lastIndexOf
trim
方法返回字符串的副本(将删除前置和后缀的所有空格)
大小写转换方法:
var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase()); //"hello world"
alert(stringValue.toLowerCase()); //"hello world"
模式匹配方法:
let text = 'cat, bat, sat, fat, great';
let pattern = /.at/;
let matches = text.match(pattern);
alert(matches.index);
alert(matches[0]);
alert(pattern.lastIndex);
let pos = text.search(/at/);
let result1 = text.replace('at', 'ond');
let result2 = text.replace(/at/g, 'ond');
alert(result1);
alert(result2);
function htmlEscape(text){
return text.replace(/[<>"&]/g, function(match, pos, originalText){
switch(match){
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
}
});
}
alert(htmlEscape("<p class=\"greeting\">Hello world!</p>"));//<p class="greeting">Hello world!</p>
split()方法:
var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
localeCompare()方法:比较字符串a.localeCompare(b), a<b返回-1,a=b返回0,a>b返回1
fromCharCode()方法:
alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
-
单位内置对象
Object,Array,String等
-
Global对象
不属于任何其他对象的属性和方法,最终都是它的属性和方法。
如isNaN(),isFinite(),parseInt(),parseFloat()等都是Global对象的方法。
URI编码方法:
encodeURI()主要用于整个URI(例如,http://www.wrox.com/illegal value.htm),而encode-URIComponent()主要用于对URI 中的某一段(例如前面URI 中的illegal value.htm)进行编码。它们的主要区别在于,encodeURI()不会对本身属于URI 的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看下面的例子。
var uri = "http://www.wrox.com/illegal value.htm#start"; //"http://www.wrox.com/illegal%20value.htm#start" alert(encodeURI(uri)); //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" alert(encodeURIComponent(uri));
eval()方法
将传入的参数当作语句来解析
在eval()中创建的任何变量或函数都不会被提升,因为在解析代码的时候,它们被包含在一个字符串中;它们只在eval()执行的时候创建。严格模式下,在外部访问不到eval()中创建的任何变量或函数,
同样,在严格模式下,为eval 赋值也会导致错误。global对象的属性:
-
window对象
取得Global对象的方法:
let global = function () {
return this;
}();
Math对象:
var max = Math.max(3, 54, 32, 16);
alert(max); //54
var min = Math.min(3, 54, 32, 16);
alert(min); //3
//找到数组中的最大值
let values = [1, 3, 6, 5, 2];
let max = Math.max.apply(Math, values);
alert(max);
//ceil(),floor(),round()等舍入方法
//random()方法,返回大于等于0小于1的随机数
其他方法:
这只是我Javascript笔记中的一小部分,我接下来会陆陆续续更新完我的笔记
如果您觉得我的文章对您有帮助的话,可以点个赞,点个关注,也可以扫描下方二维码关注我。我将在这个公众号上更新自己的学习笔记,以及分享一些实用的软件!
Study and progress together with me!