1、分类
ECMAScript js基本语法与标准
DOM Document Object Model文档对象模型
BOM Browser Object Model浏览器对象模型
tips:DOM和BOM都是一套API(Application programing interface)
2、注释方式
style /* */
body <!-- --!>
script //
/* */
/**
* js说明文档注释
*/
3、简单指令
alert(""); 提示框;
confirm(""); 确认框,点击后会响应返回true或false;
prompt(); 弹出一个输入框;
document.write("");
console.log(""); 在控制台打印相应的信息;
console.dir(""); 在控制台打印出该对象的所有信息;
4、变量命名
数字(0-9)、字母(a-z,A-Z)、下划线(_);
tips:应避免保留字和关键字;
5、NaN和isNaN
isNaN(number),如果number不是数字,则为true;
Number(number),在转换为数字类型时,若number不是数字,则返回NaN;
6、转义字符
\
\r 回车
\n 空格
\t 缩进
\\ 反斜杠
7、逻辑短路、逻辑中断
true || 6; 逻辑或短路,左边为ture返回右值;
6 && true; 逻辑与短路,左边false返回右值;
8、优先级
* / %
+ -
&&
||
?
tips:自上而下优先级越来越高
9、类型转换(type)
parseInt("12a3"); 转为数字,尝试强转;
parseFloat("123.123");
data.toString();
String(data);
tips:变量声明未赋值,其值为undefined;
对象为空,其值为null;
10、三元表达式
eg : a>b?a=1:a=2;
格式:
判断条件?true的时候执行的操作:false的时候执行的操作;
11、数组Array
(1)、定义法
构造函数:
var arr = new Array("123","abc","xxx");
字面量:
var arr = ["123","646","abc"];
数组长度:
var arr = new Array(6);(数组长度为6);
(2)、赋值
arr[0]=1;
12、形参和实参
定义函数时,function funcA(a,b,c){},其中的a、b、c即为形参;
调用函数时,funcA(1,2,3);其中的1、2、3即为实参;
tips:function里面有一个arguments对象,里面存有所有传进函数的实参;
13、函数function
(1)、函数命名
1、 可以使用字符、数字、下划线、$;
2、 不能以数字开头;
3、 不能使用关键字和保留字;
4、 区分大小写;
5、 建议要有意义 -- 动词+名字结构;
6、 驼峰命名法;
7、 函数名不能重名,后面写的重名函数会把前面写的函数给覆盖掉;
(2)、函数的返回值
返回值:
当函数执行完毕之后,所得到的结果就是一个函数返回值
任意函数都有返回值
1、 在函数内部没有显示的写有return的时候,函数的返回值是undefined;
2、 当函数内部有return,但是return后面没有跟着任何内容或者数据的时候,
函数的返回值是undefined,并且return后面的代码不会执行;
3、 当return后面跟着内容或者数据的时候,函数的返回值就是这个跟着的内容或者数据;
(3)、函数的四种形式:
1、没有参数,没有return;
通常在于封装一段过程;
2、没有参数,有return;
通常用于内部封装引用其他函数(闭包,回调);
3、有参数,没有return;
通常用于执行操作的封装;
4、有参数,有return;
常见形式;
(4)、匿名函数
匿名函数的name属性值为anonymous;
函数仅用一次的情况,即用即废;
eg:
setTimeout(function(){
console.log(this.name);
},1000);
tips:在1秒后在控制台打印出本函数的名称;
(5)、回调函数
在一个函数当中,另一个函数作为参数传入该函数中,另一个的这个函数即为回调函数;
eg:
function atack(callback){
return callback;
}
tips:在调用该函数时,指定callback是哪个函数;
atack(func);
(6)、短路运算
作用:防止传入函数的数据不足,造成无法运行;
eg:
function getResult(a,b,fn) {
fn && fn();
}(通常使用逻辑与的短路来决定是否执行回调函数;)
function getResult_2(a,b){
a || 0;
}(通常用逻辑或的短路来防止实参不足的情况,强行赋值;)
(7)、自执行函数
(function func2(){
})()
tips:在函数定义的结束最后写入一个(),该函数定义完成后直接被调用执行;
(8)、递归
在函数执行的最后再一次的调用自身;
tips:递归是一种非常耗资源的做法,通常为了简化运算,还会结合缓存进行;
并且注意,递归必须要有结束判断条件(if),否则该函数被调用后就是死循环;
14、数据类型
(1)、简单数据类型
string、number、boolean
(2)、复杂数据类型
String、Number、Boolean、Array、Math、Date、Obeject、function、RegExp(正则表达式)
(3)、空数据类型
* Null ---→Null的数据类型会返回一个Object
* undifined
tips:用typeof可以进行判断数据类型;
tips:定义的简单数据类型变量,其数据保存在变量中;
而复杂数据类型,其变量保存的是数据所在的内存地址;
15、内置对象
Array、Date、Math、String;
16、(Math)数学对象
向上取整 Math.ceil(number);
向下取整 Math.floor(number);
四舍五入 Math.round(number);
求多个数字之间的最大值 Math.max();
求多个数字之间的最小值 Math.min();
求x的y次幂 Math.pow(x,y);
求正弦值 Math.sin(x);
example:
求一个角度的正弦值,要求x必须是一个额弧度值
角度和弧度的转换公式:
弧度 = 角度 * 2 * Math.PI / 360;
Math.sin(30*2*Math.PI/360)
Math.abs(x); 得到一个数字的绝对值
17、(Array)数组对象
(1)、arr1.concat(arr2);
数组拼接,结果为将arr2拼接到arr1的最后;
(2)、arr.join();
数组字符串输出,括号内可以指定元素连接的符号;
eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (结果为"a|b|c|d")
(3)、arr.pop();
切除数组的最后一个元素,返回值为该元素;
(4)、arr.slice(start,end)
获取,获取数组的指定片段,start必须有,如果参数为负数则从末尾开始选取;
返回值为该片段组成的,一个新的数组;
(5)、arr.push
添加,用于向数组的末尾添加新的元素,参数可以是多个;
返回值为数组的新长度;
(6)、arr.splice
1、用于向数组中指定的索引添加元素;
arr.splice(2, 0, "William","asdfasdf");
在第2个元素开始,删除的元素个数(可以为0,为0到结尾),
加入元素为"William"、"asdfasdf";
2、用于替换数组中的元素;
arr.splice(2,1,"William");
3、用于删除数组中的元素;
arr.splice(2,2);
(7)、arr.indexOf(element);
查找,在数组中查找element,返回值为索引,如果没有该元素返回-1;
(8)、arr.sort(function);
排序,function为一个函数;
eg:
function sortNumber(a,b){
return a-b;
}
arr.sort(sortNumber);(从小到大排序)
tips:如果a-b改成b-a,那么执行的操作为从大到小;
tips:字符串对象(String)的方法与Array的方法类似;
18、(Date)日期对象
date.getTime()
date.getMilliseconds()
date.getSeconds()
date.getMinutes()
date.getHours()
date.getDay()
date.getDate()
date.getMonth()
date.getFullYear()
tips:很多,查文档
19、(String)对象
charAt(index)
str[index] 获取字符串指定位置的字符
concat() 拼接字符串
---------------------------
slice(start,end)/
substring(start,end) 截取从start开始,end结束的字符,
返回一个新的字符串,若start为负数,那么从最后一个字符开始;
substr(start,length) 截取从start开始,length长度的字符,得到一个新的的字符串
---------------------------
indexOf(char) 获取指定字符第一次在字符串中的位置
lastIndexOf(char) 获取指定字符最后一次出现在字符串中的位置
trim() 去除字符串前后的空白
---------------------------
toUpperCase()
toLocaleUpperCase() 转换为大写
toLowerCase()
toLocaleLowerCawse() 转换为小写
---------------------------
replace() 替换字符
split() 分割字符串为数组
20、自定义对象
对象:无序属性的集合;
特征:属性(key);
行为:方法(value);
js是基于对象的弱类型语言;
继承:基于类,子类可以从父类得到的特征;
工厂模式:定义一个function构造函数,作为对象,要创建对象直接调用该构造函数,加new关键字;
构造函数:定义对象的函数,里面存有该对象拥有的基本属性和方法;
命名首字母大写,this会自动指代当前对象;
访问对象属性:
obj[key];
obj.key;
遍历对象:
for(key in obj){
key 为属性名;
obj[key] 为属性值(value);
}
21、JSON
{
"name" : "李狗蛋",
"age" : 18,
"color" : "yellow"
}
1、 所有的属性名,必须使用双引号包起来;
2、 字面量侧重的描述对象,JSON侧重于数据传输;
3、 JSON不支持undefined;
4、 JSON不是对象,从服务器发来的json一般是字符串,
通过JSON.parse(jsonDate.json)可以将其转换成js对象;
22、JS解析
(1)、作用域
全局作用域:整个代码所有地方都可以调用;
局部作用域:在函数内部声明的变量,只可以在函数内部使用;
(2)、变量提升和函数提升
预解析:在解析的时候,var和function都会被提升到代码的最顶端;
但是赋值操作不会被提升,定义和函数才会被提升;
if里面的变量定义也会被提升,但是赋值操作不会;
23、其他细节(tips)
(1)、元素由对象组成的数组进行排序
eg:
var data = [
{title: "老司机", count: 20},
{title: "诗人", count: 5},
{title: "歌手", count: 10},
{title: "隔壁老王", count: 30},
{title: "水手", count: 7},
{title: "葫芦娃", count: 6},
];
//该数组的元素都为对象。我们需求为根据count的值给数组重新排序。
//解决方案:使用sort方法,对传入的函数做手脚。
function sortArr(a,b){
return a.count > b.count;
}
data.sort(sortArr);
//原本的a和b的比较方法变成a.count和b.count;
//原本的比较方法可以参见17,数组对象
//至此,data将以count值从小到大排列。
tips:Array对象的sort方法传入的为比较函数,比较函数里return排序比较的方法;
原始的sort方法传入的函数内部return的值为a>b,
通过修改sort传入的函数,可以实现对元素为对象的数组的排序!
1.JavaScript:基于对象和事件驱动的脚本语言。嵌入到html中用。后缀名:.js
2.JavaScript的作用:
2.1:交互性:表单验证,异步请求。
2.2:与平台无关性:只需要浏览器解析,与平台无关。
2.3:安全性:不能直接访问本地磁盘。
3.JavaScript的组成部分:ECMAScript(JS基础),DOM,BOM。
4.JavaScript的特点:需要浏览器解析,是一种弱类型语言。
5.页面引入JavaScript的三种方式:
5.1:行内引入:
eg:<!--行内引入Js-->
<input type="button" value="点我试试" οnclick="javaScript:alert('再点一下试试')" />
5.2:内部引入:
eg:<!--内部js-->
<script type="text/javascript">
alert("这是一个内部Js");
</script>
5.3:外部引入
eg:<!--引入外部js-->
<script type="text/javascript" src="js/1.js" ></script>
6.JavaScript基础语法:
6.1:js输出
eg:/*Js在html的body中输出*/
document.write("Hello Js");
/*弹出一个窗体输出*/
alert("Hello js2");
/*在控制台输出*/
console.log("Hello js3");
6.2:js数据类型:number,string,boolean,undefined,null
6.4:判断变量的类型:type 变量名
6.5:js中判断值是否是非数字不考虑变量数据类型:isNaN(变量)
6.6:==和===
==;在js中,比较是2个变量的值,不考虑数据类型
===在js中,比较的是2个变量的数据类型和值
6.7js中表示false:"",null,undefined,false,NaN,0
7.js中数组的使用:像Java中的集合和数组中合体。
7.1:数组的声明:四种方式
eg://声明数组
var arr1=[1,7,9,11];
var arr2=new Array();
arr2[0]=33;
arr2[1]=11;
var arr3=new Array(3);
arr3[0]=33;
arr3[1]=11;
arr3[2]=55;
arr3[3]=22;
var arr4=new Array(88,22,66);
7.2:向数组中添加元素:三种方式
eg://向数组中添加元素
arr4[3]=77;
//向数组的末尾添加元素
arr4.push(11,33);
//向数组的开头或结尾添加元素
arr4.unshift(44,55);
7.3:删除数组中的元素:四种方式
eg://删除数组中最后一个元素
arr4.pop();
//删除数组中第一个元素
arr4.shift();
//删除数组中所有的元素
arr4.length=0;
//删除数组中指定位置的元素
delete arr4[4];
7.4:修改数组中的元素:两种方式
//删除数组中的元素,再添加新元素(替换数组中元素)
arr4.splice(2,3,99,33);//第一个参数删除起始位置,第二个参数删除,第三个参数 开始添加的新元素
//修改数组中元素
arr4[0]=66;
7.5:给数组排序:数据名.sort();
8.流程控制语句:if结构,if-else结构,多重if结构,嵌套if结构,switch结构,while循环,
do-while循环,for循环与java中的使用方式一样。
break和continue,return与java中的使用方式一样。
8.1:for-in与Java中的增强版的for不一样:
eg:/*for-in:遍历普通数组,遍历索引*/
var arr1=[1,5,2,4,6];
for(var i in arr1){
document.write(i+"<br/>");
}
/*for-in:遍历Json对象,遍历的是对象的属性*/
var ob1={"sname":"肖宁","sage":18,"sex":"中"};
for(var i2 in ob1){
document.write(i2+"<br/>");
}
/*for-in:遍历Json对象数组,遍历的是索引*/
var ob2=[{"sname":"肖宁","sage":18,"sex":"中"},{"sname":"洪伟坚","sage":17,"sex":"母"},{"sname":"容海波","sage":99,"sex":"女"}];
for(var i3 in ob2){
document.write(i3+"<br/>");
}
9.Js中函数:相当于Java中的方法。函数不调用不执行。
9.1:声明语法:function 函数名(【参数列表】){
函数体;
【return 变量;】
}
函数调用语法: 函数名(【参数列表】);
eg:/*无参无返回值的函数*/
function show1(){
alert("这是一个无参无返回值的函数");
}
/*有参无返回值的函数*/
function show2(a,b){
alert("这是一个有参无返回值的函数,参数为:"+a+","+b);
}
/*无参有返回值的函数*/
function show3(){
alert("这是一个无参有返回值的函数");
return "哈哈";
}
/*有参有返回值的函数*/
function show4(a,b){
alert("这是一个有参有返回值的函数");
return a+b;
}
<input type="button" value="调用无参无返回值方法" οnclick="show1()"/>
<input type="button" value="调用有参无返回值方法"
οnclick="show2(1,2)"/>
<input type="button" value="调用无参有返回值方法" οnclick="javascript:alert(show3())"/>
<input type="button" value="调用有参有返回值方法" οnclick="javascript:alert(show4(11,22))"/>
9.2:在Js中不能出现重载函数,原因javascript是一种弱类型的语言。参数列表无法区分数据 类型。
9.3:匿名函数:
声明语法:var 变量名=function(【参数列表】){
函数体;
【return 返回值;】
}
调用语法:变量名(【参数列表】);
eg:/*匿名函数*/
var f=function(num1,num2){
alert("这是一个匿名函数,参数为:"+num1+","+num2);
}
<input type="button" value="调用匿名方法" οnclick="f(3,4)"/>
9.4:系统函数:
parseInt():试图将其收到的任何输入值转换成整数类型,转换失败则返回NaN,无论成功或失败,最后数据都是number.将数值部分能 转,不能转不要。
parseFloat():同上类似
eg:var num1="1a23";
num1=parseInt(num1);
var num2="3.14";
num2=parseFloat(num2);
isNaN():判断是否为非数字
isFinite():如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负 无穷大的数,则返回 false。
eg:document.write(isFinite(num4));
eval():会将其输入的字符串当作javascript代码来执行
eg://将String类型当作Javascript执行
eval("alert('你好')");
//将String类型转换为JavaScript对象
var s1="{'sname':'张三','age':18}";
document.write(typeof s1);
document.write("<br/>");
var ob=eval("("+s1+")");
document.write(typeof ob);
document.write("<br/>");
document.write(ob.sname+","+ob.age);
李老师讲的:
/* 类似java的可变参数的用法,来实现重载*/
function add(){
//console.log("-----------"+arguments.length);
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
//另外一种函数实现的方式: 类似匿名内部类方式
add2 = function(){
console.log("另外一种重要函数实现");
}
add2(); //注意:这是函数实现,调用部分一定要写后面,否则调用不到
第二点:
<script>
//parseInt: 将数字字符串转换为整数
var a = "99";
a = parseInt(a);
console.log(a); //99
console.log(typeof a); //number
a = "99感冒灵";
a = parseInt(a); //会将前面能转的转出来
console.log(a); //99
console.log(typeof a); //number
a = "感冒灵99";
a = parseInt(a); //前面非数字,无法转--NaN
console.log(a); //NaN
console.log(typeof a); //number
//a = "99";
a = "3.14";
console.log(parseInt(a)); //99 number 3
console.log(parseFloat(a)); //99 number 3.14
//---扩展----
console.log(parseInt("13",5)); //8 5进制的“13”转10进制输出
console.log(parseInt("13",8)); //11 8进制的“13”转10进制输出
console.log(parseInt("13",9)); //12 9进制的“13”转10进制输出
//判断是否为非数字: isNaN
console.log(isNaN(NaN)); //true
console.log(isNaN(11)); //false 是数字
console.log(isNaN("abc")); //true
console.log(isNaN("123")) //false 是数字
//isFinite():判断输入的是否是一个既非Infinity也非NaN的数字
console.log(isFinite(NaN)); //false
console.log(isFinite(Infinity)); //false
console.log(isFinite("123")); //true
console.log(isFinite("abc")); //false
console.log(isFinite(11)); //true
//eval():会将其输入的字符串当作javascript代码来执行
eval("var num = 5;alert(num);");
//应用场景: 在数据传输时有作用---json
</script>